Storybook README addon

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

---

!Storybook README addon

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 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

$3

Nothing to do :)

$3

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

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

Define tag inside vue module:

`vue

Docs inside vue module



`

Use it to defone docs at story:

`js
import MyButton from '../components/MyButton/MyButton.vue';

storiesOf('Vue ', module).addParameters({
readme: {
content: MyButton.__docs,
},
});
`

Setup

Register addon at _.storybook/addons.js_

`js
import 'storybook-readme/register';
`

Add decorator at _.storybook/config.js_

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

Usage

Hope it is very simple.

`js
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', () => );
`

It is possible to override docs for story

`js
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', () =>

)
.add('Button', () => )
.add('Button', () => , {
readme: {
// override docs
content: CustomButtonReadme,
sidebar: CustomButtonReadme,
},
});
`

Full list of options

Will be applied for series of stories.

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

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

/**
* Override theme values
*
* All theme values https://github.com/tuchk4/storybook-readme/blob/master/packages/storybook-readme/src/styles/githubMarkdownCss.js#L436
*/
theme: {},

/**
* Highlightjs code theme
* Import theme at _.storybook/config.js_.
* Full list of theme https://highlightjs.org/static/demo/.
*/
codeTheme: 'github',

/**
* Wrapper for story. Usually used to set some styles
* NOTE: will be applied only for content docs (docs around the story)
*
* React: React.ReactNode
* Vue: Vue component
*/
StoryPreview: ({ children}) =>

{children}

/**
* Wrapper for hedaer docs. Usually used to set some styles
* NOTE: will be applied only for content docs (docs around the story)
*
* React: React.ReactNode
* Vue: Vue component
*/
HeaderPreview: ({ children}) =>

{children}

/**
* Wrapper for footer docs. Usually used to set some styles
* NOTE: will be applied only for content docs (docs around the story)
*
* React: React.ReactNode
* Vue: Vue component
*/
FooterPreview: ({ children}) =>

{children}

/**
* Wrapper for content and sidebar docs. Usually used to set some styles
* NOTE: will be applied only for content docs (docs around the story)
*
* React: React.ReactNode
* Vue: Vue component
*/
DocPreview: ({ children}) =>

{children}


},
})
`

Global configuration

Will be applied for all stories.
NOTE: that global configuration is applied only for content docs (docs around the story).

`js
import { configureReadme } from 'storybook-readme';

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

{children}

,

/**
* Wrapper for content and sidebar docs. Usually used to set some styles
* React: React.ReactNode
* Vue: Vue component
*/
DocPreview: ({ children }) => (

{children}

),

/**
* Wrapper for hedaer docs. Usually used to set some styles
* React: React.ReactNode
* Vue: Vue component
*/
HeaderPreview: ({ children }) => (

{children}

),

/**
* Wrapper for footer docs. Usually used to set some styles
* React: React.ReactNode
* Vue: Vue component
*/
FooterPreview: ({ children }) =>

{children}

,

/**
* Header docs in markdown format
*/
header: '',

/**
* Footer docs in markdown format
*/
footer: '',
});
`

Readme placeholders

- placeholder for story
- placeholder for props table

`md
Button variants could be imported separately.

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

Example:

Some docs after story
``

Emoji

Use shortcodes between colon to insert emoji into the docs. For example

Here is rocket :rocket:

Here is rocket :rocket:

List of all shortcodes could be found at Emojipedia or at Gist/rxaviers

- :rocket:
- :grinning:
- :monkey:

Fell free to suggest new features or report bugs :)