storybook-addon-edit-stories
A storybook addon to add a edit this... link
npm install storybook-addon-edit-stories
7
Downloads per week
Readme View on GitHub
storybook-addon-edit-stories
A storybook addon to turn your Storybok site into a CMS allowing the users to submit edit PRs for your components and documentation
Preview | ![]() |
Docs tab | ![]() |
mdx file | ![]() |
Live demo
Installation
npm i -D storybook-addon-edit-stories
Setup
You can add the source file name to the stories metadata in CSF:
export default {
title: 'Stories|With edit',
component: Link,
parameters: {
edit: {
fileName: 'https://github.com/storybookjs/design-system/blob/master/src/components/Link.js'
},
}
};
Or to mdx files:
<Meta
title="Test mdx|Add edit on Doc tab?"
parameters={{
edit:{
fileName: 'https://raw.githubusercontent.com/storybookjs/storybook/next/addons/docs/docs/docspage.md'
}
}}/>
Usage
In your addons.js
, define your configuration and pass it in to the editStories
initializer
mport { editStories } from '../dist';
const gitPageResolver = ({ fileName } ) => {
return fileName;
}
editStories({
fileNameResolve: gitPageResolver,
editPageLabel: 'edit this page...',
});
Options
fileNameResolve: function to resolve the file name, by default returns the supplied fileName
editPageLabel: label for the Edit this page link - by default EDIT THIS PAGE