Add "show company / people" view and "Notes" concept (#528)

* Begin adding show view and refactoring threads to become notes

* Progress on design

* Progress redesign timeline

* Dropdown button, design improvement

* Open comment thread edit mode in drawer

* Autosave local storage and commentThreadcount

* Improve display and fix missing key issue

* Remove some hardcoded CSS properties

* Create button

* Split company show into ui/business + fix eslint

* Fix font weight

* Begin auto-save on edit mode

* Save server-side query result to Apollo cache

* Fix save behavior

* Refetch timeline after creating note

* Rename createCommentThreadWithComment

* Improve styling

* Revert "Improve styling"

This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0.

* Improve CSS styling

* Bring back border radius inadvertently removed

* padding adjustment

* Improve blocknote design

* Improve edit mode display

* Remove Comments.tsx

* Remove irrelevant comment stories

* Removed un-necessary panel component

* stop using fragment, move trash icon

* Add a basic story for CompanyShow

* Add a basic People show view

* Fix storybook tests

* Add very basic Person story

* Refactor PR1

* Refactor part 2

* Refactor part 3

* Refactor part 4

* Fix tests

---------

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

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

@@ -7,7 +7,7 @@ const onOutsideClick = jest.fn();
 
 function TestComponent() {
   const buttonRef = useRef(null);
-  useOutsideAlerter(buttonRef, onOutsideClick);
+  useOutsideAlerter({ ref: buttonRef, callback: onOutsideClick });
 
   return (
     <div>

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

@@ -1,21 +1,52 @@
 import { useEffect } from 'react';
 
-declare type CallbackType = () => void;
+export enum OutsideClickAlerterMode {
+  absolute = 'absolute',
+  dom = 'dom',
+}
 
-export function useOutsideAlerter(
-  ref: React.RefObject<HTMLInputElement>,
-  callback: CallbackType,
-) {
+type OwnProps = {
+  ref: React.RefObject<HTMLInputElement>;
+  callback: () => void;
+  mode?: OutsideClickAlerterMode;
+};
+
+export function useOutsideAlerter({
+  ref,
+  mode = OutsideClickAlerterMode.dom,
+  callback,
+}: OwnProps) {
   useEffect(() => {
-    function handleClickOutside(event: Event) {
+    function handleClickOutside(event: MouseEvent) {
       const target = event.target as HTMLButtonElement;
-      if (ref.current && !ref.current.contains(target)) {
+
+      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]);
+  }, [ref, callback, mode]);
 }