|
| 1 | +// Storybook compiles .storybook/* with the classic JSX runtime, so the JSX in |
| 2 | +// the decorators below transpiles to React.createElement and needs React in |
| 3 | +// scope. (The app + story files use the automatic runtime via the portal vite |
| 4 | +// config; this import is specifically for the preview config file.) |
| 5 | +import React, { useEffect } from "react"; |
| 6 | +import type { Decorator, Preview } from "@storybook/react-vite"; |
| 7 | +import { initialize, mswLoader } from "msw-storybook-addon"; |
| 8 | +import { MemoryRouter } from "react-router-dom"; |
| 9 | +import { withThemeByDataAttribute } from "@storybook/addon-themes"; |
| 10 | +import { MantineProvider } from "@mantine/core"; |
| 11 | + |
| 12 | +// Reference React so the import isn't dropped as unused by the bundler — the |
| 13 | +// classic runtime needs it present even though it's not named in the JSX. |
| 14 | +void React; |
| 15 | + |
| 16 | +import { TierProvider, type Tier } from "@portal/contexts/TierContext"; |
| 17 | +import { ThemeProvider } from "@portal/contexts/ThemeContext"; |
| 18 | +import { UIProvider } from "@portal/contexts/UIContext"; |
| 19 | +import { mantineTheme } from "@portal/theme/mantineTheme"; |
| 20 | +import { handlers } from "@portal/mocks/handlers"; |
| 21 | + |
| 22 | +import "@mantine/core/styles.css"; |
| 23 | +import "@shared/tokens/tokens.css"; |
| 24 | +import "@shared/tokens/base.css"; |
| 25 | + |
| 26 | +// Start MSW once. Storybook runs in a browser so this uses the service worker. |
| 27 | +initialize({ onUnhandledRequest: "bypass" }, handlers); |
| 28 | + |
| 29 | +/** |
| 30 | + * Bridge between Storybook's `tier` global toolbar and the actual TierProvider. |
| 31 | + * Without this the toolbar would just change a label; with it, every story |
| 32 | + * that calls useTier() reflects the active toolbar value. |
| 33 | + */ |
| 34 | +function TierBridge({ |
| 35 | + tier, |
| 36 | + children, |
| 37 | +}: { |
| 38 | + tier: Tier; |
| 39 | + children: React.ReactNode; |
| 40 | +}) { |
| 41 | + return <TierProvider initialTier={tier}>{children}</TierProvider>; |
| 42 | +} |
| 43 | + |
| 44 | +/** Forces the TierProvider to re-mount whenever the toolbar tier changes. */ |
| 45 | +function TierKey({ |
| 46 | + tier, |
| 47 | + children, |
| 48 | +}: { |
| 49 | + tier: Tier; |
| 50 | + children: React.ReactNode; |
| 51 | +}) { |
| 52 | + return ( |
| 53 | + <TierBridge key={tier} tier={tier}> |
| 54 | + {children} |
| 55 | + </TierBridge> |
| 56 | + ); |
| 57 | +} |
| 58 | + |
| 59 | +/** Keeps useTheme() and the data-theme attribute in sync. */ |
| 60 | +function ThemeWatcher() { |
| 61 | + useEffect(() => { |
| 62 | + // The addon-themes decorator already sets data-theme on <html>. |
| 63 | + // We just read it on mount so ThemeProvider picks it up. |
| 64 | + }, []); |
| 65 | + return null; |
| 66 | +} |
| 67 | + |
| 68 | +const withProviders: Decorator = (Story, context) => { |
| 69 | + const tier = (context.globals.tier as Tier) ?? "pro"; |
| 70 | + // withThemeByDataAttribute exposes the toolbar theme as the `theme` global. |
| 71 | + // Bind Mantine's color scheme to it so Mantine chrome (inputs, focus rings, |
| 72 | + // default surfaces) follows the dark toggle alongside the SUI CSS variables. |
| 73 | + // The global initialises to "" (before any toolbar interaction), so treat |
| 74 | + // anything that isn't "dark" as light — matching the addon's own |
| 75 | + // `selected || defaultTheme` fallback where defaultTheme is light. |
| 76 | + const colorScheme = context.globals.theme === "dark" ? "dark" : "light"; |
| 77 | + return ( |
| 78 | + <MemoryRouter initialEntries={["/"]}> |
| 79 | + <ThemeProvider> |
| 80 | + <MantineProvider theme={mantineTheme} forceColorScheme={colorScheme}> |
| 81 | + <TierKey tier={tier}> |
| 82 | + <UIProvider> |
| 83 | + <ThemeWatcher /> |
| 84 | + <Story /> |
| 85 | + </UIProvider> |
| 86 | + </TierKey> |
| 87 | + </MantineProvider> |
| 88 | + </ThemeProvider> |
| 89 | + </MemoryRouter> |
| 90 | + ); |
| 91 | +}; |
| 92 | + |
| 93 | +const preview: Preview = { |
| 94 | + loaders: [mswLoader], |
| 95 | + parameters: { |
| 96 | + layout: "padded", |
| 97 | + controls: { |
| 98 | + matchers: { color: /(background|color)$/i, date: /Date$/i }, |
| 99 | + }, |
| 100 | + backgrounds: { |
| 101 | + default: "app", |
| 102 | + values: [ |
| 103 | + { name: "app", value: "var(--color-bg)" }, |
| 104 | + { name: "surface", value: "var(--color-surface)" }, |
| 105 | + ], |
| 106 | + }, |
| 107 | + a11y: { |
| 108 | + // Run axe automatically against the story root; violations show in the |
| 109 | + // Accessibility panel. `context` replaced `element` in addon-a11y 9.x. |
| 110 | + context: "#storybook-root", |
| 111 | + config: {}, |
| 112 | + options: {}, |
| 113 | + test: "todo", |
| 114 | + }, |
| 115 | + }, |
| 116 | + globalTypes: { |
| 117 | + tier: { |
| 118 | + name: "Tier", |
| 119 | + description: "Subscription tier — drives useTier() everywhere", |
| 120 | + defaultValue: "pro", |
| 121 | + toolbar: { |
| 122 | + icon: "star", |
| 123 | + items: [ |
| 124 | + { value: "free", title: "Free" }, |
| 125 | + { value: "pro", title: "Pay-as-you-go" }, |
| 126 | + { value: "enterprise", title: "Enterprise" }, |
| 127 | + ], |
| 128 | + dynamicTitle: true, |
| 129 | + }, |
| 130 | + }, |
| 131 | + }, |
| 132 | + decorators: [ |
| 133 | + withProviders, |
| 134 | + withThemeByDataAttribute({ |
| 135 | + themes: { light: "light", dark: "dark" }, |
| 136 | + defaultTheme: "light", |
| 137 | + attributeName: "data-theme", |
| 138 | + }), |
| 139 | + ], |
| 140 | +}; |
| 141 | + |
| 142 | +export default preview; |
0 commit comments