107 lines
2.0 KiB
Markdown
107 lines
2.0 KiB
Markdown
---
|
|
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)
|