fix

Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>

Author: YASHMAHAKAL

.eslintrc

@@ -0,0 +1,173 @@
+const reactPlugin = require('eslint-plugin-react');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
+const importPlugin = require('eslint-plugin-import');
+const filenamesPlugin = require('eslint-plugin-filenames');
+
+const browserGlobals = {
+  window: 'readonly',
+  document: 'readonly',
+  navigator: 'readonly',
+  location: 'readonly',
+  history: 'readonly',
+  self: 'readonly',
+  globalThis: 'readonly',
+  console: 'readonly',
+  alert: 'readonly',
+  confirm: 'readonly',
+  prompt: 'readonly',
+  setTimeout: 'readonly',
+  setInterval: 'readonly',
+  clearTimeout: 'readonly',
+  clearInterval: 'readonly',
+  requestAnimationFrame: 'readonly',
+  cancelAnimationFrame: 'readonly',
+  fetch: 'readonly',
+  XMLHttpRequest: 'readonly',
+  localStorage: 'readonly',
+  sessionStorage: 'readonly',
+  URL: 'readonly',
+  URLSearchParams: 'readonly',
+  Blob: 'readonly',
+  File: 'readonly',
+  FileReader: 'readonly',
+  FormData: 'readonly',
+  event: 'readonly',
+  Event: 'readonly',
+  EventTarget: 'readonly',
+  CustomEvent: 'readonly',
+  MouseEvent: 'readonly',
+  KeyboardEvent: 'readonly',
+  HTMLElement: 'readonly',
+  HTMLInputElement: 'readonly',
+  HTMLSelectElement: 'readonly',
+  Element: 'readonly',
+  Node: 'readonly',
+  MutationObserver: 'readonly',
+  IntersectionObserver: 'readonly',
+  ResizeObserver: 'readonly',
+  Worker: 'readonly',
+  CSS: 'readonly',
+  performance: 'readonly',
+  crypto: 'readonly',
+  atob: 'readonly',
+  btoa: 'readonly',
+  getComputedStyle: 'readonly',
+};
+
+const nodeGlobals = {
+  process: 'readonly',
+  require: 'readonly',
+  module: 'writable',
+  exports: 'writable',
+  __dirname: 'readonly',
+  __filename: 'readonly',
+  global: 'readonly',
+  Buffer: 'readonly',
+  setImmediate: 'readonly',
+  clearImmediate: 'readonly',
+  queueMicrotask: 'readonly',
+};
+
+const es6Globals = {
+  Promise: 'readonly',
+  Symbol: 'readonly',
+  Map: 'readonly',
+  Set: 'readonly',
+  WeakMap: 'readonly',
+  WeakSet: 'readonly',
+  WeakRef: 'readonly',
+  Proxy: 'readonly',
+  Reflect: 'readonly',
+  ArrayBuffer: 'readonly',
+  DataView: 'readonly',
+  SharedArrayBuffer: 'readonly',
+  Atomics: 'readonly',
+  BigInt: 'readonly',
+  Int8Array: 'readonly',
+  Uint8Array: 'readonly',
+  Uint8ClampedArray: 'readonly',
+  Int16Array: 'readonly',
+  Uint16Array: 'readonly',
+  Int32Array: 'readonly',
+  Uint32Array: 'readonly',
+  Float32Array: 'readonly',
+  Float64Array: 'readonly',
+  BigInt64Array: 'readonly',
+  BigUint64Array: 'readonly',
+};
+
+const mochaGlobals = {
+  describe: 'readonly',
+  it: 'readonly',
+  before: 'readonly',
+  after: 'readonly',
+  beforeEach: 'readonly',
+  afterEach: 'readonly',
+  context: 'readonly',
+  specify: 'readonly',
+  suite: 'readonly',
+  test: 'readonly',
+  suiteSetup: 'readonly',
+  suiteTeardown: 'readonly',
+  setup: 'readonly',
+  teardown: 'readonly',
+  run: 'readonly',
+  mocha: 'readonly',
+};
+
+module.exports = [
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      import: importPlugin,
+      filenames: filenamesPlugin,
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parserOptions: {
+        allowImportExportEverywhere: true,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...browserGlobals,
+        ...nodeGlobals,
+        ...es6Globals,
+        ...mochaGlobals,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+      'import/extensions': ['.js'],
+      'import/resolver': {
+        node: {
+          extensions: ['.js'],
+        },
+        webpack: {
+          config: 'webpack.config.js',
+        },
+      },
+    },
+    rules: {
+      ...jsxA11yPlugin.flatConfigs.recommended.rules,
+      'jsx-a11y/no-autofocus': [2, { ignoreNonDOM: true }],
+      'no-console': 'off',
+      semi: 2,
+      'no-undef': 2,
+      'no-undef-init': 2,
+      'no-tabs': 2,
+      'react/self-closing-comp': 2,
+      'react/jsx-no-duplicate-props': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+];

eslint.config.js

@@ -35,13 +35,13 @@ class ExamplesGrid extends React.Component {
 
   state = {
     searchVal: ''
-  }
+  };
 
   setSearchVal = (val) => {
     this.setState({
       searchVal: val
     });
-  }
+  };
 
   render() {
     const {classes} = this.props;

examples/Router/ExamplesGrid.js

@@ -46,22 +46,22 @@ class Example extends React.Component {
       ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
       ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
     ]
-  }
+  };
 
   handleFilterNameChange = (event) => {
     let string = prompt("Write a semicolon-separated string to change filter names in the first column!");
     if (string) this.setState({ filterOptions: string.split(';') });
-  }
+  };
 
   handleAddData = (event) => {
     const string = prompt("Write a semicolon-separated string with values for 'Name', 'Title', 'Location', 'Age' and 'Salary' to add a new row of data!");
     if (string) this.setState({ data: [string.split(';'), ...this.state.data] });
-  }
+  };
 
   handleChangeDisplay = (event) => {
     const string = prompt("Write a semicolon-separated string of display options for each of the 5 columns. Options are either 'true', 'false', or 'excluded'");
     if (string) this.setState({ display: string.split(';') });
-  }
+  };
 
   render() {
     const { data, filterList, filterOptions } = this.state;

examples/column-options-update/index.js

@@ -11,7 +11,7 @@ class CustomToolbar extends React.Component {
 
   handleClick = () => {
     console.log("clicked on icon!");
-  }
+  };
 
   render() {
     const { classes } = this.props;

examples/customize-toolbar/CustomToolbar.js

@@ -12,13 +12,13 @@ class Example extends React.Component {
       { name: "Jaden Collins", title: "Attorney", location: "Santa Ana", age: 27, salary: "$500,000", phone: { home: '867-5311', cell: '123-4569' } },
       { name: "Franky Rees", title: "Business Analyst", location: "St. Petersburg", age: 22, salary: "$50,000", phone: { home: '867-5312', cell: '123-4569' } }
     ]
-  }
+  };
 
   rerender = () => {
     this.setState((prevState, props) => ({
       counter: prevState.counter + 1
     })); 
-  }
+  };
 
   render() {
 

examples/data-as-objects/index.js

@@ -46,7 +46,7 @@ class Example extends React.Component {
     this.setState({
       selectableRowsHideCheckboxes: event.target.checked
     });
-  }
+  };
 
   render() {
 

examples/selectable-rows/index.js

@@ -77,7 +77,7 @@ class Example extends React.Component {
         2000
       );
     });
-  }
+  };
 
   handleFilterSubmit = applyFilters => {
     let filterList = applyFilters();

examples/serverside-filters/index.js

@@ -7,7 +7,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server -d --progress --colors",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --color",
     "test": "cross-env NODE_ENV=test mocha --require ./test/babel-register.js --extensions js,jsx test/**/*.test.js",
     "docs:dev": "next docs",
     "docs:build": "cross-env NODE_ENV=production next build docs",

package.json

@@ -1,6 +1,4 @@
-const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
@@ -17,12 +15,10 @@ module.exports = {
     mainFields: ['browser', 'module', 'main'],
   },
   devServer: {
-    disableHostCheck: true,
+    allowedHosts: 'all',
     host: 'localhost',
     hot: true,
-    inline: true,
     port: process.env.PORT || 5050,
-    stats: 'errors-warnings',
   },
   module: {
     rules: [
@@ -31,23 +27,6 @@ module.exports = {
         exclude: /node_modules/,
         use: ['babel-loader'],
       },
-      {
-        test: /\.(js|jsx)$/,
-        include: /node_modules\/(@mui|@emotion)\//,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              ['@babel/preset-env', { modules: 'commonjs' }],
-              '@babel/preset-react',
-            ],
-            plugins: [
-              '@babel/plugin-transform-optional-chaining',
-              '@babel/plugin-transform-nullish-coalescing-operator',
-            ],
-          },
-        },
-      },
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
@@ -56,8 +35,6 @@ module.exports = {
   },
   plugins: [
     new ESLintPlugin({ extensions: ['js', 'jsx'] }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('development'),