源链接

在工具栏中提供故事的源链接。

您的任何支持都将极大地帮助我维护和改进此插件。谢谢！

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	链接
✔	✔	✔	✔	故事前缀:故事链接
✔	✔	✔		故事前缀:组件链接
✔	✔		✔	组件前缀:故事链接
✔	✔			组件前缀:组件链接
✔		✔	✔	故事前缀:故事链接
✔		✔		信息链接
✔			✔	组件前缀:故事链接
✔				信息链接
	✔	✔	✔	故事前缀:故事链接
	✔	✔		故事前缀:组件链接
	✔		✔	故事链接
	✔			预览前缀:组件链接
		✔	✔	故事前缀:故事链接
		✔		信息链接
			✔	故事链接
				信息链接