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 <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>
2024-11-07 16:51:39 +00:00
parent f9a136ab6d
commit 6264d509bd
106 changed files with 326 additions and 256 deletions
--- a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@ -0,0 +1,69 @@
+import { useTheme } from '@emotion/react';
+import { isString } from '@sniptt/guards';
+import { ReactNode } from 'react';
+
+import {
+  IconComponent,
+  IconGripVertical,
+  OverflowingTextWithTooltip,
+} from '@ui/display';
+import {
+  StyledDraggableItem,
+  StyledMenuItemLabel,
+  StyledMenuItemLeftContent,
+} from './StyledMenuItemBase';
+
+type MenuItemLeftContentProps = {
+  className?: string;
+  LeftIcon: IconComponent | null | undefined;
+  showGrip?: boolean;
+  isDisabled?: boolean;
+  text: ReactNode;
+};
+
+export const MenuItemLeftContent = ({
+  className,
+  LeftIcon,
+  text,
+  showGrip = false,
+  isDisabled = false,
+}: MenuItemLeftContentProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledMenuItemLeftContent className={className}>
+      {showGrip &&
+        (isDisabled ? (
+          <StyledDraggableItem>
+            <IconGripVertical
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={
+                isDisabled
+                  ? theme.font.color.extraLight
+                  : theme.font.color.light
+              }
+            />
+          </StyledDraggableItem>
+        ) : (
+          <StyledDraggableItem>
+            <IconGripVertical
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={
+                isDisabled
+                  ? theme.font.color.extraLight
+                  : theme.font.color.light
+              }
+            />
+          </StyledDraggableItem>
+        ))}
+      {LeftIcon && (
+        <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+      )}
+      <StyledMenuItemLabel hasLeftIcon={!!LeftIcon}>
+        {isString(text) ? <OverflowingTextWithTooltip text={text} /> : text}
+      </StyledMenuItemLabel>
+    </StyledMenuItemLeftContent>
+  );
+};