Add additional react eslint checks. Illustrate its use on a single file.

.eslintignore

@@ -401,8 +401,6 @@ app/javascript/legacy_react/src/components/common/Modal.tsx
 app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx
 app/javascript/legacy_react/src/components/common/ProgressableButton.tsx
 app/javascript/legacy_react/src/components/common/Root.tsx
-app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx
-app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx
 app/javascript/legacy_react/src/components/common/selectable_table_row/connect.tsx
 app/javascript/legacy_react/src/components/common/selectable_table_row/SelectableTableRow.spec.tsx
 app/javascript/legacy_react/src/components/common/selectable_table_row/SelectableTableRow.tsx

.eslintrc.js

@@ -13,14 +13,38 @@ const tsSpecBase = {
 		'plugin:@typescript-eslint/recommended',
 		'plugin:jest/all'
 	],
-	rules:{
+	rules: {
-		"jest/lowercase-name": ["error", { "ignore": ["describe"]}]
+		"jest/lowercase-name": ["error", { "ignore": ["describe"] }]
 	}
 };
 
+
 const tsSpec = _.cloneDeep(tsSpecBase);
 tsSpec['files'] = ['**/*.spec.ts'];
 
+const tsxSpec = _.cloneDeep(tsSpecBase);
+tsxSpec['files'] = ['**/*.spec.tsx'];
+tsxSpec['plugins'] = [...tsxSpec['plugins'], "react"];
+tsxSpec['extends'] = [...tsxSpec['extends'], "plugin:react/recommended"];
+
+
+const tsBase = {
+	parser: '@typescript-eslint/parser',
+	plugins: [
+		'@typescript-eslint',
+	],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		"plugin:react-hooks/recommended",
+	]
+};
+
+const tsSettings = _.cloneDeep(tsBase);
+tsSettings['files'] = ['**/*.ts'];
+
+const tsxSettings = _.cloneDeep(tsBase);
+tsxSettings['files'] = ['**/*.tsx'];
 
 module.exports = {
 	root: true,
@@ -33,18 +57,10 @@ module.exports = {
 				'plugin:node/recommended'
 			],
 		},
-		{
+		tsSpec,
-			"files": ['**/*.ts'],
+		tsxSpec,
-			parser: '@typescript-eslint/parser',
+		tsSettings,
-			plugins: [
+		tsxSettings
-				'@typescript-eslint',
-			],
-			extends: [
-				'eslint:recommended',
-				'plugin:@typescript-eslint/recommended',
-			]
-		},
-		tsSpec
 	],
 	"rules": {
 		"linebreak-style": [
@@ -57,5 +73,10 @@ module.exports = {
 		],
 		"no-trailing-spaces": ["error"],
 		"indent": ["error", "tab"], // we use tabs for accessibility
+	},
+	"settings": {
+		"react": {
+			"version": "detect"
+		},
 	}
 };

app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx

@@ -1,13 +1,14 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
-import 'jest';
+import ScreenReaderOnlyText from './ScreenReaderOnlyText';
-import ScreenReaderOnlyText from './ScreenReaderOnlyText'
 import toJson from 'enzyme-to-json';
 import { shallow } from 'enzyme';
 
 describe('ScreenReaderOnlyText', () => {
-  it('renders properly', () => {
+	it('renders properly', () => {
-    let text = shallow(<ScreenReaderOnlyText>Test</ScreenReaderOnlyText>)
+		expect.hasAssertions();
-    expect(toJson(text)).toMatchSnapshot()
+		const text = shallow(<ScreenReaderOnlyText>Test</ScreenReaderOnlyText>);
-  })
+		// eslint-disable-next-line jest/prefer-inline-snapshots
-})
+		expect(toJson(text)).toMatchSnapshot();
+	});
+});

app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx

@@ -1,26 +1,22 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 
-export interface ScreenReaderOnlyTextProps
-{
-}
 
-class ScreenReaderOnlyText extends React.Component<ScreenReaderOnlyTextProps, {}> {
+class ScreenReaderOnlyText extends React.Component<Record<string,unknown>, Record<string,unknown>> {
 
-
+	render() : JSX.Element {
-  render() {
+		const style:React.CSSProperties = {
-    const style:React.CSSProperties = {
+			position: 'absolute',
-      position: 'absolute',
+			width: '1px',
-      width: '1px',
+			height: '1px',
-      height: '1px',
+			padding: 0,
-      padding: 0,
+			margin: '-1px',
-      margin: '-1px',
+			overflow: 'hidden',
-      overflow: 'hidden',
+			clip: 'rect(0,0,0,0)',
-      clip: 'rect(0,0,0,0)',
+			border: 0
-      border: 0
+		};
-    }
+		return <span style={style}>{this.props.children}</span>;
-    return <span style={style}>{this.props.children}</span>
+	}
-  }
 }
 
 export default ScreenReaderOnlyText;

package.json

@@ -10,7 +10,7 @@
     "ci-build-all": "script/compile-assets.sh && yarn build",
     "test": "rake -v spec  && yarn build && yarn jest",
     "jest": "jest",
-    "eslint": "eslint . --ext .ts,.js,.es6",
+    "eslint": "eslint . --ext .ts,.js,.es6,.tsx",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -62,6 +62,7 @@
     "eslint-plugin-jest": "^23.17.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.20.2",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "fork-ts-checker-webpack-plugin": "^5.0.4",
     "jest": "^24.1.0",
     "jest-enzyme": "^7.0.1",

yarn.lock

@@ -6489,6 +6489,11 @@ eslint-plugin-node@^11.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
+eslint-plugin-react-hooks@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
+  integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
+
 eslint-plugin-react@^7.20.2:
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.2.tgz#b0d72abcd94c59c842338aa09c800808219ea77d"