Storybook 擴充功能元件 AI 文件

此擴充功能將提供您所顯示元件的相關文件。如此一來，您程式碼庫的新使用者就可以閱讀如何使用它

開發腳本

• yarn start 以監看模式執行 babel 並啟動 Storybook
• yarn build 建置並封裝您的擴充功能程式碼

從 TypeScript 切換到 JavaScript

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

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

包含哪些內容？

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

• src/Tool.tsx
• src/Panel.tsx
• src/Tab.tsx

這些與擴充功能本身一起在 src/manager.ts 中註冊。

管理狀態並與故事互動

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

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

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

中繼資料

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

發佈管理

設定

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

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

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

• 名稱
• 作者
• 儲存庫

本機

若要在本機使用 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，以便在有人推送到您的儲存庫時發佈您的擴充功能。

前往 設定 > 機密，按一下 新增儲存庫機密，並新增您的 NPM_TOKEN。

建立發佈

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

yarn release

這會

• 建置並封裝擴充功能程式碼
• 變更版本
• 將發佈推送到 GitHub 和 npm
• 將變更日誌推送到 GitHub