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/components/MenuItemSelect.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
@ -0,0 +1,81 @@
+import { css, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck, IconChevronRight, IconComponent } from '@ui/display';
+import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
+import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
+
+export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
+  selected: boolean;
+  disabled?: boolean;
+  hovered?: boolean;
+}>`
+  ${({ theme, selected, disabled, hovered }) => {
+    if (selected) {
+      return css`
+        background: ${theme.background.transparent.light};
+        &:hover {
+          background: ${theme.background.transparent.medium};
+        }
+      `;
+    } else if (disabled === true) {
+      return css`
+        background: inherit;
+        &:hover {
+          background: inherit;
+        }
+
+        color: ${theme.font.color.tertiary};
+
+        cursor: default;
+      `;
+    } else if (hovered === true) {
+      return css`
+        background: ${theme.background.transparent.light};
+      `;
+    }
+  }}
+`;
+
+type MenuItemSelectProps = {
+  LeftIcon: IconComponent | null | undefined;
+  selected: boolean;
+  text: string;
+  className?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  hovered?: boolean;
+  hasSubMenu?: boolean;
+};
+
+export const MenuItemSelect = ({
+  LeftIcon,
+  text,
+  selected,
+  className,
+  onClick,
+  disabled,
+  hovered,
+  hasSubMenu = false,
+}: MenuItemSelectProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledMenuItemSelect
+      onClick={onClick}
+      className={className}
+      selected={selected}
+      disabled={disabled}
+      hovered={hovered}
+    >
+      <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
+      {selected && <IconCheck size={theme.icon.size.md} />}
+      {hasSubMenu && (
+        <IconChevronRight
+          size={theme.icon.size.sm}
+          color={theme.font.color.tertiary}
+        />
+      )}
+    </StyledMenuItemSelect>
+  );
+};