From 6264d509bd8b469f3a10b1f1e6e4c9b3fef44995 Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Thu, 7 Nov 2024 16:51:39 +0000 Subject: [PATCH] Migrate to twenty-ui - navigation/menu-item (#8213) This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536). --- ### Description Migrate all menu items components to twenty ui and update imports. ```typescript MenuItem MenuItemAvata MenuItemCommand MenuItemCommandHotKeys MenuItemDraggable MenuItemMultiSelect MenuItemMultiSelectAvatar MenuItemMultiSelectTag MenuItemNavigate MenuItemSelect MenuItemSelectAvatar MenuItemSelectColor MenuItemSelectTag MenuItemSuggestion MenuItemToggle ``` \ Also migrate all other dependent components and utilities like `Checkbox` & `Toggle`\ \ Fixes twentyhq/private-issues#82 --------- Co-authored-by: gitstart-twenty Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Co-authored-by: Lucas Bordeau --- .../RecordIndexActionMenuDropdown.tsx | 2 +- .../RecordShowActionMenuBarEntry.tsx | 5 +- .../RecordShowActionMenuBar.stories.tsx | 2 +- .../action-menu/types/ActionMenuEntry.ts | 4 +- ...ubscriberDropdownAddSubscriberMenuItem.tsx | 3 +- ...MessageThreadSubscribersDropdownButton.tsx | 4 +- .../files/components/AttachmentDropdown.tsx | 2 +- .../components/CommandMenuItem.tsx | 3 +- .../AdvancedFilterAddFilterRuleSelect.tsx | 9 ++- .../AdvancedFilterRuleOptionsDropdown.tsx | 3 +- .../AdvancedFilterViewFilterOperandSelect.tsx | 3 +- .../components/AdvancedFilterButton.tsx | 9 ++- ...pdownFilterSelectCompositeFieldSubMenu.tsx | 9 ++- ...jectFilterDropdownFilterSelectMenuItem.tsx | 3 +- .../ObjectFilterDropdownOperandSelect.tsx | 2 +- .../ObjectFilterDropdownOptionSelect.tsx | 4 +- ...lterDropdownRecordRemoveFilterMenuItem.tsx | 3 +- .../components/ObjectSortDropdownButton.tsx | 3 +- .../RecordBoardColumnDropdownMenu.tsx | 2 +- .../input/components/MultiItemFieldInput.tsx | 3 +- .../components/MultiItemFieldMenuItem.tsx | 2 +- .../components/MultiSelectFieldInput.tsx | 2 +- .../RecordIndexPageKanbanAddMenuItem.tsx | 3 +- .../RecordIndexOptionsDropdownContent.tsx | 6 +- .../RecordDetailRelationRecordsListItem.tsx | 2 +- .../RecordTableColumnHeadDropdownMenu.tsx | 2 +- .../RecordTableHeaderPlusButtonContent.tsx | 3 +- .../MultipleObjectRecordSelectItem.tsx | 3 +- .../components/SelectableMenuItemSelect.tsx | 3 +- .../SingleEntitySelectMenuItems.tsx | 4 +- .../components/MultipleSelectDropdown.tsx | 4 +- ...SettingsAccountsCalendarChannelDetails.tsx | 2 +- .../SettingsAccountsRowDropdownMenu.tsx | 2 +- .../SettingsAccountsToggleSettingCard.tsx | 60 +++++++++++++++++++ ...ngsDataModelNewFieldBreadcrumbDropDown.tsx | 3 +- ...tingsDataModelFieldSelectFormOptionRow.tsx | 4 +- ...ettingsObjectFieldActiveActionDropdown.tsx | 2 +- ...tingsObjectFieldDisabledActionDropdown.tsx | 2 +- .../components/SettingsObjectSummaryCard.tsx | 2 +- .../SettingsObjectInactiveMenuDropDown.tsx | 2 +- ...tegrationDatabaseConnectionSummaryCard.tsx | 2 +- .../SettingsSecurityOptionsList.tsx | 2 +- .../SettingsSecuritySSORowDropdownMenu.tsx | 2 +- ...FunctionTabEnvironmentVariableTableRow.tsx | 2 +- .../components/MatchColumnSelect.tsx | 8 +-- .../support/components/SupportDropdown.tsx | 3 +- .../modules/ui/input/components/Select.tsx | 3 +- .../ui/input/components/SelectInput.tsx | 3 +- .../CurrencyPickerDropdownSelect.tsx | 3 +- .../date/components/InternalDatePicker.tsx | 9 ++- .../PhoneCountryPickerDropdownSelect.tsx | 5 +- .../editor/components/CustomSlashMenu.tsx | 3 +- .../components/CreateNewButton.tsx | 3 +- .../__stories__/DraggableItem.stories.tsx | 3 +- .../__stories__/DraggableList.stories.tsx | 8 +-- .../__stories__/DropdownMenu.stories.tsx | 12 ++-- .../components/ShowPageAddButton.tsx | 9 ++- .../components/ShowPageMoreButton.tsx | 2 +- .../components/MenuItemWithOptionDropdown.tsx | 13 ++-- .../MultiWorkspaceDropdownButton.tsx | 3 +- .../components/UpdateViewButtonGroup.tsx | 9 ++- .../ViewFieldsVisibilityDropdownSection.tsx | 2 +- .../ViewGroupsVisibilityDropdownSection.tsx | 3 +- .../components/ViewPickerListContent.tsx | 4 +- ...RightDrawerWorkflowSelectActionContent.tsx | 2 +- ...DrawerWorkflowSelectTriggerTypeContent.tsx | 2 +- .../SearchVariablesDropdownStepItem.tsx | 3 +- .../SearchVariablesDropdownStepSubItem.tsx | 3 +- packages/twenty-front/tsup.ui.index.tsx | 10 ---- .../src/input/components/Checkbox.tsx | 2 +- packages/twenty-ui/src/navigation/index.ts | 18 ++++++ .../menu-item/components/MenuItem.tsx | 9 +-- .../menu-item/components/MenuItemAvatar.tsx | 19 ++---- .../menu-item/components/MenuItemCommand.tsx | 5 +- .../components/MenuItemCommandHotKeys.tsx | 0 .../components/MenuItemDraggable.tsx | 6 +- .../components/MenuItemMultiSelect.tsx | 7 ++- .../components/MenuItemMultiSelectAvatar.tsx | 3 +- .../components/MenuItemMultiSelectTag.tsx | 11 +--- .../menu-item/components/MenuItemNavigate.tsx | 2 +- .../menu-item/components/MenuItemSelect.tsx | 2 +- .../components/MenuItemSelectAvatar.tsx | 4 +- .../components/MenuItemSelectColor.tsx | 8 +-- .../components/MenuItemSelectTag.tsx | 3 +- .../components/MenuItemSuggestion.tsx | 3 +- .../menu-item/components/MenuItemToggle.tsx | 4 +- .../__stories__/MenuItem.stories.tsx | 6 +- .../__stories__/MenuItemCommand.stories.tsx | 6 +- .../__stories__/MenuItemDraggable.stories.tsx | 7 +-- .../MenuItemMultiSelect.stories.tsx | 6 +- .../MenuItemMultiSelectAvatar.stories.tsx | 13 ++-- .../__stories__/MenuItemNavigate.stories.tsx | 9 +-- .../__stories__/MenuItemSelect.stories.tsx | 6 +- .../MenuItemSelectAvatar.stories.tsx | 14 ++--- .../MenuItemSelectColor.stories.tsx | 9 ++- .../__stories__/MenuItemSelectTag.stories.tsx | 6 +- .../__stories__/MenuItemToggle.stories.tsx | 6 +- .../navigation/menu-item/components/index.ts | 15 +++++ .../src/navigation/menu-item/index.ts | 4 ++ .../components/MenuItemLeftContent.tsx | 4 +- .../components/StyledMenuItemBase.tsx | 2 +- .../menu-item/types/MenuItemAccent.ts | 0 packages/twenty-ui/src/utilities/index.ts | 1 + .../hooks/__tests__/isMobile.test.tsx | 10 ++++ .../utilities/responsive/hooks/useIsMobile.ts | 5 ++ .../twenty-ui/navigation/menu-item.mdx | 20 +++---- 106 files changed, 326 insertions(+), 256 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItem.tsx (91%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemAvatar.tsx (86%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemCommand.tsx (96%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemCommandHotKeys.tsx (100%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemDraggable.tsx (94%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemMultiSelect.tsx (82%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx (92%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemMultiSelectTag.tsx (85%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemNavigate.tsx (93%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemSelect.tsx (96%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemSelectAvatar.tsx (94%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemSelectColor.tsx (92%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemSelectTag.tsx (91%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemSuggestion.tsx (95%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/MenuItemToggle.tsx (90%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItem.stories.tsx (97%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx (97%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx (97%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx (96%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx (90%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx (96%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx (96%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx (90%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx (94%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx (97%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx (96%) create mode 100644 packages/twenty-ui/src/navigation/menu-item/components/index.ts create mode 100644 packages/twenty-ui/src/navigation/menu-item/index.ts rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/internals/components/MenuItemLeftContent.tsx (98%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/internals/components/StyledMenuItemBase.tsx (98%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/navigation/menu-item/types/MenuItemAccent.ts (100%) create mode 100644 packages/twenty-ui/src/utilities/responsive/hooks/__tests__/isMobile.test.tsx create mode 100644 packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx index 7bd2b0898531..1a62cab35e7d 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx @@ -10,10 +10,10 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; +import { MenuItem } from 'twenty-ui'; type StyledContainerProps = { position: PositionType; diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx index db751adaadc7..b075565f4186 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx @@ -1,8 +1,7 @@ +import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; -import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry'; -import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent'; +import { MOBILE_VIEWPORT, MenuItemAccent } from 'twenty-ui'; type RecordShowActionMenuBarEntryProps = { entry: ActionMenuEntry; diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx index f2391b558b07..a1f4422b6825 100644 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx @@ -8,13 +8,13 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; -import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent'; import { userEvent, waitFor, within } from '@storybook/test'; import { ComponentDecorator, IconFileExport, IconHeart, IconTrash, + MenuItemAccent, } from 'twenty-ui'; const deleteMock = jest.fn(); diff --git a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts b/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts index 7cef4b2fead8..568bd3a33b83 100644 --- a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts +++ b/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts @@ -1,7 +1,5 @@ import { MouseEvent, ReactNode } from 'react'; -import { IconComponent } from 'twenty-ui'; - -import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent'; +import { IconComponent, MenuItemAccent } from 'twenty-ui'; export type ActionMenuEntry = { type: 'standard' | 'workflow-run'; diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx index b56cdc0809cb..04de8d7184c6 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx @@ -1,9 +1,8 @@ import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; -import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; -import { IconPlus } from 'twenty-ui'; +import { IconPlus, MenuItemAvatar } from 'twenty-ui'; export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({ workspaceMember, diff --git a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx index 7f7c42e7ae26..2fdf1d634fdd 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx @@ -1,5 +1,5 @@ import { offset } from '@floating-ui/react'; -import { IconMinus, IconPlus } from 'twenty-ui'; +import { IconMinus, IconPlus, MenuItem, MenuItemAvatar } from 'twenty-ui'; import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber'; import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip'; @@ -10,8 +10,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar'; import { useState } from 'react'; export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID = diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx index a52aa4c910bd..128b4a2057de 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx @@ -4,13 +4,13 @@ import { IconPencil, IconTrash, LightIconButton, + MenuItem, } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type AttachmentDropdownProps = { onDownload: () => void; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx index e275f6c5c5d9..0895015e222c 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx @@ -1,9 +1,8 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useRecoilValue } from 'recoil'; -import { IconArrowUpRight, IconComponent } from 'twenty-ui'; +import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand'; import { useCommandMenu } from '../hooks/useCommandMenu'; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx index 2e82b72fc859..6dc68a8cd6dc 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx @@ -4,7 +4,6 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr 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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; @@ -13,7 +12,13 @@ import { availableFilterDefinitionsComponentState } from '@/views/states/availab import { ViewFilterGroup } from '@/views/types/ViewFilterGroup'; import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator'; import { useCallback } from 'react'; -import { IconLibraryPlus, IconPlus, isDefined, LightButton } from 'twenty-ui'; +import { + IconLibraryPlus, + IconPlus, + isDefined, + LightButton, + MenuItem, +} from 'twenty-ui'; import { v4 } from 'uuid'; type AdvancedFilterAddFilterRuleSelectProps = { diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx index d77747b87e27..f4b8af642aed 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx @@ -4,10 +4,9 @@ import { useCurrentViewViewFilterGroup } from '@/object-record/advanced-filter/h import { useDeleteCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useDeleteCombinedViewFilterGroup'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters'; -import { isDefined } from 'twenty-ui'; +import { isDefined, MenuItem } from 'twenty-ui'; type AdvancedFilterRuleOptionsDropdownProps = | { diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx index e34dd713fac6..17ddc5c644f5 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx @@ -6,12 +6,11 @@ import { SelectControl } from '@/ui/input/components/SelectControl'; 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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import styled from '@emotion/styled'; -import { isDefined } from 'twenty-ui'; +import { isDefined, MenuItem } from 'twenty-ui'; const StyledContainer = styled.div` flex: 1; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx index ee96509bbc26..542aed2e14db 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx @@ -3,8 +3,6 @@ import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filte import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; -import { StyledMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; @@ -12,7 +10,12 @@ import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedVie import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator'; import styled from '@emotion/styled'; -import { IconFilter, Pill } from 'twenty-ui'; +import { + IconFilter, + MenuItemLeftContent, + Pill, + StyledMenuItemBase, +} from 'twenty-ui'; import { v4 } from 'uuid'; export const StyledContainer = styled.div` diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx index adeaaa1cd792..c364bb90eb6a 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx @@ -12,11 +12,16 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsCompositeFieldTypeConfigs'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useState } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconApps, IconChevronLeft, isDefined, useIcons } from 'twenty-ui'; +import { + IconApps, + IconChevronLeft, + isDefined, + MenuItem, + useIcons, +} from 'twenty-ui'; export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => { const [searchText] = useState(''); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx index b6025cdddb15..84f9addb447f 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx @@ -13,11 +13,10 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilValue } from 'recoil'; -import { useIcons } from 'twenty-ui'; +import { MenuItemSelect, useIcons } from 'twenty-ui'; export type ObjectFilterDropdownFilterSelectMenuItemProps = { filterDefinition: FilterDefinition; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx index b33fcbc162e3..ec90ebe931a1 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx @@ -3,8 +3,8 @@ import { v4 } from 'uuid'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; +import { MenuItem } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue'; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx index 6bac9e530253..13a32ca4b2fb 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx @@ -13,10 +13,10 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemMultiSelect } from '@/ui/navigation/menu-item/components/MenuItemMultiSelect'; + import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; +import { MenuItem, MenuItemMultiSelect } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; export const EMPTY_FILTER_VALUE = ''; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx index 74f3ed364fa3..7251fab80788 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx @@ -1,9 +1,8 @@ -import { IconFilterOff } from 'twenty-ui'; +import { IconFilterOff, MenuItem } from 'twenty-ui'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => { const { emptyFilterButKeepDefinition } = useFilterDropdown(); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index d6c04c398fe3..f069f854a243 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronDown, useIcons } from 'twenty-ui'; +import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui'; import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId'; import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown'; @@ -14,7 +14,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx index ec0152f8871c..bfbfb7e9d0e1 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx @@ -4,8 +4,8 @@ import { useCallback, useRef } from 'react'; import { useRecordGroupActions } from '@/object-record/record-group/hooks/useRecordGroupActions'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { MenuItem } from 'twenty-ui'; const StyledMenuContainer = styled.div` position: absolute; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx index 5cea5ffe742c..dd383e3477f5 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import React, { useRef, useState } from 'react'; import { Key } from 'ts-key-enum'; -import { IconCheck, IconPlus, LightIconButton } from 'twenty-ui'; +import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui'; import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; @@ -11,7 +11,6 @@ import { } from '@/ui/layout/dropdown/components/DropdownMenuInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { FieldMetadataType } from '~/generated-metadata/graphql'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx index 150efe8822ed..b980ff0bcdc3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx @@ -1,6 +1,5 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown'; import { useState } from 'react'; import { @@ -8,6 +7,7 @@ import { IconBookmarkPlus, IconPencil, IconTrash, + MenuItem, } from 'twenty-ui'; type MultiItemFieldMenuItemProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx index 7ebe1951edb6..acebdcda987d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx @@ -12,9 +12,9 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItemMultiSelectTag } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectTag'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { MenuItemMultiSelectTag } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly'; diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx index facb36608ec4..effa5ce3a49c 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx @@ -1,8 +1,7 @@ import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition'; import { useRecordIndexPageKanbanAddMenuItem } from '@/object-record/record-index/hooks/useRecordIndexPageKanbanAddMenuItem'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import styled from '@emotion/styled'; -import { Tag } from 'twenty-ui'; +import { MenuItem, Tag } from 'twenty-ui'; const StyledMenuItem = styled(MenuItem)` width: calc(100% - 2 * var(--horizontal-padding)); diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 67cfa73d5355..1ed208d4ed53 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -9,6 +9,9 @@ import { IconRotate2, IconSettings, IconTag, + MenuItem, + MenuItemNavigate, + MenuItemToggle, UndecoratedLink, useIcons, } from 'twenty-ui'; @@ -36,9 +39,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate'; -import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx index b1f16b08cd19..899c0ddd39a6 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx @@ -10,6 +10,7 @@ import { IconTrash, IconUnlink, LightIconButton, + MenuItem, } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; @@ -38,7 +39,6 @@ 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 { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; const StyledListItem = styled(RecordDetailRecordsListItem)<{ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx index ca64ae1eccb6..124d9a388ef7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx @@ -4,13 +4,13 @@ import { IconEyeOff, IconFilter, IconSortDescending, + MenuItem, } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState'; import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx index 650d574aec2c..6ffb331a05d5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx @@ -1,7 +1,7 @@ import { useCallback, useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; -import { IconSettings, UndecoratedLink, useIcons } from 'twenty-ui'; +import { IconSettings, MenuItem, UndecoratedLink, useIcons } from 'twenty-ui'; import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; @@ -12,7 +12,6 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx index 0f2356e63f72..dbc0302b9c1e 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx @@ -1,13 +1,12 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { Avatar } from 'twenty-ui'; +import { Avatar, MenuItemMultiSelectAvatar } from 'twenty-ui'; import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates'; import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId'; import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext'; import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx index eef1523d1505..986a570e879f 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx @@ -1,11 +1,10 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { Avatar } from 'twenty-ui'; +import { Avatar, MenuItemSelectAvatar } from 'twenty-ui'; import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect'; import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar'; type SelectableMenuItemSelectProps = { entity: EntityForSelect; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx index 50db8588c6c9..8367ca8ce781 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx @@ -2,7 +2,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { Fragment, useRef } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconComponent, IconPlus } from 'twenty-ui'; +import { IconComponent, IconPlus, MenuItem, MenuItemSelect } from 'twenty-ui'; import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect'; import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList'; @@ -12,8 +12,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx b/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx index fba130110ddc..3a96cc523630 100644 --- a/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { AvatarChip } from 'twenty-ui'; +import { AvatarChip, MenuItem, MenuItemMultiSelectAvatar } from 'twenty-ui'; import { SelectableItem } from '@/object-record/select/types/SelectableItem'; import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; @@ -11,8 +11,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; const StyledAvatarChip = styled(AvatarChip)` diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx index 5d0fab05d65d..7232d712db48 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx @@ -5,7 +5,7 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; -import { H2Title, Toggle, Card } from 'twenty-ui'; +import { Card, H2Title, Toggle } from 'twenty-ui'; import { CalendarChannelVisibility } from '~/generated-metadata/graphql'; const StyledDetailsContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx index 743d191a6d41..de3da46619df 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx @@ -6,6 +6,7 @@ import { IconRefresh, IconTrash, LightIconButton, + MenuItem, } from 'twenty-ui'; import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; @@ -16,7 +17,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsAccountsRowDropdownMenuProps = { account: ConnectedAccount; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx new file mode 100644 index 000000000000..d5d5cfc9022a --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx @@ -0,0 +1,60 @@ +import styled from '@emotion/styled'; + +import { Card, CardContent, Toggle } from 'twenty-ui'; + +type Parameter = { + value: boolean; + title: string; + description: string; + onToggle: (value: boolean) => void; +}; + +type SettingsAccountsToggleSettingCardProps = { + parameters: Parameter[]; +}; + +const StyledCardContent = styled(CardContent)` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(4)}; + cursor: pointer; + + &:hover { + background: ${({ theme }) => theme.background.transparent.lighter}; + } +`; + +const StyledTitle = styled.div` + color: ${({ theme }) => theme.font.color.primary}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + margin-bottom: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledDescription = styled.div` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; +`; + +const StyledToggle = styled(Toggle)` + margin-left: auto; +`; + +export const SettingsAccountsToggleSettingCard = ({ + parameters, +}: SettingsAccountsToggleSettingCardProps) => ( + + {parameters.map((parameter, index) => ( + parameter.onToggle(!parameter.value)} + > +
+ {parameter.title} + {parameter.description} +
+ + + ))} + +); diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx index 4bdf2ee8607e..a927dba428c1 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx @@ -3,7 +3,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { @@ -12,7 +11,7 @@ import { useParams, useSearchParams, } from 'react-router-dom'; -import { Button, IconChevronDown, isDefined } from 'twenty-ui'; +import { Button, IconChevronDown, isDefined, MenuItem } from 'twenty-ui'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx index e41c012c1dce..fd169354b58c 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx @@ -10,6 +10,8 @@ import { IconX, LightIconButton, MAIN_COLOR_NAMES, + MenuItem, + MenuItemSelectColor, } from 'twenty-ui'; import { v4 } from 'uuid'; @@ -22,8 +24,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor'; import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; import { AnimatePresence, motion } from 'framer-motion'; import { useRecoilValue } from 'recoil'; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx index 685198769171..4391d783d4b5 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx @@ -5,13 +5,13 @@ import { IconPencil, IconTextSize, LightIconButton, + MenuItem, } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectFieldActiveActionDropdownProps = { isCustomField?: boolean; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx index 0dcd5be86cf8..fc5384fbec87 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx @@ -5,13 +5,13 @@ import { IconPencil, IconTrash, LightIconButton, + MenuItem, } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { FieldMetadataType } from '~/generated-metadata/graphql'; type SettingsObjectFieldInactiveActionDropdownProps = { diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx index 6a0eb4823854..f818cded810f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx @@ -5,6 +5,7 @@ import { IconDotsVertical, IconPencil, LightIconButton, + MenuItem, useIcons, } from 'twenty-ui'; @@ -18,7 +19,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectSummaryCardProps = { objectMetadataItem: ObjectMetadataItem; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx index 7761b11b79b3..ab99c9a61c43 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx @@ -3,13 +3,13 @@ import { IconDotsVertical, IconTrash, LightIconButton, + MenuItem, } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectInactiveMenuDropDownProps = { isCustomObject: boolean; diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx index b5d2177904d5..8d0b1bbc1f97 100644 --- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx @@ -3,13 +3,13 @@ import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/inte import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import styled from '@emotion/styled'; import { IconDotsVertical, IconPencil, IconTrash, LightIconButton, + MenuItem, UndecoratedLink, } from 'twenty-ui'; diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx index 73c8aa42d250..f7b9dc2adea5 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx @@ -4,7 +4,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; -import { IconLink, Toggle, Card } from 'twenty-ui'; +import { Card, IconLink, Toggle } from 'twenty-ui'; import { useUpdateWorkspaceMutation } from '~/generated/graphql'; const StyledToggle = styled(Toggle)` diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx index 3212c6dec089..55b43525d122 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx @@ -5,6 +5,7 @@ import { IconDotsVertical, IconTrash, LightIconButton, + MenuItem, } from 'twenty-ui'; import { useDeleteSSOIdentityProvider } from '@/settings/security/hooks/useDeleteSSOIdentityProvider'; @@ -16,7 +17,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { UnwrapRecoilValue } from 'recoil'; import { SsoIdentityProviderStatus } from '~/generated/graphql'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx index eb8e380b7cb1..e39a9c38bc70 100644 --- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx @@ -6,7 +6,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import styled from '@emotion/styled'; import { useState } from 'react'; import { @@ -16,6 +15,7 @@ import { IconTrash, IconX, LightIconButton, + MenuItem, OverflowingTextWithTooltip, } from 'twenty-ui'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx index 9908d66a94e9..217ab31d54f6 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx @@ -1,5 +1,3 @@ -import React, { useCallback, useRef, useState } from 'react'; -import { createPortal } from 'react-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { @@ -9,7 +7,9 @@ import { size, useFloating, } from '@floating-ui/react'; -import { AppTooltip } from 'twenty-ui'; +import React, { useCallback, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { AppTooltip, MenuItem, MenuItemSelect } from 'twenty-ui'; import { ReadonlyDeep } from 'type-fest'; import { useDebouncedCallback } from 'use-debounce'; @@ -18,8 +18,6 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useUpdateEffect } from '~/hooks/useUpdateEffect'; diff --git a/packages/twenty-front/src/modules/support/components/SupportDropdown.tsx b/packages/twenty-front/src/modules/support/components/SupportDropdown.tsx index ff2399678f08..ee7b6886e9a2 100644 --- a/packages/twenty-front/src/modules/support/components/SupportDropdown.tsx +++ b/packages/twenty-front/src/modules/support/components/SupportDropdown.tsx @@ -3,8 +3,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { IconHelpCircle, IconMessage } from 'twenty-ui'; +import { IconHelpCircle, IconMessage, MenuItem } from 'twenty-ui'; export const SupportDropdown = () => { const dropdownId = `support-field-active-action-dropdown`; diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 54c9b1a79852..bbf53e6688bd 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -1,13 +1,12 @@ import styled from '@emotion/styled'; import { MouseEvent, useMemo, useRef, useState } from 'react'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent, MenuItem } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { SelectControl } from '@/ui/input/components/SelectControl'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx index 67c9ffa036b0..bc6faecfdea7 100644 --- a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx @@ -6,7 +6,6 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; -import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useTheme } from '@emotion/react'; @@ -20,7 +19,7 @@ import { } from '@floating-ui/react'; import { useEffect, useMemo, useRef, useState } from 'react'; import { Key } from 'ts-key-enum'; -import { TagColor, isDefined } from 'twenty-ui'; +import { MenuItemSelectTag, TagColor, isDefined } from 'twenty-ui'; const StyledRelationPickerContainer = styled.div` left: -1px; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx index 7dfeaebe7a56..0762391bfae4 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx @@ -4,9 +4,8 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar'; +import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui'; import { Currency } from './CurrencyPickerDropdownButton'; export const CurrencyPickerDropdownSelect = ({ diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx index 77475ce63e13..e5f16a69d91a 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx @@ -2,12 +2,15 @@ import styled from '@emotion/styled'; import { DateTime } from 'luxon'; import ReactDatePicker from 'react-datepicker'; import { Key } from 'ts-key-enum'; -import { IconCalendarX, OVERLAY_BACKGROUND } from 'twenty-ui'; +import { + IconCalendarX, + MenuItemLeftContent, + OVERLAY_BACKGROUND, + StyledHoverableMenuItemBase, +} from 'twenty-ui'; import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; -import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase'; import { isDefined } from '~/utils/isDefined'; import { AbsoluteDatePickerHeader } from '@/ui/input/components/internal/date/components/AbsoluteDatePickerHeader'; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx index d5f46a71a2c7..5f1bf9618419 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx @@ -1,15 +1,14 @@ -import { useMemo, useState } from 'react'; import styled from '@emotion/styled'; +import { useMemo, useState } from 'react'; import { Country } from '@/ui/input/components/internal/types/Country'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar'; import 'react-phone-number-input/style.css'; +import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui'; const StyledIconContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx index 6a7fd920e61a..7850cff2e521 100644 --- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx +++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx @@ -1,10 +1,9 @@ import { SuggestionMenuProps } from '@blocknote/react'; import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent, MenuItemSuggestion } from 'twenty-ui'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { MenuItemSuggestion } from '@/ui/navigation/menu-item/components/MenuItemSuggestion'; export type SuggestionItem = { title: string; diff --git a/packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx b/packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx index 9cdade90315f..378ed8a875d4 100644 --- a/packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx @@ -1,7 +1,6 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; - -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; +import { MenuItem } from 'twenty-ui'; const StyledCreateNewButton = styled(MenuItem)<{ hovered?: boolean }>` ${({ hovered, theme }) => diff --git a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx index 810be399c972..89b0e982f2a1 100644 --- a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx @@ -1,9 +1,8 @@ import { DragDropContext, Droppable } from '@hello-pangea/dnd'; import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator, IconBell } from 'twenty-ui'; +import { ComponentDecorator, IconBell, MenuItemDraggable } from 'twenty-ui'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; -import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable'; const meta: Meta = { title: 'UI/Layout/DraggableList/DraggableItem', diff --git a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx index 813481958f54..dc55480af67a 100644 --- a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx @@ -1,10 +1,8 @@ -import { action } from '@storybook/addon-actions'; -import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator, IconBell } from 'twenty-ui'; - import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; -import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable'; +import { action } from '@storybook/addon-actions'; +import { Meta, StoryObj } from '@storybook/react'; +import { ComponentDecorator, IconBell, MenuItemDraggable } from 'twenty-ui'; const meta: Meta = { title: 'UI/Layout/DraggableList/DraggableList', diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx index 73b1c068ad93..142608390b89 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -3,12 +3,16 @@ import { Decorator, Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, waitFor, within } from '@storybook/test'; import { PlayFunction } from '@storybook/types'; import { useState } from 'react'; -import { Avatar, Button, ComponentDecorator } from 'twenty-ui'; +import { + Avatar, + Button, + ComponentDecorator, + MenuItem, + MenuItemMultiSelectAvatar, + MenuItemSelectAvatar, +} from 'twenty-ui'; import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar'; -import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar'; import { Dropdown } from '../Dropdown'; import { DropdownMenuHeader } from '../DropdownMenuHeader'; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx index eb0373618ae5..2f4bae71a673 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx @@ -1,5 +1,11 @@ import styled from '@emotion/styled'; -import { IconButton, IconCheckbox, IconNotes, IconPlus } from 'twenty-ui'; +import { + IconButton, + IconCheckbox, + IconNotes, + IconPlus, + MenuItem, +} from 'twenty-ui'; import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; @@ -7,7 +13,6 @@ import { PageHotkeyScope } from '@/types/PageHotkeyScope'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID } from '@/ui/layout/show-page/constants/ShowPageAddButtonDropdownId'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { Dropdown } from '../../dropdown/components/Dropdown'; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx index 8cf27704dc25..9c82c08b685b 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx @@ -6,13 +6,13 @@ import { IconDotsVertical, IconRestore, IconTrash, + MenuItem, } from 'twenty-ui'; import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; import { PageHotkeyScope } from '@/types/PageHotkeyScope'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx index a00ee075f9dc..d1196392f170 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx @@ -1,3 +1,5 @@ +import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope'; +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useTheme } from '@emotion/react'; import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react'; import { @@ -6,16 +8,11 @@ import { IconDotsVertical, LightIconButton, LightIconButtonProps, -} from 'twenty-ui'; - -import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope'; -import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; -import { + MenuItemAccent, + MenuItemLeftContent, StyledHoverableMenuItemBase, StyledMenuItemLeftContent, -} from '../internals/components/StyledMenuItemBase'; -import { MenuItemAccent } from '../types/MenuItemAccent'; +} from 'twenty-ui'; export type MenuItemIconButton = { Wrapper?: FunctionComponent<{ iconButton: ReactElement }>; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx index fd1cc17bd22e..3a03e32f7def 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx @@ -3,7 +3,6 @@ import { Workspaces } from '@/auth/states/workspaces'; 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 { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo'; import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId'; @@ -14,7 +13,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { IconChevronDown } from 'twenty-ui'; +import { IconChevronDown, MenuItemSelectAvatar } from 'twenty-ui'; import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI'; const StyledLogo = styled.div<{ logo: string }>` diff --git a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx index 958e29ff95c6..e9001faf7508 100644 --- a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx +++ b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx @@ -1,10 +1,15 @@ import styled from '@emotion/styled'; -import { Button, ButtonGroup, IconChevronDown, IconPlus } from 'twenty-ui'; +import { + Button, + ButtonGroup, + IconChevronDown, + IconPlus, + MenuItem, +} from 'twenty-ui'; 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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index d8ba50b090b7..15f3caa60b54 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -10,6 +10,7 @@ import { IconEye, IconEyeOff, IconInfoCircle, + MenuItemDraggable, useIcons, } from 'twenty-ui'; @@ -19,7 +20,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader'; -import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx index c7040f9ffea3..795639f51c43 100644 --- a/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx @@ -4,7 +4,7 @@ import { ResponderProvided, } from '@hello-pangea/dnd'; import { useRef } from 'react'; -import { IconEye, IconEyeOff, Tag } from 'twenty-ui'; +import { IconEye, IconEyeOff, MenuItemDraggable, Tag } from 'twenty-ui'; import { RecordGroupDefinition, @@ -14,7 +14,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader'; -import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable'; import { isDefined } from '~/utils/isDefined'; type ViewGroupsVisibilityDropdownSectionProps = { diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx index f63cdc10d5e9..00200448860d 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx @@ -6,6 +6,8 @@ import { IconPencil, IconPlus, LightIconButtonAccent, + MenuItem, + MenuItemDraggable, useIcons, } from 'twenty-ui'; @@ -14,8 +16,6 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useChangeView } from '@/views/hooks/useChangeView'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx index c3ac8483c7c1..0d13a0b394f7 100644 --- a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx +++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx @@ -1,8 +1,8 @@ -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { ACTIONS } from '@/workflow/constants/Actions'; import { useCreateStep } from '@/workflow/hooks/useCreateStep'; import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow'; import styled from '@emotion/styled'; +import { MenuItem } from 'twenty-ui'; const StyledActionListContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx index daf169c275a1..abe47dd1ebea 100644 --- a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx +++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx @@ -1,7 +1,6 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages'; -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId'; import { TRIGGER_TYPES } from '@/workflow/constants/TriggerTypes'; import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger'; @@ -10,6 +9,7 @@ import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow'; import { getTriggerDefaultDefinition } from '@/workflow/utils/getTriggerDefaultDefinition'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; +import { MenuItem } from 'twenty-ui'; const StyledActionListContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepItem.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepItem.tsx index c641f54603b1..2a62fa8cfcab 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepItem.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepItem.tsx @@ -1,6 +1,5 @@ -import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect'; import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema'; +import { MenuItem, MenuItemSelect } from 'twenty-ui'; type SearchVariablesDropdownStepItemProps = { steps: StepOutputSchema[]; diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx index 89b726b10787..6c71aca80113 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx @@ -1,9 +1,8 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; -import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect'; import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema'; import { isObject } from '@sniptt/guards'; import { useState } from 'react'; -import { IconChevronLeft } from 'twenty-ui'; +import { IconChevronLeft, MenuItemSelect } from 'twenty-ui'; type SearchVariablesDropdownStepSubItemProps = { step: StepOutputSchema; diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx index 8a5968cf1848..85c47c03f5cd 100644 --- a/packages/twenty-front/tsup.ui.index.tsx +++ b/packages/twenty-front/tsup.ui.index.tsx @@ -10,16 +10,6 @@ export * from './src/modules/ui/input/components/Select'; export * from './src/modules/ui/input/components/TextArea'; export * from './src/modules/ui/input/components/TextInput'; export * from './src/modules/ui/input/editor/components/BlockEditor'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItem'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemCommand'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemDraggable'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemNavigate'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor'; -export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle'; export * from './src/modules/ui/navigation/step-bar/components/StepBar'; declare module '@emotion/react' { diff --git a/packages/twenty-ui/src/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx index b8b7ad3f6307..f4842ba1254b 100644 --- a/packages/twenty-ui/src/input/components/Checkbox.tsx +++ b/packages/twenty-ui/src/input/components/Checkbox.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; +import { IconCheck, IconMinus } from '@ui/display'; import * as React from 'react'; -import { IconCheck, IconMinus } from '@ui/display/icon/components/TablerIcons'; export enum CheckboxVariant { Primary = 'primary', diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts index 31e797cd50ae..f4b07da311ba 100644 --- a/packages/twenty-ui/src/navigation/index.ts +++ b/packages/twenty-ui/src/navigation/index.ts @@ -8,5 +8,23 @@ export * from './link/components/SocialLink'; export * from './link/components/UndecoratedLink'; export * from './link/constants/Cal'; export * from './link/constants/GithubLink'; +export * from './menu-item/components/MenuItem'; +export * from './menu-item/components/MenuItemAvatar'; +export * from './menu-item/components/MenuItemCommand'; +export * from './menu-item/components/MenuItemCommandHotKeys'; +export * from './menu-item/components/MenuItemDraggable'; +export * from './menu-item/components/MenuItemMultiSelect'; +export * from './menu-item/components/MenuItemMultiSelectAvatar'; +export * from './menu-item/components/MenuItemMultiSelectTag'; +export * from './menu-item/components/MenuItemNavigate'; +export * from './menu-item/components/MenuItemSelect'; +export * from './menu-item/components/MenuItemSelectAvatar'; +export * from './menu-item/components/MenuItemSelectColor'; +export * from './menu-item/components/MenuItemSelectTag'; +export * from './menu-item/components/MenuItemSuggestion'; +export * from './menu-item/components/MenuItemToggle'; +export * from './menu-item/internals/components/MenuItemLeftContent'; +export * from './menu-item/internals/components/StyledMenuItemBase'; +export * from './menu-item/types/MenuItemAccent'; export * from './navigation-bar/components/NavigationBar'; export * from './navigation-bar/components/NavigationBarItem'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx similarity index 91% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx index bb54ce02fa28..8115b1570de3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx @@ -1,11 +1,8 @@ import { useTheme } from '@emotion/react'; +import { IconChevronRight, IconComponent } from '@ui/display'; +import { LightIconButtonProps } from '@ui/input/button/components/LightIconButton'; +import { LightIconButtonGroup } from '@ui/input/button/components/LightIconButtonGroup'; import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react'; -import { - IconChevronRight, - IconComponent, - LightIconButtonGroup, - LightIconButtonProps, -} from 'twenty-ui'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx similarity index 86% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx index a5829298b4b9..5e845696d493 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx @@ -1,29 +1,20 @@ import { useTheme } from '@emotion/react'; -import { FunctionComponent, MouseEvent, ReactElement } from 'react'; import { Avatar, AvatarProps, IconChevronRight, - IconComponent, - LightIconButtonGroup, - LightIconButtonProps, OverflowingTextWithTooltip, - isDefined, -} from 'twenty-ui'; - +} from '@ui/display'; +import { LightIconButtonGroup } from '@ui/input'; +import { MenuItemIconButton } from '@ui/navigation/menu-item/components/MenuItem'; +import { isDefined } from '@ui/utilities'; +import { MouseEvent } from 'react'; import { StyledHoverableMenuItemBase, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; import { MenuItemAccent } from '../types/MenuItemAccent'; -export type MenuItemIconButton = { - Wrapper?: FunctionComponent<{ iconButton: ReactElement }>; - Icon: IconComponent; - accent?: LightIconButtonProps['accent']; - onClick?: (event: MouseEvent) => void; -}; - export type MenuItemAvatarProps = { accent?: MenuItemAccent; className?: string; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx index 7f363eed7fc7..410965ce937a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx @@ -1,14 +1,13 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; - -import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { StyledMenuItemLabel, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; +import { IconComponent } from '@ui/display'; +import { useIsMobile } from '@ui/utilities/responsive/hooks/useIsMobile'; import { MenuItemCommandHotKeys } from './MenuItemCommandHotKeys'; const StyledMenuItemLabelText = styled(StyledMenuItemLabel)` diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx similarity index 94% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx index 430d45973be2..1405220406b8 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx @@ -1,11 +1,11 @@ -import { IconComponent, LightIconButtonGroup } from 'twenty-ui'; - import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase'; import { MenuItemAccent } from '../types/MenuItemAccent'; -import { MenuItemIconButton } from './MenuItem'; +import { IconComponent } from '@ui/display'; +import { LightIconButtonGroup } from '@ui/input'; import { ReactNode } from 'react'; +import { MenuItemIconButton } from './MenuItem'; export type MenuItemDraggableProps = { LeftIcon?: IconComponent | undefined; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx similarity index 82% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx index dbeb958abf68..e049fa2d3879 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; -import { Checkbox, IconComponent, Tag, ThemeColor } from 'twenty-ui'; - -import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; +import { IconComponent, Tag } from '@ui/display'; +import { Checkbox } from '@ui/input/components/Checkbox'; +import { MenuItemLeftContent } from '@ui/navigation/menu-item/internals/components/MenuItemLeftContent'; +import { ThemeColor } from '@ui/theme'; import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase'; const StyledLeftContentWithCheckboxContainer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx similarity index 92% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx index 4d829db0564a..d96433698863 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { ReactNode } from 'react'; -import { Checkbox, OverflowingTextWithTooltip } from 'twenty-ui'; +import { OverflowingTextWithTooltip } from '@ui/display'; +import { Checkbox } from '@ui/input/components/Checkbox'; import { StyledMenuItemBase, StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx similarity index 85% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx index 30b8fcb36106..a659ca7cabe0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx @@ -1,11 +1,6 @@ -import { - Checkbox, - CheckboxShape, - CheckboxSize, - Tag, - ThemeColor, -} from 'twenty-ui'; - +import { Tag } from '@ui/display'; +import { Checkbox, CheckboxShape, CheckboxSize } from '@ui/input'; +import { ThemeColor } from '@ui/theme'; import { StyledMenuItemBase, StyledMenuItemLeftContent, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx similarity index 93% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx index dd847b3048d6..76bde9c48d8f 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; -import { IconChevronRight, IconComponent } from 'twenty-ui'; +import { IconChevronRight, IconComponent } from '@ui/display'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemBase, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx index 7a5a976709f0..3c91c42fbd4a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx @@ -1,7 +1,7 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconCheck, IconChevronRight, IconComponent } from 'twenty-ui'; +import { IconCheck, IconChevronRight, IconComponent } from '@ui/display'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx similarity index 94% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx index 90addee3b242..477f6c037dcb 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx @@ -1,12 +1,12 @@ -import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; -import { IconCheck, OverflowingTextWithTooltip } from 'twenty-ui'; +import { ReactNode } from 'react'; import { StyledMenuItemLabel, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; +import { IconCheck, OverflowingTextWithTooltip } from '@ui/display'; import { StyledMenuItemSelect } from './MenuItemSelect'; type MenuItemSelectAvatarProps = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx similarity index 92% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx index f0c8cd4dd5c4..60f2f81ff50e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx @@ -1,16 +1,12 @@ import { useTheme } from '@emotion/react'; -import { - ColorSample, - ColorSampleVariant, - IconCheck, - ThemeColor, -} from 'twenty-ui'; import { StyledMenuItemLabel, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; +import { ColorSample, ColorSampleVariant, IconCheck } from '@ui/display'; +import { ThemeColor } from '@ui/theme'; import { StyledMenuItemSelect } from './MenuItemSelect'; type MenuItemSelectColorProps = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx similarity index 91% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx index 01c782b8950e..aec752d80cb0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx @@ -1,8 +1,9 @@ import { useTheme } from '@emotion/react'; -import { IconCheck, Tag, ThemeColor } from 'twenty-ui'; import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; +import { IconCheck, Tag } from '@ui/display'; +import { ThemeColor } from '@ui/theme'; import { StyledMenuItemSelect } from './MenuItemSelect'; type MenuItemSelectTagProps = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx similarity index 95% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx index 1f6548e4924c..24811d75c0eb 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; import { MouseEvent } from 'react'; -import { HOVER_BACKGROUND, IconComponent } from 'twenty-ui'; +import { IconComponent } from '@ui/display'; +import { HOVER_BACKGROUND } from '@ui/theme'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx similarity index 90% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx index 256c038e8a14..485df1268e36 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx @@ -1,5 +1,5 @@ -import { IconComponent, Toggle, ToggleSize } from 'twenty-ui'; - +import { IconComponent } from '@ui/display'; +import { Toggle, ToggleSize } from '@ui/input'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemBase, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx index a4eb66117dd2..261c901f40fe 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx @@ -1,12 +1,12 @@ import { action } from '@storybook/addon-actions'; import { Meta, StoryObj } from '@storybook/react'; + +import { IconBell } from '@ui/display'; import { CatalogDecorator, CatalogStory, ComponentDecorator, - IconBell, -} from 'twenty-ui'; - +} from '@ui/testing'; import { MenuItemAccent } from '../../types/MenuItemAccent'; import { MenuItem } from '../MenuItem'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx index 80252480527f..3e8ccfe9cfd1 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { IconBell } from '@ui/display'; import { CatalogDecorator, CatalogStory, ComponentDecorator, - IconBell, -} from 'twenty-ui'; - +} from '@ui/testing'; import { MenuItemCommand } from '../MenuItemCommand'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx index 05885c00a02b..a66000df4c4a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx @@ -1,14 +1,13 @@ import { action } from '@storybook/addon-actions'; import { Meta, StoryObj } from '@storybook/react'; + +import { IconBell, IconMinus } from '@ui/display'; import { CatalogDecorator, CatalogDimension, CatalogOptions, ComponentDecorator, - IconBell, - IconMinus, -} from 'twenty-ui'; - +} from '@ui/testing'; import { MenuItemAccent } from '../../types/MenuItemAccent'; import { MenuItemDraggable } from '../MenuItemDraggable'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx index 8bcdc3ec9db1..a69104d56136 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx @@ -1,13 +1,13 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { IconBell } from '@ui/display'; import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, - IconBell, -} from 'twenty-ui'; - +} from '@ui/testing'; import { MenuItemMultiSelect } from '../MenuItemMultiSelect'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx similarity index 90% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx index f51c55a63fb3..f564890657bf 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx @@ -1,15 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { Avatar } from '@ui/display'; import { - Avatar, + AVATAR_URL_MOCK, CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, -} from 'twenty-ui'; - -import { avatarUrl } from '~/testing/mock-data/users'; - +} from '@ui/testing'; import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar'; const meta: Meta = { @@ -24,7 +23,7 @@ type Story = StoryObj; export const Default: Story = { args: { text: 'First option', - avatar: , + avatar: , }, decorators: [ComponentDecorator], }; @@ -43,7 +42,7 @@ export const Catalog: CatalogStory = { values: [true, false], props: (withAvatar: boolean) => ({ avatar: withAvatar ? ( - + ) : ( ), diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx index 72c097f6fd23..c9a8b2739824 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx @@ -1,14 +1,15 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { IconBell } from '@ui/display'; +import { MenuItemNavigate } from '../MenuItemNavigate'; + import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, - IconBell, -} from 'twenty-ui'; - -import { MenuItemNavigate } from '../MenuItemNavigate'; +} from '@ui/testing'; const meta: Meta = { title: 'UI/Navigation/MenuItem/MenuItemNavigate', diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx index 21d73d9637d7..65e05b3b06fb 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx @@ -1,15 +1,15 @@ import { Meta, StoryObj } from '@storybook/react'; + import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, - IconBell, -} from 'twenty-ui'; - +} from '@ui/testing'; import { MenuItemSelect } from '../MenuItemSelect'; +import { IconBell } from '@ui/display'; const meta: Meta = { title: 'UI/Navigation/MenuItem/MenuItemSelect', component: MenuItemSelect, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx similarity index 90% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx index 4d2895bb3b72..0d8748b37993 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx @@ -1,15 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { Avatar } from '@ui/display'; import { - Avatar, + AVATAR_URL_MOCK, CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, -} from 'twenty-ui'; - -import { avatarUrl } from '~/testing/mock-data/users'; - +} from '@ui/testing'; import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar'; const meta: Meta = { @@ -20,11 +19,10 @@ const meta: Meta = { export default meta; type Story = StoryObj; - export const Default: Story = { args: { text: 'First option', - avatar: , + avatar: , }, argTypes: { className: { control: false }, @@ -46,7 +44,7 @@ export const Catalog: CatalogStory = { values: [true, false], props: (withAvatar: boolean) => ({ avatar: withAvatar ? ( - + ) : ( ), diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx similarity index 94% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx index 6f95af499f9b..a5f1060d7a1e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx @@ -1,15 +1,14 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { ColorSampleVariant } from '@ui/display'; import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, - ColorSampleVariant, ComponentDecorator, - MAIN_COLOR_NAMES, - ThemeColor, -} from 'twenty-ui'; - +} from '@ui/testing'; +import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme'; import { MenuItemSelectColor } from '../MenuItemSelectColor'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx index 3a13147567d8..f1f4b7c543c0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx @@ -1,13 +1,13 @@ import { Meta, StoryObj } from '@storybook/react'; + import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, - ThemeColor, -} from 'twenty-ui'; - +} from '@ui/testing'; +import { ThemeColor } from '@ui/theme'; import { MenuItemSelectTag } from '../MenuItemSelectTag'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx rename to packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx index c46ef3dfc832..a55476a555ae 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx @@ -1,13 +1,13 @@ import { Meta, StoryObj } from '@storybook/react'; + +import { IconBell } from '@ui/display'; import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator, - IconBell, -} from 'twenty-ui'; - +} from '@ui/testing'; import { MenuItemToggle } from '../MenuItemToggle'; const meta: Meta = { diff --git a/packages/twenty-ui/src/navigation/menu-item/components/index.ts b/packages/twenty-ui/src/navigation/menu-item/components/index.ts new file mode 100644 index 000000000000..9325e153481e --- /dev/null +++ b/packages/twenty-ui/src/navigation/menu-item/components/index.ts @@ -0,0 +1,15 @@ +export * from './MenuItem'; +export * from './MenuItemAvatar'; +export * from './MenuItemCommand'; +export * from './MenuItemCommandHotKeys'; +export * from './MenuItemDraggable'; +export * from './MenuItemMultiSelect'; +export * from './MenuItemMultiSelectAvatar'; +export * from './MenuItemMultiSelectTag'; +export * from './MenuItemNavigate'; +export * from './MenuItemSelect'; +export * from './MenuItemSelectAvatar'; +export * from './MenuItemSelectColor'; +export * from './MenuItemSelectTag'; +export * from './MenuItemSuggestion'; +export * from './MenuItemToggle'; diff --git a/packages/twenty-ui/src/navigation/menu-item/index.ts b/packages/twenty-ui/src/navigation/menu-item/index.ts new file mode 100644 index 000000000000..41664f3f2fa9 --- /dev/null +++ b/packages/twenty-ui/src/navigation/menu-item/index.ts @@ -0,0 +1,4 @@ +export * from './components'; +export * from './internals/components/MenuItemLeftContent'; +export * from './internals/components/StyledMenuItemBase'; +export * from './types/MenuItemAccent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx similarity index 98% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx rename to packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx index f93f5a0056d1..89e142a813e3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx @@ -1,12 +1,12 @@ import { useTheme } from '@emotion/react'; import { isString } from '@sniptt/guards'; import { ReactNode } from 'react'; + import { IconComponent, IconGripVertical, OverflowingTextWithTooltip, -} from 'twenty-ui'; - +} from '@ui/display'; import { StyledDraggableItem, StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx similarity index 98% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx rename to packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index 85d6391384e5..8bfe6d220024 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { HOVER_BACKGROUND } from 'twenty-ui'; +import { HOVER_BACKGROUND } from '@ui/theme'; import { MenuItemAccent } from '../../types/MenuItemAccent'; export type MenuItemBaseProps = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/types/MenuItemAccent.ts b/packages/twenty-ui/src/navigation/menu-item/types/MenuItemAccent.ts similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/menu-item/types/MenuItemAccent.ts rename to packages/twenty-ui/src/navigation/menu-item/types/MenuItemAccent.ts diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts index 377997ec3380..f0cc4c26a4ec 100644 --- a/packages/twenty-ui/src/utilities/index.ts +++ b/packages/twenty-ui/src/utilities/index.ts @@ -8,6 +8,7 @@ export * from './color/utils/stringToHslColor'; export * from './dimensions/components/ComputeNodeDimensions'; export * from './image/getImageAbsoluteURI'; export * from './isDefined'; +export * from './responsive/hooks/useIsMobile'; export * from './screen-size/hooks/useScreenSize'; export * from './state/utils/createState'; export * from './types/Nullable'; diff --git a/packages/twenty-ui/src/utilities/responsive/hooks/__tests__/isMobile.test.tsx b/packages/twenty-ui/src/utilities/responsive/hooks/__tests__/isMobile.test.tsx new file mode 100644 index 000000000000..708733136b6c --- /dev/null +++ b/packages/twenty-ui/src/utilities/responsive/hooks/__tests__/isMobile.test.tsx @@ -0,0 +1,10 @@ +import { renderHook } from '@testing-library/react'; +import { useIsMobile } from '@ui/utilities/responsive/hooks/useIsMobile'; + +describe('useIsMobile', () => { + it('should trigger the callback when clicking outside the specified refs', () => { + const { result } = renderHook(() => useIsMobile()); + + expect(result.current).toBe(false); + }); +}); diff --git a/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts b/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts new file mode 100644 index 000000000000..69458b8915e4 --- /dev/null +++ b/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts @@ -0,0 +1,5 @@ +import { MOBILE_VIEWPORT } from '@ui/theme'; +import { useMediaQuery } from 'react-responsive'; + +export const useIsMobile = () => + useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` }); diff --git a/packages/twenty-website/src/content/twenty-ui/navigation/menu-item.mdx b/packages/twenty-website/src/content/twenty-ui/navigation/menu-item.mdx index 84db450d2a80..b6bdf65bb1ee 100644 --- a/packages/twenty-website/src/content/twenty-ui/navigation/menu-item.mdx +++ b/packages/twenty-website/src/content/twenty-ui/navigation/menu-item.mdx @@ -11,7 +11,7 @@ A versatile menu item designed to be used in a menu or navigation list. { const handleMenuItemClick = (event) => { @@ -68,7 +68,7 @@ A command-style menu item within a menu to indicate keyboard shortcuts. { const handleCommandClick = () => { @@ -114,7 +114,7 @@ A draggable menu item component designed to be used in a menu or list where item { const handleMenuItemClick = (event) => { @@ -162,7 +162,7 @@ Provides a way to implement multi-select functionality with an associated checkb { @@ -199,7 +199,7 @@ A multi-select menu item with an avatar, a checkbox for selection, and textual c - { const imageUrl = @@ -239,7 +239,7 @@ A menu item featuring an optional left icon, textual content, and a right-chevro { const handleNavigation = () => { @@ -279,7 +279,7 @@ A selectable menu item, featuring optional left content (icon and text) and an i { const handleSelection = () => { @@ -323,7 +323,7 @@ A selectable menu item with an avatar, featuring optional left content (avatar a - { const imageUrl = @@ -374,7 +374,7 @@ A selectable menu item with a color sample for scenarios where you want users to - { const handleSelection = () => { @@ -420,7 +420,7 @@ A menu item with an associated toggle switch to allow users to enable or disable {