Storybook 初探：為什麼我們需要它以及如何開始使用

什麼是 Storybook？

Storybook 是一個用於 UI 組件開發的工具。它允許開發者在獨立的環境中構建组件，而不必依賴於應用程序的具體業務邏輯或頁面上下文。簡單來說，它就是組件的「展示台」或「沙盒」。

使用 Storybook 的好處與優勢

1. 隔離開發環境 (Isolation)

在開發複雜的頁面時，我們常常需要為了測試某個組件的特定狀態（例如：錯誤提示、載入中、空數據）而反覆操作頁面。使用 Storybook，你可以為每個組件的每個狀態編寫「故事 (Story)」，直接在瀏覽器中查看和調試，完全不需要運行整個應用程序。

2. 視覺化文檔 (Visual Documentation)

Storybook 可以自動生成組件的文檔。團隊中的設計師、產品經理或其他開發者可以通過 Storybook 清楚地看到目前有哪些可用的組件，以及它們長什麼樣子、有哪些參數 (Props) 可以調整。這大大降低了溝通成本。

3. 用例測試 (Edge Case Testing)

有些組件的狀態在實際操作中很難觸發（例如網路超時的錯誤畫面）。在 Storybook 中，我們可以輕鬆模擬這些邊緣情況，確保組件在各種極端條件下都能正常顯示。

4. 提高組件的可重用性

當你被迫在隔離環境中開發組件時，你會自然而然地寫出耦合度更低、更純粹的組件。這有助於提升代碼的質量和可維護性。

初步使用教學

以下是一個快速上手的指南，假設你已經有一個 React 專案（Vue 或 Angular 的步驟也類似）。

第一步：安裝 Storybook

在你的專案根目錄下，執行以下指令：

npx storybook@latest init

這個指令會自動檢測你的專案類型（例如 React, Vue, Svelte 等），並安裝必要的依賴套件和設置腳本。

第二步：啟動 Storybook

安裝完成後，執行以下指令來啟動 Storybook 的開發伺服器：

npm run storybook

瀏覽器會自動打開（通常是 http://localhost:6006），你將看到 Storybook 的介面以及一些範例組件。

第三步：建立你的第一個 Story

假設你有一個簡單的按鈕組件 Button.tsx：

// Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick?: () => void;
}

export const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

要在 Storybook 中展示它，你需要建立一個 Button.stories.tsx 文件：

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

// 定義組件的元數據
const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
};

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

// 定義一個 Story
export const Primary: Story = {
  args: {
    label: 'Primary Button',
  },
};

// 定義另一個 Story
export const Secondary: Story = {
  args: {
    label: 'Secondary Button',
  },
};

保存後，Storybook 頁面會自動刷新，你就可以在側邊欄看到你的 Button 組件，並且可以切換 Primary 和 Secondary 兩種狀態，甚至在控制面板中動態修改 label 的文字。

總結

Storybook 是一個強大的工具，能顯著提升前端開發的效率與品質。它不僅幫助開發者寫出更好的組件，也成為了團隊間溝通的重要橋樑。如果你還沒使用過，強烈建議在下一個專案中嘗試看看。