Storybook: Isolated Environment For Component Development

We are going to create a fairly complex Button component in this tutorial using Storybook.

Repository: https://github.com/karthickthankyou/storybook-button

Deployed storybook: storybook-button.surge.sh

Why

Imagine you need to create a Button component with the below requirements

  1. Size variants: Small, Medium, Large
  2. Hierarchy variants: Contained, Outlined, Text
  3. Color variants: Primary, Secondary, Success, Error, and, Warning.
  4. Supports disable state
  5. Supports full width
  6. Must accept complex children
  7. Must allow custom classes.

The button variation: Medium — Outlined — Success has some issues.

The same button variation is not used in our application. So we won’t know that Medium — Outline — Success won’t work properly until we use that in our application. And that would be a bitter surprise.

Storybook helps us to have an instance of each variation we can derive from the above properties. And along with chromatic — a visual regression tool from the same team behind Storybook, we can get a feel of security that our components are doing good.

Storybook has a lot of other benefits. let’s explore with the below tutorial

Project: Button

Clone the start branch of the repository using the below command to follow this tutorial and install the dependencies.

git clone -b start https://github.com/karthickthankyou/storybook-button.git

And install the dependencies and run the application and the storybook.

npm inpm startnpm run storybook

The react application will run on localhost:3000 and will be saying Hello World.

The storybook interface will open on localhost:6006 saying No Preview.

Creating a .stories.js/ts is a bit of pain in the neck regardless of how busy the developer is. I was using a script to automate this process by creating the .tsx and .stories.ts files together. I then published it on npm.

You will see the .stories.tsx and .tsx files created for us.

I modified the component to look like below. Also, note that IButtonProps is waiting for our props.

I just converted the requirement given to us into props in the button component. Note the usage of Union operator in the props size, variant, color to allow any one of the given values.

Notice how the props directly reflect the requirements.

Notice that all of the props are optional and have default values set to them. So, even when the consumer of this component calls our component with no props He/She will get something.

<Button/>// Will get something rendered.

We use tailwind in this tutorial. Tailwind is also added to the start branch of the repository. So you can straight away start to use it.

Notes:

  1. The color and variant have to work together as they both use the same classes. It is a matrix of possibilities.
  2. Along with disabling the button with the disabled property, we also do some custom styling changes on the disabled button.

There are going to be a huge number of variations we can get out of the props we use. I chose to create a few of them.

In the final branch of the repository, you can find the finished code having all these variants implemented.

button variations

The below example shows two of the button variants. You can create more variations by copy passing NoProps and adding args as needed. As we use typescript, that will assist us with the autocomplete.

npm run build-storybook

Build the storybook. and then run the production optimized static build files using http-server or serve.

npx http-server storybook-static// ornpx serve -s storybook-static

We don't have to rely on the variants we exported from our stories file. The storybook interface allows us to play around with different props using the controls panel!

So, we have our component ready. It is time to show the client/manager what you have done. Surge is a simple way to deploy a side project quickly!

npx surge

Notes:

  1. If you have never used surge, it will prompt you to log in or register.
  2. In the project field, enter the path of the folder that consists of the build static files. (static-storybook)
  3. I edited the domain field to have something meaningful. The default ones will be gibberish.

So, that is it! You can visit the below link and have a look at the project.

I highly encourage you to clone the project and play around with it!

Thank you.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karthick Ragavendran

Fullstack engineer @ atem.green | React, Typescript, Redux, JavaScript, UI, Storybook, CSS, UX, Cypress, CI/CD.