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/layout/dropdown/states/dropdownHotkeyComponentState.ts

@@ -0,0 +1,9 @@
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const dropdownHotkeyComponentState = createComponentState<
+  HotkeyScope | null | undefined
+>({
+  key: 'dropdownHotkeyComponentState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts

@@ -1,9 +0,0 @@
-import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const dropdownHotkeyStateScopeMap = createStateScopeMap<
-  HotkeyScope | null | undefined
->({
-  key: 'dropdownHotkeyStateScopeMap',
-  defaultValue: null,
-});

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts

@@ -0,0 +1,8 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const dropdownWidthComponentState = createComponentState<
+  number | undefined
+>({
+  key: 'dropdownWidthComponentState',
+  defaultValue: 160,
+});

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts

@@ -1,8 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const dropdownWidthStateScopeMap = createStateScopeMap<
-  number | undefined
->({
-  key: 'dropdownWidthStateScopeMap',
-  defaultValue: 160,
-});

packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts

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

packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts

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