包组合

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

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

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

对于使用者

如果包支持，则组合会自动发生。当您安装包时，Storybook 将加载其故事以及您自己的故事。

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。

// 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，则可以提供用户可以从中选择的版本列表，以试验包的其他版本。