在 Turborepo 中使用 Storybook

Storybook（在新分頁中開啟） 是一種在隔離環境中建立 UI 元件的熱門方式。透過將 Storybook 放入 Turborepo，您可以輕鬆地與應用程式並行開發您的設計系統。如果您想使用範本，本指南將逐步說明如何在 Vercel 上建立 這個 Storybook/Turborepo 範本（在新分頁中開啟）。

指南

本指南說明如何

1. 在單一儲存庫中設定 Storybook
2. 建立您的第一個故事
3. 確保 Storybook 與其他工作正常運作

1. 建立您的單一儲存庫

如果您沒有現有的專案，請使用我們的 快速入門 建立新的單一儲存庫。

npx create-turbo@latest

2. 新增一個新的 workshop 應用程式

Storybook 需要一個建構器才能使用，因此我們將建立一個 Vite 應用程式。

cd apps
npm create vite

按照提示建立一個名為「workshop」的應用程式，作為 React、TypeScript 應用程式。

接下來，我們需要建立 Storybook

cd workshop
npx sb init --skip-install
npm install --save-dev @storybook/cli   # Manually install deps and CLI

3. 為你的按鈕元件設定一個故事

Storybook 建構器會在 /src/stories 目錄中建立一些故事和 React 元件。若要為你的 ui 套件中的按鈕建立一個故事，我們將用我們自己的取代 Button.stories.tsx 中的匯入。

1. 更新你的 ui 套件中的按鈕，以符合故事的規格。

interface Props {
  primary?: boolean;
  size?: "small" | "large";
  label?: string;
}
 
export const Button = ({
  primary = false,
  label = "Boop",
  size = "small",
}: Props) => {
  return (
    <button
      style={{
        backgroundColor: primary ? "red" : "blue",
        fontSize: size === "large" ? "24px" : "14px",
      }}
    >
      {label}
    </button>
  );
};

2. 將你的 ui 套件新增到 workshop 應用程式中

{
  // ...
  {
    "dependencies": {
      "ui": "*",
      // ...
    }
  }
}

3. 取代 Button 在 Button.stories.tsx 中的匯入，使其來自你的 ui 套件

import { Button } from 'ui'

4. 調整任務

我們需要做的最後一件事是確保 Storybook 與您的其他任務保持一致

{
  // ...
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build": "storybook build"
  }
}

若要確保建置快取，您首先需要將 storybook-static 新增到您的 .gitignore。然後，將 storybook-static 新增到 turbo.json 建置任務的輸出

{
  "pipeline": {
    "build": {
      "outputs": [
        "dist/**",
+       "storybook-static/**"
      ]
    }
  }
}

您的 dev 和 build 任務現在將包含 Storybook，讓您可以在應用程式中開發 Storybook，並與其他應用程式一起享有快取建置。

在 Vercel 上部署

讓我們部署您的 Storybook 專案。

在專案設定的「一般」標籤上的「建置和開發設定」中，將您的「輸出目錄」變更為 storybook-static。