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
- 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"
}
}
......
Version 1.0 feature
1. Basic atoms.
2. Basic molecules.
3. Basic containers.
4. Inbuild localization support.
5. Role based components.
6. Dynamically create objects using json path.
7. Full screen configuraion.
8. Breaking up the configuration into multiple js.
9. Support multiple frameworks.
10.Inbuilt util functions.
11.Inbuilt component and screen interfaces.
Version 2.0 feature
1. Auto submit functionality with configuration.
2. Moving configuration to github based on tenant.
3. Enhancments of atoms, molecules and container.
4. Userfriendly configurations.
5. Removing unused components.
6. Enhancment of multiitem containers.