---
description: Storybook operations - chạy Storybook dev server, build, và testing
---

# Storybook Operations Workflow

Workflow cho Storybook development và testing trong GoodGo frontend apps.

## Prerequisites / Yêu Cầu

- Node.js 20+
- pnpm
- Frontend app dependencies installed

## Steps

### 1. Navigate to Frontend App

```bash
cd apps/web-client  # hoặc web-admin, web-merchant
```

### 2. Start Storybook Dev Server

// turbo
```bash
pnpm storybook
```

Storybook sẽ chạy tại `http://localhost:6006`

### 3. Build Storybook (Static)

```bash
pnpm build-storybook
```

Output sẽ nằm trong `storybook-static/`

### 4. Run Storybook Tests

// turbo
```bash
pnpm test-storybook
```

### 5. A11y Testing (Accessibility)

Storybook đã cài đặt `@storybook/addon-a11y`. Để kiểm tra:

1. Mở Storybook UI
2. Chọn component story
3. Click tab "Accessibility" ở panel bên dưới
4. Xem violations và suggestions

### 6. Visual Regression (Optional)

Nếu có Chromatic:

```bash
npx chromatic --project-token=<token>
```

## Quick Commands / Lệnh Nhanh

| Command | Description |
|---------|-------------|
| `pnpm storybook` | Start Storybook dev |
| `pnpm build-storybook` | Build static Storybook |
| `pnpm test-storybook` | Run interaction tests |

## Story File Structure

```
src/features/shared/components/Button/
├── Button.tsx
├── Button.stories.tsx    # ← Storybook stories
└── Button.test.tsx
```

## Story Template

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

const meta: Meta<typeof Component> = {
  title: 'Components/Component',
  component: Component,
  tags: ['autodocs'],
};

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

export const Default: Story = {
  args: {
    // default props
  },
};
```

## Related Skills

- [React UI Components](/.agent/skills/react-ui-components/SKILL.md)
- [React Testing Patterns](/.agent/skills/react-testing-patterns/SKILL.md)