Storybook README addon

NOTE: This README only for version ^5.0.0. For older versions LEGACY_README.md

---

This addon is compatible with:

• Storybook for React (React example storybook)
• Storybook for Vue (Vue example storybook)

Live demo

Features:

• Automatically generate props table (Only for React)
• Does not affect on story function. So Storybook Info works correctly now.
• 100% markdown support
• Code highlighting
• Accept multiple README (useful for hoc component - add component's and original component's README)
• Looks like Github's README
• Supports <docs/> tags for vue components (example-vue/components/MyButton/MyButton.vue).

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 Storybook Info Addon is installed.

Install

npm install --save-dev storybook-readme

or

yarn add --dev storybook-readme

Webpack Configuration for React Storybook

Nothing to do :)

Webpack Configuration for Vue Storybook

Only if using Single File Components and want to use <docs> tag at storybook documentation.

module.exports = storybookBaseConfig => {
  storybookBaseConfig.module.rules.push({
    resourceQuery: /blockType=docs/,
    use: ['storybook-readme/vue/docs-loader', 'html-loader', 'markdown-loader'],
  });
};

Setup

Register addon at .storybook/addons.js

import 'storybook-readme/register';

Add decorator at .storybook/config.js

import { addReadme } from 'storybook-readme';
addDecorator(addReadme);

Usage

Hope it is very simple.

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';
import ButtonReadme from '../components/Button/README.md';

storiesOf('Buttons', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      // Show readme before story
      content: ButtonReadme,
      // Show readme at the addons panel
      sidebar: ButtonReadme,
    },
  })
  .add('Button', () => <Button />);

It is possible to override docs for story

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';
import ButtonReadme from '../components/Button/README.md';

storiesOf('Buttons', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      content: ButtonReadme,
      sidebar: ButtonReadme,
    },
  })
  .add('Button', () => <Button />)
  .add('Button', () => <Button />)
  .add('Button', () => <Button />, {
    readme: {
      // override docs
      content: CustomButtonReadme,
      sidebar: CustomButtonReadme,
    },
  });

Full list of options

.addParameters({
    readme: {
      /**
       * Accepts string (markdown) or array of strings
       * string | Array<string>
       */
      content: Readme,

      /**
       * Accepts string (markdown) or array of strings
       * string | Array<string>
       */
      sidebar: Readme,

      /**
       * Override theme values
       *
       */
      theme: {},

      /**
       * Wrapper for story. Usually used to set some styles
       * React: React.ReactNode
       * Vue: Vue component
       */
      StoryPreview: ({ children}) => <div>{children}</div>
    },
  })

Readme placeholders

• <!-- STORY --> placeholder for story
• <!-- PROPS --> placeholder for props table

Button variants could be imported separately.

\`\`\`js import { OutlinedButton, ContainedButton, TextButton } from 'Button'; \`\`\`

<!-- PROPS -->

Example:

<!-- STORY -->

Some docs after story

Set code highlighting theme

NOTE: Theme will set for all stories.

Install highlight.js

yarn add highlight.js

Import theme at .storybook/config.js. Full list of theme https://highlightjs.org/static/demo/.

import 'highlight.js/styles/shades-of-purple.css';