包组合

Storybook 被组件库和设计系统广泛使用。设计系统作者可以在其消费者的 Storybook 中自动组合其设计系统。

例如，如果您使用设计系统包，则其 story 可以与您自己的 story 一起显示。这使得无需离开 Storybook 即可方便地交叉引用使用文档。

通过包进行组合需要在您发布 Storybook 的服务与 Storybook 自己的 API 之间建立安全集成。我们建议将 Storybook 发布到 Chromatic，以获得对这些功能的全面支持。

对于消费者

如果包支持，组合会自动进行。当您安装该包时，Storybook 将加载其 story 以及您自己的 story。

Package composition workflow

设置

如果您想配置组合的 Storybook 的行为方式，您可以在您的 .storybook/main.js 中禁用 ref 元素

.storybook/main.ts

// 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 的版本，以查看库的演变过程。这需要包作者进行配置。

Package composition workflow

对于作者

组件库作者可以通过在其消费者的 Storybook 中组合其组件来扩大采用率。

在您发布的 package.json 中添加一个 storybook 属性，其中包含一个带有 url 字段的对象。将 URL 字段指向您想要的版本的已发布 Storybook。

package.json

{
  "storybook": {
    "url": "https://host.com/your-storybook-for-this-version"
  }
}

自动版本选择

如果您正在使用 Chromatic，您可以在 storybook.url 字段中为您的 Storybook 提供单个 URL。您无需在每次发布新版本时都更改 URL。 Storybook 将自动为您的包找到正确的 URL。例如

package.json

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

在此示例中，xyz123 是您的 Chromatic 项目 ID。 Storybook 将自动组合到发布到该项目，且与用户已安装版本相对应的 Storybook 中。

显示版本选择器

如果您正在使用 Chromatic，您可以提供版本列表供用户选择，以尝试您的包的其他版本。