Removed ESLint, removed fs, react-colors impr

client/src/pages/config/users/configman.jsx

@@ -21,19 +21,18 @@ import {
 import RestartModal from './restart';
 import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
 import { CosmosCheckbox, CosmosFormDivider, CosmosInputPassword, CosmosInputText, CosmosSelect } from './formShortcuts';
-import CountrySelect from '../../../components/countrySelect';
 import { DnsChallengeComp } from '../../../utils/dns-challenge-comp';
+import CountrySelect from '../../../components/countrySelect';
 
+import { LoadingButton } from '@mui/lab';
 import UploadButtons from '../../../components/fileUpload';
-import { SliderPicker
+import SliderPicker from 'react-color/lib/components/slider/Slider';
- } from 'react-color';
- import { LoadingButton } from '@mui/lab';
 
- // TODO: Remove circular deps
+// TODO: Remove circular deps
- import {SetPrimaryColor, SetSecondaryColor} from '../../../App';
+import {SetPrimaryColor, SetSecondaryColor} from '../../../App';
 import { useClientInfos } from '../../../utils/hooks';
-import ConfirmModal from '../../../components/confirmModal';
 import { DownloadFile } from '../../../api/downloadButton';
+import ConfirmModal from '../../../components/confirmModal';
 
 const ConfigManagement = () => {
   const [config, setConfig] = React.useState(null);

client/src/pages/constellation/vpn.jsx

@@ -71,8 +71,8 @@ export const ConstellationVPN = () => {
         <Alert severity="info">
           Constellation is a VPN that runs inside your Cosmos network. It automatically
           connects all your devices together, and allows you to access them from anywhere.
-          Please refer to the <a href="https://cosmos-cloud.io/doc/61 Constellation VPN/" target="_blank">documentation</a> for more information.
+          Please refer to the <a href="https://cosmos-cloud.io/doc/61 Constellation VPN/" target="_blank" rel="noreferrer">documentation</a> for more information.
-          In order to connect, please use the <a href="https://cosmos-cloud.io/clients" target="_blank">Constellation App</a>.
+          In order to connect, please use the <a href="https://cosmos-cloud.io/clients" target="_blank" rel="noreferrer">Constellation App</a>.
           Constellation is currently free to use until the end of the beta, planned January 2024.
         </Alert>
         <MainCard title={"Constellation Setup"} content={config.constellationIP}>

client/src/pages/dashboard/components/mini-plot.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo  } from 'react';
+import React, { useEffect, useState, useMemo , lazy } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 // material-ui
@@ -23,7 +23,7 @@ import {
 import MainCard from '../../../components/MainCard';
 
 // third-party
-import ReactApexChart from 'react-apexcharts';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 import { FormaterForMetric, formatDate, toUTC } from './utils';
 
 import * as API from '../../../api';

client/src/pages/dashboard/components/plot.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, lazy } from 'react';
 // material-ui
 import {
   Avatar,
@@ -21,8 +21,8 @@ import {
 import MainCard from '../../../components/MainCard';
 
 // third-party
-import ReactApexChart from 'react-apexcharts';
 import { FormaterForMetric, toUTC } from './utils';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 
 
 const PlotComponent = ({ title, slot, data, SimpleDesign, withSelector, xAxis, zoom, setZoom, zoomDisabled }) => {

client/src/pages/dashboard/components/table.jsx

@@ -32,8 +32,6 @@ import {
 import MainCard from '../../../components/MainCard';
 
 // third-party
-import ReactApexChart from 'react-apexcharts';
-import { object } from 'prop-types';
 import { FormaterForMetric } from './utils';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import PlotComponent from './plot';

client/src/pages/home/index.jsx

@@ -1,7 +1,7 @@
 import { useParams } from "react-router";
 import Back from "../../components/back";
 import { Alert, Box, CircularProgress, Grid, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useEffect, useState, lazy } from "react";
 import * as API from "../../api";
 import wallpaper from '../../assets/images/wallpaper2.jpg';
 import wallpaperLight from '../../assets/images/wallpaper2_light.jpg';
@@ -11,10 +11,10 @@ import { Link } from "react-router-dom";
 import { getFullOrigin } from "../../utils/routes";
 import IsLoggedIn from "../../isLoggedIn";
 import { ServAppIcon } from "../../utils/servapp-icon";
-import Chart from 'react-apexcharts';
 import { useClientInfos } from "../../utils/hooks";
 import { FormaterForMetric, formatDate } from "../dashboard/components/utils";
 import MiniPlotComponent from "../dashboard/components/mini-plot";
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 
 
 export const HomeBackground = () => {
@@ -394,7 +394,7 @@ const HomePage = () => {
                                 <div>{coStatus.AVX ? "AVX Supported" : "No AVX Support"}</div>
                                 </Stack>
                                 <div style={{height: '97px'}}>
-                                    <Chart
+                                    <ReactApexChart
                                         options={optionsRadial}
                                         // series={[parseInt(
                                         //     coStatus.resources.ram / (coStatus.resources.ram + coStatus.resources.ramFree) * 100
@@ -417,7 +417,7 @@ const HomePage = () => {
                                     <div>used: <strong>{latestRAM}</strong></div>
                                 </Stack>
                                 <div style={{height: '97px'}}>
-                                    <Chart
+                                    <ReactApexChart
                                         options={optionsRadial}
                                         // series={[parseInt(
                                         //     coStatus.resources.ram / (coStatus.resources.ram + coStatus.resources.ramFree) * 100

client/src/pages/market/listing.jsx

@@ -1,7 +1,7 @@
 import { Box, CircularProgress, Input, InputAdornment, Stack, Tooltip } from "@mui/material";
 import { HomeBackground, TransparentHeader } from "../home";
 import { useEffect, useState } from "react";
-import * as API from "../../api";
+import { market } from "../../api";
 import { useTheme } from "@emotion/react";
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
 import { useParams } from "react-router";
@@ -147,7 +147,7 @@ const MarketPage = () => {
   };
 
   const refresh = () => {
-    API.market.list().then((res) => {
+    market.list().then((res) => {
       setApps(res.data.all);
       setShowcase(res.data.showcase);
     });

client/src/pages/newInstall/newInstall.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 import { Link } from 'react-router-dom';
 
 import * as Yup from 'yup';

client/src/pages/servapps/containers/docker-compose.jsx

@@ -7,14 +7,6 @@ import {
   FormControlLabel,
   FormLabel,
   Stack,
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
   Dialog,
   DialogActions,
   DialogContent,

client/src/themes/theme/index.jsx

@@ -1,8 +1,6 @@
 // ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
 
-import { pink, blueGrey, lightGreen, teal } from '@mui/material/colors';
+import { pink, blueGrey, lightGreen, teal, indigo, purple, deepPurple, lightBlue, orange } from '@mui/material/colors';
-
-import { purple, deepPurple, lightBlue, orange, indigo } from '@mui/material';
 
 const Theme = (colors, darkMode) => {
     const { blue, red, gold, cyan, green, grey } = colors;

client/src/utils/SyntaxHighlight.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 // third-party
-import { SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
 

eslint.config.js

@@ -1,26 +0,0 @@
-const reactAll = require('eslint-plugin-react/configs/all');
-const globals = require('globals');
-
-module.exports = [
-    {
-        files: ['client/src/**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
-        ...reactAll,
-        languageOptions: {
-            ...reactAll.languageOptions,
-            globals: {
-                ...globals.serviceworker,
-                ...globals.browser,
-            },
-        },
-        rules: {
-            'react/jsx-uses-react': 'error',
-            'react/jsx-uses-vars': 'error',
-            'no-restricted-imports': [
-                "error",
-                {
-                  "patterns": ["@mui/*/*/*"]
-                }
-            ]
-        },
-    },
-];

package.json

@@ -10,28 +10,23 @@
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons": "^4.7.0",
-    "@emotion/cache": "^11.10.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@jamesives/github-sponsors-readme-action": "^1.2.2",
     "@mui/lab": "^5.0.0-alpha.100",
-    "@mui/material": "^5.10.6",
+    "@mui/material": "^5.14.19",
     "@mui/x-date-pickers": "^6.18.0",
     "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
     "@vitejs/plugin-react": "^3.1.0",
     "apexcharts": "^3.35.5",
     "bcryptjs": "^2.4.3",
-    "browserslist": "^4.21.7",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
-    "dot": "^1.1.3",
     "express": "^4.18.2",
     "formik": "^2.2.9",
     "framer-motion": "^7.3.6",
-    "history": "^5.3.0",
     "js-yaml": "^4.1.0",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.8.1",
@@ -43,18 +38,14 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.5",
     "react-element-to-jsx-string": "^15.0.0",
     "react-intersection-observer": "^9.5.2",
     "react-lazyload": "^3.2.0",
     "react-material-ui-carousel": "^3.4.2",
-    "react-number-format": "^4.9.4",
-    "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "^8.0.4",
     "react-router": "^6.4.1",
     "react-router-dom": "^6.4.1",
     "react-syntax-highlighter": "^15.5.0",
-    "react-window": "^1.8.7",
     "redux": "^4.2.0",
     "semver-compare": "^1.0.0",
     "simplebar": "^5.3.8",
@@ -63,7 +54,6 @@
     "vite": "^4.2.0",
     "web-vitals": "^3.0.2",
     "whiskers": "^0.4.0",
-    "whiskers.js": "^1.0.0",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -104,12 +94,6 @@
     "demo": "vite build --base=/cosmos-ui/ --mode demo",
     "devdemo": "vite --mode demo"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -124,41 +108,30 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.5",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-transform-runtime": "^7.23.4",
     "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@swc/core": "^1.3.100",
     "@types/lodash.merge": "^4.6.9",
+    "@types/react-color": "^3.0.10",
     "babel-loader": "^9.1.3",
     "babel-plugin-direct-import": "^1.0.0",
-    "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.55.0",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "7.0.1",
-    "eslint-import-resolver-typescript": "3.5.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-webpack-plugin": "^4.0.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.3",
     "inspectpack": "^4.7.1",
     "mini-css-extract-plugin": "^2.7.6",
     "path-browserify": "^1.0.1",
     "prettier": "2.7.1",
+    "process": "^0.11.10",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.3",
-    "ts-loader": "^9.5.1",
     "typescript": "^5.3.2",
     "util": "^0.12.5",
     "webpack": "^5.89.0",

webpack.config.js

@@ -5,7 +5,6 @@ const TerserPlugin = require('terser-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const ESLintPlugin = require('eslint-webpack-plugin');
 
 const path = require('path');
 
@@ -47,9 +46,9 @@ module.exports = {
             'stream': require.resolve('stream-browserify'),
             'crypto': require.resolve('crypto-browserify'),
             'path': require.resolve('path-browserify'),
-            'fs': require.resolve('browserify-fs'),
             'buffer': require.resolve('buffer/'),
             'util': require.resolve('util/'),
+            'fs': false
         },
         alias: {
             'bn.js': require.resolve('bn.js'),
@@ -64,7 +63,6 @@ module.exports = {
         }
     },
     plugins: [
-        new ESLintPlugin(),
         new IgnorePlugin({
             resourceRegExp: /[\d\D]*.demo[\d\D]*/
         }),
@@ -75,7 +73,7 @@ module.exports = {
         new BundleAnalyzerPlugin(),
         new DuplicatesPlugin({
             emitErrors: false,
-            verbose: true
+            verbose: false
         })
     ],
     output: {
@@ -90,6 +88,7 @@ module.exports = {
         splitChunks: {
             chunks: 'all',
         },
+        usedExports: true,
         minimizer: [
             new CssMinimizerPlugin(),
             new TerserPlugin({