Introduce ComponentState (#4386)

* Proof of concept ComponentState * Migrate to createState and createFamilyState * Refactor * Fix * Fix tests * Fix lint * Fix tests * Re-enable coverage
2024-03-09 11:31:00 +01:00
parent 17511be0cf
commit 86c0f311f5
451 changed files with 1718 additions and 2557 deletions
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts
@ -13,7 +13,7 @@ export const usePreviousHotkeyScope = () => {
    ({ snapshot, set }) =>
      () => {
        const previousHotkeyScope = snapshot
-          .getLoadable(previousHotkeyScopeState)
+          .getLoadable(previousHotkeyScopeState())
          .getValue();

        if (!previousHotkeyScope) {
@ -25,7 +25,7 @@ export const usePreviousHotkeyScope = () => {
          previousHotkeyScope.customScopes,
        );

-        set(previousHotkeyScopeState, null);
+        set(previousHotkeyScopeState(), null);
      },
    [setHotkeyScope],
  );
@ -34,11 +34,11 @@ export const usePreviousHotkeyScope = () => {
    ({ snapshot, set }) =>
      (scope: string, customScopes?: CustomHotkeyScopes) => {
        const currentHotkeyScope = snapshot
-          .getLoadable(currentHotkeyScopeState)
+          .getLoadable(currentHotkeyScopeState())
          .getValue();

        setHotkeyScope(scope, customScopes);
-        set(previousHotkeyScopeState, currentHotkeyScope);
+        set(previousHotkeyScopeState(), currentHotkeyScope);
      },
    [setHotkeyScope],
  );
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts
@ -24,7 +24,7 @@ export const useScopedHotkeyCallback = () =>
        preventDefault?: boolean;
      }) => {
        const currentHotkeyScopes = snapshot
-          .getLoadable(internalHotkeysEnabledScopesState)
+          .getLoadable(internalHotkeysEnabledScopesState())
          .getValue();

        if (!currentHotkeyScopes.includes(scope)) {
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts
@ -22,7 +22,8 @@ export const useScopedHotkeys = (
    preventDefault: true,
  },
 ) => {
-  const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
+  const [pendingHotkey, setPendingHotkey] =
+    useRecoilState(pendingHotkeyState());

  const callScopedHotkeyCallback = useScopedHotkeyCallback();

--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts
@ -20,7 +20,8 @@ export const useSequenceHotkeys = (
  },
  deps: any[] = [],
 ) => {
-  const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
+  const [pendingHotkey, setPendingHotkey] =
+    useRecoilState(pendingHotkeyState());

  const callScopedHotkeyCallback = useScopedHotkeyCallback();

--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts
@ -26,7 +26,7 @@ export const useSetHotkeyScope = () =>
    ({ snapshot, set }) =>
      async (hotkeyScopeToSet: string, customScopes?: CustomHotkeyScopes) => {
        const currentHotkeyScope = snapshot
-          .getLoadable(currentHotkeyScopeState)
+          .getLoadable(currentHotkeyScopeState())
          .getValue();

        if (currentHotkeyScope.scope === hotkeyScopeToSet) {
@ -76,8 +76,8 @@ export const useSetHotkeyScope = () =>
        }

        scopesToSet.push(newHotkeyScope.scope);
-        set(internalHotkeysEnabledScopesState, scopesToSet);
-        set(currentHotkeyScopeState, newHotkeyScope);
+        set(internalHotkeysEnabledScopesState(), scopesToSet);
+        set(currentHotkeyScopeState(), newHotkeyScope);
      },
    [],
  );
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
@ -1,9 +1,9 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

 import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope';
 import { HotkeyScope } from '../../types/HotkeyScope';

-export const currentHotkeyScopeState = atom<HotkeyScope>({
+export const currentHotkeyScopeState = createState<HotkeyScope>({
  key: 'currentHotkeyScopeState',
-  default: INITIAL_HOTKEYS_SCOPE,
+  defaultValue: INITIAL_HOTKEYS_SCOPE,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const internalHotkeysEnabledScopesState = atom<string[]>({
+export const internalHotkeysEnabledScopesState = createState<string[]>({
  key: 'internalHotkeysEnabledScopesState',
-  default: [],
+  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
@ -1,7 +1,8 @@
 import { Keys } from 'react-hotkeys-hook/dist/types';
-import { atom } from 'recoil';

-export const pendingHotkeyState = atom<Keys | null>({
+import { createState } from '@/ui/utilities/state/utils/createState';
+
+export const pendingHotkeyState = createState<Keys | null>({
  key: 'pendingHotkeyState',
-  default: null,
+  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
@ -1,8 +1,8 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

 import { HotkeyScope } from '../../types/HotkeyScope';

-export const previousHotkeyScopeState = atom<HotkeyScope | null>({
+export const previousHotkeyScopeState = createState<HotkeyScope | null>({
  key: 'previousHotkeyScopeState',
-  default: null,
+  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const currentPageLocationState = atom<string>({
+export const currentPageLocationState = createState<string>({
  key: 'currentPageLocationState',
-  default: '',
+  defaultValue: '',
 });
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts
@ -1,25 +1,25 @@
-import { clickOutsideListenerCallbacksStateScopeMap } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap';
-import { clickOutsideListenerIsActivatedStateScopeMap } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap';
-import { clickOutsideListenerIsMouseDownInsideStateScopeMap } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap';
+import { clickOutsideListenerCallbacksComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState';
+import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
+import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
 import { lockedListenerIdState } from '@/ui/utilities/pointer-event/states/lockedListenerIdState';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
-import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';

 export const useClickOustideListenerStates = (componentId: string) => {
  const scopeId = getScopeIdFromComponentId(componentId);

  return {
    scopeId,
-    getClickOutsideListenerCallbacksState: getState(
-      clickOutsideListenerCallbacksStateScopeMap,
+    getClickOutsideListenerCallbacksState: extractComponentState(
+      clickOutsideListenerCallbacksComponentState,
      scopeId,
    ),
-    getClickOutsideListenerIsMouseDownInsideState: getState(
-      clickOutsideListenerIsMouseDownInsideStateScopeMap,
+    getClickOutsideListenerIsMouseDownInsideState: extractComponentState(
+      clickOutsideListenerIsMouseDownInsideComponentState,
      scopeId,
    ),
-    getClickOutsideListenerIsActivatedState: getState(
-      clickOutsideListenerIsActivatedStateScopeMap,
+    getClickOutsideListenerIsActivatedState: extractComponentState(
+      clickOutsideListenerIsActivatedComponentState,
      scopeId,
    ),
    lockedListenerIdState,
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts
@ -0,0 +1,9 @@
+import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const clickOutsideListenerCallbacksComponentState = createComponentState<
+  ClickOutsideListenerCallback[]
+>({
+  key: 'clickOutsideListenerCallbacksComponentState',
+  defaultValue: [],
+});
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap.ts
@ -1,9 +0,0 @@
-import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const clickOutsideListenerCallbacksStateScopeMap = createStateScopeMap<
-  ClickOutsideListenerCallback[]
->({
-  key: 'clickOutsideListenerCallbacksStateScopeMap',
-  defaultValue: [],
-});
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts
@ -0,0 +1,7 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const clickOutsideListenerIsActivatedComponentState =
+  createComponentState<boolean>({
+    key: 'clickOutsideListenerIsActivatedComponentState',
+    defaultValue: true,
+  });
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap.ts
@ -1,7 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const clickOutsideListenerIsActivatedStateScopeMap =
-  createStateScopeMap<boolean>({
-    key: 'clickOutsideListenerIsActivatedStateScopeMap',
-    defaultValue: true,
-  });
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts
@ -0,0 +1,7 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const clickOutsideListenerIsMouseDownInsideComponentState =
+  createComponentState<boolean>({
+    key: 'clickOutsideListenerIsMouseDownInsideComponentState',
+    defaultValue: false,
+  });
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap.ts
@ -1,7 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const clickOutsideListenerIsMouseDownInsideStateScopeMap =
-  createStateScopeMap<boolean>({
-    key: 'clickOutsideListenerIsMouseDownInsideStateScopeMap',
-    defaultValue: false,
-  });
--- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const lockedListenerIdState = atom<string | null>({
+export const lockedListenerIdState = createState<string | null>({
  key: 'lockedListenerIdState',
-  default: null,
+  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedFamilyState.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedFamilyState.test.tsx
@ -1,64 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot, RecoilState } from 'recoil';
-import { undefined } from 'zod';
-
-import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
-import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
-import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
-
-const testState = createFamilyStateScopeMap({
-  key: 'sampleKey',
-  defaultValue: 'defaultValue',
-});
-
-describe('useRecoilScopedFamilyState', () => {
-  it('Should work as expected', async () => {
-    const { result, rerender } = renderHook(
-      ({
-        recoilState,
-        scopeId,
-        familyKey,
-      }: {
-        recoilState: (
-          scopedFamilyKey: FamilyStateScopeMapKey<string>,
-        ) => RecoilState<string>;
-        scopeId: string;
-        familyKey?: string;
-      }) => useRecoilScopedFamilyState(recoilState, scopeId, familyKey),
-      {
-        wrapper: RecoilRoot,
-        initialProps: {
-          recoilState: testState,
-          scopeId: 'scopeId',
-        },
-      },
-    );
-
-    expect(result.current).toEqual([undefined, undefined]);
-
-    rerender({
-      recoilState: testState,
-      scopeId: 'scopeId',
-      familyKey: 'familyKey',
-    });
-
-    const [value, setValue] = result.current;
-
-    expect(value).toBe('defaultValue');
-    expect(setValue).toBeInstanceOf(Function);
-
-    act(() => {
-      setValue?.('newValue');
-    });
-
-    expect(result.current[0]).toBe('newValue');
-
-    rerender({
-      recoilState: testState,
-      scopeId: 'scopeId1',
-      familyKey: 'familyKey',
-    });
-
-    expect(result.current[0]).toBe('defaultValue');
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedState.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedState.test.tsx
@ -1,50 +0,0 @@
-import { createContext } from 'react';
-import { act, renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot } from 'recoil';
-
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-
-const testScopedState = atomFamily<string | null, string>({
-  key: 'testKey',
-  default: null,
-});
-
-const mockedContextValue = 'mocked-scope-id';
-const MockedContext = createContext<string | null>(mockedContextValue);
-const nullContext = createContext<string | null>(null);
-
-const ERROR_MESSAGE =
-  'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.';
-
-describe('useRecoilScopedState', () => {
-  it('Should return the getter and setter for the state and context passed and work properly', async () => {
-    const { result } = renderHook(
-      () => useRecoilScopedState(testScopedState, MockedContext),
-      {
-        wrapper: ({ children }) => (
-          <MockedContext.Provider value={mockedContextValue}>
-            <RecoilRoot>{children}</RecoilRoot>
-          </MockedContext.Provider>
-        ),
-      },
-    );
-
-    const [scopedState, setScopedState] = result.current;
-
-    expect(scopedState).toBeNull();
-
-    await act(async () => {
-      setScopedState('testValue');
-    });
-
-    const [scopedStateAfterSetter] = result.current;
-
-    expect(scopedStateAfterSetter).toEqual('testValue');
-  });
-
-  it('Should throw an error when the recoilScopeId is not found by the context', () => {
-    expect(() => {
-      renderHook(() => useRecoilScopedState(testScopedState, nullContext));
-    }).toThrow(ERROR_MESSAGE);
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedValue.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedValue.test.tsx
@ -1,42 +0,0 @@
-import { createContext } from 'react';
-import { renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot } from 'recoil';
-
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-
-const testScopedState = atomFamily<string | null, string>({
-  key: 'testKey',
-  default: null,
-});
-
-const mockedContextValue = 'mocked-scope-id';
-const MockedContext = createContext<string | null>(mockedContextValue);
-const nullContext = createContext<string | null>(null);
-
-const ERROR_MESSAGE =
-  'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.';
-
-describe('useRecoilScopedValue', () => {
-  it('Should return the getter and setter for the state and context passed and work properly', async () => {
-    const { result } = renderHook(
-      () => useRecoilScopedValue(testScopedState, MockedContext),
-      {
-        wrapper: ({ children }) => (
-          <MockedContext.Provider value={mockedContextValue}>
-            <RecoilRoot>{children}</RecoilRoot>
-          </MockedContext.Provider>
-        ),
-      },
-    );
-
-    const scopedState = result.current;
-
-    expect(scopedState).toBeNull();
-  });
-
-  it('Should throw an error when the recoilScopeId is not found by the context', () => {
-    expect(() => {
-      renderHook(() => useRecoilScopedValue(testScopedState, nullContext));
-    }).toThrow(ERROR_MESSAGE);
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedValueV2.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useRecoilScopedValueV2.test.tsx
@ -1,27 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot } from 'recoil';
-
-import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2';
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-const scopedAtom = atomFamily<string, StateScopeMapKey>({
-  key: 'scopedAtomKey',
-  default: 'initialValue',
-});
-
-describe('useRecoilScopedValueV2', () => {
-  const mockedScopeId = 'mocked-scope-id';
-
-  it('Should return the scoped value using useRecoilScopedValueV2', () => {
-    const { result } = renderHook(
-      () => useRecoilScopedValueV2(scopedAtom, mockedScopeId),
-      {
-        wrapper: RecoilRoot,
-      },
-    );
-
-    const scopedValue = result.current;
-
-    expect(scopedValue).toBe('initialValue');
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useSetRecoilScopedFamilyState.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useSetRecoilScopedFamilyState.test.tsx
@ -1,79 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot } from 'recoil';
-
-import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
-import { useSetRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState';
-import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
-
-const mockedScopedFamilyState = atomFamily<
-  string,
-  FamilyStateScopeMapKey<string>
->({
-  key: 'scopedAtomKey',
-  default: 'initialValue',
-});
-
-describe('useSetRecoilScopedFamilyState', () => {
-  const mockedScopeId = 'mocked-scope-id';
-  const mockedFamilyKey = 'test-key-value';
-
-  it('Should return a setter that updates the state value and work properly', async () => {
-    const useCombinedHooks = () => {
-      const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState(
-        mockedScopedFamilyState,
-        mockedScopeId,
-        mockedFamilyKey,
-      );
-
-      const [mocked] = useRecoilScopedFamilyState(
-        mockedScopedFamilyState,
-        mockedScopeId,
-        mockedFamilyKey,
-      );
-
-      return {
-        setRecoilScopedFamilyState,
-        scopedFamilyState: mocked,
-      };
-    };
-
-    const { result } = renderHook(() => useCombinedHooks(), {
-      wrapper: RecoilRoot,
-    });
-
-    expect(result.current.scopedFamilyState).toBe('initialValue');
-    expect(result.current.setRecoilScopedFamilyState).toBeInstanceOf(Function);
-
-    await act(async () => {
-      result.current.setRecoilScopedFamilyState?.('testValue');
-    });
-
-    expect(result.current.scopedFamilyState).toBe('testValue');
-  });
-
-  it('Should return undefined when familyKey is missing', async () => {
-    const useCombinedHooks = () => {
-      const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState(
-        mockedScopedFamilyState,
-        mockedScopeId,
-      );
-
-      const [mocked] = useRecoilScopedFamilyState(
-        mockedScopedFamilyState,
-        mockedScopeId,
-      );
-
-      return {
-        setRecoilScopedFamilyState,
-        scopedFamilyState: mocked,
-      };
-    };
-
-    const { result } = renderHook(() => useCombinedHooks(), {
-      wrapper: RecoilRoot,
-    });
-
-    expect(result.current.scopedFamilyState).toBeUndefined();
-    expect(result.current.setRecoilScopedFamilyState).toBeUndefined();
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useSetRecoilScopedStateV2.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/tests/useSetRecoilScopedStateV2.test.tsx
@ -1,47 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot } from 'recoil';
-
-import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2';
-import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-const scopedAtom = atomFamily<string, StateScopeMapKey>({
-  key: 'scopedAtomKey',
-  default: 'initialValue',
-});
-
-describe('useSetRecoilScopedStateV2', () => {
-  const mockedScopeId = 'mocked-scope-id';
-
-  it('Should return a setter that updates the state value', async () => {
-    const useCombinedHooks = () => {
-      const setRecoilScopedStateV2 = useSetRecoilScopedStateV2(
-        scopedAtom,
-        mockedScopeId,
-      );
-
-      const recoilScopedStateValue = useRecoilScopedValueV2(
-        scopedAtom,
-        mockedScopeId,
-      );
-
-      return {
-        setRecoilScopedStateV2,
-        recoilScopedStateValue,
-      };
-    };
-
-    const { result } = renderHook(() => useCombinedHooks(), {
-      wrapper: RecoilRoot,
-    });
-
-    expect(result.current.recoilScopedStateValue).toBe('initialValue');
-    expect(result.current.setRecoilScopedStateV2).toBeInstanceOf(Function);
-
-    await act(async () => {
-      result.current.setRecoilScopedStateV2('testValue');
-    });
-
-    expect(result.current.recoilScopedStateValue).toBe('testValue');
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts
@ -1,27 +0,0 @@
-import { RecoilState, SerializableParam, useRecoilState } from 'recoil';
-
-import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
-
-export const useRecoilScopedFamilyState = <
-  StateType,
-  FamilyKey extends SerializableParam,
->(
-  recoilState: (
-    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
-  ) => RecoilState<StateType>,
-  scopeId: string,
-  familyKey?: FamilyKey,
-) => {
-  const familyState = useRecoilState<StateType>(
-    recoilState({
-      scopeId,
-      familyKey: familyKey || ('' as FamilyKey),
-    }),
-  );
-
-  if (!familyKey) {
-    return [undefined, undefined];
-  }
-
-  return familyState;
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts
@ -1,22 +0,0 @@
-import { Context, useContext } from 'react';
-import { RecoilState, useRecoilState } from 'recoil';
-
-import { RecoilScopeContext } from '../states/RecoilScopeContext';
-
-export const useRecoilScopedState = <StateType>(
-  recoilState: (param: string) => RecoilState<StateType>,
-  CustomRecoilScopeContext?: Context<string | null>,
-) => {
-  const recoilScopeId = useContext(
-    CustomRecoilScopeContext ?? RecoilScopeContext,
-  );
-
-  if (!recoilScopeId)
-    throw new Error(
-      `Using a scoped atom without a RecoilScope : ${
-        recoilState('').key
-      }, verify that you are using a RecoilScope with a specific context if you intended to do so.`,
-    );
-
-  return useRecoilState<StateType>(recoilState(recoilScopeId));
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts
@ -1,9 +1,9 @@
 import { RecoilState, useRecoilState } from 'recoil';

-import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';

 export const useRecoilScopedStateV2 = <StateType>(
-  recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
+  recoilState: (scopedKey: ComponentStateKey) => RecoilState<StateType>,
  scopeId: string,
 ) => {
  return useRecoilState<StateType>(
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts
@ -1,25 +0,0 @@
-import { Context, useContext } from 'react';
-import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
-
-import { RecoilScopeContext } from '../states/RecoilScopeContext';
-
-/**
- * @deprecated use useRecoilScopedStateV2 instead
- */
-export const useRecoilScopedValue = <T>(
-  recoilState: (param: string) => RecoilState<T> | RecoilValueReadOnly<T>,
-  CustomRecoilScopeContext?: Context<string | null>,
-) => {
-  const recoilScopeId = useContext(
-    CustomRecoilScopeContext ?? RecoilScopeContext,
-  );
-
-  if (!recoilScopeId)
-    throw new Error(
-      `Using a scoped atom without a RecoilScope : ${
-        recoilState('').key
-      }, verify that you are using a RecoilScope with a specific context if you intended to do so.`,
-    );
-
-  return useRecoilValue<T>(recoilState(recoilScopeId));
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2.ts
@ -1,14 +0,0 @@
-import { RecoilState, useRecoilValue } from 'recoil';
-
-import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
-
-export const useRecoilScopedValueV2 = <StateType>(
-  recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
-  scopeId: string,
-) => {
-  return useRecoilValue<StateType>(
-    recoilState({
-      scopeId,
-    }),
-  );
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState.ts
@ -1,27 +0,0 @@
-import { RecoilState, SerializableParam, useSetRecoilState } from 'recoil';
-
-import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
-
-export const useSetRecoilScopedFamilyState = <
-  StateType,
-  FamilyKey extends SerializableParam,
->(
-  recoilState: (
-    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
-  ) => RecoilState<StateType>,
-  scopeId: string,
-  familyKey?: FamilyKey,
-) => {
-  const familyState = useSetRecoilState<StateType>(
-    recoilState({
-      scopeId,
-      familyKey: familyKey || ('' as FamilyKey),
-    }),
-  );
-
-  if (!familyKey) {
-    return;
-  }
-
-  return familyState;
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2.ts
@ -1,14 +0,0 @@
-import { RecoilState, useSetRecoilState } from 'recoil';
-
-import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
-
-export const useSetRecoilScopedStateV2 = <StateType>(
-  recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
-  scopeId: string,
-) => {
-  return useSetRecoilState<StateType>(
-    recoilState({
-      scopeId,
-    }),
-  );
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/tests/useScopeInternalContextOrThrow.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/tests/useScopeInternalContextOrThrow.test.tsx
@ -1,44 +0,0 @@
-import { createContext } from 'react';
-import { renderHook } from '@testing-library/react';
-
-import { useScopeInternalContextOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow';
-import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
-
-const mockedContextValue = 'mocked-scope-id';
-const MockedContext = createContext<string | null>(mockedContextValue);
-const nullContext = createContext<string | null>(null);
-
-const ERROR_MESSAGE =
-  'Using a scope context without a ScopeInternalContext.Provider wrapper for context';
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <MockedContext.Provider value={mockedContextValue}>
-    {children}
-  </MockedContext.Provider>
-);
-
-describe('useScopeInternalContextOrThrow', () => {
-  it('should work as expected', () => {
-    const { result } = renderHook(
-      () =>
-        useScopeInternalContextOrThrow(
-          MockedContext as ScopeInternalContext<{ scopeId: string }>,
-        ),
-      {
-        wrapper: Wrapper,
-      },
-    );
-
-    expect(result.current).toBe(mockedContextValue);
-  });
-
-  it('should throw an error when used outside of the specified context', () => {
-    expect(() => {
-      renderHook(() =>
-        useScopeInternalContextOrThrow(
-          nullContext as ScopeInternalContext<{ scopeId: string }>,
-        ),
-      );
-    }).toThrow(ERROR_MESSAGE);
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/tests/useScopedState.test.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/tests/useScopedState.test.ts
@ -1,192 +0,0 @@
-import { expect } from '@storybook/test';
-import { act, renderHook } from '@testing-library/react';
-import {
-  atomFamily,
-  RecoilRoot,
-  selector,
-  useRecoilCallback,
-  useRecoilState,
-  useRecoilValue,
-} from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
-import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
-import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
-import { getSelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector';
-
-import { useScopedState } from '../useScopedState';
-
-const scopeId = 'scopeId';
-
-// scoped state
-const defaultScopedState = 'defaultString';
-const scopedState = atomFamily<string, StateScopeMapKey>({
-  key: 'ScopedStateKey',
-  default: defaultScopedState,
-});
-const scopedStateScopeInjector = getScopeInjector(scopedState);
-
-// scoped selector
-const anotherScopedState = atomFamily<number[], StateScopeMapKey>({
-  key: 'ScopedStateKey',
-  default: [1, 2, 3, 4, 5],
-});
-const scopedSelector = ({ scopeId }: StateScopeMapKey) =>
-  selector({
-    key: 'FilteredState',
-    get: ({ get }) => {
-      const scopedStateValue = get(anotherScopedState({ scopeId }));
-      return scopedStateValue.filter((value) => value % 2 === 0);
-    },
-  });
-const selectorScopeInjector = getSelectorScopeInjector(scopedSelector);
-
-// family state
-const defaultValue = 'defaultString';
-const scopedFamilyState = createFamilyStateScopeMap<string, string>({
-  key: 'FamilyStateKey',
-  defaultValue,
-});
-const familyScopeInjector = getFamilyScopeInjector(scopedFamilyState);
-
-describe('useScopedState', () => {
-  it('should get scoped state', () => {
-    const {
-      result: {
-        current: { getScopedState },
-      },
-    } = renderHook(() => useScopedState(scopeId));
-
-    const scopedState = getScopedState(scopedStateScopeInjector);
-
-    const { result } = renderHook(
-      () => {
-        const [scoped, setScoped] = useRecoilState(scopedState);
-        return { scoped, setScoped };
-      },
-      {
-        wrapper: RecoilRoot,
-      },
-    );
-
-    expect(result.current.scoped).toBe(defaultScopedState);
-
-    const newValue = 'anotherValue';
-
-    act(() => {
-      result.current.setScoped(newValue);
-    });
-
-    expect(result.current.scoped).toBe(newValue);
-  });
-
-  it('should get scoped snapshot value', () => {
-    const {
-      result: {
-        current: { getScopedSnapshotValue },
-      },
-    } = renderHook(() => useScopedState(scopeId));
-
-    const { result } = renderHook(
-      () =>
-        useRecoilCallback(
-          ({ snapshot }) =>
-            () =>
-              getScopedSnapshotValue(snapshot, scopedStateScopeInjector),
-        )(),
-      { wrapper: RecoilRoot },
-    );
-
-    expect(result.current).toBe(defaultScopedState);
-  });
-
-  it('should get scoped selector', () => {
-    const {
-      result: {
-        current: { getScopedSelector },
-      },
-    } = renderHook(() => useScopedState(scopeId));
-
-    const recoilValue = getScopedSelector(selectorScopeInjector);
-
-    const { result } = renderHook(() => useRecoilValue(recoilValue), {
-      wrapper: RecoilRoot,
-    });
-
-    expect(result.current).toEqual([2, 4]);
-  });
-
-  it('should get scoped selector snapshot value', () => {
-    const {
-      result: {
-        current: { getScopedSelectorSnapshotValue },
-      },
-    } = renderHook(() => useScopedState(scopeId));
-
-    const { result } = renderHook(
-      () =>
-        useRecoilCallback(
-          ({ snapshot }) =>
-            () =>
-              getScopedSelectorSnapshotValue(snapshot, selectorScopeInjector),
-        )(),
-      { wrapper: RecoilRoot },
-    );
-
-    expect(result.current).toEqual([2, 4]);
-  });
-
-  it('should get scoped family state', () => {
-    const {
-      result: {
-        current: { getScopedFamilyState },
-      },
-    } = renderHook(() => useScopedState(scopeId));
-
-    const scopedFamilyState = getScopedFamilyState(familyScopeInjector);
-
-    const { result } = renderHook(
-      () => {
-        const [familyState, setFamilyState] = useRecoilState(
-          scopedFamilyState('familyKey'),
-        );
-
-        return { familyState, setFamilyState };
-      },
-      {
-        wrapper: RecoilRoot,
-      },
-    );
-
-    expect(result.current.familyState).toBe('defaultString');
-
-    const newValue = 'newValue';
-
-    act(() => {
-      result.current.setFamilyState(newValue);
-    });
-
-    expect(result.current.familyState).toBe(newValue);
-  });
-
-  it('should get scoped family snapshot value', () => {
-    const {
-      result: {
-        current: { getScopedFamilySnapshotValue },
-      },
-    } = renderHook(() => useScopedState(scopeId));
-
-    const { result } = renderHook(
-      () =>
-        useRecoilCallback(
-          ({ snapshot }) =>
-            () =>
-              getScopedFamilySnapshotValue(snapshot, familyScopeInjector),
-        )(),
-      { wrapper: RecoilRoot },
-    );
-
-    expect(result.current('sampleKey')).toBe('defaultString');
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow.ts
@ -1,19 +0,0 @@
-import { useContext } from 'react';
-
-import { isNonNullable } from '~/utils/isNonNullable';
-
-import { ScopeInternalContext } from '../types/ScopeInternalContext';
-
-export const useScopeInternalContextOrThrow = <T extends { scopeId: string }>(
-  Context: ScopeInternalContext<T>,
-) => {
-  const context = useContext(Context);
-
-  if (!isNonNullable(context)) {
-    throw new Error(
-      `Using a scope context without a ScopeInternalContext.Provider wrapper for context : ${Context.displayName}.`,
-    );
-  }
-
-  return context;
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts
@ -1,50 +0,0 @@
-import { SerializableParam, Snapshot } from 'recoil';
-
-import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
-import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
-import { SelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector';
-import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
-
-export const useScopedState = (scopeId: string) => {
-  const getScopedState = <StateType>(scopeInjector: ScopeInjector<StateType>) =>
-    scopeInjector(scopeId);
-
-  const getScopedSelector = <StateType>(
-    scopeInjector: SelectorScopeInjector<StateType>,
-  ) => scopeInjector(scopeId);
-
-  const getScopedFamilyState =
-    <StateType, FamilyKey extends SerializableParam>(
-      familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
-    ) =>
-    (familyKey: FamilyKey) =>
-      familyScopeInjector(scopeId, familyKey);
-
-  const getScopedSnapshotValue = <StateType>(
-    snapshot: Snapshot,
-    scopeInjector: ScopeInjector<StateType>,
-  ) => getSnapshotValue(snapshot, scopeInjector(scopeId));
-
-  const getScopedSelectorSnapshotValue = <StateType>(
-    snapshot: Snapshot,
-    scopeInjector: SelectorScopeInjector<StateType>,
-  ) => getSnapshotValue(snapshot, scopeInjector(scopeId));
-
-  const getScopedFamilySnapshotValue =
-    <StateType, FamilyKey extends SerializableParam>(
-      snapshot: Snapshot,
-      familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
-    ) =>
-    (familyKey: FamilyKey) =>
-      getSnapshotValue(snapshot, familyScopeInjector(scopeId, familyKey));
-
-  return {
-    scopeId,
-    getScopedState,
-    getScopedSelector,
-    getScopedFamilyState,
-    getScopedSnapshotValue,
-    getScopedSelectorSnapshotValue,
-    getScopedFamilySnapshotValue,
-  };
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey.ts
@ -1,3 +0,0 @@
-export type StateScopeMapKey = {
-  scopeId: string;
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts
@ -1,10 +1,10 @@
 import { Context, createContext } from 'react';

-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';

-type ScopeInternalContext<T extends StateScopeMapKey> = Context<T | null>;
+type ScopeInternalContext<T extends ComponentStateKey> = Context<T | null>;

-export const createScopeInternalContext = <T extends StateScopeMapKey>(
+export const createScopeInternalContext = <T extends ComponentStateKey>(
  initialValue?: T,
 ) => {
  return createContext<T | null>(
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts
@ -1,7 +1,7 @@
 import { RecoilValueReadOnly } from 'recoil';

-import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';

 export type RecoilScopedSelector<StateType> = (
-  scopedKey: StateScopeMapKey,
+  scopedKey: ComponentStateKey,
 ) => RecoilValueReadOnly<StateType>;
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts
@ -1,7 +1,7 @@
 import { RecoilState } from 'recoil';

-import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';

 export type RecoilScopedState<StateType> = (
-  scopedKey: StateScopeMapKey,
+  scopedKey: ComponentStateKey,
 ) => RecoilState<StateType>;
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/tests/getFamilyScopeInjector.test.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/tests/getFamilyScopeInjector.test.ts
@ -1,40 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot, useRecoilState } from 'recoil';
-
-import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
-
-import { getFamilyScopeInjector } from '../getFamilyScopeInjector';
-
-const defaultValue = 'defaultString';
-
-const testState = createFamilyStateScopeMap<string, string>({
-  key: 'familyStateKey',
-  defaultValue,
-});
-
-describe('getFamilyScopeInjector', () => {
-  it('should return a scoped family state', () => {
-    const familyScopeInjector = getFamilyScopeInjector(testState);
-    const familyState = familyScopeInjector('scopeId', 'familyKey');
-
-    const { result } = renderHook(
-      () => {
-        const [family, setFamily] = useRecoilState(familyState);
-        return { family, setFamily };
-      },
-      {
-        wrapper: RecoilRoot,
-      },
-    );
-
-    expect(result.current.family).toBe(defaultValue);
-
-    const newValue = 'anotherValue';
-
-    act(() => {
-      result.current.setFamily(newValue);
-    });
-
-    expect(result.current.family).toBe(newValue);
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/tests/getScopeInjector.test.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/tests/getScopeInjector.test.ts
@ -1,45 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot, useRecoilState } from 'recoil';
-
-import { getScopeInjector } from '../getScopeInjector';
-
-const defaultValue = 'defaultString';
-
-const scopedState = atomFamily<
-  string,
-  {
-    scopeId: string;
-  }
->({
-  key: 'myStateKey',
-  default: defaultValue,
-});
-
-describe('getScopeInjector', () => {
-  it('should return the scoped state for the given scopeId', () => {
-    const scopeInjector = getScopeInjector(scopedState);
-
-    const scopeId = 'scopeId';
-    const recoilState = scopeInjector(scopeId);
-
-    const { result } = renderHook(
-      () => {
-        const [recoil, setRecoil] = useRecoilState(recoilState);
-        return { recoil, setRecoil };
-      },
-      {
-        wrapper: RecoilRoot,
-      },
-    );
-
-    expect(result.current.recoil).toBe(defaultValue);
-
-    const newValue = 'anotherValue';
-
-    act(() => {
-      result.current.setRecoil(newValue);
-    });
-
-    expect(result.current.recoil).toBe(newValue);
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/tests/getSelectorScopeInjector.test.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/tests/getSelectorScopeInjector.test.ts
@ -1,38 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { atomFamily, RecoilRoot, selector, useRecoilValue } from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-import { getSelectorScopeInjector } from '../getSelectorScopeInjector';
-
-const scopedState = atomFamily<
-  number[],
-  {
-    scopeId: string;
-  }
->({
-  key: 'myStateKey',
-  default: [1, 2, 3, 4, 5],
-});
-
-const scopedSelector = ({ scopeId }: StateScopeMapKey) =>
-  selector({
-    key: 'FilteredState',
-    get: ({ get }) => {
-      const scopedStateValue = get(scopedState({ scopeId }));
-      return scopedStateValue.filter((value) => value % 2 === 0);
-    },
-  });
-
-describe('getSelectorScopeInjector', () => {
-  it('should return a valid SelectorScopeInjector', () => {
-    const selectorScopeInjector = getSelectorScopeInjector(scopedSelector);
-    const recoilValue = selectorScopeInjector('scopeId');
-
-    const { result } = renderHook(() => useRecoilValue(recoilValue), {
-      wrapper: RecoilRoot,
-    });
-
-    expect(result.current).toEqual([2, 4]);
-  });
-});
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap.ts
@ -1,47 +0,0 @@
-import {
-  DefaultValue,
-  GetCallback,
-  GetRecoilValue,
-  Loadable,
-  RecoilValue,
-  ResetRecoilState,
-  selectorFamily,
-  SerializableParam,
-  SetRecoilState,
-  WrappedValue,
-} from 'recoil';
-
-import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
-
-type SelectorGetter<T, P> = (
-  param: P,
-) => (opts: {
-  get: GetRecoilValue;
-  getCallback: GetCallback;
-}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
-
-type SelectorSetter<T, P> = (
-  param: P,
-) => (
-  opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
-  newValue: T | DefaultValue,
-) => void;
-
-export const createFamilySelectorScopeMap = <
-  ValueType,
-  FamilyKey extends SerializableParam,
->({
-  key,
-  get,
-  set,
-}: {
-  key: string;
-  get: SelectorGetter<ValueType, FamilyStateScopeMapKey<FamilyKey>>;
-  set: SelectorSetter<ValueType, FamilyStateScopeMapKey<FamilyKey>>;
-}) => {
-  return selectorFamily<ValueType, FamilyStateScopeMapKey<FamilyKey>>({
-    key,
-    get,
-    set,
-  });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap.ts
@ -1,30 +0,0 @@
-import {
-  GetCallback,
-  GetRecoilValue,
-  Loadable,
-  RecoilValue,
-  selectorFamily,
-  WrappedValue,
-} from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-type SelectorGetter<T, P> = (
-  param: P,
-) => (opts: {
-  get: GetRecoilValue;
-  getCallback: GetCallback;
-}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
-
-export const createSelectorReadOnlyScopeMap = <ValueType>({
-  key,
-  get,
-}: {
-  key: string;
-  get: SelectorGetter<ValueType, StateScopeMapKey>;
-}) => {
-  return selectorFamily<ValueType, StateScopeMapKey>({
-    key,
-    get,
-  });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorScopeMap.ts
@ -1,43 +0,0 @@
-import {
-  DefaultValue,
-  GetCallback,
-  GetRecoilValue,
-  Loadable,
-  RecoilValue,
-  ResetRecoilState,
-  selectorFamily,
-  SetRecoilState,
-  WrappedValue,
-} from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-type SelectorGetter<T, P> = (
-  param: P,
-) => (opts: {
-  get: GetRecoilValue;
-  getCallback: GetCallback;
-}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
-
-type SelectorSetter<T, P> = (
-  param: P,
-) => (
-  opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
-  newValue: T | DefaultValue,
-) => void;
-
-export const createSelectorScopeMap = <ValueType>({
-  key,
-  get,
-  set,
-}: {
-  key: string;
-  get: SelectorGetter<ValueType, StateScopeMapKey>;
-  set: SelectorSetter<ValueType, StateScopeMapKey>;
-}) => {
-  return selectorFamily<ValueType, StateScopeMapKey>({
-    key,
-    get,
-    set,
-  });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createStateScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createStateScopeMap.ts
@ -1,16 +0,0 @@
-import { atomFamily } from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-export const createStateScopeMap = <ValueType>({
-  key,
-  defaultValue,
-}: {
-  key: string;
-  defaultValue: ValueType;
-}) => {
-  return atomFamily<ValueType, StateScopeMapKey>({
-    key,
-    default: defaultValue,
-  });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts
@ -1,23 +0,0 @@
-import { RecoilState, SerializableParam } from 'recoil';
-
-import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
-
-export type FamilyScopeInjector<
-  StateType,
-  FamilyKey extends SerializableParam,
-> = (scopeId: string, familyKey: FamilyKey) => RecoilState<StateType>;
-
-export const getFamilyScopeInjector = <
-  StateType,
-  FamilyKey extends SerializableParam,
->(
-  scopedFamilyState: (
-    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
-  ) => RecoilState<StateType>,
-) => {
-  return (scopeId: string, familyKey: FamilyKey) =>
-    scopedFamilyState({
-      scopeId,
-      familyKey: familyKey || ('' as FamilyKey),
-    });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyState.ts
@ -1,16 +0,0 @@
-import { RecoilState, SerializableParam } from 'recoil';
-
-import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
-
-export const getFamilyState = <StateType, FamilyKey extends SerializableParam>(
-  familyStateScopeMap: (
-    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
-  ) => RecoilState<StateType>,
-  scopeId: string,
-) => {
-  return (familyKey: FamilyKey) =>
-    familyStateScopeMap({
-      scopeId,
-      familyKey: familyKey || ('' as FamilyKey),
-    });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts
@ -1,16 +0,0 @@
-import { RecoilState } from 'recoil';
-
-import { RecoilScopedState } from '../types/RecoilScopedState';
-
-export type ScopeInjector<StateType> = (
-  scopeId: string,
-) => RecoilState<StateType>;
-
-export const getScopeInjector = <StateType>(
-  scopedState: RecoilScopedState<StateType>,
-): ScopeInjector<StateType> => {
-  return (scopeId: string) =>
-    scopedState({
-      scopeId,
-    });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts
@ -1,13 +1,13 @@
 import { RecoilState, SerializableParam } from 'recoil';

-import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';

 export const getScopedFamilyStateDeprecated = <
  StateType,
  FamilyKey extends SerializableParam,
 >(
  recoilState: (
-    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
+    scopedFamilyKey: ComponentFamilyStateKey<FamilyKey>,
  ) => RecoilState<StateType>,
  scopeId: string,
  familyKey: FamilyKey,
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts
@ -1,10 +0,0 @@
-import { RecoilState } from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-export const getSelector = <StateType>(
-  stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
-  scopeId: string,
-) => {
-  return () => stateScopeMap({ scopeId });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorReadOnly.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorReadOnly.ts
@ -1,12 +0,0 @@
-import { RecoilValueReadOnly } from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-export const getSelectorReadOnly = <StateType>(
-  stateScopeMap: (
-    stateScopeMapKey: StateScopeMapKey,
-  ) => RecoilValueReadOnly<StateType>,
-  scopeId: string,
-) => {
-  return () => stateScopeMap({ scopeId });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts
@ -1,16 +0,0 @@
-import { RecoilValueReadOnly } from 'recoil';
-
-import { RecoilScopedSelector } from '@/ui/utilities/recoil-scope/types/RecoilScopedSelector';
-
-export type SelectorScopeInjector<StateType> = (
-  scopeId: string,
-) => RecoilValueReadOnly<StateType>;
-
-export const getSelectorScopeInjector = <StateType>(
-  scopedSelector: RecoilScopedSelector<StateType>,
-): SelectorScopeInjector<StateType> => {
-  return (scopeId: string) =>
-    scopedSelector({
-      scopeId,
-    });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getState.ts
@ -1,10 +0,0 @@
-import { RecoilState } from 'recoil';
-
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
-
-export const getState = <StateType>(
-  stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
-  scopeId: string,
-) => {
-  return () => stateScopeMap({ scopeId });
-};
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/tests/useListenScroll.test.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/tests/useListenScroll.test.tsx
@ -24,7 +24,7 @@ describe('useListenScroll', () => {
    const { result } = renderHook(
      () => {
        useListenScroll({ scrollableRef: containerRef });
-        const isScrolling = useRecoilValue(isScrollingState);
+        const isScrolling = useRecoilValue(isScrollingState());

        return { isScrolling };
      },
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts
@ -13,7 +13,7 @@ export const useListenScroll = <T extends Element>({
  scrollableRef: React.RefObject<T>;
 }) => {
  const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
-    const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
+    const isScrolling = snapshot.getLoadable(isScrollingState()).getValue();

    if (!isScrolling) {
      scrollableRef.current?.classList.remove('scrolling');
@ -21,17 +21,17 @@ export const useListenScroll = <T extends Element>({
  });

  const handleScrollStart = useRecoilCallback(({ set }) => (event: Event) => {
-    set(isScrollingState, true);
+    set(isScrollingState(), true);
    scrollableRef.current?.classList.add('scrolling');

    const target = event.target as HTMLElement;

-    set(scrollTopState, target.scrollTop);
-    set(scrollLeftState, target.scrollLeft);
+    set(scrollTopState(), target.scrollTop);
+    set(scrollLeftState(), target.scrollLeft);
  });

  const handleScrollEnd = useRecoilCallback(({ set }) => () => {
-    set(isScrollingState, false);
+    set(isScrollingState(), false);
    debounce(hideScrollBarsCallback, 1000)();
  });

--- a/packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const isScrollingState = atom({
+export const isScrollingState = createState({
  key: 'scroll/isScollingState',
-  default: false,
+  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const scrollLeftState = atom<number>({
+export const scrollLeftState = createState<number>({
  key: 'scroll/scrollLeftState',
-  default: 0,
+  defaultValue: 0,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts
@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';

-export const scrollTopState = atom<number>({
+export const scrollTopState = createState<number>({
  key: 'scroll/scrollTopState',
-  default: 0,
+  defaultValue: 0,
 });
--- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts
@ -1,6 +1,6 @@
 import { SerializableParam } from 'recoil';

-export type FamilyStateScopeMapKey<FamilyKey extends SerializableParam> = {
+export type ComponentFamilyStateKey<FamilyKey extends SerializableParam> = {
  scopeId: string;
  familyKey: FamilyKey;
 };
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKey.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKey.ts
@ -0,0 +1,3 @@
+export type ComponentStateKey = {
+  scopeId: string;
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelector.ts
@ -0,0 +1,24 @@
+import { selectorFamily, SerializableParam } from 'recoil';
+
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
+import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
+
+export const createComponentFamilySelector = <
+  ValueType,
+  FamilyKey extends SerializableParam,
+>({
+  key,
+  get,
+  set,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
+  set: SelectorSetter<ValueType, ComponentFamilyStateKey<FamilyKey>>;
+}) => {
+  return selectorFamily<ValueType, ComponentFamilyStateKey<FamilyKey>>({
+    key,
+    get,
+    set,
+  });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyState.ts
@ -1,8 +1,8 @@
 import { atomFamily, SerializableParam } from 'recoil';

-import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';

-export const createFamilyStateScopeMap = <
+export const createComponentFamilyState = <
  ValueType,
  FamilyKey extends SerializableParam,
 >({
@ -12,7 +12,7 @@ export const createFamilyStateScopeMap = <
  key: string;
  defaultValue: ValueType;
 }) => {
-  return atomFamily<ValueType, FamilyStateScopeMapKey<FamilyKey>>({
+  return atomFamily<ValueType, ComponentFamilyStateKey<FamilyKey>>({
    key,
    default: defaultValue,
  });
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentReadOnlySelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentReadOnlySelector.ts
@ -0,0 +1,17 @@
+import { selectorFamily } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
+
+export const createComponentReadOnlySelector = <ValueType>({
+  key,
+  get,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ComponentStateKey>;
+}) => {
+  return selectorFamily<ValueType, ComponentStateKey>({
+    key,
+    get,
+  });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelector.ts
@ -0,0 +1,21 @@
+import { selectorFamily } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
+import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
+
+export const createComponentSelector = <ValueType>({
+  key,
+  get,
+  set,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ComponentStateKey>;
+  set: SelectorSetter<ValueType, ComponentStateKey>;
+}) => {
+  return selectorFamily<ValueType, ComponentStateKey>({
+    key,
+    get,
+    set,
+  });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts
@ -0,0 +1,16 @@
+import { atomFamily } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+
+export const createComponentState = <ValueType>({
+  key,
+  defaultValue,
+}: {
+  key: string;
+  defaultValue: ValueType;
+}) => {
+  return atomFamily<ValueType, ComponentStateKey>({
+    key,
+    default: defaultValue,
+  });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentFamilyState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentFamilyState.ts
@ -0,0 +1,19 @@
+import { RecoilState, SerializableParam } from 'recoil';
+
+import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
+
+export const extractComponentFamilyState = <
+  StateType,
+  FamilyKey extends SerializableParam,
+>(
+  componentfamilyState: (
+    componentFamilyStateKey: ComponentFamilyStateKey<FamilyKey>,
+  ) => RecoilState<StateType>,
+  scopeId: string,
+) => {
+  return (familyKey: FamilyKey) =>
+    componentfamilyState({
+      scopeId,
+      familyKey: familyKey || ('' as FamilyKey),
+    });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector.ts
@ -0,0 +1,12 @@
+import { RecoilValueReadOnly } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+
+export const extractComponentReadOnlySelector = <StateType>(
+  componentSelector: (
+    componentStateKey: ComponentStateKey,
+  ) => RecoilValueReadOnly<StateType>,
+  scopeId: string,
+) => {
+  return () => componentSelector({ scopeId });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentSelector.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentSelector.ts
@ -0,0 +1,12 @@
+import { RecoilState } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+
+export const extractComponentSelector = <StateType>(
+  componentSelector: (
+    componentStateKey: ComponentStateKey,
+  ) => RecoilState<StateType>,
+  scopeId: string,
+) => {
+  return () => componentSelector({ scopeId });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts
@ -0,0 +1,12 @@
+import { RecoilState } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+
+export const extractComponentState = <StateType>(
+  componentState: (
+    componentStateKey: ComponentStateKey,
+  ) => RecoilState<StateType>,
+  scopeId: string,
+) => {
+  return () => componentState({ scopeId });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorGetter.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorGetter.ts
@ -0,0 +1,14 @@
+import {
+  GetCallback,
+  GetRecoilValue,
+  Loadable,
+  RecoilValue,
+  WrappedValue,
+} from 'recoil';
+
+export type SelectorGetter<T, P> = (
+  param: P,
+) => (opts: {
+  get: GetRecoilValue;
+  getCallback: GetCallback;
+}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
--- a/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorSetter.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorSetter.ts
@ -0,0 +1,13 @@
+import {
+  DefaultValue,
+  GetRecoilValue,
+  ResetRecoilState,
+  SetRecoilState,
+} from 'recoil';
+
+export type SelectorSetter<T, P> = (
+  param: P,
+) => (
+  opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
+  newValue: T | DefaultValue,
+) => void;
--- a/packages/twenty-front/src/modules/ui/utilities/state/utils/createFamilyState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/createFamilyState.ts
@ -0,0 +1,17 @@
+import { atomFamily, SerializableParam } from 'recoil';
+
+export const createFamilyState = <
+  ValueType,
+  FamilyKey extends SerializableParam,
+>({
+  key,
+  defaultValue,
+}: {
+  key: string;
+  defaultValue: ValueType;
+}) => {
+  return atomFamily<ValueType, FamilyKey>({
+    key,
+    default: defaultValue,
+  });
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts
@ -0,0 +1,18 @@
+import { atom, AtomEffect } from 'recoil';
+
+export const createState = <ValueType>({
+  key,
+  defaultValue,
+  effects,
+}: {
+  key: string;
+  defaultValue: ValueType;
+  effects?: ReadonlyArray<AtomEffect<ValueType>>;
+}) => {
+  const recoilState = atom<ValueType>({
+    key,
+    default: defaultValue,
+    effects,
+  });
+  return () => recoilState;
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/utils/getSnapshotValue.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/getSnapshotValue.ts
@ -0,0 +1,8 @@
+import { RecoilState, RecoilValueReadOnly, Snapshot } from 'recoil';
+
+export const getSnapshotValue = <StateType>(
+  snapshot: Snapshot,
+  state: RecoilState<StateType> | RecoilValueReadOnly<StateType>,
+) => {
+  return snapshot.getLoadable(state).getValue();
+};
--- a/packages/twenty-front/src/modules/ui/utilities/state/utils/guardRecoilDefaultValue.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/guardRecoilDefaultValue.ts
@ -0,0 +1,8 @@
+import { DefaultValue } from 'recoil';
+
+export const guardRecoilDefaultValue = (
+  candidate: any,
+): candidate is DefaultValue => {
+  if (candidate instanceof DefaultValue) return true;
+  return false;
+};