Decorators और Global Setup

Decorators क्या हैं?

Decorators ऐसे functions हैं जो हर story के लिए आपके component को wrap करते हैं। ये themes, providers, mock data, और अन्य global setup provide करने के लिए उपयोगी हैं जो आपके component को चाहिए।

Theme decorator example

यहाँ बताया गया है कि components को theme provider के साथ कैसे wrap करें।

import { ThemeProvider } from './theme';

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

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

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

Global decorators

सभी stories पर लागू करने के लिए .storybook/preview.ts में decorators define करें। यह global theme setup या language providers के लिए उपयोगी है।

Mock data और services

Decorators और MSW (Mock Service Worker) का use करके API responses को mock करें और विभिन्न data scenarios के साथ component behavior को test करें।