From 31fdf75e76640e5398dae3516f17853913b239ba Mon Sep 17 00:00:00 2001 From: Jimmy Callin Date: Mon, 22 Aug 2022 19:19:18 +0200 Subject: [PATCH 1/4] Set up linting for react hooks --- .eslintrc-typescript | 66 ++++++++++++++----- package-lock.json | 1 + package.json | 1 + .../core/src/components/fields/NullField.tsx | 2 +- .../templates/ArrayFieldTemplate.tsx | 4 +- .../src/components/widgets/AltDateWidget.tsx | 4 +- packages/core/test/ArrayField_test.js | 1 + packages/core/test/StringField_test.js | 2 + packages/core/test/setup-jsdom.js | 5 +- 9 files changed, 62 insertions(+), 24 deletions(-) diff --git a/.eslintrc-typescript b/.eslintrc-typescript index 92b3d077b4..81cc72cb4a 100644 --- a/.eslintrc-typescript +++ b/.eslintrc-typescript @@ -1,27 +1,59 @@ { "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/jsx-uses-react": 2, "react/jsx-uses-vars": 2, "react/react-in-jsx-scope": 2, - "react/jsx-tag-spacing": [1, { - "beforeSelfClosing": "always" - }], - "curly": [2], - "linebreak-style": [2, "unix"], - "semi": [2, "always"], - "comma-dangle": [0], - "@typescript-eslint/no-unused-vars": [2, { - "vars": "all", - "args": "none", - "ignoreRestSiblings": true - }], + + "react/prop-types": 0, + "react/no-find-dom-node": 0, + "react/display-name": 0, + "react/jsx-tag-spacing": [ + 1, + { + "beforeSelfClosing": "always" + } + ], + "curly": [ + 2 + ], + "linebreak-style": [ + 2, + "unix" + ], + "semi": [ + 2, + "always" + ], + "comma-dangle": [ + 0 + ], + "@typescript-eslint/no-unused-vars": [ + 2, + { + "vars": "all", + "args": "none", + "ignoreRestSiblings": true + } + ], "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-non-null-assertion": "off", - "no-console": [0], - "object-curly-spacing": [2, "always"], - "keyword-spacing": ["error"], + "no-console": [ + 0 + ], + "object-curly-spacing": [ + 2, + "always" + ], + "keyword-spacing": [ + "error" + ], "no-prototype-builtins": "warn", "@typescript-eslint/no-empty-function": "warn", "@typescript-eslint/no-var-requires": "warn" @@ -31,4 +63,4 @@ "browser": true, "node": true } -} +} \ No newline at end of file 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/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 })); }; From c5cce8d3db69a5e06453920d1c19f08736598b60 Mon Sep 17 00:00:00 2001 From: Jimmy Callin Date: Mon, 22 Aug 2022 19:37:01 +0200 Subject: [PATCH 2/4] revert formatting --- .eslintrc-typescript | 62 ++++++++++++++------------------------------ 1 file changed, 19 insertions(+), 43 deletions(-) diff --git a/.eslintrc-typescript b/.eslintrc-typescript index 81cc72cb4a..d0d394b6da 100644 --- a/.eslintrc-typescript +++ b/.eslintrc-typescript @@ -7,53 +7,29 @@ "plugin:react-hooks/recommended" ], "rules": { - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/react-in-jsx-scope": 2, - "react/prop-types": 0, "react/no-find-dom-node": 0, "react/display-name": 0, - "react/jsx-tag-spacing": [ - 1, - { - "beforeSelfClosing": "always" - } - ], - "curly": [ - 2 - ], - "linebreak-style": [ - 2, - "unix" - ], - "semi": [ - 2, - "always" - ], - "comma-dangle": [ - 0 - ], - "@typescript-eslint/no-unused-vars": [ - 2, - { - "vars": "all", - "args": "none", - "ignoreRestSiblings": true - } - ], + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/react-in-jsx-scope": 2, + "react/jsx-tag-spacing": [1, { + "beforeSelfClosing": "always" + }], + "curly": [2], + "linebreak-style": [2, "unix"], + "semi": [2, "always"], + "comma-dangle": [0], + "@typescript-eslint/no-unused-vars": [2, { + "vars": "all", + "args": "none", + "ignoreRestSiblings": true + }], "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-non-null-assertion": "off", - "no-console": [ - 0 - ], - "object-curly-spacing": [ - 2, - "always" - ], - "keyword-spacing": [ - "error" - ], + "no-console": [0], + "object-curly-spacing": [2, "always"], + "keyword-spacing": ["error"], "no-prototype-builtins": "warn", "@typescript-eslint/no-empty-function": "warn", "@typescript-eslint/no-var-requires": "warn" @@ -63,4 +39,4 @@ "browser": true, "node": true } -} \ No newline at end of file +} From ae5feb561afd42211b03a33da7051eee5c818f47 Mon Sep 17 00:00:00 2001 From: Jimmy Callin Date: Mon, 22 Aug 2022 19:50:23 +0200 Subject: [PATCH 3/4] fix linting issues in themes --- .../bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 ++-- .../chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 ++-- .../material-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 ++-- packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) 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/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 && ( From a5dc149d9b01e83e9c28a54ef471d4a2079f1d31 Mon Sep 17 00:00:00 2001 From: Jimmy Callin Date: Mon, 22 Aug 2022 20:18:51 +0200 Subject: [PATCH 4/4] more linting issues --- .../src/ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 ++-- packages/fluent-ui/src/CheckboxWidget/CheckboxWidget.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) 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 },