https://github.com/etchteam/storybook-addon-github-link
Link stories to source code in Github
https://github.com/etchteam/storybook-addon-github-link
Last synced: 4 months ago
JSON representation
Link stories to source code in Github
- Host: GitHub
- URL: https://github.com/etchteam/storybook-addon-github-link
- Owner: etchteam
- License: mit
- Created: 2024-06-21T10:08:21.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-21T09:19:23.000Z (5 months ago)
- Last Synced: 2026-01-21T16:51:28.651Z (5 months ago)
- Language: JavaScript
- Size: 1.32 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Github Link
A Storybook Addon to add a link to Github source code for each story.
## Installation
```sh
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:
```js
export default {
addons: ['@etchteam/storybook-addon-github-link']
}
```
Then create a file called `preview.js` in the same folder to setup configuration [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) for the addon.
```js
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.
```jsx
export default {
title: 'BetterSoftwareLink',
parameters: {
githubLink: {
url: '/make-better-software'
}
},
};
export const Default = () => (
Make Better Software
);
```
### Enabled
Setting this parameter to `false` will stop the Github link appearing for the story.
---
Made with ☕ at [Etch](https://etch.co)