版本

管理 Storybook 的不同版本。

每周下载量

storybook-addon-versions

支持 Storybook 版本 7^。

安装

npm install sb-addon-versions --save-dev

yarn add -D sb-addon-versions

如果您有一个为每个版本生成不同静态 Storybook 构建的设置，则此插件允许您浏览组件的不同版本。因此，如果您构建了一个静态 Storybook 并将其托管在以下目录结构中

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

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

Versions demo

配置

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

用法

在您的 main.js 中包含该插件

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/react-vite',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'sb-addon-versions',
  ],
  framework: {
    name: '@storybook/react-vite',
  },
  docs: {
    autodocs: true,
  },
  staticDirs: '',
};

在 .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/<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 ref（分离的头部）：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 和 https://github.com/tobiashochguertel/storybook-addon-versions 的分支。该存储库似乎现在已失效且不再维护，因此我已将其分叉以继续维护（例如，升级到最新 Storybook 等）和升级。

作者

mossen

适用于

React

标签

如何安装插件创建插件