chore: Upgrade ESLint from v7 to v8 (#3725)

* chore(eslint-config): Bump eslint to 8 and jsx-a11y  plugin to match.

* chore(eslint-config): Missing bumps from previous commit.

* chore(eslint-config): Bump react plugin to support eslint 8.

* style(router): Add types  for onClick.

* fix(internal): Resolve unsafe chaining by using empty array if errors is undefined.

* fix(router): Better typing for onClick on links.

* style: Remove field omission that was causing unclear typing.

* style: Add missing id type.

* chore(es-config): Resolve constraints issue.

* chore(deps): Yarn dedupe.

* update packages

* update yarn.lock

Co-authored-by: David Price <thedavid@thedavidprice.com>

package.json

@@ -9,7 +9,7 @@
   "devDependencies": {
     "@babel/cli": "7.15.7",
     "@babel/node": "7.15.8",
-    "eslint": "7.32.0",
+    "eslint": "8.2.0",
     "jest": "27.3.1",
     "npm-packlist": "3.0.0",
     "rimraf": "3.0.2",

packages/eslint-config/package.json

@@ -5,21 +5,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "7.15.8",
-    "@babel/eslint-parser": "7.15.8",
+    "@babel/eslint-parser": "7.16.3",
     "@babel/eslint-plugin": "7.14.5",
     "@redwoodjs/internal": "0.38.3",
-    "@typescript-eslint/eslint-plugin": "5.1.0",
-    "@typescript-eslint/parser": "5.1.0",
-    "eslint": "7.32.0",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
+    "eslint": "8.2.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-import-resolver-babel-module": "5.3.1",
     "eslint-plugin-babel": "5.3.1",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jest-dom": "3.9.2",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.26.1",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react-hooks": "4.3.0",
     "prettier": "2.4.1"
   },
   "repository": {

packages/forms/src/index.tsx

@@ -89,6 +89,7 @@ interface FieldProps<
     | HTMLInputElement = HTMLInputElement
 > {
   name: string
+  id?: string
   errorClassName?: string
   errorStyle?: React.CSSProperties
   className?: string
@@ -467,7 +468,7 @@ const FieldError = ({ name, ...rest }: FieldErrorProps) => {
 }
 
 interface TextAreaFieldProps
-  extends Omit<FieldProps<HTMLTextAreaElement>, 'type'>,
+  extends FieldProps<HTMLTextAreaElement>,
     Omit<React.ComponentPropsWithRef<'textarea'>, 'name'> {}
 
 /**
@@ -516,7 +517,7 @@ const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
 )
 
 interface SelectFieldProps
-  extends Omit<FieldProps<HTMLSelectElement>, 'type'>,
+  extends FieldProps<HTMLSelectElement>,
     Omit<React.ComponentPropsWithRef<'select'>, 'name'> {}
 
 /**
@@ -565,7 +566,7 @@ const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
 )
 
 interface CheckboxFieldProps
-  extends Omit<FieldProps<HTMLInputElement>, 'type'>,
+  extends FieldProps<HTMLInputElement>,
     Omit<React.ComponentPropsWithRef<'input'>, 'name' | 'type'> {}
 
 /**
@@ -672,7 +673,7 @@ const INPUT_TYPES = [
 type InputType = typeof INPUT_TYPES[number]
 
 interface InputFieldProps
-  extends Omit<FieldProps<HTMLInputElement>, 'type'>,
+  extends FieldProps<HTMLInputElement>,
     Omit<React.ComponentPropsWithRef<'input'>, 'name' | 'type'> {
   /**
    * @privateRemarks

packages/internal/src/generate/graphqlSchema.ts

@@ -45,7 +45,7 @@ export const generateGraphQLSchema = async () => {
     // This tries to clean up the output of those errors.
     console.error(e)
     console.error(chalk.red('Error parsing SDLs or Schema'))
-    for (const error of e?.errors) {
+    for (const error of e.errors ?? []) {
       console.error(error.details)
     }
 

packages/router/src/links.tsx

@@ -56,6 +56,7 @@ const useMatch = (pathname: string, options?: UseMatchOptions) => {
 
 interface LinkProps {
   to: string
+  onClick: React.MouseEventHandler<HTMLAnchorElement>
 }
 
 const Link = forwardRef<
@@ -95,6 +96,7 @@ interface NavLinkProps {
   to: string
   activeClassName: string
   activeMatchParams?: FlattenSearchParams
+  onClick: React.MouseEventHandler<HTMLAnchorElement>
 }
 
 const NavLink = forwardRef<