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

Migrate to twenty-ui - navigation/menu-item (#8213)

Browse Source 
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 <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-app[bot]
2024-11-07 16:51:39 +00:00
committed by GitHub
parent f9a136ab6d
commit 6264d509bd
106 changed files with 326 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
View File

@ -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;

5
packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx
View File

@ -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();

4
packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts
View File

@ -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';

3
packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx
View File

@ -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,

4
packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx
View File

@ -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 =

2
packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
View File

@ -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;

3
packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
View File

@ -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';

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

@ -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 = {

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

@ -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 =
| {

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

@ -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;

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

@ -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`

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

@ -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('');

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

@ -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;

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

@ -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';

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

@ -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 = '';

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

@ -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();

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

@ -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';

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

@ -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;

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

@ -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';

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

@ -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<T> = {

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

@ -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';

3
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx
View File

@ -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));

6
packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
View File

@ -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)<{

2
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
View File

@ -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;

4
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
View File

@ -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';

4
packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx
View File

@ -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)`

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
View File

@ -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`

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
View File

@ -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;

60
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx Normal file
View File

@ -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) => (
<Card rounded>
{parameters.map((parameter, index) => (
<StyledCardContent
key={index}
divider={index < parameters.length - 1}
onClick={() => parameter.onToggle(!parameter.value)}
>
<div>
<StyledTitle>{parameter.title}</StyledTitle>
<StyledDescription>{parameter.description}</StyledDescription>
</div>
<StyledToggle value={parameter.value} onChange={parameter.onToggle} />
</StyledCardContent>
))}
</Card>
);

3
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
View File

@ -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;

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
View File

@ -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 = {

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
View File

@ -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)`

2
packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx
View File

@ -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';

8
packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/support/components/SupportDropdown.tsx
View File

@ -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`;

3
packages/twenty-front/src/modules/ui/input/components/Select.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
View File

@ -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;

3
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
View File

@ -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 = ({

9
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -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';

5
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
View File

@ -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;

3
packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
View File

@ -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;

3
packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx
View File

@ -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 }) =>

3
packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx
View File

@ -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<typeof DraggableItem> = {
title: 'UI/Layout/DraggableList/DraggableItem',

8
packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx
View File

@ -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<typeof DraggableList> = {
title: 'UI/Layout/DraggableList/DraggableList',

12
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -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';

9
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
View File

@ -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';

13
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx
View File

@ -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 }>;

3
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
View File

@ -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 }>`

9
packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx
View File

@ -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 = {

4
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
View File

@ -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';

2
packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx
View File

@ -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;

2
packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
View File

@ -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;

3
packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepItem.tsx
View File

@ -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[];

3
packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx
View File

@ -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;

10
packages/twenty-front/tsup.ui.index.tsx
View File

@ -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' {

2
packages/twenty-ui/src/input/components/Checkbox.tsx
View File

@ -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',

18
packages/twenty-ui/src/navigation/index.ts
View File

@ -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';

9
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
View File

@ -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 {

19
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
View File

@ -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<any>) => void;
};
export type MenuItemAvatarProps = {
accent?: MenuItemAccent;
className?: string;

5
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
View File

@ -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)`

0
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
View File

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx
View File

@ -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;

7
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx
View File

@ -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`

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
View File

@ -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,

11
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
View File

@ -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,

2
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx
View File

@ -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,

2
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
View File

@ -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';

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
View File

@ -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 = {

8
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx
View File

@ -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 = {

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
View File

@ -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 = {

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx
View File

@ -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';

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx → packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
View File

@ -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,

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
View File

@ -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';

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
View File

@ -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<typeof MenuItemCommand> = {

7
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
View File

@ -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';

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
View File

@ -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<typeof MenuItemMultiSelect> = {

13
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
View File

@ -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<typeof MenuItemMultiSelectAvatar> = {
@ -24,7 +23,7 @@ type Story = StoryObj<typeof MenuItemMultiSelectAvatar>;
export const Default: Story = {
args: {
text: 'First option',
avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
},
decorators: [ComponentDecorator],
};
@ -43,7 +42,7 @@ export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
values: [true, false],
props: (withAvatar: boolean) => ({
avatar: withAvatar ? (
<Avatar avatarUrl={avatarUrl} placeholder="L" />
<Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />
) : (
<Avatar avatarUrl={''} placeholder="L" />
),

9
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
View File

@ -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<typeof MenuItemNavigate> = {
title: 'UI/Navigation/MenuItem/MenuItemNavigate',

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
View File

@ -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<typeof MenuItemSelect> = {
title: 'UI/Navigation/MenuItem/MenuItemSelect',
component: MenuItemSelect,

14
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
View File

@ -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<typeof MenuItemSelectAvatar> = {
@ -20,11 +19,10 @@ const meta: Meta<typeof MenuItemSelectAvatar> = {
export default meta;
type Story = StoryObj<typeof MenuItemSelectAvatar>;
export const Default: Story = {
args: {
text: 'First option',
avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
},
argTypes: {
className: { control: false },
@ -46,7 +44,7 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
values: [true, false],
props: (withAvatar: boolean) => ({
avatar: withAvatar ? (
<Avatar avatarUrl={avatarUrl} placeholder="L" />
<Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />
) : (
<Avatar avatarUrl={''} placeholder="L" />
),

9
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
View File

@ -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<typeof MenuItemSelectColor> = {

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx
View File

@ -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<typeof MenuItemSelectTag> = {

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx → packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
View File

@ -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<typeof MenuItemToggle> = {

15
packages/twenty-ui/src/navigation/menu-item/components/index.ts Normal file
View File

@ -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';

4
packages/twenty-ui/src/navigation/menu-item/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './components';
export * from './internals/components/MenuItemLeftContent';
export * from './internals/components/StyledMenuItemBase';
export * from './types/MenuItemAccent';

4
packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx → packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
View File

@ -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,

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