@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/menu/Menu.test.tsx

@@ -0,0 +1,353 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Menu,
+  MenuTrigger,
+  MenuList,
+  MenuItem,
+  MenuDivider,
+  MenuGroup,
+} from './Menu'
+
+describe('Menu', () => {
+  it('renders trigger element', () => {
+    render(
+      <Menu>
+        <MenuTrigger>
+          <button>Options</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+        </MenuList>
+      </Menu>
+    )
+    expect(screen.getByText('Options')).toBeInTheDocument()
+  })
+
+  it('does not show menu list by default', () => {
+    render(
+      <Menu>
+        <MenuTrigger>
+          <button>Options</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+        </MenuList>
+      </Menu>
+    )
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument()
+  })
+
+  it('opens menu when trigger is clicked', () => {
+    render(
+      <Menu>
+        <MenuTrigger>
+          <button>Options</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+        </MenuList>
+      </Menu>
+    )
+
+    fireEvent.click(screen.getByText('Options'))
+    expect(screen.getByText('Edit')).toBeInTheDocument()
+  })
+
+  it('closes menu when trigger is clicked again', () => {
+    render(
+      <Menu>
+        <MenuTrigger>
+          <button>Options</button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+        </MenuList>
+      </Menu>
+    )
+
+    fireEvent.click(screen.getByText('Options'))
+    expect(screen.getByText('Edit')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Options'))
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument()
+  })
+
+  describe('controlled state', () => {
+    it('shows menu when isOpen is true', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByText('Edit')).toBeInTheDocument()
+    })
+
+    it('hides menu when isOpen is false', () => {
+      render(
+        <Menu isOpen={false}>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument()
+    })
+
+    it('calls onOpenChange when trigger is clicked', () => {
+      const onOpenChange = vi.fn()
+      render(
+        <Menu onOpenChange={onOpenChange}>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+
+      fireEvent.click(screen.getByText('Options'))
+      expect(onOpenChange).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('MenuItem', () => {
+    it('calls onPress when clicked', () => {
+      const onPress = vi.fn()
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem onPress={onPress}>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+
+      fireEvent.click(screen.getByText('Edit'))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('closes menu after item is clicked', () => {
+      render(
+        <Menu>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem onPress={() => {}}>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+
+      fireEvent.click(screen.getByText('Options'))
+      expect(screen.getByText('Edit')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('Edit'))
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument()
+    })
+
+    it('does not call onPress when disabled', () => {
+      const onPress = vi.fn()
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem onPress={onPress} isDisabled>
+              Disabled Item
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      )
+
+      fireEvent.click(screen.getByText('Disabled Item'))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+
+    it('renders destructive item', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem isDestructive>Delete</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByText('Delete')).toBeInTheDocument()
+    })
+
+    it('renders item with icon', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem icon={<span data-testid="edit-icon">pencil</span>}>
+              Edit
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByTestId('edit-icon')).toBeInTheDocument()
+    })
+
+    it('has menuitem accessibility role', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByRole('menuitem')).toBeInTheDocument()
+    })
+  })
+
+  describe('MenuDivider', () => {
+    it('renders a divider', () => {
+      const { container } = render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+            <MenuDivider />
+            <MenuItem>Delete</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(container).toBeInTheDocument()
+    })
+  })
+
+  describe('MenuGroup', () => {
+    it('renders group with label', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuGroup label="Actions">
+              <MenuItem>Edit</MenuItem>
+              <MenuItem>Duplicate</MenuItem>
+            </MenuGroup>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByText('Actions')).toBeInTheDocument()
+      expect(screen.getByText('Edit')).toBeInTheDocument()
+      expect(screen.getByText('Duplicate')).toBeInTheDocument()
+    })
+
+    it('renders group without label', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuGroup>
+              <MenuItem>Edit</MenuItem>
+            </MenuGroup>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByText('Edit')).toBeInTheDocument()
+    })
+  })
+
+  describe('MenuTrigger', () => {
+    it('communicates expanded state', () => {
+      render(
+        <Menu>
+          <MenuTrigger>
+            <span>Options</span>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+
+      const trigger = screen.getByRole('button', { name: 'Options' })
+      // react-native-web does not render aria-expanded for accessibilityState.expanded
+      expect(trigger).toBeInTheDocument()
+
+      fireEvent.click(trigger)
+      // Verify menu opens by checking for menu content
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+    })
+  })
+
+  describe('MenuList', () => {
+    it('has menu accessibility role', () => {
+      render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <button>Options</button>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      expect(screen.getByRole('menu')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations when closed', async () => {
+      const { container } = render(
+        <Menu>
+          <MenuTrigger>
+            <span>Options</span>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+            <MenuItem>Delete</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when open', async () => {
+      const { container } = render(
+        <Menu isOpen>
+          <MenuTrigger>
+            <span>Options</span>
+          </MenuTrigger>
+          <MenuList>
+            <MenuItem>Edit</MenuItem>
+            <MenuDivider />
+            <MenuItem isDestructive>Delete</MenuItem>
+          </MenuList>
+        </Menu>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/menu/Menu.tsx

@@ -0,0 +1,222 @@
+import React, { useState, createContext, useContext } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+interface MenuContextType {
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+  closeMenu: () => void
+}
+
+const MenuContext = createContext<MenuContextType>({
+  isOpen: false,
+  setIsOpen: () => {},
+  closeMenu: () => {},
+})
+
+export interface MenuProps extends ViewProps {
+  /** Controlled open state */
+  isOpen?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (isOpen: boolean) => void
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Menu component for dropdown menus.
+ *
+ * @example
+ * <Menu>
+ *   <MenuTrigger>
+ *     <Button><ButtonText>Options</ButtonText></Button>
+ *   </MenuTrigger>
+ *   <MenuList>
+ *     <MenuItem onPress={() => {}}>Edit</MenuItem>
+ *     <MenuItem onPress={() => {}}>Delete</MenuItem>
+ *     <MenuDivider />
+ *     <MenuItem onPress={() => {}} isDestructive>Remove</MenuItem>
+ *   </MenuList>
+ * </Menu>
+ */
+export function Menu({
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  className,
+  children,
+  ...props
+}: MenuProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false)
+  const isOpen = controlledIsOpen ?? internalIsOpen
+
+  const setIsOpen = (open: boolean) => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(open)
+    }
+    onOpenChange?.(open)
+  }
+
+  const closeMenu = () => setIsOpen(false)
+
+  return (
+    <MenuContext.Provider value={{ isOpen, setIsOpen, closeMenu }}>
+      <View className={cn('relative', className)} {...props}>
+        {children}
+      </View>
+    </MenuContext.Provider>
+  )
+}
+
+export interface MenuTriggerProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Trigger element for the menu.
+ */
+export function MenuTrigger({ children, className }: MenuTriggerProps) {
+  const { isOpen, setIsOpen } = useContext(MenuContext)
+
+  return (
+    <Pressable
+      onPress={() => setIsOpen(!isOpen)}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isOpen }}
+      className={className}
+    >
+      {children}
+    </Pressable>
+  )
+}
+
+export interface MenuListProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Container for menu items.
+ */
+export function MenuList({ children, className }: MenuListProps) {
+  const { isOpen, setIsOpen } = useContext(MenuContext)
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <Pressable
+        onPress={() => setIsOpen(false)}
+        className="fixed inset-0 z-40"
+        style={{ position: 'absolute' }}
+      />
+      {/* Menu */}
+      <View
+        className={cn(
+          'absolute z-50 top-full left-0 mt-1 min-w-[160px]',
+          'bg-surface-elevated rounded-lg shadow-lg border border-border-default',
+          'py-1 overflow-hidden',
+          className
+        )}
+        accessibilityRole="menu"
+      >
+        {children}
+      </View>
+    </>
+  )
+}
+
+export interface MenuItemProps {
+  /** Press handler */
+  onPress?: () => void
+  /** Whether the item is disabled */
+  isDisabled?: boolean
+  /** Whether the item is destructive (shows in red) */
+  isDestructive?: boolean
+  /** Icon element */
+  icon?: React.ReactNode
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Individual menu item.
+ */
+export function MenuItem({
+  onPress,
+  isDisabled = false,
+  isDestructive = false,
+  icon,
+  className,
+  children,
+}: MenuItemProps) {
+  const { closeMenu } = useContext(MenuContext)
+
+  const handlePress = () => {
+    if (isDisabled) return
+    onPress?.()
+    closeMenu()
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="menuitem"
+      accessibilityState={{ disabled: isDisabled }}
+      className={cn(
+        'flex-row items-center px-4 py-2',
+        'web:hover:bg-interactive-hover active:bg-interactive-active',
+        isDisabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+    >
+      {icon && <View className="mr-3">{icon}</View>}
+      <Text
+        className={cn(
+          'text-sm',
+          isDestructive ? 'text-status-error' : 'text-text-primary'
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  )
+}
+
+export interface MenuDividerProps {
+  className?: string
+}
+
+/**
+ * Divider between menu items.
+ */
+export function MenuDivider({ className }: MenuDividerProps) {
+  return <View className={cn('h-px bg-border-default my-1', className)} />
+}
+
+export interface MenuGroupProps {
+  /** Group label */
+  label?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Group of menu items with optional label.
+ */
+export function MenuGroup({ label, children, className }: MenuGroupProps) {
+  return (
+    <View className={className}>
+      {label && (
+        <Text className="px-4 py-2 text-xs font-semibold text-text-secondary uppercase">
+          {label}
+        </Text>
+      )}
+      {children}
+    </View>
+  )
+}

package/src/components/ui/menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from './Menu'
+export type { MenuProps, MenuTriggerProps, MenuListProps, MenuItemProps, MenuDividerProps, MenuGroupProps } from './Menu'