Hi everybody, this article is for those who are using a custom Webpack configuration to compile Storybook 6 and want to generate component's documentation automatically.
After the migration of Storybook v5.3 to Storybook v6 (Check the guide) I started the investigation of new features which are awesome. The coolest one from my point of view is @storybook/addon-essentials
which adds a viewport button and support for an auto-documentation generation among other things.
In case you haven't read the article I mentioned before, I have a custom Webpack configuration which has taken me to the problem I got with the zero-config.
Let's start, our current configuration is:
// .storybook/main.js
const custom = require('./webpack.config.js');
module.exports = {
stories: ['../src/components/**/*.stories.js'],
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: custom.module.rules, // babel, sass, fonts and images loaders
},
resolve: {
...config.resolve,
...custom.resolve, // custom imports resolvers
}
};
},
};
Now we need to install a couple of packages:
- @storybook/addon-essentials - cool storybook's addons collection
- babel-plugin-react-docgen - allows us to write a propType and component documentation
Run yarn add -D @storybook/addon-essentials babel-plugin-react-docgen
.
Update your Storybook config file to:
// .storybook/main.js
const custom = require('./webpack.config.js');
module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: [
'@storybook/addon-essentials',
],
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
Update your .babelrc config to:
{
"presets": [
[
"@babel/preset-env",
{"modules": "commonjs"}
],
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining",
"react-docgen"
]
}
Super easy when you know what you have to do. I decided to publish it because in my case I spent an entire afternoon looking for a solution and trying a lot of things which had no success. Then I used @storybook/preset-create-react-app which worked but I wanted to make it work with my own Webpack config, so a few days after I back to business and made it work.
Hope this article helps you, happy coding, and never give up 💪
Thanks for reading, comments are welcome :)
Thanks Michail Vasilyev for the picture.
Top comments (0)