Discussion on: What is your experience with Storybook?

View post

I mostly love it.

The good:

Awesome development environment for components. You don't have to place your component in your app, render it and go through manual steps until you can see it. You can directly load your component in storybook.
Awesome as a "component style guide". Other developers can see the code used to render the component, either in .stories files or in Storybook itself using a plugin. Designers can see what components look like.
Awesome for exploring or playing around with components. There are plugins like "actions" and "knobs" which let you play around with components and see how they render with different props and such.

The bad:

Configuration is quite bothersome when it needs to be custom. I generally have to copy my webpack rules into the storybook configuration.
Sometimes I find the docs extremely lacking. The other day I was trying to configure addon-actions and it just wouldn't work. No live example + source code (that I could find), I was just stuck with copying the documentation code to no avail. In the end I actually ended up using an older version of the addon.
Troublesome if you want to include other things like Redux in your stories.

Overall: I highly recommend it, especially for large teams, but understand that the initial configuration may be very frustrating.

Michael Parkadze • Sep 30 '20

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 • Oct 1 '20

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.