Simplify Web Application Development: Building Component-Library with Storybook and React

If you are a developer who regularly works with frontend technologies, implementing a consistent user interface design across web applications can be a challenge. Designers, stakeholders, and other team members might have different opinions on the visual aesthetics of web components or how they should function. So, finding a way to develop and maintain reusable and consistent components becomes essential. And that's where creating a component-library comes in.

What is a Component Library?

A component-library is a collection of pre-made, reusable user interface components created to provide a consistent and easy way of building web applications.

Component libraries are managed outside of the context of any particular web application. This means that components built can be easily used in any of your applications without having to rewrite boilerplate code or start from scratch each time.

Why use Storybook and React?

Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and more. With Storybook, you can create and maintain your component-library in a project-agnostic way, allowing it to be used in different projects regardless of the framework or library used.

React is known for its high reusability, which makes it a great match for developing a component-library. Plus, it has a vast community, making it easier to seek help and find third-party libraries and plugins.

Getting Started with Storybook and React

Let's dive into how you can set up a component-library with Storybook and React.

Step 1: Installation and Project Setup

First, create a new React application by running:

npx create-react-app my-component-library --template typescript

cd into my-component-library and install @storybook/react:

cd my-component-library
npm i --save-dev @storybook/react

The last thing you need to do is to configure Storybook.

You’ll want to create a directory called `.storybook` with a configuration file and a directory for your stories. Create these directories and files:

mkdir .storybook
touch .storybook/main.js .storybook/preview.js
mkdir .storybook/stories

In `.storybook/main.js`, add the following code:

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app'
  ],
};

The `stories` array lists your storybook files. `addons` and `@storybook/preset-create-react-app` are optional and allow for customizable Storybook setups. In `.storybook/preview.js`, add the following code:

import '../src/index.css';

This imports the CSS file for your app, allowing it to be used by Storybook. You can adjust the path location of the CSS file according to your project structure.

Step 2: Creating and Organizing Stories

In Storybook, a story is a piece of UI component code. You write a story for each variation of your component. Stories are used to test components in isolated environments to ensure that they behave as expected

Create a new file named `Button.stories.tsx` inside of `.storybook/stories` and add the following code:

import React from 'react';
import { Story, Meta } from '@storybook/react';

import { Button, ButtonProps } from '../../src/components/Button/Button';

export default {
  title: 'Components/Button',
  component: Button,
} as Meta;

const Template: Story = (args) => ;

export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});

Secondary.args = {
  label: 'Button',
};

The `Template` component is a necessary component that wraps our component.

The `primary` attribute property is an example of a custom property we set for users to add on to their elements.

With this file in place, you can run Storybook using npm scripts. Add this to your `package.json`:

"scripts": {
  "storybook": "start-storybook -p 6006",
  "storybook-static": "build-storybook"
}

You can now start the storybook server by running:

npm run storybook

You should see your `Button` component on the left-hand side of the screen if everything is working correctly.

Using Storybook to build your component library

Add new stories to the `.storybook/stories` folder with `yarn Storybook` to help build up your component library. You can maintain and manage all of your components using Storybook.

You can also create a separate Git repository for your component-library to make it available with different projects easily. You can use Storybook as a starter project (with some modifications), or simply use boilerplate code of your own liking.

Conclusion

A component-library helps provide a centralized place for reusable User Interface elements across your development teams and various projects. Storybook provides a platform to develop, manage, and test those elements easily. React’s high reusability and extensive community make it an ideal library to work with, especially if you’re creating a component-library over several projects.

With the tools outlined here, you should be well on your way to creating a dynamic and versatile component-library for your team’s needs.