WebUIKit

Summary (TL;DR)

Getting started

npm install --save sushiweb;

yarn add sushiweb;

Using Component

import React from "react";
import Button from "sushiweb/Button";
import Switch from "sushiweb/Switch";
import Calendar from "sushiweb/Calendar";

/* inside render method */

<div>
  <Button size="large">large</Button>
  Switch : <Switch />
  Select Date : <Calendar />
</div>;

We are going to separate the basic UI components (presentation layer), e.g. navbar, buttons, lists, modals etc to an independent project, which could be effortlessly imported and used in any React Application (currently MWEB) without developers having to worry about Performance, Styling, Responsiveness and handling UI state.

Problem When developers start working on a React Application, not much attention is paid to separate business logic from UI components or building UI components as modular, reusable entity.

This leads to a few issues over time as codebase grows and change requests are incorporated e.g :

• Huge Monolithic components Which are hard to refactor and maintain
• Duplicated logic between different parts and lifecycle of application
• Convoluted Patterns because of adding business logic directly into UI Components
• Inconsistency across Platforms and within App
• Cost of change is huge in terms of efforts and regression

In short, Developer productivity tends to reduce and Fear of regression (changes in one part of App breaking other parts) increases.

Solution

We have come up with a proposal to breakdown WEB UI into small, independent, reusable modular components and move to a separate repo/ code-base where these can be created, maintained and tweaked independently.

Components will then be compiled down to simple native javascript files and exposed to the outside world as plug-and-play library.

Our main React app can then include WEBUI KIT as npm module like any other third party library and start using individual Sushi Web components to build layout and pages.

Sushi Web components can also be combined with each other and given custom behaviour at run time to help build complex UI.

To run it on Docker :

docker build -t storybook-docker .

docker run -d -p 80:80 --name dockerbook storybook-docker

How to add a new icon