@titan-design/react-ui 0.0.2 → 0.1.1

package/src/components/ui/list-item/ListItem.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { View, Text } from 'react-native'
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemContent,
+  ListItemTrailing,
+  ListItemDivider,
+} from './ListItem'
+
+function MockIcon({ size = 20 }: { size?: number; className?: string }) {
+  return <View testID="mock-icon" style={{ width: size, height: size }} />
+}
+
+function ChevronIcon({ size = 16 }: { size?: number; className?: string }) {
+  return <Text>{'>'}</Text>
+}
+
+describe('ListItem', () => {
+  it('renders compound children', () => {
+    render(
+      <ListItem>
+        <ListItemIcon icon={MockIcon} />
+        <ListItemContent title="Profile" subtitle="Edit your profile" />
+        <ListItemTrailing>
+          <Text>{'>'}</Text>
+        </ListItemTrailing>
+      </ListItem>
+    )
+
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+    expect(screen.getByText('Profile')).toBeInTheDocument()
+    expect(screen.getByText('Edit your profile')).toBeInTheDocument()
+    expect(screen.getByText('>')).toBeInTheDocument()
+  })
+
+  it('handles press events when onPress is provided', () => {
+    const onPress = vi.fn()
+    render(
+      <ListItem onPress={onPress} testID="list-item">
+        <ListItemContent title="Pressable item" />
+      </ListItem>
+    )
+
+    fireEvent.click(screen.getByTestId('list-item'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('uses View when onPress is not provided', () => {
+    const { container } = render(
+      <ListItem testID="list-item">
+        <ListItemContent title="Static item" />
+      </ListItem>
+    )
+
+    // Without onPress, should not have button role
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    expect(screen.getByText('Static item')).toBeInTheDocument()
+  })
+})
+
+describe('ListItemContent', () => {
+  it('renders title', () => {
+    render(<ListItemContent title="Settings" />)
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('renders title and subtitle', () => {
+    render(<ListItemContent title="Wi-Fi" subtitle="Connected" />)
+    expect(screen.getByText('Wi-Fi')).toBeInTheDocument()
+    expect(screen.getByText('Connected')).toBeInTheDocument()
+  })
+
+  it('omits subtitle when not provided', () => {
+    render(<ListItemContent title="Bluetooth" />)
+    expect(screen.getByText('Bluetooth')).toBeInTheDocument()
+    expect(screen.queryByText('Connected')).not.toBeInTheDocument()
+  })
+})
+
+describe('ListItemTrailing', () => {
+  it('renders trailing content', () => {
+    render(
+      <ListItemTrailing>
+        <Text>Badge</Text>
+      </ListItemTrailing>
+    )
+    expect(screen.getByText('Badge')).toBeInTheDocument()
+  })
+})
+
+describe('ListItemDivider', () => {
+  it('renders with inset by default', () => {
+    const { container } = render(<ListItemDivider testID="divider" />)
+    expect(screen.getByTestId('divider')).toBeInTheDocument()
+  })
+
+  it('renders full-width when inset is false', () => {
+    render(<ListItemDivider inset={false} testID="divider-full" />)
+    expect(screen.getByTestId('divider-full')).toBeInTheDocument()
+  })
+})
+
+describe('ListItem accessibility', () => {
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <ListItem>
+        <ListItemContent title="Accessible item" subtitle="With subtitle" />
+      </ListItem>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it('has no accessibility violations when pressable', async () => {
+    const { container } = render(
+      <ListItem onPress={() => {}} accessibilityRole="button">
+        <ListItemContent title="Pressable item" />
+      </ListItem>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/ui/list-item/ListItem.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps, type PressableProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+// --- ListItem (container) ---
+
+export interface ListItemProps extends PressableProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function ListItem({ className, children, onPress, ...props }: ListItemProps) {
+  const Container = onPress ? Pressable : View
+  const containerProps = onPress ? { onPress, ...props } : props
+
+  return (
+    <Container
+      className={cn('flex-row items-center py-3 px-4 min-h-[48px]', className)}
+      {...(containerProps as any)}
+    >
+      {children}
+    </Container>
+  )
+}
+
+// --- ListItemIcon (leading slot) ---
+
+export interface ListItemIconProps extends ViewProps {
+  icon: React.ComponentType<{ size?: number; className?: string }>
+  className?: string
+}
+
+export function ListItemIcon({ icon: Icon, className, ...props }: ListItemIconProps) {
+  return (
+    <View className={cn('mr-3 items-center justify-center', className)} {...props}>
+      <Icon size={20} className="text-text-secondary" />
+    </View>
+  )
+}
+
+// --- ListItemContent (title + subtitle) ---
+
+export interface ListItemContentProps extends ViewProps {
+  title: string
+  subtitle?: string
+  className?: string
+}
+
+export function ListItemContent({ title, subtitle, className, ...props }: ListItemContentProps) {
+  return (
+    <View className={cn('flex-1 justify-center', className)} {...props}>
+      <Text className="text-sm font-medium text-text-primary">{title}</Text>
+      {subtitle && (
+        <Text className="text-xs text-text-secondary mt-0.5">{subtitle}</Text>
+      )}
+    </View>
+  )
+}
+
+// --- ListItemTrailing (right-side slot) ---
+
+export interface ListItemTrailingProps extends ViewProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function ListItemTrailing({ className, children, ...props }: ListItemTrailingProps) {
+  return (
+    <View className={cn('ml-3 items-center justify-center', className)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+// --- ListItemDivider ---
+
+export interface ListItemDividerProps extends ViewProps {
+  inset?: boolean
+  className?: string
+}
+
+export function ListItemDivider({ inset = true, className, ...props }: ListItemDividerProps) {
+  return (
+    <View
+      className={cn('h-px bg-divider', inset ? 'ml-14' : '', className)}
+      {...props}
+    />
+  )
+}

package/src/components/ui/list-item/index.ts

@@ -0,0 +1,14 @@
+export {
+  ListItem,
+  ListItemIcon,
+  ListItemContent,
+  ListItemTrailing,
+  ListItemDivider,
+} from './ListItem'
+export type {
+  ListItemProps,
+  ListItemIconProps,
+  ListItemContentProps,
+  ListItemTrailingProps,
+  ListItemDividerProps,
+} from './ListItem'

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