套件組合

Storybook 廣泛用於元件庫和設計系統。設計系統作者可以在其使用者 Storybook 內自動組合其設計系統。

例如，如果您使用設計系統套件，其 Stories 可以與您自己的 Stories 一起顯示。這樣可以方便地交叉參考使用文件，而無需離開 Storybook。

對於使用者

如果套件支援，則會自動發生組合。當您安裝套件時，Storybook 將會與您自己的 Stories 一起載入其 Stories。

設定

如果您想要設定組合 Storybook 的行為方式，您可以在.storybook/main.js中停用 ref 元素

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  refs: {
    'package-name': { disable: true },
  },
};
 
export default config;

切換版本

變更組合 Storybook 的版本以查看程式庫的演進方式。這需要套件作者進行設定。

對於作者

元件庫作者可以透過在其使用者 Storybook 中組合其元件來擴大採用。

在您已發佈的 package.json 中新增一個包含具有 url 欄位之物件的 storybook 屬性。將 URL 欄位指向您想要之版本發佈的 Storybook。

// Your component library’s package.json
{
  "storybook": {
    "url": "https://host.com/your-storybook-for-this-version"
  }
}

自動版本選擇

如果您使用 Chromatic，您可以在 storybook.url 欄位中提供 Storybook 的單一 URL。您不需要每次發佈新版本時都變更 URL。Storybook 會自動尋找您套件的正確 URL。例如

{
  "storybook": {
    "url": "https://master--xyz123.chromatic.com"
  }
}

在此範例中，xyz123 是您的 Chromatic 專案 ID。Storybook 將會自動組合到發佈至該專案且與使用者已安裝版本相對應的 Storybook 中。

顯示版本選取器

如果您使用 Chromatic，您可以為使用者提供版本清單，以便選擇以實驗套件的其他版本。