From fb860884857da73ee5b5e897745301cdf1d770a2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 5 Oct 2023 18:58:30 +0200
Subject: refactor(components): make form components compliant with Eslint
 rules

---
 .../molecules/forms/switch/switch.stories.tsx      |  6 +--
 .../molecules/forms/switch/switch.test.tsx         | 12 ++---
 src/components/molecules/forms/switch/switch.tsx   | 55 +++++++++++++++-------
 3 files changed, 46 insertions(+), 27 deletions(-)

(limited to 'src/components/molecules/forms/switch')

diff --git a/src/components/molecules/forms/switch/switch.stories.tsx b/src/components/molecules/forms/switch/switch.stories.tsx
index eb169ad..a88e6ab 100644
--- a/src/components/molecules/forms/switch/switch.stories.tsx
+++ b/src/components/molecules/forms/switch/switch.stories.tsx
@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Switch as SwitchComponent, SwitchOption } from './switch';
-import { ChangeEventHandler, useCallback, useState } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type ChangeEventHandler, useCallback, useState } from 'react';
 import { Legend } from '../../../atoms';
+import { Switch as SwitchComponent, type SwitchOption } from './switch';
 
 /**
  * Switch - Storybook Meta
diff --git a/src/components/molecules/forms/switch/switch.test.tsx b/src/components/molecules/forms/switch/switch.test.tsx
index 3d091cb..e2e27be 100644
--- a/src/components/molecules/forms/switch/switch.test.tsx
+++ b/src/components/molecules/forms/switch/switch.test.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '@testing-library/react';
 import { Legend } from '../../../atoms';
-import { Switch, SwitchOption } from './switch';
+import { Switch, type SwitchOption } from './switch';
 
 const doNothing = () => {
   /* Do nothing. */
@@ -27,9 +27,9 @@ describe('Switch', () => {
     );
 
     expect(
-      screen.getByRole('radiogroup', { name: legend })
+      rtlScreen.getByRole('radiogroup', { name: legend })
     ).toBeInTheDocument();
-    expect(screen.getAllByRole('radio')).toHaveLength(items.length);
+    expect(rtlScreen.getAllByRole('radio')).toHaveLength(items.length);
   });
 
   it('can render a disabled switch', () => {
@@ -43,8 +43,8 @@ describe('Switch', () => {
       />
     );
 
-    const radios = screen.getAllByRole<HTMLInputElement>('radio');
+    const radios = rtlScreen.getAllByRole<HTMLInputElement>('radio');
     expect(radios.every((radio) => radio.disabled)).toBe(true);
-    expect(screen.getByRole('radiogroup')).toBeDisabled();
+    expect(rtlScreen.getByRole('radiogroup')).toBeDisabled();
   });
 });
diff --git a/src/components/molecules/forms/switch/switch.tsx b/src/components/molecules/forms/switch/switch.tsx
index d340a0c..df2ba0c 100644
--- a/src/components/molecules/forms/switch/switch.tsx
+++ b/src/components/molecules/forms/switch/switch.tsx
@@ -1,14 +1,21 @@
-import type { FC, ChangeEventHandler, ReactNode, ReactElement } from 'react';
+import {
+  type FC,
+  type ChangeEventHandler,
+  type ReactNode,
+  type ReactElement,
+  forwardRef,
+  type ForwardRefRenderFunction,
+} from 'react';
 import {
   Fieldset,
   type FieldsetProps,
-  LabelProps,
-  RadioProps,
+  type LabelProps,
+  type RadioProps,
   Label,
   Radio,
 } from '../../../atoms';
+import type { TooltipProps } from '../../tooltip';
 import styles from './switch.module.scss';
-import { TooltipProps } from '../../tooltip';
 
 type SwitchItemProps = Omit<LabelProps, 'children' | 'htmlFor' | 'isRequired'> &
   Pick<RadioProps, 'isDisabled' | 'name'> & {
@@ -94,24 +101,31 @@ export type SwitchProps = Omit<FieldsetProps, 'children'> & {
   value: SwitchOption['value'];
 };
 
-/**
- * Switch component.
- */
-export const Switch: FC<SwitchProps> = ({
-  className = '',
-  isDisabled = false,
-  items,
-  name,
-  onSwitch,
-  tooltip,
-  value,
-  ...props
-}) => {
+const SwitchWithRef: ForwardRefRenderFunction<
+  HTMLFieldSetElement,
+  SwitchProps
+> = (
+  {
+    className = '',
+    isDisabled = false,
+    items,
+    name,
+    onSwitch,
+    tooltip,
+    value,
+    ...props
+  },
+  ref
+) => {
+  const fieldsetClass = `${styles.fieldset} ${className}`;
+
   return (
     <Fieldset
       {...props}
-      className={`${styles.fieldset} ${className}`}
+      className={fieldsetClass}
       isDisabled={isDisabled}
+      ref={ref}
+      // eslint-disable-next-line react/jsx-no-literals -- Role allowed
       role="radiogroup"
     >
       {tooltip}
@@ -130,3 +144,8 @@ export const Switch: FC<SwitchProps> = ({
     </Fieldset>
   );
 };
+
+/**
+ * Switch component.
+ */
+export const Switch = forwardRef(SwitchWithRef);
-- 
cgit v1.2.3