版本

管理 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 建立 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 建置的方式。上面的範例適用於 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 分支尚未部署。"
在結帳的 gl-pages 分支中建立可用版本清單： test -d ./public && cd ./public && PAGES_VERSIONS=$(find . -type d -maxdepth 1 | sed '1d' | sed 's/\.\///') && cd ..
在目前分支中，它會結帳到 head ref（分離的 head）： git checkout $CI_COMMIT_SHA
移除 build 目錄，因為我們只需要建置新版本： test -d ./public && rm -rf ./public
讀取專案的目前版本： CURRENT_VERSION=$(/usr/local/bin/dasel -f ./package.json --plain .version)
設定 build 目錄變數： BUILD_DIR="./public"
建置 Storybook： yarn build-storybook --quiet -o "$BUILD_DIR/$CURRENT_VERSION"
將擴充功能設定檔 storybook-config.json 複製到 build-dir： cp .storybook/versioning/storybook-config.json "$BUILD_DIR/"
將 index.html 複製到 build-dir，它會將 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
移除 latest 符號連結，該連結來自 gl-pages 分支的結帳： 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
t.b.d. 也將目前版本新增到清單中
將變更新增到 gl-pages 分支： git add -A "$BUILD_DIR"
檢查是否有變更（因為，否則此步驟會導致管線失敗）： git diff-index --quiet HEAD && echo "沒有要提交的內容..." || git commit --untracked-files=no -m "新增版本 $CURRENT_VERSION"
透過臨時儲存庫網址，其中也包含憑證將變更推送至 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

標籤

如何安裝擴充功能建立擴充功能