@titan-design/react-ui 0.0.2 → 0.1.1

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

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View, Text } from 'react-native'
+import { Radio, RadioGroup } from './Radio'
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/Radio',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error'],
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof RadioGroup>
+
+export const Default: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('option1')
+    return (
+      <RadioGroup value={value} onChange={setValue}>
+        <Radio value="option1">Option 1</Radio>
+        <Radio value="option2">Option 2</Radio>
+        <Radio value="option3">Option 3</Radio>
+      </RadioGroup>
+    )
+  },
+}
+
+export const WithLabel: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('email')
+    return (
+      <RadioGroup value={value} onChange={setValue} label="Notification Preference">
+        <Radio value="email">Email</Radio>
+        <Radio value="sms">SMS</Radio>
+        <Radio value="push">Push Notification</Radio>
+        <Radio value="none">None</Radio>
+      </RadioGroup>
+    )
+  },
+}
+
+export const Horizontal: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('monthly')
+    return (
+      <RadioGroup
+        value={value}
+        onChange={setValue}
+        orientation="horizontal"
+        label="Billing Cycle"
+      >
+        <Radio value="monthly">Monthly</Radio>
+        <Radio value="quarterly">Quarterly</Radio>
+        <Radio value="yearly">Yearly</Radio>
+      </RadioGroup>
+    )
+  },
+}
+
+export const AllSizes: Story = {
+  render: function Render() {
+    const [small, setSmall] = useState<string | null>('a')
+    const [medium, setMedium] = useState<string | null>('a')
+    const [large, setLarge] = useState<string | null>('a')
+    
+    return (
+      <View className="gap-6">
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Small</Text>
+          <RadioGroup value={small} onChange={setSmall} size="sm" orientation="horizontal">
+            <Radio value="a">Option A</Radio>
+            <Radio value="b">Option B</Radio>
+          </RadioGroup>
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Medium (default)</Text>
+          <RadioGroup value={medium} onChange={setMedium} size="md" orientation="horizontal">
+            <Radio value="a">Option A</Radio>
+            <Radio value="b">Option B</Radio>
+          </RadioGroup>
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Large</Text>
+          <RadioGroup value={large} onChange={setLarge} size="lg" orientation="horizontal">
+            <Radio value="a">Option A</Radio>
+            <Radio value="b">Option B</Radio>
+          </RadioGroup>
+        </View>
+      </View>
+    )
+  },
+}
+
+export const AllColors: Story = {
+  render: function Render() {
+    const [primary, setPrimary] = useState<string | null>('a')
+    const [secondary, setSecondary] = useState<string | null>('a')
+    const [success, setSuccess] = useState<string | null>('a')
+    const [error, setError] = useState<string | null>('a')
+    
+    return (
+      <View className="gap-6">
+        <RadioGroup value={primary} onChange={setPrimary} color="primary" orientation="horizontal" label="Primary">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+        <RadioGroup value={secondary} onChange={setSecondary} color="secondary" orientation="horizontal" label="Secondary">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+        <RadioGroup value={success} onChange={setSuccess} color="success" orientation="horizontal" label="Success">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+        <RadioGroup value={error} onChange={setError} color="error" orientation="horizontal" label="Error">
+          <Radio value="a">Option A</Radio>
+          <Radio value="b">Option B</Radio>
+        </RadioGroup>
+      </View>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: function Render() {
+    const [value, setValue] = useState<string | null>('option1')
+    return (
+      <View className="gap-6">
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Entire group disabled</Text>
+          <RadioGroup value={value} onChange={setValue} isDisabled>
+            <Radio value="option1">Option 1</Radio>
+            <Radio value="option2">Option 2</Radio>
+          </RadioGroup>
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-2">Individual option disabled</Text>
+          <RadioGroup value={value} onChange={setValue}>
+            <Radio value="option1">Option 1 (enabled)</Radio>
+            <Radio value="option2" isDisabled>Option 2 (disabled)</Radio>
+            <Radio value="option3">Option 3 (enabled)</Radio>
+          </RadioGroup>
+        </View>
+      </View>
+    )
+  },
+}
+
+export const FormExample: Story = {
+  render: function Render() {
+    const [plan, setPlan] = useState<string | null>('pro')
+    const [billing, setBilling] = useState<string | null>('monthly')
+    
+    return (
+      <View className="gap-6 p-4 bg-surface-base rounded-lg max-w-md">
+        <Text className="text-lg font-semibold text-text-primary">Subscription Settings</Text>
+        
+        <RadioGroup value={plan} onChange={setPlan} label="Select Plan">
+          <Radio value="free">Free - Basic features</Radio>
+          <Radio value="pro">Pro - Advanced features</Radio>
+          <Radio value="enterprise">Enterprise - Custom solutions</Radio>
+        </RadioGroup>
+        
+        <RadioGroup 
+          value={billing} 
+          onChange={setBilling} 
+          orientation="horizontal"
+          label="Billing Frequency"
+        >
+          <Radio value="monthly">Monthly</Radio>
+          <Radio value="yearly">Yearly (save 20%)</Radio>
+        </RadioGroup>
+        
+        <View className="pt-4 border-t border-border-default">
+          <Text className="text-sm text-text-secondary">
+            Selected: {plan} plan, billed {billing}
+          </Text>
+        </View>
+      </View>
+    )
+  },
+}

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