添加到集成目录

Storybook 有两种类型的集成：插件 (addons) 和指南 (recipes)，它们都列在集成目录中。

插件

Storybook 插件通过 npm 分发。目录是通过查询 npm 注册表中的 Storybook 特有元数据来填充的，这些元数据位于 package.json 文件中。

通过发布符合以下要求的 npm 包，将您的插件添加到目录中：

package.json 文件，包含模块信息和插件元数据
README.md 文件，包含安装和配置说明
包含转译后的 ES5 代码的 /dist 目录
根目录下编写为 ES5 模块的 preset.js 文件

插件元数据

我们依靠元数据来组织您的插件在目录中的显示。您必须将 storybook-addons 添加为第一个关键字，然后是您的插件类别。附加的关键字将用于搜索和作为标签。

属性	描述	示例
`name`	插件包名称	storybook-addon-example
`description`	插件描述	使用 CSS 为所有元素添加轮廓，以帮助布局定位和对齐
`author`	作者名称	winkerVSbecks
`keywords`	描述插件的关键字列表	`["storybook-addons","style","debug"]`
`repository`	插件仓库	`{"type": "git","url": "https://github.com/someone/my-addon" }`

通过添加具有以下字段的 storybook 属性来自定义插件的外观。

属性	描述	示例
`displayName`	显示名称	示例
`icon`	插件自定义图标链接（不支持 SVG）	https://yoursite.com/addon-icon.png
`unsupportedFrameworks`	不支持的框架列表	`["vue"]`
`supportedFrameworks`	支持的框架列表	`["react", "angular"]`

填写 supportedFrameworks 和 unsupportedFrameworks 字段的值时，请参考以下列表。

react
vue
angular
web-components
ember
html
svelte
preact
react-native

请确保完全按照列表中的内容复制每个项，以便我们能在目录中正确索引您的插件。

package.json

{
  "name": "storybook-addon-example",
  "version": "1.0.0",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "repository": {
    "type": "git",
    "url": "https://github.com/chromaui/storybook-addon-example"
  },
  "author": "winkerVSbecks",
  "keywords": ["storybook-addons", "style", "debug", "layout", "css"],
  "storybook": {
    "displayName": "Outline",
    "unsupportedFrameworks": ["vue"],
    "supportedFrameworks": ["react", "angular"],
    "icon": "https://yoursite.com/addon-icon.png"
  }
}

上面的 package.json 在目录中看起来如下所示。请此处查看生产环境 package.json 的示例。

Storybook addon in the catalog

我的插件多久才能出现在目录中？

插件发布后，它将出现在目录中。从您发布插件到它在目录中列出之间可能存在延迟。如果您的插件在 24 小时内没有出现，请提交一个 issue。

指南

指南 (Recipes) 是一组将第三方库集成到 Storybook 中的说明，适用于插件不存在或集成需要一些手动操作的情况。

谁拥有它们？

指南 (Recipes) 由 Storybook 团队编写和维护。我们根据社区受欢迎程度、工具成熟度以及集成稳定性来创建指南。我们的目标是确保指南能够长期有效。

没有找到您想要的指南？如果它在社区中很受欢迎，我们的文档团队会编写一个。同时，您可以尝试搜索解决方案——很有可能有人和您有相同的需求。您也可以通过在自己的网站上编写指南来帮助我们，这会加快研究过程。

请求指南

如果您想请求一个指南，请在我们的 GitHub 仓库中发起新的讨论。我们会审查您的请求，如果它很受欢迎，我们会将其添加到我们的待办事项列表并优先处理。

了解更多关于 Storybook 插件生态系统的信息

了解其他类型的插件的插件类型
了解插件开发的基础知识的编写插件
了解预设开发的预设
了解要求和可用指南的集成目录
了解可用 API 的API 参考