84,621
返回集成

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

在 Github 上查看

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 demo

配置

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

用法

  1. 在您的 `addons.js` 中包含插件
import '@tobiashochguertel/addon-versions/register';
  1. 在 `.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": "\/([^\/]+?)\/?$"
    }
  }
}

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

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

选项

  • availableVersions：可用版本的数组。
  • hostname：静态构建所在的主机名。目前，如果您希望链接在本地开发构建中工作，但在正常托管配置中 *不* 工作，则需要添加路径。
  • localhost：在开发模式下运行时，本地开发构建的位置
  • regex：用于提取 URL 版本号的正则表达式。这取决于您存储静态 Storybook 构建的方式。上面的示例适用于 `https://127.0.0.1:port//` 格式，例如，版本 `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 ..`

  • 在当前分支中，检出头部引用（分离的头部）：`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，它将 `https://127.0.0.1/` 重定向到 `https://127.0.0.1/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
    tobias.hochguertel
标签
如何安装插件 创建插件