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,
  }
);

Readme

Keywords

none

Package Sidebar

Install

npm i storybook-addon-info

Weekly Downloads

19

Version

1.0.0-alpha

License

MIT

Unpacked Size

957 kB

Total Files

45

Last publish

Collaborators

  • awassel