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"
  }
}
......


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.