加入直播会话:美国东部时间周四上午 11 点,Storybook 9 发布 & AMA

源链接

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

在 Github 上查看

Storybook npm npm npm npm npm
npms.io (final) npms.io (quality) npms.io (maintenance) npms.io (popularity)
Snyk Vulnerabilities for npm package Libraries.io dependency status for latest release Libraries.io SourceRank

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

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

Twitter Follow

"Buy Me A Coffee"

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;

Screen Shot 2022-03-23 at 1 15 50 PM

全局、在组件级别和/或在故事级别定义一个 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 链接
故事前缀:故事链接
故事前缀:组件链接
组件前缀:故事链接
组件前缀:组件链接
故事前缀:故事链接
信息链接
组件前缀:故事链接
信息链接
故事前缀:故事链接
故事前缀:组件链接
故事链接
预览前缀:组件链接
故事前缀:故事链接
信息链接
故事链接
信息链接
创建者
  • oleksandr_krupko
    oleksandr_krupko
支持
    React
标签