documentation

# Documentation (TypeScript + React)

Generate comprehensive documentation for features, components, and hooks.

## When to Use
- After completing a feature (may span multiple commits)
- When a component/hook needs usage documentation
- When design decisions need recording
- For public/shared components and hooks

## Documentation Types

### 1. Storybook Stories (Component Documentation)
**Purpose**: Visual documentation of component usage and variants

**Creates**: `.stories.tsx` files alongside components

### 2. JSDoc Comments (Code Documentation)
**Purpose**: Inline documentation for types, props, complex functions

**Location**: In source files (`.ts`, `.tsx`)

### 3. Feature Documentation (Architectural Documentation)
**Purpose**: WHY decisions were made, HOW feature works, WHAT to extend

**Creates**: `docs/features/[feature-name].md`

## Workflow

### 1. Identify Documentation Needs

Ask:
- Is this a reusable component? → Storybook story
- Is this a custom hook? → JSDoc + usage example
- Is this a complete feature? → Feature documentation
- Are types/props complex? → JSDoc comments

### 2. Create Storybook Stories

**For each component**, create stories showing:
- Default state
- All variants/props
- Interactive states
- Edge cases (loading, error, empty)

**Example**:
```typescript
// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './Button'

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered'
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    }
  }
}

export default meta
type Story = StoryObj<typeof Button>

// Default story
export const Primary: Story = {
  args: {
    label: 'Button',
    variant: 'primary',
    onClick: () => alert('clicked')
  }
}

// Variants
export const Secondary: Story = {
  args: {
    ...Primary.args,