@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/autocomplete/Autocomplete.test.tsx

@@ -0,0 +1,247 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Autocomplete } from './Autocomplete'
+
+const defaultOptions = [
+  { value: '1', label: 'Apple' },
+  { value: '2', label: 'Banana' },
+  { value: '3', label: 'Cherry' },
+]
+
+const optionsWithDescriptions = [
+  { value: 'user1', label: 'John Doe', description: 'john@example.com' },
+  { value: 'user2', label: 'Jane Smith', description: 'jane@example.com' },
+]
+
+function typeInInput(input: HTMLElement, text: string) {
+  fireEvent.focus(input)
+  fireEvent.change(input, { target: { value: text } })
+}
+
+describe('Autocomplete', () => {
+  it('renders with placeholder', () => {
+    render(<Autocomplete options={defaultOptions} placeholder="Search fruits..." />)
+    expect(screen.getByPlaceholderText('Search fruits...')).toBeInTheDocument()
+  })
+
+  it('renders default placeholder', () => {
+    render(<Autocomplete options={defaultOptions} />)
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+  })
+
+  it('renders label', () => {
+    render(<Autocomplete options={defaultOptions} label="Fruit" />)
+    expect(screen.getByText('Fruit')).toBeInTheDocument()
+  })
+
+  it('renders required indicator', () => {
+    render(<Autocomplete options={defaultOptions} label="Fruit" isRequired />)
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+
+  it('renders helper text', () => {
+    render(<Autocomplete options={defaultOptions} helperText="Pick your favorite" />)
+    expect(screen.getByText('Pick your favorite')).toBeInTheDocument()
+  })
+
+  it('renders error message instead of helper text', () => {
+    render(
+      <Autocomplete
+        options={defaultOptions}
+        helperText="Pick one"
+        errorMessage="This field is required"
+      />
+    )
+    expect(screen.getByText('This field is required')).toBeInTheDocument()
+    expect(screen.queryByText('Pick one')).not.toBeInTheDocument()
+  })
+
+  it('filters options based on input', () => {
+    render(<Autocomplete options={defaultOptions} />)
+    const input = screen.getByPlaceholderText('Search...')
+
+    typeInInput(input, 'App')
+    expect(screen.getByText('Apple')).toBeInTheDocument()
+    expect(screen.queryByText('Banana')).not.toBeInTheDocument()
+  })
+
+  it('shows no options text when no results match', () => {
+    render(<Autocomplete options={defaultOptions} />)
+    const input = screen.getByPlaceholderText('Search...')
+
+    typeInInput(input, 'Zzzz')
+    expect(screen.getByText('No options found')).toBeInTheDocument()
+  })
+
+  it('shows custom no options text', () => {
+    render(<Autocomplete options={defaultOptions} noOptionsText="Nothing here" />)
+    const input = screen.getByPlaceholderText('Search...')
+
+    typeInInput(input, 'Zzzz')
+    expect(screen.getByText('Nothing here')).toBeInTheDocument()
+  })
+
+  it('calls onChange when option is selected', () => {
+    const onChange = vi.fn()
+    render(<Autocomplete options={defaultOptions} onChange={onChange} />)
+    const input = screen.getByPlaceholderText('Search...')
+
+    typeInInput(input, 'Apple')
+    fireEvent.click(screen.getByText('Apple'))
+    expect(onChange).toHaveBeenCalledWith('1')
+  })
+
+  it('calls onInputChange when input text changes', () => {
+    const onInputChange = vi.fn()
+    render(<Autocomplete options={defaultOptions} onInputChange={onInputChange} />)
+    const input = screen.getByPlaceholderText('Search...')
+
+    typeInInput(input, 'Ban')
+    expect(onInputChange).toHaveBeenCalledWith('Ban')
+  })
+
+  it('shows clear button when value is selected', () => {
+    render(
+      <Autocomplete options={defaultOptions} value="1" isClearable />
+    )
+    expect(screen.getByLabelText('Clear selection')).toBeInTheDocument()
+  })
+
+  it('calls onChange with null when clear is pressed', () => {
+    const onChange = vi.fn()
+    render(
+      <Autocomplete options={defaultOptions} value="1" onChange={onChange} isClearable />
+    )
+
+    fireEvent.click(screen.getByLabelText('Clear selection'))
+    expect(onChange).toHaveBeenCalledWith(null)
+  })
+
+  it('does not show clear button when isClearable is false', () => {
+    render(
+      <Autocomplete options={defaultOptions} value="1" isClearable={false} />
+    )
+    expect(screen.queryByLabelText('Clear selection')).not.toBeInTheDocument()
+  })
+
+  describe('minChars', () => {
+    it('does not show options until minimum characters are typed', () => {
+      render(<Autocomplete options={defaultOptions} minChars={3} />)
+      const input = screen.getByPlaceholderText('Search...')
+
+      typeInInput(input, 'Ap')
+      expect(screen.queryByText('Apple')).not.toBeInTheDocument()
+      expect(screen.getByText('Type at least 3 characters')).toBeInTheDocument()
+    })
+
+    it('shows options after minimum characters are typed', () => {
+      render(<Autocomplete options={defaultOptions} minChars={3} />)
+      const input = screen.getByPlaceholderText('Search...')
+
+      typeInInput(input, 'App')
+      expect(screen.getByText('Apple')).toBeInTheDocument()
+    })
+
+    it('shows custom minCharsText', () => {
+      render(
+        <Autocomplete
+          options={defaultOptions}
+          minChars={3}
+          minCharsText="Keep typing..."
+        />
+      )
+      const input = screen.getByPlaceholderText('Search...')
+
+      typeInInput(input, 'A')
+      expect(screen.getByText('Keep typing...')).toBeInTheDocument()
+    })
+  })
+
+  describe('loading state', () => {
+    it('shows loading indicator when isLoading', () => {
+      render(<Autocomplete options={defaultOptions} isLoading />)
+      const input = screen.getByPlaceholderText('Search...')
+      // The loading spinner icon is always visible, but loading text is in the dropdown
+      // which requires isOpen=true. Focus to open dropdown.
+      fireEvent.focus(input)
+      expect(screen.getByText('Loading...')).toBeInTheDocument()
+    })
+
+    it('shows custom loading text', () => {
+      render(<Autocomplete options={defaultOptions} isLoading loadingText="Fetching..." />)
+      const input = screen.getByPlaceholderText('Search...')
+      fireEvent.focus(input)
+      expect(screen.getByText('Fetching...')).toBeInTheDocument()
+    })
+  })
+
+  describe('disabled state', () => {
+    it('renders as disabled', () => {
+      render(<Autocomplete options={defaultOptions} isDisabled />)
+      const input = screen.getByPlaceholderText('Search...')
+      // react-native-web renders TextInput with editable=false as readonly
+      expect(input).toHaveAttribute('readonly')
+    })
+
+    it('does not show clear button when disabled', () => {
+      render(
+        <Autocomplete options={defaultOptions} value="1" isDisabled isClearable />
+      )
+      expect(screen.queryByLabelText('Clear selection')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('options with descriptions', () => {
+    it('renders option descriptions', () => {
+      render(<Autocomplete options={optionsWithDescriptions} />)
+      const input = screen.getByPlaceholderText('Search...')
+
+      typeInInput(input, 'John')
+      expect(screen.getByText('John Doe')).toBeInTheDocument()
+      expect(screen.getByText('john@example.com')).toBeInTheDocument()
+    })
+
+    it('filters by description text', () => {
+      render(<Autocomplete options={optionsWithDescriptions} />)
+      const input = screen.getByPlaceholderText('Search...')
+
+      typeInInput(input, 'jane@')
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument()
+      expect(screen.queryByText('John Doe')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('custom filter function', () => {
+    it('uses custom filter function', () => {
+      const filterFn = vi.fn().mockReturnValue(true)
+      render(<Autocomplete options={defaultOptions} filterFn={filterFn} />)
+      const input = screen.getByPlaceholderText('Search...')
+
+      typeInInput(input, 'test')
+      expect(filterFn).toHaveBeenCalled()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Autocomplete options={defaultOptions} label="Search" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has accessible label on input', () => {
+      render(<Autocomplete options={defaultOptions} label="Search fruits" />)
+      expect(screen.getByLabelText('Search fruits')).toBeInTheDocument()
+    })
+
+    it('clear button has accessible label', () => {
+      render(
+        <Autocomplete options={defaultOptions} value="1" isClearable />
+      )
+      expect(screen.getByLabelText('Clear selection')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/ui/autocomplete/Autocomplete.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useCallback, useMemo } from 'react'
+import { View, Text, TextInput, Pressable, ScrollView, type ViewProps, type TextInputProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface AutocompleteOption<T = string> {
+  value: T
+  label: string
+  description?: string
+  isDisabled?: boolean
+}
+
+export interface AutocompleteProps<T = string> extends ViewProps {
+  /** Available options */
+  options: AutocompleteOption<T>[]
+  /** Current selected value */
+  value?: T | null
+  /** Callback when value changes */
+  onChange?: (value: T | null) => void
+  /** Callback when input text changes (for async loading) */
+  onInputChange?: (inputValue: string) => void
+  /** Minimum characters before showing options */
+  minChars?: number
+  /** Placeholder text */
+  placeholder?: string
+  /** Label text */
+  label?: string
+  /** Helper text */
+  helperText?: string
+  /** Error message */
+  errorMessage?: string
+  /** Whether the field is required */
+  isRequired?: boolean
+  /** Whether the field is disabled */
+  isDisabled?: boolean
+  /** Whether the field is loading */
+  isLoading?: boolean
+  /** Whether to allow clearing the value */
+  isClearable?: boolean
+  /** Custom filter function */
+  filterFn?: (option: AutocompleteOption<T>, inputValue: string) => boolean
+  /** Custom render function for options */
+  renderOption?: (option: AutocompleteOption<T>, isHighlighted: boolean) => React.ReactNode
+  /** Text to show when no options match */
+  noOptionsText?: string
+  /** Text to show when loading */
+  loadingText?: string
+  /** Text to show when min chars not met */
+  minCharsText?: string
+  /** Additional className */
+  className?: string
+  /** Input props */
+  inputProps?: Partial<TextInputProps>
+}
+
+const defaultFilterFn = <T,>(option: AutocompleteOption<T>, inputValue: string) => {
+  const searchLower = inputValue.toLowerCase()
+  return (
+    option.label.toLowerCase().includes(searchLower) ||
+    (option.description?.toLowerCase().includes(searchLower) ?? false)
+  )
+}
+
+/**
+ * Autocomplete component for searchable dropdown selection.
+ *
+ * @example
+ * // Basic usage
+ * <Autocomplete
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // With descriptions
+ * <Autocomplete
+ *   options={[
+ *     { value: 'user1', label: 'John Doe', description: 'john@example.com' },
+ *     { value: 'user2', label: 'Jane Smith', description: 'jane@example.com' },
+ *   ]}
+ *   label="Select User"
+ *   value={selectedUser}
+ *   onChange={setSelectedUser}
+ * />
+ */
+export function Autocomplete<T extends string = string>({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  minChars = 0,
+  placeholder = 'Search...',
+  label,
+  helperText,
+  errorMessage,
+  isRequired = false,
+  isDisabled = false,
+  isLoading = false,
+  isClearable = true,
+  filterFn = defaultFilterFn,
+  renderOption,
+  noOptionsText = 'No options found',
+  loadingText = 'Loading...',
+  minCharsText,
+  className,
+  inputProps,
+  ...props
+}: AutocompleteProps<T>) {
+  const [inputValue, setInputValue] = useState('')
+  const [isOpen, setIsOpen] = useState(false)
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+
+  // Get the label for the selected value
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  )
+
+  // Filter options based on input
+  const filteredOptions = useMemo(() => {
+    if (inputValue.length < minChars) return []
+    return options.filter((option) => filterFn(option, inputValue))
+  }, [options, inputValue, minChars, filterFn])
+
+  const handleInputChange = useCallback(
+    (text: string) => {
+      setInputValue(text)
+      setIsOpen(true)
+      setHighlightedIndex(-1)
+      onInputChange?.(text)
+    },
+    [onInputChange]
+  )
+
+  const handleSelectOption = useCallback(
+    (option: AutocompleteOption<T>) => {
+      if (option.isDisabled) return
+      onChange?.(option.value)
+      setInputValue(option.label)
+      setIsOpen(false)
+    },
+    [onChange]
+  )
+
+  const handleClear = useCallback(() => {
+    onChange?.(null)
+    setInputValue('')
+    setIsOpen(false)
+  }, [onChange])
+
+  const handleFocus = useCallback(() => {
+    setIsOpen(true)
+    // If there's a selected value, populate the input
+    if (selectedOption && !inputValue) {
+      setInputValue(selectedOption.label)
+    }
+  }, [selectedOption, inputValue])
+
+  const handleBlur = useCallback(() => {
+    // Delay to allow click on options
+    setTimeout(() => {
+      setIsOpen(false)
+      // Reset input to selected value if nothing new selected
+      if (selectedOption) {
+        setInputValue(selectedOption.label)
+      } else {
+        setInputValue('')
+      }
+    }, 200)
+  }, [selectedOption])
+
+  const isInvalid = !!errorMessage
+  const showMinCharsMessage = inputValue.length > 0 && inputValue.length < minChars
+  const showNoResults = !isLoading && inputValue.length >= minChars && filteredOptions.length === 0
+  const showOptions = isOpen && !showMinCharsMessage && filteredOptions.length > 0
+
+  return (
+    <View className={cn('w-full', className)} {...props}>
+      {/* Label */}
+      {label && (
+        <Text className="text-sm font-medium text-text-primary mb-1">
+          {label}
+          {isRequired && <Text className="text-status-error ml-0.5">*</Text>}
+        </Text>
+      )}
+
+      {/* Input Container */}
+      <View className="relative">
+        <View
+          className={cn(
+            'flex-row items-center border rounded-md',
+            'bg-surface-input',
+            isInvalid ? 'border-border-input-error' : 'border-border-input',
+            !isDisabled && !isInvalid && 'focus-within:border-border-input-focus',
+            isDisabled && 'opacity-50'
+          )}
+        >
+          <TextInput
+            value={inputValue}
+            onChangeText={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            editable={!isDisabled}
+            className={cn(
+              'flex-1 px-3 py-2 text-text-primary',
+              'placeholder:text-text-tertiary'
+            )}
+            accessibilityLabel={label}
+            {...inputProps}
+          />
+
+          {/* Clear button */}
+          {isClearable && value && !isDisabled && (
+            <Pressable
+              onPress={handleClear}
+              className="p-2"
+              accessibilityLabel="Clear selection"
+            >
+              <Text className="text-text-tertiary">×</Text>
+            </Pressable>
+          )}
+
+          {/* Loading indicator */}
+          {isLoading && (
+            <View className="p-2">
+              <Text className="text-text-tertiary animate-spin">⟳</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Dropdown */}
+        {isOpen && (
+          <View
+            className={cn(
+              'absolute z-50 top-full left-0 right-0 mt-1',
+              'bg-surface-elevated rounded-md shadow-lg border border-border-default',
+              'max-h-60 overflow-hidden'
+            )}
+          >
+            <ScrollView className="py-1">
+              {/* Min chars message */}
+              {showMinCharsMessage && (
+                <Text className="px-3 py-2 text-sm text-text-tertiary">
+                  {minCharsText || `Type at least ${minChars} characters`}
+                </Text>
+              )}
+
+              {/* Loading message */}
+              {isLoading && (
+                <Text className="px-3 py-2 text-sm text-text-tertiary">
+                  {loadingText}
+                </Text>
+              )}
+
+              {/* No results */}
+              {showNoResults && (
+                <Text className="px-3 py-2 text-sm text-text-tertiary">
+                  {noOptionsText}
+                </Text>
+              )}
+
+              {/* Options */}
+              {showOptions &&
+                filteredOptions.map((option, index) => {
+                  const isHighlighted = index === highlightedIndex
+                  const isSelected = option.value === value
+
+                  if (renderOption) {
+                    return (
+                      <Pressable
+                        key={String(option.value)}
+                        onPress={() => handleSelectOption(option)}
+                        disabled={option.isDisabled}
+                      >
+                        {renderOption(option, isHighlighted)}
+                      </Pressable>
+                    )
+                  }
+
+                  return (
+                    <Pressable
+                      key={String(option.value)}
+                      onPress={() => handleSelectOption(option)}
+                      disabled={option.isDisabled}
+                      className={cn(
+                        'px-3 py-2',
+                        isHighlighted && 'bg-interactive-hover',
+                        isSelected && 'bg-interactive-selected',
+                        option.isDisabled && 'opacity-50',
+                        !option.isDisabled && 'web:hover:bg-interactive-hover'
+                      )}
+                    >
+                      <Text
+                        className={cn(
+                          'text-sm',
+                          isSelected ? 'text-brand-primary font-medium' : 'text-text-primary'
+                        )}
+                      >
+                        {option.label}
+                      </Text>
+                      {option.description && (
+                        <Text className="text-xs text-text-tertiary mt-0.5">
+                          {option.description}
+                        </Text>
+                      )}
+                    </Pressable>
+                  )
+                })}
+            </ScrollView>
+          </View>
+        )}
+      </View>
+
+      {/* Helper/Error text */}
+      {(helperText || errorMessage) && (
+        <Text
+          className={cn(
+            'text-xs mt-1',
+            isInvalid ? 'text-status-error' : 'text-text-tertiary'
+          )}
+        >
+          {errorMessage || helperText}
+        </Text>
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Autocomplete } from './Autocomplete'
+export type { AutocompleteProps, AutocompleteOption } from './Autocomplete'

package/src/components/ui/avatar/Avatar.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      description: 'Avatar size',
+    },
+    fallback: {
+      control: 'text',
+      description: 'Fallback text (usually initials)',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for accessibility',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  args: {
+    fallback: 'JD',
+    size: 'md',
+    alt: 'John Doe',
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Avatar size="xs" fallback="XS" />
+      <Avatar size="sm" fallback="SM" />
+      <Avatar size="md" fallback="MD" />
+      <Avatar size="lg" fallback="LG" />
+      <Avatar size="xl" fallback="XL" />
+      <Avatar size="2xl" fallback="2X" />
+    </View>
+  ),
+}
+
+export const WithImage: Story = {
+  args: {
+    source: { uri: 'https://i.pravatar.cc/150?u=avatar-story' },
+    alt: 'User avatar',
+    size: 'lg',
+  },
+}
+
+export const FallbackInitials: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      <Avatar fallback="AB" alt="Alice Brown" />
+      <Avatar fallback="CD" alt="Charlie Davis" />
+      <Avatar fallback="EF" alt="Eve Foster" />
+    </View>
+  ),
+}
+
+export const WithBadge: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16 }}>
+      <View>
+        <Avatar fallback="JD" size="lg" />
+        <AvatarBadge color="success" />
+      </View>
+      <View>
+        <Avatar fallback="AB" size="lg" />
+        <AvatarBadge color="error" />
+      </View>
+      <View>
+        <Avatar fallback="CD" size="lg" />
+        <AvatarBadge color="warning" />
+      </View>
+    </View>
+  ),
+}
+
+export const Group: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <AvatarGroup size="md">
+        <Avatar fallback="A" />
+        <Avatar fallback="B" />
+        <Avatar fallback="C" />
+        <Avatar fallback="D" />
+      </AvatarGroup>
+      <AvatarGroup size="md" max={3}>
+        <Avatar fallback="A" />
+        <Avatar fallback="B" />
+        <Avatar fallback="C" />
+        <Avatar fallback="D" />
+        <Avatar fallback="E" />
+      </AvatarGroup>
+    </View>
+  ),
+}