插件知识库

掌握了编写插件的基础知识后，您可以通过各种常见的增强功能来改进您的插件。本文档详细介绍了插件创建的其他信息。在创建自己的插件时，可以将其用作快速参考指南。

禁用插件面板

您可以为特定故事禁用插件面板。

要实现这一点，您需要在注册面板时传入 paramKey 参数。

/my-addon/manager.js

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

然后，在添加故事时，您可以传入一个禁用的参数。

Button.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  /* 👇 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
  },
} satisfies Meta<typeof Button>;
 
export default meta;

为插件设置样式

Storybook 使用 Emotion 进行样式设置。同时还有一套可自定义的主题！

我们建议使用 Emotion 为您的插件 UI 组件设置样式。这使您能够使用活动 Storybook 主题，以提供无缝的开发者体验。如果您不想使用 Emotion，您可以使用内联样式或其他 CSS-in-JS 库。您可以通过 Emotion 的 withTheme HOC 作为 prop 接收主题。了解更多关于主题设置的信息。

Storybook 组件

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

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

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

组件	来源	故事
操作栏	查看组件实现	查看组件故事
插件面板	查看组件实现	不适用
徽章	查看组件实现	查看组件故事
按钮	查看组件实现	查看组件故事
表单	查看组件实现	查看组件故事
加载器	查看组件实现	查看组件故事
占位符	查看组件实现	查看组件故事
滚动区域	查看组件实现	查看组件故事
间距	查看组件实现	查看组件故事
语法高亮	查看组件实现	查看组件故事
标签页	查看组件实现	查看组件故事
工具栏	查看组件实现	不适用
工具提示	查看组件实现	查看组件故事
缩放	查看组件实现	查看组件故事

除了组件之外，还包含一套 UI 原始元素。使用下面列出的内容作为您插件的样式参考。

组件	来源	故事
调色板（见下文说明）	查看实现	查看故事
图标	查看实现	查看故事
排版	查看实现	查看故事

由 @storybook/addon-docs/blocks 实现的调色板是 storybook/theming 模块的高级抽象。

构建系统

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

package.json

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

运行 yarn 或 npm install 来安装插件。

热模块替换

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

独立 Storybook 插件

如果您正在开发一个独立的插件，请在 package.json 中添加一个新脚本，如下所示：

package.json

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

本地 Storybook 插件

如果您正在开发基于现有 Storybook 安装的本地 Storybook 插件，则开箱即用地提供了 HMR（热模块替换）。

在预设中组合插件

如果您正在处理一个加载第三方插件的预设，而您无法控制这些插件，并且需要访问某些功能（例如装饰器）或提供其他配置。在这种情况下，您需要更新您的预设，如下所示，以便您可以加载和配置其他插件。

my-preset/index.js

function managerEntries(entry = []) {
  return [...entry, import.meta.resolve('my-other-addon/manager')];
}
 
const previewAnnotations = (entry = [], options) => {
  return [...entry, import.meta.resolve('my-other-addon/preview')];
};
 
export default {
  managerEntries,
  previewAnnotations,
};

如果您能够控制您想要自定义的插件。在这种情况下，您可以更新您的预设并实现一个自定义函数来加载任何其他预设并提供必要的配置。