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 中注册插件，并添加 staticDirs 配置以服务 'public' 目录。

为了确保 Confluence 文档能被你的 Storybook 应用访问，你需要配置 Storybook 来服务存储获取到的文档的 public 目录。

export default {
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "addon-confluence", // Add this line to register the addon
  ],
  staticDirs: ["public"], // Add this line to serve the 'public' directory
};

3. 为 Confluence 创建一个令牌！

前往此链接并为你的账户创建一个 API 令牌。然后将其与你的账户邮箱一起添加到 .env 文件中，如下所示。

STORYBOOK_CONFLUENCE_EMAIL=youremail@example.com
STORYBOOK_CONFLUENCE_TOKEN=YourTokenHere!

4. 在你的 .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;

5. 为你的故事添加一个 Confluence ID！

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

例如：https://<你的_domain>.atlassian.net/wiki//pages/<你的_page_id>/Example_Page_Name

然后简单地将 "confluence" 作为对象添加到你的故事中。然后将 id 添加为其属性。

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

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

6. 向 package.json 添加脚本

为了确保 fetchDocs 脚本在构建 Storybook 之前自动运行，你需要通过添加 prestorybook:build 脚本并确保已安装 cross-env 来更新你的项目 package.json 文件。请遵循以下步骤：

打开你的项目 package.json 文件，并在 "scripts" 部分下添加以下脚本：

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

如果你有不同的构建脚本，请在你的构建脚本前加上 pre。然后将值设置为 fetchDocs，如上所示。

7. 在 GitHub Actions 中注入环境变量

首先向你的 GitHub 仓库添加一个新的 secret。导航到你在 GitHub 上的仓库，点击 "Settings" 标签页，然后点击左侧边栏中的 "Secrets"。点击 "New repository secret" 按钮，然后添加以下 secrets：

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