包组成
Storybook 被组件库和设计系统广泛使用。设计系统作者可以将其设计系统自动组合到消费者的 Storybook 中。
例如,如果您使用设计系统包,它的故事 (stories) 可以与您自己的故事一起显示。这使得在不离开 Storybook 的情况下交叉引用使用文档变得很方便。
通过包进行组合需要在您发布 Storybook 的服务与 Storybook 自己的 API 之间进行安全集成。我们推荐将 Storybook 发布到 Chromatic 以获得这些功能的完整支持。
对于消费者
如果包支持它,组合就会自动发生。当您安装包时,Storybook 会将其故事 (stories) 与您自己的故事一起加载。
设置
如果您想配置组合的 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 的版本,查看库如何演变。这需要包作者进行配置。
对于作者
组件库作者可以通过在其消费者的 Storybook 中组合其组件来扩大使用范围。
在您发布的 package.json
中添加一个 storybook
属性,该属性包含一个带有 url
字段的对象。将 URL 字段指向您想要的版本的已发布的 Storybook。
{
"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 中,该 Storybook 对应于用户安装的版本。