feat(ui): storybook 10 over the real pages + screenshot harness

Preview imports the mock transport statically and wraps every story in a fresh RegistryProvider seeded with mock mode + the story's scenario parameter (dark default, light via toolbar). One story file per page (Default + FirstRun/Syncing/Errors where meaningful) plus the whole shell. tools/screenshots.mjs mirrors the console's harness: headless Chromium over storybook-static, every Pages/* + Shell/* story. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-20 19:41:59 +02:00
parent f3e80f10ec
commit e9a4d3a996
9 changed files with 308 additions and 0 deletions
@@ -0,0 +1,12 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.stories.tsx"],
+	addons: [],
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+};
+
+export default config;
@@ -0,0 +1,65 @@
+// Storybook renders the REAL pages on the mock transport: the static import below
+// registers the fixture HttpClient layer + status ticker (Storybook bundles are never
+// shipped, so fixtures in them are fine), and the decorator gives every story a fresh
+// atom registry seeded with mock mode + the story's scenario.
+import "../src/styles.css";
+import "../src/mocks/http";
+import { RegistryProvider } from "@effect/atom-react";
+import { definePreview } from "@storybook/react-vite";
+import { useEffect } from "react";
+import {
+	apiModeAtom,
+	type Scenario,
+	scenarioAtom,
+} from "../src/mocks/scenario";
+
+export default definePreview({
+	addons: [],
+	// The console pins dark; default the canvas to dark with a toolbar light switch.
+	initialGlobals: { theme: "dark" },
+	globalTypes: {
+		theme: {
+			description: "Light/dark color scheme",
+			toolbar: {
+				title: "Theme",
+				icon: "circlehollow",
+				items: [
+					{ value: "dark", icon: "moon", title: "Dark" },
+					{ value: "light", icon: "sun", title: "Light" },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	decorators: [
+		(Story, context) => {
+			const dark = (context.globals.theme as string) !== "light";
+			const scenario =
+				(context.parameters.scenario as Scenario | undefined) ?? "healthy";
+			const fullscreen = context.parameters.layout === "fullscreen";
+			// Mirror `.dark` onto <html> so portal-mounted content (selects, dialogs,
+			// toasts) picks up the palette — the theme keys everything off `html.dark`.
+			useEffect(() => {
+				document.documentElement.classList.toggle("dark", dark);
+			}, [dark]);
+			return (
+				<RegistryProvider
+					key={`${scenario}-${dark}`}
+					initialValues={[
+						[apiModeAtom, "mock"],
+						[scenarioAtom, scenario],
+					]}
+				>
+					<div
+						className={`min-h-screen bg-background text-foreground ${fullscreen ? "" : "p-6"}`}
+					>
+						<Story />
+					</div>
+				</RegistryProvider>
+			);
+		},
+	],
+	parameters: {
+		layout: "padded",
+	},
+});