文档
Storybook Docs

添加到集成目录

Storybook 有两种类型的集成,插件和配方,它们在集成目录中列出。

插件

Storybook 插件通过 npm 分发。目录通过查询 npm 注册表中的 Storybook 特定元数据在 package.json 中填充。

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

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

回顾一下如何编写 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显示名称Outline
icon插件自定义图标的链接(不支持 SVG)https://yoursite.com/outline-icon.png
unsupportedFrameworks不支持的框架列表["vue"]
supportedFrameworks支持的框架列表["react", "angular"]

在填写 supportedFrameworksunsupportedFrameworks 字段的值时,请使用下面的列表作为参考。

  • 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 的示例此处

Storybook addon in the catalog

我的插件需要多长时间才能显示在目录中?

一旦您发布插件,它将出现在目录中。在您发布插件到它在目录中列出之间可能会有延迟。如果您的插件在 24 小时内没有显示,请打开一个 issue

配方

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

谁拥有它们?

配方由 Storybook 团队编写和维护。我们根据社区受欢迎程度、工具成熟度和集成的稳定性来创建配方。我们的目标是确保配方随着时间的推移继续工作。

找不到您想要的配方?如果它在社区中很受欢迎,我们的文档团队将编写一个。在此期间,尝试搜索解决方案 - 很可能有人与您有相同的需求。您也可以在您自己的网站上编写配方来帮助我们,这可以加快研究过程。

请求配方

如果您想请求配方,请在我们的 GitHub 仓库中发起新的讨论。我们将审查您的请求,如果它很受欢迎,我们会将其添加到我们的 backlog 中并优先处理。

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