houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor record-field into ui sub-folder (#13888)

Browse Source 
This PR prepares the refactor of record field definition and column
definition.

We need to separate the two concepts of FieldInput and FieldContext at
the cell level, and the new RecordField concept that will replace
FieldDefinition at the metadata and state level.

So we create a new ui sub-folder in the already existing record-field
folder, in order to separate those two concepts that are still very
close.
This commit is contained in:
Lucas Bordeau
2025-08-13 11:31:39 +02:00
committed by GitHub
parent e8e81957a6
commit 3f0ee0139c
528 changed files with 1213 additions and 1212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ui/field/display/components/ActorDisplay.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { type FieldActorValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldActorValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { useMemo } from 'react';
import { ConnectedAccountProvider } from 'twenty-shared/types';
import { Chip, AvatarChip } from 'twenty-ui/components';
import { AvatarChip, Chip } from 'twenty-ui/components';
import {
IconApi,
IconCalendar,
packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { type FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldArrayValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { Chip, ChipVariant } from 'twenty-ui/components';
packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { useTheme } from '@emotion/react';
import { type FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
import {
type FieldCurrencyMetadata,
type FieldCurrencyValue,
} from '@/object-record/record-field/types/FieldMetadata';
} from '@/object-record/record-field/ui/types/FieldMetadata';
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { isDefined } from 'twenty-shared/utils';
packages/twenty-front/src/modules/ui/field/display/components/DateDisplay.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { type FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldDateMetadataSettings } from '@/object-record/record-field/ui/types/FieldMetadata';
import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { type FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldDateMetadataSettings } from '@/object-record/record-field/ui/types/FieldMetadata';
import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { type FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldEmailsValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useMemo } from 'react';
import { getFieldLinkDefinedLinks } from '@/object-record/record-field/meta-types/input/utils/getFieldLinkDefinedLinks';
import { type FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
import { getFieldLinkDefinedLinks } from '@/object-record/record-field/ui/meta-types/input/utils/getFieldLinkDefinedLinks';
import { type FieldLinksValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import {
getAbsoluteUrlOrThrow,
packages/twenty-front/src/modules/ui/field/display/components/MultiSelectDisplay.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { type FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { styled } from '@linaria/react';
import { Tag } from 'twenty-ui/components';
import { type SelectOption } from 'twenty-ui/input';
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import { type FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldPhonesValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { styled } from '@linaria/react';
packages/twenty-front/src/modules/ui/field/display/components/__stories__/DateDisplay.stories.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { FieldDateDisplayFormat } from '@/object-record/record-field/types/FieldMetadata';
import { FieldDateDisplayFormat } from '@/object-record/record-field/ui/types/FieldMetadata';
import { UserContext } from '@/users/contexts/UserContext';
import { expect, within } from '@storybook/test';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, within } from '@storybook/test';
import { DateDisplay } from '../DateDisplay';
const meta: Meta<typeof DateDisplay> = {
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+3 -3
View File
@@ -3,9 +3,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { PlaceAutocompleteSelect } from '@/geo-map/components/PlaceAutocompleteSelect';
import { SELECT_AUTOCOMPLETE_LIST_DROPDOWN_ID } from '@/geo-map/constants/SelectAutocompleteListDropDownId';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { type FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
import { type FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { type FieldAddressDraftValue } from '@/object-record/record-field/ui/types/FieldInputDraftValue';
import { type FieldAddressValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { TextInput } from '@/ui/input/components/TextInput';
import { TEXT_INPUT_CLICK_OUTSIDE_ID } from '@/ui/input/components/constants/TextInputClickOutsideId';
import { CountrySelect } from '@/ui/input/components/internal/country/components/CountrySelect';
packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
import { type Currency } from '@/ui/input/components/internal/types/Currency';
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useRef, useState } from 'react';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import {
DateTimePicker,
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
+3 -3
View File
@@ -1,14 +1,14 @@
import styled from '@emotion/styled';
import {
type ChangeEvent,
type ClipboardEvent,
useEffect,
useRef,
useState,
type ChangeEvent,
type ClipboardEvent,
} from 'react';
import { Key } from 'ts-key-enum';
import { type FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
import { type FieldDoubleText } from '@/object-record/record-field/ui/types/FieldDoubleText';
import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { useRef, useState } from 'react';
import { Key } from 'ts-key-enum';
import { type FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import { styled } from '@linaria/react';
import { useContext, useState } from 'react';
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { type FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
import { useClearField } from '@/object-record/record-field/ui/hooks/useClearField';
import { RATING_VALUES } from '@/object-record/record-field/ui/meta-types/constants/RatingValues';
import { type FieldRatingValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { IconTwentyStarFilled } from 'twenty-ui/display';
import { THEME_COMMON, ThemeContext } from 'twenty-ui/theme';
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import { type ChangeEvent, useEffect, useRef, useState } from 'react';
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { LightCopyIconButton } from '@/object-record/record-field/ui/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { isDefined } from 'twenty-shared/utils';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import { type ChangeEvent, useEffect, useRef, useState } from 'react';
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { LightCopyIconButton } from '@/object-record/record-field/ui/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
export const StyledTextInput = styled.input`
packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import { type FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/types/FieldMetadata';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
import { type Meta, type StoryObj } from '@storybook/react';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
import { useEffect, useState } from 'react';
import {
IconBolt,
packages/twenty-front/src/modules/ui/field/input/hooks/useAddressAutocomplete.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
import { SELECT_AUTOCOMPLETE_LIST_DROPDOWN_ID } from '@/geo-map/constants/SelectAutocompleteListDropDownId';
import { useGetPlaceApiData } from '@/geo-map/hooks/useGetPlaceApiData';
import { type PlaceAutocompleteResult } from '@/geo-map/types/placeApi';
import { type FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
import { type FieldAddressDraftValue } from '@/object-record/record-field/ui/types/FieldInputDraftValue';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { isDefined } from 'twenty-shared/utils';
packages/twenty-front/src/modules/ui/field/input/hooks/useFocusManagement.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { type RefObject, useCallback, useState } from 'react';
import { useCallback, useState, type RefObject } from 'react';
import { type FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
import { type FieldAddressDraftValue } from '@/object-record/record-field/ui/types/FieldInputDraftValue';
export const useFocusManagement = (
inputRefs: {
packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { TextInput, type TextInputSize } from '@/ui/input/components/TextInput';
import { useRef, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { CurrencyCode } from '@/object-record/record-field/ui/types/CurrencyCode';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+2 -2
View File
@@ -2,13 +2,13 @@ import { css } from '@emotion/react';
import styled from '@emotion/styled';
import {
forwardRef,
useRef,
type InputHTMLAttributes,
type ReactNode,
useRef,
} from 'react';
import 'react-phone-number-input/style.css';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';