Storybook 插件相关链接

为你的故事添加相关链接。这对于添加指向故事的外部链接以突出显示学习资源、灵感、来源等非常有用。

用法

你可以通过如下方式将相关链接添加到你的故事中

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 并启动 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 来管理全局状态并修改 Story 的内容。
• 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 并编辑以下字段

• 名称
• 作者
• 存储库

本地

要在本地使用 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

联系我