/** * Storybook preview: MSW intercepts all API calls when run via `npm run storybook` / `npm run build-storybook`. * Those scripts set VITE_API_URL=/api/v1 (same-origin) and VITE_STORYBOOK=true (logger does not send to backend). * Do not run Storybook with an absolute API URL or MSW will not intercept. */ import type { Preview } from '@storybook/react'; import { initialize, mswLoader } from 'msw-storybook-addon'; import { handlers } from '../src/mocks/handlers'; import '../src/index.css'; import '../src/lib/i18n'; // Initialize i18n import React from 'react'; import { StorybookDecorator } from './decorators'; // Custom viewports for responsive testing const customViewports = { mobile: { name: 'Mobile', styles: { width: '375px', height: '667px', }, }, tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px', }, }, desktop: { name: 'Desktop', styles: { width: '1440px', height: '900px', }, }, }; // Initialize MSW: strict mode — any unhandled request throws in console and fails the story. initialize({ onUnhandledRequest: 'error', serviceWorker: { url: './mockServiceWorker.js', }, }); const preview: Preview = { parameters: { msw: { handlers: handlers, }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, expanded: true, }, a11y: { test: 'todo', }, viewport: { viewports: customViewports, }, backgrounds: { default: 'dark', values: [ { name: 'dark', value: '#121215' }, { name: 'light', value: '#faf9f6' }, { name: 'raised', value: '#1a1a1f' }, ], }, layout: 'centered', docs: { toc: true, // Enable table of contents in docs }, }, decorators: [StorybookDecorator], tags: ['autodocs'], loaders: [mswLoader], }; export default preview;