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/board/hooks/useBoardCardFields.ts

@@ -1,39 +1,26 @@
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { ViewFieldForVisibility } from '@/ui/view-bar/types/ViewFieldForVisibility';
 
 import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';
-import { boardCardFieldsByKeyScopedSelector } from '../states/selectors/boardCardFieldsByKeyScopedSelector';
 
 import { useBoardContext } from './useBoardContext';
 
 export const useBoardCardFields = () => {
   const { BoardRecoilScopeContext } = useBoardContext();
 
-  const [boardCardFields, setBoardCardFields] = useRecoilScopedState(
+  const [, setBoardCardFields] = useRecoilScopedState(
     boardCardFieldsScopedState,
     BoardRecoilScopeContext,
   );
-  const boardCardFieldsByKey = useRecoilScopedValue(
-    boardCardFieldsByKeyScopedSelector,
-    BoardRecoilScopeContext,
-  );
 
-  const handleFieldVisibilityChange = (
-    field: ViewFieldDefinition<ViewFieldMetadata>,
-  ) => {
-    const nextFields = boardCardFieldsByKey[field.key]
-      ? boardCardFields.map((previousField) =>
-          previousField.key === field.key
-            ? { ...previousField, isVisible: !field.isVisible }
-            : previousField,
-        )
-      : [...boardCardFields, { ...field, isVisible: true }];
-
-    setBoardCardFields(nextFields);
+  const handleFieldVisibilityChange = (field: ViewFieldForVisibility) => {
+    setBoardCardFields((previousFields) =>
+      previousFields.map((previousField) =>
+        previousField.key === field.key
+          ? { ...previousField, isVisible: !field.isVisible }
+          : previousField,
+      ),
+    );
   };
 
   return { handleFieldVisibilityChange };

front/src/modules/ui/board/states/availableBoardCardFieldsScopedState.ts

@@ -1,12 +1,11 @@
 import { atomFamily } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+
+import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
 export const availableBoardCardFieldsScopedState = atomFamily<
-  ViewFieldDefinition<ViewFieldMetadata>[],
+  BoardFieldDefinition<FieldMetadata>[],
   string
 >({
   key: 'availableBoardCardFieldsScopedState',

front/src/modules/ui/board/states/boardCardFieldsScopedState.ts

@@ -1,12 +1,11 @@
 import { atomFamily } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+
+import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
 export const boardCardFieldsScopedState = atomFamily<
-  ViewFieldDefinition<ViewFieldMetadata>[],
+  BoardFieldDefinition<FieldMetadata>[],
   string
 >({
   key: 'boardCardFieldsScopedState',

front/src/modules/ui/board/states/savedBoardCardFieldsFamilyState.ts

@@ -1,12 +1,11 @@
 import { atomFamily } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+
+import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
 export const savedBoardCardFieldsFamilyState = atomFamily<
-  ViewFieldDefinition<ViewFieldMetadata>[],
+  BoardFieldDefinition<FieldMetadata>[],
   string | undefined
 >({
   key: 'savedBoardCardFieldsFamilyState',

front/src/modules/ui/board/states/selectors/boardCardFieldsByKeyScopedSelector.ts

@@ -1,10 +1,8 @@
 import { selectorFamily } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 
+import { BoardFieldDefinition } from '../../types/BoardFieldDefinition';
 import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
 
 export const boardCardFieldsByKeyScopedSelector = selectorFamily({
@@ -13,6 +11,6 @@ export const boardCardFieldsByKeyScopedSelector = selectorFamily({
     (scopeId: string) =>
     ({ get }) =>
       get(boardCardFieldsScopedState(scopeId)).reduce<
-        Record<string, ViewFieldDefinition<ViewFieldMetadata>>
+        Record<string, BoardFieldDefinition<FieldMetadata>>
       >((result, field) => ({ ...result, [field.key]: field }), {}),
 });

front/src/modules/ui/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector.ts

@@ -1,10 +1,8 @@
 import { selectorFamily } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 
+import { BoardFieldDefinition } from '../../types/BoardFieldDefinition';
 import { savedBoardCardFieldsFamilyState } from '../savedBoardCardFieldsFamilyState';
 
 export const savedBoardCardFieldsByKeyFamilySelector = selectorFamily({
@@ -13,6 +11,6 @@ export const savedBoardCardFieldsByKeyFamilySelector = selectorFamily({
     (viewId: string | undefined) =>
     ({ get }) =>
       get(savedBoardCardFieldsFamilyState(viewId)).reduce<
-        Record<string, ViewFieldDefinition<ViewFieldMetadata>>
+        Record<string, BoardFieldDefinition<FieldMetadata>>
       >((result, field) => ({ ...result, [field.key]: field }), {}),
 });

front/src/modules/ui/board/types/BoardFieldDefinition.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+
+export type BoardFieldDefinition<T extends FieldMetadata> =
+  FieldDefinition<T> & {
+    index: number;
+    isVisible?: boolean;
+  };