Refactor Field Inputs (#3658)

* Rename field to record-field folder

* Simplify FieldInput

* Fix perfs

* Fixes

* Fixes

* Fix tests

* Fix tests

packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
 
-import { FieldLinkValue } from '@/object-record/field/types/FieldMetadata';
+import { FieldLinkValue } from '@/object-record/record-field/types/FieldMetadata';
 import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
 import {
   LinkType,

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -3,12 +3,11 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { flip, offset, useFloating } from '@floating-ui/react';
 
+import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { DateDisplay } from '@/ui/field/display/components/DateDisplay';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { Nullable } from '~/types/Nullable';
 
-import { useRegisterInputEvents } from '../../../../object-record/field/meta-types/input/hooks/useRegisterInputEvents';
-
 const StyledCalendarContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
   border: 1px solid ${({ theme }) => theme.border.color.light};

packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
-import { FieldDoubleText } from '@/object-record/field/types/FieldDoubleText';
+import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx

@@ -2,10 +2,9 @@ import { useEffect, useRef, useState } from 'react';
 import ReactPhoneNumberInput from 'react-phone-number-input';
 import styled from '@emotion/styled';
 
+import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { CountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/CountryPickerDropdownButton';
 
-import { useRegisterInputEvents } from '../../../../object-record/field/meta-types/input/hooks/useRegisterInputEvents';
-
 import 'react-phone-number-input/style.css';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 
-import { useRegisterInputEvents } from '@/object-record/field/meta-types/input/hooks/useRegisterInputEvents';
+import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { textInputStyle } from '@/ui/theme/constants/effects';
 
 export type TextAreaInputProps = {

packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx

@@ -1,10 +1,9 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
+import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { textInputStyle } from '@/ui/theme/constants/effects';
 
-import { useRegisterInputEvents } from '../../../../object-record/field/meta-types/input/hooks/useRegisterInputEvents';
-
 export const StyledInput = styled.input`
   margin: 0;
   ${textInputStyle}

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap.ts

@@ -0,0 +1,30 @@
+import {
+  GetCallback,
+  GetRecoilValue,
+  Loadable,
+  RecoilValue,
+  selectorFamily,
+  WrappedValue,
+} from 'recoil';
+
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
+
+type SelectorGetter<T, P> = (
+  param: P,
+) => (opts: {
+  get: GetRecoilValue;
+  getCallback: GetCallback;
+}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
+
+export const createSelectorReadOnlyScopeMap = <ValueType>({
+  key,
+  get,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, StateScopeMapKey>;
+}) => {
+  return selectorFamily<ValueType, StateScopeMapKey>({
+    key,
+    get,
+  });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorScopeMap.ts

@@ -1,9 +1,12 @@
 import {
+  DefaultValue,
   GetCallback,
   GetRecoilValue,
   Loadable,
   RecoilValue,
+  ResetRecoilState,
   selectorFamily,
+  SetRecoilState,
   WrappedValue,
 } from 'recoil';
 
@@ -16,15 +19,25 @@ type SelectorGetter<T, P> = (
   getCallback: GetCallback;
 }) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
 
+type SelectorSetter<T, P> = (
+  param: P,
+) => (
+  opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
+  newValue: T | DefaultValue,
+) => void;
+
 export const createSelectorScopeMap = <ValueType>({
   key,
   get,
+  set,
 }: {
   key: string;
   get: SelectorGetter<ValueType, StateScopeMapKey>;
+  set: SelectorSetter<ValueType, StateScopeMapKey>;
 }) => {
   return selectorFamily<ValueType, StateScopeMapKey>({
     key,
     get,
+    set,
   });
 };

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts

@@ -1,11 +1,9 @@
-import { RecoilValueReadOnly } from 'recoil';
+import { RecoilState } from 'recoil';
 
 import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 
 export const getSelector = <StateType>(
-  stateScopeMap: (
-    stateScopeMapKey: StateScopeMapKey,
-  ) => RecoilValueReadOnly<StateType>,
+  stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
   scopeId: string,
 ) => {
   return () => stateScopeMap({ scopeId });

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorReadOnly.ts

@@ -0,0 +1,12 @@
+import { RecoilValueReadOnly } from 'recoil';
+
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
+
+export const getSelectorReadOnly = <StateType>(
+  stateScopeMap: (
+    stateScopeMapKey: StateScopeMapKey,
+  ) => RecoilValueReadOnly<StateType>,
+  scopeId: string,
+) => {
+  return () => stateScopeMap({ scopeId });
+};