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/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts

@@ -0,0 +1,9 @@
+import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const clickOutsideListenerCallbacksComponentState = createComponentState<
+  ClickOutsideListenerCallback[]
+>({
+  key: 'clickOutsideListenerCallbacksComponentState',
+  defaultValue: [],
+});

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap.ts

@@ -1,9 +0,0 @@
-import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const clickOutsideListenerCallbacksStateScopeMap = createStateScopeMap<
-  ClickOutsideListenerCallback[]
->({
-  key: 'clickOutsideListenerCallbacksStateScopeMap',
-  defaultValue: [],
-});

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts

@@ -0,0 +1,7 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const clickOutsideListenerIsActivatedComponentState =
+  createComponentState<boolean>({
+    key: 'clickOutsideListenerIsActivatedComponentState',
+    defaultValue: true,
+  });

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap.ts

@@ -1,7 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const clickOutsideListenerIsActivatedStateScopeMap =
-  createStateScopeMap<boolean>({
-    key: 'clickOutsideListenerIsActivatedStateScopeMap',
-    defaultValue: true,
-  });

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts

@@ -0,0 +1,7 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const clickOutsideListenerIsMouseDownInsideComponentState =
+  createComponentState<boolean>({
+    key: 'clickOutsideListenerIsMouseDownInsideComponentState',
+    defaultValue: false,
+  });

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap.ts

@@ -1,7 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const clickOutsideListenerIsMouseDownInsideStateScopeMap =
-  createStateScopeMap<boolean>({
-    key: 'clickOutsideListenerIsMouseDownInsideStateScopeMap',
-    defaultValue: false,
-  });

packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts

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