Discussion on: What is your experience with Storybook?

View post

Replies for: Appreciate you taking the time to write this down for me and other people who are thinking about integrating storybook into their projects. Is th...

No problem.

Configuration

For setting it up, I follow the docs to start with. They ask you to run the command npx sb init which does a pretty good job overall. For example, if you were using a create-react-app project, I think you would be good to go straight away.

In my case, I use things like CSS modules and aliases, which I've coded in webpack:

// part of webpack.common.js
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]--[hash:base64:5]',
                auto: true,
              },
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  resolve: {
    alias: {
      _constants: path.resolve(__dirname, 'src/_constants'),
      config: path.resolve(__dirname, 'config'),
      logic: path.resolve(__dirname, 'src/logic'),
      view: path.resolve(__dirname, 'src/view'),
    },
  },

I've had to copy those in the storybook config file, main.js

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[local]--[hash:base64:5]',
              auto: true,
            },
          },
        },
        'sass-loader',
      ],
    });
    config.resolve.alias = Object.assign(config.resolve.alias, {
      _constants: path.resolve(__dirname, '../src/_constants'),
      config: path.resolve(__dirname, '../config'),
      logic: path.resolve(__dirname, '../src/logic'),
      view: path.resolve(__dirname, '../src/view'),
    });

    return config;
  },
};

For anything else, it's the same process. I don't know of a faster way except going through step by step and making sure things are working.

Redux

Most of the time I don't include Redux. I export the unconnected components and use those in the stories.

If you want to include Redux sometimes, again you've got to get creative. There are many options:

You could use the store you use in your app and wrap your stories with it.

<Provider store={yourReduxStore}>
  <YourComponent />
</Provider>

There are also options for making this global for every story.

You could use a "mock store", a simplified version of your redux store for your stories.

Overall, I don't think there is a simple and easy answer. As I mentioned, I think configuring storybook and working with things like Redux is troublesome. Thankfully, you only need to configure this kind of stuff once for the most part.