In-house built component library using Storybook
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,
- Improved productivity
- UI consistency
- 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
There are many approaches currently being followed as part of the industry standards, to build a component library. We used React Storybook.
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:
- Lerna
- React + Typescript
- 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,
- Exact, which means that Lerna will use the same version for all packages
- 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
Similar to our mobile web code base, our Component Library code base is also a Typescript-based Project.
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
TsLint help us to implement coding rules which in turn aid to readability, maintainability of our code. First, to automate these checks, we added it as part of our devDependencies:
then the tslint.json file:
and lastly, a script in the package.json file for linting the *.ts files:
Storybook
Finally, we have Storybook which is a visual playground for our react components, enabling us to see our components in action and debug them as well.
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
As part of the first step of 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
As the storybook team puts it:
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:
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 code preview feature in Storybook displays code preview with user selected knobs in various framework code.
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.
We are now able to create, test and publish our packages/components!
So what is the current Status of our Component Library?
Inspired by the Atomic Design Methodology ( by Brad Frost), we have contributed to adding multiple UI components that are isolated and reusable, in other words, Atoms.
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).
What are the future plans?
We are working towards 100% componentization and implementing our storybook UI components in more places in our code base . React Hooks and adding documentation to all of our components are in pipeline as well.
Conclusion
All in all, component library has helped us in solidifying our approach towards being able to create, test and publish our UI components easily!
