create-storybook

Files (1)

• SKILL.md

SKILL.md (first lines)

# Create Storybook

Create stories for React components following project conventions.

## REQUIRED: Tags and Interaction Tests

Every story MUST have:
1. **Tags** - For filtering and categorization
2. **Interaction tests (play function)** - For interactive components

### Interaction Tests Must Test BEHAVIOR, Not Just Display

**NG**: Only checking if element is displayed
```tsx
// BAD: Just checking display
play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  expect(canvas.getByRole('button')).toBeInTheDocument() // Not enough!
}
```

**OK**: Testing actual user behavior and results
```tsx
// GOOD: Testing form submission flow
play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)

  // 1. Fill form fields
  await userEvent.type(canvas.getByLabelText(/name/i), 'Test')

  // 2. Submit form
  await userEvent.click(canvas.getByRole('button', { name: /submit/i }))

  // 3. Verify result (success message, redirect, state change)
  await waitFor(() => {
    expect(canvas.getByText(/saved/i)).toBeInTheDocument()
  })
}
```

### What to Test
- **Forms**: Input → Submit → Success/Error states
- **Buttons**: Click → Action result (dialog opens, data updates)
- **Tabs/Views**: Click → Content switches correctly
- **Dialogs**: Open → Interact → Close
- **Validation**: Invalid input → Error message displayed

## Workflow

After creating/updating a story:

```bash
# 1. Start Storybook (background or separate terminal)
pnpm exec turbo run storybook --filter=<app>

# 2. Wait for Storybook to be ready (port 6006)

# 3. Run tests
pnpm exec turbo run test-storybook --filter=<app>

# 4. Run specific tags only
pnpm exec turbo run test-storybook --filter=<app> -- --includeTags=<tag>
```

## File Naming

```
component-name.stories.tsx  # kebab-case, same directory as component
```

## Basic Template (with REQUIRED tags)

```tsx
import type { Meta, StoryObj } from '@storybook/react'
import { expect, userEvent, waitFor, within } from '@storybook/test'
import { ComponentName } from './component-name'

const meta = {
  title: 'Category/ComponentName',
  component: ComponentName,
  parameters: {
    layout: 'centered', // or 'fullscreen'
  },
  tags: ['autodocs', 'feature-name'],  // REQUIRED: always add tags
} satisfies Meta<typeof ComponentName>

export default meta
type Story = StoryObj<typeof ComponentName>

export const Default: Story = {
  args: {
    // component props
  },
}

// REQUIRED for interactive components: add play function
export const WithInteraction: Story = {
  args: { /* ... */ },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)

    // Wait for render
    await waitFor(() => {
      expect(canvas.getByRole('button')).toBeInTheDocument()
    })

    // User action
    await userEvent.click(canvas.getByRole('button', { name: /submit/i }))

    // Verify result
    await waitFor(() => {
      expect(canvas.getByText('Success')).toBeInTheDocument()
    }, { timeout: 5000 })
  },
}
```

## Title Conventions

From quantum-box/tachyon-skills, MIT.

More from quantum-box/tachyon-skills