在工具栏中提供故事源码的链接。
您的任何支持都将极大地帮助我维护和改进此插件。谢谢!
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 | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | story-prefix:story-link |
✔ | ✔ | ✔ | story-prefix:component-link | |
✔ | ✔ | ✔ | component-prefix:story-link | |
✔ | ✔ | component-prefix:component-link | ||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | story-prefix:preview-link | ||
✔ | ✔ | component-prefix:story-link | ||
✔ | component-prefix:preview-link | |||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | story-prefix:component-link | ||
✔ | ✔ | preview-prefix:story-link | ||
✔ | preview-prefix:component-link | |||
✔ | ✔ | story-prefix:story-link | ||
✔ | story-prefix:preview-link | |||
✔ | preview-prefix:story-link | |||
preview-prefix:preview-link |
✅ sourceLinkPrefix
❌ sourceLink
export const parameters = {
// .storybook/preview.js
sourceLink: '<link to source>'
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | story-prefix:story-link |
✔ | ✔ | ✔ | story-prefix:component-link | |
✔ | ✔ | ✔ | component-prefix:story-link | |
✔ | ✔ | component-prefix:component-link | ||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | link to info | ||
✔ | ✔ | component-prefix:story-link | ||
✔ | link to info | |||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | story-prefix:component-link | ||
✔ | ✔ | preview-prefix:story-link | ||
✔ | link to info | |||
✔ | ✔ | story-prefix:story-link | ||
✔ | link to info | |||
✔ | preview-prefix:story-link | |||
link to info |
❌ sourceLinkPrefix
✅ sourceLink
export const parameters = {
// .storybook/preview.js
sourceLinkPrefix: '<prefix to link>'
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | story-prefix:story-link |
✔ | ✔ | ✔ | story-prefix:component-link | |
✔ | ✔ | ✔ | component-prefix:story-link | |
✔ | ✔ | component-prefix:component-link | ||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | story-prefix:component-link | ||
✔ | ✔ | component-prefix:story-link | ||
✔ | component-prefix:preview-link | |||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | story-prefix:component-link | ||
✔ | ✔ | story-link | ||
✔ | component-link | |||
✔ | ✔ | story-prefix:story-link | ||
✔ | story-prefix:preview-link | |||
✔ | story-link | |||
preview-link |
❌ sourceLinkPrefix
❌ sourceLink
export const parameters = {
// .storybook/preview.js
}
组件中的 sourceLinkPrefix | 组件中的 sourceLink | 故事中的 sourceLinkPrefix | 故事中的 sourceLink | 链接 |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | story-prefix:story-link |
✔ | ✔ | ✔ | story-prefix:component-link | |
✔ | ✔ | ✔ | component-prefix:story-link | |
✔ | ✔ | component-prefix:component-link | ||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | link to info | ||
✔ | ✔ | component-prefix:story-link | ||
✔ | link to info | |||
✔ | ✔ | ✔ | story-prefix:story-link | |
✔ | ✔ | story-prefix:component-link | ||
✔ | ✔ | story-link | ||
✔ | preview-prefix:component-link | |||
✔ | ✔ | story-prefix:story-link | ||
✔ | link to info | |||
✔ | story-link | |||
link to info |