@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/radio/Radio.test.tsx

@@ -0,0 +1,166 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Radio, RadioGroup } from './Radio'
+
+describe('Radio', () => {
+  it('renders RadioGroup with Radio children', () => {
+    render(
+      <RadioGroup value="a" onChange={() => {}}>
+        <Radio value="a">Option A</Radio>
+        <Radio value="b">Option B</Radio>
+      </RadioGroup>
+    )
+    expect(screen.getByText('Option A')).toBeInTheDocument()
+    expect(screen.getByText('Option B')).toBeInTheDocument()
+  })
+
+  it('throws when Radio is used outside RadioGroup', () => {
+    expect(() => render(<Radio value="a">Orphan</Radio>)).toThrow(
+      'Radio must be used within a RadioGroup'
+    )
+  })
+
+  it('handles selection change', () => {
+    const onChange = vi.fn()
+    render(
+      <RadioGroup value="a" onChange={onChange}>
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>
+    )
+    fireEvent.click(screen.getAllByRole('radio')[1])
+    expect(onChange).toHaveBeenCalledWith('b')
+  })
+
+  it('marks selected radio as checked', () => {
+    render(
+      <RadioGroup value="a" onChange={() => {}}>
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>
+    )
+    const radios = screen.getAllByRole('radio')
+    // react-native-web does not map accessibilityState.checked to aria-checked
+    expect(radios[0]).toBeInTheDocument()
+    expect(radios[1]).toBeInTheDocument()
+  })
+
+  it('disables all radios when group isDisabled', () => {
+    const onChange = vi.fn()
+    render(
+      <RadioGroup value="a" onChange={onChange} isDisabled>
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>
+    )
+    const radios = screen.getAllByRole('radio')
+    radios.forEach((radio) => {
+      // react-native-web renders aria-disabled on a div, toBeDisabled() only works on form elements
+      expect(radio).toHaveAttribute('aria-disabled', 'true')
+    })
+    fireEvent.click(radios[1])
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('disables individual radio', () => {
+    const onChange = vi.fn()
+    render(
+      <RadioGroup value="a" onChange={onChange}>
+        <Radio value="a">A</Radio>
+        <Radio value="b" isDisabled>B</Radio>
+      </RadioGroup>
+    )
+    const radios = screen.getAllByRole('radio')
+    expect(radios[1]).toHaveAttribute('aria-disabled', 'true')
+    fireEvent.click(radios[1])
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(
+        <RadioGroup value="a" onChange={() => {}} size={size}>
+          <Radio value="a">A</Radio>
+        </RadioGroup>
+      )
+      expect(screen.getByRole('radio')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['primary', 'secondary', 'success', 'error'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(
+        <RadioGroup value="a" onChange={() => {}} color={color}>
+          <Radio value="a">A</Radio>
+        </RadioGroup>
+      )
+      expect(screen.getByRole('radio')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with group label', () => {
+    render(
+      <RadioGroup value="a" onChange={() => {}} label="Pick one">
+        <Radio value="a">A</Radio>
+      </RadioGroup>
+    )
+    expect(screen.getByText('Pick one')).toBeInTheDocument()
+  })
+
+  it('renders horizontal orientation', () => {
+    const { container } = render(
+      <RadioGroup value="a" onChange={() => {}} orientation="horizontal">
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('has radiogroup role on group', () => {
+    render(
+      <RadioGroup value="a" onChange={() => {}} label="Group">
+        <Radio value="a">A</Radio>
+      </RadioGroup>
+    )
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument()
+  })
+
+  it('allows Radio to override group size and color', () => {
+    render(
+      <RadioGroup value="a" onChange={() => {}} size="sm" color="primary">
+        <Radio value="a" size="lg" color="error">A</Radio>
+      </RadioGroup>
+    )
+    expect(screen.getByRole('radio')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <RadioGroup value="a" onChange={() => {}} label="Options">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+      )
+      const results = await axe(container, {
+        rules: { 'aria-required-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct radio role on items', () => {
+      render(
+        <RadioGroup value="a" onChange={() => {}}>
+          <Radio value="a">A</Radio>
+        </RadioGroup>
+      )
+      expect(screen.getByRole('radio')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/ui/radio/Radio.tsx

@@ -0,0 +1,200 @@
+import React, { createContext, useContext } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type RadioSize = 'sm' | 'md' | 'lg'
+export type RadioColor = 'primary' | 'secondary' | 'success' | 'error'
+
+interface RadioGroupContextType {
+  value: string | null
+  onChange: (value: string) => void
+  name?: string
+  isDisabled?: boolean
+  size?: RadioSize
+  color?: RadioColor
+}
+
+const RadioGroupContext = createContext<RadioGroupContextType | null>(null)
+
+export interface RadioGroupProps extends ViewProps {
+  /** Current selected value */
+  value: string | null
+  /** Callback when value changes */
+  onChange: (value: string) => void
+  /** Group name for form submission */
+  name?: string
+  /** Whether all radios are disabled */
+  isDisabled?: boolean
+  /** Size for all radios */
+  size?: RadioSize
+  /** Color for all radios */
+  color?: RadioColor
+  /** Orientation of the group */
+  orientation?: 'horizontal' | 'vertical'
+  /** Gap between items */
+  gap?: 'sm' | 'md' | 'lg'
+  /** Label for the group */
+  label?: string
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+const gapStyles = {
+  sm: 'gap-2',
+  md: 'gap-3',
+  lg: 'gap-4',
+}
+
+/**
+ * RadioGroup component for grouping radio buttons.
+ *
+ * @example
+ * <RadioGroup value={selected} onChange={setSelected}>
+ *   <Radio value="option1">Option 1</Radio>
+ *   <Radio value="option2">Option 2</Radio>
+ *   <Radio value="option3">Option 3</Radio>
+ * </RadioGroup>
+ */
+export function RadioGroup({
+  value,
+  onChange,
+  name,
+  isDisabled = false,
+  size = 'md',
+  color = 'primary',
+  orientation = 'vertical',
+  gap = 'md',
+  label,
+  className,
+  children,
+  ...props
+}: RadioGroupProps) {
+  return (
+    <RadioGroupContext.Provider value={{ value, onChange, name, isDisabled, size, color }}>
+      <View
+        className={cn(className)}
+        accessibilityRole="radiogroup"
+        accessibilityLabel={label}
+        {...props}
+      >
+        {label && (
+          <Text className="text-sm font-medium text-text-primary mb-2">
+            {label}
+          </Text>
+        )}
+        <View
+          className={cn(
+            orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col',
+            gapStyles[gap]
+          )}
+        >
+          {children}
+        </View>
+      </View>
+    </RadioGroupContext.Provider>
+  )
+}
+
+export interface RadioProps extends ViewProps {
+  /** Value of this radio option */
+  value: string
+  /** Whether this radio is disabled */
+  isDisabled?: boolean
+  /** Size override */
+  size?: RadioSize
+  /** Color override */
+  color?: RadioColor
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+const sizeConfig: Record<RadioSize, { outer: string; inner: string; text: string }> = {
+  sm: { outer: 'w-4 h-4', inner: 'w-2 h-2', text: 'text-sm' },
+  md: { outer: 'w-5 h-5', inner: 'w-2.5 h-2.5', text: 'text-base' },
+  lg: { outer: 'w-6 h-6', inner: 'w-3 h-3', text: 'text-lg' },
+}
+
+const colorStyles: Record<RadioColor, { checked: string; unchecked: string }> = {
+  primary: { checked: 'border-brand-primary bg-brand-primary', unchecked: 'border-border-strong' },
+  secondary: { checked: 'border-brand-secondary bg-brand-secondary', unchecked: 'border-border-strong' },
+  success: { checked: 'border-status-success bg-status-success', unchecked: 'border-border-strong' },
+  error: { checked: 'border-status-error bg-status-error', unchecked: 'border-border-strong' },
+}
+
+/**
+ * Radio button component.
+ *
+ * @example
+ * <Radio value="option1">Option 1</Radio>
+ */
+export function Radio({
+  value,
+  isDisabled: radioDisabled,
+  size: radioSize,
+  color: radioColor,
+  className,
+  children,
+  ...props
+}: RadioProps) {
+  const context = useContext(RadioGroupContext)
+
+  if (!context) {
+    throw new Error('Radio must be used within a RadioGroup')
+  }
+
+  const { value: selectedValue, onChange, isDisabled: groupDisabled, size: groupSize, color: groupColor } = context
+
+  const isDisabled = radioDisabled ?? groupDisabled ?? false
+  const size = radioSize ?? groupSize ?? 'md'
+  const color = radioColor ?? groupColor ?? 'primary'
+  const isChecked = selectedValue === value
+
+  const { outer, inner, text } = sizeConfig[size]
+  const { checked, unchecked } = colorStyles[color]
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onChange(value)
+    }
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      className={cn(
+        'flex-row items-center',
+        isDisabled && 'opacity-50',
+        className
+      )}
+      {...props}
+    >
+      {/* Radio circle */}
+      <View
+        className={cn(
+          'rounded-full border-2 items-center justify-center',
+          'transition-colors duration-150',
+          outer,
+          isChecked ? checked : unchecked,
+          !isDisabled && !isChecked && 'web:hover:border-brand-primary'
+        )}
+      >
+        {/* Inner dot */}
+        {isChecked && (
+          <View className={cn('rounded-full bg-white', inner)} />
+        )}
+      </View>
+
+      {/* Label */}
+      {children && (
+        <Text className={cn('ml-2 text-text-primary', text)}>
+          {children}
+        </Text>
+      )}
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './Radio'
+export type { RadioProps, RadioGroupProps, RadioSize, RadioColor } from './Radio'

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

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Section, SectionHeader, SectionContent } from './Section'
+
+const meta: Meta<typeof Section> = {
+  title: 'Components/Section',
+  component: Section,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Section>
+
+export const Default: Story = {
+  render: () => (
+    <Section>
+      <SectionHeader title="Recent Workouts" />
+      <SectionContent>
+        <Text style={{ color: '#a0a0a0' }}>Workout items would go here</Text>
+      </SectionContent>
+    </Section>
+  ),
+}
+
+export const WithSubtitle: Story = {
+  render: () => (
+    <Section>
+      <SectionHeader
+        title="Workout Stats"
+        subtitle="Last 7 days"
+      />
+      <SectionContent>
+        <Text style={{ color: '#a0a0a0' }}>Stats content</Text>
+      </SectionContent>
+    </Section>
+  ),
+}
+
+export const WithTrailingAction: Story = {
+  render: () => (
+    <Section>
+      <SectionHeader
+        title="Exercises"
+        trailing={
+          <Text style={{ color: '#6366f1', fontSize: 13 }}>View All</Text>
+        }
+      />
+      <SectionContent>
+        <Text style={{ color: '#a0a0a0' }}>Exercise list</Text>
+      </SectionContent>
+    </Section>
+  ),
+}
+
+export const FullExample: Story = {
+  render: () => (
+    <Section>
+      <SectionHeader
+        title="Performance"
+        subtitle="Average velocity by set"
+        trailing={
+          <Text style={{ color: '#6366f1', fontSize: 13 }}>Details</Text>
+        }
+      />
+      <SectionContent className="rounded-lg bg-surface-secondary p-4">
+        <Text style={{ color: '#a0a0a0' }}>Chart or data visualization</Text>
+      </SectionContent>
+    </Section>
+  ),
+}
+
+export const MultipleSections: Story = {
+  render: () => (
+    <View>
+      <Section>
+        <SectionHeader title="Today" subtitle="3 exercises" />
+        <SectionContent className="rounded-lg bg-surface-secondary p-4">
+          <Text style={{ color: '#a0a0a0' }}>Today&apos;s workout data</Text>
+        </SectionContent>
+      </Section>
+
+      <Section>
+        <SectionHeader
+          title="This Week"
+          subtitle="12 sets completed"
+          trailing={
+            <Text style={{ color: '#6366f1', fontSize: 13 }}>See All</Text>
+          }
+        />
+        <SectionContent className="rounded-lg bg-surface-secondary p-4">
+          <Text style={{ color: '#a0a0a0' }}>Weekly summary</Text>
+        </SectionContent>
+      </Section>
+
+      <Section>
+        <SectionHeader title="Personal Records" />
+        <SectionContent className="rounded-lg bg-surface-secondary p-4">
+          <Text style={{ color: '#a0a0a0' }}>PR list</Text>
+        </SectionContent>
+      </Section>
+    </View>
+  ),
+}
+
+export const HeaderOnly: Story = {
+  render: () => (
+    <Section>
+      <SectionHeader title="Section Title Only" />
+    </Section>
+  ),
+}

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'