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

* fix(bug): removed scss loaded both in webpack config

* chore(bug): some unwanted package.json is removed

* chore(bable): babelrc is updated

* chore(node-version): node version is updated in the nvm

* chore(bug): gulp file is removed

* feat(UI): web vitals is added in the development env

frontend/.babelrc

@@ -6,7 +6,14 @@
 	],
 	"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 @@
-12.13.0
+14.18.1

frontend/gulpfile.js

@@ -1,28 +0,0 @@
-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,28 +16,16 @@
 		"jest:watch": "jest --watch"
 	},
 	"engines": {
-		"node": ">=12.13.0"
+		"node": ">=14.18.1"
 	},
 	"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",
@@ -46,9 +34,6 @@
 		"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",
@@ -63,57 +48,31 @@
 		"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",
-		"jest-circus": "26.6.0",
+		"monaco-editor": "^0.30.1",
-		"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": "^0.2.4",
+		"web-vitals": "^2.1.2",
 		"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": [
@@ -137,17 +96,25 @@
 		"@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",
@@ -161,19 +128,10 @@
 		"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

@@ -0,0 +1,7 @@
+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: [/\.jsx?$/, /\.tsx?$/],
+				test: [/\.tsx?$/],
 				use: ['babel-loader'],
 				exclude: /node_modules/,
 			},
@@ -37,10 +37,6 @@ 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,8 +2,6 @@
 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';
@@ -24,9 +22,10 @@ const config: Configuration = {
 	devServer: {
 		historyApiFallback: true,
 		open: true,
+		compress: true,
 		hot: true,
 		liveReload: true,
-		port: portFinderSync.getPort(3000),
+		port: 3000,
 		static: {
 			directory: resolve(__dirname, 'public'),
 			publicPath: '/',
@@ -50,7 +49,7 @@ const config: Configuration = {
 	module: {
 		rules: [
 			{
-				test: [/\.jsx?$/, /\.tsx?$/],
+				test: [/\.tsx?$/],
 				use: ['babel-loader'],
 				exclude: /node_modules/,
 			},
@@ -58,16 +57,9 @@ 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: [
+				use: ['file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]'],
-					'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)$/,