Storybook 相关链接插件
为你的 stories 添加相关链接。对于为 stories 添加外部链接很有用,可以突出学习资源、灵感、来源等。
用法
你可以通过如下方式为你的 stories 添加参数以添加相关链接
MyStory.parameters = {
relatedLinks: {
sections: [
{
title: "Links to study",
links: [
{
text: "Angular Material",
url: "https://material.angular.io",
description: "This component is highly inspired from Angular Material. Which is an Angular port of the Material design by Google",
},
],
},
],
},
}
演示
开发脚本
yarn start
以监听模式运行 babel 并启动 Storybookyarn build
构建并打包你的插件代码
从 TypeScript 切换到 JavaScript
不想使用 TypeScript?我们提供一个方便的 eject 命令:yarn eject-ts
这将把所有代码转换为 JS。这是一个破坏性过程,因此我们建议你在开始编写任何代码之前运行此命令。
包含什么?
插件代码位于 src
中。它展示了所有核心插件相关概念。三种 UI 范例
src/Tool.js
src/Panel.js
src/Tab.js
它们与插件本身一起,在 src/preset/manager.js
中注册。
管理状态并与 story 交互
src/withGlobals.js
和src/Tool.js
演示了如何使用useGlobals
管理全局状态并修改 Story 的内容。src/withRoundTrip.js
和src/Panel.js
演示了使用 channels 进行双向通信。src/Tab.js
演示了如何使用useParameter
访问当前 story 的参数。
你的插件可能会使用这些模式中的一种或多种。请随意删除未使用的代码。相应地更新 src/preset/manager.js
和 src/preset/preview.js
。
最后,在 src/constants.js
中配置你的插件名称。
元数据
Storybook 插件在目录中列出并通过 npm 分发。目录通过查询 npm 的 registry 中 package.json
里 Storybook 特定的元数据来填充。本项目已配置了示例数据。在插件元数据文档中了解更多可用选项。
发布管理
设置
本项目配置使用 auto 进行发布管理。它会生成变更日志并将其推送到 GitHub 和 npm。因此,你需要配置对两者的访问权限
然后打开你的 package.json
并编辑以下字段
名称
作者
仓库
本地
要在本地使用 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,以便在有人推送到你的仓库时发布你的插件。
前往 设置 > 密钥,点击 新建仓库密钥,并添加你的 NPM_TOKEN
。
创建发布
要在本地创建发布,你可以运行以下命令,否则 GitHub action 会为你创建发布。
yarn release
这将
- 构建并打包插件代码
- 提升版本号
- 将发布推送到 GitHub 和 npm
- 将变更日志推送到 GitHub