Discussion on: What is your experience with Storybook?

[Michael Parkadze]

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

Is there like a template/preset you use to configure storybook to your wishing?

Also regarding redux, have you ever included redux into your stories? If so how did it go?

[Spyros Argalias]

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.