Setup react hooks linting (#3034)

jimmycallin · web-flow · commit 6603e969464e · 2022-08-22T20:59:08.000+02:00
* Set up linting for react hooks

* revert formatting

* fix linting issues in themes

* more linting issues
diff --git a/.eslintrc-typescript b/.eslintrc-typescript
@@ -1,7 +1,15 @@
 {
   "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
   "rules": {
+    "react/prop-types": 0,
+    "react/no-find-dom-node": 0,
+    "react/display-name": 0,
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "jest-environment-jsdom": "^27.5.1",
     "lerna": "^5.4.3",
diff --git a/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -69,8 +69,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
             className="p-0 m-0"
           >
             {items &&
-              items.map((itemProps: ArrayFieldTemplateItemType) => (
-                <ArrayFieldItemTemplate {...itemProps} />
+              items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+                <ArrayFieldItemTemplate key={key} {...itemProps} />
               ))}
             {canAdd && (
               <Container className="">
diff --git a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -62,8 +62,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
       <Grid key={`array-item-list-${idSchema.$id}`}>
         <GridItem>
           {items.length > 0 &&
-            items.map((itemProps: ArrayFieldTemplateItemType) => (
-              <ArrayFieldItemTemplate {...itemProps} />
+            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
         </GridItem>
         {canAdd && (
diff --git a/packages/core/src/components/fields/NullField.tsx b/packages/core/src/components/fields/NullField.tsx
@@ -12,7 +12,7 @@ function NullField<T = any, F = any>(props: FieldProps<T, F>) {
     if (formData === undefined) {
       onChange(null as unknown as T);
     }
-  }, []);
+  }, [formData, onChange]);
 
   return null;
 }
diff --git a/packages/core/src/components/templates/ArrayFieldTemplate.tsx b/packages/core/src/components/templates/ArrayFieldTemplate.tsx
@@ -66,8 +66,8 @@ export default function ArrayFieldTemplate<T = any, F = any>(
       )}
       <div className="row array-item-list">
         {items &&
-          items.map((itemProps: ArrayFieldTemplateItemType) => (
-            <ArrayFieldItemTemplate {...itemProps} />
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+            <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
       </div>
       {canAdd && (
diff --git a/packages/core/src/components/widgets/AltDateWidget.tsx b/packages/core/src/components/widgets/AltDateWidget.tsx
@@ -123,14 +123,14 @@ function AltDateWidget<T = any, F = any>({
     if (value && value !== toDateString(state, time)) {
       setState(parseDateString(value, time));
     }
-  }, [value]);
+  }, [value, state, time]);
 
   useEffect(() => {
     if (readyForChange(state)) {
       // Only propagate to parent state if we have a complete date{time}
       onChange(toDateString(state, time));
     }
-  }, [state, time]);
+  }, [state, time, onChange]);
 
   const handleChange = (property: keyof DateObject, value: string) => {
     setState({ [property]: value });
diff --git a/packages/core/test/ArrayField_test.js b/packages/core/test/ArrayField_test.js
@@ -1442,6 +1442,7 @@ describe("ArrayField", () => {
         set onload(fn) {
           fn({ target: { result: "data:text/plain;base64,x=" } });
         },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         readAsDataUrl() {},
       });
 
diff --git a/packages/core/test/StringField_test.js b/packages/core/test/StringField_test.js
@@ -1868,6 +1868,7 @@ describe("StringField", () => {
         set onload(fn) {
           fn({ target: { result: "data:text/plain;base64,x=" } });
         },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         readAsDataUrl() {},
       });
 
@@ -1899,6 +1900,7 @@ describe("StringField", () => {
         set onload(fn) {
           fn({ target: { result: "data:text/plain;base64,x=" } });
         },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         readAsDataUrl() {},
       });
 
diff --git a/packages/core/test/setup-jsdom.js b/packages/core/test/setup-jsdom.js
@@ -1,4 +1,5 @@
-var { JSDOM } = require("jsdom");
+import { JSDOM } from "jsdom";
+import html from "html";
 
 // Setup the jsdom environment
 // @see https://github.com/facebook/react/issues/5046
@@ -15,5 +16,5 @@ global.atob = require("atob");
 
 // HTML debugging helper
 global.d = function d(node) {
-  console.log(require("html").prettyPrint(node.outerHTML, { indent_size: 2 }));
+  console.log(html.prettyPrint(node.outerHTML, { indent_size: 2 }));
 };
diff --git a/packages/fluent-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/fluent-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -63,8 +63,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
         />
       )}
       {items.length > 0 &&
-        items.map((itemProps: ArrayFieldTemplateItemType) => (
-          <ArrayFieldItemTemplate {...itemProps} />
+        items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+          <ArrayFieldItemTemplate key={key} {...itemProps} />
         ))}
       {canAdd && (
         <span style={rightJustify}>
diff --git a/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -43,9 +43,12 @@ const CheckboxWidget = (props: WidgetProps) => {
     options,
   } = props;
 
-  const _onChange = React.useCallback((_, checked?: boolean): void => {
-    onChange(checked);
-  }, []);
+  const _onChange = React.useCallback(
+    (_, checked?: boolean): void => {
+      onChange(checked);
+    },
+    [onChange]
+  );
 
   const _onBlur = ({
     target: { value },
diff --git a/packages/material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -64,8 +64,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
         )}
         <Grid container={true} key={`array-item-list-${idSchema.$id}`}>
           {items &&
-            items.map((itemProps: ArrayFieldTemplateItemType) => (
-              <ArrayFieldItemTemplate {...itemProps} />
+            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
           {canAdd && (
             <Grid container justifyContent="flex-end">
diff --git a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -64,8 +64,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
         )}
         <Grid container={true} key={`array-item-list-${idSchema.$id}`}>
           {items &&
-            items.map((itemProps: ArrayFieldTemplateItemType) => (
-              <ArrayFieldItemTemplate {...itemProps} />
+            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
           {canAdd && (
             <Grid container justifyContent="flex-end">

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ function NullField<T = any, F = any>(props: FieldProps<T, F>) {`
`12`	`12`	`if (formData === undefined) {`
`13`	`13`	`onChange(null as unknown as T);`
`14`	`14`	`}`
`15`		`- }, []);`
	`15`	`+ }, [formData, onChange]);`
`16`	`16`
`17`	`17`	`return null;`
`18`	`18`	`}`