加入直播:周四美国东部时间上午 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 参数
或者同时定义 sourceLinkPrefixsourceLink 参数,如下所示

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
制作者
  • jonathansirrine
    jonathansirrine
适用于
    React
标签