Chore: Update eslint configuration (#224)

- Update missing dev dependencies
- Fix root .eslintrc.json and client and server versions
- Add lint.yaml workflow
- Remove babel settings
- Clean up and fix eslint and ts errors

Author: enuchi

.eslintrc.json

@@ -1,31 +1,37 @@
 {
   "root": true,
+  "parser": "@typescript-eslint/parser",
   "extends": [
     "airbnb-base",
     "plugin:prettier/recommended",
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:@typescript-eslint/recommended"
   ],
-  "plugins": ["react-refresh", "prettier"],
+  "plugins": ["prettier", "googleappsscript"],
+  "env": {
+    "googleappsscript/googleappsscript": true
+  },
   "rules": {
     "prettier/prettier": "error",
     "camelcase": "warn",
     "import/prefer-default-export": "warn",
     "import/no-extraneous-dependencies": "warn",
     "prefer-object-spread": "warn",
-    "spaced-comment": "off",
-    "react-refresh/only-export-components": [
-      "warn",
-      { "allowConstantExport": true }
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "ts": "never"
+      }
     ]
   },
-  "parserOptions": {
-    "babelOptions": {
-      "configFile": "./dev/.babelrc"
-    }
-  },
-  "env": { "browser": true, "es2020": true },
   "ignorePatterns": ["dist", ".eslintrc.json"],
-  "parser": "@typescript-eslint/parser"
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts"]
+      }
+    }
+  }
 }

.github/workflows/lint.yaml

@@ -0,0 +1,18 @@
+name: Lint
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: macos-13
+    timeout-minutes: 8
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install packages
+        run: yarn install
+      - name: Run lint
+        run: yarn lint

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "lint": "eslint .",
     "test:integration": "jest --forceExit test/local-development.test",
     "test:integration:extended": "cross-env IS_EXTENDED=true jest --forceExit test/local-development.test",
     "test:integration:extended:ci-reporter": "cross-env IS_EXTENDED=true jest --forceExit || node test/utils/image-reporter-standalone.js",
@@ -48,9 +49,7 @@
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.6",
     "@google/clasp": "^2.4.2",
     "@types/expect-puppeteer": "^5.0.0",
     "@types/jest-environment-puppeteer": "^5.0.2",
@@ -69,6 +68,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-googleappsscript": "^1.0.4",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -83,6 +83,7 @@
     "puppeteer": "^14.3.0",
     "puppeteer-extra": "^3.2.3",
     "puppeteer-extra-plugin-stealth": "^2.9.0",
+    "rollup": "^4.18.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",

src/client/.babelrc

@@ -1,35 +1,24 @@
 {
   "root": true,
-  "parser": "@babel/eslint-parser",
   "extends": [
     "airbnb-base",
     "plugin:prettier/recommended",
-    "plugin:react/recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
   ],
-  "plugins": ["babel", "react", "prettier"],
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "globals": {
-    "google": false,
-    "alert": false,
-    "css": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 9,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
+  "plugins": ["react-refresh", "prettier"],
   "rules": {
     "prettier/prettier": "error",
-    "react/prop-types": "warn",
     "camelcase": "warn",
     "import/prefer-default-export": "warn",
     "import/no-extraneous-dependencies": "warn",
     "prefer-object-spread": "warn",
+    "spaced-comment": "off",
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
     "import/extensions": [
       "error",
       "ignorePackages",
@@ -50,5 +39,7 @@
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
-  }
+  },
+  "env": { "browser": true, "es2020": true },
+  "parser": "@typescript-eslint/parser"
 }

src/client/.eslintrc.json

@@ -23,9 +23,7 @@ const FormInput = ({ submitNewSheet }: FormInputProps) => {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit}
-    >
+    <form onSubmit={handleSubmit}>
       <Grid container spacing={2}>
         <Grid item xs={10}>
           <TextField

src/client/dialog-demo-mui/components/FormInput.tsx

@@ -4,7 +4,6 @@ import { Button, Typography } from '@mui/material';
 import FormInput from './FormInput';
 import SheetTable from './SheetTable';
 
-
 // This is a wrapper for google.script.run that lets us use promises.
 import { serverFunctions } from '../../utils/serverFunctions';
 
@@ -40,29 +39,40 @@ const SheetEditor = () => {
       </Typography>
 
       <Typography variant="body1" gutterBottom sx={{ marginBottom: '30px' }}>
-        This is a sample app that uses the <code>mui</code> library
-        to help us build a simple React app. Enter a name for a new sheet, hit
-        enter and the new sheet will be created. Click the red button next to the sheet name to
-        delete it.
+        This is a sample app that uses the <code>mui</code> library to help us
+        build a simple React app. Enter a name for a new sheet, hit enter and
+        the new sheet will be created. Click the red button next to the sheet
+        name to delete it.
       </Typography>
       <FormInput submitNewSheet={submitNewSheet} />
 
-      {names.length > 0 &&
-        <SheetTable rows={names.map((name) => {
-          return {
-            sheetName: name.name,
-            goToButton: <Button
-              variant="outlined"
-              disabled={name?.isActive}
-              onClick={() => setActiveSheet(name.name)}
-            >Go To Sheet</Button>,
-            deleteButton: <Button
-              variant="contained"
-              color="error"
-              onClick={() => deleteSheet(name.index)}
-            >Delete</Button>
-          }
-        })} />}
+      {names.length > 0 && (
+        <SheetTable
+          rows={names.map((name) => {
+            return {
+              sheetName: name.name,
+              goToButton: (
+                <Button
+                  variant="outlined"
+                  disabled={name?.isActive}
+                  onClick={() => setActiveSheet(name.name)}
+                >
+                  Go To Sheet
+                </Button>
+              ),
+              deleteButton: (
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={() => deleteSheet(name.index)}
+                >
+                  Delete
+                </Button>
+              ),
+            };
+          })}
+        />
+      )}
     </div>
   );
 };

src/client/dialog-demo-mui/components/SheetEditor.jsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; 
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material';
 
 type sheetRow = {
   sheetName: string;

src/client/dialog-demo-mui/components/SheetTable.tsx

@@ -1,7 +1,11 @@
 import { useState, ChangeEvent, FormEvent } from 'react';
 import PropTypes from 'prop-types';
 
-const FormInput = ({ submitNewSheet }: { submitNewSheet: Function }) => {
+const FormInput = ({
+  submitNewSheet,
+}: {
+  submitNewSheet: (arg: string) => void;
+}) => {
   const [inputValue, setInputValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) =>