Storybook Documentation

เมื่อไหร่ควรใช้ Storybook

Storybook เหมาะสำหรับ:

1. ทีมพัฒนา Component Library

   • เมื่อต้องการสร้างชุด UI Components ที่ใช้ร่วมกันในองค์กร
   • เมื่อต้องการเอกสารประกอบ Component ที่ชัดเจน

2. โปรเจคที่ใช้ Design System

   • ช่วยให้ Design System มีชีวิตและใช้งานได้จริง
   • ทดสอบความสอดคล้องกับ Design Token

3. แอปที่ต้องใช้ UI Components ซ้ำๆ

   • ช่วยจัดการและทดสอบ Components แยกจาก Business Logic
   • ลดความผิดพลาดเมื่อนำ Component ไปใช้

4. ทีมที่ต้องการลดเวลาในการพัฒนา UI

   • ทดสอบ UI ได้โดยไม่ต้องรันแอปทั้งหมด
   • ตรวจสอบ Responsive Design ได้ง่าย

5. โปรเจคที่ต้องการ Collaboration ระหว่าง Developer และ Designer

   • Designer สามารถตรวจสอบ UI ได้โดยตรง
   • Product Owner สามารถเห็นตัวอย่างการทำงานของ Components

Key Features

Feature	คำอธิบาย
Component Isolation	พัฒนาและทดสอบ UI Components แยกจากกันโดยไม่ต้องพึ่งพาระบบทั้งหมด เหมาะสำหรับ Component-Driven Development
Interactive Playground	เปลี่ยน Props ผ่าน Control Panel ได้ทันที ทดสอบ State ต่างๆ ของ Component ได้ง่าย
Automated Docs	สร้างเอกสารอัตโนมัติจาก Code และ Stories แสดงตัวอย่างการใช้งานพร้อม Code Snippets
Addons Ecosystem	มี Addons มากมายสำหรับขยายความสามารถหลักของ Storybook
Visual Testing	ตรวจสอบ UI ด้วยภาพ ช่วยป้องกัน Regression ทำงานร่วมกับ Chromatic
Cross-Framework	รองรับหลาย Framework ทั้ง Vue, React, Angular, Svelte

Installation

ใช้อะไรติดตั้งตามนี้ https://storybook.js.org/docs/get-started/install

Add-ons

ชื่อ Add-on	คำอธิบาย
Controls	เปลี่ยน props ของ component แบบอินเทอร์แอคทีฟ
Actions	ดู event handlers ที่ถูกเรียก
Viewport	เปลี่ยนขนาดหน้าจอสำหรับทดสอบ responsive
Backgrounds	เปลี่ยนพื้นหลังของ Story
Accessibility	ตรวจสอบ accessibility
Storyshots	สร้าง snapshot tests อัตโนมัติ

Writing Stories

Basic Structure

export default {
  title: 'Components/Button', // ระบุตำแหน่งใน sidebar
  component: Button, // Component ที่ต้องการแสดง
  tags: ['autodocs'], // สร้างเอกสารอัตโนมัติ
  args: { // ค่าเริ่มต้นของ props
    label: 'ปุ่มตัวอย่าง',
    size: 'medium'
  }
};

export const Primary = {}; // ตัวอย่างพื้นฐาน

export const Secondary = {
  args: {
    variant: 'secondary'
  }
};

Techniques

1. ใช้ Args เพื่อควบคุม props แบบไดนามิก
2. ใช้ Decorators สำหรับการ wrap component
3. ใช้ Parameters ในการกำหนดค่าต่างๆ

Testing

Test Types

ประเภทการทดสอบ	คำอธิบาย
Visual Tests	ตรวจสอบ UI ด้วยภาพ
Interaction Tests	ทดสอบการโต้ตอบกับ component
Accessibility Tests	ตรวจสอบความสามารถในการเข้าถึง
Snapshot Tests	ตรวจสอบการเปลี่ยนแปลงของ component

Interaction Test Example

import { userEvent, within } from '@storybook/testing-library';

export const ClickExample = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
  }
};

Documentation

Using MDX

import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button';

<Meta title="Components/Button" component={Button} />

# ปุ่ม (Button)

ใช้สำหรับการโต้ตอบกับผู้ใช้

<Story name="Primary" args={{ primary: true }} />

Techniques

1. ใช้ ArgsTable เพื่อแสดง props อัตโนมัติ
2. เพิ่มตัวอย่างโค้ดด้วย Code block
3. ใช้ Canvas และ Story สำหรับตัวอย่าง interactive

Sharing

Publishing Methods

1. Static Hosting

npm

npm run build-storybook

yarn

yarn build-storybook

pnpm

pnpm run build-storybook

bun

bun run build-storybook

2. Storybook Cloud

• อัปโหลดผ่าน GitHub integration
• ได้ลิงก์แชร์อัตโนมัติ

3. Chromatic

npm

npm install -D chromatic
npx chromatic --project-token=your_token

yarn

yarn add -D chromatic
yarn chromatic --project-token=your_token

pnpm

pnpm add -D chromatic
pnpm chromatic --project-token=your_token

bun

bun add -D chromatic
bun chromatic --project-token=your_token

Benefits

• ทีมสามารถดู component ได้ง่าย
• Product owner ตรวจสอบ UI ได้โดยตรง
• QA ทดสอบ component แยกส่วนได้