Storybook Add-ons for the React component library

Photo by Roman Koval from Pexels

From time to time I go back to an old repository and update its dependencies.

outsrc/my-components

This is the example repo I used on another blog post:

Create a React component library with TypeScript and Storybook

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/)

@storybook/addon-docs

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…