插件知识库

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

禁用插件面板

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

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

设置插件样式

Storybook 使用 Emotion 来设置样式。以及一个你可以自定义的主题！

我们建议使用 Emotion 来设置插件 UI 组件的样式。这使你可以使用活动的 Storybook 主题来提供无缝的开发体验。如果你不想使用 Emotion，可以使用内联样式或其他 css-in-js 库。可以通过使用 Emotion 的 withTheme HOC 来将主题作为道具接收。详细了解主题.

Storybook 组件

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

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

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

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

除了这些组件之外，还包含一组 UI 原语。使用下面列出的内容作为设置插件样式的参考。

组件	源代码	故事
调色板（见下面的说明）	查看实现	查看故事
图标	查看实现	查看故事
排版	查看实现	查看故事

由 @storybook/components 实现的调色板是对 @storybook/theming 包的高级抽象。

构建系统

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

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

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

热模块替换

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

独立 Storybook 附加组件

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

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

本地 Storybook 附加组件

如果你正在开发基于现有 Storybook 安装的本地 Storybook 附加组件，HMR（热模块替换）将开箱即用。

在预设中组合附加组件

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

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

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