包组成

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

¥Storybook is widely used by component libraries and design systems. Design system authors can automatically compose their design systems inside their consumer’s Storybooks.

例如，如果你使用设计系统包，它的故事可以与你自己的故事一起出现。这使得无需离开 Storybook 即可方便地交叉引用使用文档。

¥For example, if you use a design system package, its stories can appear alongside your own. That makes it convenient to cross reference usage documentation without leaving Storybook.

对于消费者

¥For consumers

如果包 supports 则会自动进行组合。当你安装软件包时，Storybook 会将其故事与你自己的故事一起加载。

¥Composition happens automatically if the package supports it. When you install the package, Storybook will load its stories alongside your own.

设置

¥Set up

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

¥If you want to configure how the composed Storybook behaves, you can disable the ref element in your .storybook/main.js

// 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;

切换版本

¥Switching versions

更改组合 Storybook 的版本以查看库如何演变。这需要软件包作者的 configuration。

¥Change the version of the composed Storybook to see how the library evolves. This requires configuration from the package author.

对于作者

¥For authors

组件库作者可以通过在消费者的 Storybook 中编写组件来扩展采用。

¥Component library authors can expand adoption by composing their components in their consumer’s Storybooks.

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

¥Add a storybook property in your published package.jsonthat contains an object with a url field. Point the URL field to a published Storybook at the version you want.

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

自动版本选择

¥Automatic version selection

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

¥If you're using Chromatic, you can provide a single URL for your Storybook in the storybook.url field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package. For example:

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

在此示例中，xyz123 是你的 Chromatic 项目 ID。Storybook 将自动在发布到该项目的 Storybook 中编写与用户安装的版本相对应的内容。

¥In this example xyz123 is your Chromatic project id. Storybook will automatically compose in the Storybook published to that project corresponding to the version the user has installed.

显示版本选择器

¥Show a version selector

如果你使用的是 Chromatic，则可以为用户提供 从中选择 的版本列表，以便用户尝试其他版本的软件包。

¥If you're using Chromatic, you can provide a list of versions for the user to choose from to experiment with other versions of your package.