css for pgr fixed

micro-ui/web/packages/pgr/.browserslistrc

@@ -0,0 +1,3 @@
+>1%
+last 4 versions
+not ie >= 0

micro-ui/web/packages/pgr/.gitignore

@@ -0,0 +1,63 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+dist/
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# Serverless directories
+.serverless/

micro-ui/web/packages/pgr/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

micro-ui/web/packages/pgr/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-env',
+  ],
+};

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

@@ -16,32 +16,57 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "7.12.10",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.12.10",
+    "autoprefixer": "^10.4.13",
     "babel-loader": "8.2.2",
+    "babel-plugin-react-html-attrs": "^3.0.5",
+    "cross-env": "^7.0.2",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "dotenv": "^16.0.3",
+    "external-remotes-plugin": "^1.0.0",
     "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",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
+    "mini-css-extract-plugin": "^2.9.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^10.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-prefixer": "^3.0.0",
+    "regex-escape": "^3.4.10",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.7",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "5.7.3"
   },
   "dependencies": {
-    "single-spa-react": "^4.6.1",
     "@digit-ui/digit-ui-libraries-mfe": "1.0.17",
+    "@digit-ui/digit-ui-react-components": "1.0.1",
+    "@heroicons/react": "^1.0.1",
+    "@mkeeorg/federation-ui": "^1.3.0",
+    "@rjsf/core": "5.10.0",
+    "@rjsf/utils": "5.10.0",
+    "@rjsf/validator-ajv8": "5.10.0",
+    "classnames": "^2.3.2",
+    "lodash.merge": "^4.6.2",
     "react": "17.0.2",
     "react-date-range": "1.4.0",
     "react-dom": "17.0.2",
     "react-hook-form": "6.15.8",
     "react-i18next": "11.16.2",
     "react-query": "3.6.1",
+    "react-redux": "7.2.8",
     "react-router-dom": "5.3.0",
     "react-select": "5.7.4",
-    "react-redux": "7.2.8",
     "redux": "4.1.2",
     "redux-thunk": "^2.4.2",
-    "@digit-ui/digit-ui-react-components": "1.0.1",
-    "lodash.merge": "^4.6.2"
+    "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"
   }
 }

micro-ui/web/packages/pgr/src/career.css

@@ -0,0 +1,35 @@
+.careerTitle {
+  @apply text-3xl mb-6 text-center font-bold sm:text-5xl;
+}
+
+
+.employeeCard {
+
+  margin-left: 5.5em;
+}
+.h1 
+{
+  margin-left:2.5em;
+}
+.employee-app-wrapper
+{
+  min-height:0;
+}
+.body-container
+{
+  display:contents;
+}
+.employee .ground-container
+{
+  margin-bottom: 0px;
+}
+.bread-crumb 
+{
+  margin-left:6.1em;
+}
+.inbox-container .filters-container {
+  margin-left: 6em;
+}
+.documentDetails_wrapper {
+  margin-left: 5em;
+}

micro-ui/web/packages/pgr/src/lib/prefix-classes.js

@@ -0,0 +1,23 @@
+
+/**
+ *
+ * @param  {...string} cls
+ *
+ * @returns {string}
+ */
+export const prefixClasses = (...cls) => {
+  /**
+   * @type {string[]}
+   */
+  const result = [];
+
+  cls.forEach((maybeClass) => {
+    if (maybeClass && typeof maybeClass === 'string') {
+      maybeClass
+        .split(' ')
+        .forEach((singleClass) => result.push(`cr-${singleClass}`));
+    }
+  });
+
+  return result.join(' ');
+};

micro-ui/web/packages/pgr/src/pages/employee/CreateComplaint/index.js

@@ -7,7 +7,9 @@ import { useQueryClient } from "react-query";
 
 import { FormComposer } from "../../../components/FormComposer";
 import { createComplaint } from "../../../redux/actions/index";
-
+import '../../../career.css';
+import '../../../styles.tw.css';
+import { prefixClasses as cx } from "../../../../../engagement/src/lib/prefix-classes";
 export const CreateComplaint = ({ parentUrl }) => {
 
   const cities = [

micro-ui/web/packages/pgr/src/styles.tw.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

micro-ui/web/packages/pgr/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

micro-ui/web/packages/pgr/webpack.common.js

@@ -1,5 +1,5 @@
 const path = require("path");
-
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   entry: "./src/SingleSpaEntry.js",
   resolve: {
@@ -8,6 +8,79 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.css$/i,
+        oneOf: [
+          {
+            test: /\.tw\.css$/i,
+            use: [
+              {
+                loader: MiniCssExtractPlugin.loader,
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  importLoaders: 1,
+                  modules: {
+                    auto: true,
+                    localIdentName: false
+                      ? '[hash:base64]'
+                      : '[path][name]__[local]',
+                  },
+                },
+              },
+              {
+                loader: 'postcss-loader',
+                options: {
+                  sourceMap: true,
+                  postcssOptions: {
+                    plugins: {
+                      tailwindcss: {},
+                      autoprefixer: {},
+                      'postcss-prefixer': {
+                        prefix: 'cr-',
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            use: [
+              {
+                loader: MiniCssExtractPlugin.loader,
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  importLoaders: 1,
+                  modules: {
+                    auto: true,
+                    localIdentName: false
+                      ? '[hash:base64]'
+                      : '[path][name]__[local]',
+                  },
+                },
+              },
+              {
+                loader: 'postcss-loader',
+                options: {
+                  sourceMap: true,
+                  postcssOptions: {
+                    plugins: {
+                      tailwindcss: {},
+                      autoprefixer: {},
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
       {
         test: /\.js?$/,
         loader: "babel-loader",

micro-ui/web/packages/pgr/webpack.dev.js

@@ -1,9 +1,12 @@
+require('dotenv').config();
 const { merge } = require("webpack-merge");
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const commonConfig = require("./webpack.common");
 const packageJson = require("./package.json");
-
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ExternalRemotesPlugin = require('external-remotes-plugin');
 module.exports = () => {
   const devConfig = {
     mode: "development",
@@ -37,6 +40,7 @@ module.exports = () => {
       server:"https", //Enable HTTPS
     },
     plugins: [
+      new ExternalRemotesPlugin(),
       new ModuleFederationPlugin({
         name: "pgr",
         filename: "remoteEntry.js",
@@ -53,7 +57,19 @@ module.exports = () => {
       new HtmlWebpackPlugin({
         template: "./public/index.html",
       }),
-    ],
+      new MiniCssExtractPlugin(
+        false
+          ? {
+              filename: 'static/css/[name].[contenthash].css',
+              chunkFilename: 'static/css/[name].[contenthash].css',
+            }
+          : {}
+      ),
+    ].filter(Boolean),
+    optimization: {
+      minimize: false, //true if prod
+      minimizer: ['...', new CssMinimizerPlugin()],
+    },
   };
 
   return merge(commonConfig, devConfig);