Introduce ComponentState (#4386)

* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage

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>({
-  key: 'temporaryActivityForEditorState',
-  default: null,
-});
+export const temporaryActivityForEditorState =
+  createState<ActivityForEditor | 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,
 });