Keep migrating to jotai

[charlesBochet]

And we continue!

[greptile-apps]

Greptile Summary

This PR continues the Recoil to Jotai migration (PR 2 in the migration plan), focusing on UI utilities and layout components. The migration introduces new infrastructure for component family states and systematically migrates ~20 state files and hooks across focus management, hotkeys, pointer events, scroll handling, modals, selectable lists, tab lists, and tables.

Key Changes:

• Added createComponentFamilyStateV2 utility with two-level caching (instanceId + familyKey)
• Added corresponding hooks: useRecoilComponentFamilyStateV2, useRecoilComponentFamilyValueV2, useSetRecoilComponentFamilyStateV2
• Migrated all useRecoilCallback usages to useCallback with useStore() or direct jotaiStore.get/set
• Simplified component family selectors to re-export the state directly (no wrapper needed)
• Updated tests to use Jotai Provider and resetJotaiStore() in beforeEach
• Updated Storybook stories to use custom Jotai decorators with createStore()

Migration Pattern:
The migration follows a consistent pattern across all files:

1. States: createComponentState → createComponentStateV2, createComponentFamilyState → createComponentFamilyStateV2
2. Hooks: useRecoilCallback → useCallback + useStore() or jotaiStore
3. Selectors: Simplified to re-export the state atom directly
4. Tests: Added JotaiProvider wrappers and resetJotaiStore() cleanup

Confidence Score: 5/5

• Safe to merge - well-planned migration with consistent patterns
• This is part of a systematic, well-documented migration with a clear plan. The changes follow consistent patterns, tests have been properly updated, and the new infrastructure mirrors the existing Recoil patterns. All migrations are straightforward replacements with no logic changes.
• No files require special attention

Important Files Changed

Filename	Overview
packages/twenty-front/src/modules/ui/utilities/state/jotai/utils/createComponentFamilyStateV2.ts	New utility to create component family states with two-level caching (instanceId + familyKey)
packages/twenty-front/src/modules/ui/utilities/state/jotai/types/ComponentFamilyStateV2.ts	Type definitions for component family state with proper TypeScript generics
packages/twenty-front/src/modules/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyStateV2.ts	Hook to access component family state with instanceId resolution
packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md	Comprehensive migration plan documenting the Recoil to Jotai migration strategy
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts	Migrated from useRecoilCallback to useCallback with useStore/jotaiStore.get/set
packages/twenty-front/src/modules/ui/utilities/focus/hooks/usePushFocusItemToFocusStack.ts	Migrated from useRecoilCallback to useCallback with direct jotaiStore access
packages/twenty-front/src/modules/ui/layout/modal/hooks/useModal.tsx	Migrated modal management from useRecoilCallback to useStore hook pattern
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts	Migrated click outside detection from useRecoilCallback to direct jotaiStore access

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Component Family State Migration] --> B[createComponentFamilyStateV2]
    B --> C[Two-Level Cache]
    C --> D[instanceId + familyKey]
    
    A --> E[Hook Migration Pattern]
    E --> F[useRecoilCallback → useCallback]
    F --> G[snapshot.getLoadable → jotaiStore.get]
    F --> H[set → jotaiStore.set]
    
    A --> I[Selector Simplification]
    I --> J[Remove wrapper selector]
    I --> K[Re-export state directly]
    
    A --> L[Test Migration]
    L --> M[Add JotaiProvider wrapper]
    L --> N[Add resetJotaiStore in beforeEach]
    
    A --> O[Storybook Migration]
    O --> P[Custom JotaiInitDecorator]
    O --> Q[createStore for initialization]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style E fill:#fff4e1
    style I fill:#fff4e1
    style L fill:#e8f5e9
    style O fill:#e8f5e9

Loading

_{Last reviewed commit: aba4ab1}

[greptile-apps]

_{59 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[charlesBochet]

can this be avoided if we use useStore() internally?

[cubic-dev-ai]

1 issue found across 59 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector.ts">

<violation number="1" location="packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector.ts:1">
P1: This export swaps a Recoil selector for a Jotai ComponentFamilyStateV2, but callers still use useRecoilComponentFamilyValue. That hook only supports ComponentFamilyState/Selector types, so this will break at runtime (or fail to type-check). Either keep exporting a Recoil-compatible selector or update all callers to the Jotai hook before swapping the export.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[charlesBochet]

no

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:47681

This environment will automatically shut down when the PR is closed or after 5 hours.

[cubic-dev-ai]

2 issues found across 19 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx">

<violation number="1" location="packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx:18">
P2: Seeding a shared singleton Jotai store in the decorator without resetting it causes state to leak between stories/tests. This regresses the previous per-story store isolation and can make Storybook play tests flaky. Consider resetting the store (e.g., resetJotaiStore) or creating a fresh store per story before seeding.</violation>
</file>

<file name="packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx">

<violation number="1" location="packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx:17">
P1: The decorator directly modifies the global `jotaiStore` singleton during the render phase. This creates persistent side effects that leak into other stories and tests, causing potential flakiness. Additionally, performing side effects during render is a React anti-pattern (logic runs on every render and may run twice in Strict Mode).

Move the initialization logic into a `useEffect` hook and ensure you reset the atoms to their default values in the cleanup function. You will need to import `useEffect` from 'react'.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P1: The decorator directly modifies the global jotaiStore singleton during the render phase. This creates persistent side effects that leak into other stories and tests, causing potential flakiness. Additionally, performing side effects during render is a React anti-pattern (logic runs on every render and may run twice in Strict Mode).

Move the initialization logic into a useEffect hook and ensure you reset the atoms to their default values in the cleanup function. You will need to import useEffect from 'react'.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx, line 17:

<comment>The decorator directly modifies the global `jotaiStore` singleton during the render phase. This creates persistent side effects that leak into other stories and tests, causing potential flakiness. Additionally, performing side effects during render is a React anti-pattern (logic runs on every render and may run twice in Strict Mode).

Move the initialization logic into a `useEffect` hook and ensure you reset the atoms to their default values in the cleanup function. You will need to import `useEffect` from 'react'.</comment>

<file context>
@@ -1,46 +1,40 @@
-    <Provider store={store}>
-      <Story />
-    </Provider>
+const JotaiInitDecorator: Decorator = (Story) => {
+  jotaiStore.set(
+    isModalOpenedComponentState.atomFamily({
</file context>

[cubic-dev-ai]

P2: Seeding a shared singleton Jotai store in the decorator without resetting it causes state to leak between stories/tests. This regresses the previous per-story store isolation and can make Storybook play tests flaky. Consider resetting the store (e.g., resetJotaiStore) or creating a fresh store per story before seeding.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx, line 18:

<comment>Seeding a shared singleton Jotai store in the decorator without resetting it causes state to leak between stories/tests. This regresses the previous per-story store isolation and can make Storybook play tests flaky. Consider resetting the store (e.g., resetJotaiStore) or creating a fresh store per story before seeding.</comment>

<file context>
@@ -1,46 +1,40 @@
-      <Story />
-    </Provider>
+const JotaiInitDecorator: Decorator = (Story) => {
+  jotaiStore.set(
+    isModalOpenedComponentState.atomFamily({
+      instanceId: 'modal-id',
</file context>

[twenty-eng-sync]

Hey @charlesBochet! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!