storybook-redirect

    1.1.0 • Public • Published

    Storybook Addon Redirect

    Storybook Addon Redirect allows you to create redirects to your stories in Storybook.

    Getting Started

    npm install storybook-redirect --save-dev

    If you don't already have one, create a file called addons.js in your Storybook directory.

    Add the following to addons.js to register the addon with storybook

    import 'storybook-redirect/register';

    An ID for each story file is generated based on the file path. This ID is used to redirect to the story group, using the URL parameter package.

    • For a named story file, the story group can be accessed via the file name
      • e.g. The stories at MyStory.stories.js via ?package=mystory
    • For an index file with a named directory, the story group can be accessed via the directory name
      • e.g. The stories at MyComponent/index.stories.js via ?package=mycomponent
    • For an index file under a stories directory, the story group can be accessed via the top package directory name
      • e.g. The stories at MyPackage/stories/index.stories.js via ?package=mypackage

    Linking to a specific story within a story group is not supported by default. However, this could be added by passing in a custom getKey function to the addon - please See the Customisation section below.

    Customisation

    To customise the addon, you can import the addon function directly (without the /register) and call it with a getKey function and an options object. To use the existing getKey function, you can import it using the named import.

    import storybookRedirect, { getKey } from 'storybook-redirect';
     
    const options = {};
    storybookRedirect(getKey, options);

    getKey

    This function is called with a story object and should return a string key which will be matched against the URL parameter. Returning undefined means the story will not be added. Keys can only be used once - returning the same key again will not overwrite the previously set story.

    Example story object:

    {
      id: "test-stories--test-story",
      kind: "Test Stories",
      name: "Test Story",
      story: "Test Story",
      parameters: {
        fileName: "./packages/test-story/stories/index.stories.js",
        options: {
          hierarchyRootSeparator: "|",
          hierarchySeparator: {}
        }
      }
    }

    An example getKey which links to a specific story within a story group could be implemented as below. This uses the default getKey function to generate an ID from the file name, but then extends this to link to the specific story using the suffix of the story ID.

    import storybookRedirect, { getKey } from "storybook-redirect";
     
    storybookRedirect(function(story) {
      const fileNameId = getKey(story);
      return `${fileNameId}--${story.id.split("--")[1]}`;
    });
     
    // eg. ?package=mypackage--story-name

    options

    This object can be used to configure the URL parameter name and to turn on debug output.

    parameter

    Configuring the parameter will change the URL parameter used when matching. Make sure not to conflict with existing storybook URL parameters, e.g. path

    {
      parameter: "custom-parameter-name"
    }

    Redirect URLs will now need to be set up as ?custom-parameter-name=mypackage

    debug

    Setting this to true will output debug details in the browsers developer console. The mapping object used to map IDs to stories is also output as part of the output.

    {
      debug: true
    }

    You can enable this, without any other changes, by passing in the default getKey and an options object containing only debug

    import storybookRedirect, { getKey } from "storybook-redirect";
     
    storybookRedirect(getKey, { debug: true });

    Install

    npm i storybook-redirect

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.84 kB

    Total Files

    5

    Last publish

    Collaborators

    • alistairjcbrown