包组成

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

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

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

对于消费者

如果包支持它，组合就会自动发生。当您安装包时，Storybook 会将其故事 (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

对于作者

组件库作者可以通过在其消费者的 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 中，该 Storybook 对应于用户安装的版本。

显示版本选择器

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