在工具栏中提供故事的源链接。
您的任何支持都将极大地帮助我维护和改进此插件。谢谢!
npm install storybook-source-link
将 storybook-source-code
添加到您在 .storybook/main.js|ts
配置文件中的 addons 数组中
示例
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
stories: [
"../stories/**/*.mdx",
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
"storybook-source-link" // <-- add it here
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
},
};
export default config;
全局、在组件级别和/或在故事级别定义一个 sourceLink
参数,或一个 sourceLinkPrefix
参数。请参阅参数继承规则。这允许您控制如何为每个故事生成链接。
以下是控制链接生成方式的相关代码
const getLink = (prefix: string | undefined, link: string | undefined) => {
if (!link) return null;
if (prefix) link = `${prefix}${link}`
return link
}
请参阅完整源代码了解如何渲染。
您可以在 .storybook/preview.js
文件中像这样设置全局参数来定义默认链接
export const parameters = {
sourceLink: '<link to source>'
sourceLinkPrefix: '<prefix to link>'
}
一些例子可能如下所示
export const parameters = {
// each story will link here, unless specified otherwise in either the component, or the story
sourceLink: 'https://github.com/Sirrine-Jonathan/storybook-source-link/',
}
export const parameters = {
// stories will link to https://github.com/Sirrine-Jonathan/storybook-source-link
sourceLink: 'storybook-source-link/',
sourceLinkPrefix: 'https://github.com/Sirrine-Jonathan/'
// the sourceLinkPrefix here allows us to define sourceLinks at the component and story level
// that use the same prefix
}
export const parameters = {
// stories with a `sourceLink` parameter defined at the story or component level will use this as a prefix,
// unless a different prefix is defined at the component or story level as well
sourceLinkPrefix: 'https://github.com/Sirrine-Jonathan/storybook-source-link/blob/main/stories/'
// no sourceLink parameter is defined here, so any story missing a sourceLink parameter will have no link
// unless a link is specified at the component level
}
为了更精细的调整,您可以在每个组件内部定义相同的参数,用于该组件内的每个故事。
*.stories.js
export default {
title: 'Example',
component: Button,
parameters: {
sourceLink: '<link to source>'
sourceLinkPrefix: '<prefix to link>'
}
};
一个例子可能是
export default {
title: 'Example',
component: Button,
parameters: {
sourceLink: 'https://github.com/Sirrine-Jonathan/storybook-source-link/blob/main/stories/Button.js',
sourceLinkPrefix: '' // pass an empty string to disable the prefix set globally for stories for this component
}
};
在组件级别定义的参数会覆盖在 .storybook/preview.js
文件中全局定义的参数。
这可以在故事级别完成,以覆盖全局设置和组件级别设置。
对于需要更具体处理的每个故事,在每个 *.stories.js
文件中定义一个 sourceLink
参数
或者同时定义一个 sourceLinkPrefix
和一个 sourceLink
参数,如下所示
export const PrimaryStory = () => (
<Button>Primary</Button>
);
PrimaryStory.parameters = {
sourceLink: '<link to source>'
sourceLinkPrefix: '<prefix to link>'
};
下表旨在帮助您了解点击图标时可能出现的情况。
请记住,某些可能的配置可能会导致非预期的链接。
例如,如果您在故事上设置了 sourceLinkPrefix 参数,但没有设置 sourceLink,则故事上设置的前缀将与层次结构中向上定义的下一个 sourceLink 参数一起使用。这可能导致一个无意义的链接。
几乎总是如此,无论您在组件还是故事级别设置 sourceLinkPrefix 参数,都应该同时设置 sourceLink 参数。
✅ sourceLinkPrefix(源链接前缀)
✅ sourceLink(源链接)
export const parameters = {
// .storybook/preview.js
sourceLink: '<link to source>'
sourceLinkPrefix: '<prefix to link>'
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | 故事前缀:故事链接 |
✔ | ✔ | ✔ | 故事前缀:组件链接 | |
✔ | ✔ | ✔ | 组件前缀:故事链接 | |
✔ | ✔ | 组件前缀:组件链接 | ||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 故事前缀:预览链接 | ||
✔ | ✔ | 组件前缀:故事链接 | ||
✔ | 组件前缀:预览链接 | |||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 故事前缀:组件链接 | ||
✔ | ✔ | 预览前缀:故事链接 | ||
✔ | 预览前缀:组件链接 | |||
✔ | ✔ | 故事前缀:故事链接 | ||
✔ | 故事前缀:预览链接 | |||
✔ | 预览前缀:故事链接 | |||
预览前缀:预览链接 |
✅ sourceLinkPrefix(源链接前缀)
❌ sourceLink
export const parameters = {
// .storybook/preview.js
sourceLink: '<link to source>'
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | 故事前缀:故事链接 |
✔ | ✔ | ✔ | 故事前缀:组件链接 | |
✔ | ✔ | ✔ | 组件前缀:故事链接 | |
✔ | ✔ | 组件前缀:组件链接 | ||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 信息链接 | ||
✔ | ✔ | 组件前缀:故事链接 | ||
✔ | 信息链接 | |||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 故事前缀:组件链接 | ||
✔ | ✔ | 预览前缀:故事链接 | ||
✔ | 信息链接 | |||
✔ | ✔ | 故事前缀:故事链接 | ||
✔ | 信息链接 | |||
✔ | 预览前缀:故事链接 | |||
信息链接 |
❌ sourceLinkPrefix
✅ sourceLink(源链接)
export const parameters = {
// .storybook/preview.js
sourceLinkPrefix: '<prefix to link>'
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | 故事前缀:故事链接 |
✔ | ✔ | ✔ | 故事前缀:组件链接 | |
✔ | ✔ | ✔ | 组件前缀:故事链接 | |
✔ | ✔ | 组件前缀:组件链接 | ||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 故事前缀:组件链接 | ||
✔ | ✔ | 组件前缀:故事链接 | ||
✔ | 组件前缀:预览链接 | |||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 故事前缀:组件链接 | ||
✔ | ✔ | 故事链接 | ||
✔ | 组件链接 | |||
✔ | ✔ | 故事前缀:故事链接 | ||
✔ | 故事前缀:预览链接 | |||
✔ | 故事链接 | |||
预览链接 |
❌ sourceLinkPrefix
❌ sourceLink
export const parameters = {
// .storybook/preview.js
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | 故事前缀:故事链接 |
✔ | ✔ | ✔ | 故事前缀:组件链接 | |
✔ | ✔ | ✔ | 组件前缀:故事链接 | |
✔ | ✔ | 组件前缀:组件链接 | ||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 信息链接 | ||
✔ | ✔ | 组件前缀:故事链接 | ||
✔ | 信息链接 | |||
✔ | ✔ | ✔ | 故事前缀:故事链接 | |
✔ | ✔ | 故事前缀:组件链接 | ||
✔ | ✔ | 故事链接 | ||
✔ | 预览前缀:组件链接 | |||
✔ | ✔ | 故事前缀:故事链接 | ||
✔ | 信息链接 | |||
✔ | 故事链接 | |||
信息链接 |