Mf build new module - Common Module (#146)

* common module mfe init

* Common module stable

* Common module stabilized and removed fsm dependency

micro-ui/web/.env

@@ -1,4 +1,4 @@
-PRODUCTION_DOMAIN=https://design-egov.github.io
+PRODUCTION_DOMAIN=https://unified-dev.digit.org
 REACT_APP_NAME=Core
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_USER_TYPE=EMPLOYEE
@@ -8,4 +8,4 @@ REACT_APP_PROXY_API=https://unified-dev.digit.org
 REACT_APP_PROXY_ASSETS=https://unified-dev.digit.org
 REACT_APP_GLOBAL=https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigsWorkbench.js
 NODE_TLS_REJECT_UNAUTHORIZED=0;
-REACT_APP_PORT=8000
+REACT_APP_PORT=8000

micro-ui/web/lerna.json

@@ -5,7 +5,8 @@
     "packages/core",
     "packages/workbench",
     "packages/ui-core",
-    "packages/app1"
+    "packages/app1",
+    "packages/common"
   ],
   "command": {
     "run": {

micro-ui/web/package.json

@@ -19,7 +19,8 @@
     "packages/core",
     "packages/workbench",
     "packages/ui-core",
-    "packages/app1"
+    "packages/app1",
+    "packages/common"
   ],
   "scripts": {
     "build": "yarn lerna run build",
@@ -32,6 +33,7 @@
     "start:workbench": "cd packages/workbench && yarn start"
   },
   "dependencies": {
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.3.1",
+    "yarn": "^1.22.21"
   }
-}
+}

micro-ui/web/packages/common/README.md

@@ -0,0 +1,87 @@
+<!-- TODO: update this -->
+
+# digit-ui-module-common
+
+## Install
+
+```bash
+npm install --save @egovernments/digit-ui-module-common
+```
+
+## Limitation
+
+```bash
+This Package is more specific to DIGIT-UI's can be used across mission's for Payments
+```
+
+## Usage
+
+After adding the dependency make sure you have this dependency in
+
+```bash
+frontend/micro-ui/web/package.json
+```
+
+```json
+"@egovernments/digit-ui-module-common":"^1.5.0",
+```
+
+then navigate to App.js
+
+```bash
+ frontend/micro-ui/web/src/App.js
+```
+
+
+```jsx
+/** add this import **/
+
+import { paymentConfigs, PaymentLinks, PaymentModule } from "@egovernments/digit-ui-module-common";
+
+/** inside enabledModules add this new module key **/
+
+const enabledModules = ["Payment"];
+
+/** inside init Function call this function **/
+
+const initDigitUI = () => {
+  window?.Digit.ComponentRegistryService.setupRegistry({
+    PaymentModule,
+    ...paymentConfigs,
+    PaymentLinks,
+  });
+};
+```
+
+### Changelog
+
+```bash
+1.8.0 workbench v1.0 
+1.8.0-beta workbench base version beta release
+1.7.0 urban 2.9
+1.6.0 urban 2.8
+1.5.31 updated the readme content
+1.5.30 Fixes mannual receipt date range validation, Cheque and card number validation for FSM
+1.5.29 version upgraded for fixes in payment modules
+1.5.28 base version
+```
+
+### Contributors
+
+[jagankumar-egov] [Tulika-eGov] [vamshikrishnakole-wtt-egov] [nabeelmd-eGov] [anil-egov] 
+
+
+## Documentation
+
+Documentation Site (https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui)
+
+## Maintainer
+
+- [jagankumar-egov](https://www.github.com/jagankumar-egov)
+
+
+### Published from DIGIT Frontend 
+DIGIT Frontend Repo (https://github.com/egovernments/Digit-Frontend/tree/master)
+
+
+![Logo](https://s3.ap-south-1.amazonaws.com/works-dev-asset/mseva-white-logo.png)

micro-ui/web/packages/common/docker/Dockerfile

@@ -0,0 +1,40 @@
+# Use Node.js base image with version 16
+FROM node:16 AS build
+
+# Set working directory
+WORKDIR /app
+
+# Set build arguments
+ARG BRANCH_NAME
+ARG ACTION_NUMBER
+ARG COMMIT_ID
+
+# Set environment variables based on build arguments
+ENV BRANCH_NAME=$BRANCH_NAME
+ENV ACTION_NUMBER=$ACTION_NUMBER
+ENV COMMIT_ID=$COMMIT_ID
+
+# Copy package.json and yarn.lock (if exists)
+COPY package.json ./
+
+# Install dependencies
+RUN yarn install
+
+# Optionally, you can add a label with the commit ID
+LABEL commit_id=$COMMIT_ID
+
+# Copy the rest of the application
+COPY . .
+
+# Build the React app with Webpack
+RUN yarn build
+
+FROM nginx:mainline-alpine
+
+ENV WORK_DIR=/var/web/core-digit-ui
+
+RUN mkdir -p ${WORK_DIR}
+
+
+COPY --from=build /app/dist ${WORK_DIR}/
+COPY --from=build /app/docker/nginx.conf /etc/nginx/conf.d/default.conf

micro-ui/web/packages/common/docker/nginx.conf

@@ -0,0 +1,12 @@
+server
+{
+  listen 80;
+  underscores_in_headers on;
+
+  location /core-digit-ui
+  {
+    root /var/web;
+    index index.html index.htm;
+    try_files $uri $uri/ /core-digit-ui/index.html;
+  }
+}

micro-ui/web/packages/common/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@digit-ui/digit-ui-module-common-mfe",
+  "version": "1.8.0",
+  "license": "ISC",
+  "main": "index.js",
+  "scripts": {
+    "predeploy": "yarn build",
+    "deploy": "gh-pages -d dist",
+    "start": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "dependencies": {
+    "@egovernments/digit-ui-react-components": "1.4.106",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-hook-form": "6.15.8",
+    "react-i18next": "11.16.2",
+    "react-query": "3.6.1",
+    "react-router-dom": "5.2.0",
+    "single-spa-react": "^4.6.1",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1",
+    "webpack-merge": "5.7.3"
+  },
+  "devDependencies": {
+    "@babel/core": "7.12.10",
+    "@babel/preset-react": "7.12.10",
+    "babel-loader": "8.2.2",
+    "gh-pages": "^5.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "babel-plugin-react-html-attrs": "^3.0.5",
+    "@babel/preset-env":"7.23.9"
+  },
+  "author": ""
+}

micro-ui/web/packages/common/public/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Common Module Page</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
+        "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
+
+  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap" rel="stylesheet" />
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: "Oxygen", sans-serif;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="common-module-root"></div>
+
+</body>
+
+</html>

micro-ui/web/packages/common/src/CommonWrapper.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { QueryClientProvider } from 'react-query';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { PaymentModule } from './payments';
+const App = ({ queryClient, title }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <PaymentModule path={'/workbench-ui/employee/common'} stateCode={"pg"} cityCode={"citya"} moduleCode={"Payment"} userType={"employee"}  />
+      </Router>
+       {/* <div>Common module running thru host {title}</div> */}
+    </QueryClientProvider>
+  );
+};
+
+export default App;

micro-ui/web/packages/common/src/Module.js

@@ -0,0 +1 @@
+export * from "./payments";

micro-ui/web/packages/common/src/SingleSpaEntry.js

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import App from "./CommonWrapper";
+const appLifeCycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: App,
+  errorBoundary() {
+    // https://reactjs.org/docs/error-boundaries.html
+    return <div>This renders when a catastrophic error occurs</div>;
+  },
+});
+
+export function bootstrap(props) {
+  return appLifeCycles.bootstrap(props);
+}
+
+export function mount(props) {
+  return appLifeCycles.mount(props);
+}
+
+export function unmount(props) {
+  return appLifeCycles.unmount(props);
+}

micro-ui/web/packages/common/src/bootstrap.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { createBrowserHistory } from "history";
+
+const mount = (el, { history, login }) => {
+  ReactDOM.render(
+    <div>Common Module in isolation</div>,
+    el
+  );
+};
+
+if (process.env.NODE_ENV === "development") {
+  const rootNode = document.querySelector("#common-module-root");
+
+  if (rootNode) {
+    mount(rootNode, {
+      history: createBrowserHistory(),
+      login: () => {},
+    });
+  }
+}
+
+export { mount };

micro-ui/web/packages/common/src/hoc/index.js

@@ -0,0 +1,3 @@
+import { SubformComposer } from "./subform-composer";
+
+export { SubformComposer };