Source Link

Provides a link to the story's source in the toolbar.

npm install storybook-source-link

Add storybook-source-code to your addons array in the config object at .storybook/main.js|ts

Example:

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;

Define a sourceLink parameter, or a sourceLinkPrefix parameter, both globally, at the component level, and/or at the story level. See the rules of parameter inheritance. This allows you control how the link is generated for each story.

Here's the relevant code which governs how the link gets generated:

  const getLink = (prefix: string | undefined, link: string | undefined) => {
    if (!link) return null;
    if (prefix) link = `${prefix}${link}`
    return link
  }

See full source for how it's rendered.

You may set global parameters to define a default link in the .storybook/preview.js file like so:

export const parameters = {
  sourceLink: '<link to source>'
  sourceLinkPrefix: '<prefix to link>'
}

A few examples might look like:

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
}

For more fine tuning, inside each component you may define the same parameters to be used for every story inside the component.

*.stories.js

export default {
  title: 'Example',
  component: Button,
  parameters: {
    sourceLink: '<link to source>'
    sourceLinkPrefix: '<prefix to link>'
  }
};

An example of this could be:

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
  }
};

The params defined at the component level supersede those defined at the global level in the .storybook/preview.js file.

This can be done at the story level to override both the global settings and the component level settings.

For each story requiring more specific treatment, in each *.stories.js file define a sourceLink parameter
or both a sourceLinkPrefix and a sourceLink parameter like so:

export const PrimaryStory = () => (
  <Button>Primary</Button>
);
PrimaryStory.parameters = {
  sourceLink: '<link to source>'
  sourceLinkPrefix: '<prefix to link>'
};

The tables below are to help you get an idea of what to expect when you click the icon.

Keep in mind that some of the possible configurations can result in links that may not have been intended.
For example, if you set a sourceLinkPrefix param on the story but not a sourceLink, the prefix set on the story will be used with the next sourceLink param defined upwards in the hierarchy. You can end up with a link that doesn't make sense.

It almost always is the case that you want to set a sourceLink param wherever you are setting a sourceLinkPrefix at the component or story level.

✅   sourceLinkPrefix
✅   sourceLink

export const parameters = {
  // .storybook/preview.js
  sourceLink: '<link to source>'
  sourceLinkPrefix: '<prefix to link>'
}

sourceLinkPrefix in component	sourceLink in component	sourceLinkPrefix in story	sourceLink in story	link
✔	✔	✔	✔	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 in component	sourceLink in component	sourceLinkPrefix in story	sourceLink in story	link
✔	✔	✔	✔	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 in component	sourceLink in component	sourceLinkPrefix in story	sourceLink in story	link
✔	✔	✔	✔	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 in component	sourceLink in component	sourceLinkPrefix in story	sourceLink in story	link
✔	✔	✔	✔	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