Nattily Primped Monster

    storybook-addon-info

    1.0.0-alpha • Public • Published

    Storybook Addon Info

    An addon to Storybook that allows for display of Markdown files.

    Framework Support

    Screenshot

    Why

    In building out component libraries, there may arise a need to display functional requirements for each component. This addon will allow you to pass in a Markdown file and display it within the the addons area/.

    Getting Started

    Install:

    npm i -D storybook-addon-info

    Then, add following content to .storybook/addons.js

    import 'storybook-addon-info/register';

    In the .storybook/config.js file, import the withCode decorator.

    import { withInfo } from 'storybook-addon-info';
     
    addDecorator(withInfo);

    Now, you can use the info parameter to add a note to each story. This parameter accepts a raw version of a Markdown file.

    raw-loader is installed with this package in order to load the file contents as a string.

    Note: Using a !! before a request will disable all loaders specified in the configuration. This will allow for the contents to be passed as a string.

    import info from '!!raw-loader!./README.md';
     
    storiesOf('Button', module).add(
      'Default',
      () => {
        return <Button>Hello Button</Button>
      },
      {
        info: info,
      }
    );

    Keywords

    none

    Install

    npm i storybook-addon-info

    DownloadsWeekly Downloads

    6

    Version

    1.0.0-alpha

    License

    MIT

    Unpacked Size

    957 kB

    Total Files

    45

    Last publish

    Collaborators

    • awassel