feat: setup and fix rules from eslint-plugin-react-hooks (#1025)

AmadeusITGroup · Nov 20, 2024 · de19c38 · de19c38
1 parent a7fc146
commit de19c38
Show file tree

Hide file tree

Showing 23 changed files with 145 additions and 105 deletions.
diff --git a/e2e/demo.demo-e2e-spec.ts b/e2e/demo.demo-e2e-spec.ts
@@ -45,19 +45,21 @@ test.describe.parallel('Demo Website', () => {
 			const frames = page.frames();
 			if (frames.length > 1) {
 				const iframes = frames.slice(1);
+				// eslint-disable-next-line playwright/no-conditional-expect
 				await Promise.all(iframes.map((frame) => expect.poll(() => frame.url()).not.toBe('about:blank')));
 				await Promise.all(iframes.map((frame) => frame.waitForURL(frame.url())));
 			}
-			expect((await analyze(page, route)).violations).toEqual([]);
+			expect((await analyze(page)).violations).toEqual([]);
 			await page.evaluate(() => document.documentElement.setAttribute('data-bs-theme', 'dark'));
 			await page.locator('.btn-dark-mode').first().click();
 			await page.locator('.dropdown-menu button:has-text("Dark")').click();
-			expect((await analyze(page, route)).violations).toEqual([]);
+			expect((await analyze(page)).violations).toEqual([]);
 		});
 	}
 });
 
 test.describe('Sitemap', () => {
+	// eslint-disable-next-line playwright/no-skipped-test
 	test.skip(process.env.CI !== 'true', 'sitemap tests for CI only');
 
 	test(`sitemap.xml should contain the blog and framework introduction pages`, async ({page}) => {

diff --git a/e2e/fixture.ts b/e2e/fixture.ts
@@ -43,6 +43,7 @@ export const test = base.extend<FixtureOptions>({
 	},
 	baseURL: [
 		async ({project, framework, sampleKey, sampleInfo}, use) => {
+			// eslint-disable-next-line playwright/no-skipped-test
 			test.skip(project === 'stackblitz' && sampleInfo?.sampleName === 'playground', 'Playground samples are not supported in stackblitz');
 			test.fixme(
 				sampleKey === 'bootstrap/slots/usage',

diff --git a/e2e/focustrack/focustrack.e2e-spec.ts b/e2e/focustrack/focustrack.e2e-spec.ts
@@ -31,6 +31,7 @@ test.describe(`Select tests`, () => {
 		expectedState.activeElements.push('input with id otherFocusableInput');
 		await expect.poll(() => focustrackPO.getState()).toEqual(expectedState);
 
+		// eslint-disable-next-line playwright/no-force-option
 		await focustrackPO.locatorDisabledInput.click({force: true});
 
 		expectedState.activeElements.push('body');

diff --git a/e2e/rating/rating.e2e-spec.ts b/e2e/rating/rating.e2e-spec.ts
@@ -128,6 +128,7 @@ test.describe.parallel(`Rating tests`, () => {
 		};
 		await expect.poll(() => ratingPO.state()).toEqual(expectedState);
 
+		// eslint-disable-next-line playwright/no-force-option
 		await ratingPO.locatorStar(4).click({force: true});
 		await expect.poll(() => ratingPO.state()).toEqual(expectedState);
 	});
@@ -159,6 +160,7 @@ test.describe.parallel(`Rating tests`, () => {
 		await expect.poll(() => ratingDemoPO.formRatingDemoState()).toEqual(expectedState);
 
 		await ratingDemoPO.locatorBtnEnabled.click();
+		// eslint-disable-next-line playwright/no-force-option
 		await ratingPO.locatorStar(2).click({force: true});
 		expectedState = {
 			...expectedState,

diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts
@@ -27,6 +27,7 @@ test.describe(`Samples markup consistency check`, () => {
 	for (const sampleKey of samples) {
 		test.describe(`Sample ${sampleKey}`, () => {
 			test.use({sampleKey});
+			// eslint-disable-next-line playwright/no-skipped-test
 			test.skip(({sampleInfo}) => !sampleInfo, `The sample cannot be tested in this configuration`);
 
 			test(`should have a consistent markup`, async ({page, baseURL}) => {

diff --git a/e2e/slider/slider.e2e-spec.ts b/e2e/slider/slider.e2e-spec.ts
@@ -73,6 +73,7 @@ test.describe(`Slider tests`, () => {
 			const sliderProgressLocator = sliderPO.locatorProgress;
 			const boundingBox = await sliderProgressLocator.boundingBox();
 			// force the click though the progress bar
+			// eslint-disable-next-line playwright/no-force-option
 			await sliderProgressLocator.click({position: {x: boundingBox!.x + boundingBox!.width * 0.5, y: 1}, force: true});
 
 			await expect

diff --git a/e2e/transition/transition.e2e-spec.ts b/e2e/transition/transition.e2e-spec.ts
@@ -74,6 +74,7 @@ test.describe.parallel('Transition tests', () => {
 				if (!scenario.removingDomElement) {
 					await po.locatorRemoveFromDOMCheckbox.click();
 					expectedState.removeFromDOM = false;
+					// eslint-disable-next-line playwright/no-conditional-expect
 					await expect.poll(() => po.getState()).toEqual(expectedState);
 				}
 
@@ -120,6 +121,7 @@ test.describe.parallel('Transition tests', () => {
 				if (!scenario.removingDomElement) {
 					await po.locatorRemoveFromDOMCheckbox.click();
 					expectedState.removeFromDOM = false;
+					// eslint-disable-next-line playwright/no-conditional-expect
 					await expect.poll(() => po.getState()).toEqual(expectedState);
 				}
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -12,6 +12,7 @@ import jsdoc from 'eslint-plugin-jsdoc';
 import react from 'eslint-plugin-react';
 import svelteParser from 'svelte-eslint-parser';
 import angular from 'angular-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
 
 export default tseslint.config(
 	// global ignores
@@ -49,6 +50,10 @@ export default tseslint.config(
 	{
 		...playwright.configs['flat/recommended'],
 		files: ['e2e/**'],
+		rules: {
+			...playwright.configs['flat/recommended'].rules,
+			'playwright/no-conditional-in-test': 'off',
+		},
 	},
 	{
 		files: ['**/*.spec.ts'],
@@ -243,6 +248,13 @@ export default tseslint.config(
 		...react.configs.flat['jsx-runtime'],
 		files: ['react/**/*.{tsx,jsx}'],
 	},
+	{
+		plugins: {
+			['react-hooks']: reactHooks,
+		},
+		rules: reactHooks.configs.recommended.rules,
+		files: ['react/**/*.{tsx,jsx}'],
+	},
 	{
 		files: ['react/headless/src/**'],
 		rules: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
 		"eslint-plugin-jsdoc": "^50.5.0",
 		"eslint-plugin-playwright": "^2.1.0",
 		"eslint-plugin-react": "^7.37.2",
+		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-svelte": "^2.46.0",
 		"express": "^4.21.1",
 		"glob": "11.0.0",
@@ -78,9 +79,6 @@
 	"optionalDependencies": {
 		"@esbuild/darwin-arm64": "0.24.0",
 		"@lmdb/lmdb-win32-x64": "3.1.6",
-		"@rollup/rollup-darwin-arm64": "4.27.3",
-		"@rollup/rollup-darwin-x64": "4.27.3",
-		"@rollup/rollup-win32-x64-msvc": "4.27.3",
 		"@parcel/watcher-android-arm64": "2.5.0",
 		"@parcel/watcher-darwin-arm64": "2.5.0",
 		"@parcel/watcher-darwin-x64": "2.5.0",
@@ -92,7 +90,10 @@
 		"@parcel/watcher-linux-x64-musl": "2.5.0",
 		"@parcel/watcher-win32-arm64": "2.5.0",
 		"@parcel/watcher-win32-ia32": "2.5.0",
-		"@parcel/watcher-win32-x64": "2.5.0"
+		"@parcel/watcher-win32-x64": "2.5.0",
+		"@rollup/rollup-darwin-arm64": "4.27.3",
+		"@rollup/rollup-darwin-x64": "4.27.3",
+		"@rollup/rollup-win32-x64-msvc": "4.27.3"
 	},
 	"scripts": {
 		"build:coverage": "wireit",

diff --git a/react/bootstrap/src/components/accordion/accordion.tsx b/react/bootstrap/src/components/accordion/accordion.tsx
@@ -67,10 +67,10 @@ export const AccordionItem: ForwardRefExoticComponent<Partial<AccordionItemProps
 			structure: AccordionItemDefaultSlotStructure,
 		});
 		const {state, api, directives} = widgetContext;
-		useImperativeHandle(ref, () => api, []);
+		useImperativeHandle(ref, () => api, [api]);
 		useEffect(() => {
 			api.initDone();
-		}, []);
+		}, [api]);
 		return (
 			<div {...useDirectives([classDirective, `accordion-item ${state.className}`], directives.itemDirective)}>
 				<Slot slotContent={state.structure} props={widgetContext} />
@@ -95,7 +95,7 @@ export const AccordionItem: ForwardRefExoticComponent<Partial<AccordionItemProps
 export const Accordion: ForwardRefExoticComponent<PropsWithChildren<Partial<AccordionProps>> & RefAttributes<AccordionApi>> = forwardRef(
 	function Accordion(props: PropsWithChildren<Partial<AccordionProps>>, ref: ForwardedRef<AccordionApi>) {
 		const widget = useWidgetWithConfig(createAccordion, props, 'accordion');
-		useImperativeHandle(ref, () => widget.api, []);
+		useImperativeHandle(ref, () => widget.api, [widget.api]);
 		return (
 			<AccordionDIContext.Provider value={widget.api}>
 				<div {...useDirectives([classDirective, 'accordion'], widget.directives.accordionDirective)}>{props.children}</div>

diff --git a/react/bootstrap/src/components/alert/alert.tsx b/react/bootstrap/src/components/alert/alert.tsx
@@ -56,6 +56,6 @@ export const Alert: ForwardRefExoticComponent<Partial<AlertProps> & RefAttribute
 	const widgetContext = useWidgetWithConfig(createAlert, props, 'alert', {
 		structure: AlertDefaultSlotStructure,
 	});
-	useImperativeHandle(ref, () => widgetContext.api, []);
+	useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
 	return <>{!widgetContext.state.hidden && <AlertElement {...widgetContext} />}</>;
 });
diff --git a/react/bootstrap/src/components/collapse/collapse.tsx b/react/bootstrap/src/components/collapse/collapse.tsx
@@ -20,7 +20,7 @@ import {useDirectives} from '@agnos-ui/react-headless/utils/directive';
 export const Collapse: ForwardRefExoticComponent<PropsWithChildren<Partial<CollapseProps>> & RefAttributes<CollapseApi>> = forwardRef(
 	function Collapse(props: PropsWithChildren<Partial<CollapseProps>>, ref: ForwardedRef<CollapseApi>) {
 		const {api, directives} = useWidgetWithConfig(createCollapse, props, 'collapse');
-		useImperativeHandle(ref, () => api, []);
+		useImperativeHandle(ref, () => api, [api]);
 
 		return <div {...useDirectives(directives.collapseDirective)}>{props.children}</div>;
 	},

diff --git a/react/bootstrap/src/components/modal/modal.tsx b/react/bootstrap/src/components/modal/modal.tsx
@@ -85,7 +85,7 @@ export const Modal = forwardRef(function Modal<Data>(props: Partial<ModalProps<D
 		header: ModalDefaultSlotHeader,
 		structure: ModalDefaultSlotStructure,
 	});
-	useImperativeHandle(ref, () => widgetContext.api, []);
+	useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
 	return (
 		<Portal container={widgetContext.state.container}>
 			{!widgetContext.state.backdropHidden && <BackdropElement {...widgetContext} />}

diff --git a/react/bootstrap/src/components/toast/toast.tsx b/react/bootstrap/src/components/toast/toast.tsx
@@ -6,12 +6,14 @@ import {useWidgetWithConfig} from '../../config';
 import type {ToastApi, ToastContext, ToastProps} from './toast.gen';
 import {createToast} from './toast.gen';
 
+const ToastHeaderContent = (slotContext: ToastContext) => (
+	<button {...useDirectives([classDirective, 'btn-close me-0 ms-auto'], slotContext.directives.closeButtonDirective)} />
+);
+
 const ToastHeader = (slotContext: ToastContext) => (
 	<div className="toast-header">
 		<Slot slotContent={slotContext.state.header} props={slotContext} />
-		{slotContext.state.dismissible && (
-			<button {...useDirectives([classDirective, 'btn-close me-0 ms-auto'], slotContext.directives.closeButtonDirective)} />
-		)}
+		{slotContext.state.dismissible && <ToastHeaderContent {...slotContext} />}
 	</div>
 );
 
@@ -69,7 +71,7 @@ export const Toast: ForwardRefExoticComponent<Partial<ToastProps> & RefAttribute
 		structure: ToastDefaultSlotStructure,
 		children: props.children,
 	});
-	useImperativeHandle(ref, () => widgetContext.api, []);
+	useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
 
 	return <>{!widgetContext.state.hidden && <ToastElement {...widgetContext} />}</>;
 });