添加到集成目录
Storybook 有两种类型的集成：插件和食谱，它们列在 集成目录 中。
插件
Storybook 插件通过 npm 分发。目录通过查询 npm 注册表中的 Storybook 特定元数据来填充，这些元数据位于 package.json 中。
通过发布一个符合以下要求的 npm 包来将您的插件添加到目录中
package.json包含 模块信息 和 插件元数据README.md文件，其中包含安装和配置说明/dist目录，其中包含转译后的 ES5 代码preset.js文件，以 ES5 模块的形式编写，位于根目录
回顾如何 编写 Storybook 插件。
插件元数据
我们依靠元数据来在目录中组织您的插件。您必须添加 storybook-addons 作为第一个关键字，后面跟着您的插件的类别。其他关键字将用于搜索和标签。
| 属性 | 描述 | 示例 |
|---|---|---|
name | 插件包名称 | storybook-addon-outline |
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/outline-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-outline",
"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-outline"
},
"author": "winkerVSbecks",
"keywords": ["storybook-addons", "style", "debug", "layout", "css"],
"storybook": {
"displayName": "Outline",
"unsupportedFrameworks": ["vue"],
"supportedFrameworks": ["react", "angular"],
"icon": "https://yoursite.com/outline-icon.png"
}
}上面的 package.json 在目录中显示如下。查看生产 package.json 的示例。
我的插件需要多长时间才能在目录中显示？
发布插件后，它将显示在目录中。您发布插件的时间和它在目录中列出的时间之间可能会有延迟。如果您的插件在 24 小时内没有显示，请 打开一个问题。
食谱
食谱是一组将第三方库集成到 Storybook 中的说明，在没有插件或集成需要一些手动操作的情况下使用。
谁拥有它们？
食谱由 Storybook 团队编写和维护。我们根据社区的流行度、工具的成熟度和集成的稳定性来创建食谱。我们的目标是确保食谱随着时间的推移而继续有效。
找不到你想要的食谱？如果它在社区中很受欢迎，我们的文档团队会编写一个。同时，尝试搜索解决方案 - 很可能有人与你有相同的需求。你也可以通过在自己的网站上编写食谱来帮助我们，这将加快研究过程。
请求食谱
如果你想请求食谱，请在我们的 GitHub 仓库中打开一个新讨论。我们会审查你的请求，如果它很受欢迎，我们会将其添加到我们的待办事项中并优先处理它。
了解有关 Storybook 附加组件生态系统的更多信息