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

Source Link

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

在 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/main.js|ts 中的配置对象 addons 数组中添加 storybook-source-code

示例

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
信息链接
component-prefix:story-link
信息链接
story-prefix:story-link
story-prefix:component-link
preview-prefix:story-link
信息链接
story-prefix:story-link
信息链接
preview-prefix:story-link
信息链接

❌   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
信息链接
component-prefix:story-link
信息链接
story-prefix:story-link
story-prefix:component-link
story-link
preview-prefix:component-link
story-prefix:story-link
信息链接
story-link
信息链接
作者
  • riscarrott
    riscarrott
兼容
    React
标签