[UI v2] experiment: Adds dark mode decorator for all stories (#16670)

PrefectHQ · Jan 10, 2025 · aef571f · aef571f
1 parent 11d32be
commit aef571f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/ui-v2/.storybook/preview-body.html b/ui-v2/.storybook/preview-body.html
@@ -0,0 +1,2 @@
+<html class="bg-slate-800">
+</html>
diff --git a/ui-v2/.storybook/preview.ts b/ui-v2/.storybook/preview.ts
@@ -1,3 +1,4 @@
+import { ModeDecorator } from "@/storybook/utils";
 import type { Preview } from "@storybook/react";
 import { handlers } from "@tests/utils/handlers";
 import { initialize, mswLoader } from "msw-storybook-addon";
@@ -16,6 +17,7 @@ export default {
 			},
 		},
 	},
+	decorators: [ModeDecorator],
 	// Provide the MSW addon loader globally
 	loaders: [mswLoader],
 } satisfies Preview;
diff --git a/ui-v2/src/storybook/utils/index.ts b/ui-v2/src/storybook/utils/index.ts
@@ -1,3 +1,4 @@
 export { routerDecorator } from "./router-decorator";
 export { reactQueryDecorator } from "./react-query-decorator";
 export { toastDecorator } from "./toast-decorator";
+export { ModeDecorator } from "./mode-decorator";
diff --git a/ui-v2/src/storybook/utils/mode-decorator.tsx b/ui-v2/src/storybook/utils/mode-decorator.tsx
@@ -0,0 +1,31 @@
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { StoryFn } from "@storybook/react";
+import { useEffect, useState } from "react";
+
+export const ModeDecorator = (Story: StoryFn) => {
+	const [isDarkMode, setIsDarkMode] = useState(false);
+	const toggleMode = () => {
+		setIsDarkMode((curr) => !curr);
+	};
+
+	// sync external css  with state
+	useEffect(() => {
+		document.documentElement.classList.toggle("dark", isDarkMode);
+	}, [isDarkMode]);
+
+	return (
+		<>
+			<div className="absolute bottom-4 left-4 z-50">
+				<div className="flex items-center space-x-2">
+					<Switch id="theme-mode" checked={isDarkMode} onClick={toggleMode} />
+					<Label htmlFor="theme-mode">
+						{isDarkMode ? "Light Mode" : "Dark Mode (experimental)"}
+					</Label>
+				</div>
+			</div>
+			{/** @ts-expect-error Error typing from React 19 types upgrade. Will need to wait for this up be updated */}
+			<Story />
+		</>
+	);
+};