# अपनी पहली Story लिखें — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/hi/storybook/sb-stories

> Component Story Format (CSF3) में अपनी पहली Storybook story लिखें, जिसमें हर component state के लिए args हों।

## 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 को दिखाती है।

```tsx
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 बन जाता है।