Eslint add plugin react + react-hooks and move plugins to root of pro…

…ject (#1493)

* Adding react to eslint config and adding plugins to the root of the repo

.eslintrc.cjs

@@ -47,5 +47,18 @@ module.exports = {
 			},
 		},
 	],
-	extends: ['plugin:storybook/recommended'],
+	rules: {
+		'react/no-unknown-property': ['error', { ignore: ['css'] }],
+	},
+	extends: [
+		'plugin:storybook/recommended',
+		'plugin:react/recommended',
+		'plugin:react/jsx-runtime',
+		'plugin:react-hooks/recommended',
+	],
+	settings: {
+		react: {
+			version: 'detect',
+		},
+	},
 };

libs/@guardian/source-development-kitchen/src/react-components/expanding-wrapper/ExpandingWrapper.tsx

@@ -45,7 +45,7 @@ export const ExpandingWrapper: FC<ExpandingWrapperProps> = ({
 
 	useEffect(() => {
 		disableTabbingWhenCollapsed && setTabIndex(name, isExpanded);
-	}, [disableTabbingWhenCollapsed, isExpanded]);
+	}, [disableTabbingWhenCollapsed, isExpanded, name]);
 
 	useEffect(() => {
 		expandCallback?.(isExpanded);

libs/@guardian/source/src/foundations/typography/stories/TypographyPresets.tsx

@@ -44,10 +44,10 @@ const propertiesCss = css`
 
 export const TypographyPresets = () => (
 	<ul css={listCss}>
-		{Object.entries(presets).map(([preset, styles]) => {
+		{Object.entries(presets).map(([preset, styles], index) => {
 			const token = typographyPresets[preset as Preset];
 			return (
-				<li>
+				<li key={`preset-${index}`}>
 					<span css={presetNameCss}>{preset}</span>
 					<span css={specimenCss}>
 						<dl css={propertiesCss}>
@@ -71,7 +71,7 @@ export const TypographyPresets = () => (
 								${styles}
 							`}
 						>
-							For facts' sake
+							For facts&apos; sake
 						</span>
 					</span>
 				</li>

libs/@guardian/source/src/react-components/accordion/AccordionRow.tsx

@@ -94,7 +94,7 @@ export const AccordionRow = ({
 
 	useEffect(() => {
 		setIsBrowser(true);
-	});
+	}, []);
 
 	if (isBrowser) {
 		return (

package.json

@@ -15,11 +15,16 @@
 		"@guardian/prettier": "workspace:*",
 		"@manypkg/get-packages": "2.2.0",
 		"@types/node": "20.12.11",
-		"@typescript-eslint/parser": "6.21.0",
+		"@typescript-eslint/eslint-plugin": "7.3.1",
+		"@typescript-eslint/parser": "7.3.1",
 		"colorette": "2.0.20",
 		"eslint": "8.56.0",
-		"eslint-plugin-storybook": "^0.6.15",
-		"fast-glob": "^3.3.2",
+		"eslint-plugin-eslint-comments": "3.2.0",
+		"eslint-plugin-import": "2.29.1",
+		"eslint-plugin-react": "7.34.1",
+		"eslint-plugin-react-hooks": "4.6.2",
+		"eslint-plugin-storybook": "0.6.15",
+		"fast-glob": "3.3.2",
 		"husky": "9.0.6",
 		"lint-staged": "15.2.0",
 		"prettier": "3.2.2",