插件知识库

一旦你了解了编写插件的基础知识，还有各种常见的增强功能可以改进你的插件。本页详细介绍了有关插件创建的更多信息。在创建自己的插件时，可以将其用作快速参考指南。

禁用插件面板

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

要实现这一点，需要在注册面板时传递 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
  });
});

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

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 将主题作为 props 接收。阅读更多关于主题的内容。

Storybook 组件

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

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

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

组件	源码	Story
Action Bar	查看组件实现	查看组件 Story
插件面板	查看组件实现	不适用
Badge	查看组件实现	查看组件 Story
按钮	查看组件实现	查看组件 Story
表单	查看组件实现	查看组件 Story
加载器	查看组件实现	查看组件 Story
占位符	查看组件实现	查看组件 Story
滚动区域	查看组件实现	查看组件 Story
间隔	查看组件实现	查看组件 Story
语法高亮器	查看组件实现	查看组件 Story
标签页	查看组件实现	查看组件 Story
工具栏	查看组件实现	不适用
工具提示	查看组件实现	查看组件 Story
缩放	查看组件实现	查看组件 Story

作为组件的补充，还包含了一套 UI 原子组件。使用下面列出的内容作为样式化你的插件的参考。

组件	源码	Story
调色板（见下方说明）	查看实现	查看 Story
图标	查看实现	查看 Story
排版	查看实现	查看 Story

由 @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（模块热替换）是开箱即用的。

在预设中组合插件

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

my-preset/index.js

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,
};

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