Prerequisite reference study materials

Development and implementation team

• JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge (Full Course)

• Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks

Development team

• Tailwind CSS Tutorial

• React Query Tutorial

• Multi-language Translate React JS APP with React Hook & i18next

• Axios Crash Course | HTTP Library

• Yarn Workspaces Tutorial

• React-hook-form Tutorial

• React Storybook Tutorial

Frontend Components

Broadly, the frontend components can be categorized as followings:

...

The CSS Library, Component Libraries, and UI modules are based on templates created by CLI Tool.

...

Nomenclature

...

The first line contains the Architecture Component name or info, the second line has npm-package and in the bracket, we have a template based on which the component will be created.

CLI Tool

This tool will be used to bootstrap libraries and micro frontend frameworks for the DIGIT platform. It contains a “template” folder, which will have several starter apps.

...

• Default (WIP) - A default pure js template.

• React-component (Done) - Starter template to make the component library based on React.

• Module (React based) - Micro frontend framework, which will act as a base for different modules we will create.

• … more to come

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

Example

Answer some basic prompts about your module, and then the CLI will perform the following steps:

• copy over the template

• install dependencies via yarn or npm

• link packages together for local development

• initialize local git repo

...

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 repos:

• digit-ui-internals - https://github.com/egovernments/digit-ui-internals

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

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

• digit-ui - https://github.com/egovernments/digit-ui

  • Meant for 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 will have all the classes both in the module and compiled form.

...

import "@egovernments/digit-ui.css"

Component Libraries

Component Library will have the set of all the required components defined in them.

# Atoms
<egov-button text action />

<egov-checkbox name value />

<egov-textarea placeholder />

# Molecules
<egov-list data>
  <egov-list-item />
</egov-list>

<egov-searchbox placeholder action />

<egov-list-filter>
  <egov-input />
  <egov-list data />
</egov-list-filter>

Utils Library

This will have the followings:

...

# @egovernments/digit-utils
exports.getConfig = async (state, module = "", screen = "") => {
  let path = state;
  if (module) {
    path = `${path}.${module}`;
    if (screen) {
      path = `${path}.${screen}`
    }
  }
  const { data, error } = await fetchAPI(`/api/_get?config=${path}`)
  if (error) return {};
  return data;
}

# Module
import { getConfig } from '@egovernments/digit-utils'

const compaintConfig = getConfig("pb", "pgr", "create_complaint");

Modules

The module will be a black box for the states, they will only access throw node_modules or CDN. Any state-specific components can be passed during the initialization of the module inside the state’s employee or citizen app.

...

• 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 will import the developed module.

...