अपनी पहली Story लिखें

Story anatomy

एक story एक named export है जो specific props के साथ एक component return करती है। Default export में component के बारे में metadata होता है। एक साथ, वे एक Story File बनाते हैं।

Basic story example

यहाँ एक सरल Button component story है जो default state को दिखाती है।

import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Primary = () => <Button variant="primary">Click me</Button>;
export const Secondary = () => <Button variant="secondary">Cancel</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;

Story file naming

Story files को ComponentName.stories.tsx नाम से रखा जाना चाहिए और component file के पास रखा जाना चाहिए। यह stories को उनके components के पास रखता है।

Multiple stories को export करना

अलग-अलग scenarios बनाने के लिए अपनी story file से कई named functions को export करें। हर export Storybook में एक अलग story बन जाता है।