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:
- React + Typescript
- React Storybook
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.
Similar to our mobile web code base, our Component Library code base is also a Typescript-based Project.
To install this we used:
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 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:
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.
As part of the first step of installation:
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:
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:
The code preview feature in Storybook displays code preview with user selected knobs in various framework code.
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:
Atomic Design Methodology | Atomic Design by Brad Frost
My search for a methodology to craft interface design systems led me to look for inspiration in other fields and…
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.
All in all, component library has helped us in solidifying our approach towards being able to create, test and publish our UI components easily!