Custom css implemented for workbench (#198)

egovernments · Mar 8, 2024 · 01c0f6b · 01c0f6b
1 parent a013e39
commit 01c0f6b
Show file tree

Hide file tree

Showing 12 changed files with 242 additions and 4 deletions.
diff --git a/micro-ui/web/packages/workbench/.browserslistrc b/micro-ui/web/packages/workbench/.browserslistrc
@@ -0,0 +1,3 @@
+>1%
+last 4 versions
+not ie >= 0
diff --git a/micro-ui/web/packages/workbench/.gitignore b/micro-ui/web/packages/workbench/.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/
diff --git a/micro-ui/web/packages/workbench/.prettierrc b/micro-ui/web/packages/workbench/.prettierrc
@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5"
+}
diff --git a/micro-ui/web/packages/workbench/babel.config.js b/micro-ui/web/packages/workbench/babel.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-env',
+  ],
+};
diff --git a/micro-ui/web/packages/workbench/package.json b/micro-ui/web/packages/workbench/package.json
@@ -7,7 +7,8 @@
     "predeploy": "yarn build",
     "deploy": "gh-pages -d dist",
     "start": "webpack serve --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js"
+    "build": "webpack --config webpack.dev.js",
+    "build:dev": "webpack --config webpack.dev.js --mode development"
   },
   "homepage": "http://design-egov.github.io/auth",
   "keywords": [],
@@ -20,7 +21,25 @@
     "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"
+    "@babel/preset-env":"7.23.9",
+    "autoprefixer": "^10.4.13",
+    "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",
+    "mini-css-extract-plugin": "^2.7.2",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-loader": "^7.0.2",
+    "postcss-prefixer": "^2.1.3",
+    "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"
   },
   "dependencies": {
     "single-spa-react": "^4.6.1",
@@ -41,6 +60,9 @@
     "webpack": "^5.68.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.8.1",
-    "webpack-merge": "5.7.3"
+    "webpack-merge": "5.7.3",
+    "@heroicons/react": "^1.0.1",
+    "@mkeeorg/federation-ui": "^1.3.0",
+    "classnames": "^2.3.2"
   }
 }
diff --git a/micro-ui/web/packages/workbench/src/career.css b/micro-ui/web/packages/workbench/src/career.css
@@ -0,0 +1,3 @@
+.careerTitle {
+  @apply text-3xl mb-6 text-center font-bold sm:text-5xl;
+}
diff --git a/micro-ui/web/packages/workbench/src/lib/prefix-classes.js b/micro-ui/web/packages/workbench/src/lib/prefix-classes.js
@@ -0,0 +1,22 @@
+/**
+ *
+ * @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(' ');
+};
diff --git a/micro-ui/web/packages/workbench/src/pages/employee/MDMSSearchv2.js b/micro-ui/web/packages/workbench/src/pages/employee/MDMSSearchv2.js
@@ -5,6 +5,11 @@ import { useHistory, useParams } from "react-router-dom";
 import { Config as Configg } from "../../configs/searchMDMSConfig";
 import _, { drop } from "lodash";
 
+//importing css modularization stuff
+import './../../styles.tw.css';
+import './../../career.css';
+import { prefixClasses as cx } from './../../lib/prefix-classes'
+
 const toDropdownObj = (master = "", mod = "") => {
   return {
     name: mod || master,
@@ -138,6 +143,8 @@ const MDMSSearchv2 = () => {
   if (isLoading) return <Loader />;
   return (
     <React.Fragment>
+      <h1 className="careerTitle">CSS Modularization 1</h1>
+      <div className={cx('underline decoration-sky-500')}>CSS Modularization 2</div>
         <Header className="works-header-search">{t(Config?.label)}</Header>
       <div className="jk-header-btn-wrapper">
         <Dropdown

diff --git a/micro-ui/web/packages/workbench/src/styles.tw.css b/micro-ui/web/packages/workbench/src/styles.tw.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/micro-ui/web/packages/workbench/tailwind.config.js b/micro-ui/web/packages/workbench/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/micro-ui/web/packages/workbench/webpack.common.js b/micro-ui/web/packages/workbench/webpack.common.js
@@ -1,4 +1,5 @@
 const path = require("path");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   entry: "./src/index",
@@ -8,6 +9,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/workbench/webpack.dev.js b/micro-ui/web/packages/workbench/webpack.dev.js
@@ -1,8 +1,13 @@
+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 = {
@@ -37,6 +42,7 @@ module.exports = () => {
       server:"https", //Enable HTTPS
     },
     plugins: [
+      new ExternalRemotesPlugin(),
       new ModuleFederationPlugin({
         name: "workbench",
         filename: "remoteEntry.js",
@@ -48,7 +54,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);