Revert "Bug(FE): Removed un wanted package from frontend and other enchancements (#386)" (#396)

This reverts commit 20879dcf2e997fd04d4e19a6f62d9466332a0c76.

frontend/.babelrc

@@ -6,14 +6,7 @@
 	],
 	"plugins": [
 		"react-hot-loader/babel",
-		"@babel/plugin-proposal-class-properties",
+		"@babel/plugin-proposal-class-properties"
-		[
-			"babel-plugin-styled-components",
-			{
-				"pure": true,
-				"minify": true
-			}
-		]
 	],
 	"env": {
 		"production": {

frontend/.nvmrc

@@ -1 +1 @@
-14.18.1
+12.13.0

frontend/gulpfile.js

@@ -0,0 +1,28 @@
+const gulp = require('gulp');
+const gulpless = require('gulp-less');
+const postcss = require('gulp-postcss');
+const debug = require('gulp-debug');
+var csso = require('gulp-csso');
+const autteoprefixer = require('autoprefixer');
+const NpmImportPlugin = require('less-plugin-npm-import');
+
+gulp.task('less', function () {
+	const plugins = [autteoprefixer()];
+
+	return gulp
+		.src('src/themes/*-theme.less')
+		.pipe(debug({ title: 'Less files:' }))
+		.pipe(
+			gulpless({
+				javascriptEnabled: true,
+				plugins: [new NpmImportPlugin({ prefix: '~' })],
+			}),
+		)
+		.pipe(postcss(plugins))
+		.pipe(
+			csso({
+				debug: true,
+			}),
+		)
+		.pipe(gulp.dest('./public'));
+});

frontend/package.json

@@ -16,16 +16,28 @@
 		"jest:watch": "jest --watch"
 	},
 	"engines": {
-		"node": ">=14.18.1"
+		"node": ">=12.13.0"
 	},
 	"type": "module",
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
 		"@ant-design/icons": "^4.6.2",
+		"@auth0/auth0-react": "^1.2.0",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
+		"@svgr/webpack": "5.4.0",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
+		"@types/d3": "^6.2.0",
+		"@types/jest": "^26.0.15",
+		"@types/react": "^17.0.0",
+		"@types/react-dom": "^16.9.9",
+		"@types/react-redux": "^7.1.11",
+		"@types/react-router-dom": "^5.1.6",
+		"@types/redux": "^3.6.0",
+		"@types/styled-components": "^5.1.4",
+		"@types/vis": "^4.21.21",
 		"antd": "^4.16.13",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
@@ -34,6 +46,9 @@
 		"babel-plugin-named-asset-import": "^0.3.7",
 		"babel-preset-minify": "^0.5.1",
 		"babel-preset-react-app": "^10.0.0",
+		"bfj": "^7.0.2",
+		"camelcase": "^6.1.0",
+		"case-sensitive-paths-webpack-plugin": "2.3.0",
 		"chart.js": "^3.4.0",
 		"chartjs-adapter-date-fns": "^2.0.0",
 		"css-loader": "4.3.0",
@@ -48,31 +63,57 @@
 		"eslint-plugin-jsx-a11y": "^6.3.1",
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-testing-library": "^3.9.2",
+		"eslint-webpack-plugin": "^2.1.0",
 		"file-loader": "6.1.1",
+		"fs-extra": "^9.0.1",
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.1.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "26.6.0",
-		"monaco-editor": "^0.30.1",
+		"jest-circus": "26.6.0",
+		"jest-resolve": "26.6.0",
+		"jest-watch-typeahead": "0.6.1",
+		"monaco-editor": "^0.30.0",
+		"pnp-webpack-plugin": "1.6.4",
+		"postcss-loader": "3.0.0",
+		"postcss-normalize": "8.0.1",
+		"postcss-preset-env": "6.7.0",
+		"postcss-safe-parser": "5.0.2",
+		"prop-types": "^15.6.2",
 		"react": "17.0.0",
+		"react-app-polyfill": "^2.0.0",
+		"react-chips": "^0.8.0",
+		"react-css-theme-switcher": "^0.1.6",
+		"react-dev-utils": "^11.0.0",
 		"react-dom": "17.0.0",
 		"react-force-graph": "^1.41.0",
 		"react-graph-vis": "^1.0.5",
 		"react-grid-layout": "^1.2.5",
+		"react-modal": "^3.12.1",
 		"react-redux": "^7.2.2",
 		"react-refresh": "^0.8.3",
 		"react-router-dom": "^5.2.0",
 		"react-vis": "^1.11.7",
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
+		"resolve": "1.18.1",
+		"resolve-url-loader": "^3.1.2",
+		"sass-loader": "8.0.2",
+		"semver": "7.3.2",
 		"style-loader": "1.3.0",
 		"styled-components": "^5.2.1",
+		"terser-webpack-plugin": "4.2.3",
+		"ts-node": "^10.2.1",
+		"ts-pnp": "1.2.0",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
+		"url-loader": "4.1.1",
 		"uuid": "^8.3.2",
-		"web-vitals": "^2.1.2",
+		"web-vitals": "^0.2.4",
 		"webpack": "^5.23.0",
-		"webpack-dev-server": "^4.3.1"
+		"webpack-dev-server": "^4.3.1",
+		"webpack-manifest-plugin": "2.2.0",
+		"workbox-webpack-plugin": "5.1.4"
 	},
 	"browserslist": {
 		"production": [
@@ -96,25 +137,17 @@
 		"@testing-library/cypress": "^8.0.0",
 		"@types/compression-webpack-plugin": "^9.0.0",
 		"@types/copy-webpack-plugin": "^8.0.1",
-		"@types/d3": "^6.2.0",
 		"@types/d3-tip": "^3.5.5",
-		"@types/jest": "^26.0.15",
 		"@types/lodash-es": "^4.17.4",
 		"@types/node": "^16.10.3",
-		"@types/react": "^17.0.0",
-		"@types/react-dom": "^16.9.9",
 		"@types/react-grid-layout": "^1.1.2",
-		"@types/react-redux": "^7.1.11",
-		"@types/react-router-dom": "^5.1.6",
-		"@types/redux": "^3.6.0",
-		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
-		"@types/vis": "^4.21.21",
 		"@types/webpack": "^5.28.0",
 		"@types/webpack-dev-server": "^4.3.0",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
 		"@typescript-eslint/parser": "^4.28.2",
 		"@welldone-software/why-did-you-render": "^6.2.1",
+		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "^9.0.0",
 		"copy-webpack-plugin": "^8.1.0",
@@ -128,10 +161,19 @@
 		"eslint-plugin-promise": "^5.1.0",
 		"eslint-plugin-react": "^7.24.0",
 		"eslint-plugin-simple-import-sort": "^7.0.0",
+		"gulp": "^4.0.2",
+		"gulp-csso": "^4.0.1",
+		"gulp-debug": "^4.0.0",
+		"gulp-less": "^4.0.1",
+		"gulp-postcss": "^9.0.0",
 		"husky": "4.3.8",
+		"less-plugin-npm-import": "^2.1.0",
+		"lint-staged": "10.5.3",
 		"lodash-es": "^4.17.21",
+		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
 		"react-hot-loader": "^4.13.0",
+		"react-is": "^17.0.1",
 		"ts-node": "^10.2.1",
 		"webpack-cli": "^4.5.0"
 	}

frontend/src/web-vital.ts

@@ -1,7 +0,0 @@
-import { getCLS, getFID, getLCP } from 'web-vitals';
-
-if (process.env.NODE_ENV === 'development') {
-	getCLS(console.log, true);
-	getFID(console.log, true);
-	getLCP(console.log, true);
-}

frontend/webpack.config.prod.ts

@@ -29,7 +29,7 @@ const config: webpack.Configuration = {
 	module: {
 		rules: [
 			{
-				test: [/\.tsx?$/],
+				test: [/\.jsx?$/, /\.tsx?$/],
 				use: ['babel-loader'],
 				exclude: /node_modules/,
 			},
@@ -37,6 +37,10 @@ const config: webpack.Configuration = {
 				test: /\.css$/,
 				use: ['style-loader', 'css-loader'],
 			},
+			{
+				test: /\.(scss|sass)$/,
+				use: ['style-loader', 'css-loader', 'sass-loader'],
+			},
 			{
 				test: /\.(jpe?g|png|gif|svg)$/i,
 				use: [

frontend/webpack.config.ts

@@ -2,6 +2,8 @@
 import dotenv from 'dotenv';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { resolve } from 'path';
+//@ts-ignore
+import portFinderSync from 'portfinder-sync';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import webpack from 'webpack';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
@@ -22,10 +24,9 @@ const config: Configuration = {
 	devServer: {
 		historyApiFallback: true,
 		open: true,
-		compress: true,
 		hot: true,
 		liveReload: true,
-		port: 3000,
+		port: portFinderSync.getPort(3000),
 		static: {
 			directory: resolve(__dirname, 'public'),
 			publicPath: '/',
@@ -49,7 +50,7 @@ const config: Configuration = {
 	module: {
 		rules: [
 			{
-				test: [/\.tsx?$/],
+				test: [/\.jsx?$/, /\.tsx?$/],
 				use: ['babel-loader'],
 				exclude: /node_modules/,
 			},
@@ -57,9 +58,16 @@ const config: Configuration = {
 				test: /\.css$/,
 				use: ['style-loader', 'css-loader'],
 			},
+			{
+				test: /\.(scss|sass)$/,
+				use: ['style-loader', 'css-loader', 'sass-loader'],
+			},
 			{
 				test: /\.(jpe?g|png|gif|svg)$/i,
-				use: ['file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]'],
+				use: [
+					'file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]',
+					'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
+				],
 			},
 			{
 				test: /\.(ttf|eot|woff|woff2)$/,