摘要

• 這篇文章的目的是 ?
• Storybook 分享
• 連結

這篇文章的目的是 ?

Storybook 是一個用於開發、測試和文檔化前端組件的工具。它通常用於 React，但也支持其他前端框架。Storybook 的主要功能是允許開發人員獨立地創建和測試單個組件，並以可視化方式呈現這些組件的不同狀態和變體。每個組件都有自己的"故事"，用於展示其在不同情境下的呈現方式。

在 Storybook 中，您可以創建組件的不同故事，每個故事代表一個組件的特定狀態或變體。這使開發人員能夠快速查看和測試各種組件情境，從而提高了開發效率並確保組件在不同使用情境下的正確運作。此外，Storybook 還支持添加文檔、註釋、背景故事等功能，以更好地記錄和理解組件的使用方式。

Storybook 分享

為什麼要學習 Storybook？

1. 提高開發效率

Storybook 可以極大地提高開發效率。通過在單獨的故事中開發和測試組件，開發人員可以專注於組件的單一功能，而無需擔心整個應用程序的狀態。這種分離和獨立性使得故事開發更快速，減少了調試和測試的時間。

2. 提供即時視覺反饋

Storybook 提供了一個可視化的界面，允許開發人員即時查看組件的呈現方式。這有助於檢測和解決界面問題，並確保組件在各種屏幕尺寸和設備上都能正確顯示。

3. 促進組件重用

Storybook 鼓勵組件的重用。開發人員可以輕鬆地查看和重用先前創建的組件，而無需重頭開始開發。這有助於保持代碼庫的乾淨和整潔，並加速開發過程。

4. 文檔化和協作

Storybook 允許開發人員為組件添加文檔和註釋，這有助於團隊內部協作和知識共享。組件的文檔化使新成員更容易了解如何使用這些組件，並提供了一個清晰的參考。

5. 支持多種前端框架

Storybook 不僅限於 React，它也支持其他前端框架，如 Vue 和 Angular。這意味著您可以在不同項目中重用 Storybook 的技能，並應用於多種前端技術堆棧中。

總之，學習和掌握 Storybook 是提高前端開發效率、確保組件品質並促進團隊協作的關鍵一步。無論您是一名前端開發人員還是一個團隊的一員，Storybook 都是一個強大的工具，值得深入學習和應用。

第二章：安裝 Storybook

現在我們已經了解了 React 的基礎知識，讓我們開始學習如何安裝和配置 Storybook。

2.1 創建 React 項目

如果您還沒有一個 React 項目，請使用 Create React App 或其他任何 React 開發工具來創建一個新的 React 項目。

bashCopy code
npx create-react-app my-app
cd my-app

2.2 安裝 Storybook

要將 Storybook 添加到您的 React 項目中，您可以使用以下命令：

bashCopy code
npx sb init

這將引導您完成配置過程。您可以根據自己的需求進行配置，但通常建議使用默認設置。

2.3 運行 Storybook

完成配置後，您可以使用以下命令運行 Storybook：

bashCopy code
npm run storybook

這將啟動一個本地開發服務器，並在瀏覽器中打開 Storybook。

第三章：創建 Storybook 組件

現在，我們已經設置了 Storybook，讓我們開始創建 Storybook 組件。

3.1 創建組件目錄

首先，創建一個名為 components 的目錄，用於存放您的 React 組件。

bashCopy code
mkdir src/components

3.2 創建第一個組件

現在，讓我們創建我們的第一個 Storybook 組件。在 src/components 目錄中，創建一個名為 Button.js 的文件，並添加以下代碼：

jsxCopy code
import React from 'react';

export default function Button({ label }) {
  return <button>{label}</button>;
}

3.3 創建 Storybook 文件

現在，我們需要為 Button 組件創建 Storybook 文件。在 src/components 目錄中，創建一個名為 Button.stories.js 的文件，並添加以下代碼：

jsxCopy code
import React from 'react';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button label="Primary Button" />;
export const Secondary = () => <Button label="Secondary Button" />;

這個文件定義了一個 Storybook 故事，它包含了兩個不同的 Button 組件實例。

3.4 查看 Storybook

運行以下命令來啟動 Storybook 並查看您的第一個組件：

bashCopy code
npm run storybook

Storybook 將啟動並打開瀏覽器。您將能夠在其中查看和測試 Button 組件的不同變體。

第四章：Storybook 功能

Storybook 提供了許多強大的功能，用於更好地開發、測試和文檔化您的 React 組件。

4.1 背景故事（Background Story）

您可以使用故事的背景來模擬組件在不同上下文中的呈現方式。例如，您可以為組件定義不同的背景故事，以模擬組件在不同主題或風格下的外觀。

jsxCopy code
export const Primary = () => <Button label="Primary Button" />;
Primary.storyName = 'Primary Button';
Primary.parameters = {
  backgrounds: { default: 'light', values: [{ name: 'light', value: '#ffffff' }] },
};

4.2 控制故事順序

您可以使用 Storybook 的 parameters 選項來控制故事的順序，以確保它們以您希望的方式顯示。

jsxCopy code
export default {
  title: 'Button',
  component: Button,
  parameters: {
    storySort: {
      order: ['Primary', 'Secondary'],
    },
  },
};

4.3 註釋和文檔

Storybook 允許您為每個組件故事添加註釋和文檔。這使您可以更清晰地描述每個故事的目的和使用情境。

jsxCopy code
export const Primary = () => <Button label="Primary Button" />;
Primary.storyName = 'Primary Button';
Primary.parameters = {
  backgrounds: { default: 'light', values: [{ name: 'light', value: '#ffffff' }] },
  docs: {
    description: {
      component: 'This is the primary button component.',
    },
  },
};

第五章：Storybook 插件

Storybook 支持許多插件，可以擴展其功能。以下是一些常用的 Storybook 插件：

5.1 @storybook/addon-actions

此插件允許您在 Storybook 中添加互動元素，例如按鈕和輸入字段，並捕獲用戶的互動事件。

bashCopy code
npm install @storybook/addon-actions --save-dev

5.2 @storybook/addon-knobs

這個插件允許您在 Storybook 中編輯組件的屬性，以查看它們在不同設置下的呈現方式。

bashCopy code
npm install @storybook/addon-knobs --save-dev

5.3 @storybook/addon-viewport

此插件允許您在 Storybook 中模擬不同的螢幕尺寸和設備，以確保您的組件在不同屏幕上正確呈現。

bashCopy code
npm install @storybook/addon-viewport --save-dev

5.4 @storybook/addon-docs

這個插件允許您自動生成組件文檔，以便更輕鬆地編寫和維護文檔。

bashCopy code
npm install @storybook/addon-docs --save-dev

您可以在 Storybook 文檔中找到更多關於這些插件的信息。

第六章：部署 Storybook

當您完成了組件的開發、測試和文檔化後，您可能希望將 Storybook 部署到生產環境中，以便團隊共享和客戶查看。

6.1 打包 Storybook

要打包 Storybook，可以運行以下命令：

bashCopy code
npm run build-storybook

這將在您的項目中創建一個 storybook-static 目錄，其中包含打包後的 Storybook 文件。

6.2 部署到網絡伺服器

您可以將 storybook-static 目錄的內容部署到任何網絡伺服器，以便團隊或客戶可以訪問 Storybook。

6.3 使用 GitHub Pages 部署

如果您使用 GitHub，您還可以使用 GitHub Pages 輕鬆地將 Storybook 部署到網絡上。只需將 storybook-static 目錄中的內容推送到 GitHub 存儲庫的 gh-pages 分支即可。

bashCopy code
npm install gh-pages --save-dev

然後，在 package.json 文件中添加以下配置：

jsonCopy code
"homepage": "https://yourusername.github.io/your-repo-name",
"scripts": {
  "predeploy": "npm run build-storybook",
  "deploy": "gh-pages -d storybook-static"
}

最後，運行以下命令來部署 Storybook：

bashCopy code
npm run deploy

連結

• Storybook：https://storybook.js.org/