加入直播:周四,美国东部时间上午 11 点,Storybook 9 发布及 AMA (问答)

导航不同版本的 Storybook 样式指南。

在 Github 上查看

storybook-addon-versions

安装

npm i @panosvoudouris/addon-versions

如果您配置了为每个版本生成一个不同的静态 Storybook 构建,此插件将允许您导航组件的不同版本。因此,如果您构建了一个静态 Storybook 并将其托管在(例如)以下目录结构中

- static-storybook
|-- 0.0.1
|-- 0.0.2
|-- 0.1.2
|-- 0.2.5

该插件将允许您通过 Versions 面板导航到各个版本

Versions demo

配置

该插件尝试从您主机的根目录获取可用样式指南版本的列表。如果找到,它将显示一个下拉菜单,然后您可以导航到各个版本,从而允许用户查看组件在不同版本中的变化情况。

使用方法

  1. 在您的 addons.js 中包含此插件
    • import '@panosvoudouris/addon-versions/register';
  2. .storybook/storybook-config.json 创建版本配置
    • {
        "storybook": {
          "versions": {
            "availableVersions": [
              "0.0.1",
              "0.0.2",
              "0.1.2",
              "0.2.5"
            ],
            "hostname": "localhost:8000",
            "localhost": "localhost:9001",
            "regex": "\/([^\/]+?)\/?$"
          }
        }
      }
      

选项

  • availableVersions:可用版本的数组。
  • hostname:静态构建所在的主机名。目前,如果您希望链接在本地开发构建中工作,但在正常托管配置中工作,则需要添加路径。
  • localhost:在开发模式下运行时,本地开发构建的位置
  • regex:这是用于提取 URL 中版本号的正则表达式。这取决于您存储静态 Storybook 构建的方式。上面的示例适用于格式为 http://localhost:port/<version>/ 的情况,因此例如,版本 0.1.2 预计会在此处找到:http://mystorybook/0.1.2/

注意

这是 https://github.com/buildit/storybook-addon-versions 的一个分支。该仓库似乎已废弃且不再维护,因此我对其进行了分支,以继续维护(例如,升级到最新的 Storybook 等)和升级。