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

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

The Component Library contains a set of all required components defined in it.

react-components

Libraries & Utils

The libraries and utils contain the following:

• Localization workflows

• API Handling Strategies - Centralize API caching and handling strategies within shared functions, accessible by all modules. This ensures consistency and efficiency across the application.

• Localisation

libraries

Modules

The module is a closed system for states, allowing access only to node_modules or CDNs. State-specific components can be provided during the module's initialization in the employee or citizen application.

Below is an illustration of how the module 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

Nomenclature

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

2. The second line contains an npm package and a template in brackets for creating the component.

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: Components related to the template are inside the src folder. An example is provided to demonstrate the app created by the template.

Architecture

We have two main React Apps:

1. micro-ui-internals

   • This is meant for the eGov development team to build components and default modules.

   • It 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

   • This is meant for the state team to manage, make changes, and deploy

   • It allows the import of digit-ui-internals modules

   • Customizations

     • View

     • Services

   • Build and deploy scripts

     • Dockerfile & nginx.conf

     • build-config.yaml

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, we can merge the Employee and Citizen apps into one app with role-based permissions and content.

Related Links

Prerequisite reference study materials

Troubleshoot using the Browser Network Tab