DIGIT-UI

Key components of DIGIT-UI

Overview

This page provides the architecture and key features of the DIGIT UI. Click on the broader headings below to find the details.

• Frontend components

• UI Architecture

• Employee/Citizen App

Frontend Components

Broadly, the DIGIT UI frontend components are categorized as below:

1. Libraries

2. CSS Library

3. React Components

4. UI Modules

5. Templates

DIGIT UI

Nomenclature

1. The first line contains the Architecture Component name or info

2. The second line has npm-package and in the bracket there is a template based on which the component will be created.

module naming convention

Features

• Easy-to-use CLI

• Handles all modern JS features

• Bundles commonjs and es module formats

• create-react-app for example usage and local dev for React-based libraries

• Rollup for bundling

• Babel for transpiling

• Supports complicated peer-dependencies

• Supports CSS modules

Templates

The templates have the following folder structure: The components related to the template are inside the src folder of the template and an example is created to use and showcase the app created by the template.

Architecture

We have two main React Apps:

1. micro-ui-internals

   • Meant for the eGov development team to build components and default modules.

   • Contains the following modules:

     • CSS Library

     • UI Components (presently react-components)

     • Utils Library: Contains Services, Localization handling and React Hooks.

     • UI Modules

       • Core - containing login, routing and global state.

       • PGR

       • FSM

       • PT

       • Payment

       • etc ...

2. micro-ui

   • Meant for the state team to manage, make changes, and deploy

   • Import digit-ui-internals modules

   • Customizations

     • View

     • Services

   • Build and deploy scripts

     • Dockerfile & nginx.conf

     • build-config.yaml

CSS Library

The CSS Library contains all the classes both in the module and compiled form.

css folder structure

This can be imported using import "@egovernments/digit-ui.css/Button"

or full CSS import using import "@egovernments/digit-ui.css"

Component Libraries

Component Library contains a set of all the required components defined in them.

react-components

Libraries & Utils

These contain the following:

• Localization workflows

• API handling - API caching and handling strategies will be here, imported, and shared by all modules. Published as a function, can be used by anyone.

• Localisation

libraries

Modules

The module will function as a closed system for the states, limiting their access to node_modules or CDNs only. Any components specific to a state can be provided during the module's initialization within the employee or citizen application's state.

Below is an illustration of how the modules structure looks like:

modules

Modules contain the following inbuilt

• Theme - this may change if we later decide to use any css-in-js library, like styled-components.

• Components

• Routes

• State management

• Business logic

• API integrations

Employee / Citizen App

The app imports the developed module.

import './index.css' import { initPGR } from '@egovernments/pgr-module'; import punjabLogo from './assets/logo.png' const theme = { "--primary-color": "#3f51b5", "--text-color": "#212121" } const PGRComponents = { "logo": punjabLogo } const initPunjabPGR = (onRouteChange) => initPGR({ state: "pb", element: "#appWrapper", components: PGRComponents, onRouteChange, theme }); export default initPunjabPGR;

In the next phase, the Employee and Citizen app can be rewritten as a single app with the role and permissions-based rendering.

Related Links

Prerequisite reference study materials

Troubleshoot using Browser network Tab