Why do you need component libraries?

As front-end projects become more complex, the number of UI components used in them increases. However, as the number of components grows, maintaining and documenting them becomes more challenging, especially for newly onboarded developers. In such cases, having a centralized place to view all the components and their documentation can simplify development.

This is where a component library comes in handy. A component library is a collection of UI components such as buttons, input boxes, typography styles, and more. It serves as a curated repository of reusable, modular components that form the foundation for consistent design, functionality, and user experience across the entire application.

One of the biggest advantages of having a component library is that it provides a central place to showcase and document all the UI components. This means that developers can easily refer to the library and get a comprehensive understanding of the components without having to go through each file in the codebase. Additionally, the library allows the components to be developed and tested in isolation, which ensures that they work as intended and are free of bugs. Moreover, maintaining a component library is an investment in efficiency, consistency, and scalability for front-end projects.

Introduction to Storybook

Among the tools that help teams organize their components, storybook is among the most popular and influential. It gives an isolated environment where components can be developed and tested. It integrates seamlessly with existing projects in component-driven frontend frameworks such as React, Angular, and Vue. It is also free and open-source.

The ability to develop in isolation is the killer feature here. Often, when developing UI components, the process can become complicated with other components and their logic, asynchronous code, effects, and authorization, to name a few. Using a storybook allows you to pass different props to the component and see the output in real-time in an environment free from distractions. It also lets you see how the components This makes your components truly modular, and not tightly-coupled with other components.

Let’s look at a few examples

It only takes a single command to set up a storybook in an existing project. It automatically installs the dependencies and makes it ready to go. The storybook is launched with the command "npm run storybook". It runs on port 6006 by default and opens an interface that looks like this:

The Storybook entry for a component is known as a 'Story.' If you create a Button component, you also create a Button story to go with it, conventionally named 'Button.stories.js.' As you can see in the above image, it shows a preview of the component with all the different props listed below it. You can change any prop using the interface and see the component change in real-time. This is incredibly useful for the documentation of components and testing them.

To achieve the above interface, all we need is the following code:

As you can see, the storybook auto-generates an isolated environment for the component and identifies all the props and even the docs for the props through 'Button.propTypes'. The sidebar shows all your components and the stories associated with these components. You can further organize this by adding categories in the sidebar, so 'Button' would go under a category such as 'Basic UI Components'.

This is very useful when implementing design systems following the Atomic Design paradigm. You can use the categories feature to sort the components into 'Atoms,' 'Molecules,' 'Organisms,' and so on.

Following are some actual examples for Storybooks:

1. React95 Design System Link: https://react95.github.io/React95/?path=/story/all--all This is an implementation of the classic Windows 95 design system using React and showcased using storybook. It is an excellent example of showcasing a design system using storybook.

2. NASA's Jet Propulsion Laboratory Explorer 1 Link: https://nasa-jpl.github.io/explorer-1/?path=/story/components-base-baseiframe--default This Storybook places a heavy emphasis on documentation, but contains UI demos as well.

3. Guide.co Atlas Link: https://atlas-storybook.guide.co/?path=/story/docs-about-atlas--page This is more like what a frontend team would actually work on, with different variants of components, props, event handlers, and so on.

Wrapping up

This has been a very brief introduction to storybook. It streamlines and elevates UI development and testing processes, making showcasing and documenting them easy. The fact that it supports many major frontend development libraries while being very flexible helps make it so widely used. It encourages developers to create truly modular components with high clarity and reusability. The little extra effort you have to put in for writing Stories pays off in the long term. For complex and long-term front-end projects, a storybook is highly recommended.

Written by: Bihan De Silva