From time to time I go back to an old repository and update its dependencies.
This is the example repo I used on another blog post:
I use it as a starting point for creating a React component library or just to test some quick ideas.
A couple things where missing in that repo related to the Storybook settings. Specifically some Add-ons like: @storybook/addon-docs
, @storybook/addon-a11y
and @storybook/addon-viewport
Storybook Docs
The @storybook/addon-docs
is the most important of all. It allows us to write stories with rich details using MDX (Markdown with JSX, https://mdxjs.com/)
To install it:
$ yarn add -D @storybook/addon-docs react-is babel-loader react-docgen-typescript-loader ts-loader
To configure we can remove the old .storybook/config.js
file and add a new .storybook/main.tsx
file.
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
addons: [
'@storybook/addon-docs'
]
}
Also our .storybook/webpack.config.js
needs a small change:
const path = require("path")
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.tsx?$/,
include: path.resolve(__dirname, "../src"),
use: [
require.resolve("ts-loader"),
{
loader: require.resolve("react-docgen-typescript-loader"),
options: {
tsconfigPath…