@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Checkbox, CheckboxGroup } from './Checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    isChecked: {
+      control: 'boolean',
+      description: 'Whether the checkbox is checked',
+    },
+    isIndeterminate: {
+      control: 'boolean',
+      description: 'Whether the checkbox is in indeterminate state',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the checkbox is invalid',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Checkbox size',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below the label',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {
+    label: 'Accept terms and conditions',
+    size: 'md',
+  },
+  render: (args) => <Checkbox {...args} />,
+}
+
+export const Checked: Story = {
+  args: {
+    isChecked: true,
+    label: 'Checked checkbox',
+    size: 'md',
+  },
+  render: (args) => <Checkbox {...args} />,
+}
+
+export const Indeterminate: Story = {
+  args: {
+    isChecked: true,
+    isIndeterminate: true,
+    label: 'Indeterminate state',
+    size: 'md',
+  },
+  render: (args) => <Checkbox {...args} />,
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Checkbox isChecked size="sm" label="Small checkbox" />
+      <Checkbox isChecked size="md" label="Medium checkbox" />
+      <Checkbox isChecked size="lg" label="Large checkbox" />
+    </View>
+  ),
+}
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Subscribe to newsletter',
+    helperText: 'You can unsubscribe at any time.',
+    size: 'md',
+  },
+  render: (args) => <Checkbox {...args} />,
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Checkbox isDisabled label="Disabled unchecked" />
+      <Checkbox isDisabled isChecked label="Disabled checked" />
+      <Checkbox isDisabled isIndeterminate isChecked label="Disabled indeterminate" />
+    </View>
+  ),
+}
+
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    label: 'You must accept the terms',
+    helperText: 'This field is required.',
+    size: 'md',
+  },
+  render: (args) => <Checkbox {...args} />,
+}
+
+export const Group: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <CheckboxGroup label="Notifications" orientation="vertical">
+        <Checkbox isChecked label="Email notifications" />
+        <Checkbox label="Push notifications" />
+        <Checkbox isChecked label="SMS notifications" />
+      </CheckboxGroup>
+      <CheckboxGroup label="Horizontal Group" orientation="horizontal">
+        <Checkbox isChecked label="Option A" />
+        <Checkbox label="Option B" />
+        <Checkbox label="Option C" />
+      </CheckboxGroup>
+    </View>
+  ),
+}

package/src/components/ui/checkbox/Checkbox.test.tsx

@@ -0,0 +1,152 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Checkbox, CheckboxGroup } from './Checkbox'
+
+describe('Checkbox', () => {
+  it('renders correctly', () => {
+    render(<Checkbox label="Accept terms" />)
+    expect(screen.getByRole('checkbox')).toBeInTheDocument()
+  })
+
+  it('renders label text', () => {
+    render(<Checkbox label="Accept terms" />)
+    expect(screen.getByText('Accept terms')).toBeInTheDocument()
+  })
+
+  it('renders helper text', () => {
+    render(<Checkbox label="Terms" helperText="Please read carefully" />)
+    expect(screen.getByText('Please read carefully')).toBeInTheDocument()
+  })
+
+  it('handles checked state change', () => {
+    const onCheckedChange = vi.fn()
+    render(<Checkbox label="Check me" onCheckedChange={onCheckedChange} />)
+    fireEvent.click(screen.getByRole('checkbox'))
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+  })
+
+  it('toggles from checked to unchecked', () => {
+    const onCheckedChange = vi.fn()
+    render(<Checkbox label="Check me" isChecked onCheckedChange={onCheckedChange} />)
+    fireEvent.click(screen.getByRole('checkbox'))
+    expect(onCheckedChange).toHaveBeenCalledWith(false)
+  })
+
+  it('does not fire onCheckedChange when disabled', () => {
+    const onCheckedChange = vi.fn()
+    render(<Checkbox label="Disabled" isDisabled onCheckedChange={onCheckedChange} />)
+    fireEvent.click(screen.getByRole('checkbox'))
+    expect(onCheckedChange).not.toHaveBeenCalled()
+  })
+
+  it('shows checkmark when checked', () => {
+    render(<Checkbox isChecked label="Checked" />)
+    expect(screen.getByText('\u2713')).toBeInTheDocument()
+  })
+
+  it('renders indeterminate state', () => {
+    render(<Checkbox isIndeterminate label="Mixed" />)
+    const checkbox = screen.getByRole('checkbox')
+    // react-native-web does not map accessibilityState.checked to aria-checked
+    expect(checkbox).toBeInTheDocument()
+  })
+
+  it('communicates disabled state', () => {
+    render(<Checkbox isDisabled label="Disabled" />)
+    // react-native-web renders aria-disabled="true" on a div, but toBeDisabled() only works on form elements
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Checkbox size={size} label="Test" />)
+      expect(screen.getByRole('checkbox')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    render(<Checkbox className="extra" label="Test" />)
+    expect(screen.getByRole('checkbox')).toBeInTheDocument()
+  })
+
+  it('sets accessibility label from label prop', () => {
+    render(<Checkbox label="My checkbox" />)
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-label', 'My checkbox')
+  })
+
+  describe('CheckboxGroup', () => {
+    it('renders children', () => {
+      render(
+        <CheckboxGroup>
+          <Checkbox label="Option A" />
+          <Checkbox label="Option B" />
+        </CheckboxGroup>
+      )
+      expect(screen.getByText('Option A')).toBeInTheDocument()
+      expect(screen.getByText('Option B')).toBeInTheDocument()
+    })
+
+    it('renders with label', () => {
+      render(
+        <CheckboxGroup label="Select options">
+          <Checkbox label="A" />
+        </CheckboxGroup>
+      )
+      expect(screen.getByText('Select options')).toBeInTheDocument()
+    })
+
+    it('supports horizontal orientation', () => {
+      const { container } = render(
+        <CheckboxGroup orientation="horizontal">
+          <Checkbox label="A" />
+          <Checkbox label="B" />
+        </CheckboxGroup>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('supports vertical orientation', () => {
+      const { container } = render(
+        <CheckboxGroup orientation="vertical">
+          <Checkbox label="A" />
+          <Checkbox label="B" />
+        </CheckboxGroup>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Checkbox label="Accept terms" />)
+      const results = await axe(container, {
+        rules: { 'aria-required-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when checked', async () => {
+      const { container } = render(<Checkbox label="Checked" isChecked />)
+      const results = await axe(container, {
+        rules: { 'aria-required-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for CheckboxGroup', async () => {
+      const { container } = render(
+        <CheckboxGroup label="Options">
+          <Checkbox label="A" />
+          <Checkbox label="B" />
+        </CheckboxGroup>
+      )
+      const results = await axe(container, {
+        rules: { 'aria-required-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/checkbox/Checkbox.tsx

@@ -0,0 +1,163 @@
+import React, { forwardRef } from 'react'
+import { Pressable, View, Text, type PressableProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type CheckboxSize = 'sm' | 'md' | 'lg'
+
+export interface CheckboxProps extends Omit<PressableProps, 'children'> {
+  /** Whether the checkbox is checked */
+  isChecked?: boolean
+  /** Whether the checkbox is in indeterminate state */
+  isIndeterminate?: boolean
+  /** Whether the checkbox is disabled */
+  isDisabled?: boolean
+  /** Whether the checkbox is invalid */
+  isInvalid?: boolean
+  /** Checkbox size */
+  size?: CheckboxSize
+  /** Label text */
+  label?: string
+  /** Helper text */
+  helperText?: string
+  /** Value for forms */
+  value?: string
+  /** Callback when checked state changes */
+  onCheckedChange?: (checked: boolean) => void
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<CheckboxSize, { box: string; icon: string; label: string }> = {
+  sm: { box: 'w-4 h-4', icon: 'w-2.5 h-2.5', label: 'text-sm' },
+  md: { box: 'w-5 h-5', icon: 'w-3 h-3', label: 'text-base' },
+  lg: { box: 'w-6 h-6', icon: 'w-3.5 h-3.5', label: 'text-lg' },
+}
+
+/**
+ * Checkbox component for boolean inputs.
+ *
+ * @example
+ * <Checkbox
+ *   isChecked={checked}
+ *   onCheckedChange={setChecked}
+ *   label="Accept terms and conditions"
+ * />
+ */
+export const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox(
+  {
+    isChecked = false,
+    isIndeterminate = false,
+    isDisabled = false,
+    isInvalid = false,
+    size = 'md',
+    label,
+    helperText,
+    value,
+    onCheckedChange,
+    className,
+    ...props
+  },
+  ref
+) {
+  const styles = sizeStyles[size]
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onCheckedChange?.(!isChecked)
+    }
+  }
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      onPress={handlePress}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: isIndeterminate ? 'mixed' : isChecked,
+        disabled: isDisabled,
+      }}
+      accessibilityLabel={label}
+      className={cn(
+        'flex-row items-start gap-2',
+        isDisabled && 'opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <View
+        className={cn(
+          'items-center justify-center rounded border-2 transition-colors',
+          styles.box,
+          isChecked || isIndeterminate
+            ? 'bg-brand-primary border-brand-primary'
+            : 'bg-transparent border-border-default',
+          isInvalid && 'border-status-error',
+          !isDisabled && 'web:hover:border-brand-primary'
+        )}
+      >
+        {isChecked && !isIndeterminate && (
+          <View className={cn('bg-white rounded-sm', styles.icon)}>
+            {/* Checkmark icon - using a simple view as placeholder */}
+            <Text className="text-brand-primary font-bold text-center leading-none">✓</Text>
+          </View>
+        )}
+        {isIndeterminate && (
+          <View className={cn('bg-white h-0.5 w-2/3 rounded')} />
+        )}
+      </View>
+
+      {(label || helperText) && (
+        <View className="flex-1">
+          {label && (
+            <Text className={cn('text-text-primary font-medium', styles.label)}>
+              {label}
+            </Text>
+          )}
+          {helperText && (
+            <Text className="text-xs text-text-secondary mt-0.5">
+              {helperText}
+            </Text>
+          )}
+        </View>
+      )}
+    </Pressable>
+  )
+})
+
+export interface CheckboxGroupProps {
+  children: React.ReactNode
+  /** Label for the group */
+  label?: string
+  /** Orientation of checkboxes */
+  orientation?: 'horizontal' | 'vertical'
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Container for grouping related checkboxes.
+ */
+export function CheckboxGroup({
+  children,
+  label,
+  orientation = 'vertical',
+  className,
+}: CheckboxGroupProps) {
+  return (
+    <View className={cn('gap-1', className)}>
+      {label && (
+        <Text className="text-sm font-medium text-text-primary mb-2">
+          {label}
+        </Text>
+      )}
+      <View
+        className={cn(
+          orientation === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4'
+        )}
+      >
+        {children}
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup } from './Checkbox'
+export type { CheckboxProps, CheckboxGroupProps, CheckboxSize } from './Checkbox'

package/src/components/ui/chip/Chip.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Chip } from './Chip'
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'subtle', 'outline'],
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isDisabled: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Chip>
+
+export const Default: Story = {
+  args: {
+    children: 'Chip',
+    variant: 'subtle',
+    color: 'default',
+    size: 'md',
+  },
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+      <Chip color="default">Default</Chip>
+      <Chip color="primary">Primary</Chip>
+      <Chip color="secondary">Secondary</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="error">Error</Chip>
+      <Chip color="warning">Warning</Chip>
+      <Chip color="info">Info</Chip>
+    </View>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <Chip variant="solid" color="primary">Solid</Chip>
+        <Chip variant="subtle" color="primary">Subtle</Chip>
+        <Chip variant="outline" color="primary">Outline</Chip>
+      </View>
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Chip size="sm">Small</Chip>
+      <Chip size="md">Medium</Chip>
+      <Chip size="lg">Large</Chip>
+    </View>
+  ),
+}
+
+export const Dismissible: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      <Chip onDelete={() => console.log('delete')}>Remove me</Chip>
+      <Chip color="primary" onDelete={() => console.log('delete')}>Primary</Chip>
+      <Chip color="error" onDelete={() => console.log('delete')}>Error</Chip>
+    </View>
+  ),
+}
+
+export const Clickable: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      <Chip onPress={() => console.log('clicked')}>Click me</Chip>
+      <Chip color="primary" onPress={() => console.log('clicked')}>Primary</Chip>
+    </View>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      <Chip isDisabled>Disabled</Chip>
+      <Chip isDisabled onDelete={() => {}}>Disabled Dismissible</Chip>
+      <Chip isDisabled onPress={() => {}}>Disabled Clickable</Chip>
+    </View>
+  ),
+}
+
+export const AsTagList: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap', maxWidth: 300 }}>
+      <Chip size="sm" color="primary" onDelete={() => {}}>React</Chip>
+      <Chip size="sm" color="secondary" onDelete={() => {}}>TypeScript</Chip>
+      <Chip size="sm" color="info" onDelete={() => {}}>Tailwind</Chip>
+      <Chip size="sm" color="success" onDelete={() => {}}>NativeWind</Chip>
+    </View>
+  ),
+}

package/src/components/ui/chip/Chip.test.tsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Chip } from './Chip'
+
+describe('Chip', () => {
+  it('renders children correctly', () => {
+    render(<Chip>Label</Chip>)
+    expect(screen.getByText('Label')).toBeInTheDocument()
+  })
+
+  it('renders as a View when not clickable', () => {
+    const { container } = render(<Chip>Static</Chip>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders as a Pressable when onPress is provided', () => {
+    render(<Chip onPress={() => {}}>Clickable</Chip>)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('handles press events', () => {
+    const onPress = vi.fn()
+    render(<Chip onPress={onPress}>Click me</Chip>)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire onPress when disabled', () => {
+    const onPress = vi.fn()
+    render(
+      <Chip onPress={onPress} isDisabled>
+        Disabled
+      </Chip>
+    )
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    fireEvent.click(button)
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('renders delete button when onDelete is provided', () => {
+    const onDelete = vi.fn()
+    render(<Chip onDelete={onDelete}>Dismissible</Chip>)
+    expect(screen.getByLabelText('Remove')).toBeInTheDocument()
+  })
+
+  it('handles delete events', () => {
+    const onDelete = vi.fn()
+    render(<Chip onDelete={onDelete}>Dismissible</Chip>)
+    fireEvent.click(screen.getByLabelText('Remove'))
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders leftElement', () => {
+    render(
+      <Chip leftElement={<span data-testid="icon">icon</span>}>
+        With Icon
+      </Chip>
+    )
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with all variant options', () => {
+    const variants = ['solid', 'subtle', 'outline'] as const
+    variants.forEach((variant) => {
+      const { unmount } = render(<Chip variant={variant}>Test</Chip>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Chip color={color}>Test</Chip>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Chip size={size}>Test</Chip>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Chip className="extra">Test</Chip>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations for static chip', async () => {
+      const { container } = render(<Chip>Label</Chip>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for clickable chip', async () => {
+      const { container } = render(<Chip onPress={() => {}}>Clickable</Chip>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has button role when clickable', () => {
+      render(<Chip onPress={() => {}}>Clickable</Chip>)
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('delete button has accessible label', () => {
+      render(<Chip onDelete={() => {}}>Tag</Chip>)
+      expect(screen.getByLabelText('Remove')).toBeInTheDocument()
+    })
+  })
+})