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

Story anatomy

Story एक named export है जो component की एक state बताती है। Component Story Format 3 (CSF3) में हर story args वाला object होती है, और default export में component का metadata रहता है। दोनों मिलकर story file बनाते हैं।

Basic story example

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

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  component: Button,
  title: 'Components/Button',
} satisfies Meta<typeof Button>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = { args: { variant: 'primary', children: 'Click me' } };
export const Secondary: Story = { args: { variant: 'secondary', children: 'Cancel' } };
export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };

Story file naming

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

Multiple stories को export करना

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