{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"About This Manual","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This manual covers the various features of DIGIT UI and every feature is defined with a flow and consists of screenshots for user assistance.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Intended Audience","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This manual is intended to assist employees who will develop DIGIT UI","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Document Conventions","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"background":"#cfe2f3","rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"If you see","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#c1d9f0","rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"It means","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"Bold Text ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"Screen elements like buttons, drop-down lists, input fields, and such UI elements are highlighted in Bold","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"Italicized text ","type":"text","marks":[{"type":"em"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"The word or set of words is especially emphasized. ","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":" >","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"The Arrow ‘>’ notation describes the flow of navigation in The Arrow ‘>’ notation describes the flow of navigation in the application ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"Note: ","type":"text"},{"type":"emoji","attrs":{"id":"1f5d2","text":"🗒","shortName":":notepad_spiral:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"The text following this icon provides additional information","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"Tip: ","type":"text"},{"type":"emoji","attrs":{"id":"atlassian-light_bulb_on","text":":light_bulb_on:","shortName":":light_bulb_on:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"The text following this icon provides suggestive use","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"Mandatory: ","type":"text"},{"type":"emoji","attrs":{"id":"atlassian-red_star","text":":red_star:","shortName":":red_star:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"The field following this icon is a Mandatory field","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[102.0]},"content":[{"type":"paragraph","content":[{"text":"Attention: ","type":"text"},{"type":"emoji","attrs":{"id":"atlassian-warning","text":":warning:","shortName":":warning:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[658.0]},"content":[{"type":"paragraph","content":[{"text":"The text following this icon indicates a call for attention","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Document Version History","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"background":"#cfe2f3","rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"Version Number","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#cfe2f3","rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Release Date","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#cfe2f3","rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"Release Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"Version 1.0","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"Version 1.1","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[253.0]},"content":[{"type":"paragraph","content":[{"text":"This release contains followings:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FSM Module","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Common modules","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Citizen Login","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Payment module","type":"text"}]}]}]}]}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Introduction to DIGIT UI","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"DIGIT UI contains ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"UI Components","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"API Services","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Config Service","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Localization service","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Resolution of Key Challenges","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"A bundled UI","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Currently, all our Apps get bundled into an employee and citizen app. This makes it difficult to send individual/selected apps to a particular state. Also, it makes it difficult for developers during the development process. They sometimes need to resolve conflicts with other apps code changes.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": microsite architecture will be adopted, similar to microservice architecture in the backend. Each application can be developed independently and stitched together for a single deployment or independently deployed. The specific strategy of deployment will be adopted based on studying the current distribution channel.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update: ","type":"text","marks":[{"type":"strong"}]},{"text":"We are working on microsite architecture. Although the structure is in place Independent libraries are currently used as components.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Application prototyping","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Prototyping a new application either based on an existing UI flow or a new flow is not easy or straightforward. It takes some effort.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": starter kits will be created to enable adding new applications easily.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":": We have created an E-Gov CLI service for prototyping new applications based on the current structure.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Learning Curve","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The current framework has a steeper learning curve, which makes it enabling new resources is a time-consuming effort.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": A balance between framework features and resource allocation has to be calculated. However, we will provide cross-framework support.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Technology dependence","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Current react is developed on React and can integrate only react apps into it. This makes it difficult for state teams to get involved as many of them lack React resources and want to use the UI technology that they are comfortable with. A plain bootstrap + Jquery or similar else is what the state teams may be comfortable with.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":":","type":"text"},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"We will support all js frameworks. It can be React, Preact, Angular, jQuery, Vue, etc. All of them are JS frameworks and can be clubbed together. Simple tutorials can be provided to external developers to get them easily started with their choice of framework.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":": We are making all the UI components and API utilities & services independent of each other so that each component can be reused with other frameworks as well.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"# of API calls","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Currently, the UI gets created by merging multiple reusable components. Each of these components may need some master data or some API call to happen. When these components are combined to create a flow, the number of API calls increase. This puts additional load on the server, also it makes the application slower on 3G connections or low-end mobile devices.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": We will create a topological structure of components, enabling the maximum number of parallel API calls and minimizing the load time. To optimize and reduce the number of calls, we will work with the backend team. We can look at implementing GraphQL based API’s to eliminate multiple API calls. The components only indicate the resource and the fields they require and the main component does the API calls and distributes data.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":": API Services and Utilities achieve what was stated as a resolution to this. API integration is in progress and the UI team has taken into consideration that API calls have to be minimized","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"State-specific changes","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Currently, we allow Javascript hooks at very specific places that allow states to add javascript on top of Digit and customize the UI to add or remove a field. This is currently a very basic form. The javascript hooks are not pretty straightforward while adding new elements","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": We will add override support on default config for better integration of state-specific changes.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":": Override Support has been created on default config, state-level hooks are in progress","type":"text"}]},{"type":"paragraph","content":[{"text":"The following configs are available:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PGR: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://digit-discuss.atlassian.net/wiki/spaces/EPE/pages/1285587062/PGR+UI+Implementation+-+Guidelines+FAQs#Customizing-fields-in-a-form"}},{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FSM: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://digit-discuss.atlassian.net/wiki/spaces/EPE/pages/1290567710/FSM+UI+Implementation+-+Guidelines+FAQs#Customizing-fields-in-a-form"}},{"text":" ","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Minimal/Non-standard configurations","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Currently, UI configuration is not defined well and is available for very limited features. These configurations are used to control things like","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"State Logo","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Which states to use for login","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"There should be a standard configuration approach, which can be used to enable/disable/configure features within the UI.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": Configuration support will be added for details as such, state logo, and other state-related parameters.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":": State-level hooks are defined. ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"SEO","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"No SEO friendliness as there is no Server-Side rendering or google analytics","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolution","type":"text","marks":[{"type":"strong"}]},{"text":": Pre or Server rendered page support will be added to enable SEO. GA integration can be done easily.","type":"text"}]},{"type":"paragraph","content":[{"text":"Update","type":"text","marks":[{"type":"strong"}]},{"text":": Will de implemented where required.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Dev Setup","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The development environment can be set up by using ","type":"text"},{"text":"git clone","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/EPE/pages/535331058"}}]},{"text":" ( To be updated with eGov Repo link on setup ) & ","type":"text"},{"text":"yarn","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://classic.yarnpkg.com/en/docs/install/#debian-stable"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"After cloning the repository and changing drive into the repository, run ","type":"text"},{"text":"yarn install","type":"text","marks":[{"type":"em"}]},{"text":", this will install the dependencies of the repository","type":"text"}]},{"type":"paragraph","content":[{"text":"Then run ","type":"text"},{"text":"yarn start","type":"text","marks":[{"type":"em"}]},{"text":" to run the application on the local machine.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"shell"},"content":[{"text":"$ git clone git@github.com:egovernments/digit-ui.git\n$ cd digit-ui/web\n$ yarn install\n$ yarn start","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Getting Started","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This section will talk about the following aspects.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Work","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"File Structure","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"UI Components","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Work","type":"text","marks":[{"type":"strong"}]}]},{"type":"taskList","attrs":{"localId":""},"content":[{"type":"taskItem","attrs":{"state":"DONE","localId":"1"},"content":[{"text":"Config service to merge Default config with Delta config","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"2"},"content":[{"text":"JSON Config based UI renderer","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"3"},"content":[{"text":"i18n library - Localization & Translation mapping library","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"4"},"content":[{"text":"UI Component library as per new design system","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"5"},"content":[{"text":"CSS Component utilizing TailwindCSS Framework","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"6"},"content":[{"text":"API Services & Integration","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"7"},"content":[{"text":"Folder and file structure revamp as per new repo creation","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"8"},"content":[{"text":"Validations in PGR Module","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"9"},"content":[{"text":"Development environment setup","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"10"},"content":[{"text":"State-level hooks","type":"text"}]},{"type":"taskItem","attrs":{"state":"TODO","localId":"11"},"content":[{"text":"Citizen login UI is complete but for employee we are currently using temporary fix for Authorization of user by hardcoding auth-token","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"12"},"content":[{"text":"@egovernments/digit-ui-commons","type":"text","marks":[{"type":"code"}]},{"text":" add sidebar and top navbar","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"13"},"content":[{"text":"Add citizen and employee routes","type":"text"}]},{"type":"taskItem","attrs":{"state":"TODO","localId":"14"},"content":[{"text":"Optimizations","type":"text"}]},{"type":"taskList","attrs":{"localId":""},"content":[{"type":"taskItem","attrs":{"state":"TODO","localId":"15"},"content":[{"text":"MDMS Service","type":"text"}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"16"},"content":[{"text":"Versioning","type":"text"}]}]},{"type":"taskItem","attrs":{"state":"DONE","localId":"17"},"content":[{"text":"Documentation for Training","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Details","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Composition","type":"text"}]},{"type":"codeBlock","attrs":{"language":"yaml"},"content":[{"text":"// Internal Components - only egov employee will have access\n- Github/digit-ui-internals\n - @egovernments/digit-ui-css // maybe renamed to something better\n - @egovernments/digit-ui-components \n - @egovernments/digit-ui-utils\n - modules\n - @egovernments/digit-ui-commons // contains payment module\n - @egovernments/digit-ui-core // contains login, sidebar and other common modules\n - @egovernments/digit-ui-pgr\n - @egovernments/digit-ui-fsm\n\n// External - states will have edit access\n- Github/digit-ui // this will use all internal components to create employee and citizen renderings\n - index.html\n ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Deployment","type":"text"}]},{"type":"paragraph","content":[{"text":"The modules and packages in ","type":"text"},{"text":"digit-ui-internals","type":"text","marks":[{"type":"code"}]},{"text":" will be published over npm. The ","type":"text"},{"text":"digit-ui","type":"text","marks":[{"type":"code"}]},{"text":" will serve as the core app, which will use the modules via npm and will be deployed on state/eGov servers via Jenkins build.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1026,"id":"04bbd555-9b36-4b83-bd7f-55c398388824","collection":"contentId-819068932","type":"file","height":909}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"CSS and Image assets Module","type":"text"}]},{"type":"paragraph","content":[{"text":"The CSS is maintained at ","type":"text"},{"text":"Github/egov-ui-internals/digit-ui-css","type":"text","marks":[{"type":"code"}]},{"text":" and published at ","type":"text"},{"text":"npmjs/@egovernments/digit-ui-css","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"To use the CSS, we will add the following in the core app.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"This module also contains images that can be browsed at ","type":"text"},{"text":"https://unpkg.com/browse/@egovernments/digit-ui.css/","type":"text","marks":[{"type":"link","attrs":{"href":"https://unpkg.com/browse/@egovernments/digit-ui.css@1.0.4/"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Components","type":"text"}]},{"type":"paragraph","content":[{"text":"Components will be maintained at ","type":"text"},{"text":"github/egov-ui-internals/egov-ui-components","type":"text","marks":[{"type":"code"}]},{"text":" and published at ","type":"text"},{"text":"npmjs/@egovernments/egov-ui-components","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"The usage will be as follows","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import { Card, Dropdown } from \"@egovernments/egov-ui-components\"\n\nconst Step = () => {\n return (\n \n \n \n )\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"The directory consists of the following components","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":209,"id":"bb82857a-091d-441c-9e93-c726e73dbb14","collection":"contentId-819068932","type":"file","height":703}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Libraries: Utils and Services","type":"text"}]},{"type":"paragraph","content":[{"text":"We have the business logic layer and utility library in a separate repo, to be maintained and shared across all modules. It will be maintained at ","type":"text"},{"text":"GitHub/egov-ui-internals/egov-ui-utils","type":"text","marks":[{"type":"code"}]},{"text":" and hosted over npm at ","type":"text"},{"text":"@egovernments/egov-ui-utils","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"It will be used as follows","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"// Module\nimport React from 'react'\n\nconst App = ({ stateCode, cityCode, moduleCode, role }) => {\n const store = eGov.Services.useStore({ stateCode, cityCode, moduleCode, role })\n return

Module Example 😄

\n}\nexport default App\n\n// Core App\nimport ReactDOM from 'react-dom'\nimport initLibraries from '@egovernments/egov-ui-utils'\n\nimport PGRApp from \"@egovernments/egov-ui-pgr\"\n\ninitLibraries();\nReactDOM.render(, document.getElementById(\"root\"))","type":"text"}]},{"type":"paragraph","content":[{"text":"This contains the followings:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Translations","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Config handling","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configs will be maintained at ","type":"text"},{"text":"GitHub/egov-ui-config","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"On init, module will fetch its configs from ","type":"text"},{"text":"https://raw.githubusercontent.com/abhinav-egov/egov-ui-config////.json","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"It will fetch all pages configs.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The default config will be maintained at the ","type":"text"},{"text":"main","type":"text","marks":[{"type":"code"}]},{"text":" branch and states' on their respective branches. i.e., ","type":"text"},{"text":"pb","type":"text","marks":[{"type":"code"}]},{"text":" for Punjab","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Services","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Localization","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Localization is fetched only once per locale per module and stored.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Store","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getStore: this gets state module config, MDMS data, and localization data and returns the init store for redux.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"at init, the following locales are fetched","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"rainmaker-common","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"rainmaker-{module} (i.e., rainmaker-pgr)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"rainmaker-{state} (i.e., rainmaker-pb)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"rainmaker-{tenantId} (i.e., rainmaker-pb.amritsar)","type":"text"}]}]}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Location","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"MDMS","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"MDMS services are a collection of Master Data Store calls that are used for various scopes, ranging from collection of Slum areas, available payment gateways to config for rendering forms and etc","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"MDMS data can reside at ULB (City level tenant) or State level, depending on how data mapping is present in ","type":"text"},{"text":"egov-mdms-data repo","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/egovernments/egov-mdms-data/"}}]},{"text":". ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" Payment Gateway - ","type":"text"},{"text":"data/pb/DIGIT-UI/PaymentGateway.json","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/egovernments/egov-mdms-data/tree/DEV/data/pb//DIGIT-UI/PaymentGateway.json"}}]},{"text":" provides the list of available payment gateways. Multiple payment gateways can be added to the PaymentGateway array and their status is indicated by the ","type":"text"},{"text":"active ","type":"text","marks":[{"type":"em"}]},{"text":"key.","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n \"tenantId\": \"pb\",\n \"moduleName\": \"DIGIT-UI\",\n \"PaymentGateway\": [{\n \"gateway\": \"AXIS\",\n \"active\": true\n }]\n} ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Role Status Mapping - ","type":"text"},{"text":"data/pb/DIGIT-UI/RoleStatusMapping.json","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/egovernments/egov-mdms-data/tree/DEV/data/pb/DIGIT-UI/RoleStatusMapping.json"}}]},{"text":" defines the statuses available for usage in Inbox page for a certain user. ","type":"text"},{"text":"userRole ","type":"text","marks":[{"type":"em"}]},{"text":"defines the role of the logged in user, whereas ","type":"text"},{"text":"statuses ","type":"text","marks":[{"type":"em"}]},{"text":"array contains all the available statuses for usage. ","type":"text"},{"text":"fixed ","type":"text","marks":[{"type":"em"}]},{"text":"key is used to denote if user can access the view more functionality in the filter to access other statuses or not. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"\"RoleStatusMapping\": [{\n \"userRole\": \"FSM_EDITOR_EMP\",\n \"statuses\": [\n \"FSM_DSO_REJECTED\",\n \"FSM_ASSING_DSO\",\n \"DSO_REJECTED\",\n \"ASSING_DSO\",\n \"CREATED\"\n ],\n \"zeroCheck\" : true,\n \"fixed\": false\n }......","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Slum Area Mapping - ","type":"text"},{"text":"data/pb/amritsar/FSM/Slum.json","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/amritsar/FSM/Slum.json"}}]},{"text":" defines the Slum area in a specific ULB ( city level ) tenant","type":"text"}]},{"type":"codeBlock","content":[{"text":"...\n\t\"Slum\": [{\n\t\t\t\"code\": \"SL0001\",\n\t\t\t\"active\": true,\n\t\t\t\"name\": \"Kathagada juanga sahi\",\n\t\t\t\"locality\": \"SUN20\"\n\t\t},\n\t\t{\n\t\t\t\"code\": \"SL0002\",\n\t\t\t\"active\": true,\n\t\t\t\"name\": \"Kathagada Parbatia Sahi\",\n\t\t\t\"locality\": \"SUN20\"\n\t\t}....","type":"text"}]}]}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Search","type":"text"}]}]}]}]}]},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"The following is in progress.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"File Structure","type":"text"}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":224,"id":"6e2f8536-20c9-4971-883f-5dbc345a03dd","collection":"contentId-819068932","type":"file","height":660}}]},{"type":"paragraph","content":[{"text":"The application structure follows the conventional react app file structure. The above Figure represents the basic structure of the application. Currently, the @egoverments Modules reside inside the src / “source” directory, although it will be a collection of separate node modules.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Utilities and Services","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":208,"id":"24e3d443-9c77-4340-b047-92415a1f65e5","collection":"contentId-819068932","type":"file","height":436}}]},{"type":"paragraph","content":[{"text":"The above figure represents the file structure of different utilities and services we are using inside the application.","type":"text"}]},{"type":"paragraph","content":[{"text":"“config” directory encapsulates utilities and functions used for integration of dynamic config","type":"text"}]},{"type":"paragraph","content":[{"text":"“enums” directory consists of Enums used for integration of same","type":"text"}]},{"type":"paragraph","content":[{"text":"“services” directory consists of various API calls, Local Storage and Session Storage service made available to the application.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Configuration / Dynamic Config","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":207,"id":"5efc9979-311e-4ff8-9715-267406a86abb","collection":"contentId-819068932","type":"file","height":91}}]},{"type":"paragraph","content":[{"text":"The above figure represents the file structure of different config files used for the implementation of dynamic config","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Views/ Pages","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":188,"id":"dd7e6e00-e429-4fd8-9a1f-7c61809f4529","collection":"contentId-819068932","type":"file","height":481}}]},{"type":"paragraph","content":[{"text":"“pages” directory encapsulates all the Views inside the application, sub-directories of the same are grouped sub-views or views inside a specific flow.","type":"text"}]},{"type":"paragraph","content":[{"text":"Example: CreateComplaint subdirectory consists of all the views that reside with the “Create Complaint” workflow of the application.","type":"text"}]},{"type":"paragraph","content":[{"text":"Some common views may reside outside the scope of any specific subdirectory are usable by multiple workflows ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Redux","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":177,"id":"0b438f32-e2ee-434d-86f5-5de04e186864","collection":"contentId-819068932","type":"file","height":249}}]},{"type":"paragraph","content":[{"text":"Since we are using the redux library for state management, the above figure represents the complete structure of the same.","type":"text"}]},{"type":"paragraph","content":[{"text":"“actions” directory contains the Action used inside the application","type":"text"}]},{"type":"paragraph","content":[{"text":"“reducers” directory contains the Reducers","type":"text"}]},{"type":"paragraph","content":[{"text":"Some additional directories are for using utility & service that is routed through redux for state management","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"UI Components","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":193,"id":"cb3bb1fd-127a-451e-ab47-de22aed00695","collection":"contentId-819068932","type":"file","height":689}}]},{"type":"paragraph","content":[{"text":"The figure shows UI components are used in the application.","type":"text"}]},{"type":"paragraph","content":[{"text":"The hierarchy of components is as follows:","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Parent Component","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Child Components","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"AppContainer","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Body","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Body","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Card, Header, LinkLabel, TopBar","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Card","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"Banner, CardCaption, CardHeader, CardLabel, CardLabelError, CardSubHeader, CardText, CardTextButton, CheckBox, ConnectingCheckPoints, DescriptionText, DisplayPhotos, Dropdown, Header, LinkLabel, LocationSearch, OTPInput, RadioButtons, Rating, ResultTable, StatusTable, SubmitBar, TextArea, TextInput, UploadImages","type":"text","marks":[{"type":"em"}]}]}]}]}]},{"type":"paragraph"}],"version":1}