storybook-story-writing

# Storybook - Story Writing

Write well-structured, maintainable Storybook stories using Component Story Format 3 (CSF3) that showcase component variations and ensure consistent rendering.

## Key Concepts

### Component Story Format 3 (CSF3)

CSF3 is the modern Storybook format that uses object syntax for stories:

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

const meta = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};
```

### Story Organization

- One story file per component: `Component.stories.tsx`
- Use descriptive story names: `Primary`, `Secondary`, `Large`, `Disabled`
- Group related stories under a title hierarchy: `Components/Forms/Input`

### Default Export (Meta)

The default export defines metadata for all stories:

```typescript
const meta = {
  title: 'Components/Button',        // Navigation path
  component: Button,                  // Component reference
  parameters: {},                     // Story-level config
  tags: ['autodocs'],                // Enable auto-documentation
  argTypes: {},                       // Control types
  decorators: [],                     // Wrappers for stories
} satisfies Meta<typeof Button>;
```

## Best Practices

### 1. Use TypeScript for Type Safety

```typescript
import type { Meta, StoryObj } from '@storybook/react';

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

type Story = StoryObj<typeof meta>;
```

### 2. Show All Component States

Create stories for each meaningful state:

```typescript
export const Default: Story = {
  args: {
    label