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
Broadly, the DIGIT UI frontend components are categorized as below:
Nomenclature
The first line contains the Architecture Component name or info
The second line has npm-package and in the bracket there is a template based on which the component will be created.
Features
Easy-to-use CLI
Handles all modern JS features
Bundles
commonjs
andes
module formatscreate-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:
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 ...
micro-ui
Meant for the state team to manage, make changes, and deploy
Import
digit-ui-internals
modulesCustomizations
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.
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.
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
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 contain the following inbuilt
Theme - this may change if we later decide to use any
css-in-js
library, likestyled-components
.Components
Routes
State management
Business logic
API integrations
Employee / Citizen App
The app imports the developed module.
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
Last updated