Refactored again

packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2.ts

@@ -1,18 +1,84 @@
+/* eslint-disable no-redeclare */
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
+import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
+import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
+import { ComponentReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2';
+import { ComponentSelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentSelectorV2';
 import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { RecoilState, RecoilValueReadOnly, SerializableParam } from 'recoil';
 
-export const useRecoilComponentCallbackStateV2 = <Value>(
-  componentState: ComponentStateV2<Value>,
+export function useRecoilComponentCallbackStateV2<ValueType>(
+  componentState: ComponentStateV2<ValueType>,
   instanceIdFromProps?: string,
-) => {
-  const componentInstanceContext = globalComponentInstanceContextMap.get(
-    componentState.key,
-  );
+): RecoilState<ValueType>;
+export function useRecoilComponentCallbackStateV2<ValueType>(
+  componentSelector: ComponentSelectorV2<ValueType>,
+  instanceIdFromProps?: string,
+): RecoilState<ValueType>;
+export function useRecoilComponentCallbackStateV2<ValueType>(
+  componentReadOnlySelector: ComponentReadOnlySelectorV2<ValueType>,
+  instanceIdFromProps?: string,
+): RecoilValueReadOnly<ValueType>;
+export function useRecoilComponentCallbackStateV2<
+  ValueType,
+  FamilyKey extends SerializableParam,
+>(
+  componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+  instanceIdFromProps?: string,
+): (familyKey: FamilyKey) => RecoilState<ValueType>;
+export function useRecoilComponentCallbackStateV2<
+  ValueType,
+  FamilyKey extends SerializableParam,
+>(
+  componentFamilySelector: ComponentFamilySelectorV2<ValueType, FamilyKey>,
+  instanceIdFromProps?: string,
+): (familyKey: FamilyKey) => RecoilState<ValueType>;
+export function useRecoilComponentCallbackStateV2<
+  ValueType,
+  FamilyKey extends SerializableParam,
+>(
+  componentFamilyReadOnlySelector: ComponentFamilyReadOnlySelectorV2<
+    ValueType,
+    FamilyKey
+  >,
+  instanceIdFromProps?: string,
+): (familyKey: FamilyKey) => RecoilValueReadOnly<ValueType>;
+export function useRecoilComponentCallbackStateV2<
+  ValueType,
+  FamilyKey extends SerializableParam,
+>(
+  componentFamilyState: ComponentFamilyStateV2<ValueType, FamilyKey>,
+  instanceIdFromProps?: string,
+): (familyKey: FamilyKey) => RecoilState<ValueType>;
+export function useRecoilComponentCallbackStateV2<
+  ComponentState extends
+    | ComponentStateV2<ValueType>
+    | ComponentSelectorV2<ValueType>
+    | ComponentReadOnlySelectorV2<ValueType>
+    | ComponentFamilyStateV2<ValueType, FamilyKey>
+    | ComponentFamilySelectorV2<ValueType, FamilyKey>
+    | ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>,
+  ValueType,
+  FamilyKey extends SerializableParam = never,
+>(
+  componentState: ComponentState,
+  instanceIdFromProps?: string,
+):
+  | RecoilState<ValueType>
+  | RecoilValueReadOnly<ValueType>
+  | ((familyKey: FamilyKey) => RecoilState<ValueType>)
+  | ((familyKey: FamilyKey) => RecoilValueReadOnly<ValueType>) {
+  const componentStateKey = componentState.key;
+
+  const componentInstanceContext =
+    globalComponentInstanceContextMap.get(componentStateKey);
 
   if (!componentInstanceContext) {
     throw new Error(
-      `Instance context for key "${componentState.key}" is not defined`,
+      `Instance context for key "${componentStateKey}" is not defined, check the component state declaration.`,
     );
   }
 
@@ -21,7 +87,42 @@ export const useRecoilComponentCallbackStateV2 = <Value>(
     instanceIdFromProps,
   );
 
-  return componentState.atomFamily({
-    instanceId,
-  });
-};
+  switch (componentState.type) {
+    case 'ComponentState': {
+      return componentState.atomFamily({
+        instanceId,
+      });
+    }
+    case 'ComponentSelector': {
+      return componentState.selectorFamily({
+        instanceId,
+      });
+    }
+    case 'ComponentReadOnlySelector': {
+      return componentState.selectorFamily({
+        instanceId,
+      });
+    }
+    case 'ComponentFamilyState': {
+      return (familyKey: FamilyKey) =>
+        componentState.atomFamily({
+          instanceId,
+          familyKey,
+        });
+    }
+    case 'ComponentFamilySelector': {
+      return (familyKey: FamilyKey) =>
+        componentState.selectorFamily({
+          instanceId,
+          familyKey,
+        });
+    }
+    case 'ComponentFamilyReadOnlySelector': {
+      return (familyKey: FamilyKey) =>
+        componentState.selectorFamily({
+          instanceId,
+          familyKey,
+        });
+    }
+  }
+}

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2.ts

@@ -0,0 +1,14 @@
+import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
+import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
+import { RecoilValueReadOnly, SerializableParam } from 'recoil';
+
+export type ComponentFamilyReadOnlySelectorV2<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = {
+  type: Extract<ComponentStateTypeV2, 'ComponentFamilyReadOnlySelector'>;
+  key: string;
+  selectorFamily: (
+    componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
+  ) => RecoilValueReadOnly<StateType>;
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilySelectorV2.ts

@@ -0,0 +1,14 @@
+import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
+import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
+import { RecoilState, SerializableParam } from 'recoil';
+
+export type ComponentFamilySelectorV2<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = {
+  type: Extract<ComponentStateTypeV2, 'ComponentFamilySelector'>;
+  key: string;
+  selectorFamily: (
+    componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,
+  ) => RecoilState<StateType>;
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyStateV2.ts

@@ -1,10 +1,12 @@
 import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
+import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
 import { RecoilState, SerializableParam } from 'recoil';
 
 export type ComponentFamilyStateV2<
   StateType,
   FamilyKey extends SerializableParam,
 > = {
+  type: Extract<ComponentStateTypeV2, 'ComponentFamilyState'>;
   key: string;
   atomFamily: (
     componentFamilyStateKey: ComponentFamilyStateKeyV2<FamilyKey>,

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentReadOnlySelectorV2.ts

@@ -1,7 +1,9 @@
 import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
+import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
 import { RecoilValueReadOnly } from 'recoil';
 
 export type ComponentReadOnlySelectorV2<StateType> = {
+  type: Extract<ComponentStateTypeV2, 'ComponentReadOnlySelector'>;
   key: string;
   selectorFamily: (
     componentStateKey: ComponentStateKeyV2,

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentSelectorV2.ts

@@ -1,7 +1,9 @@
 import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
+import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
 import { RecoilState } from 'recoil';
 
 export type ComponentSelectorV2<StateType> = {
+  type: Extract<ComponentStateTypeV2, 'ComponentSelector'>;
   key: string;
   selectorFamily: (
     componentStateKey: ComponentStateKeyV2,

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateTypeV2.ts

@@ -0,0 +1,7 @@
+export type ComponentStateTypeV2 =
+  | 'ComponentState'
+  | 'ComponentFamilyState'
+  | 'ComponentSelector'
+  | 'ComponentReadOnlySelector'
+  | 'ComponentFamilySelector'
+  | 'ComponentFamilyReadOnlySelector';

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateV2.ts

@@ -1,7 +1,9 @@
 import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
+import { ComponentStateTypeV2 } from '@/ui/utilities/state/component-state/types/ComponentStateTypeV2';
 import { RecoilState } from 'recoil';
 
 export type ComponentStateV2<StateType> = {
+  type: Extract<ComponentStateTypeV2, 'ComponentState'>;
   key: string;
   atomFamily: (
     componentStateKey: ComponentStateKeyV2,

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2.ts

@@ -0,0 +1,56 @@
+import { selectorFamily, SerializableParam } from 'recoil';
+
+import { ComponentFamilyReadOnlySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyReadOnlySelectorV2';
+import { ComponentFamilySelectorV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilySelectorV2';
+import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
+import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
+import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
+import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter';
+import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter';
+import { isDefined } from 'twenty-ui';
+
+export const createComponentFamilySelectorV2 = <
+  ValueType,
+  FamilyKey extends SerializableParam,
+>({
+  key,
+  get,
+  set,
+  componentInstanceContext,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
+  set?: SelectorSetter<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>;
+  componentInstanceContext: ComponentInstanceStateContext<any> | null;
+}) => {
+  if (isDefined(componentInstanceContext)) {
+    globalComponentInstanceContextMap.set(key, componentInstanceContext);
+  }
+
+  if (isDefined(set)) {
+    return {
+      type: 'ComponentFamilySelector',
+      key,
+      selectorFamily: selectorFamily<
+        ValueType,
+        ComponentFamilyStateKeyV2<FamilyKey>
+      >({
+        key,
+        get,
+        set,
+      }),
+    } satisfies ComponentFamilySelectorV2<ValueType, FamilyKey>;
+  } else {
+    return {
+      type: 'ComponentFamilyReadOnlySelector',
+      key,
+      selectorFamily: selectorFamily<
+        ValueType,
+        ComponentFamilyStateKeyV2<FamilyKey>
+      >({
+        key,
+        get,
+      }),
+    } satisfies ComponentFamilyReadOnlySelectorV2<ValueType, FamilyKey>;
+  }
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts

@@ -1,4 +1,5 @@
 import { ComponentFamilyStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKeyV2';
+import { ComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateV2';
 import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext';
 import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap';
 import { AtomEffect, atomFamily, SerializableParam } from 'recoil';
@@ -26,11 +27,12 @@ export const createComponentFamilyStateV2 = <
   }
 
   return {
+    type: 'ComponentFamilyState',
     key,
     atomFamily: atomFamily<ValueType, ComponentFamilyStateKeyV2<FamilyKey>>({
       key,
       default: defaultValue,
       effects,
     }),
-  };
+  } satisfies ComponentFamilyStateV2<ValueType, FamilyKey>;
 };

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts

@@ -26,20 +26,22 @@ export const createComponentSelectorV2 = <ValueType>({
 
   if (isDefined(set)) {
     return {
+      type: 'ComponentSelector',
       key,
       selectorFamily: selectorFamily<ValueType, ComponentStateKeyV2>({
         key,
         get,
         set,
       }),
-    } as ComponentSelectorV2<ValueType>;
+    } satisfies ComponentSelectorV2<ValueType>;
   } else {
     return {
+      type: 'ComponentReadOnlySelector',
       key,
       selectorFamily: selectorFamily<ValueType, ComponentStateKeyV2>({
         key,
         get,
       }),
-    } as ComponentReadOnlySelectorV2<ValueType>;
+    } satisfies ComponentReadOnlySelectorV2<ValueType>;
   }
 };

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts

@@ -24,11 +24,12 @@ export const createComponentStateV2 = <ValueType>({
   }
 
   return {
+    type: 'ComponentState',
     key,
     atomFamily: atomFamily<ValueType, ComponentStateKeyV2>({
       key,
       default: defaultValue,
       effects: effects,
     }),
-  };
+  } satisfies ComponentStateV2<ValueType>;
 };