Storybook: The what why and how

13 Oct 2022

The What

"Storybook is a frontend workshop for building UI components and pages in isolation" - is what their site says.
Sure, but that's not it.

"Stories capture the “known good” states of UI components. They’re a pragmatic, reproducible way to keep track of UI edge cases. Reuse stories to power automated tests."
Suure, but nahh.

Scroll down a decent bit and you'll finally hit the
"Storybook brings together UI, examples, and documentation in one place. That helps your team adopt existing UI patterns."

Now THAT's what Storybook is!

The Why

Imagine a team of 5 devs working on the same Frontend application. Dev A creates component A, thinks it's pretty good, asks dev B to review, and goes on to using it in several places.

6 months in, Dev C wants to do a task that component A did, but is simply unaware of its existence. The project has grown too fast and there are 30+ components lying in your components folder.

Scenario A:
The project does not have Storybook.
Dev C starts creating this component that already exists in the codebase but maybe just hidden because of a bad name or bad location. 2 weeks pass and now when Dev A review the code Dev C suddenly gets to know of their wasted effort. "Oh no!".

Scenario B:
The project has Storybook.
Dev C opens the storybook, checks if there's any component that matches their requirement, spots one, easily learns how to use it because there's free documentation, and saves those nice 2 weeks. "Nice".

That's really it -
It's a nice little tool to document your components and tell others that it exists and show how to use them. That's really it.
It adds tiny bit of effort to add a storybook each time a component is created, but the end result, IMO, is very well worth it.

The How

Follow the documentation from their site:

Configure TS Paths

Create main.js under .storybook folder and add the following

1const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
3module.exports = {
4  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
5  addons: [
6    '@storybook/addon-links',
7    '@storybook/addon-essentials',
8    '@storybook/addon-interactions',
9  ],
10  framework: '@storybook/react',
11  webpackFinal: async config => {
12    config.resolve.plugins = [
13      ...(config.resolve.plugins || []),
14      new TsconfigPathsPlugin({
15        extensions: config.resolve.extensions,
16      }),
17    ];
18    return config;
19  },

Add Tailwind/use NextJS components

1import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
2import '../src/styles/globals.css';
3import { themes } from '@storybook/theming';
4import * as NextImage from 'next/image';
6export const parameters = {
7  actions: { argTypesRegex: '^on[A-Z].*' },
8  controls: {
9    matchers: {
10      color: /(background|color)$/i,
11      date: /Date$/,
12    },
13  },
14  docs: {
15    theme: themes.dark,
16  },
19const OriginalNextImage = NextImage.default;
21Object.defineProperty(NextImage, 'default', {
22  configurable: true,
23  value: props => <OriginalNextImage {...props} unoptimized loader={({ src }) => src} />,

The codeblock also sets dark theme, if your projects primarily is a dark themed one.

Creating individual stories

Create a .stories.tsx for each component, import the component and pass some values to them.

Here's an example story for a button component:

1import Button from './index';
2import { ComponentMeta, ComponentStory } from '@storybook/react';
4export default {
5  title: 'Button',
6  component: Button,
7} as ComponentMeta<typeof Button>;
9const PrimaryTemplate: ComponentStory<typeof Button> = args => <Button {...args}>Click me!</Button>;
10const TextTemplate: ComponentStory<typeof Button> = args => <Button {...args}>Click me!</Button>;
12export const Primary = PrimaryTemplate.bind({});
13Primary.args = {
14  variant: 'primary',
17export const Text = TextTemplate.bind({});
18Text.args = {
19  variant: 'text',

With some npm scripts you should be able to have it up and running on a separate port.

1"storybook": "start-storybook -p 6006",
2"build-storybook": "build-storybook",

Add storybook.js and make your (future) life easy!