Web-Frontend/client/.storybook/preview.jsx

import React from 'react';
import { Provider } from '../src/components/ui/provider';
// 1. Import MSW
import { initialize, mswLoader } from 'msw-storybook-addon';

// 2. Initialize MSW
initialize();

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      default: 'dark',
      values: [
        { name: 'dark', value: '#1a202c' },
        { name: 'light', value: '#ffffff' },
      ],
    },
  },
  // 3. Add the MSW loader so it intercepts network requests in your stories
  loaders: [mswLoader],
  decorators: [
    (Story) => (
        <Provider>
          <Story />
        </Provider>
    ),
  ],
};

export default preview;