Lucas/refactored table state with recoil (#149)

* Fixed ActionBar paddings and added transition on button hover

* Added recoil library for state management

* Refactor table state with recoil :

- Removed table internal states
- Added refetchQueries to plug apollo store directly into tables
- Added an action bar component that manages itself
- Use recoil state and selector for row selection
- Refactored Companies and People tables

* Moved hook

* Cleaned some files

* Fix bug infinite re-compute table row selection

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,34 +0,0 @@
-import React, { useEffect } from 'react';
-import { isDefined } from '../../utils/type-guards/isDefined';
-
-export function useListenClickOutsideArrayOfRef<T extends HTMLElement>(
-  arrayOfRef: Array<React.RefObject<T>>,
-  outsideClickCallback: (event?: MouseEvent) => void,
-) {
-  useEffect(() => {
-    function handleClickOutside(event: any) {
-      const clickedOnAtLeastOneRef = arrayOfRef
-        .filter((ref) => !!ref.current)
-        .some((ref) => ref.current?.contains(event.target as Node));
-
-      if (!clickedOnAtLeastOneRef) {
-        outsideClickCallback(event);
-      }
-    }
-
-    const hasAtLeastOneRefDefined = arrayOfRef.some((ref) =>
-      isDefined(ref.current),
-    );
-
-    if (hasAtLeastOneRefDefined) {
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('touchstart', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [arrayOfRef, outsideClickCallback]);
-}