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/object-record/relation-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx

@@ -58,7 +58,7 @@ describe('useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'
                 },
               },
             ),
-          setObjectMetadata: useSetRecoilState(objectMetadataItemsState),
+          setObjectMetadata: useSetRecoilState(objectMetadataItemsState()),
         };
       },
       {

packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectSearch.test.tsx

@@ -102,7 +102,7 @@ describe('useMultiObjectSearch', () => {
             },
           ],
         }),
-        setObjectMetadata: useSetRecoilState(objectMetadataItemsState),
+        setObjectMetadata: useSetRecoilState(objectMetadataItemsState()),
       }),
       {
         wrapper: Wrapper,

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts

@@ -25,7 +25,7 @@ export const useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery = ({
   searchFilterValue: string;
   limit?: number;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
 
   const { searchFilterPerMetadataItemNameSingular } =
     useSearchFilterPerMetadataItem({

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts

@@ -28,7 +28,7 @@ export const useMultiObjectSearchMatchesSearchFilterAndToSelectQuery = ({
   searchFilterValue: string;
   limit?: number;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
 
   const nonSystemObjectMetadataItems = objectMetadataItems.filter(
     ({ nameSingular, isSystem }) =>

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts

@@ -26,7 +26,7 @@ export const useMultiObjectSearchSelectedItemsQuery = ({
 }: {
   selectedObjectRecordIds: SelectedObjectRecordId[];
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
 
   const objectMetadataItemsUsedInSelectedIdsQuery = objectMetadataItems.filter(
     ({ nameSingular }) => {

packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 
-type RelationPickerScopeInternalContextProps = StateScopeMapKey;
+type RelationPickerScopeInternalContextProps = ComponentStateKey;
 
 export const RelationPickerScopeInternalContext =
   createScopeInternalContext<RelationPickerScopeInternalContextProps>();

packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts

@@ -1,6 +1,6 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 
-export const relationPickerPreselectedIdScopedState = createStateScopeMap<
+export const relationPickerPreselectedIdScopedState = createComponentState<
   string | undefined
 >({
   key: 'relationPickerPreselectedIdScopedState',

packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts

@@ -1,7 +1,7 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 
 export const relationPickerSearchFilterScopedState =
-  createStateScopeMap<string>({
+  createComponentState<string>({
     key: 'relationPickerSearchFilterScopedState',
     defaultValue: '',
   });

packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts

@@ -1,7 +1,7 @@
 import { SearchQuery } from '@/object-record/relation-picker/types/SearchQuery';
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
 
-export const searchQueryScopedState = createStateScopeMap<SearchQuery | null>({
+export const searchQueryScopedState = createComponentState<SearchQuery | null>({
   key: 'searchQueryScopedState',
   defaultValue: null,
 });