@12-apps/ui 1.0.0

package/src/components/navigation/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,254 @@
+import {
+  alpha,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Typography,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { cloneElement, isValidElement,useState } from 'react';
+
+import type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';
+
+const StyledMenu = styled(Menu, {
+  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
+})<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({
+  '& .MuiPaper-root': {
+    minWidth: 160,
+    borderRadius: theme.spacing(1),
+
+    ...(customVariant === 'glass' && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.85),
+      backdropFilter: 'blur(20px)',
+      border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.12)}`,
+    }),
+
+    ...(customVariant === 'dark' && {
+      backgroundColor: alpha(theme.palette.grey[900], 0.95),
+      color: theme.palette.common.white,
+      '& .MuiMenuItem-root': {
+        color: theme.palette.common.white,
+      },
+      '& .MuiListItemIcon-root': {
+        color: theme.palette.common.white,
+      },
+      '& .MuiDivider-root': {
+        borderColor: alpha(theme.palette.common.white, 0.12),
+      },
+    }),
+
+    ...(size === 'sm' && {
+      '& .MuiMenuItem-root': {
+        fontSize: '0.875rem',
+        minHeight: 32,
+        padding: theme.spacing(0.5, 1.5),
+      },
+    }),
+
+    ...(size === 'lg' && {
+      '& .MuiMenuItem-root': {
+        fontSize: '1.125rem',
+        minHeight: 48,
+        padding: theme.spacing(1.5, 2),
+      },
+    }),
+  },
+}));
+
+const StyledMenuItem = styled(MenuItem, {
+  shouldForwardProp: (prop) => !['color', 'dangerous'].includes(prop as string),
+})<{ color?: string; dangerous?: boolean }>(({ theme, color, dangerous }) => ({
+  borderRadius: theme.spacing(0.5),
+  margin: theme.spacing(0.25, 0.5),
+  transition: 'all 0.2s ease',
+
+  '&:hover': {
+    backgroundColor: alpha(dangerous ? theme.palette.error.main : theme.palette.primary.main, 0.08),
+  },
+
+  ...(dangerous && {
+    color: theme.palette.error.main,
+    '& .MuiListItemIcon-root': {
+      color: theme.palette.error.main,
+    },
+  }),
+
+  ...(color &&
+    color !== 'default' &&
+    !dangerous && {
+      color:
+        (theme.palette as unknown as Record<string, { main?: string }>)[color]?.main ||
+        theme.palette.primary.main,
+      '& .MuiListItemIcon-root': {
+        color:
+          (theme.palette as unknown as Record<string, { main?: string }>)[color]?.main ||
+          theme.palette.primary.main,
+      },
+      '&:hover': {
+        backgroundColor: alpha(
+          (theme.palette as unknown as Record<string, { main?: string }>)[color]?.main ||
+            theme.palette.primary.main,
+          0.08,
+        ),
+      },
+    }),
+}));
+
+const MenuHeader = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  fontSize: '0.75rem',
+  fontWeight: 600,
+  textTransform: 'uppercase',
+  color: theme.palette.text.secondary,
+  letterSpacing: 0.5,
+}));
+
+const ShortcutText = styled(Typography)(({ theme }) => ({
+  fontSize: '0.75rem',
+  color: theme.palette.text.secondary,
+  marginLeft: 'auto',
+  paddingLeft: theme.spacing(2),
+}));
+
+const renderMenuItem = (
+  item: ContextMenuItem,
+  handleItemClick: (item: ContextMenuItem) => void,
+  size?: string,
+) => {
+  if (item.type === 'divider') {
+    return <Divider key={item.id} sx={{ my: 0.5 }} />;
+  }
+
+  if (item.type === 'header') {
+    return <MenuHeader key={item.id}>{item.label}</MenuHeader>;
+  }
+
+  const hasIcon = !!item.icon;
+
+  return (
+    <StyledMenuItem
+      key={item.id}
+      disabled={item.disabled}
+      onClick={() => handleItemClick(item)}
+      color={item.color}
+      dangerous={item.dangerous}
+    >
+      {hasIcon && (
+        <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>
+      )}
+      <ListItemText primary={item.label} />
+      {item.shortcut && <ShortcutText variant="caption">{item.shortcut}</ShortcutText>}
+    </StyledMenuItem>
+  );
+};
+
+export const ContextMenu = React.forwardRef<HTMLDivElement, ContextMenuProps>(
+  (
+    {
+      variant = 'default',
+      items,
+      children,
+      disabled = false,
+      onOpen,
+      onClose,
+      size = 'md',
+      triggerClassName,
+      triggerStyle,
+      ...menuProps
+    },
+    ref,
+  ) => {
+    const [contextMenu, setContextMenu] = useState<{
+      mouseX: number;
+      mouseY: number;
+    } | null>(null);
+
+    const handleContextMenu = (event: React.MouseEvent) => {
+      if (disabled) return;
+
+      event.preventDefault();
+      setContextMenu(
+        contextMenu === null
+          ? {
+              mouseX: event.clientX + 2,
+              mouseY: event.clientY - 6,
+            }
+          : null,
+      );
+      onOpen?.(event);
+    };
+
+    const handleClose = () => {
+      setContextMenu(null);
+      onClose?.();
+    };
+
+    const handleItemClick = (item: ContextMenuItem) => {
+      if (item.onClick) {
+        item.onClick();
+      }
+      handleClose();
+    };
+
+    const triggerElement = isValidElement(children) ? (
+      cloneElement(
+        children as React.ReactElement<{
+          onContextMenu?: (event: React.MouseEvent) => void;
+          className?: string;
+          style?: React.CSSProperties;
+        }>,
+        {
+          onContextMenu: handleContextMenu,
+          className: [
+            (children as React.ReactElement<{ className?: string }>).props.className,
+            triggerClassName,
+            !disabled ? 'context-menu-trigger' : '',
+          ]
+            .filter(Boolean)
+            .join(' '),
+          style: {
+            ...(children as React.ReactElement<{ style?: React.CSSProperties }>).props.style,
+            ...triggerStyle,
+            cursor: disabled ? 'default' : 'context-menu',
+          },
+        }
+      )
+    ) : (
+      <div
+        onContextMenu={handleContextMenu}
+        className={triggerClassName}
+        style={{
+          ...triggerStyle,
+          cursor: disabled ? 'default' : 'context-menu',
+        }}
+      >
+        {children}
+      </div>
+    );
+
+    return (
+      <>
+        {triggerElement}
+        <StyledMenu
+          ref={ref}
+          open={contextMenu !== null}
+          onClose={handleClose}
+          anchorReference="anchorPosition"
+          anchorPosition={
+            contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined
+          }
+          customVariant={variant}
+          size={size}
+          {...menuProps}
+        >
+          {items.map((item) => renderMenuItem(item, handleItemClick, size))}
+        </StyledMenu>
+      </>
+    );
+  },
+);
+
+ContextMenu.displayName = 'ContextMenu';

package/src/components/navigation/ContextMenu/ContextMenu.types.ts

@@ -0,0 +1,96 @@
+import type { MenuProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+export interface ContextMenuItem {
+  /**
+   * Unique identifier for the menu item
+   */
+  id: string;
+  
+  /**
+   * Label to display for the menu item
+   */
+  label: string;
+  
+  /**
+   * Icon to display before the label
+   */
+  icon?: ReactNode;
+  
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Type of menu item
+   */
+  type?: 'item' | 'divider' | 'header';
+  
+  /**
+   * Click handler for the menu item
+   */
+  onClick?: () => void;
+  
+  /**
+   * Keyboard shortcut to display
+   */
+  shortcut?: string;
+  
+  /**
+   * Color variant for the item
+   */
+  color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+  
+  /**
+   * Whether the item is dangerous/destructive
+   */
+  dangerous?: boolean;
+}
+
+export interface ContextMenuProps extends Omit<MenuProps, 'open' | 'anchorEl' | 'variant'> {
+  /**
+   * The variant of the context menu
+   */
+  variant?: 'default' | 'glass' | 'dark';
+  
+  /**
+   * Menu items to display
+   */
+  items: ContextMenuItem[];
+  
+  /**
+   * Target element to attach context menu to
+   */
+  children: ReactNode;
+  
+  /**
+   * Whether the context menu is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Callback when menu opens
+   */
+  onOpen?: (event: React.MouseEvent) => void;
+  
+  /**
+   * Callback when menu closes
+   */
+  onClose?: () => void;
+  
+  /**
+   * Size of the menu items
+   */
+  size?: 'sm' | 'md' | 'lg';
+  
+  /**
+   * Custom className for the trigger element
+   */
+  triggerClassName?: string;
+  
+  /**
+   * Custom styles for the trigger element
+   */
+  triggerStyle?: React.CSSProperties;
+}

package/src/components/navigation/ContextMenu/index.ts

@@ -0,0 +1,2 @@
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';