created:3/13/2021
updated:3/13/2021
Storybook
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.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.
yarn add @component-controls/storybook
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'}]}
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 })],};
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,}}],}