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.
This addon is compatible with:
- Storybook for React
Additional features:
- 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
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
Webpack configuration
module.exports = {
module: {
rules: [{
test: /\.md$/,
use: "raw-loader"
}]
}
};
npm install --save-dev raw-loader
Usage
Register addon at .storybook/addons.js
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"/>))
Use as Higher Order Component
withReadme(readme, story) accepts README or array of README in markdown format. Multiple REAMDE 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"/>;
}));
Use as decorator
withReadme(readme) Pass only first argument - README or array of README in markdown format. In this way code of stories is more clean.
import ButtonREADME from 'node_modules/component/README.md';
storiesOf('Button', module)
.addDecorator(withReadme(ButtonREADME))
.add('Default', () => {
return <Button onClick={action('clicked')} label="Hello Button"/>;
});
Have a look at this example stories to learn more about the
addWithReadme
API