待办事项

[] 如果未设置 iframeSrc，则不显示面板 [] 替换自述文件

Storybook 附加组件工具包

简化 Storybook 附加组件的创建

• 📝 开发中的实时编辑
• ⚛️ React/JSX 支持
• 📦 使用 Babel 进行转译和捆绑
• 🏷 插件元数据
• 🚢 使用 Auto 进行发布管理
• 🧺 样板代码和示例代码

入门

点击 **使用此模板** 按钮开始。

克隆您的仓库并安装依赖项。

npm install

开发脚本

• npm run start 在观察模式下运行 babel 并启动 Storybook
• npm run build 构建和打包您的附加组件代码

包含什么？

附加组件代码位于 src 中。它演示了所有与附加组件相关的核心概念。三个 基于 UI 的附加组件范式

• src/Tool.js
• src/Panel.js
• src/Tab.js

它们以及附加组件本身在 src/preset/manager.js 中注册。

管理状态并与故事交互

• src/withGlobals.js & src/Tool.js 演示了如何使用 useGlobals 管理全局状态并修改故事内容。
• src/withRoundTrip.js & src/Panel.js 演示了使用通道进行双向通信。
• src/Tab.js 演示了如何使用 useParameter 访问当前故事的参数。

您的附加组件可能使用其中一种或多种模式。您可以随意删除未使用的代码。相应地更新 src/preset/manager.js 和 src/preset/preview.js。

最后，在 src/constants.js 中配置您的附加组件名称。

元数据

Storybook 附加组件列在 目录 中，并通过 npm 分发。目录通过查询 npm 注册表中 package.json 中的 Storybook 特定元数据来填充。此项目已配置了示例数据。详细了解 附加组件元数据文档 中可用的选项。

发布管理

设置

此项目已配置为使用 Auto 进行发布管理。它生成变更日志并将其推送到 GitHub 和 npm。因此，您需要配置对两者的访问权限。

• 使用 npm adduser 进行身份验证
• 创建一个 访问令牌。您需要一个同时具有读取和发布权限的令牌。
• 同样，生成一个 Github 令牌。此令牌将需要 repo 范围。

在项目的根目录中创建一个 .env 文件，并将这两个令牌都添加到其中。

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最后，**在 GitHub 上创建标签**。将来进行包更改时，您将使用这些标签。

npx auto create-labels

如果您在 GitHub 上查看，现在您将看到一组 Auto 希望您使用的标签。使用这些标签来标记未来的拉取请求。

创建发布

npm run release

这将

• 构建和打包附加组件代码
• 提升版本
• 将发布推送到 GitHub 和 npm
• 将变更日志推送到 GitHub