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 面板瀏覽各種版本

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 ..

  • 在目前的分支中，它會簽出 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，它會將 https://127.0.0.1/ 重定向到 https://127.0.0.1/latest 到 build-dir：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"

  • 透過包含憑證的臨時儲存庫網址將變更推送至 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 製作
標籤
如何安裝擴充套件 建立擴充套件