@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/section/Section.test.tsx

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Text } from 'react-native'
+import { Section, SectionHeader, SectionContent } from './Section'
+
+describe('Section', () => {
+  it('renders children correctly', () => {
+    render(
+      <Section>
+        <Text>Section content</Text>
+      </Section>
+    )
+    expect(screen.getByText('Section content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Section className="mt-4" testID="section">
+        <Text>Content</Text>
+      </Section>
+    )
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+})
+
+describe('SectionHeader', () => {
+  it('renders title', () => {
+    render(<SectionHeader title="My Section" />)
+    expect(screen.getByText('My Section')).toBeInTheDocument()
+  })
+
+  it('renders subtitle when provided', () => {
+    render(<SectionHeader title="Title" subtitle="Subtitle text" />)
+    expect(screen.getByText('Title')).toBeInTheDocument()
+    expect(screen.getByText('Subtitle text')).toBeInTheDocument()
+  })
+
+  it('does not render subtitle when not provided', () => {
+    render(<SectionHeader title="Title" />)
+    expect(screen.queryByText('Subtitle text')).not.toBeInTheDocument()
+  })
+
+  it('renders trailing action when provided', () => {
+    render(
+      <SectionHeader
+        title="Title"
+        trailing={<Text>View All</Text>}
+      />
+    )
+    expect(screen.getByText('View All')).toBeInTheDocument()
+  })
+
+  it('does not render trailing when not provided', () => {
+    const { container } = render(<SectionHeader title="Title" />)
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<SectionHeader title="Title" className="px-4" />)
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
+})
+
+describe('SectionContent', () => {
+  it('renders children correctly', () => {
+    render(
+      <SectionContent>
+        <Text>Inner content</Text>
+      </SectionContent>
+    )
+    expect(screen.getByText('Inner content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <SectionContent className="p-4">
+        <Text>Styled content</Text>
+      </SectionContent>
+    )
+    expect(screen.getByText('Styled content')).toBeInTheDocument()
+  })
+})
+
+describe('Section compound component', () => {
+  it('composes all subcomponents together', () => {
+    render(
+      <Section>
+        <SectionHeader
+          title="Workout Stats"
+          subtitle="Last 7 days"
+          trailing={<Text>See All</Text>}
+        />
+        <SectionContent>
+          <Text>Stats go here</Text>
+        </SectionContent>
+      </Section>
+    )
+
+    expect(screen.getByText('Workout Stats')).toBeInTheDocument()
+    expect(screen.getByText('Last 7 days')).toBeInTheDocument()
+    expect(screen.getByText('See All')).toBeInTheDocument()
+    expect(screen.getByText('Stats go here')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Section>
+          <SectionHeader title="Accessible Section" subtitle="With subtitle" />
+          <SectionContent>
+            <Text>Content</Text>
+          </SectionContent>
+        </Section>
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/section/Section.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface SectionProps extends ViewProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function Section({ className, children, ...props }: SectionProps) {
+  return (
+    <View className={cn('mb-6', className)} {...props}>
+      {children}
+    </View>
+  )
+}
+
+export interface SectionHeaderProps {
+  title: string
+  subtitle?: string
+  trailing?: React.ReactNode
+  className?: string
+}
+
+export function SectionHeader({ title, subtitle, trailing, className }: SectionHeaderProps) {
+  return (
+    <View className={cn('flex-row items-center justify-between mb-3 px-1', className)}>
+      <View className="flex-1">
+        <Text className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
+          {title}
+        </Text>
+        {subtitle && (
+          <Text className="text-xs text-text-tertiary mt-0.5">{subtitle}</Text>
+        )}
+      </View>
+      {trailing && <View>{trailing}</View>}
+    </View>
+  )
+}
+
+export interface SectionContentProps extends ViewProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function SectionContent({ className, children, ...props }: SectionContentProps) {
+  return (
+    <View className={cn(className)} {...props}>
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,6 @@
+export { Section, SectionHeader, SectionContent } from './Section'
+export type {
+  SectionProps,
+  SectionHeaderProps,
+  SectionContentProps,
+} from './Section'

package/src/components/ui/select/Select.stories.tsx

@@ -0,0 +1,286 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Select, type SelectOption } from './Select'
+
+const basicOptions: SelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'dragonfruit', label: 'Dragon Fruit' },
+  { value: 'elderberry', label: 'Elderberry' },
+]
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no value is selected',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the select is disabled',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the select has an error state',
+    },
+    isMulti: {
+      control: 'boolean',
+      description: 'Enable multi-select mode',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const Default: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View style={{ width: 300 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={basicOptions}
+          placeholder="Select a fruit..."
+        />
+      </View>
+    )
+  },
+}
+
+export const WithPlaceholder: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View style={{ width: 300 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={basicOptions}
+          placeholder="Choose your favorite fruit..."
+        />
+      </View>
+    )
+  },
+}
+
+export const WithPreselectedValue: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('cherry')
+    return (
+      <View style={{ width: 300 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={basicOptions}
+          placeholder="Select a fruit..."
+        />
+      </View>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 12, width: 300 }}>
+      <View style={{ gap: 4 }}>
+        <Text className="text-sm text-text-secondary">Disabled with no value</Text>
+        <Select
+          value={null}
+          onChange={() => {}}
+          options={basicOptions}
+          isDisabled
+          placeholder="Select a fruit..."
+        />
+      </View>
+      <View style={{ gap: 4 }}>
+        <Text className="text-sm text-text-secondary">Disabled with value</Text>
+        <Select
+          value="banana"
+          onChange={() => {}}
+          options={basicOptions}
+          isDisabled
+        />
+      </View>
+    </View>
+  ),
+}
+
+export const Invalid: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View style={{ width: 300, gap: 4 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={basicOptions}
+          isInvalid
+          placeholder="Select a fruit..."
+        />
+        <Text className="text-sm text-status-error">This field is required</Text>
+      </View>
+    )
+  },
+}
+
+export const MultiSelect: Story = {
+  render: function Render() {
+    const [values, setValues] = useState<string[]>([])
+    return (
+      <View style={{ width: 300, gap: 8 }}>
+        <Select
+          isMulti
+          values={values}
+          onChangeMulti={setValues}
+          options={basicOptions}
+          placeholder="Select fruits..."
+        />
+        <Text className="text-sm text-text-secondary">
+          Selected: {values.length > 0 ? values.join(', ') : 'none'}
+        </Text>
+      </View>
+    )
+  },
+}
+
+export const MultiSelectWithPreselected: Story = {
+  render: function Render() {
+    const [values, setValues] = useState<string[]>(['apple', 'cherry'])
+    return (
+      <View style={{ width: 300, gap: 8 }}>
+        <Select
+          isMulti
+          values={values}
+          onChangeMulti={setValues}
+          options={basicOptions}
+          placeholder="Select fruits..."
+        />
+        <Text className="text-sm text-text-secondary">
+          Selected: {values.length > 0 ? values.join(', ') : 'none'}
+        </Text>
+      </View>
+    )
+  },
+}
+
+export const ManyOptions: Story = {
+  render: function Render() {
+    const manyOptions: SelectOption[] = Array.from({ length: 50 }, (_, i) => ({
+      value: `option-${i + 1}`,
+      label: `Option ${i + 1}`,
+    }))
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View style={{ width: 300 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={manyOptions}
+          placeholder="Select from many options..."
+        />
+      </View>
+    )
+  },
+}
+
+export const WithDisabledOptions: Story = {
+  render: function Render() {
+    const optionsWithDisabled: SelectOption[] = [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana', isDisabled: true },
+      { value: 'cherry', label: 'Cherry' },
+      { value: 'dragonfruit', label: 'Dragon Fruit', isDisabled: true },
+      { value: 'elderberry', label: 'Elderberry' },
+    ]
+    const [value, setValue] = useState<string | null>(null)
+    return (
+      <View style={{ width: 300 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={optionsWithDisabled}
+          placeholder="Some options are disabled..."
+        />
+      </View>
+    )
+  },
+}
+
+export const Controlled: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('apple')
+    return (
+      <View style={{ width: 300, gap: 12 }}>
+        <Select
+          value={value}
+          onChange={setValue}
+          options={basicOptions}
+          placeholder="Select a fruit..."
+        />
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+          {basicOptions.map((option) => (
+            <View key={option.value} style={{ marginBottom: 4 }}>
+              <Text
+                className="text-sm text-brand-primary underline"
+                onPress={() => setValue(option.value)}
+              >
+                Set {option.label}
+              </Text>
+            </View>
+          ))}
+          <Text
+            className="text-sm text-status-error underline"
+            onPress={() => setValue(null)}
+          >
+            Clear
+          </Text>
+        </View>
+        <Text className="text-sm text-text-secondary">
+          Current value: {value ?? 'null'}
+        </Text>
+      </View>
+    )
+  },
+}
+
+export const InFormLayout: Story = {
+  render: function Render() {
+    const [fruit, setFruit] = useState<string | null>(null)
+    const [color, setColor] = useState<string | null>(null)
+    const colorOptions: SelectOption[] = [
+      { value: 'red', label: 'Red' },
+      { value: 'green', label: 'Green' },
+      { value: 'blue', label: 'Blue' },
+      { value: 'yellow', label: 'Yellow' },
+    ]
+    return (
+      <View style={{ width: 300, gap: 16 }}>
+        <View style={{ gap: 4 }}>
+          <Text className="text-sm font-medium text-text-primary">Favorite Fruit</Text>
+          <Select
+            value={fruit}
+            onChange={setFruit}
+            options={basicOptions}
+            placeholder="Select a fruit..."
+          />
+        </View>
+        <View style={{ gap: 4 }}>
+          <Text className="text-sm font-medium text-text-primary">Favorite Color</Text>
+          <Select
+            value={color}
+            onChange={setColor}
+            options={colorOptions}
+            placeholder="Select a color..."
+          />
+        </View>
+      </View>
+    )
+  },
+}

package/src/components/ui/select/Select.test.tsx

@@ -0,0 +1,180 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Select } from './Select'
+
+const defaultOptions = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+]
+
+const optionsWithDisabled = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2', isDisabled: true },
+  { value: '3', label: 'Option 3' },
+]
+
+describe('Select', () => {
+  it('renders with placeholder', () => {
+    render(<Select options={defaultOptions} placeholder="Pick one" />)
+    expect(screen.getByText('Pick one')).toBeInTheDocument()
+  })
+
+  it('renders default placeholder when none provided', () => {
+    render(<Select options={defaultOptions} />)
+    expect(screen.getByText('Select...')).toBeInTheDocument()
+  })
+
+  it('displays selected value label', () => {
+    render(<Select options={defaultOptions} value="2" />)
+    expect(screen.getByText('Option 2')).toBeInTheDocument()
+  })
+
+  it('opens dropdown when trigger is pressed', () => {
+    render(<Select options={defaultOptions} />)
+    const trigger = screen.getByRole('combobox')
+    fireEvent.click(trigger)
+    expect(screen.getByText('Option 1')).toBeInTheDocument()
+    expect(screen.getByText('Option 2')).toBeInTheDocument()
+    expect(screen.getByText('Option 3')).toBeInTheDocument()
+  })
+
+  it('calls onChange when an option is selected', () => {
+    const onChange = vi.fn()
+    render(<Select options={defaultOptions} onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('combobox'))
+    fireEvent.click(screen.getByText('Option 2'))
+    expect(onChange).toHaveBeenCalledWith('2')
+  })
+
+  it('closes dropdown after single-select selection', () => {
+    const onChange = vi.fn()
+    render(<Select options={defaultOptions} onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('combobox'))
+    fireEvent.click(screen.getByText('Option 1'))
+
+    // After selection, dropdown should close (options no longer visible beyond the selected display)
+    expect(onChange).toHaveBeenCalledWith('1')
+  })
+
+  it('does not open when disabled', () => {
+    render(<Select options={defaultOptions} isDisabled />)
+    const trigger = screen.getByRole('combobox')
+    fireEvent.click(trigger)
+    // Options should not appear
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
+  })
+
+  it('shows clear button when value is selected', () => {
+    const onChange = vi.fn()
+    render(<Select options={defaultOptions} value="1" onChange={onChange} />)
+    // The clear button renders a "x" character
+    const clearButtons = screen.getAllByText('\u00d7')
+    expect(clearButtons.length).toBeGreaterThan(0)
+  })
+
+  describe('multi-select', () => {
+    it('renders with multi-select mode', () => {
+      render(<Select options={defaultOptions} isMulti values={[]} />)
+      expect(screen.getByText('Select...')).toBeInTheDocument()
+    })
+
+    it('displays count when multiple values selected', () => {
+      render(<Select options={defaultOptions} isMulti values={['1', '2']} />)
+      expect(screen.getByText('2 selected')).toBeInTheDocument()
+    })
+
+    it('displays single label when one value selected in multi mode', () => {
+      render(<Select options={defaultOptions} isMulti values={['1']} />)
+      expect(screen.getByText('Option 1')).toBeInTheDocument()
+    })
+
+    it('calls onChangeMulti when toggling options', () => {
+      const onChangeMulti = vi.fn()
+      render(
+        <Select
+          options={defaultOptions}
+          isMulti
+          values={[]}
+          onChangeMulti={onChangeMulti}
+        />
+      )
+
+      fireEvent.click(screen.getByRole('combobox'))
+      fireEvent.click(screen.getByText('Option 1'))
+      expect(onChangeMulti).toHaveBeenCalledWith(['1'])
+    })
+
+    it('removes value when already selected in multi mode', () => {
+      const onChangeMulti = vi.fn()
+      render(
+        <Select
+          options={defaultOptions}
+          isMulti
+          values={['1', '2']}
+          onChangeMulti={onChangeMulti}
+        />
+      )
+
+      fireEvent.click(screen.getByRole('combobox'))
+      fireEvent.click(screen.getByText('Option 1'))
+      expect(onChangeMulti).toHaveBeenCalledWith(['2'])
+    })
+  })
+
+  describe('disabled options', () => {
+    it('renders disabled options with reduced opacity', () => {
+      render(<Select options={optionsWithDisabled} />)
+      fireEvent.click(screen.getByRole('combobox'))
+      // All option labels should render
+      expect(screen.getByText('Option 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('invalid state', () => {
+    it('renders with error styling when isInvalid', () => {
+      render(<Select options={defaultOptions} isInvalid />)
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Select options={defaultOptions} value="1" />
+      )
+      const results = await axe(container, {
+        rules: {
+          'aria-input-field-name': { enabled: false },
+          'aria-required-attr': { enabled: false },
+        },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has combobox role on trigger', () => {
+      render(<Select options={defaultOptions} />)
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('communicates expanded state', () => {
+      render(<Select options={defaultOptions} />)
+      const trigger = screen.getByRole('combobox')
+      // react-native-web does not map accessibilityState.expanded to aria-expanded
+      expect(trigger).toBeInTheDocument()
+
+      fireEvent.click(trigger)
+      // Verify dropdown opened by checking for options
+      expect(screen.getByText('Option 1')).toBeInTheDocument()
+    })
+
+    it('communicates disabled state', () => {
+      render(<Select options={defaultOptions} isDisabled />)
+      const trigger = screen.getByRole('combobox')
+      expect(trigger).toHaveAttribute('aria-disabled', 'true')
+    })
+  })
+})