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(),