Building a re-usable component library from scratch in React for Deutsche Telekom

Component library to support an ecosystem of applications

Image highlighting main technologies used in the react component library namely react, typescript,Redux, webpack & styled components

Tech stack used:

• React
• Redux
• Redux-saga
• Styled-components
• Typescript
• Webpack
• React docgen typescript
• Jest
• Enzyme

What will this article cover

1. Why components?
2. Features of the starter-kit used for the library
3. Architecture of the library and its benefits
4. Development process and maintaining the library
5. Key components with usage and their code

Landing page of our component library showing few components like Grid (supports different types of pagination), Icons, Input (supports all types of inputs with custom functionality)

Screenshot showing OneShop Basket page using components from the dt-components library

1. Why components?

In modern web development, components are building blocks to make any web application. Here are some reasons below in my opinion why making a component library is a great idea.

• Design consistency and Brand guidelines: As you keep building the library, you will also lay down foundation for your design team. As they work on other projects under the same brand, they will re-use the same components only (w.r.t to aesthetics). which will help everyone stick to brand guidelines.
• Optimises the requirements & design process: Once the foundations components are done, it is just about using them to build interfaces. Be it design or development. Different permutations and combinations of these components are used to enhance UX and improve design/development processes.
• Collaboration: Component library can be created and shared within organisation and beyond that promotes collaboration
• Re-usability: Fast development as you start re-using each and everything within and across projects
• Consistency: Ensures user experience consistency across an application/ecosystem of applications falling under the same brand
• Testing: Testing becomes a breeze as you write test cases etc. for a component given the use cases etc. it can cover
• Declarative programming: Developer looking at the code can easily make out by seeing what components are used and how. Here is a sample code highlighting the same thing:

Declarative programming using component driven approach. This improves code readability as well.

2. Features of the starter-kit used for the library

Some key pointers about the library:

• It supports two types of bundling — UMD and ES6:

UMD bundling code:

Code showing configuration for UMD bundling

ES6 bundling code:

Code showing configuration for ES6 bundling

• Library is capable of being used in typescript and non-typescript projects (Typescript enabled projects also give autocomplete support for props as you consume the library)

onClose method is suggested as auto-complete because of typescript support

• Chunking support for components so that vendor.js is not bloated unnecessarily while in production

3. Architecture of the library and its benefits

• Naming convention of components: I think without saying much the structuring of the components will be clear from the below picture

Folder structure and naming convention for components diving the into atoms, molecules, mixtures and compounds

So taking chemistry into picture, I can explain the above convention by analogy.

Chemistry vs Components ;)

For example: Loader component (molecule) using spinner component (atom) and Overlay component (atom) to render a loader on the page while an API call is in progress:

Loader component (molecule) using Ovelay and Spinner (atoms) from the library

Loader component (molecule) consuming Overlay (atom) and Spinner (atom)

• Documentation for components: The starter kit also used react-docgen-typescript to generate documentation for the components as we developed them.

The documentation converts the props into functionable UI (better than react storybook) which will auto-generate code for you once you play with the props. This made is easier for us to introduce to component library to anyone new in our team or outside of our team. It also allowed the developers to change the props on runtime using a UI interface which would generate code on runtime for the component. A developer will just copy paste that code to start using that component with the desired functionality.

Due to the terminologies adopted from chemistry, we were easily able to relate which component is an atom and which one is a mixture which enabled new members in the team as well to estimate the task in hand, assign it to the right person and highlight dependencies initially at the time of planning only. Example: if a thumbnail was to be made it was sure that it would use components from atoms like: button, link, preload-image etc.

Our button component along with the documentation created by react-docgen-typescript

4. Development process and maintaining the library

We follow the below steps for development and maintainence of the library

• Components are identified from the designs
• Common components are moved to library
• Application specific components are kept in the application
• After development of components, Version is bumped and pushed to nexus
• Latest version is installed in the application again

Package.json showing publishing the library as per the type of release given

5. Some of our key components and their usage

Grid

Grid component made in React that support four types of pagination

Screenshot showing usage of grid in OneShop

(It is a grid component that supports 4 types of pagination along with URL updation on the fly)

Pagination types supported are:

• Simple pagination
• Numbered pagination
• Infinite pagination
• Load more pagination

It uses redux inside it itself to call specific actions that should be dispatched to render the grid.

Usage:

Grid component usage in code for showing grid

Progress Stepper

Progress Stepper component made in React

As clear in the picture it will highlight the step that is active. It will also show the previous steps as completed

Code showing usage of progress-stepper component

Image Pre-loader

This uses Intersection Observer API to lazy load the images. This was a key thing required as an E-commerce is an image heavy application and performance is also important

PRELOADER

Preload component for usage which uses Intersection Observer API

OTP Input

OTP input component made in react with dynamic number of input boxes

OTP input is making the user enter the OTP seamlessly and showing him the exact number of inputs as the length of the OTP. This component also progresses to the next input automatically as user inputs the numbers.

OTP Input Usage

Icons

Screenshot showing icons component used in the react component library

There are more than 70 different icons that we have added into the library as SVGs. We just pass the name of the icons in the library to consume whichever icon we want

Gist showing how to use Icon component.

Code for Icon components

Button

Screenshot showing the button component in the library

Button is the most basic component. For our project button was of four types:

• Primary
• Secondary
• Complementary
• Button with InProgress state

Screenshot showing different types of button supported by the library

Screenshot showing usage of button component in OneShop from component library

Code showing implementation of Button component

There are other small and big components which contribute to the list making 60+ components currently in the library.

Way Forward

I want to take a pause here and thank the entire frontend team

Amit Jain, Mumuksh Meghwal, Rahul Aggarwal, Pushpender Rautela, Sumit Barthwal, Shubham Batra, Vaishali Srivastava and Vikas Kanojia

at Deutsche Telekom who made this possible.

We plan to improve the library further by adding more functionalities.

We are currently supporting 3 projects internally using this library internally namely:

• OneShop: An e-commerce platform
• Face to Face: A B2B2C portal to order products for customers
• Mock Contract prolongation: A campaign system which opens as a web-view in OneApp (Android and IOS) to up-sell the products and make campaigns on the fly

We will scale the library to support more projects in future.

We also used lot of best practices in order to optimise OneShop for performance but that is a scope for another medium article.

Stay tuned!