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 制作 ☕