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;
Without any additional configuration, you should see a new link in the toolbar like so:
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 |