Feat/single entity select relation picker (#345)

* - Implemented recoil scoped state
- Implemented SingleEntitySelect
- Implemented keyboard shortcut up/down select

* Added useRecoilScopedValue

* Fix storybook

* Fix storybook

* Fix storybook

* Fix storybook

---------

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

front/src/modules/ui/components/editable-cell/EditableCellV2.tsx

@@ -0,0 +1,71 @@
+import { ReactElement } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+
+import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
+
+import { isEditModeScopedState } from './states/isEditModeScopedState';
+import { EditableCellDisplayMode } from './EditableCellDisplayMode';
+import { EditableCellEditMode } from './EditableCellEditMode';
+
+export const CellBaseContainer = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+  position: relative;
+  user-select: none;
+  width: 100%;
+`;
+
+type OwnProps = {
+  editModeContent: ReactElement;
+  nonEditModeContent: ReactElement;
+  editModeHorizontalAlign?: 'left' | 'right';
+  editModeVerticalPosition?: 'over' | 'below';
+};
+
+export function EditableCellV2({
+  editModeHorizontalAlign = 'left',
+  editModeVerticalPosition = 'over',
+  editModeContent,
+  nonEditModeContent,
+}: OwnProps) {
+  const [isEditMode, setIsEditMode] = useRecoilScopedState(
+    isEditModeScopedState,
+  );
+  const [isSomeInputInEditMode, setIsSomeInputInEditMode] = useRecoilState(
+    isSomeInputInEditModeState,
+  );
+
+  function handleOnClick() {
+    if (!isSomeInputInEditMode) {
+      setIsSomeInputInEditMode(true);
+      setIsEditMode(true);
+    }
+  }
+
+  function handleOnOutsideClick() {
+    setIsEditMode(false);
+  }
+
+  return (
+    <CellBaseContainer onClick={handleOnClick}>
+      {isEditMode ? (
+        <EditableCellEditMode
+          editModeHorizontalAlign={editModeHorizontalAlign}
+          editModeVerticalPosition={editModeVerticalPosition}
+          isEditMode={isEditMode}
+          onOutsideClick={handleOnOutsideClick}
+        >
+          {editModeContent}
+        </EditableCellEditMode>
+      ) : (
+        <EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
+      )}
+    </CellBaseContainer>
+  );
+}

front/src/modules/ui/components/editable-cell/states/isCreateModeScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isCreateModeScopedState = atomFamily<boolean, string>({
+  key: 'isCreateModeScopedState',
+  default: false,
+});

front/src/modules/ui/components/editable-cell/states/isEditModeScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isEditModeScopedState = atomFamily<boolean, string>({
+  key: 'isEditModeScopedState',
+  default: false,
+});

front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -10,12 +10,17 @@ import { DropdownMenuButton } from './DropdownMenuButton';
 type Props = {
   selected: boolean;
   onClick: () => void;
+  hovered?: boolean;
 };
 
 const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
   ${hoverBackground};
 
   align-items: center;
+
+  background: ${(props) =>
+    props.hovered ? props.theme.lightBackgroundTransparent : 'transparent'};
+
   display: flex;
   justify-content: space-between;
 `;
@@ -35,10 +40,24 @@ export function DropdownMenuSelectableItem({
   selected,
   onClick,
   children,
+  hovered,
 }: React.PropsWithChildren<Props>) {
   const theme = useTheme();
+
+  useEffect(() => {
+    if (hovered) {
+      window.scrollTo({
+        behavior: 'smooth',
+      });
+    }
+  }, [hovered]);
+
   return (
-    <DropdownMenuSelectableItemContainer onClick={onClick} selected={selected}>
+    <DropdownMenuSelectableItemContainer
+      onClick={onClick}
+      selected={selected}
+      hovered={hovered}
+    >
       <StyledLeftContainer>{children}</StyledLeftContainer>
       <StyledRightIcon>
         {selected && <IconCheck size={theme.iconSizeMedium} />}

front/src/modules/ui/components/select-entity/SelectSingleEntity.tsx

@@ -1,3 +0,0 @@
-export function SelectSingleEntity() {
-  return <></>;
-}