Jotai 13 (#18178)

## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI, Activities, Settings, SSE & Remaining Modules ### Summary This is the 13th PR in the [14-PR migration series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md) to replace Recoil with Jotai as the state management library in `twenty-front`. This PR migrates the remaining consumer code across all modules — updating ~1,076 files with ~10k insertions/deletions. ### What changed **New Jotai infrastructure (13 new files):** - `createComponentSelectorV2` and `createComponentFamilySelectorV2` — instance-scoped derived atoms, replacing Recoil's component selectors - 6 new hooks: `useRecoilComponentSelectorValueV2`, `useRecoilComponentFamilySelectorValueV2`, `useRecoilComponentSelectorCallbackStateV2`, `useRecoilComponentFamilySelectorCallbackStateV2`, `useRecoilComponentStateCallbackStateV2`, `useRecoilComponentFamilyStateCallbackStateV2` - New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`, `SelectorCallbacksV2` - Extended `buildGetHelper` to support the new selector patterns **State definition migrations:** - `createState()` → `createStateV2()` (Jotai `atom()`) - `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with family cache) - Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2 utilities **Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):** - `useRecoilValue` → `useRecoilValueV2` - `useRecoilState` → `useRecoilStateV2` - `useSetRecoilState` → `useSetRecoilStateV2` - `useRecoilCallback` → `useCallback` + `jotaiStore.get/set` - `useRecoilComponentValue` → `useRecoilComponentValueV2` - `useSetRecoilComponentState` → `useSetRecoilComponentStateV2` - `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` / `useFamilySelectorValueV2` - ~397 direct `import from 'recoil'` removed **Deleted files (9 files):** - `dateLocaleState.ts` — consolidated - `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original - `isCommandMenuOpenedState.ts` — removed - `filesFieldUploadState.ts` — replaced by V2 - `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`, `recordStoreRecordsSelector.ts` — replaced by V2 equivalents - `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook - `settingsRoleIdsStateV2.ts` — consolidated **Modules migrated:** - Workflow (diagram, steps, variables, filters) - Page Layout (widgets, fields, graph, tabs) - AI (chat, agents, browsing context) - Activities (rich text editor, targets, timeline) - Action Menu (single/multiple record actions) - Command Menu (navigation, history, pages, workflow) - Context Store - Record Board, Record Table, Record Calendar, Record Index - Record Field, Record Filter, Record Sort, Record Group - Record Drag, Record Picker, Record Store - Views (view bar, view picker, filters, sorts) - Settings (roles, permissions, SSO, security, data model, developers, domains) - SSE (event streams, subscriptions) - Spreadsheet Import - Auth, Favorites, Front Components, Information Banner
2026-02-24 17:37:01 +01:00
parent c6ec764b23
commit 0f2af6a6cb
1326 changed files with 19248 additions and 19389 deletions
@@ -1,13 +1,13 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { type CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { recordStoreFamilySelectorV2 } from '@/object-record/record-store/states/selectors/recordStoreFamilySelectorV2';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { lazy, Suspense } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { useRecoilValue } from 'recoil';
+import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
 import { isDefined } from 'twenty-shared/utils';

 const ActivityRichTextEditor = lazy(() =>
@@ -48,12 +48,10 @@ const LoadingSkeleton = () => {

 export const FieldRichTextCard = () => {
  const targetRecord = useTargetRecord();
-  const activityBodyV2 = useRecoilValue(
-    recordStoreFamilySelector({
-      recordId: targetRecord.id,
-      fieldName: 'bodyV2',
-    }),
-  );
+  const activityBodyV2 = useFamilySelectorValueV2(recordStoreFamilySelectorV2, {
+    recordId: targetRecord.id,
+    fieldName: 'bodyV2',
+  });

  const activityObjectNameSingular = targetRecord.targetObjectNameSingular as
    | CoreObjectNameSingular.Note
@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
 import { type ChangeEvent, type ReactNode, useRef } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import {
  AppTooltip,
@@ -12,8 +11,9 @@ import {
  type AvatarType,
  type IconComponent,
 } from 'twenty-ui/display';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { v4 as uuidV4 } from 'uuid';
-import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { dateLocaleStateV2 } from '~/localization/states/dateLocaleStateV2';
 import {
  beautifyExactDateTime,
  beautifyPastDateRelativeToNow,
@@ -123,7 +123,7 @@ export const ShowPageSummaryCard = ({
  loading,
  isMobile = false,
 }: ShowPageSummaryCardProps) => {
-  const { localeCatalog } = useRecoilValue(dateLocaleState);
+  const { localeCatalog } = useRecoilValueV2(dateLocaleStateV2);
  const beautifiedCreatedAt =
    date !== '' ? beautifyPastDateRelativeToNow(date, localeCatalog) : '';
  const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 import { type ReactNode, useState } from 'react';
-import { useSetRecoilState } from 'recoil';

 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 import { tableWidthResizeIsActiveState } from '@/object-record/record-table/states/tableWidthResizeIsActivedState';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { ResizablePanelEdge } from '@/ui/layout/resizable-panel/components/ResizablePanelEdge';
 import { NAVIGATION_DRAWER_COLLAPSED_WIDTH } from '@/ui/layout/resizable-panel/constants/NavigationDrawerCollapsedWidth';
 import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints';
@@ -82,7 +82,7 @@ export const NavigationDrawer = ({
  const [navigationDrawerWidth, setNavigationDrawerWidth] = useRecoilStateV2(
    navigationDrawerWidthState,
  );
-  const setTableWidthResizeIsActive = useSetRecoilState(
+  const setTableWidthResizeIsActive = useSetRecoilStateV2(
    tableWidthResizeIsActiveState,
  );

@@ -241,14 +241,13 @@ object-record/states/recordStoreFamilyState.ts (raw atomFamily)
 object-record/record-store/states/recordStoreFamilyState.ts
 ```

-### Selectors (6 files)
+### Selectors (1 file remaining)
 ```
-object-record/record-store/states/selectors/recordStoreFamilySelector.ts
-object-record/record-store/states/selectors/recordStoreFieldValueSelector.ts
-object-record/record-store/states/selectors/recordStoreIdentifierSelector.ts
-object-record/record-store/states/selectors/recordStoreIdentifiersSelector.ts
-object-record/record-store/states/selectors/recordStoreMorphOneToManyValueWithObjectNameFamilySelector.ts
-object-record/record-store/states/selectors/recordStoreRecordsSelector.ts
+object-record/record-store/states/selectors/recordStoreFieldValueSelector.ts ✅ MIGRATED (useRecordFieldValue uses V2)
+object-record/record-store/states/selectors/recordStoreIdentifierSelector.ts ✅ MIGRATED (recordStoreIdentifierFamilySelectorV2)
+object-record/record-store/states/selectors/recordStoreIdentifiersSelector.ts ✅ MIGRATED (already V2, now uses recordStoreFamilyState)
+object-record/record-store/states/selectors/recordStoreMorphOneToManyValueWithObjectNameFamilySelector.ts ✅ MIGRATED
+object-record/record-store/states/selectors/recordStoreRecordsSelector.ts ✅ MIGRATED (recordStoreRecordsSelectorV2)
 ```

 ---
@@ -264,7 +263,7 @@ object-record/record-filter-group/states/ (1 file)
 object-record/record-sort/states/ (1 file)
 object-record/record-group/states/ (3 files)
 object-record/record-drag/states/ (7 files)
-object-record/record-field/states/ (7 files)
+object-record/record-field/states/ (6 files) — filesFieldUploadState ✅ MIGRATED (deleted, use filesFieldUploadStateV2)
 object-record/record-field-list/states/ (2 files)
 object-record/record-calendar/states/ (6 files)
 object-record/record-board/states/ (18 files)
@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentFamilySelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentFamilySelectorV2';
+
+export const useRecoilComponentFamilySelectorCallbackStateV2 = <
+  StateType,
+  FamilyKey,
+>(
+  componentFamilySelector: ComponentFamilySelectorV2<StateType, FamilyKey>,
+  instanceIdFromProps?: string,
+): ((
+  familyKey: FamilyKey,
+) => ReturnType<
+  ComponentFamilySelectorV2<StateType, FamilyKey>['selectorFamily']
+>) => {
+  const componentInstanceContext = globalComponentInstanceContextMap.get(
+    componentFamilySelector.key,
+  );
+
+  if (!componentInstanceContext) {
+    throw new Error(
+      `Instance context for key "${componentFamilySelector.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    componentInstanceContext,
+    instanceIdFromProps,
+  );
+
+  return useCallback(
+    (familyKey: FamilyKey) =>
+      componentFamilySelector.selectorFamily({ instanceId, familyKey }),
+    [componentFamilySelector, instanceId],
+  );
+};
@@ -0,0 +1,30 @@
+import { useAtomValue } from 'jotai';
+
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentFamilySelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentFamilySelectorV2';
+
+export const useRecoilComponentFamilySelectorValueV2 = <StateType, FamilyKey>(
+  componentFamilySelector: ComponentFamilySelectorV2<StateType, FamilyKey>,
+  familyKey: FamilyKey,
+  instanceIdFromProps?: string,
+): StateType => {
+  const componentInstanceContext = globalComponentInstanceContextMap.get(
+    componentFamilySelector.key,
+  );
+
+  if (!componentInstanceContext) {
+    throw new Error(
+      `Instance context for key "${componentFamilySelector.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    componentInstanceContext,
+    instanceIdFromProps,
+  );
+
+  return useAtomValue(
+    componentFamilySelector.selectorFamily({ instanceId, familyKey }),
+  );
+};
@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentFamilyStateV2 } from '@/ui/utilities/state/jotai/types/ComponentFamilyStateV2';
+
+export const useRecoilComponentFamilyStateCallbackStateV2 = <
+  StateType,
+  FamilyKey,
+>(
+  componentFamilyState: ComponentFamilyStateV2<StateType, FamilyKey>,
+  instanceIdFromProps?: string,
+): ((
+  familyKey: FamilyKey,
+) => ReturnType<
+  ComponentFamilyStateV2<StateType, FamilyKey>['atomFamily']
+>) => {
+  const componentInstanceContext = globalComponentInstanceContextMap.get(
+    componentFamilyState.key,
+  );
+
+  if (!componentInstanceContext) {
+    throw new Error(
+      `Instance context for key "${componentFamilyState.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    componentInstanceContext,
+    instanceIdFromProps,
+  );
+
+  return useCallback(
+    (familyKey: FamilyKey) =>
+      componentFamilyState.atomFamily({ instanceId, familyKey }),
+    [componentFamilyState, instanceId],
+  );
+};
@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentSelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentSelectorV2';
+
+export const useRecoilComponentSelectorCallbackStateV2 = <StateType>(
+  componentSelector: ComponentSelectorV2<StateType>,
+  instanceIdFromProps?: string,
+): ReturnType<ComponentSelectorV2<StateType>['selectorFamily']> => {
+  const componentInstanceContext = globalComponentInstanceContextMap.get(
+    componentSelector.key,
+  );
+
+  if (!componentInstanceContext) {
+    throw new Error(
+      `Instance context for key "${componentSelector.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    componentInstanceContext,
+    instanceIdFromProps,
+  );
+
+  return useMemo(
+    () => componentSelector.selectorFamily({ instanceId }),
+    [componentSelector, instanceId],
+  );
+};
@@ -0,0 +1,27 @@
+import { useAtomValue } from 'jotai';
+
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentSelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentSelectorV2';
+
+export const useRecoilComponentSelectorValueV2 = <StateType>(
+  componentSelector: ComponentSelectorV2<StateType>,
+  instanceIdFromProps?: string,
+): StateType => {
+  const componentInstanceContext = globalComponentInstanceContextMap.get(
+    componentSelector.key,
+  );
+
+  if (!componentInstanceContext) {
+    throw new Error(
+      `Instance context for key "${componentSelector.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    componentInstanceContext,
+    instanceIdFromProps,
+  );
+
+  return useAtomValue(componentSelector.selectorFamily({ instanceId }));
+};
@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentStateV2 } from '@/ui/utilities/state/jotai/types/ComponentStateV2';
+
+export const useRecoilComponentStateCallbackStateV2 = <StateType>(
+  componentState: ComponentStateV2<StateType>,
+  instanceIdFromProps?: string,
+): ReturnType<ComponentStateV2<StateType>['atomFamily']> => {
+  const componentInstanceContext = globalComponentInstanceContextMap.get(
+    componentState.key,
+  );
+
+  if (!componentInstanceContext) {
+    throw new Error(
+      `Instance context for key "${componentState.key}" is not defined`,
+    );
+  }
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    componentInstanceContext,
+    instanceIdFromProps,
+  );
+
+  return useMemo(
+    () => componentState.atomFamily({ instanceId }),
+    [componentState, instanceId],
+  );
+};
@@ -0,0 +1,9 @@
+import { type Atom } from 'jotai';
+
+import { type ComponentFamilyStateKey } from '@/ui/utilities/state/jotai/types/ComponentFamilyStateV2';
+
+export type ComponentFamilySelectorV2<ValueType, FamilyKey> = {
+  type: 'ComponentFamilySelectorV2';
+  key: string;
+  selectorFamily: (key: ComponentFamilyStateKey<FamilyKey>) => Atom<ValueType>;
+};
@@ -0,0 +1,9 @@
+import { type Atom } from 'jotai';
+
+import { type ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+
+export type ComponentSelectorV2<ValueType> = {
+  type: 'ComponentSelectorV2';
+  key: string;
+  selectorFamily: (key: ComponentStateKey) => Atom<ValueType>;
+};
@@ -10,4 +10,4 @@ export type FamilyStateV2<ValueType, FamilyKey> = {
  type: 'FamilyStateV2';
  key: string;
  atomFamily: (key: FamilyKey) => JotaiWritableAtom<ValueType>;
-};
+} & ((key: FamilyKey) => JotaiWritableAtom<ValueType>);
@@ -1,3 +1,11 @@
+import { type ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { type ComponentFamilySelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentFamilySelectorV2';
+import {
+  type ComponentFamilyStateKey,
+  type ComponentFamilyStateV2,
+} from '@/ui/utilities/state/jotai/types/ComponentFamilyStateV2';
+import { type ComponentSelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentSelectorV2';
+import { type ComponentStateV2 } from '@/ui/utilities/state/jotai/types/ComponentStateV2';
 import { type FamilySelectorV2 } from '@/ui/utilities/state/jotai/types/FamilySelectorV2';
 import { type FamilyStateV2 } from '@/ui/utilities/state/jotai/types/FamilyStateV2';
 import { type SelectorV2 } from '@/ui/utilities/state/jotai/types/SelectorV2';
@@ -12,6 +20,22 @@ export type SelectorGetterV2 = {
        | FamilySelectorV2<ValueType, FamilyKey>,
      familyKey: FamilyKey,
    ): ValueType;
+    <ValueType>(
+      componentState: ComponentStateV2<ValueType>,
+      key: ComponentStateKey,
+    ): ValueType;
+    <ValueType, FamilyKey>(
+      componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+      key: ComponentFamilyStateKey<FamilyKey>,
+    ): ValueType;
+    <ValueType>(
+      componentSelector: ComponentSelectorV2<ValueType>,
+      key: ComponentStateKey,
+    ): ValueType;
+    <ValueType, FamilyKey>(
+      componentFamilySelector: ComponentFamilySelectorV2<ValueType, FamilyKey>,
+      key: ComponentFamilyStateKey<FamilyKey>,
+    ): ValueType;
  };
 };

@@ -1,5 +1,13 @@
 import { type Getter } from 'jotai';

+import { type ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import {
+  type ComponentFamilyStateKey,
+  type ComponentFamilyStateV2,
+} from '@/ui/utilities/state/jotai/types/ComponentFamilyStateV2';
+import { type ComponentFamilySelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentFamilySelectorV2';
+import { type ComponentSelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentSelectorV2';
+import { type ComponentStateV2 } from '@/ui/utilities/state/jotai/types/ComponentStateV2';
 import { type FamilySelectorV2 } from '@/ui/utilities/state/jotai/types/FamilySelectorV2';
 import { type FamilyStateV2 } from '@/ui/utilities/state/jotai/types/FamilyStateV2';
 import { type SelectorV2 } from '@/ui/utilities/state/jotai/types/SelectorV2';
@@ -12,13 +20,52 @@ export const buildGetHelper =
      | StateV2<ValueType>
      | SelectorV2<ValueType>
      | FamilyStateV2<ValueType, FamilyKey>
-      | FamilySelectorV2<ValueType, FamilyKey>,
-    familyKey?: FamilyKey,
+      | FamilySelectorV2<ValueType, FamilyKey>
+      | ComponentStateV2<ValueType>
+      | ComponentFamilyStateV2<ValueType, FamilyKey>
+      | ComponentSelectorV2<ValueType>
+      | ComponentFamilySelectorV2<ValueType, FamilyKey>,
+    keyOrFamilyKey?:
+      | FamilyKey
+      | ComponentStateKey
+      | ComponentFamilyStateKey<FamilyKey>,
  ): ValueType => {
+    if (stateOrFamily.type === 'ComponentStateV2') {
+      return jotaiGet(
+        (stateOrFamily as ComponentStateV2<ValueType>).atomFamily(
+          keyOrFamilyKey as ComponentStateKey,
+        ),
+      );
+    }
+
+    if (stateOrFamily.type === 'ComponentFamilyStateV2') {
+      return jotaiGet(
+        (
+          stateOrFamily as ComponentFamilyStateV2<ValueType, FamilyKey>
+        ).atomFamily(keyOrFamilyKey as ComponentFamilyStateKey<FamilyKey>),
+      );
+    }
+
+    if (stateOrFamily.type === 'ComponentSelectorV2') {
+      return jotaiGet(
+        (stateOrFamily as ComponentSelectorV2<ValueType>).selectorFamily(
+          keyOrFamilyKey as ComponentStateKey,
+        ),
+      );
+    }
+
+    if (stateOrFamily.type === 'ComponentFamilySelectorV2') {
+      return jotaiGet(
+        (
+          stateOrFamily as ComponentFamilySelectorV2<ValueType, FamilyKey>
+        ).selectorFamily(keyOrFamilyKey as ComponentFamilyStateKey<FamilyKey>),
+      );
+    }
+
    if (stateOrFamily.type === 'FamilyStateV2') {
      return jotaiGet(
        (stateOrFamily as FamilyStateV2<ValueType, FamilyKey>).atomFamily(
-          familyKey as FamilyKey,
+          keyOrFamilyKey as FamilyKey,
        ),
      );
    }
@@ -27,7 +74,7 @@ export const buildGetHelper =
      return jotaiGet(
        (
          stateOrFamily as FamilySelectorV2<ValueType, FamilyKey>
-        ).selectorFamily(familyKey as FamilyKey),
+        ).selectorFamily(keyOrFamilyKey as FamilyKey),
      );
    }

@@ -0,0 +1,61 @@
+import { atom, type Atom } from 'jotai';
+
+import { type ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentFamilySelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentFamilySelectorV2';
+import { type ComponentFamilyStateKey } from '@/ui/utilities/state/jotai/types/ComponentFamilyStateV2';
+import { type SelectorGetterV2 } from '@/ui/utilities/state/jotai/types/SelectorCallbacksV2';
+import { buildGetHelper } from '@/ui/utilities/state/jotai/utils/buildGetHelper';
+import { isDefined } from 'twenty-shared/utils';
+
+export const createComponentFamilySelectorV2 = <ValueType, FamilyKey>({
+  key,
+  get,
+  componentInstanceContext,
+}: {
+  key: string;
+  get: (
+    key: ComponentFamilyStateKey<FamilyKey>,
+  ) => (callbacks: SelectorGetterV2) => ValueType;
+  componentInstanceContext: ComponentInstanceStateContext<any> | null;
+}): ComponentFamilySelectorV2<ValueType, FamilyKey> => {
+  if (isDefined(componentInstanceContext)) {
+    globalComponentInstanceContextMap.set(key, componentInstanceContext);
+  }
+
+  const atomCache = new Map<string, Atom<ValueType>>();
+
+  const selectorFamily = (
+    componentFamilyStateKey: ComponentFamilyStateKey<FamilyKey>,
+  ): Atom<ValueType> => {
+    const familyKeyStr =
+      typeof componentFamilyStateKey.familyKey === 'string'
+        ? componentFamilyStateKey.familyKey
+        : JSON.stringify(componentFamilyStateKey.familyKey);
+    const cacheKey = `${componentFamilyStateKey.instanceId}__${familyKeyStr}`;
+    const existing = atomCache.get(cacheKey);
+
+    if (existing !== undefined) {
+      return existing;
+    }
+
+    const getForKey = get(componentFamilyStateKey);
+
+    const derivedAtom = atom((jotaiGet) => {
+      const getHelper = buildGetHelper(jotaiGet);
+
+      return getForKey({ get: getHelper });
+    });
+
+    derivedAtom.debugLabel = `${key}__${cacheKey}`;
+    atomCache.set(cacheKey, derivedAtom);
+
+    return derivedAtom;
+  };
+
+  return {
+    type: 'ComponentFamilySelectorV2',
+    key,
+    selectorFamily,
+  };
+};
@@ -0,0 +1,54 @@
+import { atom, type Atom } from 'jotai';
+
+import { type ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
+import { type ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { type ComponentSelectorV2 } from '@/ui/utilities/state/jotai/types/ComponentSelectorV2';
+import { type SelectorGetterV2 } from '@/ui/utilities/state/jotai/types/SelectorCallbacksV2';
+import { buildGetHelper } from '@/ui/utilities/state/jotai/utils/buildGetHelper';
+import { isDefined } from 'twenty-shared/utils';
+
+export const createComponentSelectorV2 = <ValueType>({
+  key,
+  get,
+  componentInstanceContext,
+}: {
+  key: string;
+  get: (key: ComponentStateKey) => (callbacks: SelectorGetterV2) => ValueType;
+  componentInstanceContext: ComponentInstanceStateContext<any> | null;
+}): ComponentSelectorV2<ValueType> => {
+  if (isDefined(componentInstanceContext)) {
+    globalComponentInstanceContextMap.set(key, componentInstanceContext);
+  }
+
+  const atomCache = new Map<string, Atom<ValueType>>();
+
+  const selectorFamily = (
+    componentStateKey: ComponentStateKey,
+  ): Atom<ValueType> => {
+    const existing = atomCache.get(componentStateKey.instanceId);
+
+    if (existing !== undefined) {
+      return existing;
+    }
+
+    const getForKey = get(componentStateKey);
+
+    const derivedAtom = atom((jotaiGet) => {
+      const getHelper = buildGetHelper(jotaiGet);
+
+      return getForKey({ get: getHelper });
+    });
+
+    derivedAtom.debugLabel = `${key}__${componentStateKey.instanceId}`;
+    atomCache.set(componentStateKey.instanceId, derivedAtom);
+
+    return derivedAtom;
+  };
+
+  return {
+    type: 'ComponentSelectorV2',
+    key,
+    selectorFamily,
+  };
+};
@@ -39,9 +39,9 @@ export const createFamilyStateV2 = <ValueType, FamilyKey>({
    return baseAtom;
  };

-  return {
-    type: 'FamilyStateV2',
+  return Object.assign(familyFunction, {
+    type: 'FamilyStateV2' as const,
    key,
    atomFamily: familyFunction,
-  };
+  });
 };