React Storybook README addon

Example Storybook with README addon

It is very similar with Storybook Notes addon but using Storybook Notes there is <WithNotes notes={...}> wrapper at each story function and thats why Storybook Info always shows that wrapper at info screen.

Additional features:

Does not affect on story function. So Storybook Info works correctly now.
100% markdown support
Code highliting
Accept multiple README (useful for hoc component - add component's and original component's README)
Looks like Github's README

Also it very useful because most projects and components already have README.md files. Now it is easy to add them into your Storybook.

Stories will be added with .addWithInfo method if React Storybook Info Addon is installed.

Install

npm install --save-dev storybook-readme

Webpack configuration

module.exports = {
  module: {
    loaders: [{
      test: /\.md$/,
      loader: "raw"
    }, {
      test: /\.json$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }]
  }
};

npm install --save-dev raw-loader json-loader style-loader css-loader

If css modules are using make sure to exclude storybook-readme from css modules loader. Something like this:

module: {
  loaders: [{
    test: /\.css$/,
    exclude: 'storybook-readme',
    loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
  }]
}

Usage

import 'storybook-readme/register';

Then create your stories with the .addWithReadme API.

import ButtonReadme from '../components/button/README.md';
import withReadme from 'storybook-readme/with-readme';

storiesOf('Button', module)
  .add('Default', withReadme(ButtonReadme, () => <Button onClick={action('clicked')} label="Hello Button"/>))

addWithReadme accepts README or array of README in markdown format. It is useful when you develop higher order component and want to add its README and original component README.

import OriginalREADME from 'node_modules/component/README.md';
import hocREADME from '../components/component/README.md';

storiesOf('Button', module)
  .add('Default', withReadme([OriginalREADME, hocREADME], () => {

    return <Button onClick={action('clicked')} label="Hello Button"/>;
  }));

Have a look at this example stories to learn more about the addWithReadme API

lior-amsalem/storybook-readme

React Storybook README addon

Install

Webpack configuration

Usage