Merge branch 'main' of https://github.com/RENCI/APSViz-UI-V3 into fea…

…ture/drawer

# Conflicts:
#	src/app.js
#	src/index.js

.github/workflows/eslint.yml

@@ -5,20 +5,21 @@
 
 name: ES Lint the repo
 
-# trigger event is on a pull request
+# trigger event is on a push or a pull request
 on:
   workflow_dispatch:
-  #push
+  push:
+  pull_request:
 
 jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: mrdivyansh/[email protected]
-
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - uses: actions/setup-node@v4
         with:
-          #repo-token: ${{secrets.GITHUB_TOKEN}}
-          eslint-rc: .eslintrc.js
-          execute-on-files:
-            - ./packages
+          node-version: 20
+      - run: npm ci
+      - run: npm run lint

eslint.config.mjs

@@ -0,0 +1,38 @@
+import globals from "globals";
+import react from "eslint-plugin-react";
+
+// this bit fixes the collision with the React definition of react
+react.configs.recommended.plugins = { react };
+react.configs.recommended.languageOptions = { parserOptions: react.configs.recommended.parserOptions };
+delete react.configs.recommended.parserOptions;
+
+// define the eslint configuration
+export default [
+  react.configs.recommended,
+  {
+    plugins: { react },
+    files: ["src/**/*.js*"],
+    ignores: ["**/*.config.js", "dist/**/*", "build/**/*"],
+    settings: { react: {version: "18.2.0"} },
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        }},
+      globals: {
+          ...globals.node,
+          ...globals.browser
+      }
+    },
+    rules: {
+      "no-unused-vars": "warn",
+      "no-undef": "warn",
+      "semi": "warn",
+      "prefer-const": "warn",
+      "no-dupe-args": "warn",
+      "no-dupe-keys": "warn",
+      "react/display-name": "off"
+    },
+    linterOptions: { reportUnusedDisableDirectives: "error" }
+  }
+];

package.json

@@ -6,8 +6,9 @@
     "build": "webpack --mode=production",
     "watch": "webpack --watch",
     "build-dev": "webpack --mode=development",
-    "lint": "eslint ./src/index.js ./src/components/**/*.js",
-    "lint:fix": "eslint --fix ./src/index.js ./src/components/**/*.js",
+    "lint": "eslint src/**/*.js*",
+    "lint:fix": "eslint --fix src/**/*.js*",
+    "npx:lint": "npx eslint .",
     "clean": "rm -rf dist",
     "deploy": "webpack && gh-pages -d dist",
     "test": "jest"
@@ -17,16 +18,18 @@
     "@babel/eslint-parser": "^7.23.10",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
+    "@eslint/js": "^9.1.1",
     "@faker-js/faker": "^8.4.1",
     "arg": "^5.0.2",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.10.0",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-webpack-plugin": "^4.0.1",
     "gh-pages": "^6.1.1",
+    "globals": "^15.1.0",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-babel": "^1.0.1",

src/app.js

@@ -1,12 +1,10 @@
-import { Fragment } from 'react'
-import { Map } from '@components/map'
-import { Sidebar } from '@components/sidebar'
+import React, { Fragment } from 'react';
+import { Map } from '@components/map';
 
 export const App = () => {
   return (
     <Fragment>
-      <Map/>
-      <Sidebar />
+      <Map />
     </Fragment>
-  )
-}
+  );
+};

src/components/brand.js

@@ -1,12 +1,13 @@
-import PropTypes from 'prop-types'
-import apsLogo from '@images/aps-trans-logo.png'
+import React from 'react';
+import PropTypes from 'prop-types';
+import apsLogo from '@images/aps-trans-logo.png';
 
 const SIZES = {
   tiny: 40,
   small: 80,
   medium: 150,
   large: 200,
-}
+};
 
 export const Brand = ({ size }) => {
   return (
@@ -22,9 +23,9 @@ export const Brand = ({ size }) => {
         width={ SIZES?.[size] || SIZES.large }
       />
     </a>
-  )  
-}
+  )  ;
+};
 
 Brand.propTypes = {
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
-}
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large'])
+};