Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Readme View on GitHub

Storybook Addon Source Link

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

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

Installation

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;

Without any additional configuration, you should see a new link in the toolbar like so:

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

Usage

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.

Global level

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
}

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.

Story level

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

Outcomes of all parameter configurations

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

Twitter Follow

"Buy Me A Coffee"

Join the community
6,560 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI