Files

Ho Ngoc Hai 76d75c753b Migrate

2026-05-23 18:37:02 +07:00

2.0 KiB

Raw Blame History

description

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

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

2. Start Storybook Dev Server

// turbo

pnpm storybook

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

3. Build Storybook (Static)

pnpm build-storybook

Output sẽ nằm trong storybook-static/

4. Run Storybook Tests

// turbo

pnpm test-storybook

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

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

6. Visual Regression (Optional)

Nếu có Chromatic:

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

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
  },
};

2.0 KiB Raw Blame History