設定 Storybook

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

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

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 檔案可讓您自訂元件在 Canvas（預覽 iframe）中的渲染方式。請參閱如何在範例中，使用Styled Components ThemeProvider、Vue 的 Fontawesome 或 Angular 主題供應商元件來包裝在 Storybook 中渲染的每個元件。

.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 中以靜態方式提供元件中請求的外部資源和資產。這可確保您的 Storybook 故事始終可以使用這些資產。請閱讀我們的文件，以了解如何在 Storybook 中託管靜態檔案。