設定 Storybook

既然您已經了解了什麼是 Story 以及如何瀏覽它們，現在讓我們示範如何在您的元件上工作。

從您的專案中選擇一個簡單的元件，例如按鈕，並編寫一個 .stories.js、.stories.ts 或 .stories.svelte 檔案來搭配它。它可能看起來像這樣

YourComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { YourComponent } from './YourComponent';
 
//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof YourComponent> = {
  component: YourComponent,
};
 
export default meta;
type Story = StoryObj<typeof YourComponent>;
 
export const FirstStory: Story = {
  args: {
    //👇 The args you need here will depend on your component
  },
};

前往您的 Storybook 以查看渲染的元件。如果它現在看起來有點不尋常，也沒關係。

根據您的技術堆疊，您可能還需要進一步設定 Storybook 環境。

渲染元件樣式

Storybook 對於您如何產生或載入 CSS 沒有既定想法。它會渲染您提供的任何 DOM 元素。但有時，事情不會「開箱即用」就「看起來正確」。

您可能必須為 Storybook 的渲染環境設定您的 CSS 工具。以下是社群中流行工具的一些設定指南。

沒有看到您要尋找的工具嗎？請查看樣式與 CSS頁面以獲取更多詳細資訊。

為您的堆疊設定 Storybook

Storybook 帶有寬鬆的預設設定。它嘗試自訂自身以適應您的設定。但這並非萬無一失。

您的專案在元件可以隔離渲染之前可能會有額外的需求。這證明了進一步自訂設定是必要的。您可能需要三種類型的設定。

建置設定，例如 Webpack 和 Babel

如果您在執行 yarn storybook 命令時在 CLI 上看到錯誤，則您可能需要變更 Storybook 的建置設定。以下是一些可以嘗試的方法

預設配置將各種技術的常見設定捆綁到 Storybook 中。特別是，Create React App 和 Ant Design 存在預設配置。
為 Storybook 指定自訂的 Babel 設定。如果可以，Storybook 會自動嘗試使用您專案的設定。
調整 Storybook 使用的 Webpack 設定。如果需要，嘗試修補您自己的設定。

執行階段設定

如果 Storybook 建置成功，但在瀏覽器中連線到它時立即看到錯誤，在這種情況下，可能是您的某個輸入檔案未正確編譯/轉譯以供瀏覽器解譯。Storybook 支援常青瀏覽器，但您可能需要檢查 Babel 和 Webpack 設定（見上文）以確保您的元件程式碼能正常運作。

元件上下文

如果特定的 Story 在渲染時出現問題，通常表示您的元件期望元件可以使用特定的環境。

常見的前端模式是元件假設它們在特定的「上下文」中渲染，而父元件在渲染階層中更高（例如，主題提供器）。

使用裝飾器將每個 Story「包裝」在必要的上下文提供器中。.storybook/preview.js|ts 檔案可讓您自訂元件在 Canvas（預覽 iframe）中的渲染方式。請參閱如何在 Storybook 中使用 Styled Components ThemeProvider、Vue 的 Fontawesome 或 Angular 主題提供器元件（如下例所示）包裝每個渲染的元件。

.storybook/preview.tsx

import React from 'react';
 
import { Preview } from '@storybook/react';
 
import { ThemeProvider } from 'styled-components';
 
const preview: Preview = {
  decorators: [
    (Story) => (
      <ThemeProvider theme="default">
        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
        <Story />
      </ThemeProvider>
    ),
  ],
};
 
export default preview;

載入資源與素材

我們建議使用 Storybook 靜態地提供元件中請求的外部資源和素材。這確保了素材始終可用於您的 Story。請閱讀我們的文件以了解如何使用 Storybook 託管靜態檔案。