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 文件中，如下所示。

[email protected]
STORYBOOK_CONFLUENCE_TOKEN=YourTokenHere!

4. 向您的故事添加 Confluence ID。

接下来，我们需要向故事添加页面 ID。您可以在查看所需的 Confluence 页面时在 URL 中找到它。此步骤只需要 id，但下一步将需要 your_domain。

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

然后只需将 "confluence" 作为对象添加到您的故事中。然后将 id 添加为其属性。

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

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

5. 向您的 .storybook 目录添加 confluence.js 文件。

文件名必须为 "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 上的存储库，单击“设置”选项卡，然后单击左侧边栏中的“密钥”。单击“新建存储库密钥”按钮，并添加以下密钥

• 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 部署过程中正确注入。