Naan and Paneer Makhani

    storybook-source-link
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    Storybook Addon Source Link

    Storybook npm npm npm npm npm
    npms.io (final) npms.io (quality) npms.io (maintenance) npms.io (popularity)
    Snyk Vulnerabilities for npm package Libraries.io dependency status for latest release Libraries.io SourceRank

    Twitter Follow

    Provides a link to the story's source in the toolbar.

    Installation

    npm install storybook-source-link

    Screen Shot 2022-03-23 at 1 15 50 PM
    Without any additional configuration,
    you should see a new link in the toolbar

    Usage

    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.

    Global level

    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
    }

    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.

    Story level

    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>'
    };

    Outcomes of all parameter configurations

    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

    Install

    npm i storybook-source-link

    DownloadsWeekly Downloads

    213

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    33.5 kB

    Total Files

    24

    Last publish

    Collaborators

    • jonathansirrine