Improve test coverage and refactor storybook arch (#723)

* Improve test coverage and refactor storybook arch

* Fix coverage

* Fix tests

* Fix lint

* Fix lint

front/src/modules/ui/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx

@@ -0,0 +1,39 @@
+import { useRef } from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { useListenClickOutsideArrayOfRef } from '../useListenClickOutsideArrayOfRef';
+
+const onOutsideClick = jest.fn();
+
+function TestComponentDomMode() {
+  const buttonRef = useRef(null);
+  const buttonRef2 = useRef(null);
+  useListenClickOutsideArrayOfRef({
+    refs: [buttonRef, buttonRef2],
+    callback: onOutsideClick,
+  });
+
+  return (
+    <div>
+      <span>Outside</span>
+      <button ref={buttonRef}>Inside</button>
+      <button ref={buttonRef2}>Inside 2</button>
+    </div>
+  );
+}
+
+test('useListenClickOutsideArrayOfRef hook works in dom mode', async () => {
+  const { getByText } = render(<TestComponentDomMode />);
+  const inside = getByText('Inside');
+  const inside2 = getByText('Inside 2');
+  const outside = getByText('Outside');
+
+  fireEvent.click(inside);
+  expect(onOutsideClick).toHaveBeenCalledTimes(0);
+
+  fireEvent.click(inside2);
+  expect(onOutsideClick).toHaveBeenCalledTimes(0);
+
+  fireEvent.click(outside);
+  expect(onOutsideClick).toHaveBeenCalledTimes(1);
+});

front/src/modules/ui/hooks/__tests__/useOutsideAlerter.test.tsx

@@ -1,31 +0,0 @@
-import { useRef } from 'react';
-import { act } from 'react-dom/test-utils';
-import { fireEvent, render } from '@testing-library/react';
-
-import { useOutsideAlerter } from '../useOutsideAlerter';
-const onOutsideClick = jest.fn();
-
-function TestComponent() {
-  const buttonRef = useRef(null);
-  useOutsideAlerter({ ref: buttonRef, callback: onOutsideClick });
-
-  return (
-    <div>
-      <span>Outside</span>
-      <button ref={buttonRef}>Inside</button>
-    </div>
-  );
-}
-
-test('useOutsideAlerter hook works properly', async () => {
-  const { getByText } = render(<TestComponent />);
-  const inside = getByText('Inside');
-  const outside = getByText('Outside');
-  await act(() => Promise.resolve());
-
-  fireEvent.mouseDown(inside);
-  expect(onOutsideClick).toHaveBeenCalledTimes(0);
-
-  fireEvent.mouseDown(outside);
-  expect(onOutsideClick).toHaveBeenCalledTimes(1);
-});

front/src/modules/ui/hooks/useListenClickOutsideArrayOfRef.ts

@@ -2,34 +2,75 @@ import React, { useEffect } from 'react';
 
 import { isDefined } from '~/utils/isDefined';
 
-export function useListenClickOutsideArrayOfRef<T extends Element>(
-  arrayOfRef: Array<React.RefObject<T>>,
-  outsideClickCallback: (event?: MouseEvent | TouchEvent) => void,
-) {
+export enum ClickOutsideMode {
+  absolute = 'absolute',
+  dom = 'dom',
+}
+
+export function useListenClickOutsideArrayOfRef<T extends Element>({
+  refs,
+  callback,
+  mode = ClickOutsideMode.dom,
+}: {
+  refs: Array<React.RefObject<T>>;
+  callback: (event?: MouseEvent | TouchEvent) => void;
+  mode?: ClickOutsideMode;
+}) {
   useEffect(() => {
     function handleClickOutside(event: MouseEvent | TouchEvent) {
-      const clickedOnAtLeastOneRef = arrayOfRef
-        .filter((ref) => !!ref.current)
-        .some((ref) => ref.current?.contains(event.target as Node));
+      if (mode === ClickOutsideMode.dom) {
+        const clickedOnAtLeastOneRef = refs
+          .filter((ref) => !!ref.current)
+          .some((ref) => ref.current?.contains(event.target as Node));
 
-      if (!clickedOnAtLeastOneRef) {
-        outsideClickCallback(event);
+        if (!clickedOnAtLeastOneRef) {
+          callback(event);
+        }
+      }
+
+      if (mode === ClickOutsideMode.absolute) {
+        const clickedOnAtLeastOneRef = refs
+          .filter((ref) => !!ref.current)
+          .some((ref) => {
+            if (!ref.current) {
+              return false;
+            }
+
+            const { x, y, width, height } = ref.current.getBoundingClientRect();
+
+            const clientX =
+              'clientX' in event ? event.clientX : event.touches[0].clientX;
+            const clientY =
+              'clientY' in event ? event.clientY : event.touches[0].clientY;
+
+            console.log(clientX, clientY, x, y, width, height);
+
+            if (
+              clientX < x ||
+              clientX > x + width ||
+              clientY < y ||
+              clientY > y + height
+            ) {
+              return false;
+            }
+            return true;
+          });
+        if (!clickedOnAtLeastOneRef) {
+          callback(event);
+        }
       }
     }
 
-    const hasAtLeastOneRefDefined = arrayOfRef.some((ref) =>
-      isDefined(ref.current),
-    );
+    const hasAtLeastOneRefDefined = refs.some((ref) => isDefined(ref.current));
 
     if (hasAtLeastOneRefDefined) {
-      document.addEventListener('mouseup', handleClickOutside);
+      document.addEventListener('click', handleClickOutside);
       document.addEventListener('touchend', handleClickOutside);
     }
 
     return () => {
-      document.removeEventListener('mouseup', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
       document.removeEventListener('touchend', handleClickOutside);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [arrayOfRef, outsideClickCallback]);
+  }, [refs, callback, mode]);
 }

front/src/modules/ui/hooks/useOutsideAlerter.ts

@@ -1,52 +0,0 @@
-import { useEffect } from 'react';
-
-export enum OutsideClickAlerterMode {
-  absolute = 'absolute',
-  dom = 'dom',
-}
-
-type OwnProps = {
-  ref: React.RefObject<HTMLInputElement>;
-  callback: () => void;
-  mode?: OutsideClickAlerterMode;
-};
-
-export function useOutsideAlerter({
-  ref,
-  mode = OutsideClickAlerterMode.dom,
-  callback,
-}: OwnProps) {
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      const target = event.target as HTMLButtonElement;
-
-      if (!ref.current) {
-        return;
-      }
-
-      if (
-        mode === OutsideClickAlerterMode.dom &&
-        !ref.current.contains(target)
-      ) {
-        callback();
-      }
-
-      if (mode === OutsideClickAlerterMode.absolute) {
-        const { x, y, width, height } = ref.current.getBoundingClientRect();
-        const { clientX, clientY } = event;
-        if (
-          clientX < x ||
-          clientX > x + width ||
-          clientY < y ||
-          clientY > y + height
-        ) {
-          callback();
-        }
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [ref, callback, mode]);
-}