Storybook Github 链接插件

一个 Storybook 插件，用于为每个 Story 添加指向 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 文件中，但它们也可以在每个 story 中使用，以覆盖全局设置。

名称	类型	默认值
baseURL	字符串	undefined
auto	布尔值	false

基础 URL

所有其他路径都将以该 URL 作为前缀。

[!注意] 启用 auto 选项需要此参数。

自动

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

URL 将根据 story 的标题生成，例如，标题为 Components/Info button 的 story 将发生以下变化：

• "Components/Info button" 将被转换为小写 kebab case "components/info-button"
• baseURL 将被作为前缀添加到前面，以形成完整的 URL

[!注意] 如果未提供 auto 参数，则 Github 链接仅对设置了 url 参数的单个 story 可见。

Story 参数

名称	类型	默认值
url	字符串	undefined
enabled	布尔值	true

URL

可以在每个 story 中覆盖链接，如果 auto 未设置为 true，则 Github 链接仅对设置了此参数的 story 可见。

如果检测到类似 /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 链接在该 story 中显示。

---

由 Etch 制作 ☕