配置和与附加组件通信

附加组件 API 旨在用于自定义。它为附加组件作者提供了不同的方式来配置和与用户的 Storybook 进行通信。让我们来看看这些方式及其建议的用例。

预设

预设将配置负担从用户转移到附加组件。预设选项是全局的，可以从 NodeJS 访问。它们非常适合预先配置 Webpack 加载器、Babel 插件和其他特定于库或框架的配置。

例如，许多库要求应用程序被 Provider 包裹，该 Provider 为树中的组件提供数据。预设可以描述行为，例如自动添加包装器，而无需用户进行任何手动配置。如果用户安装了一个具有预设的附加组件，则附加组件可以指示 Storybook 将所有故事包装在 Provider 中。这使人们能够使用 Storybook 启动您的库，只需一行配置！

有关预设的更多信息，请参阅：编写预设附加组件

包装每个故事的机制称为 Storybook 装饰器。它们使您能够通过提供额外渲染功能或提供数据来增强故事。

参数

参数在浏览器中可用，非常适合全局、组件级别或故事级别配置附加组件行为。

例如，伪状态附加组件 使用参数来启用各种伪状态。用户可以提供全局默认值，然后在故事级别覆盖它们。

使用 useParameter 钩子来访问附加组件中的参数值。

export const Hover = {
  render: () => <Button>Label</Button>,
  parameters: { pseudo: { hover: true } },
};

通道

通道使用 NodeJS EventEmitter 兼容的 API 启用管理器和预览窗格之间的双向通信。您的附加组件可以连接到特定通道并响应这些事件。

例如，操作附加组件 会捕获用户事件并在面板中显示其数据。

使用 useChannel 钩子来访问附加组件中的通道数据。

有关完整的示例，请查看 storybookjs/addon-kit/withRoundTrip.ts