Storybook 附加组件 Github 链接

一个 Storybook 附加组件，用于为每个故事添加一个指向 Github 源代码的链接。

安装

npm install @etchteam/storybook-addon-github-link --save-dev

Storybook 设置

在您的 .storybook 配置文件夹中创建一个名为 main.js 的文件。

向其中添加以下内容

export default {
  addons: ['@etchteam/storybook-addon-github-link']
}

然后在同一个文件夹中创建一个名为 preview.js 的文件，以设置附加组件的配置 参数。

export default {
  parameters: {
    githubLink: {
      baseURL: 'https://github.com/your-org/your-repo/src/components/',
      auto: true,
    }
  }
}

全局参数

建议在 .storybook/preview 文件中全局添加这些全局参数，但它们也可以在每个故事中使用以覆盖全局设置。

名称	类型	默认值
baseURL	字符串	未定义
auto	布尔值	false

基本 URL

所有其他路径都将附加到该 URL。

[!注意] 此参数是启用 auto 选项所必需的。

自动

根据当前正在查看的故事自动生成 URL。

URL 将从故事标题生成，例如，对于标题为 Components/Info button 的故事，将发生以下情况：

• "Components/Info button" 将转换为小写连字符形式 "components/info-button"
• baseURL 将被附加以形成完整的 URL

[!注意] 如果未提供 auto 参数，则 Github 链接仅适用于具有 url 参数的单个故事。

故事参数

名称	类型	默认值
url	字符串	未定义
enabled	布尔值	true

URL

链接可以在每个故事的基础上被覆盖，如果 auto 未设置为 true，则 Github 链接仅会显示在设置了此参数的故事中。

如果检测到子路径，例如 /make-better-software，则将继承全局 baseURL 参数。

export default {
  title: 'BetterSoftwareLink',
  parameters: {
    githubLink: {
      url: '/make-better-software'
    }
  },
};

export const Default = () => (
  <a href="https://makebetter.software">Make Better Software</a>
);

启用

将此参数设置为 false 将阻止 Github 链接出现在故事中。

---

由 ☕ 在 Etch 上制作