包组合

Storybook 被组件库和设计系统广泛使用。设计系统作者可以在其用户（consumer）的 Storybook 中自动组合他们的设计系统。

例如，如果您使用设计系统包，其 stories 可以与您自己的 stories 一起显示。这使得在不离开 Storybook 的情况下方便地交叉引用使用文档。

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

对于消费者

如果该包支持组合，则组合会自动进行。安装包后，Storybook 将在其 stories 与您自己的 stories 一起加载。

Package composition workflow

设置

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

.storybook/main.ts

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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

对于作者

组件库作者可以通过在其用户（consumer）的 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，您可以提供版本列表供用户选择，以尝试使用您包的其他版本。