storybook-addon-versions

安装

npm i @tobiashochguertel/addon-versions

这个插件允许您导航组件的不同版本，前提是您的设置可以为每个版本生成一个不同的静态 Storybook 构建。因此，如果您构建一个静态 Storybook 并将其托管在（例如）以下目录结构中

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

该插件将允许您通过 Versions 面板导航不同版本

Versions demo

配置

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

用法

将插件包含到您的 addons.js 中

import '@tobiashochguertel/addon-versions/register';

在 .storybook/storybook-config.json 创建 Versions 配置

{
  "storybook": {
    "versions": {
      "availableVersions": [
        "0.0.1",
        "0.0.2",
        "0.1.2",
        "0.2.5"
      ],
      "hostname": "localhost:8000",
      "localhost": "localhost:9001",
      "regex": "\/([^\/]+?)\/?$"
    }
  }
}

或者不使用 hostname 属性，以便使用浏览器当前的主机名在面板中生成版本链接

{
  "storybook": {
    "versions": {
      "availableVersions": [
        "0.0.1",
        "0.0.2",
        "0.1.2",
        "0.2.5"
      ],
      "regex": "\/([^\/]+?)\/?$"
    }
  }
}

选项

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

与 CI/CD (gitlab) 集成

.pages:
  stage: build
  resource_group: build-page
  variables:
    PAGES_BRANCH: gl-pages
    HTTPS_REMOTE: https://gitlab-ci-token:${FUNCTIONAL_USER_TOKEN}@${CI_SERVER_HOST}/${CI_PROJECT_PATH}.git
    PAGES_TAG: $CI_COMMIT_TAG
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
      variables:
        PAGES_TAG: 'latest'
    - if: $CI_COMMIT_REF_NAME =~ /^v/
  before_script:
    - git version
    - curl -sSLf "$(curl -sSLf https://api.github.com/repos/tomwright/dasel/releases/tags/v1.27.3 | grep browser_download_url | grep linux_amd64 | grep -v .gz | cut -d\" -f 4)" -L -o dasel && chmod +x dasel
    - mv ./dasel /usr/local/bin/dasel
    - git config user.name $GITLAB_USER_NAME
    - git config user.email $GITLAB_USER_EMAIL
    # CI_COMMIT_SHA=$(git rev-parse HEAD)
    - git show-ref -q --heads $PAGES_BRANCH && git branch -D $PAGES_BRANCH
    - git fetch origin $PAGES_BRANCH && git checkout -b $PAGES_BRANCH origin/$PAGES_BRANCH || echo "Pages branch not deployed yet."
    - test -d ./public && cd ./public && PAGES_VERSIONS=$(find . -type d -maxdepth 1 | sed '1d' | sed 's/\.\///') && cd ..
    - echo "$PAGES_VERSIONS"
    - ls -lha
    - git checkout $CI_COMMIT_SHA
    - ls -lha
    - test -d ./docs && rm -rf ./docs
    - test -d ./public && rm -rf ./public
  script:
    - CURRENT_VERSION=$(/usr/local/bin/dasel -f ./package.json --plain .version)
    - BUILD_DIR="./public"
    - echo "$CURRENT_VERSION"
    - echo $BUILD_DIR
    - test -d $BUILD_DIR && rm -rf "${BUILD_DIR:?}/$CURRENT_VERSION"
    - mkdir -p "$BUILD_DIR"
    - yarn build-storybook --quiet -o "$BUILD_DIR/$CURRENT_VERSION"
    - ls
    - cp .storybook/versioning/storybook-config.json "$BUILD_DIR/"
    - cp .storybook/versioning/index.html "$BUILD_DIR/"
    - test -f "$BUILD_DIR/storybook-config.json" && cat "$BUILD_DIR/storybook-config.json" && echo -e "\n"
    # - test -f "$BUILD_DIR/storybook-config.json" && mv -f "$BUILD_DIR/storybook-config.json" "$BUILD_DIR/storybook-config.json.new"
    - git checkout $PAGES_BRANCH
    - rm -f "$BUILD_DIR/latest"
    - cd $BUILD_DIR && ln -s "$CURRENT_VERSION" ./latest && cd ..
    - /usr/local/bin/dasel delete -p json -f ./public/storybook-config.json ".storybook.versions.availableVersions"
    - for PAGES_VERSION in $PAGES_VERSIONS; do /usr/local/bin/dasel put string -p json -f $BUILD_DIR/storybook-config.json -m ".storybook.versions.availableVersions.[]" "$PAGES_VERSION"; done
    # - cat $BUILD_DIR/storybook-config.json | /usr/local/bin/dasel select -p json .storybook.versions.availableVersions --plain | grep "$CURRENT_VERSION" && /usr/local/bin/dasel put string -p json -f $BUILD_DIR/storybook-config.json -m ".storybook.versions.availableVersions.[]" "$CURRENT_VERSION"
    - test -f "$BUILD_DIR/storybook-config.json" && cat "$BUILD_DIR/storybook-config.json" && echo -e "\n"
    - git add -A "$BUILD_DIR"
    - git diff-index --quiet HEAD && echo "Nothing to commit..." || git commit --untracked-files=no -m "Add version $CURRENT_VERSION"
    - git push $HTTPS_REMOTE gl-pages
  after_script:
    - test -d ./docs && rm -rf ./docs
    - test -d ./public && rm -rf ./public

以上代码执行以下步骤

创建一个名为 gl-pages 的空分支
删除检出的 gl-pages 分支：git show-ref -q --heads $PAGES_BRANCH && git branch -D $PAGES_BRANCH
再次从远程检出 gl-pages 分支：git fetch origin $PAGES_BRANCH && git checkout -b $PAGES_BRANCH origin/$PAGES_BRANCH || echo "Pages branch not deployed yet."
在检出的 gl-pages 分支中创建一个可用版本列表：test -d ./public && cd ./public && PAGES_VERSIONS=$(find . -type d -maxdepth 1 | sed '1d' | sed 's/\.\///') && cd ..
在当前分支中，它检出 head 引用 (分离头)：git checkout $CI_COMMIT_SHA
删除构建目录，因为我们只需要构建新版本：test -d ./public && rm -rf ./public
读出项目的当前版本：CURRENT_VERSION=$(/usr/local/bin/dasel -f ./package.json --plain .version)
设置构建目录变量：BUILD_DIR="./public"
构建 storybook：yarn build-storybook --quiet -o "$BUILD_DIR/$CURRENT_VERSION"
将插件配置文件 storybook-config.json 复制到构建目录：cp .storybook/versioning/storybook-config.json "$BUILD_DIR/"
将一个 index.html 文件复制到构建目录，该文件会将 http://localhost/ 重定向到 http://localhost/latest：cp .storybook/versioning/index.html "$BUILD_DIR/"
检出 gl-pages，我们将只保留 ./public 下未跟踪的文件：git checkout $PAGES_BRANCH
移除随从分支 gl-pages 检出而来的 latest 软链接：rm -f "$BUILD_DIR/latest"
为当前版本创建一个软链接：cd $BUILD_DIR && ln -s "$CURRENT_VERSION" ./latest && cd ..
删除 json 文件中的 availableVersions 数组：/usr/local/bin/dasel delete -p json -f ./public/storybook-config.json ".storybook.versions.availableVersions"
将之前存储的现有版本列表写入配置：for PAGES_VERSION in $PAGES_VERSIONS; do /usr/local/bin/dasel put string -p json -f $BUILD_DIR/storybook-config.json -m ".storybook.versions.availableVersions.[]" "$PAGES_VERSION"; done
待办：也将当前版本添加到列表中
将更改添加到分支 gl-pages：git add -A "$BUILD_DIR"
检查是否有更改（否则此步骤会导致流水线失败）：git diff-index --quiet HEAD && echo "Nothing to commit..." || git commit --untracked-files=no -m "Add version $CURRENT_VERSION"
通过包含凭据的临时仓库 URL 将更改推送到 gl-pages 仓库：git push $HTTPS_REMOTE gl-pages

HTTPS_REMOTE: https://gitlab-ci-token:${FUNCTIONAL_USER_TOKEN}@${CI_SERVER_HOST}/${CI_PROJECT_PATH}.git

一个完整的示例可以在这里找到：docs/.gitlab-ci.yml

注意

这是 https://github.com/panosvoudouris/storybook-addon-versions 的一个分支。该仓库似乎已废弃且不再维护，因此我将其分支以继续维护（例如升级到最新的 storybook 等）和升级。

作者

tobias.hochguertel

标签

如何安装插件创建插件