原始碼連結

在工具列中提供故事原始碼的連結。

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	連結
✔	✔	✔	✔	故事前綴：故事連結
✔	✔	✔		故事前綴：元件連結
✔	✔		✔	元件前綴：故事連結
✔	✔			元件前綴：元件連結
✔		✔	✔	故事前綴：故事連結
✔		✔		資訊連結
✔			✔	元件前綴：故事連結
✔				資訊連結
	✔	✔	✔	故事前綴：故事連結
	✔	✔		故事前綴：元件連結
	✔		✔	故事連結
	✔			預覽前綴：元件連結
		✔	✔	故事前綴：故事連結
		✔		資訊連結
			✔	故事連結
				資訊連結