diff --git a/micro-ui/web/packages/pgr/.browserslistrc b/micro-ui/web/packages/pgr/.browserslistrc new file mode 100644 index 00000000000..3f6b839b784 --- /dev/null +++ b/micro-ui/web/packages/pgr/.browserslistrc @@ -0,0 +1,3 @@ +>1% +last 4 versions +not ie >= 0 \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/.gitignore b/micro-ui/web/packages/pgr/.gitignore new file mode 100644 index 00000000000..9b889191a39 --- /dev/null +++ b/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/ \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/.prettierrc b/micro-ui/web/packages/pgr/.prettierrc new file mode 100644 index 00000000000..1502887d63f --- /dev/null +++ b/micro-ui/web/packages/pgr/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "es5" +} \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/babel.config.js b/micro-ui/web/packages/pgr/babel.config.js new file mode 100644 index 00000000000..8eda9092efe --- /dev/null +++ b/micro-ui/web/packages/pgr/babel.config.js @@ -0,0 +1,11 @@ +module.exports = { + presets: [ + [ + '@babel/preset-react', + { + runtime: 'automatic', + }, + ], + '@babel/preset-env', + ], +}; \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/package.json b/micro-ui/web/packages/pgr/package.json index 5e422103bdd..d53abd6fc94 100644 --- a/micro-ui/web/packages/pgr/package.json +++ b/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" } } diff --git a/micro-ui/web/packages/pgr/src/career.css b/micro-ui/web/packages/pgr/src/career.css new file mode 100644 index 00000000000..636fc080894 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/src/lib/prefix-classes.js b/micro-ui/web/packages/pgr/src/lib/prefix-classes.js new file mode 100644 index 00000000000..10e1825ebc3 --- /dev/null +++ b/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(' '); +}; \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/src/pages/employee/CreateComplaint/index.js b/micro-ui/web/packages/pgr/src/pages/employee/CreateComplaint/index.js index a62144dc8df..d3461cdbe38 100644 --- a/micro-ui/web/packages/pgr/src/pages/employee/CreateComplaint/index.js +++ b/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 = [ diff --git a/micro-ui/web/packages/pgr/src/styles.tw.css b/micro-ui/web/packages/pgr/src/styles.tw.css new file mode 100644 index 00000000000..bd6213e1dfe --- /dev/null +++ b/micro-ui/web/packages/pgr/src/styles.tw.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/tailwind.config.js b/micro-ui/web/packages/pgr/tailwind.config.js new file mode 100644 index 00000000000..47fd5f13111 --- /dev/null +++ b/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: [], +}; \ No newline at end of file diff --git a/micro-ui/web/packages/pgr/webpack.common.js b/micro-ui/web/packages/pgr/webpack.common.js index 6fe7bf190f7..1263ae5b0d9 100644 --- a/micro-ui/web/packages/pgr/webpack.common.js +++ b/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", diff --git a/micro-ui/web/packages/pgr/webpack.dev.js b/micro-ui/web/packages/pgr/webpack.dev.js index c65a8ff63c7..44596213e28 100644 --- a/micro-ui/web/packages/pgr/webpack.dev.js +++ b/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); diff --git a/micro-ui/web/packages/pgr/webpack.prod.js b/micro-ui/web/packages/pgr/webpack.prod.js index c7003f3a8a4..b982bc4ab5a 100644 --- a/micro-ui/web/packages/pgr/webpack.prod.js +++ b/micro-ui/web/packages/pgr/webpack.prod.js @@ -2,7 +2,9 @@ const { merge } = require("webpack-merge"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 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 prodConfig = { mode: "production", @@ -25,7 +27,19 @@ module.exports = () => { 'react-query': { singleton: true }, }, }), - ], + new MiniCssExtractPlugin( + false + ? { + filename: 'static/css/[name].[contenthash].css', + chunkFilename: 'static/css/[name].[contenthash].css', + } + : {} + ), + ].filter(Boolean), + optimization: { + minimize: true, //true if prod + minimizer: ['...', new CssMinimizerPlugin()], + }, }; return merge(commonConfig, prodConfig);