Addon 知识库

一旦您了解了编写 Addons 的基础知识，就可以进行各种常见的增强，以使您的 Addon 更好。此页面详细介绍了关于 Addon 创建的额外信息。在创建您自己的 Addons 时，请将其用作快速参考指南。

禁用 Addon 面板

可以为特定的 Story 禁用 Addon 面板。

为了实现这一点，您需要在注册面板时传递 paramKey 元素

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: () => <div>Addon tab content</div>,
    paramKey: 'myAddon', // this element
  });
});

然后在添加 Story 时，您可以传递一个 disabled 参数。

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  /* 👇 The title prop is optional.
   * See https://storybook.org.cn/docs/configure/#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'Button',
  component: Button,
  parameters: {
    myAddon: { disable: true }, // Disables the addon
  },
};
 
export default meta;

为您的 Addon 设置样式

Storybook 使用 Emotion 进行样式设置。以及您可以自定义的主题！

我们建议使用 Emotion 来设置您的 Addon 的 UI 组件的样式。这使您可以使用活动的 Storybook 主题来提供无缝的开发者体验。如果您不想使用 Emotion，则可以使用内联样式或其他 css-in-js 库。您可以使用 Emotion 的 withTheme HOC 接收主题作为 prop。阅读更多关于主题的信息。

Storybook 组件

Addon 作者可以使用任何 React 库来开发他们的 UI。但我们建议在 @storybook/components 中使用 Storybook 的 UI 组件，以更快地构建 Addons。当您使用 Storybook 组件时，您将获得

• 经过实战检验的现成组件
• Storybook 原生外观和感觉
• 对 Storybook 主题的内置支持

在您的下一个 Addon 中使用下面列出的组件。

作为组件的补充，还包含一组 UI 基础元素。使用下面列出的内容作为您的 Addon 样式的参考。

构建系统

当您将 Addon 作为包进行开发时，您不能使用 npm link 将其添加到您的项目中。将您的 Addon 作为本地依赖项列在您的 package.json 中

{
  "dependencies": {
    "@storybook/addon-controls": "file:///home/username/myrepo"
  }
}

热模块替换

在开发 Addon 时，您可以配置 HMR（热模块替换）以反映所做的更改。

独立 Storybook Addons

如果您正在开发独立的 Addon，请在 package.json 中添加一个新的脚本，内容如下

{
  "scripts": {
    "start": "npm run build -- --watch"
  }
}

本地 Storybook Addons

如果您正在开发基于现有 Storybook 安装之上的本地 Storybook Addon，则 HMR（热模块替换）开箱即用。

在预设中组合 Addons

如果您正在处理加载第三方 Addons 的预设，而您无法控制这些 Addons，并且您需要访问某些功能（例如，装饰器）或提供额外的配置。在这种情况下，您需要将您的预设更新为以下内容，以允许您加载和配置其他 Addons

function managerEntries(entry = []) {
  return [...entry, require.resolve('my-other-addon/register')];
}
 
const config = (entry = [], options) => {
  return [...entry, require.resolve('my-other-addon/addDecorator')];
};
 
export default {
  managerEntries,
  config,
};

如果您可以控制要自定义的 Addons。在这种情况下，您可以更新您的预设并实现一个自定义函数来加载任何额外的预设并提供必要的配置，类似于 Essentials Addon 中的实现方式。