Updated Eslint Config, Rules, Added Husky for Git Hooks

.eslintignore

@@ -16,9 +16,18 @@ package-lock.json
 .min.js
 .min.css
 
-#Dockerfile
+# Dockerfile
 .dockerignore
 Dockerfile.dev
 Dockerfile
 docker-compose.yml
-docker-compose.dev.yml
+docker-compose.dev.yml
+
+# Storybook Files
+**.stories.js
+**.stories.jsx
+
+# Other Files
+**/*.svg
+**/*.css
+/src/assets/

.eslintrc.json

@@ -5,15 +5,24 @@
     "es2021": true,
     "jest": true
   },
-  "extends": ["airbnb", "plugin:prettier/recommended"],
+  "extends": [
+      "airbnb", 
+      "plugin:prettier/recommended",
+      "plugin:json/recommended"
+    ],
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 12,
-    "sourceType": "module"
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "babelOptions": {
+       "presets": ["@babel/preset-react"]
+    }
   },
-  "plugins": ["react"],
+  "plugins": ["react", "react-hooks", "prettier", "simple-import-sort"],
   "settings": {
     "react": {
       "version": "detect"
@@ -30,13 +39,23 @@
     "prettier/prettier": [
       "error",
       {
-        "endOfLine": "auto"
+        "endOfLine": "auto",
+        "semi": true,
+        "singleQuote": false,
+        "tabWidth": 2,
+        "useTabs": false
       }
     ],
     "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
     "prefer-destructuring": ["error", { "object": true, "array": false }],
     "react/require-default-props": 0,
     "jsx-a11y/control-has-associated-label": 0,
-    "react/jsx-props-no-spreading": 0
+    "react/jsx-props-no-spreading": 0,
+    "import/no-anonymous-default-export": 0,
+    "import/prefer-default-export": 0,
+    "react/react-in-jsx-scope": "off",
+    "simple-import-sort/imports": "error",
+    "react/jsx-filename-extension": 0,
+    "json/*": ["warn", {"allowComments": true}]
   }
-}
+}

.husky/pre-commit

@@ -0,0 +1 @@
+yarn run lint-staged

package.json

@@ -34,28 +34,17 @@
     "eject": "react-scripts eject",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "lint": "eslint src/ --fix",
-    "lint:check": "eslint src/",
+    "lint": "eslint --ignore-path .eslintignore '**/*.{js,jsx}*' --fix",
+    "lint:check": "eslint --ignore-path .eslintignore '**/*.{js,jsx}*'",
     "fix:all": "yarn lint && yarn format",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "gencopy": "node scripts/copyrightsScript.js && prettier --write ./scripts/copyrights.js"
+    "gencopy": "node scripts/copyrightsScript.js && prettier --write ./scripts/copyrights.js",
+    "postinstall": "husky install"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+  "lint-staged": {
+    "*.js": "yarn run lint",
+    "*.jsx": "yarn run lint"
   },
   "browserslist": {
     "production": [
@@ -73,6 +62,8 @@
     "babel-loader": "8.1.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
     "@storybook/addon-actions": "^6.5.5",
     "@storybook/addon-essentials": "^6.5.5",
     "@storybook/addon-links": "^6.5.5",
@@ -84,10 +75,15 @@
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "husky": "^8.0.2",
     "jest-fetch-mock": "3.0.3",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.6.2"
   },
   "packageManager": "[email protected]"

scripts/copyrights.js → scripts/copyrights.json

@@ -252,5 +252,5 @@
   "Copyright (C) Siemens AG, 2014",
   "Copyright (C) Siemens AG, 2014-2019",
   "Copyright (C) TNG Technology Consulting GmbH 2016, [email protected]",
-  "Copyright (C) TNG Technology Consulting GmbH 2016-2017, [email protected]",
-];
+  "Copyright (C) TNG Technology Consulting GmbH 2016-2017, [email protected]"
+]

scripts/copyrightsScript.js

@@ -17,23 +17,24 @@
 */
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-const csv = require("csv-parser");
-const fs = require("fs");
+import csv from "csv-parser";
+import { createReadStream, writeFile } from "fs";
 
 const copyrights = [];
 
-fs.createReadStream("scripts/copyrights.csv")
+createReadStream("scripts/copyrights.csv")
   .pipe(csv())
   .on("data", (data) => {
     copyrights.push(data.copyright);
   })
   .on("end", () => {
     const uniqueCopyrights = [...new Set(copyrights)].sort();
-    fs.writeFile(
-      "scripts/copyrights.js",
+    writeFile(
+      "scripts/copyrights.json",
       JSON.stringify(uniqueCopyrights),
       (err) => {
         if (err) {
+          /* eslint-disable-next-line no-console */
           console.log("Unable to parse the CSV to generate copyrights array");
         }
       }

src/App.jsx

@@ -17,26 +17,22 @@
 */
 
 // React Imports
-import React, { useContext, useEffect } from "react";
-
-// Theme Provider
-import { ThemeProvider } from "styled-components";
-import { lightTheme, darkTheme } from "styles/theme";
-
-// GlobalContext
-import { GlobalContext, GlobalProvider } from "context";
-
-// Routes
-import Routes from "Routes";
-
 // eslint-disable-next-line import/no-extraneous-dependencies
 import "popper.js";
-
 // Global CSS (Bootstrap, Tree View of Folders, Custom Styling)
 import "bootstrap/dist/css/bootstrap.min.css";
 import "react-virtualized-tree/lib/main.css";
 import "styles/global.css";
+
+// GlobalContext
+import { GlobalContext, GlobalProvider } from "context";
+import React, { useContext, useEffect } from "react";
+// Routes
+import Routes from "Routes";
+// Theme Provider
+import { ThemeProvider } from "styled-components";
 import GlobalStyles from "styles/globalStyle";
+import { darkTheme, lightTheme } from "styles/theme";
 
 function App() {
   const { state } = useContext(GlobalContext);

src/Routes.jsx

@@ -17,9 +17,9 @@
 */
 
 // React imports
-import React from "react";
 import routes from "constants/routes";
-import { BrowserRouter, Switch, Route } from "react-router-dom";
+import React from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 // Guards imports
 const PublicLayout = React.lazy(() => import("shared/PublicLayout"));

src/api/auth.test.js → src/api/__tests__/auth.test.js

@@ -13,12 +13,12 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import sendRequest from "api/sendRequest";
 import fetchTokenApi from "api/auth";
+import sendRequest from "api/sendRequest";
 import { tokenExpiryDays, tokenScope } from "constants/auth";
+import endpoints from "constants/endpoints";
 import * as helper from "shared/helper";
 import { getDate } from "shared/helper";
-import endpoints from "constants/endpoints";
 
 jest.mock("api/sendRequest");
 

src/api/browse.test.js → src/api/__tests__/browse.test.js

@@ -13,10 +13,10 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import sendRequest from "api/sendRequest";
 import getBrowseDataApi from "api/browse";
-import { getToken } from "shared/authHelper";
+import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
+import { getToken } from "shared/authHelper";
 
 jest.mock("api/sendRequest");
 

src/api/folders.test.js → src/api/__tests__/folders.test.js

@@ -13,7 +13,6 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import sendRequest from "api/sendRequest";
 import {
   createFolderApi,
   deleteFolderApi,
@@ -22,8 +21,9 @@ import {
   getSingleFolderApi,
   moveCopyFolderApi,
 } from "api/folders";
-import { getToken } from "shared/authHelper";
+import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
+import { getToken } from "shared/authHelper";
 
 jest.mock("api/sendRequest");
 

src/api/groups.test.js → src/api/__tests__/groups.test.js

@@ -13,9 +13,9 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import { createGroupApi, getAllGroupsApi } from "api/groups";
 import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
-import { createGroupApi, getAllGroupsApi } from "api/groups";
 import { getToken } from "shared/authHelper";
 
 jest.mock("api/sendRequest");

src/api/info.test.js → src/api/__tests__/info.test.js

@@ -13,9 +13,9 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import { getHealthApi, getInfoApi } from "api/info";
 import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
-import { getHealthApi, getInfoApi } from "api/info";
 
 jest.mock("api/sendRequest");
 

src/api/jobs.test.js → src/api/__tests__/jobs.test.js

@@ -13,14 +13,14 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import sendRequest from "api/sendRequest";
-import endpoints from "constants/endpoints";
 import {
   downloadReportApi,
   getJobApi,
   scheduleAnalysisApi,
   scheduleReportApi,
 } from "api/jobs";
+import sendRequest from "api/sendRequest";
+import endpoints from "constants/endpoints";
 import { getToken } from "shared/authHelper";
 
 jest.mock("api/sendRequest");

src/api/licenses.test.js → src/api/__tests__/licenses.test.js

@@ -13,10 +13,10 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import { createCandidateLicenseApi, getAllLicenseApi } from "api/licenses";
 import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
 import { getToken } from "shared/authHelper";
-import { createCandidateLicenseApi, getAllLicenseApi } from "api/licenses";
 
 jest.mock("api/sendRequest");
 

src/api/maintenance.test.js → src/api/__tests__/maintenance.test.js

@@ -14,10 +14,10 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import { createMaintenanceApi } from "api/maintenance";
 import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
 import { getToken } from "shared/authHelper";
-import { createMaintenanceApi } from "api/maintenance";
 
 jest.mock("api/sendRequest");
 

src/api/organizeUploads.test.js → src/api/__tests__/organizeUploads.test.js

@@ -13,15 +13,15 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import sendRequest from "api/sendRequest";
-import endpoints from "constants/endpoints";
-import { getToken } from "shared/authHelper";
 import {
   copyUploadApi,
   deleteUploadsApi,
   getUploadsByFolderIdApi,
   moveUploadApi,
 } from "api/organizeUploads";
+import sendRequest from "api/sendRequest";
+import endpoints from "constants/endpoints";
+import { getToken } from "shared/authHelper";
 
 jest.mock("api/sendRequest");
 

src/api/search.test.js → src/api/__tests__/search.test.js

@@ -13,10 +13,10 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import searchApi from "api/search";
 import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
 import { getToken } from "shared/authHelper";
-import searchApi from "api/search";
 
 jest.mock("api/sendRequest");
 

src/api/sendRequest.test.js → src/api/__tests__/sendRequest.test.js

@@ -13,11 +13,11 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
+import sendRequest from "api/sendRequest";
 import { disableFetchMocks, enableFetchMocks } from "jest-fetch-mock";
 import { stringify } from "query-string";
-import { setLocalStorage } from "shared/storageHelper";
 import { logout } from "shared/authHelper";
-import sendRequest from "api/sendRequest";
+import { setLocalStorage } from "shared/storageHelper";
 
 jest.mock("shared/storageHelper", () => ({
   getLocalStorage: jest.fn(),