feat(web): set up Storybook (preview + MSW + stories for real components)

2026-06-05 16:55:40 +02:00
parent 4e1138f8ce
commit b2d026f217
17 changed files with 2400 additions and 30 deletions
@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-mcp"
+  ],
+  "framework": "@storybook/react-vite",
+  "staticDirs": ["../public"]
+};
+export default config;
@@ -0,0 +1,57 @@
+import type { Preview } from '@storybook/react-vite'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { initialize, mswLoader } from 'msw-storybook-addon'
+import { MemoryRouter } from 'react-router-dom'
+
+import '../src/index.css'
+import '../src/i18n'
+import { LOCALE_KEY } from '../src/i18n'
+import { ConfigProvider } from '../src/config/config-provider'
+import { handlers } from '../src/test/handlers'
+
+initialize({ onUnhandledRequest: 'bypass' })
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    },
+
+    msw: { handlers },
+  },
+  loaders: [mswLoader],
+  beforeEach() {
+    // Pin the UI language so text-based assertions are deterministic; also
+    // stops ConfigProvider from switching to the instance default at runtime.
+    localStorage.setItem(LOCALE_KEY, 'en')
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: { queries: { retry: false } },
+      })
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <ConfigProvider>
+            <MemoryRouter>
+              <Story />
+            </MemoryRouter>
+          </ConfigProvider>
+        </QueryClientProvider>
+      )
+    },
+  ],
+};
+
+export default preview;