Docs
Storybook Docs

添加到集成目录

Storybook 有两种类型的集成，即插件和秘诀，它们在 集成目录 中列出。

¥Storybook has two types of integrations, addons and recipes, which are listed in the integration catalog.

插件

¥Addons

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

¥Storybook addons are distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in package.json.

通过发布遵循以下要求的 npm 包将你的插件添加到目录中：

¥Add your addon to the catalog by publishing a npm package that follows these requirements:

  • package.json 与 模块信息 和 插件元数据

    ¥package.json with module information and addon metadata

  • README.md 文件包含安装和配置说明

    ¥README.md file with installation and configuration instructions

  • /dist 目录包含转译的 ES5 代码

    ¥/dist directory containing transpiled ES5 code

  • preset.js 文件在根级别以 ES5 模块形式编写

    ¥preset.js file written as an ES5 module at the root level

复习一下如何 编写 Storybook 插件。

¥Get a refresher on how to write a Storybook addon.

插件元数据

¥Addon metadata

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

¥We rely on metadata to organize your addon in the catalog. You must add the storybook-addons as the first keyword, followed by your addon's category. Additional keywords will be used in search and as tags.

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

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

¥Customize your addon's appearance by adding the storybook property with the following fields.

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

在填写 supportedFrameworks 和 unsupportedFrameworks 字段的值时，使用下面的列表作为参考。

¥Use the list below as a reference when filling in the values for both the supportedFrameworks and unsupportedFrameworks fields.

  • react

  • vue

  • angular

  • web-components

  • ember

  • html

  • svelte

  • preact

  • react-native

确保准确复制列出的每个项目，以便我们可以在目录中正确索引你的插件。

¥Make sure to copy each item exactly as listed so that we can properly index your addon in our catalog.

{
  // 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 此处 的示例。

¥The package.json above appears like below in the catalog. See an example of a production package.json here.

Storybook addon in the catalog

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

¥How long does it take for my addon to show up in the catalog?

发布插件后，它将出现在目录中。发布插件和将其列在目录中之间可能会有延迟。如果你的插件在 24 小时内没有出现，打开问题。

¥Once you publish the addon, it will appear in the catalog. There may be a delay between the time you publish your addon and when it's listed in the catalog. If your addon doesn't show up within 24 hours, open an issue.

秘诀

¥Recipes

秘诀是一组指令，用于在插件不存在或集成需要一些手动操作的情况下将第三方库集成到 Storybook 中。

¥Recipes are a set of instructions to integrate third-party libraries into Storybook in cases where an addon does not exist or the integration requires some manual effort.

谁拥有它们？

¥Who owns them?

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

¥Recipes are written and maintained by the Storybook team. We create recipes based on community popularity, tool maturity, and stability of the integration. Our goal is to ensure that recipes continue to work over time.

找不到你想要的秘诀？如果它在社区中很流行，我们的文档团队会编写一个。与此同时，尝试寻找解决方案 - 很可能有人和你有同样的要求。你还可以通过在自己的网站上编写秘诀来帮助我们，从而加快研究过程。

¥Not finding the recipe that you want? If it's popular in the community, our docs team will write one. In the mean time, try searching for a solution — it's likely that someone has the same requirements as you do. You can also help us out by writing recipes on your own site which speeds up the research process.

请求秘诀

¥Request a recipe

如果你想请求秘诀，请在我们的 GitHub 存储库中打开 新讨论。我们将审查你的请求，如果它很受欢迎，我们会将其添加到我们的待办事项中并优先处理。

¥If you'd like to request a recipe, open a new discussion in our GitHub repo. We'll review your request, and if it's popular, we'll add it to our backlog and prioritize it.

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

¥Learn more about the Storybook addon ecosystem