Nashville Plays Music

    storybook-addon-edit-page
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.4 • Public • Published

    Storybook Addon Edit Page

    Storybook Edit Page Addon can add 'edit this page' links in Storybook.

    Preview Edit on preview
    Docs tab Edit on docs
    mdx file Edit mdx

    Live demo

    sample-edit-page

    Installation

    npm i -D storybook-addon-edit-page

    Configuration

    Then create a file called addons.js in your storybook config.

    Add following content to it (the configuration settings are optional):

    import { editPage } from 'storybook-addon-edit-page';
     
    const gitPageResolver = ({ fileName } ) => {
      return fileName;
    }
    editPage({
      fileNameResolve: gitPageResolver,
      editPageLabel: 'edit this page...',
      render: ({ filePath, shortName, ...rest }) => (
        <div>
          {filePath && (
            <div>
              <h3>{shortName}</h3>
              <a target="_blank" href={filePath}>
                here
              </a>
            </div>
          )}
        </div>
      ),
    });
     

    Usage

    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://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md
        }  
     }}/>
     

    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
    render: function to custom render the Edit this page panel

    parameters : {
      filePath: string, //full file path
      shortName: string, //short name of the story file (component name)
      parameters: any,  //parameters of the current story
    }

    Install

    npm i storybook-addon-edit-page

    DownloadsWeekly Downloads

    1

    Version

    0.9.4

    License

    MIT

    Unpacked Size

    8.58 kB

    Total Files

    10

    Last publish

    Collaborators

    • atanasster