{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Frontend Components","type":"text"}]},{"type":"paragraph","content":[{"text":"Broadly, the frontend components can be categorized as followings:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"CLI Tool","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Templates","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"CSS Library","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Component Libraries","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"UI Modules","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The CSS Library, Component Libraries, and UI modules are based on templates created by CLI Tool.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":65.0},"content":[{"type":"media","attrs":{"width":943,"id":"1debe125-8a94-45d4-a25c-27ef9bfe9a3c","collection":"contentId-1555956005","type":"file","height":513}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Nomenclature","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-left","width":50.0},"content":[{"type":"media","attrs":{"width":724,"id":"86a69a60-5a72-47da-b54c-3084798ae27f","collection":"contentId-1555956005","type":"file","height":198}}]},{"type":"paragraph","content":[{"text":"The first line contains the Architecture Component name or info, the second line has npm-package and in the bracket, we have a template based on which the component will be created.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"CLI Tool","type":"text"}]},{"type":"paragraph","content":[{"text":"This tool will be used to bootstrap libraries and micro frontend frameworks for the DIGIT platform. It contains a “template” folder, which will have several starter apps.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":65.0},"content":[{"type":"media","attrs":{"width":680,"id":"767d9df7-4700-45e9-a9b5-38dbce2db5f7","collection":"contentId-1555956005","type":"file","height":797}}]},{"type":"paragraph","content":[{"text":"The following will be in the template:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Default (WIP) - A default pure js template.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"React-component (Done) - Starter template to make the component library based on React.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Module (React based) - Micro frontend framework, which will act as a base for different modules we will create.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"… more to come","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Features","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Easy-to-use CLI","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Handles all modern JS features","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Bundles ","type":"text"},{"text":"commonjs","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"es","type":"text","marks":[{"type":"code"}]},{"text":" module formats","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"create-react-app","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/facebookincubator/create-react-app"}}]},{"text":" for example usage and local dev for React-based libraries","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Rollup","type":"text","marks":[{"type":"link","attrs":{"href":"https://rollupjs.org/"}}]},{"text":" for bundling","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Babel","type":"text","marks":[{"type":"link","attrs":{"href":"https://babeljs.io/"}}]},{"text":" for transpiling","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Supports complicated peer-dependencies","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Supports CSS modules","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Templates","type":"text"}]},{"type":"paragraph","content":[{"text":"The templates have the following folder structure:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":268,"id":"31dd9e03-8998-4e78-9030-ee72bec180a2","collection":"contentId-1555956005","type":"file","height":506}}]},{"type":"paragraph","content":[{"text":"The components related to the template are inside the ","type":"text"},{"text":"src","type":"text","marks":[{"type":"code"}]},{"text":" folder of the template and an example is created to use and showcase the app created by the template.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Architecture","type":"text"}]},{"type":"paragraph","content":[{"text":"We have two repos:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"micro-ui-internals","type":"text","marks":[{"type":"code"}]},{"text":" - ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://github.com/egovernments/digit-ui-internals"}},{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Meant for eGov development team to build components and default modules.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Contains following modules:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"CSS Library","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"UI Components (presently ","type":"text"},{"text":"react-components","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Utils Library: Contains Services, Localization handling and React Hooks.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"UI Modules","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Core - containing login, routing and global state.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PGR","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FSM","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PT","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Payment","type":"text"}]}]}]}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"digit-ui","type":"text","marks":[{"type":"code"}]},{"text":" - ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://github.com/egovernments/digit-ui"}},{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Meant for state team to manage, make changes and deploy","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Import ","type":"text"},{"text":"digit-ui-internals","type":"text","marks":[{"type":"code"}]},{"text":" modules.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Customizations","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"View","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Services","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Build and deploy scripts","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Dockerfile & nginx.conf","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"build-config.yaml","type":"text"}]}]}]}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"width":944,"id":"d3c0041e-1b55-4574-b93e-e0a77e5838d8","collection":"contentId-1555956005","type":"file","height":923}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"CSS Library","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-left","width":25.0},"content":[{"type":"media","attrs":{"width":158,"id":"684e7a58-ee0a-4886-a970-00a4707716f1","collection":"contentId-1555956005","type":"file","height":267}}]},{"type":"paragraph","content":[{"text":"The CSS Library will have all the classes both in the module and compiled form.","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Can be imported like","type":"text"}]},{"type":"codeBlock","content":[{"text":"import \"@egovernments/digit-ui.css/Button\"","type":"text"}]},{"type":"paragraph","content":[{"text":"or like this for full CSS import","type":"text"}]},{"type":"codeBlock","content":[{"text":"import \"@egovernments/digit-ui.css\"","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Libraries","type":"text"}]},{"type":"paragraph","content":[{"text":"Component Library will have the set of all the required components defined in them.","type":"text"}]},{"type":"codeBlock","content":[{"text":"# Atoms\n\n\n\n\n\n\n# Molecules\n\n \n\n\n\n\n\n \n \n\n\n","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Utils Library","type":"text"}]},{"type":"paragraph","content":[{"text":"This will have the followings:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Workflows","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"API handling - API caching and handling strategies will be here, imported, and shared by all modules. Published as a function, can be used by anyone.","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"import { fetchAPI } from '@egovernments/digit-utils'\n\nasync function searchProperty() {\n const { data, error } = await fetchAPI(\"/api/searchProperty\");\n if (error) return \"\";\n return data;\n}","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Internationalization (i18n)","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getConfig","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"This will be like MDMS config service","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The default and state configs will be stored on GitHub.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getConfig will fetch the latest config on runtime and initiate the module.","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"default config:","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n \"name\": \"create_complaint\",\n \"action\": \"createComplaint\",\n \"init\": \"newComplaintInit\",\n \"saveUrl\": \"/rainmaker-pgr/v1/requests/_create\",\n \"redirectionRoute\":\"/complaint-submitted\",\n \"fields\": [{\n \"id\": \"city\",\n \"name\": \"city\",\n \"type\": \"dropdown\",\n \"labelText\": \"{{i18n.CORE_COMMON_CITY}}\",\n \"hintText\": \"{{i18n.CS_CREATECOMPLAINT_SELECT_PLACEHOLDER}}\",\n \"errMessage\": \"{{i18n.CS_ADDCOMPLAINT_COMPLAINT_TYPE_PLACEHOLDER}}\",\n \"required\": true,\n \"action\": \"createComplaint.updateDependentFields\"\n }, {\n \"id\": \"address\",\n \"name\": \"address\",\n \"type\": \"input-textarea\",\n \"labelText\": \"{{i18n.CS_ADDCOMPLAINT_LOCATION}}\",\n \"hintText\": \"{{i18n.CS_COMPLAINT_DETAILS_LOCATION}}\",\n \"errMessage\": \"\",\n \"action\": \"\"\n }, {\n \"id\": \"media\",\n \"name\": \"media\",\n \"type\": \"input-file\",\n \"errMessage\": \"{{i18n.CS_FILE_UPLOAD_FAILED}}\",\n \"action\": \"\"\n }],\n \"buttons\": [{\n \"id\": \"addComplaint-submit-complaint\",\n \"name\": \"submit\",\n \"labelText\": \"{{i18n.CS_ADDCOMPLAINT_ADDITIONAL_DETAILS_SUBMIT_COMPLAINT}}\",\n \"action\": \"createComplaint.submit\"\n }]\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"state config:","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n \"name\": \"create_complaint\",\n \"redirectionRoute\":\"__delete__\",\n \"saveUrl\": \"__delete__\",\n \"fields\": [{\n \"__action__\": \"insert_after\",\n \"__property__\": \"address\",\n \"id\": \"landmark\",\n \"name\": \"landmark\",\n \"type\": \"input-text\",\n \"labelText\": \"{{i18n.CS_ADDCOMPLAINT_LANDMARK}}\",\n \"hintText\": \"{{i18n.CS_ADDCOMPLAINT_LANDMARK_PLACEHOLDER}}\",\n \"errMessage\": \"{{i18n.PT_LANDMARK_ERROR_MESSAGE}}\",\n \"action\": \"\",\n }, {\n \"__action__\": \"update\",\n \"id\": \"address\",\n \"labelText\": \"{{i18n.CS_ADDCOMPLAINT_LOCATION}}\",\n \"hintText\": \"{{i18n.CS_COMPLAINT_DETAILS_LOCATION}}\",\n }]\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"getConfig:","type":"text"}]},{"type":"codeBlock","content":[{"text":"# @egovernments/digit-utils\nexports.getConfig = async (state, module = \"\", screen = \"\") => {\n let path = state;\n if (module) {\n path = `${path}.${module}`;\n if (screen) {\n path = `${path}.${screen}`\n }\n }\n const { data, error } = await fetchAPI(`/api/_get?config=${path}`)\n if (error) return {};\n return data;\n}\n\n# Module\nimport { getConfig } from '@egovernments/digit-utils'\n\nconst compaintConfig = getConfig(\"pb\", \"pgr\", \"create_complaint\");","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Modules","type":"text"}]},{"type":"paragraph","content":[{"text":"The module will be a black box for the states, they will only access throw ","type":"text"},{"text":"node_modules","type":"text","marks":[{"type":"code"}]},{"text":" or ","type":"text"},{"text":"CDN","type":"text","marks":[{"type":"code"}]},{"text":". Any state-specific components can be passed during the initialization of the module inside the state’s employee or citizen app.","type":"text"}]},{"type":"paragraph","content":[{"text":"The modules structure will look like:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-left","width":30.0},"content":[{"type":"media","attrs":{"width":254,"id":"9ba65e76-e6d5-46c2-b45c-a658af924ec9","collection":"contentId-1555956005","type":"file","height":566}}]},{"type":"paragraph","content":[{"text":"The module code is in ","type":"text"},{"text":"src","type":"text","marks":[{"type":"code"}]},{"text":" and an ","type":"text"},{"text":"example","type":"text","marks":[{"type":"code"}]},{"text":" is created to show how it will be imported in the core app and can be modified at the state level.","type":"text"}]},{"type":"paragraph","content":[{"text":"The components passed to the module from the core app are:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"components ","type":"text","marks":[{"type":"strong"}]},{"text":"(optional): Any custom component that is created outside of module scope.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"onRouteChange","type":"text","marks":[{"type":"strong"}]},{"text":": This is a callback function that will be called by the module itself to alert the core app about the route changes so the sidebar handler can change the active item.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"theme ","type":"text","marks":[{"type":"strong"}]},{"text":"(optional): This is a set of CSS variables which states can modify to change the theme of the module.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Eg, PGRModule:","type":"text"}]},{"type":"codeBlock","content":[{"text":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-rdux';\nimport { getConfig } from '@egovernments/digit-utils';\n\nimport configureStore from './store';\nimport applyTheme from \"./utils/theme\";\n\nimport PGRApp from './App';\n\nconst PGRModule = ({ config, components, onRouteChange, theme }) => {\n applyTheme(theme);\n return \n \n \n}\n\nfunction initPGR = ({ state, element, components, onRouteChange, theme = {} }) => {\n getConfig(state, \"pgr\").then(config => {\n ReactDOM.render(\n ,\n document.getElementById(element));\n })\n}\n\nexport default initPGR","type":"text"}]},{"type":"paragraph","content":[{"text":"Modules will have the followings inbuilt","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Theme - this may change if we later decide to use any ","type":"text"},{"text":"css-in-js","type":"text","marks":[{"type":"code"}]},{"text":" library, like ","type":"text"},{"text":"styled-components","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Components","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Routes","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"State management","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Business logic","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"API integrations","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Employee / Citizen App","type":"text"}]},{"type":"paragraph","content":[{"text":"The app will import the developed module.","type":"text"}]},{"type":"codeBlock","content":[{"text":"import './index.css'\n\nimport { initPGR } from '@egovernments/pgr-module';\nimport punjabLogo from './assets/logo.png'\n\nconst theme = {\n \"--primary-color\": \"#3f51b5\",\n \"--text-color\": \"#212121\"\n}\n\nconst PGRComponents = {\n \"logo\": punjabLogo\n}\n\nconst initPunjabPGR = (onRouteChange) =>\n initPGR({\n state: \"pb\",\n element: \"#appWrapper\",\n components: PGRComponents,\n onRouteChange, theme\n });\n\nexport default initPunjabPGR;","type":"text"}]},{"type":"paragraph","content":[{"text":"Another method will be importing from ","type":"text"},{"text":"CDN","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","content":[{"text":"import './index.css'\nimport punjabLogo from './assets/logo.png'\n\nconst theme = {\n \"--primary-color\": \"#3f51b5\",\n \"--text-color\": \"#212121\"\n}\n\nconst PGRComponents = {\n \"logo\": punjabLogo\n}\n\nconst initPunjabPGR = (onRouteChange) => {\n import(\"https://unpkg.com/@egovernments/pgr-module\").then(({ initPGR }) => {\n initPGR({\n state: \"pb\",\n element: \"#appWrapper\",\n components: PGRComponents,\n onRouteChange, theme\n })\n })\n}\nexport default initPunjabPGR;","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"At the next phase, the Employee and Citizen app can be rewritten to be a single app with role and permissions based rendering.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"Prerequisite reference study materials","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/DD/pages/2269085701"}}]}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://digit-discuss.atlassian.net/wiki/spaces/DD/pages/2088009739"}},{"text":" ","type":"text"},{"type":"hardBreak"}]}],"version":1}