@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/link/Link.test.tsx

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Link } from './Link'
+
+describe('Link', () => {
+  it('renders children correctly', () => {
+    render(<Link>Click here</Link>)
+    expect(screen.getByText('Click here')).toBeInTheDocument()
+  })
+
+  it('has link accessibility role', () => {
+    render(<Link>Link</Link>)
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+
+  it('handles press events', () => {
+    const onPress = vi.fn()
+    render(<Link onPress={onPress}>Press me</Link>)
+    fireEvent.click(screen.getByRole('link'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire onPress when disabled', () => {
+    const onPress = vi.fn()
+    render(
+      <Link onPress={onPress} isDisabled>
+        Disabled
+      </Link>
+    )
+    fireEvent.click(screen.getByRole('link'))
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('appends external indicator when isExternal', () => {
+    render(<Link isExternal>External</Link>)
+    expect(screen.getByText(/External/)).toBeInTheDocument()
+    expect(screen.getByText(/\u2197/)).toBeInTheDocument()
+  })
+
+  it('provides accessibility hint for external links', () => {
+    render(<Link isExternal>External</Link>)
+    // react-native-web does not map accessibilityHint to aria-description
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+
+  it('does not have external hint for internal links', () => {
+    render(<Link>Internal</Link>)
+    expect(screen.getByRole('link')).not.toHaveAttribute('aria-description')
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['default', 'primary', 'secondary', 'inherit'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Link color={color}>Test</Link>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all underline options', () => {
+    const underlines = ['always', 'hover', 'none'] as const
+    underlines.forEach((underline) => {
+      const { unmount } = render(<Link underline={underline}>Test</Link>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    render(<Link className="extra">Test</Link>)
+    expect(screen.getByText('Test')).toBeInTheDocument()
+  })
+
+  it('disables the pressable when isDisabled', () => {
+    render(<Link isDisabled>Disabled link</Link>)
+    // react-native-web renders aria-disabled on a div, toBeDisabled() only works on form elements
+    expect(screen.getByRole('link')).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Link>Visit site</Link>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for external link', async () => {
+      const { container } = render(<Link isExternal>External site</Link>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/link/Link.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Text, Pressable, type TextProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type LinkUnderline = 'always' | 'hover' | 'none'
+export type LinkColor = 'default' | 'primary' | 'secondary' | 'inherit'
+
+export interface LinkProps extends Omit<TextProps, 'onPress'> {
+  /** URL to navigate to (for accessibility) */
+  href?: string
+  /** Underline behavior */
+  underline?: LinkUnderline
+  /** Link color */
+  color?: LinkColor
+  /** Whether the link opens in a new tab/window */
+  isExternal?: boolean
+  /** Press handler */
+  onPress?: () => void
+  /** Whether the link is disabled */
+  isDisabled?: boolean
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+const colorStyles: Record<LinkColor, string> = {
+  default: 'text-text-link',
+  primary: 'text-brand-primary',
+  secondary: 'text-brand-secondary',
+  inherit: '',
+}
+
+const underlineStyles: Record<LinkUnderline, string> = {
+  always: 'underline',
+  hover: 'no-underline web:hover:underline',
+  none: 'no-underline',
+}
+
+/**
+ * Link component for navigation.
+ *
+ * @example
+ * <Link href="https://example.com">Visit Site</Link>
+ * <Link href="https://example.com" isExternal>External Link ↗</Link>
+ * <Link onPress={() => navigate('/page')}>Go to Page</Link>
+ */
+export function Link({
+  href,
+  underline = 'hover',
+  color = 'default',
+  isExternal = false,
+  onPress,
+  isDisabled = false,
+  className,
+  children,
+  ...props
+}: LinkProps) {
+  const handlePress = () => {
+    if (isDisabled) return
+    onPress?.()
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="link"
+      accessibilityHint={isExternal ? 'Opens in new window' : undefined}
+    >
+      <Text
+        className={cn(
+          'font-medium',
+          colorStyles[color],
+          underlineStyles[underline],
+          isDisabled && 'opacity-50 cursor-not-allowed',
+          'web:cursor-pointer active:opacity-70',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {isExternal && ' ↗'}
+      </Text>
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Link } from './Link'
+export type { LinkProps, LinkUnderline, LinkColor } from './Link'

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

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemContent,
+  ListItemTrailing,
+  ListItemDivider,
+} from './ListItem'
+
+function UserIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: '#6366f1', justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ color: '#fff', fontSize: size * 0.5, fontWeight: '600' }}>U</Text>
+    </View>
+  )
+}
+
+function WifiIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.7 }}>W</Text>
+    </View>
+  )
+}
+
+function BellIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.7 }}>B</Text>
+    </View>
+  )
+}
+
+function LockIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.7 }}>L</Text>
+    </View>
+  )
+}
+
+function ChevronRight({ size = 16 }: { size?: number }) {
+  return <Text style={{ color: '#9ca3af', fontSize: size }}>{'>'}</Text>
+}
+
+const meta: Meta<typeof ListItem> = {
+  title: 'Components/ListItem',
+  component: ListItem,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ListItem>
+
+export const Basic: Story = {
+  render: () => (
+    <ListItem>
+      <ListItemContent title="Simple list item" />
+    </ListItem>
+  ),
+}
+
+export const WithSubtitle: Story = {
+  render: () => (
+    <ListItem>
+      <ListItemContent title="Wi-Fi" subtitle="Connected to HomeNetwork" />
+    </ListItem>
+  ),
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <ListItem>
+      <ListItemIcon icon={WifiIcon} />
+      <ListItemContent title="Wi-Fi" subtitle="Connected" />
+    </ListItem>
+  ),
+}
+
+export const WithTrailing: Story = {
+  render: () => (
+    <ListItem onPress={() => {}}>
+      <ListItemIcon icon={UserIcon} />
+      <ListItemContent title="Account" subtitle="Manage your account" />
+      <ListItemTrailing>
+        <ChevronRight />
+      </ListItemTrailing>
+    </ListItem>
+  ),
+}
+
+export const SettingsList: Story = {
+  render: () => (
+    <View>
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={UserIcon} />
+        <ListItemContent title="Profile" subtitle="Edit your profile details" />
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
+      <ListItemDivider />
+
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={BellIcon} />
+        <ListItemContent title="Notifications" subtitle="Push, email, SMS" />
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
+      <ListItemDivider />
+
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={LockIcon} />
+        <ListItemContent title="Privacy" subtitle="Manage your data" />
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
+      <ListItemDivider />
+
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={WifiIcon} />
+        <ListItemContent title="Wi-Fi" subtitle="HomeNetwork" />
+        <ListItemTrailing>
+          <Text style={{ color: '#22c55e', fontSize: 12 }}>Connected</Text>
+        </ListItemTrailing>
+      </ListItem>
+    </View>
+  ),
+}
+
+export const FullWidthDivider: Story = {
+  render: () => (
+    <View>
+      <ListItem>
+        <ListItemContent title="First item" />
+      </ListItem>
+      <ListItemDivider inset={false} />
+      <ListItem>
+        <ListItemContent title="Second item" />
+      </ListItem>
+    </View>
+  ),
+}

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'