A next-generation tool to create blazing-fast documentation sites
API
created:7/29/2020
,
updated:3/2/2021

Storybook integration is only recommended tp use when migrating an existing Storybook documentation project.

Below, we go over how to add a component-controls documentation addon to both new and existing storybook projects.

storybook 5 git repo and a live storybook 5 site.

storybook 6 git repo and a live storybook 6 site.

New project

Create a new folder:

mkdir storybook-project && cd storybook-project

Initialize the project:

yarn init

Add storybook and its dependencies:

storybook-5

yarn add @storybook/react@^5.3.18 react react-dom

storybook-6

yarn add @storybook/react@next react react-dom

package.json

"scripts": {
"start": "start-storybook -c .storybook",
"build": "build-storybook -c .storybook"
},

create a new configuration folder, as specified above

mkdir .storybook

and create a configuration file that will be picked up by both storybook and the component-controls addon.

.storybook/main.js

module.exports = {
stories: [
'../src/docs/*.@(mdx|tsx)',
],
};

The remaining steps are the same as for an existing storybook project.

Existing Storybook project

Add component-controls addon

yarn add @component-controls/storybook

Configure

without @storybook/addon-docs

The following configuration will use component-controls's built-in instrumenting package with react-docgen and react-docgen-typescript

.storybook/main.js

module.exports = {
stories: ...,
addons: [{
name: '@component-controls/storybook',
options: {
webpack: ['instrument', 'react-docgen-typescript'],
}
}]
}

with @storybook/addon-docs

The following configuration will let addon-docs use its own mdx compiler:

.storybook/main.js

module.exports = {
stories: ...,
addons: [{
name: '@storybook/addon-docs',
options: {
configureJSX: true,
},
},
{
name: '@component-controls/storybook'
}]
}

Decorators

For storybook-6, decorators are picked up automatically by component-controls. For storybook-5, you will need to create an additional run-time configuration file

.storybook/preview.js

import { addDecorator } from '@storybook/react';
addDecorator(withTheme({ theme }));

for storybook-5 only:

.storybook/runtime.js

export default {
decorators: [withTheme({ theme })],
};

Options

You can enable some of the component-controls blocks as storybook addons:

.storybook/main.js

module.exports = {
stories: ...,
addons: [{
name: '@component-controls/storybook',
options: {
propsPanel: true,
storySourcePanel: true,
storyConfigPanel: true,
}
}],
}