FieldDisplay & FieldInput (#1708)

* Removed view field duplicate types

* wip

* wip 2

* wip 3

* Unified state for fields

* Renaming

* Wip

* Post merge

* Post post merge

* wip

* Delete unused file

* Boolean and Probability

* Finished InlineCell

* Renamed EditableCell to TableCell

* Finished double texts

* Finished MoneyField

* Fixed bug inline cell click outside

* Fixed hotkey scope

* Final fixes

* Phone

* Fix url and number input validation

* Fix

* Fix position

* wip refactor activity editor

* Fixed activity editor

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/field/states/entityFieldsFamilyState.ts

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

front/src/modules/ui/field/states/isFieldEmptyScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isFieldEmptyScopedState = atomFamily<boolean, string>({
+  key: 'isFieldEmptyScopedState',
+  default: false,
+});

front/src/modules/ui/field/states/selectors/entityFieldsFamilySelector.ts

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

front/src/modules/ui/field/states/selectors/isEntityFieldEmptyFamilySelector.ts

@@ -0,0 +1,59 @@
+import { selectorFamily } from 'recoil';
+
+import { FieldDefinition } from '../../types/FieldDefinition';
+import { FieldMetadata } from '../../types/FieldMetadata';
+import { isFieldDate } from '../../types/guards/isFieldDate';
+import { isFieldEmail } from '../../types/guards/isFieldEmail';
+import { isFieldMoney } from '../../types/guards/isFieldMoney';
+import { isFieldNumber } from '../../types/guards/isFieldNumber';
+import { isFieldPhone } from '../../types/guards/isFieldPhone';
+import { isFieldRelation } from '../../types/guards/isFieldRelation';
+import { isFieldRelationValue } from '../../types/guards/isFieldRelationValue';
+import { isFieldText } from '../../types/guards/isFieldText';
+import { isFieldURL } from '../../types/guards/isFieldURL';
+import { entityFieldsFamilyState } from '../entityFieldsFamilyState';
+
+export const isEntityFieldEmptyFamilySelector = selectorFamily({
+  key: 'isEntityFieldEmptyFamilySelector',
+  get: ({
+    fieldDefinition,
+    entityId,
+  }: {
+    fieldDefinition: Pick<
+      FieldDefinition<FieldMetadata>,
+      'type' | 'metadata' | 'key' | 'name'
+    >;
+    entityId: string;
+  }) => {
+    return ({ get }) => {
+      if (
+        isFieldText(fieldDefinition) ||
+        isFieldURL(fieldDefinition) ||
+        isFieldDate(fieldDefinition) ||
+        isFieldNumber(fieldDefinition) ||
+        isFieldMoney(fieldDefinition) ||
+        isFieldEmail(fieldDefinition) ||
+        isFieldPhone(fieldDefinition)
+      ) {
+        const fieldName = fieldDefinition.metadata.fieldName;
+        const fieldValue = get(entityFieldsFamilyState(entityId))?.[
+          fieldName
+        ] as string | null;
+
+        return (
+          fieldValue === null || fieldValue === undefined || fieldValue === ''
+        );
+      } else if (isFieldRelation(fieldDefinition)) {
+        const fieldName = fieldDefinition.metadata.fieldName;
+
+        const fieldValue = get(entityFieldsFamilyState(entityId))?.[fieldName];
+
+        if (isFieldRelationValue(fieldValue)) {
+          return fieldValue === null || fieldValue === undefined;
+        }
+      }
+
+      return false;
+    };
+  },
+});