enricobuehler
e9a4d3a996
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>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
// 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",
|
|
},
|
|
});
|