Introduce ComponentState (#4386)

* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage

.github/workflows/ci-front.yaml

@@ -172,4 +172,4 @@ jobs:
           key: root-node_modules-${{hashFiles('yarn.lock')}}
           restore-keys: root-node_modules-
       - name: Front / Run jest
-        run: yarn nx test twenty-front
+        run: yarn nx coverage twenty-front

packages/twenty-front/package.json

@@ -17,7 +17,7 @@
     "lint:ci": "yarn lint --config .eslintrc-ci.cjs",
     "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "test": "jest src/modules/spreadsheet-import/utils/__tests__/dataMutations.test.ts",
+    "test": "jest",
     "test-watch": "jest --watch",
     "tsup": "tsup",
     "coverage": "jest --coverage",

packages/twenty-front/src/effect-components/CommandMenuEffect.tsx

@@ -5,7 +5,7 @@ import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuComma
 import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
 
 export const CommandMenuEffect = () => {
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
+  const setCommands = useSetRecoilState(commandMenuCommandsState());
 
   const commands = COMMAND_MENU_COMMANDS;
   useEffect(() => {

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -45,7 +45,7 @@ export const PageChangeEffect = () => {
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  const isSignUpDisabled = useRecoilValue(isSignUpDisabledState);
+  const isSignUpDisabled = useRecoilValue(isSignUpDisabledState());
 
   useEffect(() => {
     if (!previousLocation || previousLocation !== location.pathname) {

packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx

@@ -11,7 +11,7 @@ import { Comment } from '../Comment';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState());
 
   useEffect(() => {
     setViewableActivity('test-id');

packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -13,7 +13,7 @@ import { CommentHeader } from '../CommentHeader';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentHeaderSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivity = useSetRecoilState(viewableActivityIdState());
 
   useEffect(() => {
     setViewableActivity('test-id');

packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx

@@ -118,7 +118,7 @@ export const ActivityBodyEditor = ({
   );
 
   const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState,
+    canCreateActivityState(),
   );
 
   const slashMenuItems = getSlashMenu();

packages/twenty-front/src/modules/activities/components/ActivityComments.tsx

@@ -61,7 +61,7 @@ export const ActivityComments = ({
     objectNameSingular: CoreObjectNameSingular.Comment,
   });
 
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
 
   const { records: comments } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Comment,

packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx

@@ -29,15 +29,15 @@ export const ActivityEditorEffect = ({
     ({ snapshot, set }) =>
       () => {
         const isUpsertingActivityInDB = snapshot
-          .getLoadable(isUpsertingActivityInDBState)
+          .getLoadable(isUpsertingActivityInDBState())
           .getValue();
 
         const canCreateActivity = snapshot
-          .getLoadable(canCreateActivityState)
+          .getLoadable(canCreateActivityState())
           .getValue();
 
         const isActivityInCreateMode = snapshot
-          .getLoadable(isActivityInCreateModeState)
+          .getLoadable(isActivityInCreateModeState())
           .getValue();
 
         const activityFromStore = snapshot
@@ -71,7 +71,7 @@ export const ActivityEditorEffect = ({
             deleteActivityFromCache(activity);
           }
 
-          set(isActivityInCreateModeState, false);
+          set(isActivityInCreateModeState(), false);
         } else if (isNonNullable(activity)) {
           if (
             activity.title !== activityTitle ||

packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx

@@ -71,7 +71,7 @@ export const ActivityTitle = ({ activityId }: ActivityTitleProps) => {
   const activity = activityInStore as Activity;
 
   const [canCreateActivity, setCanCreateActivity] = useRecoilState(
-    canCreateActivityState,
+    canCreateActivityState(),
   );
 
   const { upsertActivity } = useUpsertActivity();

packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts

@@ -1,7 +1,7 @@
-import { emailThreadsPageStateScopeMap } from '@/activities/emails/state/emailThreadsPageStateScopeMap';
+import { emailThreadsPageComponentState } from '@/activities/emails/state/emailThreadsPageComponentState';
 import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 type useEmailThreadStatesProps = {
   emailThreadScopeId?: string;
@@ -17,6 +17,9 @@ export const useEmailThreadStates = ({
 
   return {
     scopeId,
-    getEmailThreadsPageState: getState(emailThreadsPageStateScopeMap, scopeId),
+    getEmailThreadsPageState: extractComponentState(
+      emailThreadsPageComponentState,
+      scopeId,
+    ),
   };
 };

packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts

@@ -1,11 +1,11 @@
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 
 import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer';
 import { viewableEmailThreadIdState } from '@/activities/emails/state/viewableEmailThreadIdState';
 
 export const useEmailThread = () => {
-  const [, setViewableEmailThreadId] = useRecoilState(
+  const setViewableEmailThreadId = useSetRecoilState(
-    viewableEmailThreadIdState,
+    viewableEmailThreadIdState(),
   );
 
   const openEmailThredRightDrawer = useOpenEmailThreadRightDrawer();

packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts

@@ -9,7 +9,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 
 export const useRightDrawerEmailThread = () => {
-  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState);
+  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState());
 
   const apolloClient = useApolloClient();
   const thread = apolloClient.readFragment({

packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageComponentState.ts

@@ -0,0 +1,12 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export type EmailThreadsPageType = {
+  pageNumber: number;
+  hasNextPage: boolean;
+};
+
+export const emailThreadsPageComponentState =
+  createComponentState<EmailThreadsPageType>({
+    key: 'emailThreadsPageComponentState',
+    defaultValue: { pageNumber: 1, hasNextPage: true },
+  });

packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts

@@ -1,12 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export type EmailThreadsPageType = {
-  pageNumber: number;
-  hasNextPage: boolean;
-};
-
-export const emailThreadsPageStateScopeMap =
-  createStateScopeMap<EmailThreadsPageType>({
-    key: 'emailThreadsPageStateScopeMap',
-    defaultValue: { pageNumber: 1, hasNextPage: true },
-  });

packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const viewableEmailThreadIdState = atom<string | null>({
+export const viewableEmailThreadIdState = createState<string | null>({
   key: 'viewableEmailThreadIdState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx

@@ -10,7 +10,7 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
 
 export const useUploadAttachmentFile = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
   const [uploadFile] = useUploadFileMutation();
 
   const { createOneRecord: createOneAttachment } =

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx

@@ -58,7 +58,7 @@ describe('useActivityConnectionUtils', () => {
         <RecoilRoot
           initializeState={(snapshot) => {
             snapshot.set(
-              objectMetadataItemsState,
+              objectMetadataItemsState(),
               getObjectMetadataItemsMock(),
             );
           }}
@@ -86,7 +86,7 @@ describe('useActivityConnectionUtils', () => {
         <RecoilRoot
           initializeState={(snapshot) => {
             snapshot.set(
-              objectMetadataItemsState,
+              objectMetadataItemsState(),
               getObjectMetadataItemsMock(),
             );
           }}

packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts

@@ -14,7 +14,7 @@ export const useActivityTargetObjectRecords = ({
 }: {
   activityId: string;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
 
   const { records: activityTargets, loading: loadingActivityTargets } =
     useFindManyRecords<ActivityTarget>({

packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts

@@ -27,7 +27,7 @@ export const useCreateActivityInCache = () => {
       objectNameSingular: CoreObjectNameSingular.Activity,
     });
 
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
 
   const { record: currentWorkspaceMemberRecord } = useFindOneRecord({
     objectNameSingular: CoreObjectNameSingular.WorkspaceMember,

packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts

@@ -1,4 +1,4 @@
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
@@ -12,9 +12,9 @@ export const useOpenActivityRightDrawer = () => {
   const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } =
     useRightDrawer();
   const [viewableActivityId, setViewableActivityId] = useRecoilState(
-    viewableActivityIdState,
+    viewableActivityIdState(),
   );
-  const [, setActivityIdInDrawer] = useRecoilState(activityIdInDrawerState);
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
   const setHotkeyScope = useSetHotkeyScope();
 
   return (activityId: string) => {

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -23,21 +23,23 @@ export const useOpenCreateActivityDrawer = () => {
 
   const { createActivityInCache } = useCreateActivityInCache();
 
-  const [, setActivityTargetableEntityArray] = useRecoilState(
+  const setActivityTargetableEntityArray = useSetRecoilState(
-    activityTargetableEntityArrayState,
+    activityTargetableEntityArrayState(),
   );
-  const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
+  const setViewableActivityId = useSetRecoilState(viewableActivityIdState());
 
-  const setIsCreatingActivity = useSetRecoilState(isActivityInCreateModeState);
+  const setIsCreatingActivity = useSetRecoilState(
+    isActivityInCreateModeState(),
+  );
 
   const setTemporaryActivityForEditor = useSetRecoilState(
-    temporaryActivityForEditorState,
+    temporaryActivityForEditorState(),
   );
 
-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
 
   const [, setIsUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState,
+    isUpsertingActivityInDBState(),
   );
 
   const openCreateActivityDrawer = async ({

packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts

@@ -21,7 +21,7 @@ import { isNonNullable } from '~/utils/isNonNullable';
 // TODO: create a generic way to have records only in cache for create mode and delete them afterwards ?
 export const useUpsertActivity = () => {
   const [isActivityInCreateMode, setIsActivityInCreateMode] = useRecoilState(
-    isActivityInCreateModeState,
+    isActivityInCreateModeState(),
   );
 
   const { updateOneRecord: updateOneActivity } = useUpdateOneRecord<Activity>({
@@ -31,10 +31,10 @@ export const useUpsertActivity = () => {
   const { createActivityInDB } = useCreateActivityInDB();
 
   const [, setIsUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState,
+    isUpsertingActivityInDBState(),
   );
 
-  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
+  const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState());
 
   const objectShowPageTargetableObject = useRecoilValue(
     objectShowPageTargetableObjectState,

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -34,7 +34,9 @@ export const ActivityTargetInlineCellEditMode = ({
   activity,
   activityTargetWithTargetRecords,
 }: ActivityTargetInlineCellEditModeProps) => {
-  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
+  const [isActivityInCreateMode] = useRecoilState(
+    isActivityInCreateModeState(),
+  );
 
   const selectedTargetObjectIds = activityTargetWithTargetRecords.map(
     (activityTarget) => ({

packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -36,13 +36,13 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const ActivityActionBar = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
+  const viewableActivityId = useRecoilValue(viewableActivityIdState());
-  const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
+  const activityIdInDrawer = useRecoilValue(activityIdInDrawerState());
 
   const activityTargetableEntityArray = useRecoilValue(
-    activityTargetableEntityArrayState,
+    activityTargetableEntityArrayState(),
   );
-  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+  const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState());
   const { deleteOneRecord: deleteOneActivity } = useDeleteOneRecord({
     objectNameSingular: CoreObjectNameSingular.Activity,
   });
@@ -54,13 +54,15 @@ export const ActivityActionBar = () => {
   );
 
   const [temporaryActivityForEditor, setTemporaryActivityForEditor] =
-    useRecoilState(temporaryActivityForEditorState);
+    useRecoilState(temporaryActivityForEditorState());
 
   const { deleteActivityFromCache } = useDeleteActivityFromCache();
 
-  const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
+  const [isActivityInCreateMode] = useRecoilState(
+    isActivityInCreateModeState(),
+  );
   const [isUpsertingActivityInDB] = useRecoilState(
-    isUpsertingActivityInDBState,
+    isUpsertingActivityInDBState(),
   );
 
   const objectShowPageTargetableObject = useRecoilValue(

packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx

@@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
 import { RightDrawerActivity } from '../RightDrawerActivity';
 
 export const RightDrawerCreateActivity = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
+  const viewableActivityId = useRecoilValue(viewableActivityIdState());
 
   return (
     <>

packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx

@@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS
 import { RightDrawerActivity } from '../RightDrawerActivity';
 
 export const RightDrawerEditActivity = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
+  const viewableActivityId = useRecoilValue(viewableActivityIdState());
 
   return (
     <>

packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts

@@ -1,9 +1,9 @@
-import { atomFamily } from 'recoil';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
 
-export const activityBodyFamilyState = atomFamily<
+export const activityBodyFamilyState = createFamilyState<
   string,
   { activityId: string }
 >({
   key: 'activityBodyFamilyState',
-  default: '',
+  defaultValue: '',
 });

packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const activityIdInDrawerState = atom<string | null>({
+export const activityIdInDrawerState = createState<string | null>({
   key: 'activityIdInDrawerState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts

@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
-export const activityTargetableEntityArrayState = atom<
+export const activityTargetableEntityArrayState = createState<
   ActivityTargetableObject[]
 >({
   key: 'activities/targetable-entity-array',
-  default: [],
+  defaultValue: [],
 });

packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts

@@ -1,9 +1,9 @@
-import { atomFamily } from 'recoil';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
 
-export const activityTitleFamilyState = atomFamily<
+export const activityTitleFamilyState = createFamilyState<
   string,
   { activityId: string }
 >({
   key: 'activityTitleFamilyState',
-  default: '',
+  defaultValue: '',
 });

packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts

@@ -1,9 +1,9 @@
-import { atomFamily } from 'recoil';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
 
-export const activityTitleHasBeenSetFamilyState = atomFamily<
+export const activityTitleHasBeenSetFamilyState = createFamilyState<
   boolean,
   { activityId: string }
 >({
   key: 'activityTitleHasBeenSetFamilyState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const canCreateActivityState = atom<boolean>({
+export const canCreateActivityState = createState<boolean>({
   key: 'canCreateActivityState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const isActivityInCreateModeState = atom<boolean>({
+export const isActivityInCreateModeState = createState<boolean>({
   key: 'isActivityInCreateModeState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const isUpsertingActivityInDBState = atom<boolean>({
+export const isUpsertingActivityInDBState = createState<boolean>({
   key: 'isUpsertingActivityInDBState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts

@@ -1,8 +1,9 @@
-import { atom } from 'recoil';
-
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const targetableObjectsInDrawerState = atom<ActivityTargetableObject[]>({
+export const targetableObjectsInDrawerState = createState<
+  ActivityTargetableObject[]
+>({
   key: 'targetableObjectsInDrawerState',
-  default: [],
+  defaultValue: [],
 });

packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts

@@ -1,8 +1,8 @@
-import { atom } from 'recoil';
-
 import { ActivityForEditor } from '@/activities/types/ActivityForEditor';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const temporaryActivityForEditorState = atom<ActivityForEditor | null>({
+export const temporaryActivityForEditorState =
-  key: 'temporaryActivityForEditorState',
+  createState<ActivityForEditor | null>({
-  default: null,
+    key: 'temporaryActivityForEditorState',
-});
+    defaultValue: null,
+  });

packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const viewableActivityIdState = atom<string | null>({
+export const viewableActivityIdState = createState<string | null>({
   key: 'activities/viewable-activity-id',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx

@@ -9,10 +9,10 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { parseDate } from '~/utils/date-utils';
 
 export const CurrentUserDueTaskCountEffect = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
 
   const [currentUserDueTaskCount, setCurrentUserDueTaskCount] = useRecoilState(
-    currentUserDueTaskCountState,
+    currentUserDueTaskCountState(),
   );
 
   const { records: tasks } = useFindManyRecords({

packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts

@@ -7,7 +7,7 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { parseDate } from '~/utils/date-utils';
 
 export const useCurrentUserTaskCount = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
 
   const { records: tasks } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Activity,

packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const currentUserDueTaskCountState = atom<number>({
+export const currentUserDueTaskCountState = createState<number>({
-  default: 0,
+  defaultValue: 0,
   key: 'currentUserDueTaskCountState',
 });

packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx

@@ -33,7 +33,7 @@ export const Timeline = ({
   targetableObject: ActivityTargetableObject;
 }) => {
   const { initialized, noActivities } = useRecoilValue(
-    timelineActivitiesNetworkingState,
+    timelineActivitiesNetworkingState(),
   );
 
   const showEmptyState = noActivities;

packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx

@@ -26,7 +26,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)``;
 
 export const TimelineItemsContainer = () => {
   const timelineActivitiesForGroup = useRecoilValue(
-    timelineActivitiesForGroupState,
+    timelineActivitiesForGroupState(),
   );
 
   const groupedActivities = groupActivitiesByMonth(timelineActivitiesForGroup);

packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx

@@ -35,10 +35,10 @@ export const TimelineQueryEffect = ({
   });
 
   const [timelineActivitiesNetworking, setTimelineActivitiesNetworking] =
-    useRecoilState(timelineActivitiesNetworkingState);
+    useRecoilState(timelineActivitiesNetworkingState());
 
   const [timelineActivitiesForGroup, setTimelineActivitiesForGroup] =
-    useRecoilState(timelineActivitiesForGroupState);
+    useRecoilState(timelineActivitiesForGroupState());
 
   useEffect(() => {
     if (!isNonNullable(targetableObject)) {

packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts

@@ -1,11 +1,10 @@
-import { atomFamily } from 'recoil';
-
 import { Activity } from '@/activities/types/Activity';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
 
-export const timelineActivitiesFammilyState = atomFamily<
+export const timelineActivitiesFammilyState = createFamilyState<
   Activity | null,
   string
 >({
   key: 'timelineActivitiesFammilyState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts

@@ -1,10 +1,9 @@
-import { atom } from 'recoil';
-
 import { ActivityForActivityGroup } from '@/activities/timeline/utils/groupActivitiesByMonth';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const timelineActivitiesForGroupState = atom<ActivityForActivityGroup[]>(
+export const timelineActivitiesForGroupState = createState<
-  {
+  ActivityForActivityGroup[]
-    key: 'timelineActivitiesForGroupState',
+>({
-    default: [],
+  key: 'timelineActivitiesForGroupState',
-  },
+  defaultValue: [],
-);
+});

packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts

@@ -1,11 +1,11 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const timelineActivitiesNetworkingState = atom<{
+export const timelineActivitiesNetworkingState = createState<{
   initialized: boolean;
   noActivities: boolean;
 }>({
   key: 'timelineActivitiesNetworkingState',
-  default: {
+  defaultValue: {
     initialized: false,
     noActivities: false,
   },

packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts

@@ -1,11 +1,10 @@
-import { atomFamily } from 'recoil';
-
 import { Activity } from '@/activities/types/Activity';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
 
-export const timelineActivityWithoutTargetsFamilyState = atomFamily<
+export const timelineActivityWithoutTargetsFamilyState = createFamilyState<
   Pick<Activity, 'id' | 'title' | 'createdAt' | 'author' | 'type'> | null,
   string
 >({
   key: 'timelineActivityFirstLevelFamilySelector',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { telemetryState } from '@/client-config/states/telemetryState';
 import { useCreateEventMutation } from '~/generated/graphql';
@@ -13,7 +13,7 @@ export interface EventData {
 }
 
 export const useEventTracker = () => {
-  const [telemetry] = useRecoilState(telemetryState);
+  const telemetry = useRecoilValue(telemetryState());
   const [createEventMutation] = useCreateEventMutation();
 
   return useCallback(

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -16,11 +16,11 @@ import { ApolloFactory } from '../services/apollo.factory';
 export const useApolloFactory = () => {
   // eslint-disable-next-line @nx/workspace-no-state-useref
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
-  const [isDebugMode] = useRecoilState(isDebugModeState);
+  const [isDebugMode] = useRecoilState(isDebugModeState());
 
   const navigate = useNavigate();
   const isMatchingLocation = useIsMatchingLocation();
-  const [tokenPair, setTokenPair] = useRecoilState(tokenPairState);
+  const [tokenPair, setTokenPair] = useRecoilState(tokenPairState());
 
   const apolloClient = useMemo(() => {
     apolloRef.current = new ApolloFactory({

packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx

@@ -76,13 +76,13 @@ describe('useAuth', () => {
     const { result } = renderHook(
       () => {
         const client = useApolloClient();
-        const icons = useRecoilValue(iconsState);
+        const icons = useRecoilValue(iconsState());
-        const authProviders = useRecoilValue(authProvidersState);
+        const authProviders = useRecoilValue(authProvidersState());
-        const billing = useRecoilValue(billingState);
+        const billing = useRecoilValue(billingState());
-        const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
+        const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
-        const supportChat = useRecoilValue(supportChatState);
+        const supportChat = useRecoilValue(supportChatState());
-        const telemetry = useRecoilValue(telemetryState);
+        const telemetry = useRecoilValue(telemetryState());
-        const isDebugMode = useRecoilValue(isDebugModeState);
+        const isDebugMode = useRecoilValue(isDebugModeState());
         return {
           ...useAuth(),
           client,

packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts

@@ -9,7 +9,7 @@ const renderHooks = () => {
   const { result } = renderHook(
     () => {
       const isLogged = useIsLogged();
-      const setTokenPair = useSetRecoilState(tokenPairState);
+      const setTokenPair = useSetRecoilState(tokenPairState());
 
       return {
         isLogged,

packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts

@@ -35,13 +35,13 @@ const renderHooks = () => {
   const { result } = renderHook(
     () => {
       const onboardingStatus = useOnboardingStatus();
-      const setBilling = useSetRecoilState(billingState);
+      const setBilling = useSetRecoilState(billingState());
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
       const setCurrentWorkspaceMember = useSetRecoilState(
-        currentWorkspaceMemberState,
+        currentWorkspaceMemberState(),
       );
-      const setTokenPair = useSetRecoilState(tokenPairState);
+      const setTokenPair = useSetRecoilState(tokenPairState());
-      const setVerifyPending = useSetRecoilState(isVerifyPendingState);
+      const setVerifyPending = useSetRecoilState(isVerifyPendingState());
 
       return {
         onboardingStatus,

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -32,14 +32,14 @@ import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';
 
 export const useAuth = () => {
-  const [, setTokenPair] = useRecoilState(tokenPairState);
+  const [, setTokenPair] = useRecoilState(tokenPairState());
-  const setCurrentUser = useSetRecoilState(currentUserState);
+  const setCurrentUser = useSetRecoilState(currentUserState());
   const setCurrentWorkspaceMember = useSetRecoilState(
-    currentWorkspaceMemberState,
+    currentWorkspaceMemberState(),
   );
 
-  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
-  const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState);
+  const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState());
 
   const [challenge] = useChallengeMutation();
   const [signUp] = useSignUpMutation();
@@ -141,26 +141,26 @@ export const useAuth = () => {
     ({ snapshot }) =>
       async () => {
         const emptySnapshot = snapshot_UNSTABLE();
-        const iconsValue = snapshot.getLoadable(iconsState).getValue();
+        const iconsValue = snapshot.getLoadable(iconsState()).getValue();
         const authProvidersValue = snapshot
-          .getLoadable(authProvidersState)
+          .getLoadable(authProvidersState())
           .getValue();
-        const billing = snapshot.getLoadable(billingState).getValue();
+        const billing = snapshot.getLoadable(billingState()).getValue();
         const isSignInPrefilled = snapshot
-          .getLoadable(isSignInPrefilledState)
+          .getLoadable(isSignInPrefilledState())
           .getValue();
-        const supportChat = snapshot.getLoadable(supportChatState).getValue();
+        const supportChat = snapshot.getLoadable(supportChatState()).getValue();
-        const telemetry = snapshot.getLoadable(telemetryState).getValue();
+        const telemetry = snapshot.getLoadable(telemetryState()).getValue();
-        const isDebugMode = snapshot.getLoadable(isDebugModeState).getValue();
+        const isDebugMode = snapshot.getLoadable(isDebugModeState()).getValue();
 
         const initialSnapshot = emptySnapshot.map(({ set }) => {
-          set(iconsState, iconsValue);
+          set(iconsState(), iconsValue);
-          set(authProvidersState, authProvidersValue);
+          set(authProvidersState(), authProvidersValue);
-          set(billingState, billing);
+          set(billingState(), billing);
-          set(isSignInPrefilledState, isSignInPrefilled);
+          set(isSignInPrefilledState(), isSignInPrefilled);
-          set(supportChatState, supportChat);
+          set(supportChatState(), supportChat);
-          set(telemetryState, telemetry);
+          set(telemetryState(), telemetry);
-          set(isDebugModeState, isDebugMode);
+          set(isDebugModeState(), isDebugMode);
           return undefined;
         });
 

packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts

@@ -5,8 +5,8 @@ import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
 import { tokenPairState } from '../states/tokenPairState';
 
 export const useIsLogged = (): boolean => {
-  const [tokenPair] = useRecoilState(tokenPairState);
+  const [tokenPair] = useRecoilState(tokenPairState());
-  const isVerifyPending = useRecoilValue(isVerifyPendingState);
+  const isVerifyPending = useRecoilValue(isVerifyPendingState());
 
   return !!tokenPair && !isVerifyPending;
 };

packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts

@@ -11,9 +11,9 @@ import {
 } from '../utils/getOnboardingStatus';
 
 export const useOnboardingStatus = (): OnboardingStatus | undefined => {
-  const billing = useRecoilValue(billingState);
+  const billing = useRecoilValue(billingState());
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState());
   const isLoggedIn = useIsLogged();
 
   return getOnboardingStatus({

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -46,7 +46,7 @@ const StyledInputContainer = styled.div`
 `;
 
 export const SignInUpForm = () => {
-  const [authProviders] = useRecoilState(authProvidersState);
+  const [authProviders] = useRecoilState(authProvidersState());
   const [showErrors, setShowErrors] = useState(false);
   const { handleResetPassword } = useHandleResetPassword();
   const workspace = useWorkspaceFromInviteHash();

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts

@@ -9,7 +9,7 @@ import { WorkspaceMember } from '~/generated/graphql.tsx';
 
 export const useNavigateAfterSignInUp = () => {
   const navigate = useNavigate();
-  const billing = useRecoilValue(billingState);
+  const billing = useRecoilValue(billingState());
   const navigateAfterSignInUp = useCallback(
     (
       currentWorkspace: CurrentWorkspace,

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts

@@ -19,7 +19,7 @@ const validationSchema = z
 
 export type Form = z.infer<typeof validationSchema>;
 export const useSignInUpForm = () => {
-  const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
+  const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
   const form = useForm<Form>({
     mode: 'onChange',
     defaultValues: {

packages/twenty-front/src/modules/auth/states/currentUserState.ts

@@ -1,5 +1,4 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { User } from '~/generated/graphql';
 
 export type CurrentUser = Pick<
@@ -7,7 +6,7 @@ export type CurrentUser = Pick<
   'id' | 'email' | 'supportUserHash' | 'canImpersonate'
 >;
 
-export const currentUserState = atom<CurrentUser | null>({
+export const currentUserState = createState<CurrentUser | null>({
   key: 'currentUserState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts

@@ -1,11 +1,10 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
-export const currentWorkspaceMemberState = atom<Omit<
+export const currentWorkspaceMemberState = createState<Omit<
   WorkspaceMember,
   'createdAt' | 'updatedAt' | 'userId' | 'userEmail'
 > | null>({
   key: 'currentWorkspaceMemberState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -1,5 +1,4 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { Workspace } from '~/generated/graphql';
 
 export type CurrentWorkspace = Pick<
@@ -14,7 +13,7 @@ export type CurrentWorkspace = Pick<
   | 'activationStatus'
 >;
 
-export const currentWorkspaceState = atom<CurrentWorkspace | null>({
+export const currentWorkspaceState = createState<CurrentWorkspace | null>({
   key: 'currentWorkspaceState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const isVerifyPendingState = atom<boolean>({
+export const isVerifyPendingState = createState<boolean>({
   key: 'isVerifyPendingState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/auth/states/tokenPairState.ts

@@ -1,10 +1,9 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { AuthTokenPair } from '~/generated/graphql';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
 
-export const tokenPairState = atom<AuthTokenPair | null>({
+export const tokenPairState = createState<AuthTokenPair | null>({
   key: 'tokenPairState',
-  default: null,
+  defaultValue: null,
   effects: [cookieStorageEffect('tokenPair')],
 });

packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx

@@ -15,17 +15,17 @@ import { isNonNullable } from '~/utils/isNonNullable';
 export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
-  const setAuthProviders = useSetRecoilState(authProvidersState);
+  const setAuthProviders = useSetRecoilState(authProvidersState());
-  const setIsDebugMode = useSetRecoilState(isDebugModeState);
+  const setIsDebugMode = useSetRecoilState(isDebugModeState());
 
-  const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState);
+  const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState());
-  const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState);
+  const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState());
 
-  const setBilling = useSetRecoilState(billingState);
+  const setBilling = useSetRecoilState(billingState());
-  const setTelemetry = useSetRecoilState(telemetryState);
+  const setTelemetry = useSetRecoilState(telemetryState());
-  const setSupportChat = useSetRecoilState(supportChatState);
+  const setSupportChat = useSetRecoilState(supportChatState());
 
-  const setSentryConfig = useSetRecoilState(sentryConfigState);
+  const setSentryConfig = useSetRecoilState(sentryConfigState());
 
   const { data, loading } = useGetClientConfigQuery();
 

packages/twenty-front/src/modules/client-config/states/authProvidersState.ts

@@ -1,8 +1,7 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { AuthProviders } from '~/generated/graphql';
 
-export const authProvidersState = atom<AuthProviders>({
+export const authProvidersState = createState<AuthProviders>({
   key: 'authProvidersState',
-  default: { google: false, magicLink: false, password: true },
+  defaultValue: { google: false, magicLink: false, password: true },
 });

packages/twenty-front/src/modules/client-config/states/billingState.ts

@@ -1,8 +1,7 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { Billing } from '~/generated/graphql';
 
-export const billingState = atom<Billing | null>({
+export const billingState = createState<Billing | null>({
   key: 'billingState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const isDebugModeState = atom<boolean>({
+export const isDebugModeState = createState<boolean>({
   key: 'isDebugModeState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/client-config/states/isSignInPrefilledState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const isSignInPrefilledState = atom<boolean>({
+export const isSignInPrefilledState = createState<boolean>({
   key: 'isSignInPrefilledState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/client-config/states/isSignUpDisabledState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const isSignUpDisabledState = atom<boolean>({
+export const isSignUpDisabledState = createState<boolean>({
   key: 'isSignUpDisabledState',
-  default: false,
+  defaultValue: false,
 });

packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts

@@ -1,8 +1,7 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { Sentry } from '~/generated/graphql';
 
-export const sentryConfigState = atom<Sentry | null>({
+export const sentryConfigState = createState<Sentry | null>({
   key: 'sentryConfigState',
-  default: null,
+  defaultValue: null,
 });

packages/twenty-front/src/modules/client-config/states/supportChatState.ts

@@ -1,10 +1,9 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { Support } from '~/generated/graphql';
 
-export const supportChatState = atom<Support>({
+export const supportChatState = createState<Support>({
   key: 'supportChatState',
-  default: {
+  defaultValue: {
     supportDriver: 'none',
     supportFrontChatId: null,
   },

packages/twenty-front/src/modules/client-config/states/telemetryState.ts

@@ -1,8 +1,7 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
-
 import { Telemetry } from '~/generated/graphql';
 
-export const telemetryState = atom<Telemetry>({
+export const telemetryState = createState<Telemetry>({
   key: 'telemetryState',
-  default: { enabled: true, anonymizationEnabled: true },
+  defaultValue: { enabled: true, anonymizationEnabled: true },
 });

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -109,9 +109,9 @@ export const CommandMenu = () => {
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [commandMenuSearch, setCommandMenuSearch] = useRecoilState(
-    commandMenuSearchState,
+    commandMenuSearchState(),
   );
-  const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
+  const commandMenuCommands = useRecoilValue(commandMenuCommandsState());
   const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -27,9 +27,9 @@ const meta: Meta<typeof CommandMenu> = {
   component: CommandMenu,
   decorators: [
     (Story) => {
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
       const setCurrentWorkspaceMember = useSetRecoilState(
-        currentWorkspaceMemberState,
+        currentWorkspaceMemberState(),
       );
       const { addToCommandMenu, setToInitialCommandMenu, openCommandMenu } =
         useCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx

@@ -25,7 +25,7 @@ const renderHooks = () => {
       const commandMenu = useCommandMenu();
       const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
       const [commandMenuCommands, setCommandMenuCommands] = useRecoilState(
-        commandMenuCommandsState,
+        commandMenuCommandsState(),
       );
 
       return {

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -17,7 +17,7 @@ import { Command } from '../types/Command';
 export const useCommandMenu = () => {
   const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
+  const setCommands = useSetRecoilState(commandMenuCommandsState());
   const { resetSelectedItem } = useSelectableList('command-menu-list');
   const {
     setHotkeyScopeAndMemorizePreviousScope,
@@ -52,7 +52,7 @@ export const useCommandMenu = () => {
           .getLoadable(isCommandMenuOpenedState)
           .getValue();
 
-        set(commandMenuSearchState, '');
+        set(commandMenuSearchState(), '');
 
         if (isCommandMenuOpened) {
           closeCommandMenu();

packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts

@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 import { Command, CommandType } from '../types/Command';
 
-export const commandMenuCommandsState = atom<Command[]>({
+export const commandMenuCommandsState = createState<Command[]>({
   key: 'command-menu/commandMenuCommandsState',
-  default: [
+  defaultValue: [
     {
       id: '',
       to: '',

packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const commandMenuSearchState = atom<string>({
+export const commandMenuSearchState = createState<string>({
   key: 'command-menu/commandMenuSearchState',
-  default: '',
+  defaultValue: '',
 });

packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx

@@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 
 export const ApolloDevLogEffect = () => {
-  const isDebugMode = useRecoilValue(isDebugModeState);
+  const isDebugMode = useRecoilValue(isDebugModeState());
 
   useEffect(() => {
     if (isDebugMode) {

packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx

@@ -15,7 +15,7 @@ const formatTitle = (stateName: string) => {
 };
 
 export const RecoilDebugObserverEffect = () => {
-  const isDebugMode = useRecoilValue(isDebugModeState);
+  const isDebugMode = useRecoilValue(isDebugModeState());
 
   useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
     if (!isDebugMode) {

packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx

@@ -11,11 +11,11 @@ import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { isNonNullable } from '~/utils/isNonNullable';
 
 export const SentryInitEffect = () => {
-  const sentryConfig = useRecoilValue(sentryConfigState);
+  const sentryConfig = useRecoilValue(sentryConfigState());
 
-  const currentUser = useRecoilValue(currentUserState);
+  const currentUser = useRecoilValue(currentUserState());
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState());
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
 
   const [isSentryInitialized, setIsSentryInitialized] = useState(false);
 

packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx

@@ -50,11 +50,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState,
+          currentWorkspaceMemberState(),
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();
@@ -71,11 +71,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState,
+          currentWorkspaceMemberState(),
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();
@@ -99,11 +99,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState,
+          currentWorkspaceMemberState(),
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();
@@ -124,11 +124,11 @@ describe('useFavorites', () => {
     const { result } = renderHook(
       () => {
         const setCurrentWorkspaceMember = useSetRecoilState(
-          currentWorkspaceMemberState,
+          currentWorkspaceMemberState(),
         );
         setCurrentWorkspaceMember(mockWorkspaceMember);
 
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useFavorites();

packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts

@@ -14,7 +14,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isNonNullable } from '~/utils/isNonNullable';
 
 export const useFavorites = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
 
   const favoriteObjectNameSingular = 'favorite';
 

packages/twenty-front/src/modules/favorites/states/favoritesState.ts

@@ -1,8 +1,7 @@
-import { atom } from 'recoil';
-
 import { Favorite } from '@/favorites/types/Favorite';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const favoritesState = atom<Favorite[]>({
+export const favoritesState = createState<Favorite[]>({
   key: 'favoritesState',
-  default: [],
+  defaultValue: [],
 });

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -28,12 +28,12 @@ export const AppNavigationDrawer = ({
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
   const currentMobileNavigationDrawer = useRecoilValue(
-    currentMobileNavigationDrawerState,
+    currentMobileNavigationDrawerState(),
   );
   const setIsNavigationDrawerOpen = useSetRecoilState(
     isNavigationDrawerOpenState,
   );
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState());
 
   const isSettingsDrawer = isMobile
     ? currentMobileNavigationDrawer === 'settings'

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -24,11 +24,13 @@ export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
   const { toggleCommandMenu } = useCommandMenu();
   const isTasksPage = useIsTasksPage();
-  const currentUserDueTaskCount = useRecoilValue(currentUserDueTaskCountState);
+  const currentUserDueTaskCount = useRecoilValue(
+    currentUserDueTaskCountState(),
+  );
   const navigate = useNavigate();
   const location = useLocation();
   const setNavigationMemorizedUrl = useSetRecoilState(
-    navigationMemorizedUrlState,
+    navigationMemorizedUrlState(),
   );
 
   return (

packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -30,7 +30,7 @@ export const MobileNavigationBar = () => {
     isNavigationDrawerOpenState,
   );
   const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
-    useRecoilState(currentMobileNavigationDrawerState);
+    useRecoilState(currentMobileNavigationDrawerState());
 
   const activeItemName = isNavigationDrawerOpen
     ? currentMobileNavigationDrawer

packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx

@@ -24,7 +24,7 @@ const MobileNavigationDrawerStateSetterEffect = ({
     isNavigationDrawerOpenState,
   );
   const setCurrentMobileNavigationDrawer = useSetRecoilState(
-    currentMobileNavigationDrawerState,
+    currentMobileNavigationDrawerState(),
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts

@@ -1,6 +1,8 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const currentMobileNavigationDrawerState = atom<'main' | 'settings'>({
+export const currentMobileNavigationDrawerState = createState<
+  'main' | 'settings'
+>({
   key: 'currentMobileNavigationDrawerState',
-  default: 'main',
+  defaultValue: 'main',
 });

packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx

@@ -13,7 +13,7 @@ export const ApolloMetadataClientProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const [tokenPair] = useRecoilState(tokenPairState);
+  const [tokenPair] = useRecoilState(tokenPairState());
   const apolloMetadataClient = useMemo(() => {
     if (isNonEmptyString(tokenPair?.accessToken.token)) {
       return new ApolloClient({

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx

@@ -10,7 +10,7 @@ export const ObjectMetadataItemsLoadEffect = () => {
     useFindManyObjectMetadataItems();
 
   const [objectMetadataItems, setObjectMetadataItems] = useRecoilState(
-    objectMetadataItemsState,
+    objectMetadataItemsState(),
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -9,8 +9,8 @@ import { RelationPickerScope } from '@/object-record/relation-picker/scopes/Rela
 export const ObjectMetadataItemsProvider = ({
   children,
 }: React.PropsWithChildren) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
   const shouldDisplayChildren = () => {
     if (objectMetadataItems.length > 0) {
       return true;

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilterOutUnexistingObjectMetadataItems.test.tsx

@@ -12,7 +12,7 @@ describe('useFilterOutUnexistingObjectMetadataItems', () => {
   it('should work as expected', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
 
         setMetadataItems(mockObjectMetadataItems.slice(1));
         return useFilterOutUnexistingObjectMetadataItems();

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetObjectRecordIdentifierByNameSingular.test.tsx

@@ -17,7 +17,7 @@ describe('useGetObjectRecordIdentifierByNameSingular', () => {
         record: any;
         objectNameSingular: string;
       }) => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
 
         setMetadataItems(mockObjectMetadataItems);
 

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx

@@ -31,7 +31,7 @@ describe('useGetRelationMetadata', () => {
 
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
 
         useEffect(() => {
           setMetadataItems(objectMetadataItems);

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useMapFieldMetadataToGraphQLQuery.test.tsx

@@ -127,7 +127,7 @@ describe('useMapFieldMetadataToGraphQLQuery', () => {
   it('should work as expected', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return {

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemForSettings.test.tsx

@@ -44,7 +44,7 @@ describe('useObjectMetadataItemForSettings', () => {
   it('should findActiveObjectMetadataItemBySlug', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useObjectMetadataItemForSettings();
@@ -64,7 +64,7 @@ describe('useObjectMetadataItemForSettings', () => {
   it('should findObjectMetadataItemById', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useObjectMetadataItemForSettings();
@@ -86,7 +86,7 @@ describe('useObjectMetadataItemForSettings', () => {
   it('should findObjectMetadataItemByNamePlural', async () => {
     const { result } = renderHook(
       () => {
-        const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
+        const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
         setMetadataItems(mockObjectMetadataItems);
 
         return useObjectMetadataItemForSettings();

packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular.ts

@@ -5,7 +5,7 @@ import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectReco
 import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
 
 export const useGetObjectRecordIdentifierByNameSingular = () => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
 
   return (record: any, objectNameSingular: string): ObjectRecordIdentifier => {
     const objectMetadataItem = objectMetadataItems.find(

packages/twenty-front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts

@@ -6,7 +6,7 @@ import { FieldType } from '@/object-record/record-field/types/FieldType';
 import { FieldMetadataItem } from '../types/FieldMetadataItem';
 
 export const useMapFieldMetadataToGraphQLQuery = () => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
 
   const mapFieldMetadataToGraphQLQuery = ({
     field,