@titan-design/react-ui 0.1.0 → 0.2.5

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

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from './Menu'
+import { Button, ButtonText } from '../button/Button'
+
+const meta: Meta<typeof Menu> = {
+  title: 'Components/Menu',
+  component: Menu,
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Controlled open state',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ minHeight: 300, padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Menu>
+
+export const Default: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuItem onPress={() => {}}>Edit</MenuItem>
+        <MenuItem onPress={() => {}}>Duplicate</MenuItem>
+        <MenuItem onPress={() => {}}>Share</MenuItem>
+      </MenuList>
+    </Menu>
+  ),
+}
+
+export const WithGroups: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>Actions</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuGroup label="Edit">
+          <MenuItem onPress={() => {}}>Cut</MenuItem>
+          <MenuItem onPress={() => {}}>Copy</MenuItem>
+          <MenuItem onPress={() => {}}>Paste</MenuItem>
+        </MenuGroup>
+        <MenuDivider />
+        <MenuGroup label="View">
+          <MenuItem onPress={() => {}}>Zoom In</MenuItem>
+          <MenuItem onPress={() => {}}>Zoom Out</MenuItem>
+          <MenuItem onPress={() => {}}>Reset Zoom</MenuItem>
+        </MenuGroup>
+      </MenuList>
+    </Menu>
+  ),
+}
+
+function EditIcon({ size = 14 }: { size?: number }) {
+  return (
+    <Text style={{ fontSize: size, lineHeight: size }}>&#9998;</Text>
+  )
+}
+
+function TrashIcon({ size = 14 }: { size?: number }) {
+  return (
+    <Text style={{ fontSize: size, lineHeight: size }}>&#128465;</Text>
+  )
+}
+
+function CopyIcon({ size = 14 }: { size?: number }) {
+  return (
+    <Text style={{ fontSize: size, lineHeight: size }}>&#128203;</Text>
+  )
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>More</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuItem icon={<EditIcon />} onPress={() => {}}>Edit</MenuItem>
+        <MenuItem icon={<CopyIcon />} onPress={() => {}}>Duplicate</MenuItem>
+        <MenuDivider />
+        <MenuItem icon={<TrashIcon />} onPress={() => {}} isDestructive>Delete</MenuItem>
+      </MenuList>
+    </Menu>
+  ),
+}
+
+export const DestructiveItem: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>Manage</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuItem onPress={() => {}}>Edit Profile</MenuItem>
+        <MenuItem onPress={() => {}}>Change Password</MenuItem>
+        <MenuDivider />
+        <MenuItem onPress={() => {}} isDestructive>Delete Account</MenuItem>
+      </MenuList>
+    </Menu>
+  ),
+}
+
+export const WithDividers: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>File</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuItem onPress={() => {}}>New File</MenuItem>
+        <MenuItem onPress={() => {}}>Open File</MenuItem>
+        <MenuDivider />
+        <MenuItem onPress={() => {}}>Save</MenuItem>
+        <MenuItem onPress={() => {}}>Save As</MenuItem>
+        <MenuDivider />
+        <MenuItem onPress={() => {}}>Export</MenuItem>
+      </MenuList>
+    </Menu>
+  ),
+}
+
+export const DisabledItems: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>Edit</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuItem onPress={() => {}}>Undo</MenuItem>
+        <MenuItem onPress={() => {}} isDisabled>Redo</MenuItem>
+        <MenuDivider />
+        <MenuItem onPress={() => {}}>Cut</MenuItem>
+        <MenuItem onPress={() => {}}>Copy</MenuItem>
+        <MenuItem onPress={() => {}} isDisabled>Paste</MenuItem>
+      </MenuList>
+    </Menu>
+  ),
+}
+
+export const Controlled: Story = {
+  render: () => (
+    <Menu isOpen>
+      <MenuTrigger>
+        <Button variant="outline" color="primary">
+          <ButtonText>Always Open</ButtonText>
+        </Button>
+      </MenuTrigger>
+      <MenuList>
+        <MenuItem onPress={() => {}}>Item One</MenuItem>
+        <MenuItem onPress={() => {}}>Item Two</MenuItem>
+        <MenuItem onPress={() => {}}>Item Three</MenuItem>
+      </MenuList>
+    </Menu>
+  ),
+}

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()
+    })
+  })
+})