Egov UI framework
Egov ui framework for creating screen by writing object configuration
Requirements
Node js
NPM
Installation & Development
$ git 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
Go to src/ui-config/screens/specs/ in root of the project.
Create a folder for your set of screens. eg:auth.
Create a file for screen. eg:login.js
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:
ui-framework | within module components (local) | framework components |
|---|---|---|
containers | custom-container-local | custom-container |
molecules | custom-molecules-local | custom-molecules |
atoms | custom-atoms-local | custom-atoms |
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.