Storybook Addon Github Link

A Storybook Addon to add a link to Github source code for each story.

Installation

npm install @etchteam/storybook-addon-github-link --save-dev

Storybook setup

Create a file called main.js in your .storybook config folder.

Add the following content to it:

export default {
  addons: ['@etchteam/storybook-addon-github-link']
}

Then create a file called preview.js in the same folder to setup configuration parameters for the addon.

export default {
  parameters: {
    githubLink: {
      baseURL: 'https://github.com/your-org/your-repo/src/components/',
      auto: true,
    }
  }
}

Global parameters

These global parameters are suggested to be added globally in the .storybook/preview file but they can also be used per story to override the global setup.

Name	Type	Default
baseURL	string	undefined
auto	boolean	false

Base URL

The URL that all other paths will be prepended with.

[!NOTE] This parameter is required for the auto option to be enabled.

Auto

Auto generate URLs based on the current story being viewed.

URLs will be generated from the stories title, for example this is what will happen to a story with the title Components/Info button:

• "Components/Info button" will be transformed to lower kebab case "components/info-button"
• The baseURL will be prepended to form the full URL

[!NOTE] If the auto parameter is not provided then the Github link will only appear for individual stories that have a url parameter.

Story parameters

Name	Type	Default
url	string	undefined
enabled	boolean	true

URL

The link can be overridden on a per story basis, if auto is not set to true then the Github link will only appear for stories that have this parameter set.

If a sub-path is detected like /make-better-software then the global baseURL parameter will be inherited.

export default {
  title: 'BetterSoftwareLink',
  parameters: {
    githubLink: {
      url: '/make-better-software'
    }
  },
};

export const Default = () => (
  <a href="https://makebetter.software">Make Better Software</a>
);

Enabled

Setting this parameter to false will stop the Github link appearing for the story.

---

Made with ☕ at Etch