mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[REFACTOR] Twenty UI multi barrel (#11301)

Browse Source 
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
This commit is contained in:
Paul Rastoin
2025-04-03 11:47:55 +02:00
committed by GitHub
parent 8c9fcfe5a4
commit 4a4e65fe4a
1009 changed files with 5757 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
View File

@ -11,9 +11,11 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { IconLibraryPlus, IconPlus, LightButton, MenuItem } from 'twenty-ui';
import { v4 } from 'uuid';
import { isDefined } from 'twenty-shared/utils';
import { IconLibraryPlus, IconPlus } from 'twenty-ui/display';
import { LightButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type AdvancedFilterAddFilterRuleSelectProps = {
recordFilterGroup: RecordFilterGroup;

2
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx
View File

@ -4,7 +4,7 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isNonEmptyString } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui';
import { useIcons } from 'twenty-ui/display';
type AdvancedFilterFieldSelectDropdownButtonClickableSelectProps = {
recordFilterId: string;

4
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx
View File

@ -6,7 +6,9 @@ import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRe
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui';
import { IconButton } from 'twenty-ui/input';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
type AdvancedFilterRecordFilterGroupOptionsDropdownProps = {
recordFilterGroupId: string;

2
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
View File

@ -15,7 +15,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui';
import { MenuItem } from 'twenty-ui/navigation';
const StyledContainer = styled.div`
width: 100px;

4
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
View File

@ -11,7 +11,9 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
import { IconButton, IconDotsVertical, IconTrash, MenuItem } from 'twenty-ui';
import { IconButton } from 'twenty-ui/input';
import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
type AdvancedFilterRecordFilterOptionsDropdownProps = {
recordFilterId: string;

3
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx
View File

@ -19,7 +19,8 @@ import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/con
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { IconApps, IconChevronLeft, MenuItem, useIcons } from 'twenty-ui';
import { IconApps, IconChevronLeft, useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
type AdvancedFilterSubFieldSelectMenuProps = {
recordFilterId: string;

16
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -1,11 +1,3 @@
import {
AvatarChip,
AvatarChipVariant,
ChipSize,
LinkAvatarChip,
isModifiedEvent,
} from 'twenty-ui';
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
@ -13,6 +5,14 @@ import { recordIndexOpenRecordInState } from '@/object-record/record-index/state
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { useRecoilValue } from 'recoil';
import {
AvatarChip,
AvatarChipVariant,
ChipSize,
LinkAvatarChip,
} from 'twenty-ui/components';
import { isModifiedEvent } from 'twenty-ui/utilities';
export type RecordChipProps = {
objectNameSingular: string;
record: ObjectRecord;

3
packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlConnection.ts
View File

@ -1,6 +1,5 @@
import { Nullable } from 'twenty-ui';
import { RecordGqlEdge } from '@/object-record/graphql/types/RecordGqlEdge';
import { Nullable } from 'twenty-ui/utilities';
export type RecordGqlConnection = {
__typename?: string;

5
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx
View File

@ -1,10 +1,11 @@
import { IconPlus, LightButton } from 'twenty-ui';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
import { t } from '@lingui/core/macro';
import { IconPlus } from 'twenty-ui/display';
import { LightButton } from 'twenty-ui/input';
type AddObjectFilterFromDetailsButtonProps = {
filterDropdownId?: string;
};

9
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx
View File

@ -16,14 +16,11 @@ import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLog
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import {
IconFilter,
MenuItemLeftContent,
Pill,
StyledMenuItemBase,
} from 'twenty-ui';
import { v4 } from 'uuid';
import { isDefined } from 'twenty-shared/utils';
import { IconFilter } from 'twenty-ui/display';
import { MenuItemLeftContent, StyledMenuItemBase } from 'twenty-ui/navigation';
import { Pill } from 'twenty-ui/components';
export const StyledContainer = styled.div`
align-items: center;

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
View File

@ -1,6 +1,6 @@
import { AvatarChip, IconComponent } from 'twenty-ui';
import { RecordFilter } from '../../record-filter/types/RecordFilter';
import { AvatarChip } from 'twenty-ui/components';
import { IconComponent } from 'twenty-ui/display';
type GenericEntityFilterChipProps = {
filter: RecordFilter;

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
View File

@ -15,7 +15,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
import { IconCheck } from 'twenty-ui';
import { IconCheck } from 'twenty-ui/display';
const StyledBooleanSelectContainer = styled.div<{ selected?: boolean }>`
align-items: center;

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx
View File

@ -23,7 +23,8 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconApps, IconChevronLeft, MenuItem, useIcons } from 'twenty-ui';
import { IconApps, IconChevronLeft, useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
const [searchText] = useState('');

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx
View File

@ -20,8 +20,9 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useRecoilValue } from 'recoil';
import { MenuItemSelect, useIcons } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { useIcons } from 'twenty-ui/display';
export type ObjectFilterDropdownFilterSelectMenuItemProps = {
fieldMetadataItemToSelect: FieldMetadataItem;

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItemV2.tsx
View File

@ -4,7 +4,8 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useRecoilValue } from 'recoil';
import { MenuItemSelect, useIcons } from 'twenty-ui';
import { MenuItemSelect } from 'twenty-ui/navigation';
import { useIcons } from 'twenty-ui/display';
export type ObjectFilterDropdownFilterSelectMenuItemV2Props = {
fieldMetadataItemToSelect: FieldMetadataItem;

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx
View File

@ -1,5 +1,3 @@
import { IconChevronDown } from 'twenty-ui';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect';
@ -11,6 +9,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { getOperandLabel } from '../utils/getOperandLabel';
import { IconChevronDown } from 'twenty-ui/display';
const StyledDropdownMenuHeader = styled(DropdownMenuHeader)`
cursor: pointer;

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
View File

@ -15,8 +15,8 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui';
import { getOperandLabel } from '../utils/getOperandLabel';
import { MenuItem } from 'twenty-ui/navigation';
const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
background-color: ${({ theme }) => theme.background.primary};

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
View File

@ -24,7 +24,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation';
export const EMPTY_FILTER_VALUE = '';
export const MAX_OPTIONS_TO_DISPLAY = 3;

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx
View File

@ -1,7 +1,7 @@
import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip';
import { SelectableItem } from '@/object-record/select/types/SelectableItem';
import styled from '@emotion/styled';
import { MenuItemMultiSelectAvatar } from 'twenty-ui';
import { MenuItemMultiSelectAvatar } from 'twenty-ui/navigation';
const StyledPinnedItemsContainer = styled.div`
display: flex;

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx
View File

@ -1,8 +1,8 @@
import { IconFilterOff, MenuItem } from 'twenty-ui';
import { useEmptyRecordFilter } from '@/object-record/object-filter-dropdown/hooks/useEmptyRecordFilter';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { IconFilterOff } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => {
const { emptyRecordFilter } = useEmptyRecordFilter();

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx
View File

@ -22,8 +22,8 @@ import { RelationFilterValue } from '@/views/view-filter-value/types/RelationFil
import { jsonRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/jsonRelationFilterValueSchema';
import { simpleRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/simpleRelationFilterValueSchema';
import { isDefined } from 'twenty-shared/utils';
import { IconUserCircle } from 'twenty-ui';
import { v4 } from 'uuid';
import { IconUserCircle } from 'twenty-ui/display';
export const EMPTY_FILTER_VALUE: string = JSON.stringify({
isCurrentWorkspaceMemberSelected: false,

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
View File

@ -1,5 +1,4 @@
import { useTheme } from '@emotion/react';
import { IconChevronDown } from 'twenty-ui';
import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -14,6 +13,7 @@ import { useLingui } from '@lingui/react/macro';
import { GenericEntityFilterChip } from './GenericEntityFilterChip';
import { ObjectFilterDropdownRecordSelect } from './ObjectFilterDropdownRecordSelect';
import { ObjectFilterDropdownSearchInput } from './ObjectFilterDropdownSearchInput';
import { IconChevronDown } from 'twenty-ui/display';
const SINGLE_ENTITY_FILTER_DROPDOWN_ID = 'single-entity-filter-dropdown';

8
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
View File

@ -15,16 +15,16 @@ import { tableColumnsComponentState } from '@/object-record/record-table/states/
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { within } from '@storybook/test';
import {
ComponentDecorator,
getCanvasElementForDropdownTesting,
} from 'twenty-ui';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import {
ComponentDecorator,
getCanvasElementForDropdownTesting,
} from 'twenty-ui/testing';
const meta: Meta<typeof MultipleFiltersDropdownButton> = {
title:

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions.ts
View File

@ -8,7 +8,7 @@ import {
IconSettingsAutomation,
IconUserCircle,
IconWebhook,
} from 'twenty-ui';
} from 'twenty-ui/display';
export const getActorSourceMultiSelectOptions = (
selectedSourceNames: string[],

4
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
View File

@ -1,5 +1,3 @@
import { IconChevronLeft, IconEyeOff, MenuItemNavigate } from 'twenty-ui';
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
@ -10,6 +8,8 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel
import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconChevronLeft, IconEyeOff } from 'twenty-ui/display';
import { MenuItemNavigate } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownFieldsContent = () => {
const { t } = useLingui();

8
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
View File

@ -1,11 +1,5 @@
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import {
IconChevronLeft,
IconSettings,
MenuItem,
UndecoratedLink,
} from 'twenty-ui';
import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
@ -22,6 +16,8 @@ import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownHiddenFieldsContent = () => {
const { t } = useLingui();

8
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
View File

@ -1,10 +1,4 @@
import { useEffect } from 'react';
import {
IconChevronLeft,
IconSettings,
MenuItem,
UndecoratedLink,
} from 'twenty-ui';
import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
@ -24,6 +18,8 @@ import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
const { t } = useLingui();

23
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
View File

@ -1,16 +1,3 @@
import {
IconBaselineDensitySmall,
IconChevronLeft,
IconLayoutList,
IconLayoutNavbar,
IconLayoutSidebarRight,
IconTable,
MenuItem,
MenuItemSelect,
MenuItemToggle,
OverflowingTextWithTooltip,
} from 'twenty-ui';
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { useSetViewTypeFromLayoutOptionsMenu } from '@/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu';
@ -29,6 +16,16 @@ import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGet
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import {
IconBaselineDensitySmall,
IconChevronLeft,
IconLayoutList,
IconLayoutNavbar,
IconLayoutSidebarRight,
IconTable,
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
import { MenuItem, MenuItemSelect, MenuItemToggle } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownLayoutContent = () => {
const { t } = useLingui();

13
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx
View File

@ -1,10 +1,3 @@
import {
IconChevronLeft,
IconLayoutNavbar,
IconLayoutSidebarRight,
MenuItemSelect,
} from 'twenty-ui';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { useUpdateObjectViewOptions } from '@/object-record/object-options-dropdown/hooks/useUpdateObjectViewOptions';
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
@ -15,6 +8,12 @@ import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import {
IconChevronLeft,
IconLayoutNavbar,
IconLayoutSidebarRight,
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownLayoutOpenInContent = () => {
const { onContentChange } = useOptionsDropdown();

17
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -1,12 +1,4 @@
import { Key } from 'ts-key-enum';
import {
AppTooltip,
IconCopy,
IconLayoutList,
IconListDetails,
IconTrash,
MenuItem,
} from 'twenty-ui';
import { ObjectOptionsDropdownMenuViewName } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName';
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
@ -27,6 +19,15 @@ import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/sta
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { capitalize, isDefined } from 'twenty-shared/utils';
import {
AppTooltip,
IconCopy,
IconLayoutList,
IconListDetails,
IconTrash,
} from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownMenuContent = () => {
const { t } = useLingui();
const { recordIndexId, objectMetadataItem, onContentChange, closeDropdown } =

3
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
View File

@ -16,10 +16,9 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { OverflowingTextWithTooltip } from '@ui/display';
import { useState } from 'react';
import { useIcons } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
const StyledDropdownMenuIconAndNameContainer = styled.div`
align-items: center;

14
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx
View File

@ -1,12 +1,4 @@
import { useEffect } from 'react';
import {
IconChevronLeft,
IconSettings,
MenuItem,
MenuItemSelect,
UndecoratedLink,
useIcons,
} from 'twenty-ui';
import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
@ -31,6 +23,12 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronLeft, IconSettings, useIcons } from 'twenty-ui/display';
import {
MenuItem,
MenuItemSelect,
UndecoratedLink,
} from 'twenty-ui/navigation';
export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
const { t } = useLingui();

14
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx
View File

@ -1,11 +1,4 @@
import { useEffect } from 'react';
import {
IconChevronLeft,
IconHandMove,
IconSortAZ,
IconSortZA,
MenuItemSelect,
} from 'twenty-ui';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
@ -16,6 +9,13 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import {
IconChevronLeft,
IconHandMove,
IconSortAZ,
IconSortZA,
} from 'twenty-ui/display';
import { MenuItemSelect } from 'twenty-ui/navigation';
export const ObjectOptionsDropdownRecordGroupSortContent = () => {
const { currentContentId, onContentChange } = useOptionsDropdown();

22
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
View File

@ -1,14 +1,4 @@
import { useEffect } from 'react';
import {
IconChevronLeft,
IconCircleOff,
IconEyeOff,
IconLayoutList,
IconSortDescending,
MenuItem,
MenuItemNavigate,
MenuItemToggle,
} from 'twenty-ui';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { RecordGroupReorderConfirmationModal } from '@/object-record/record-group/components/RecordGroupReorderConfirmationModal';
@ -28,6 +18,18 @@ import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { useLingui } from '@lingui/react/macro';
import {
IconChevronLeft,
IconCircleOff,
IconEyeOff,
IconLayoutList,
IconSortDescending,
} from 'twenty-ui/display';
import {
MenuItem,
MenuItemNavigate,
MenuItemToggle,
} from 'twenty-ui/navigation';
export const ObjectOptionsDropdownRecordGroupsContent = () => {
const { t } = useLingui();

2
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent';
@ -23,6 +22,7 @@ import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecora
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { ComponentDecorator } from 'twenty-ui/testing';
const instanceId = 'entity-options-scope';

3
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -1,5 +1,4 @@
import styled from '@emotion/styled';
import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui';
import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@ -33,6 +32,8 @@ import { Trans, useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useTheme } from '@emotion/react';
import { IconChevronDown, useIcons } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const StyledInput = styled.input`
background: transparent;

2
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -25,9 +25,9 @@ import styled from '@emotion/styled';
import { useContext, useState } from 'react';
import { InView, useInView } from 'react-intersection-observer';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { AnimatedEaseInOut } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { AnimatedEaseInOut } from 'twenty-ui/utilities';
const StyledBoardCard = styled.div<{ selected: boolean }>`
background-color: ${({ theme, selected }) =>

11
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx
View File

@ -18,15 +18,10 @@ import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import styled from '@emotion/styled';
import { Dispatch, SetStateAction, useContext } from 'react';
import { useRecoilValue } from 'recoil';
import {
AvatarChipVariant,
Checkbox,
CheckboxVariant,
IconEye,
IconEyeOff,
LightIconButton,
} from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { AvatarChipVariant } from 'twenty-ui/components';
import { Checkbox, CheckboxVariant, LightIconButton } from 'twenty-ui/input';
import { IconEye, IconEyeOff } from 'twenty-ui/display';
const StyledCompactIconContainer = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx
View File

@ -7,7 +7,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { ViewType } from '@/views/types/ViewType';
import { MenuItem } from 'twenty-ui';
import { MenuItem } from 'twenty-ui/navigation';
const StyledMenuContainer = styled.div`
position: absolute;

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx
View File

@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { useContext, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { useRecoilValue } from 'recoil';
import { GRAY_SCALE } from 'twenty-ui';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState';
@ -10,6 +9,7 @@ import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object
import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/record-index/states/isRecordIndexLoadMoreLockedComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
import { GRAY_SCALE } from 'twenty-ui/theme';
const StyledText = styled.div`
align-items: center;

4
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
View File

@ -11,7 +11,9 @@ import { RecordGroupDefinitionType } from '@/object-record/record-group/types/Re
import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord';
import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { IconDotsVertical, IconPlus, LightIconButton, Tag } from 'twenty-ui';
import { IconDotsVertical, IconPlus } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { Tag } from 'twenty-ui/components';
const StyledHeader = styled.div`
align-items: center;

3
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
View File

@ -1,7 +1,8 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import styled from '@emotion/styled';
import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui';
import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
import { Tag } from 'twenty-ui/components';
const StyledTag = styled(Tag)`
width: 100%;

8
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx
View File

@ -9,15 +9,15 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate';
import { useRecoilValue } from 'recoil';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { isDefined } from 'twenty-shared/utils';
import {
Icon123,
IconCheck,
IconChevronLeft,
MenuItem,
useIcons,
} from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { isDefined } from 'twenty-shared/utils';
} from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
const {

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent.tsx
View File

@ -1,5 +1,4 @@
import { Key } from 'ts-key-enum';
import { MenuItem } from 'twenty-ui';
import { useDropdown } from '@/dropdown/hooks/useDropdown';
import {
@ -11,6 +10,7 @@ import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/Tabl
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useLingui } from '@lingui/react/macro';
import { MenuItem } from 'twenty-ui/navigation';
export const RecordBoardColumnHeaderAggregateDropdownMenuContent = () => {
const { t } = useLingui();

3
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem.tsx
View File

@ -1,4 +1,5 @@
import { IconComponent, MenuItem } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const RecordBoardColumnHeaderAggregateDropdownMenuItem = ({
onContentChange,

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx
View File

@ -20,8 +20,8 @@ import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate';
import isEmpty from 'lodash.isempty';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { IconCheck, IconChevronLeft } from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconCheck, IconChevronLeft } from 'twenty-ui/display';
export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
availableAggregations,

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx
View File

@ -5,7 +5,7 @@ import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObj
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useContext } from 'react';
import { IconPlus } from 'twenty-ui';
import { IconPlus } from 'twenty-ui/display';
const StyledNewButton = styled.button`
align-items: center;

3
packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx
View File

@ -1,10 +1,11 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCopy, LightIconButton } from 'twenty-ui';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useLingui } from '@lingui/react/macro';
import { IconCopy } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
const StyledButtonContainer = styled.div`
padding: 0 ${({ theme }) => theme.spacing(1)};

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountryCodeSelectInput.tsx
View File

@ -1,10 +1,11 @@
import { useMemo } from 'react';
import { IconCircleOff, IconComponentProps, SelectOption } from 'twenty-ui';
import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { CountryCode } from 'libphonenumber-js';
import { IconCircleOff, IconComponentProps } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
export type FormCountryCodeSelectInputUpdatedValue = CountryCode | '';

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx
View File

@ -1,9 +1,10 @@
import { useMemo } from 'react';
import { IconCircleOff, IconComponentProps, SelectOption } from 'twenty-ui';
import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { IconCircleOff, IconComponentProps } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
export const FormCountrySelectInput = ({
selectedCountryName,

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

@ -30,7 +30,8 @@ import {
useState,
} from 'react';
import { isDefined } from 'twenty-shared/utils';
import { Nullable, TEXT_INPUT_STYLE } from 'twenty-ui';
import { Nullable } from 'twenty-ui/utilities';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
const StyledInputContainer = styled(FormFieldInputInputContainer)`
display: grid;

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
View File

@ -17,7 +17,9 @@ import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariabl
import { useTheme } from '@emotion/react';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, SelectOption, VisibilityHidden } from 'twenty-ui';
import { IconChevronDown } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
import { VisibilityHidden } from 'twenty-ui/accessibility';
type FormMultiSelectFieldInputProps = {
label?: string;

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
View File

@ -18,7 +18,9 @@ import styled from '@emotion/styled';
import { useId, useState } from 'react';
import { Key } from 'ts-key-enum';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, SelectOption, VisibilityHidden } from 'twenty-ui';
import { IconChevronDown } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
import { VisibilityHidden } from 'twenty-ui/accessibility';
type FormSelectFieldInputProps = {
label?: string;

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
View File

@ -17,7 +17,8 @@ import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariabl
import styled from '@emotion/styled';
import { useCallback } from 'react';
import { isDefined, isValidUuid } from 'twenty-shared/utils';
import { IconChevronDown, IconForbid, LightIconButton } from 'twenty-ui';
import { IconChevronDown, IconForbid } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
const StyledFormSelectContainer = styled(FormFieldInputInputContainer)`
justify-content: space-between;

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
View File

@ -6,8 +6,8 @@ import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { IconAlertTriangle, IconX } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { IconAlertTriangle, IconX } from 'twenty-ui/display';
const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
background-color: ${({ theme, danger }) =>

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx
View File

@ -1,11 +1,11 @@
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { fn, userEvent, waitFor, within } from '@storybook/test';
import { getUserDevice } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
import { FormRawJsonFieldInput } from '../FormRawJsonFieldInput';
import { getUserDevice } from 'twenty-ui/utilities';
const meta: Meta<typeof FormRawJsonFieldInput> = {
title: 'UI/Data/Field/Form/Input/FormRawJsonFieldInput',

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx
View File

@ -7,11 +7,11 @@ import {
waitForElementToBeRemoved,
within,
} from '@storybook/test';
import { getUserDevice } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
import { FormTextFieldInput } from '../FormTextFieldInput';
import { getUserDevice } from 'twenty-ui/utilities';
const meta: Meta<typeof FormTextFieldInput> = {
title: 'UI/Data/Field/Form/Input/FormTextFieldInput',

2
packages/twenty-front/src/modules/object-record/record-field/hooks/__tests__/useGetButtonIcon.test.tsx
View File

@ -1,7 +1,6 @@
import { renderHook } from '@testing-library/react';
import { ReactNode } from 'react';
import { RecoilRoot } from 'recoil';
import { IconPencil } from 'twenty-ui';
import {
phonesFieldDefinition,
@ -11,6 +10,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { IconPencil } from 'twenty-ui/display';
const recordId = 'recordId';

2
packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
View File

@ -1,9 +1,9 @@
import { useContext } from 'react';
import { IconComponent } from 'twenty-ui';
import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
import { FieldContext } from '../contexts/FieldContext';
import { IconComponent } from 'twenty-ui/display';
export const useGetButtonIcon = (): IconComponent | undefined => {
const { fieldDefinition } = useContext(FieldContext);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -1,7 +1,7 @@
import { RecordChip } from '@/object-record/components/RecordChip';
import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay';
import { ChipSize } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { ChipSize } from 'twenty-ui/components';
export const ChipFieldDisplay = () => {
const {

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx
View File

@ -1,7 +1,7 @@
import { isNonEmptyString } from '@sniptt/guards';
import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
import { OverflowingTextWithTooltip } from 'twenty-ui';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
export const FullNameFieldDisplay = () => {
const { fieldValue } = useFullNameFieldDisplay();

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx
View File

@ -1,9 +1,8 @@
import { Tag } from 'twenty-ui';
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
import { useMultiSelectFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useMultiSelectFieldDisplay';
import { MultiSelectDisplay } from '@/ui/field/display/components/MultiSelectDisplay';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { Tag } from 'twenty-ui/components';
export const MultiSelectFieldDisplay = () => {
const { fieldValue, fieldDefinition } = useMultiSelectFieldDisplay();

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx
View File

@ -5,7 +5,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay';
import { useLingui } from '@lingui/react/macro';
import React from 'react';
import { useIcons } from 'twenty-ui';
import { useIcons } from 'twenty-ui/display';
export const PhonesFieldDisplay = () => {
const { fieldValue } = usePhonesFieldDisplay();

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx
View File

@ -1,11 +1,11 @@
import { ActorFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ActorFieldDisplay';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/ActorFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx
View File

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { AddressFieldDisplay } from '@/object-record/record-field/meta-types/display/components/AddressFieldDisplay';
import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/AddressFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/display/components/BooleanFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/BooleanFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@ -10,6 +9,7 @@ import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/ChipFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/CurrencyFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { CurrencyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/CurrencyFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateFieldDisplay.perf.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
@ -8,6 +7,7 @@ import { UserContext } from '@/users/contexts/UserContext';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/DateFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/DateTimeFieldDisplay.perf.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
@ -8,6 +7,7 @@ import { UserContext } from '@/users/contexts/UserContext';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/DateTimeFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/EmailsFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { EmailsFieldDisplay } from '@/object-record/record-field/meta-types/display/components/EmailsFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/EmailsFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/FullNameFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { FullNameFieldDisplay } from '@/object-record/record-field/meta-types/display/components/FullNameFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/FullNameFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx
View File

@ -1,6 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { useContext, useEffect } from 'react';
import { ComponentDecorator } from 'twenty-ui';
import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext';
import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider';
@ -8,6 +7,7 @@ import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/displ
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const FieldFocusEffect = () => {
const { setIsFocused } = useContext(FieldFocusContext);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx
View File

@ -1,6 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { useContext, useEffect } from 'react';
import { ComponentDecorator } from 'twenty-ui';
import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext';
import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider';
@ -8,6 +7,7 @@ import { MultiSelectFieldDisplay } from '@/object-record/record-field/meta-types
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const FieldFocusEffect = () => {
const { setIsFocused } = useContext(FieldFocusContext);

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/NumberFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { NumberFieldDisplay } from '@/object-record/record-field/meta-types/display/components/NumberFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/NumberFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
@ -7,6 +6,7 @@ import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/PhonesFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/RatingFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
View File

@ -1,7 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { ComponentDecorator } from 'twenty-ui';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay';
@ -21,6 +20,7 @@ import {
otherPersonMock,
relationFromManyFieldDisplayMock,
} from './relationFromManyFieldDisplayMock';
import { ComponentDecorator } from 'twenty-ui/testing';
const RelationFieldValueSetterEffect = () => {
const setEntity = useSetRecoilState(

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationToOneFieldDisplay.perf.stories.tsx
View File

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { RelationToOneFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationToOneFieldDisplay';
import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/RelationFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { SelectFieldDisplay } from '@/object-record/record-field/meta-types/display/components/SelectFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/SelectFieldDisplay',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/TextFieldDisplay.perf.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { TextFieldDisplay } from '@/object-record/record-field/meta-types/display/components/TextFieldDisplay';
import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Data/Field/Display/TextFieldDisplay',

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx
View File

@ -1,11 +1,10 @@
import { Nullable } from 'twenty-ui';
import { useDateField } from '@/object-record/record-field/meta-types/hooks/useDateField';
import { DateInput } from '@/ui/field/input/components/DateInput';
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { isDefined } from 'twenty-shared/utils';
import { usePersistField } from '../../../hooks/usePersistField';
import { Nullable } from 'twenty-ui/utilities';
type FieldInputEvent = (persist: () => void) => void;

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx
View File

@ -1,5 +1,3 @@
import { Nullable } from 'twenty-ui';
import { DateInput } from '@/ui/field/input/components/DateInput';
import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/components/NumberFieldInput';
@ -7,6 +5,7 @@ import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/c
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { usePersistField } from '../../../hooks/usePersistField';
import { useDateTimeField } from '../../hooks/useDateTimeField';
import { Nullable } from 'twenty-ui/utilities';
export type DateTimeFieldInputProps = {
onClickOutside?: FieldInputClickOutsideEvent;

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
View File

@ -1,10 +1,10 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
const StyledInput = styled.input<{
withRightComponent?: boolean;

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
View File

@ -1,6 +1,5 @@
import React, { useRef, useState } from 'react';
import { Key } from 'ts-key-enum';
import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
import {
MultiItemBaseInput,
@ -17,6 +16,9 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
import { moveArrayItem } from '~/utils/array/moveArrayItem';
import { toSpliced } from '~/utils/array/toSpliced';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { IconCheck, IconPlus } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
type MultiItemFieldInputProps<T> = {
items: T[];

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
View File

@ -7,8 +7,8 @@ import {
IconBookmarkPlus,
IconPencil,
IconTrash,
MenuItem,
} from 'twenty-ui';
} from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
type MultiItemFieldMenuItemProps<T> = {
dropdownId: string;

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
View File

@ -4,7 +4,6 @@ import styled from '@emotion/styled';
import { E164Number, parsePhoneNumber } from 'libphonenumber-js';
import ReactPhoneNumberInput from 'react-phone-number-input';
import 'react-phone-number-input/style.css';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { MultiItemFieldInput } from './MultiItemFieldInput';
@ -14,6 +13,7 @@ import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal
import { css } from '@emotion/react';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
export const DEFAULT_PHONE_CALLING_CODE = '1';

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx
View File

@ -10,7 +10,7 @@ import { SingleRecordPicker } from '@/object-record/record-picker/single-record-
import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { IconForbid } from 'twenty-ui';
import { IconForbid } from 'twenty-ui/display';
export type RelationToOneFieldInputProps = {
onSubmit?: FieldInputEvent;

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
View File

@ -8,7 +8,8 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useState } from 'react';
import { Key } from 'ts-key-enum';
import { isDefined } from 'twenty-shared/utils';
import { SelectOption } from 'twenty-ui';
import { SelectOption } from 'twenty-ui/input';
type SelectFieldInputProps = {
onSubmit?: FieldInputEvent;
onCancel?: () => void;

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx
View File

@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { MultiItemBaseInput } from '../MultiItemBaseInput';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof MultiItemBaseInput> = {
title: 'UI/Data/Field/Input/BaseFieldInput',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
View File

@ -21,11 +21,11 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { FieldMetadataType } from 'twenty-shared/types';
import { getCanvasElementForDropdownTesting } from 'twenty-ui';
import {
RelationToOneFieldInput,
RelationToOneFieldInputProps,
} from '../RelationToOneFieldInput';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
const RelationWorkspaceSetterEffect = () => {
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);

3
packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const lastShowPageRecordIdState = createState<string | null>({
key: 'lastShowPageRecordIdState',
defaultValue: null,

3
packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts
View File

@ -1,8 +1,7 @@
import { IconComponent } from 'twenty-ui';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { FieldMetadata } from './FieldMetadata';
import { IconComponent } from 'twenty-ui/display';
export type FieldDefinition<T extends FieldMetadata> = {
fieldMetadataId: string;

3
packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
View File

@ -1,5 +1,3 @@
import { ThemeColor } from 'twenty-ui';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { ZodHelperLiteral } from '@/object-record/record-field/types/ZodHelperLiteral';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
@ -7,6 +5,7 @@ import * as z from 'zod';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { CurrencyCode } from './CurrencyCode';
import { ConnectedAccountProvider } from 'twenty-shared/types';
import { ThemeColor } from 'twenty-ui/theme';
export type FieldUuidMetadata = {
objectMetadataNameSingular?: string;

3
packages/twenty-front/src/modules/object-record/record-field/types/RecordChipData.ts
View File

@ -1,5 +1,4 @@
import { AvatarType } from 'twenty-ui';
import { AvatarType } from 'twenty-ui/display';
export type RecordChipData = {
recordId: string;
name: string;

3
packages/twenty-front/src/modules/object-record/record-field/utils/getFieldButtonIcon.ts
View File

@ -1,5 +1,3 @@
import { IconComponent, IconPencil } from 'twenty-ui';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
@ -11,6 +9,7 @@ import { isFieldRelation } from '@/object-record/record-field/types/guards/isFie
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { isFieldArray } from '@/object-record/record-field/types/guards/isFieldArray';
import { IconComponent, IconPencil } from 'twenty-ui/display';
export const getFieldButtonIcon = (
fieldDefinition:

5
packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx
View File

@ -1,5 +1,3 @@
import { IconEye, IconEyeOff, MenuItemDraggable, Tag } from 'twenty-ui';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import {
RecordGroupDefinition,
@ -7,6 +5,9 @@ import {
} from '@/object-record/record-group/types/RecordGroupDefinition';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { IconEye, IconEyeOff } from 'twenty-ui/display';
import { MenuItemDraggable } from 'twenty-ui/navigation';
import { Tag } from 'twenty-ui/components';
type RecordGroupMenuItemDraggableProps = {
recordGroupId: string;

2
packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts
View File

@ -13,9 +13,9 @@ import { useCallback, useContext } from 'react';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { IconEyeOff, IconSettings } from 'twenty-ui';
import { SettingPermissionType } from '~/generated/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { IconEyeOff, IconSettings } from 'twenty-ui/display';
type UseRecordGroupActionsParams = {
viewType: ViewType;

3
packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupActions.ts
View File

@ -1,5 +1,4 @@
import { IconComponent } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
export type RecordGroupAction = {
id: string;
label: string;

3
packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupDefinition.ts
View File

@ -1,5 +1,4 @@
import { ThemeColor } from 'twenty-ui';
import { ThemeColor } from 'twenty-ui/theme';
export const enum RecordGroupDefinitionType {
Value = 'value',
NoValue = 'no-value',

Some files were not shown because too many files have changed in this diff Show More