Feat/generic editable board card (#1089)

* Fixed BoardColumnMenu

* Fixed naming

* Optimized board loading

* Added GenericEditableField

* Introduce GenericEditableField for BoardCards

* remove logs

* delete unused files

* fix stories

---------

Co-authored-by: corentin <corentin@twenty.com>

front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx

@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDateMetadata,
+  ViewFieldDefinition,
+} from '@/ui/editable-field/types/ViewField';
+import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { parseDate } from '~/utils/date-utils';
+
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+import { EditableField } from './EditableField';
+import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+};
+
+export function GenericEditableDateField({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const internalDateValue = fieldValue
+    ? parseDate(fieldValue).toJSDate()
+    : null;
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={viewField.columnIcon}
+        editModeContent={
+          <GenericEditableDateFieldEditMode viewField={viewField} />
+        }
+        displayModeContent={<DateInputDisplay value={internalDateValue} />}
+        isDisplayModeContentEmpty={!fieldValue}
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx

@@ -0,0 +1,44 @@
+import { useContext } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDateMetadata,
+  ViewFieldDefinition,
+} from '@/ui/editable-field/types/ViewField';
+
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+};
+
+export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateGenericEntityField();
+
+  function handleSubmit(newDateISO: string) {
+    if (newDateISO === fieldValue || !newDateISO) return;
+
+    setFieldValue(newDateISO);
+
+    if (currentEntityId && updateField && newDateISO) {
+      updateField(currentEntityId, viewField, newDateISO);
+    }
+  }
+
+  return (
+    <EditableFieldEditModeDate value={fieldValue} onChange={handleSubmit} />
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -0,0 +1,35 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+
+import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
+import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
+import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+
+import { GenericEditableDateField } from './GenericEditableDateField';
+import { GenericEditableNumberField } from './GenericEditableNumberField';
+import { GenericEditableRelationField } from './GenericEditableRelationField';
+import { ProbabilityEditableField } from './ProbabilityEditableField';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldMetadata>;
+};
+
+export function GenericEditableField({ viewField: fieldDefinition }: OwnProps) {
+  if (isViewFieldDate(fieldDefinition)) {
+    return <GenericEditableDateField viewField={fieldDefinition} />;
+  } else if (isViewFieldNumber(fieldDefinition)) {
+    return <GenericEditableNumberField viewField={fieldDefinition} />;
+  } else if (isViewFieldRelation(fieldDefinition)) {
+    return <GenericEditableRelationField viewField={fieldDefinition} />;
+  } else if (isViewFieldProbability(fieldDefinition)) {
+    return <ProbabilityEditableField viewField={fieldDefinition} />;
+  } else {
+    console.warn(
+      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableField`,
+    );
+    return <></>;
+  }
+}

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldNumberMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+import { EditableField } from './EditableField';
+import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+};
+
+export function GenericEditableNumberField({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={viewField.columnIcon}
+        editModeContent={
+          <GenericEditableNumberFieldEditMode viewField={viewField} />
+        }
+        displayModeContent={fieldValue}
+        isDisplayModeContentEmpty={!fieldValue}
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx

@@ -0,0 +1,78 @@
+import { useContext, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldNumberMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+import {
+  canBeCastAsIntegerOrNull,
+  castAsIntegerOrNull,
+} from '~/utils/cast-as-integer-or-null';
+
+import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+};
+
+export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<number | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+  const [internalValue, setInternalValue] = useState(
+    fieldValue ? fieldValue.toString() : '',
+  );
+
+  const updateField = useUpdateGenericEntityField();
+
+  function handleSubmit() {
+    if (!canBeCastAsIntegerOrNull(internalValue)) {
+      return;
+    }
+    if (internalValue === fieldValue) return;
+
+    setFieldValue(castAsIntegerOrNull(internalValue));
+
+    if (currentEntityId && updateField) {
+      updateField(
+        currentEntityId,
+        viewField,
+        castAsIntegerOrNull(internalValue),
+      );
+    }
+  }
+
+  function onCancel() {
+    setFieldValue(fieldValue);
+  }
+
+  function handleChange(newValue: string) {
+    setInternalValue(newValue);
+  }
+  const wrapperRef = useRef(null);
+
+  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
+
+  return (
+    <div ref={wrapperRef}>
+      <TextInputEdit
+        autoFocus
+        value={internalValue ? internalValue.toString() : ''}
+        onChange={(newValue: string) => {
+          handleChange(newValue);
+        }}
+      />
+    </div>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -0,0 +1,80 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { PersonChip } from '@/people/components/PersonChip';
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+import { EditableField } from './EditableField';
+import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
+};
+
+function RelationChip({
+  fieldDefinition,
+  fieldValue,
+}: {
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldValue: any | null;
+}) {
+  switch (fieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PersonChip
+          id={fieldValue?.id ?? ''}
+          name={fieldValue?.displayName ?? ''}
+          pictureUrl={fieldValue?.avatarUrl ?? ''}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}
+
+export function GenericEditableRelationField({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  const fieldValue = useRecoilValue<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <RecoilScope>
+        <EditableField
+          useEditButton
+          customEditHotkeyScope={{
+            scope: RelationPickerHotkeyScope.RelationPicker,
+          }}
+          iconLabel={viewField.columnIcon}
+          editModeContent={
+            <GenericEditableRelationFieldEditMode viewField={viewField} />
+          }
+          displayModeContent={
+            <RelationChip fieldDefinition={viewField} fieldValue={fieldValue} />
+          }
+          isDisplayModeContentEmpty={!fieldValue}
+          isDisplayModeFixHeight
+        />
+      </RecoilScope>
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -0,0 +1,102 @@
+import { useContext } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { PeoplePicker } from '@/people/components/PeoplePicker';
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+  ViewFieldRelationValue,
+} from '@/ui/editable-field/types/ViewField';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+import { useEditableField } from '../hooks/useEditableField';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+const RelationPickerContainer = styled.div`
+  left: 0px;
+  position: absolute;
+  top: -8px;
+`;
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
+};
+
+function RelationPicker({
+  fieldDefinition,
+  fieldValue,
+  handleEntitySubmit,
+  handleCancel,
+}: {
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldValue: ViewFieldRelationValue;
+  handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
+  handleCancel: () => void;
+}) {
+  switch (fieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PeoplePicker
+          personId={fieldValue?.id ?? null}
+          onSubmit={handleEntitySubmit}
+          onCancel={handleCancel}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}
+
+export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateGenericEntityField();
+  const { closeEditableField } = useEditableField();
+
+  function handleSubmit(newRelation: EntityForSelect | null) {
+    if (newRelation?.id === fieldValue?.id) return;
+
+    setFieldValue({
+      id: newRelation?.id ?? null,
+      displayName: newRelation?.name ?? null,
+      avatarUrl: newRelation?.avatarUrl ?? null,
+    });
+
+    if (currentEntityId && updateField) {
+      updateField(currentEntityId, viewField, newRelation);
+    }
+
+    closeEditableField();
+  }
+
+  function handleCancel() {
+    closeEditableField();
+  }
+
+  return (
+    <RelationPickerContainer>
+      <RelationPicker
+        fieldDefinition={viewField}
+        fieldValue={fieldValue}
+        handleEntitySubmit={handleSubmit}
+        handleCancel={handleCancel}
+      />
+    </RelationPickerContainer>
+  );
+}

front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx

@@ -0,0 +1,28 @@
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldProbabilityMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
+};
+
+export function ProbabilityEditableField({ viewField }: OwnProps) {
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={viewField.columnIcon}
+        displayModeContent={
+          <ProbabilityEditableFieldEditMode viewField={viewField} />
+        }
+        displayModeContentOnly
+        disableHoverEffect
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx

@@ -0,0 +1,136 @@
+import { useContext, useState } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
+
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import {
+  ViewFieldDefinition,
+  ViewFieldProbabilityMetadata,
+} from '../types/ViewField';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+const StyledProgressBarItemContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(4)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledProgressBarItem = styled.div<{
+  isFirst: boolean;
+  isLast: boolean;
+  isActive: boolean;
+}>`
+  background-color: ${({ theme, isActive }) =>
+    isActive
+      ? theme.font.color.secondary
+      : theme.background.transparent.medium};
+  border-bottom-left-radius: ${({ theme, isFirst }) =>
+    isFirst ? theme.border.radius.sm : theme.border.radius.xs};
+  border-bottom-right-radius: ${({ theme, isLast }) =>
+    isLast ? theme.border.radius.sm : theme.border.radius.xs};
+  border-top-left-radius: ${({ theme, isFirst }) =>
+    isFirst ? theme.border.radius.sm : theme.border.radius.xs};
+  border-top-right-radius: ${({ theme, isLast }) =>
+    isLast ? theme.border.radius.sm : theme.border.radius.xs};
+  height: ${({ theme }) => theme.spacing(2)};
+  width: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledProgressBarContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 100%;
+`;
+
+const StyledLabel = styled.div`
+  width: ${({ theme }) => theme.spacing(12)};
+`;
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
+};
+
+const PROBABILITY_VALUES = [
+  { label: '0%', value: 0 },
+  { label: '25%', value: 25 },
+  { label: '50%', value: 50 },
+  { label: '75%', value: 75 },
+  { label: '100%', value: 100 },
+];
+
+export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
+  const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
+    number | null
+  >(null);
+  const currentEntityId = useContext(BoardCardIdContext);
+  const [fieldValue, setFieldValue] = useRecoilState<number>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const probabilityIndex = Math.ceil(fieldValue / 25);
+  const { closeEditableField } = useEditableField();
+
+  const updateField = useUpdateGenericEntityField();
+
+  function handleChange(newValue: number) {
+    setFieldValue(newValue);
+    if (currentEntityId && updateField && newValue) {
+      updateField(currentEntityId, viewField, newValue);
+    }
+    closeEditableField();
+  }
+
+  console.log(probabilityIndex);
+
+  return (
+    <StyledContainer>
+      <StyledLabel>
+        {
+          PROBABILITY_VALUES[
+            nextProbabilityIndex || nextProbabilityIndex === 0
+              ? nextProbabilityIndex
+              : probabilityIndex
+          ].label
+        }
+      </StyledLabel>
+      <StyledProgressBarContainer>
+        {PROBABILITY_VALUES.map((probability, i) => (
+          <StyledProgressBarItemContainer
+            key={i}
+            onClick={() => handleChange(probability.value)}
+            onMouseEnter={() => setNextProbabilityIndex(i)}
+            onMouseLeave={() => setNextProbabilityIndex(null)}
+          >
+            <StyledProgressBarItem
+              isActive={
+                nextProbabilityIndex || nextProbabilityIndex === 0
+                  ? i <= nextProbabilityIndex
+                  : i <= probabilityIndex
+              }
+              key={probability.label}
+              isFirst={i === 0}
+              isLast={i === PROBABILITY_VALUES.length - 1}
+            />
+          </StyledProgressBarItemContainer>
+        ))}
+      </StyledProgressBarContainer>
+    </StyledContainer>
+  );
+}

front/src/modules/ui/editable-field/hooks/useCurrentEntityId.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { EntityIdContext } from '../states/EntityIdContext';
+
+export function useCurrentEntityId() {
+  return useContext(EntityIdContext);
+}

front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts

@@ -0,0 +1,246 @@
+import { useContext } from 'react';
+
+import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
+import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
+
+import { isViewFieldChipValue } from '../types/guards/isViewFieldChipValue';
+import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { isViewFieldDateValue } from '../types/guards/isViewFieldDateValue';
+import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText';
+import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip';
+import { isViewFieldDoubleTextChipValue } from '../types/guards/isViewFieldDoubleTextChipValue';
+import { isViewFieldDoubleTextValue } from '../types/guards/isViewFieldDoubleTextValue';
+import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
+import { isViewFieldNumberValue } from '../types/guards/isViewFieldNumberValue';
+import { isViewFieldPhone } from '../types/guards/isViewFieldPhone';
+import { isViewFieldPhoneValue } from '../types/guards/isViewFieldPhoneValue';
+import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
+import { isViewFieldProbabilityValue } from '../types/guards/isViewFieldProbabilityValue';
+import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+import { isViewFieldRelationValue } from '../types/guards/isViewFieldRelationValue';
+import { isViewFieldText } from '../types/guards/isViewFieldText';
+import { isViewFieldTextValue } from '../types/guards/isViewFieldTextValue';
+import { isViewFieldURL } from '../types/guards/isViewFieldURL';
+import { isViewFieldURLValue } from '../types/guards/isViewFieldURLValue';
+import {
+  ViewFieldChipMetadata,
+  ViewFieldChipValue,
+  ViewFieldDateMetadata,
+  ViewFieldDateValue,
+  ViewFieldDefinition,
+  ViewFieldDoubleTextChipMetadata,
+  ViewFieldDoubleTextChipValue,
+  ViewFieldDoubleTextMetadata,
+  ViewFieldDoubleTextValue,
+  ViewFieldMetadata,
+  ViewFieldNumberMetadata,
+  ViewFieldNumberValue,
+  ViewFieldPhoneMetadata,
+  ViewFieldPhoneValue,
+  ViewFieldProbabilityMetadata,
+  ViewFieldProbabilityValue,
+  ViewFieldRelationMetadata,
+  ViewFieldRelationValue,
+  ViewFieldTextMetadata,
+  ViewFieldTextValue,
+  ViewFieldURLMetadata,
+  ViewFieldURLValue,
+} from '../types/ViewField';
+
+export function useUpdateGenericEntityField() {
+  const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
+
+  const [updateEntity] = useUpdateEntityMutation();
+
+  return function updatePeopleField<
+    MetadataType extends ViewFieldMetadata,
+    ValueType extends MetadataType extends ViewFieldDoubleTextMetadata
+      ? ViewFieldDoubleTextValue
+      : MetadataType extends ViewFieldTextMetadata
+      ? ViewFieldTextValue
+      : MetadataType extends ViewFieldPhoneMetadata
+      ? ViewFieldPhoneValue
+      : MetadataType extends ViewFieldURLMetadata
+      ? ViewFieldURLValue
+      : MetadataType extends ViewFieldNumberMetadata
+      ? ViewFieldNumberValue
+      : MetadataType extends ViewFieldDateMetadata
+      ? ViewFieldDateValue
+      : MetadataType extends ViewFieldChipMetadata
+      ? ViewFieldChipValue
+      : MetadataType extends ViewFieldDoubleTextChipMetadata
+      ? ViewFieldDoubleTextChipValue
+      : MetadataType extends ViewFieldRelationMetadata
+      ? ViewFieldRelationValue
+      : MetadataType extends ViewFieldProbabilityMetadata
+      ? ViewFieldProbabilityValue
+      : unknown,
+  >(
+    currentEntityId: string,
+    viewField: ViewFieldDefinition<MetadataType>,
+    newFieldValue: ValueType,
+  ) {
+    const newFieldValueUnknown = newFieldValue as unknown;
+    // TODO: improve type guards organization, maybe with a common typeguard for all view fields
+    //    taking an object of options as parameter ?
+    //
+    // The goal would be to check that the view field value not only is valid,
+    //    but also that it is validated against the corresponding view field type
+
+    // Relation
+    if (
+      isViewFieldRelation(viewField) &&
+      isViewFieldRelationValue(newFieldValueUnknown)
+    ) {
+      const newSelectedEntity = newFieldValueUnknown;
+
+      const fieldName = viewField.metadata.fieldName;
+
+      if (!newSelectedEntity) {
+        updateEntity({
+          variables: {
+            where: { id: currentEntityId },
+            data: {
+              [fieldName]: {
+                disconnect: true,
+              },
+            },
+          },
+        });
+      } else {
+        updateEntity({
+          variables: {
+            where: { id: currentEntityId },
+            data: {
+              [fieldName]: {
+                connect: { id: newSelectedEntity.id },
+              },
+            },
+          },
+        });
+      }
+      // Chip
+    } else if (
+      isViewFieldChip(viewField) &&
+      isViewFieldChipValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.contentFieldName]: newContent },
+        },
+      });
+      // Text
+    } else if (
+      isViewFieldText(viewField) &&
+      isViewFieldTextValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Double text
+    } else if (
+      isViewFieldDoubleText(viewField) &&
+      isViewFieldDoubleTextValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: {
+            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+          },
+        },
+      });
+      //  Double Text Chip
+    } else if (
+      isViewFieldDoubleTextChip(viewField) &&
+      isViewFieldDoubleTextChipValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: {
+            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+          },
+        },
+      });
+      // Phone
+    } else if (
+      isViewFieldPhone(viewField) &&
+      isViewFieldPhoneValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // URL
+    } else if (
+      isViewFieldURL(viewField) &&
+      isViewFieldURLValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Number
+    } else if (
+      isViewFieldNumber(viewField) &&
+      isViewFieldNumberValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Date
+    } else if (
+      isViewFieldDate(viewField) &&
+      isViewFieldDateValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+    } else if (
+      isViewFieldProbability(viewField) &&
+      isViewFieldProbabilityValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+    }
+  };
+}

front/src/modules/ui/editable-field/states/EditableFieldContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EditableFieldContext = createContext<string | null>(null);

front/src/modules/ui/editable-field/states/EntityIdContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EntityIdContext = createContext<string | null>(null);

front/src/modules/ui/editable-field/states/genericEntitiesFamilyState.ts

@@ -0,0 +1,9 @@
+import { atomFamily } from 'recoil';
+
+export const genericEntitiesFamilyState = atomFamily<
+  Record<string, unknown> | null,
+  string
+>({
+  key: 'genericEntitiesFamilyState',
+  default: null,
+});

front/src/modules/ui/editable-field/states/genericEntityFieldFamilySelector.ts

@@ -0,0 +1,18 @@
+import { selectorFamily } from 'recoil';
+
+import { genericEntitiesFamilyState } from './genericEntitiesFamilyState';
+
+export const genericEntityFieldFamilySelector = selectorFamily({
+  key: 'genericEntityFieldFamilySelector',
+  get:
+    <T>({ fieldName, entityId }: { fieldName: string; entityId: string }) =>
+    ({ get }) =>
+      get(genericEntitiesFamilyState(entityId))?.[fieldName] as T,
+  set:
+    <T>({ fieldName, entityId }: { fieldName: string; entityId: string }) =>
+    ({ set }, newValue: T) =>
+      set(genericEntitiesFamilyState(entityId), (prevState) => ({
+        ...prevState,
+        [fieldName]: newValue,
+      })),
+});

front/src/modules/ui/editable-field/types/ViewField.ts

@@ -0,0 +1,124 @@
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+export type ViewFieldType =
+  | 'text'
+  | 'relation'
+  | 'chip'
+  | 'double-text-chip'
+  | 'double-text'
+  | 'number'
+  | 'date'
+  | 'phone'
+  | 'url'
+  | 'probability';
+
+export type ViewFieldTextMetadata = {
+  type: 'text';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type ViewFieldPhoneMetadata = {
+  type: 'phone';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type ViewFieldURLMetadata = {
+  type: 'url';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type ViewFieldDateMetadata = {
+  type: 'date';
+  fieldName: string;
+};
+
+export type ViewFieldNumberMetadata = {
+  type: 'number';
+  fieldName: string;
+};
+
+export type ViewFieldRelationMetadata = {
+  type: 'relation';
+  relationType: Entity;
+  fieldName: string;
+};
+
+export type ViewFieldChipMetadata = {
+  type: 'chip';
+  relationType: Entity;
+  contentFieldName: string;
+  urlFieldName: string;
+  placeHolder: string;
+};
+
+export type ViewFieldDoubleTextMetadata = {
+  type: 'double-text';
+  firstValueFieldName: string;
+  firstValuePlaceholder: string;
+  secondValueFieldName: string;
+  secondValuePlaceholder: string;
+};
+
+export type ViewFieldDoubleTextChipMetadata = {
+  type: 'double-text-chip';
+  firstValueFieldName: string;
+  firstValuePlaceholder: string;
+  secondValueFieldName: string;
+  secondValuePlaceholder: string;
+  avatarUrlFieldName: string;
+  entityType: Entity;
+};
+
+export type ViewFieldProbabilityMetadata = {
+  type: 'probability';
+  fieldName: string;
+};
+
+export type ViewFieldMetadata = { type: ViewFieldType } & (
+  | ViewFieldTextMetadata
+  | ViewFieldRelationMetadata
+  | ViewFieldChipMetadata
+  | ViewFieldDoubleTextChipMetadata
+  | ViewFieldDoubleTextMetadata
+  | ViewFieldPhoneMetadata
+  | ViewFieldURLMetadata
+  | ViewFieldNumberMetadata
+  | ViewFieldDateMetadata
+  | ViewFieldProbabilityMetadata
+);
+
+export type ViewFieldDefinition<T extends ViewFieldMetadata | unknown> = {
+  id: string;
+  columnLabel: string;
+  columnSize: number;
+  columnOrder: number;
+  columnIcon?: JSX.Element;
+  filterIcon?: JSX.Element;
+  isVisible?: boolean;
+  metadata: T;
+};
+
+export type ViewFieldTextValue = string;
+
+export type ViewFieldChipValue = string;
+export type ViewFieldDateValue = string;
+export type ViewFieldPhoneValue = string;
+export type ViewFieldURLValue = string;
+export type ViewFieldNumberValue = number | null;
+export type ViewFieldProbabilityValue = number;
+
+export type ViewFieldDoubleTextValue = {
+  firstValue: string;
+  secondValue: string;
+};
+
+export type ViewFieldDoubleTextChipValue = {
+  firstValue: string;
+  secondValue: string;
+};
+
+export type ViewFieldRelationValue = EntityForSelect | null;

front/src/modules/ui/editable-field/types/guards/isViewFieldChip.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldChipMetadata,
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../ViewField';
+
+export function isViewFieldChip(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldChipMetadata> {
+  return field.metadata.type === 'chip';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldChipValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldChipValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldChipValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldChipValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldDate.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDateMetadata,
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../ViewField';
+
+export function isViewFieldDate(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldDateMetadata> {
+  return field.metadata.type === 'date';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldDateValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldDateValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldDateValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldDateValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldDoubleText.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldDoubleTextMetadata,
+  ViewFieldMetadata,
+} from '../ViewField';
+
+export function isViewFieldDoubleText(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldDoubleTextMetadata> {
+  return field.metadata.type === 'double-text';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldDoubleTextChip.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldDoubleTextChipMetadata,
+  ViewFieldMetadata,
+} from '../ViewField';
+
+export function isViewFieldDoubleTextChip(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldDoubleTextChipMetadata> {
+  return field.metadata.type === 'double-text-chip';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldDoubleTextChipValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldDoubleTextChipValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldDoubleTextChipValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldDoubleTextChipValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldDoubleTextValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldDoubleTextValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldDoubleTextValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldDoubleTextValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldNumber.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldNumberMetadata,
+} from '../ViewField';
+
+export function isViewFieldNumber(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldNumberMetadata> {
+  return field.metadata.type === 'number';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldNumberValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldNumberValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldNumberValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldNumberValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldPhone.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldPhoneMetadata,
+} from '../ViewField';
+
+export function isViewFieldPhone(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldPhoneMetadata> {
+  return field.metadata.type === 'phone';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldPhoneValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldPhoneValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldPhoneValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldPhoneValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldProbability.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldProbabilityMetadata,
+} from '../ViewField';
+
+export function isViewFieldProbability(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldProbabilityMetadata> {
+  return field.metadata.type === 'probability';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldProbabilityValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldProbabilityValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldProbabilityValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldProbabilityValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldRelation.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldRelationMetadata,
+} from '../ViewField';
+
+export function isViewFieldRelation(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldRelationMetadata> {
+  return field.metadata.type === 'relation';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldRelationValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldRelationValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldRelationValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldRelationValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldText.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldTextMetadata,
+} from '../ViewField';
+
+export function isViewFieldText(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldTextMetadata> {
+  return field.metadata.type === 'text';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldTextValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldTextValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldTextValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldTextValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldURL.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldURLMetadata,
+} from '../ViewField';
+
+export function isViewFieldURL(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldURLMetadata> {
+  return field.metadata.type === 'url';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldURLValue.ts

@@ -0,0 +1,12 @@
+import { ViewFieldURLValue } from '../ViewField';
+
+// TODO: add yup
+export function isViewFieldURLValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldURLValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
@@ -16,49 +14,29 @@ type OwnProps = {
 };
 
 export function DateEditableField({ icon, value, label, onSubmit }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(value);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
   async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-
     onSubmit?.(newValue);
   }
 
-  async function handleSubmit() {
-    if (!internalValue) return;
-
-    onSubmit?.(internalValue);
-  }
-
-  async function handleCancel() {
-    setInternalValue(value);
-  }
-
-  const internalDateValue = internalValue
-    ? parseDate(internalValue).toJSDate()
-    : null;
+  const internalDateValue = value ? parseDate(value).toJSDate() : null;
 
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
+        // onSubmit={handleSubmit}
+        // onCancel={handleCancel}
         iconLabel={icon}
         label={label}
         editModeContent={
           <EditableFieldEditModeDate
-            value={internalValue || new Date().toISOString()}
+            value={value || new Date().toISOString()}
             onChange={(newValue: string) => {
               handleChange(newValue);
             }}
           />
         }
         displayModeContent={<DateInputDisplay value={internalDateValue} />}
-        isDisplayModeContentEmpty={!internalValue}
+        isDisplayModeContentEmpty={!value}
       />
     </RecoilScope>
   );

front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { parseDate } from '~/utils/date-utils';
@@ -11,6 +13,12 @@ type OwnProps = {
 };
 
 export function EditableFieldEditModeDate({ value, onChange }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
   const { closeEditableField } = useEditableField();
 
   function handleChange(newValue: string) {
@@ -20,7 +28,7 @@ export function EditableFieldEditModeDate({ value, onChange }: OwnProps) {
 
   return (
     <DateInputEdit
-      value={parseDate(value).toJSDate()}
+      value={internalValue ? parseDate(internalValue).toJSDate() : new Date()}
       onChange={(newDate: Date) => {
         handleChange(newDate.toISOString());
       }}

front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx

@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import {
-  canBeCastAsIntegerOrNull,
-  castAsIntegerOrNull,
-} from '~/utils/cast-as-integer-or-null';
-
-type OwnProps = {
-  icon?: React.ReactNode;
-  placeholder?: string;
-  value: number | null | undefined;
-  onSubmit?: (newValue: number | null) => void;
-};
-
-export function NumberEditableField({
-  icon,
-  placeholder,
-  value,
-  onSubmit,
-}: OwnProps) {
-  const [internalValue, setInternalValue] = useState(value?.toString());
-
-  useEffect(() => {
-    setInternalValue(value?.toString());
-  }, [value]);
-
-  async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-  }
-
-  async function handleSubmit() {
-    if (!canBeCastAsIntegerOrNull(internalValue)) {
-      handleCancel();
-      return;
-    }
-
-    const valueCastedAsNumberOrNull = castAsIntegerOrNull(internalValue);
-
-    onSubmit?.(valueCastedAsNumberOrNull);
-
-    setInternalValue(valueCastedAsNumberOrNull?.toString());
-  }
-
-  async function handleCancel() {
-    setInternalValue(value?.toString());
-  }
-
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
-        iconLabel={icon}
-        editModeContent={
-          <TextInputEdit
-            placeholder={placeholder ?? ''}
-            autoFocus
-            value={internalValue ?? ''}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-          />
-        }
-        displayModeContent={internalValue}
-        isDisplayModeContentEmpty={!(internalValue !== '' && internalValue)}
-      />
-    </RecoilScope>
-  );
-}

front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { IconCurrencyDollar } from '@tabler/icons-react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { NumberEditableField } from '../NumberEditableField';
-
-const meta: Meta<typeof NumberEditableField> = {
-  title: 'UI/EditableField/NumberEditableField',
-  component: NumberEditableField,
-  decorators: [ComponentDecorator],
-  argTypes: {
-    icon: {
-      type: 'boolean',
-      mapping: {
-        true: <IconCurrencyDollar />,
-        false: undefined,
-      },
-    },
-    value: { control: { type: 'number' } },
-  },
-  args: {
-    value: 10,
-    icon: true,
-    placeholder: 'Number',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof NumberEditableField>;
-
-export const Default: Story = {};