storybook

xưởng storybook

trang này đang được xây dựng — nội dung chưa hoàn thiện

Storybook là môi trường phát triển component code-first. Tất cả component được xây dựng, ghi chép và kiểm tra tại đây trước khi được sử dụng trong trang Astro.

cấu hình

// .storybook/main.ts — key settings
stories: ['../src/**/*.stories.@(ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-a11y',
         '@storybook/addon-docs', '@storybook/addon-designs',
         '@storybook/addon-themes'],
framework: '@storybook/react-vite',
staticDirs: ['../storybook-public'],

cách dùng addon

AddonMục đíchCách dùng
a11yKiểm tra khả năng tiếp cận (axe-core)Tự động trên mọi story — kiểm tra bảng "Accessibility"
designsNhúng FigmaThêm parameters.design vào story meta với URL Figma
themesThanh công cụ chuyển đổi thương hiệuCấu hình qua withThemeByDataAttribute trong preview.ts — chuyển data-brand

quy ước story

// moi component story theo cau truc nay:
import type { Meta, StoryObj } from '@storybook/react-vite';
import { ComponentName } from './ComponentName';

const meta: Meta<typeof ComponentName> = {
  title: '03-components/group/ComponentName',
  component: ComponentName,
  tags: ['autodocs'],
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/embed?...',
    },
  },
};
export default meta;
type Story = StoryObj<typeof ComponentName>;

export const Default: Story = { args: { ... } };
export const Variant: Story = { args: { ... } };

tổ chức thanh bên

NhómNội dung
01-get-startedChào mừng, Cài đặt, Thương hiệu — luồng bắt đầu
02-foundationsDesign Tokens, Biểu tượng — tham chiếu token + thư viện
03-components7 nhóm con: core, form, navigation, data, overlay, utility, branding
04-patternsFloorplans (5 mẫu trang), Ví dụ (9 bố cục mẫu)

quy trình xây component

  1. Tạo thư mục s@1thay/core/components/Name/
  2. name.css — kiểu dáng chỉ sử dụng design token (không hardcode)
  3. Name.tsx — component React với TypeScript, xuất kiểu
  4. Name.stories.tsx — 5+ story, 1+ kiểm tra tương tác, autodocs, nhúng figma
  5. name.docs.mdx — tài liệu MDX với Canvas, ArgsTable
  6. Name.test.tsx — 3+ bài kiểm tra đơn vị
  7. npm run build-storybook — xác minh
  8. Cập nhật danh mục component trong storybook.md

build & triển khai

npm run storybook       # dev server (port 6006)
npm run build-storybook  # production build → dist-storybook/
# deploy: Cloudflare Pages → design.1thay.com