Decorators and Global Setup

What are decorators?

Decorators are functions that wrap your component for every story. They're useful for providing themes, providers, mock data, and other global setup that your component needs.

Theme decorator example

Here's how to wrap components with a theme provider.

import { ThemeProvider } from './theme';

const themeDecorator = (Story) => (
  <ThemeProvider theme="light">
    <Story />
  </ThemeProvider>
);

export default {
  component: MyComponent,
  decorators: [themeDecorator],
};

export const LightTheme = () => <MyComponent />;

Global decorators

Define decorators in .storybook/preview.ts to apply them to all stories. This is useful for global theme setup or language providers.

Mock data and services

Use decorators and MSW (Mock Service Worker) to mock API responses and test component behavior with different data scenarios.