@etus/ui 0.1.1 → 0.1.2

package/src/components/navigation/Menu/Menu.tsx

@@ -1,247 +0,0 @@
-"use client"
-
-import type {
-  MenuGroupProps,
-  MenuItemProps,
-  MenuLabelProps,
-  MenuProps,
-  MenuSeparatorProps,
-  MenuShortcutProps,
-} from "./Menu.types"
-import type { KeyboardEvent } from "react";
-
-import { useCallback, useRef } from "react"
-
-import { cn } from "../../../lib/utils"
-import {
-  menuGroupVariants,
-  menuItemVariants,
-  menuLabelVariants,
-  menuSeparatorVariants,
-  menuShortcutVariants,
-  menuVariants,
-} from "./Menu.variants"
-
-/**
- * Menu - A navigable list of options with keyboard support.
- *
- * Base component for creating custom menus with full accessibility.
- *
- * @example
- * <Menu>
- *   <MenuItem onSelect={() => console.log("Edit")}>Edit</MenuItem>
- *   <MenuItem onSelect={() => console.log("Copy")}>Copy</MenuItem>
- *   <MenuSeparator />
- *   <MenuItem variant="destructive">Delete</MenuItem>
- * </Menu>
- */
-function Menu({
-  className,
-  orientation = "vertical",
-  children,
-  ...props
-}: MenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null)
-
-  /* eslint-disable sonarjs/cognitive-complexity -- Keyboard navigation requires handling multiple key cases */
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      const menu = menuRef.current
-      if (!menu) return
-
-      const items = [...menu.querySelectorAll('[role="menuitem"]:not([data-disabled])')] as HTMLElement[]
-
-      if (items.length === 0) return
-
-      const currentIndex = items.findIndex((item) => item === document.activeElement)
-
-      let nextIndex: null | number = null
-
-      switch (event.key) {
-        case "ArrowDown":
-          if (orientation === "vertical") {
-            event.preventDefault()
-            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0
-          }
-          break
-        case "ArrowUp":
-          if (orientation === "vertical") {
-            event.preventDefault()
-            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1
-          }
-          break
-        case "ArrowRight":
-          if (orientation === "horizontal") {
-            event.preventDefault()
-            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0
-          }
-          break
-        case "ArrowLeft":
-          if (orientation === "horizontal") {
-            event.preventDefault()
-            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1
-          }
-          break
-        case "Home":
-          event.preventDefault()
-          nextIndex = 0
-          break
-        case "End":
-          event.preventDefault()
-          nextIndex = items.length - 1
-          break
-      }
-
-      if (nextIndex !== null) {
-        const nextItem = items[nextIndex]
-        if (nextItem) {
-          nextItem.focus()
-        }
-      }
-    },
-    [orientation]
-  )
-  /* eslint-enable sonarjs/cognitive-complexity */
-
-  return (
-    <div
-      ref={menuRef}
-      className={cn(menuVariants({ orientation }), className)}
-      data-slot="menu"
-      role="menu"
-      onKeyDown={handleKeyDown}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * MenuItem - Individual menu item with optional variants.
- */
-function MenuItem({
-  className,
-  variant = "default",
-  inset = false,
-  selected = false,
-  onSelect,
-  disabled = false,
-  children,
-  onClick,
-  onKeyDown,
-  ...props
-}: MenuItemProps) {
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (disabled) return
-      onClick?.(event)
-      onSelect?.()
-    },
-    [disabled, onClick, onSelect]
-  )
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      onKeyDown?.(event)
-      if (disabled) return
-
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault()
-        onSelect?.()
-      }
-    },
-    [disabled, onKeyDown, onSelect]
-  )
-
-  return (
-    <button
-      aria-disabled={disabled || undefined}
-      aria-selected={selected || undefined}
-      className={cn(menuItemVariants({ variant, inset, selected }), className)}
-      data-disabled={disabled || undefined}
-      data-slot="menu-item"
-      role="menuitem"
-      tabIndex={disabled ? -1 : 0}
-      type="button"
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}
-
-/**
- * MenuGroup - Groups related menu items together.
- */
-function MenuGroup({
-  className,
-  label,
-  children,
-  ...props
-}: MenuGroupProps) {
-  return (
-    <div
-      aria-label={label}
-      className={cn(menuGroupVariants(), className)}
-      data-slot="menu-group"
-      role="group"
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * MenuLabel - Label for a group of menu items.
- */
-function MenuLabel({
-  className,
-  inset = false,
-  children,
-  ...props
-}: MenuLabelProps) {
-  return (
-    <div
-      className={cn(menuLabelVariants({ inset }), className)}
-      data-slot="menu-label"
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-/**
- * MenuSeparator - Visual divider between menu items.
- */
-function MenuSeparator({ className, ...props }: MenuSeparatorProps) {
-  return (
-    <div
-      className={cn(menuSeparatorVariants(), className)}
-      data-slot="menu-separator"
-      role="separator"
-      {...props}
-    />
-  )
-}
-
-/**
- * MenuShortcut - Displays keyboard shortcut hint.
- */
-function MenuShortcut({ className, children, ...props }: MenuShortcutProps) {
-  return (
-    <span
-      className={cn(menuShortcutVariants(), className)}
-      data-slot="menu-shortcut"
-      {...props}
-    >
-      {children}
-    </span>
-  )
-}
-
-export { Menu, MenuGroup, MenuItem, MenuLabel, MenuSeparator, MenuShortcut }

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

@@ -1,51 +0,0 @@
-import type { ComponentProps } from "react"
-
-/**
- * Menu root props
- */
-export interface MenuProps extends ComponentProps<"div"> {
-  /** Orientation of the menu */
-  orientation?: "horizontal" | "vertical"
-}
-
-/**
- * MenuItem props
- */
-export interface MenuItemProps extends ComponentProps<"button"> {
-  /** Disables the item */
-  disabled?: boolean
-  /** Add extra padding for alignment with icons */
-  inset?: boolean
-  /** Callback when item is selected */
-  onSelect?: () => void
-  /** If the item is selected */
-  selected?: boolean
-  /** Visual variant */
-  variant?: "default" | "destructive"
-}
-
-/**
- * MenuGroup props - Groups related items
- */
-export interface MenuGroupProps extends ComponentProps<"div"> {
-  /** Label for the group */
-  label?: string
-}
-
-/**
- * MenuLabel props - Label for a group
- */
-export interface MenuLabelProps extends ComponentProps<"div"> {
-  /** Add extra padding for alignment with icons */
-  inset?: boolean
-}
-
-/**
- * MenuSeparator props - Divider between items
- */
-export interface MenuSeparatorProps extends ComponentProps<"div"> {}
-
-/**
- * MenuShortcut props - Displays keyboard shortcut
- */
-export interface MenuShortcutProps extends ComponentProps<"span"> {}

package/src/components/navigation/Menu/Menu.variants.ts

@@ -1,105 +0,0 @@
-import { cva } from "class-variance-authority"
-
-/**
- * Menu root variant styles
- */
-export const menuVariants = cva(
-  [
-    "flex p-1",
-  ],
-  {
-    variants: {
-      orientation: {
-        vertical: "flex-col",
-        horizontal: "flex-row",
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-/**
- * MenuItem variant styles
- */
-export const menuItemVariants = cva(
-  [
-    // Base styles
-    "relative flex w-full cursor-pointer select-none items-center gap-2",
-    "rounded-sm px-2 py-1.5 text-sm outline-none",
-    // Focus styles
-    "focus:bg-accent focus:text-accent-foreground",
-    // Hover styles
-    "hover:bg-accent hover:text-accent-foreground",
-    // Transition
-    "transition-colors",
-    // Disabled styles
-    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    // SVG styles
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  ],
-  {
-    variants: {
-      variant: {
-        default: "",
-        destructive: "text-destructive focus:bg-destructive/10 focus:text-destructive hover:bg-destructive/10 hover:text-destructive",
-      },
-      inset: {
-        true: "pl-8",
-        false: "",
-      },
-      selected: {
-        true: "bg-accent/50",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      inset: false,
-      selected: false,
-    },
-  }
-)
-
-/**
- * MenuGroup variant styles
- */
-export const menuGroupVariants = cva([
-  "flex flex-col gap-1",
-])
-
-/**
- * MenuLabel variant styles
- */
-export const menuLabelVariants = cva(
-  [
-    "px-2 py-1.5 text-xs font-medium text-muted-foreground",
-    "uppercase tracking-wider",
-  ],
-  {
-    variants: {
-      inset: {
-        true: "pl-8",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      inset: false,
-    },
-  }
-)
-
-/**
- * MenuSeparator variant styles
- */
-export const menuSeparatorVariants = cva([
-  "-mx-1 my-1 h-px bg-border",
-])
-
-/**
- * MenuShortcut variant styles
- */
-export const menuShortcutVariants = cva([
-  "ml-auto text-xs tracking-widest text-muted-foreground",
-])