版本

管理 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 面板浏览各种版本

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 构建的方式。上面的示例适用于格式 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
读取项目的当前版本：/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 和 https://github.com/tobiashochguertel/storybook-addon-versions 的一个分支。似乎原仓库已经废弃且不再维护，因此我分叉了它以继续维护（例如升级到最新的 storybook 等）和更新。

作者

mossen

支持

React

标签

如何安装插件创建插件