@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/icon-box/IconBox.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { IconBox } from './IconBox'
+
+function StarIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return (
+    <View
+      className={className}
+      style={{
+        width: size,
+        height: size,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: size * 0.8,
+          height: size * 0.8,
+          borderRadius: size * 0.4,
+          backgroundColor: 'currentColor',
+        }}
+      />
+    </View>
+  )
+}
+
+function BoltIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return (
+    <View
+      className={className}
+      style={{
+        width: size,
+        height: size,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.3,
+          borderRightWidth: size * 0.3,
+          borderBottomWidth: size * 0.6,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: 'currentColor',
+        }}
+      />
+    </View>
+  )
+}
+
+const meta: Meta<typeof IconBox> = {
+  title: 'Components/IconBox',
+  component: IconBox,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'neutral'],
+      description: 'Color variant for the icon box',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof IconBox>
+
+export const Default: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'neutral',
+    size: 'md',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'primary',
+    size: 'md',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'primary',
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'primary',
+    size: 'lg',
+  },
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+      <IconBox icon={StarIcon} color="primary" />
+      <IconBox icon={StarIcon} color="secondary" />
+      <IconBox icon={StarIcon} color="success" />
+      <IconBox icon={StarIcon} color="error" />
+      <IconBox icon={StarIcon} color="warning" />
+      <IconBox icon={StarIcon} color="info" />
+      <IconBox icon={StarIcon} color="neutral" />
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <IconBox icon={StarIcon} color="primary" size="sm" />
+      <IconBox icon={StarIcon} color="primary" size="md" />
+      <IconBox icon={StarIcon} color="primary" size="lg" />
+    </View>
+  ),
+}
+
+export const DifferentIcons: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12 }}>
+      <IconBox icon={StarIcon} color="success" />
+      <IconBox icon={BoltIcon} color="warning" />
+    </View>
+  ),
+}

package/src/components/ui/icon-box/IconBox.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { IconBox } from './IconBox'
+
+function MockIcon({ size, className }: { size?: number; className?: string }) {
+  return (
+    <span data-testid="icon" data-size={size} className={className}>
+      icon
+    </span>
+  )
+}
+
+describe('IconBox', () => {
+  it('renders the icon component', () => {
+    render(<IconBox icon={MockIcon} />)
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('passes correct default size to icon (md = 20)', () => {
+    render(<IconBox icon={MockIcon} />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '20')
+  })
+
+  it('passes correct size to icon for sm variant', () => {
+    render(<IconBox icon={MockIcon} size="sm" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '16')
+  })
+
+  it('passes correct size to icon for lg variant', () => {
+    render(<IconBox icon={MockIcon} size="lg" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '24')
+  })
+
+  it('renders with size sm without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} size="sm" />)
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with size md by default without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} />)
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with size lg without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} size="lg" />)
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with color primary without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} color="primary" />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with neutral color by default', () => {
+    const { container } = render(<IconBox icon={MockIcon} />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with className prop without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} className="mt-4" />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('passes through testID prop', () => {
+    render(<IconBox icon={MockIcon} testID="my-icon-box" />)
+    expect(screen.getByTestId('my-icon-box')).toBeInTheDocument()
+  })
+
+  it('supports all color variants without errors', () => {
+    const colors = [
+      'primary',
+      'secondary',
+      'success',
+      'error',
+      'warning',
+      'info',
+      'neutral',
+    ] as const
+    for (const color of colors) {
+      const { unmount } = render(<IconBox icon={MockIcon} color={color} />)
+      expect(screen.getByTestId('icon')).toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  it('supports all size variants without errors', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    for (const size of sizes) {
+      const { unmount } = render(<IconBox icon={MockIcon} size={size} />)
+      expect(screen.getByTestId('icon')).toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  it('renders with all props combined', () => {
+    render(
+      <IconBox
+        icon={MockIcon}
+        color="success"
+        size="lg"
+        className="mt-2"
+        testID="full-icon-box"
+      />,
+    )
+    expect(screen.getByTestId('full-icon-box')).toBeInTheDocument()
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '24')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<IconBox icon={MockIcon} color="primary" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/icon-box/IconBox.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+type IconBoxColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'neutral'
+
+type IconBoxSize = 'sm' | 'md' | 'lg'
+
+export interface IconBoxProps extends ViewProps {
+  icon: React.ComponentType<{ size?: number; className?: string }>
+  color?: IconBoxColor
+  size?: IconBoxSize
+  className?: string
+}
+
+const colorClasses: Record<IconBoxColor, { bg: string; icon: string }> = {
+  primary: { bg: 'bg-brand-primary/10', icon: 'text-brand-primary' },
+  secondary: { bg: 'bg-brand-secondary/10', icon: 'text-brand-secondary' },
+  success: { bg: 'bg-status-success/10', icon: 'text-status-success' },
+  error: { bg: 'bg-status-error/10', icon: 'text-status-error' },
+  warning: { bg: 'bg-status-warning/10', icon: 'text-status-warning' },
+  info: { bg: 'bg-status-info/10', icon: 'text-status-info' },
+  neutral: { bg: 'bg-surface-elevated', icon: 'text-text-secondary' },
+}
+
+const sizeClasses: Record<IconBoxSize, { box: string; iconSize: number }> = {
+  sm: { box: 'w-8 h-8 rounded-lg', iconSize: 16 },
+  md: { box: 'w-10 h-10 rounded-xl', iconSize: 20 },
+  lg: { box: 'w-12 h-12 rounded-xl', iconSize: 24 },
+}
+
+export function IconBox({
+  icon: Icon,
+  color = 'neutral',
+  size = 'md',
+  className,
+  ...props
+}: IconBoxProps) {
+  const colors = colorClasses[color]
+  const sizes = sizeClasses[size]
+
+  return (
+    <View
+      className={cn('items-center justify-center', colors.bg, sizes.box, className)}
+      {...props}
+    >
+      <Icon size={sizes.iconSize} className={colors.icon} />
+    </View>
+  )
+}

package/src/components/ui/icon-box/index.ts

@@ -0,0 +1 @@
+export { IconBox, type IconBoxProps } from './IconBox'

package/src/components/ui/index.ts

@@ -0,0 +1,36 @@
+// Core UI components
+export * from './alert'
+export * from './button'
+export * from './input'
+export * from './card'
+export * from './badge'
+export * from './spinner'
+export * from './avatar'
+export * from './divider'
+export * from './checkbox'
+export * from './switch'
+export * from './modal'
+export * from './skeleton'
+export * from './tabs'
+export * from './chip'
+export * from './link'
+export * from './tooltip'
+export * from './collapse'
+export * from './breadcrumbs'
+export * from './popover'
+export * from './menu'
+export * from './select'
+export * from './toolbar-button'
+export * from './radio'
+export * from './drawer'
+export * from './progress'
+export * from './toast'
+export * from './autocomplete'
+export * from './help-tip'
+export * from './form-field'
+export * from './stack'
+export * from './section'
+export * from './data-row'
+export * from './icon-box'
+export * from './surface'
+export * from './list-item'

package/src/components/ui/input/Input.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Input, InputGroup, PasswordInput } from './Input'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['outline', 'filled', 'underline'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    multiline: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+  },
+}
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    helperText: 'Must be at least 8 characters',
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    isInvalid: true,
+    errorMessage: 'Please enter a valid email address',
+    defaultValue: 'invalid-email',
+  },
+}
+
+export const Required: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Choose a username',
+    isRequired: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Input',
+    placeholder: 'This is disabled',
+    isDisabled: true,
+    defaultValue: 'Disabled value',
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Read Only',
+    isReadOnly: true,
+    defaultValue: 'This value cannot be changed',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 300 }}>
+      <Input variant="outline" label="Outline" placeholder="Outline variant" />
+      <Input variant="filled" label="Filled" placeholder="Filled variant" />
+      <Input variant="underline" label="Underline" placeholder="Underline variant" />
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 300 }}>
+      <Input size="sm" placeholder="Small input" />
+      <Input size="md" placeholder="Medium input" />
+      <Input size="lg" placeholder="Large input" />
+    </View>
+  ),
+}
+
+export const Multiline: Story = {
+  args: {
+    label: 'Description',
+    placeholder: 'Enter a description...',
+    multiline: true,
+    numberOfLines: 4,
+    helperText: 'Maximum 500 characters',
+  },
+}
+
+export const MultilineSizes: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 400 }}>
+      <Input size="sm" multiline label="Small" placeholder="Small textarea" />
+      <Input size="md" multiline label="Medium" placeholder="Medium textarea" />
+      <Input size="lg" multiline label="Large" placeholder="Large textarea" />
+    </View>
+  ),
+}
+
+export const Password: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 300 }}>
+      <PasswordInput
+        label="Password"
+        placeholder="Enter your password"
+        helperText="Must be at least 8 characters"
+      />
+    </View>
+  ),
+}
+
+export const PasswordWithError: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 300 }}>
+      <PasswordInput
+        label="Password"
+        placeholder="Enter your password"
+        isInvalid
+        errorMessage="Password must be at least 8 characters"
+        defaultValue="short"
+      />
+    </View>
+  ),
+}
+
+// Simple search icon for demo
+function SearchIcon() {
+  return (
+    <View className="w-4 h-4 items-center justify-center">
+      <View className="w-3 h-3 rounded-full border-2 border-text-secondary" />
+      <View className="absolute bottom-0 right-0 w-1.5 h-0.5 bg-text-secondary rotate-45 origin-left" />
+    </View>
+  )
+}
+
+export const WithLeftElement: Story = {
+  render: () => (
+    <View style={{ gap: 16, width: 300 }}>
+      <Input
+        placeholder="Search..."
+        leftElement={<SearchIcon />}
+      />
+    </View>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <InputGroup>
+      <Input label="First Name" placeholder="John" isRequired />
+      <Input label="Last Name" placeholder="Doe" isRequired />
+      <Input label="Email" placeholder="john@example.com" isRequired />
+      <PasswordInput
+        label="Password"
+        placeholder="••••••••"
+        helperText="Must be at least 8 characters"
+        isRequired
+      />
+      <Input
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        multiline
+        numberOfLines={3}
+      />
+    </InputGroup>
+  ),
+}

package/src/components/ui/input/Input.test.tsx

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Input } from './Input'
+
+describe('Input', () => {
+  it('renders correctly', () => {
+    render(<Input placeholder="Enter text" />)
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument()
+  })
+
+  it('displays label when provided', () => {
+    render(<Input label="Email" placeholder="Enter email" />)
+    expect(screen.getByText('Email')).toBeInTheDocument()
+  })
+
+  it('displays required indicator when isRequired', () => {
+    render(<Input label="Email" isRequired />)
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+
+  it('displays helper text when provided', () => {
+    render(<Input helperText="This is helper text" />)
+    expect(screen.getByText('This is helper text')).toBeInTheDocument()
+  })
+
+  it('displays error message when isInvalid', () => {
+    render(
+      <Input
+        isInvalid
+        errorMessage="Invalid input"
+        helperText="This should not show"
+      />
+    )
+    expect(screen.getByText('Invalid input')).toBeInTheDocument()
+    expect(screen.queryByText('This should not show')).not.toBeInTheDocument()
+  })
+
+  it('handles text changes', () => {
+    const onChangeText = vi.fn()
+    render(<Input onChangeText={onChangeText} placeholder="Type here" />)
+
+    const input = screen.getByPlaceholderText('Type here')
+    // react-native-web renders as HTML input, use change event
+    fireEvent.change(input, { target: { value: 'Hello' } })
+
+    expect(onChangeText).toHaveBeenCalled()
+  })
+
+  it('respects isDisabled prop', () => {
+    render(<Input isDisabled placeholder="Disabled" />)
+    const input = screen.getByPlaceholderText('Disabled')
+    // react-native-web renders isDisabled as readonly, not disabled
+    expect(input).toHaveAttribute('readonly')
+  })
+
+  it('respects isReadOnly prop', () => {
+    render(<Input isReadOnly defaultValue="Read only" />)
+    const input = screen.getByDisplayValue('Read only')
+    expect(input).toHaveAttribute('readonly')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Input label="Email" placeholder="Enter your email" />
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('associates label with input', () => {
+      render(<Input label="Username" placeholder="Enter username" />)
+      const input = screen.getByPlaceholderText('Enter username')
+      expect(input).toHaveAccessibleName('Username')
+    })
+
+    it('communicates disabled state', () => {
+      render(<Input isDisabled placeholder="Disabled input" />)
+      const input = screen.getByPlaceholderText('Disabled input')
+      // react-native-web renders isDisabled as readonly
+      expect(input).toHaveAttribute('readonly')
+    })
+  })
+})