Storybook 附加组件 hoge

hoge

开发脚本

• yarn start 在监视模式下运行 babel 并启动 Storybook
• yarn build 构建和打包您的附加组件代码

从 TypeScript 切换到 JavaScript

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

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

包含什么？

附加组件代码位于 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_TOKEN 创建一个同时具有读取和发布权限的令牌。
• GH_TOKEN 创建一个具有 repo 作用域的令牌。

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

• name
• author
• repository

本地

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

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，以便在有人将代码推送到您的存储库时自动发布您的附加组件。

转到 设置 > 机密，单击 新建存储库机密，然后添加您的 NPM_TOKEN。

创建版本

要本地创建版本，您可以运行以下命令，否则 GitHub Action 将为您创建版本。

yarn release

这将

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