Egov UI framework

Egov ui framework for creating screen by writing object configuration

Requirements

• Node js
• NPM

Installation & Development

$ npm clone https://github.com/muralim4242/egov-ui-framework-boilerplate.git
$ cd egov-ui-framework-boilerplate
$ npm i
$ npm start

Note: We have added default configuration for login, register, dashboard, and advanced dashboard, it will use for you to create a new configuration for the screen.

Usage

1. Go to src/ui-config/screens/specs/ in root of the project.
2. Create a folder for your set of screens. eg:auth.
3. Create a file for screen. eg:login.js
4. Write your configuration.

example code

import {
  getCommonCardWithHeader,
  getLabel
} from "egov-ui-framework/ui-config/screens/specs/utils";

const screenConfig = {
  uiFramework: "material-ui",
  name: "loginScreen",
  components: {
    loginGrid: {
      uiFramework: "custom-atoms",
      componentPath: "Container",
      children: {
        emptyRow: {
          uiFramework: "custom-atoms",
          componentPath: "Item",
          props: {
            sm: 4
          }
        },
        loginItem: {
          uiFramework: "custom-atoms",
          componentPath: "Item",
          props: {
            sm: 4,
            xs: 12
          },
          children: {
            loginCard: getCommonCardWithHeader(
              {
                loginDiv: {
                  uiFramework: "custom-atoms",
                  componentPath: "Div",
                  props: {
                    className: "text-center"
                  },
                  children: {
                    loginUsername: {
                      uiFramework: "custom-molecules",
                      componentPath: "TextfieldWithIcon",
                      props: {
                        label: "Email",
                        margin: "normal",
                        fullWidth: true,
                        autoFocus: true,
                        required: true,
                        iconObj: {
                          position: "end",
                          iconName: "email"
                        }
                      },
                      required: true,
                      jsonPath: "user.username",
                      pattern: "^([a-zA-Z0-9@.])+$"
                    },
                    loginPassword: {
                      uiFramework: "custom-molecules",
                      componentPath: "TextfieldWithIcon",
                      props: {
                        label: "Password",
                        type: "password",
                        margin: "normal",
                        fullWidth: true,
                        required: true,
                        iconObj: { position: "end", iconName: "lock" }
                      },
                      jsonPath: "user.password",
                      required: true,
                      pattern: "^([a-zA-Z0-9!])+$"
                    },
                    breakOne: {
                      uiFramework: "custom-atoms",
                      componentPath: "Break"
                    },
                    breakTwo: {
                      uiFramework: "custom-atoms",
                      componentPath: "Break"
                    },
                    loginButton: {
                      componentPath: "Button",
                      props: {
                        color: "primary",
                        fullWidth: true
                      },
                      children: {
                        loginButtonText: getLabel({label:"Let's go"})
                      }
                    }
                  }
                }
              },
              {
                loginHeader: {
                  componentPath: "Typography",
                  children: {
                    loginHeaderText: getLabel({label:"Login"})
                  },
                  props: {
                    align: "center",
                    variant: "title",
                    style: {
                      color: "white"
                    }
                  }
                }
              }
            )
          }
        }
      }
    }
  }
};

export default screenConfig;

How to run the component and manage the routes in the framework?

• There is no need of writing specific routes for each page/component within the framework
• Framework uses a generic routing based on the location of spec file inside the ui-config/screen/specs, Which is completely taken care by the screenInterface component.
• Just hitting the right URL in the browser will run that component, Below is the expected pattern of the URL

page with menu

http://localhost:<port-name>/landing/egov-ui-framework/<folder-name>/<file-name>
eg:- http://localhost:3000/landing/egov-ui-framework/auth/login

page without menu

http://localhost:<port-name>/egov-ui-framework/<folder-name>/<file-name>
eg:- http://localhost:3000/egov-ui-framework/auth/login

Note: Many components we directly referred from material-UI library.

example of using material UI components

React way for rendering Material-UI component

import React from 'react';
import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
        Primary
</Button>

framework way for rendering the same component in the configuration

......
primaryButton:{
  componentPath:"Button",
  props:{
    variant:"contained",
    color:"primary"
  }
}
..........................................................................................................................

Rules to write specs for rendering pages/components:

• specs can be written inside any folder on this path "\src\ui-config\screens\specs\".
• below are the usages in specs:

ui-framework options to write in the specs: 

• If Ui-framework is using local components(eg: atoms, molecules, containers), it's mandatory to mention the module name (eg: moduleName: "egov-ui-tradelicence")

File imports to handle both indivisual module app and citizen/employee app.

• each module has a common config file to maintain all the imports in a common way to support both running the app individually and through citizen and employee.
• common config (path: "\src\ui-config\commonConfig")  two configs named remote-component-paths and remote-config-paths to store the paths with respect to the modules.