Storybook 擴充功能相關連結

在你的 Story 中新增相關連結。對於新增 Story 的外部連結以強調學習資源、靈感、來源等很有用。

用法

您可以透過將參數新增到您的 Story 中來新增相關連結，如下所示

MyStory.parameters = {
  relatedLinks: {
    sections: [
      {
        title: "Links to study",
        links: [
          {
            text: "Angular Material",
            url: "https://material.angular.io",
            description: "This component is highly inspired from Angular Material. Which is an Angular port of the Material design by Google",
          },
        ],
      },
    ],
  },
}

範例

開發腳本

• yarn start 在監看模式下執行 babel 並啟動 Storybook
• yarn build 建置並打包您的擴充功能程式碼

從 TypeScript 切換到 JavaScript

不想使用 TypeScript 嗎？我們提供方便的退出命令：yarn eject-ts

這會將所有程式碼轉換為 JS。這是一個破壞性的過程，因此我們建議在您開始撰寫任何程式碼之前執行此操作。

包含哪些內容？

擴充功能程式碼位於 src 中。它示範了所有核心擴充功能相關概念。三種 基於 UI 的範例

• src/Tool.js
• src/Panel.js
• src/Tab.js

它們與擴充功能本身一起在 src/preset/manager.js 中註冊。

管理狀態並與 Story 互動

• src/withGlobals.js & src/Tool.js 示範如何使用 useGlobals 來管理全域狀態並修改 Story 的內容。
• src/withRoundTrip.js & src/Panel.js 示範使用通道的雙向通訊。
• src/Tab.js 示範如何使用 useParameter 來存取目前 Story 的參數。

您的擴充功能可能會使用其中一種或多種模式。您可以隨意刪除未使用的程式碼。請相應更新 src/preset/manager.js 和 src/preset/preview.js。

最後，在 src/constants.js 中設定您的擴充功能名稱。

中繼資料

Storybook 擴充功能列在 目錄中，並透過 npm 發佈。目錄是透過在 package.json 中查詢 npm 的登錄檔中特定於 Storybook 的中繼資料來填入的。此專案已使用範例資料設定。請在 擴充功能中繼資料文件中瞭解更多可用選項。

發佈管理

設定

此專案已設定為使用 auto 進行發佈管理。它會產生變更記錄，並將其推送到 GitHub 和 npm。因此，您需要設定對兩者的存取權

• NPM_TOKEN 建立具有「讀取和發佈」權限的權杖。
• GH_TOKEN 建立具有 repo 範圍的權杖。

然後開啟您的 package.json 並編輯以下欄位

• name
• author
• repository

本機

若要在本機使用 auto，請在您的專案根目錄建立 .env 檔案，並將您的權杖新增至其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最後，在 GitHub 上建立標籤。您將在未來變更套件時使用這些標籤。

npx auto create-labels

如果您在 GitHub 上查看，您現在會看到一組 auto 希望您使用的標籤。使用這些標籤來標記未來的提取請求。

GitHub Actions

此範本已設定 GitHub Actions，以便在有人推送到您的儲存庫時隨時發佈您的擴充功能。

前往 Settings > Secrets，按一下 New repository secret，然後新增您的 NPM_TOKEN。

建立發佈

若要在本機建立發佈，您可以執行下列命令，否則 GitHub Action 會為您建立發佈。

yarn release

這將會

• 建置並打包擴充功能程式碼
• 遞增版本
• 將發佈推送到 GitHub 和 npm
• 將變更記錄推送到 GitHub

與我聯繫