Storybook 插件 组件 AI 文档

这个插件将为您提供有关显示组件的文档。这样，新用户在接触您的代码库时就可以阅读如何使用它了。

开发脚本

• yarn start 在观察模式下运行 babel 并启动 Storybook
• yarn build 构建并打包您的插件代码

从 TypeScript 切换到 JavaScript

不想使用 TypeScript？我们提供了一个方便的 eject 命令：yarn eject-ts

这将把所有代码转换为 JS。这是一个破坏性过程，因此我们建议您在开始编写任何代码之前运行此命令。

包含什么？

插件代码位于 src 目录中。它演示了所有核心插件相关概念。三种UI 范例

• src/Tool.tsx
• src/Panel.tsx
• src/Tab.tsx

它们与插件本身一起注册在 src/manager.ts 中。

管理状态并与故事互动

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

您的插件可能会使用这些模式中的一种或多种。请随意删除未使用的代码。相应地更新 src/manager.ts 和 src/preview.ts。

最后，在 src/constants.ts 中配置您的插件名称。

元数据

Storybook 插件列在目录中并通过 npm 发布。目录通过查询 npm 注册表中的 package.json 文件中的 Storybook 特定元数据来填充。本项目已配置示例数据。在插件元数据文档中了解更多可用选项。

发布管理

设置

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

• NPM_TOKEN 创建一个具有 读取和发布 权限的 token。
• GH_TOKEN 创建一个具有 repo 范围权限的 token。

然后打开您的 package.json 文件并编辑以下字段

• name
• author
• repository

本地

要在本地使用 auto，请在项目根目录创建一个 .env 文件并将您的 token 添加到其中

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

最后，在 GitHub 上创建标签。将来更改包时会用到这些标签。

npx auto create-labels

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

GitHub Actions

此模板已配置 GitHub Actions，以便在任何人推送到您的仓库时发布您的插件。

转到 Settings > Secrets，点击 New repository secret，并添加您的 NPM_TOKEN。

创建发布版本

要在本地创建发布版本，您可以运行以下命令，否则 GitHub action 会为您完成发布。

yarn release

这将

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