Storybook 擴充套件 confluence-addon

一個在 Storybook 中實現 Confluence 文件功能的擴充套件。

開始使用

1. 安裝

npm install -D addon-confluence

yarn add -D addon-confluence

pnpm add -D addon-confluence

2. 在 `.storybook/main.js` 中註冊擴充套件

export default {
  addons: ["addon-confluence"],
};

3. 為 Confluence 建立權杖！

前往此 連結 並為您的帳戶建立一個 API 權杖。然後將它與您的帳戶電子郵件一起新增到 .env 檔案中，如下所示。

STORYBOOK_CONFLUENCE_EMAIL=youremail@example.com
STORYBOOK_CONFLUENCE_TOKEN=YourTokenHere!

4. 將 Confluence ID 新增至您的 story！

接下來，我們需要將頁面 ID 新增至 story。您可以在檢視所需的 Confluence 頁面時在 URL 中找到它。此步驟我們只需要 id，但下一步我們將需要 your_domain。

例如：https://<your_domain>.atlassian.net/wiki//pages/<your_page_id>/Example_Page_Name

然後只需將 "confluence" 作為物件新增到您的 story。然後將 id 作為其屬性新增

export default {
  title: "My stories",
  component: Button,
};

export const myStory = {
  parameters: {
    confluence: {
      id: 12345678,
    },
  },
};

5. 將 confluence.js 檔案新增至您的 .storybook 目錄。

檔案名稱必須為 "confluence.js"。這將是腳本在建置時提取文件的目標。預設導出必須是具有 domain 和 id 鍵的物件陣列。

const domain = "your-domain";

const confluence = [
  // Add your (domain, id) pairs here
  { domain: domain, id: "4166582285" },
  { domain: domain, id: "4166844417" },
  { domain: "different-domain", id: "4166844418" },
];
// This can be named anything but it must be a default export of an array of objects with `domain` and `id` keys.
export default confluence;

6. 更新 package.json 腳本

為了確保 fetchDocs 腳本在建置 Storybook 之前自動執行，您需要透過新增 prestorybook:build 腳本並確保已安裝 cross-env 來更新專案的 package.json。請按照下列步驟操作

a. 將腳本新增至 package.json

開啟專案的 package.json 檔案，並在 "scripts" 區段下新增以下腳本

{
  "scripts": {
    // ... other scripts
   "prebuild-storybook": "fetchDocs",
    "storybook:build": "cross-env NODE_OPTIONS=--openssl-legacy-provider storybook build",
    // ... other scripts
  }
}

如果您有不同的建置腳本，請在您的建置腳本前加上 pre，並將值設定為如上所示的 fetchDocs。

7. 在 GitHub Actions 中注入環境變數

首先，將新的機密新增至您的 GitHub 儲存庫。在 GitHub 上導覽至您的儲存庫，按一下「Settings」標籤，然後按一下左側邊欄中的「Secrets」。按一下「New repository secret」按鈕，並新增以下機密

• STORYBOOK_CONFLUENCE_EMAIL：與您的 Confluence 帳戶相關聯的電子郵件地址。
• STORYBOOK_CONFLUENCE_TOKEN：為您的 Confluence 帳戶產生的 API 權杖。

如果您使用 Chromatic 進行部署，並且需要將環境變數注入到您的託管 Storybook 中，請按如下方式更新您的 .github/workflows/chromatic.yml 檔案

.github/workflows/chromatic.yml
jobs:
  chromatic:
    steps:
      # ... other steps

      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
        env:
          # 👇 Sets the environment variable
          STORYBOOK_CONFLUENCE_EMAIL: ${{ secrets.STORYBOOK_CONFLUENCE_EMAIL }}
          STORYBOOK_CONFLUENCE_TOKEN: ${{ secrets.STORYBOOK_CONFLUENCE_TOKEN }}

透過新增此組態，您的 Storybook 環境變數將在 Chromatic 部署過程中正確注入。