diff --git a/.eslintrc-typescript b/.eslintrc-typescript index 92b3d077b4..d0d394b6da 100644 --- 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 index 0b9e8b6694..67b3396840 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,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.3.0", diff --git a/package.json b/package.json index c5840913ae..2d2b9f818e 100644 --- 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.3.0", diff --git a/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx index 368aceab44..df8c216998 100644 --- 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) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + ))} {canAdd && ( diff --git a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx index 3b1b61790f..345452f6fa 100644 --- a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx +++ b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx @@ -62,8 +62,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => { {items.length > 0 && - items.map((itemProps: ArrayFieldTemplateItemType) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + ))} {canAdd && ( diff --git a/packages/core/src/components/fields/NullField.tsx b/packages/core/src/components/fields/NullField.tsx index 8a486966a4..164d6a9c23 100644 --- a/packages/core/src/components/fields/NullField.tsx +++ b/packages/core/src/components/fields/NullField.tsx @@ -12,7 +12,7 @@ function NullField(props: FieldProps) { 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 index 5349a10e5f..8d52012c8e 100644 --- a/packages/core/src/components/templates/ArrayFieldTemplate.tsx +++ b/packages/core/src/components/templates/ArrayFieldTemplate.tsx @@ -66,8 +66,8 @@ export default function ArrayFieldTemplate( )}
{items && - items.map((itemProps: ArrayFieldTemplateItemType) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + ))}
{canAdd && ( diff --git a/packages/core/src/components/widgets/AltDateWidget.tsx b/packages/core/src/components/widgets/AltDateWidget.tsx index e306036911..f994b8fb51 100644 --- a/packages/core/src/components/widgets/AltDateWidget.tsx +++ b/packages/core/src/components/widgets/AltDateWidget.tsx @@ -123,14 +123,14 @@ function AltDateWidget({ 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 index cce6c93deb..ddf8e41b94 100644 --- 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 index 3f00b2f67f..48b6d48611 100644 --- 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 index 63c7203506..279c779d1f 100644 --- 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 index 92aacf985d..960cde5e14 100644 --- 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) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + ))} {canAdd && ( diff --git a/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx index 4b3a7b25b8..cd18d4d00e 100644 --- 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 index 4592d306d2..f2edbf59ba 100644 --- a/packages/material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx +++ b/packages/material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx @@ -64,8 +64,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => { )} {items && - items.map((itemProps: ArrayFieldTemplateItemType) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + ))} {canAdd && ( diff --git a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx index 5572c0427f..d51768bcd2 100644 --- a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx +++ b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx @@ -64,8 +64,8 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => { )} {items && - items.map((itemProps: ArrayFieldTemplateItemType) => ( - + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + ))} {canAdd && (