In-house built component library using Storybook

Pallavi Hemmige
Oct 13 · 6 min read
Image for post
Image for post
Image by: Beyond Bootstrap

A common goal that is shared by all Frontend developers and teams everywhere is to be able to design and develop components that enable them to ship out their features with the focus of,

  1. Improved productivity
  2. UI consistency
  3. Lesser bugs in the production

At redBus, we decided to create a reusable component library across the teams that would aid developers in building UIs seamlessly and more efficiently.

Tech Stack/ Implementation Details

Storybook is a tool/framework used for UI development which allows you to build isolated and reusable components that can be leveraged to develop entire UIs without much effort.

Our tech stack for building the component library in-house consists of:

  1. Lerna
  2. React + Typescript
  3. React Storybook

Lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna along with NPM was used in order to publish our components. It helped with version management.

Lerna supports two types of package versioning,

  1. Exact, which means that Lerna will use the same version for all packages
  2. Independant, which means that Lerna will release each package with an independent version.

For our component library, we used the Independent version as we might have some packages requiring more releases than others.

Typescript

TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly

TypeScript is a superset of JavaScript that has strict typing and compiles to plain JavaScript. It has proven to help enhance code quality and understandability, thus making it easier to read and debug.

To install this we used:

Configuration:

Babel is a javascript compiler. It is mainly used to convert ECMAScript 2015+ (ES6) code into a backwards compatible version of JavaScript in current and older browsers or environments.

Building Packages:

We added the following to the build command which allowed us to resolve babel config upward from the current root.

For checking of types:

The following tsconfig.json file was added as part of the root of the code base:

Then, so that type checks are done before each build:

To deal with peer dependencies, we did so with the help of workspaces:

In our project, we have used react and styled-components as well, which have been added as part of devDependencies.

TsLint

then the tslint.json file:

and lastly, a script in the package.json file for linting the *.ts files:

Storybook

With this, we are able to visualise the individual components or even group them together — as well as test in different browsers.

If you aren’t convinced, a few more reasons to use storybook are:

  • It is Open-source tool
  • Gives us a quick overview of what components are available
  • It has a clean and fast user interface
  • Supports CSS, styled-components etc.
  • Helps us to achieve UI consistency
  • Avoid UI bugs
  • It comes with add-ons / knobs that provide a way to conduct visual regression testing in order to keep the UI looking just as it’s been intended to look.

Installation

For typescript:

Storybook uses javascript, but since we have used typescript, the path was changed. We have to add the following as part of the storybook/config.js file:

In the webpack.config.js file as part of the storybook folder:

and the following in tsconfig.json:

At this point, we were able to start story book with the npm run storybook command.

Next, we created a file called tslint.prod.json and added:

then tslint.test.json file with:

Adjusted the root package.json as well with:

Some of the features we explored in storybook at redBus include:

Addons/Knobs

A key strength of Storybook is its extensibility. You can use add-ons to extend and customise Storybook to fit your team’s development workflow.

Here, we added import ‘@storybook/addon-knobs/register’ to the storybook/addons.js and modified the storybook/config.js:

addons.js
config.js

Finally, modified the package.json file before the final build:

In order to configure publishing of the packages, in lerna.json:

In package.json:

Code Preview

The Addon Preview can show user selected controls(args)) or knobs in the code. Addon Knobs allow you to edit props dynamically using the Storybook UI.

Image for post
Image for post
Code Preview: Story, Actions,Knobs

We are now able to create, test and publish our packages/components!

So what is the current Status of our Component Library?

We are also currently in the process of fully embracing the Atomic Design Approach by combining the Atoms to form Molecules, which can be combined to form organisms and further, templates. You can learn more about this approach here:

The in-house component library has been successfully implemented across other platforms at redBus as well.(Bus Buddy, Desktop Web, Packages and RedProWin).

Image for post
Image for post
Accordion Component (Atom)
Image for post
Image for post
Search Widget (Molecule)

What are the future plans?

Conclusion

Additional Resources

redbus India Blog

redBus India Blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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