Storybook

The Storybook plugin sets up Storybook for component development and visual testing. It uses the @storybook/nextjs framework integration so components render with full Next.js support (App Router, next/font, next/image, next/navigation).

Live Demo: https://main--69af11b25d5e544eb3cebc21.chromatic.com/

The Storybook plugin installs these dev dependencies:

• storybook - Core Storybook CLI and dev server
• @storybook/nextjs - Next.js framework integration
• @storybook/react - React renderer
• msw - Mock Service Worker for API mocking
• msw-storybook-addon - MSW integration for Storybook
• tsconfig-paths-webpack-plugin - TypeScript path alias resolution

After dependencies are installed, the plugin runs npx msw init public --save to generate the mockServiceWorker.js service worker file in the public/ directory.

The install generates three files in .storybook/:

Configures story discovery, static directories, environment variables, and webpack aliases:

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  staticDirs: ['../public'],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  env: (config) => ({
    ...config,
    FRONTEND_URL: '',
    SITE_NAME: 'Storybook',
    STRIPE_PUBLISHABLE_KEY: 'pk_test_storybook_placeholder',
  }),
};

For cookie-based session projects, the webpack config adds an alias that swaps the real useTokenManager with a Storybook-safe mock:

config.resolve.alias = {
  '@auth/useTokenManager': path.resolve(__dirname, '../src/testing/mocks/useTokenManager.storybook'),
};

Sets up global decorators, MSW initialization, and the session parameter system:

• MSW initialization - Starts the mock service worker
• ThemeProvider decorator - Wraps stories in the theme context
• SessionProvider decorator - Provides session state to components
• session parameter - Stories pass mock session data via parameters.session
• MSW handler injection - The beforeEach hook merges session handlers with story-specific handlers

Loads Google Fonts (Source Sans 3 and Playfair Display) and sets CSS custom properties for font families.

npx storybook dev -p 6006

Stories are co-located with their components:

src/
  features/
    shop/
      ProductCard/
        ProductCard.tsx
        ProductCard.stories.tsx
    cart/
      CartItem/
        CartItem.tsx
        CartItem.stories.tsx

Stories use the parameters.session convention to provide mock session data. The preview configuration automatically:

1. Reads context.parameters.session from each story
2. Generates MSW handlers that return the mock session data for /api/session requests
3. Passes the session as initialState to SessionProvider

export const WithCartItems: Story = {
  parameters: {
    session: {
      cart: {
        contents: { nodes: [mockCartItem], itemCount: 1 },
        total: '29.99',
      },
      customer: mockCustomer,
    },
  },
};

Stories that need additional MSW handlers can add them via parameters.msw.handlers:

export const WithProducts: Story = {
  parameters: {
    msw: {
      handlers: [
        http.post('/api/products', () => HttpResponse.json(mockProducts)),
      ],
    },
  },
};

The generated project includes a GitHub Actions workflow for deploying Storybook to Chromatic for visual regression testing. Set the CHROMATIC_PROJECT_TOKEN secret in your GitHub repository settings to enable automatic deployments on push.