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/hooks/RecoilScope.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { v4 } from 'uuid';
+
+import { RecoilScopeContext } from './RecoilScopeContext';
+
+export function RecoilScope({ children }: { children: React.ReactNode }) {
+  const [currentScopeId] = useState(v4());
+
+  return (
+    <RecoilScopeContext.Provider value={currentScopeId}>
+      {children}
+    </RecoilScopeContext.Provider>
+  );
+}

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

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const RecoilScopeContext = createContext<string | null>(null);

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

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import { RecoilState, useRecoilState } from 'recoil';
+
+import { RecoilScopeContext } from './RecoilScopeContext';
+
+export function useRecoilScopedState<T>(
+  recoilState: (param: string) => RecoilState<T>,
+) {
+  const recoilScopeId = useContext(RecoilScopeContext);
+
+  if (!recoilScopeId)
+    throw new Error(
+      `Using a scoped atom without a RecoilScope : ${recoilState('').key}`,
+    );
+
+  return useRecoilState<T>(recoilState(recoilScopeId));
+}

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

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import { RecoilState, useRecoilValue } from 'recoil';
+
+import { RecoilScopeContext } from './RecoilScopeContext';
+
+export function useRecoilScopedValue<T>(
+  recoilState: (param: string) => RecoilState<T>,
+) {
+  const recoilScopeId = useContext(RecoilScopeContext);
+
+  if (!recoilScopeId)
+    throw new Error(
+      `Using a scoped atom without a RecoilScope : ${recoilState('').key}`,
+    );
+
+  return useRecoilValue<T>(recoilState(recoilScopeId));
+}