@titan-design/react-ui 0.1.0 → 0.2.5

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

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

@@ -0,0 +1,273 @@
+import React, { forwardRef, useState } from 'react'
+import { TextInput, View, Text, Pressable, type TextInputProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type InputSize = 'sm' | 'md' | 'lg'
+export type InputVariant = 'outline' | 'filled' | 'underline'
+
+export interface InputProps extends Omit<TextInputProps, 'editable'> {
+  /** Input size */
+  size?: InputSize
+  /** Visual variant */
+  variant?: InputVariant
+  /** Whether the input is disabled */
+  isDisabled?: boolean
+  /** Whether the input has an error */
+  isInvalid?: boolean
+  /** Whether the input is read-only */
+  isReadOnly?: boolean
+  /** Whether the input is required */
+  isRequired?: boolean
+  /** Whether this is a multiline textarea */
+  multiline?: boolean
+  /** Number of visible lines for multiline */
+  numberOfLines?: number
+  /** Label text */
+  label?: string
+  /** Helper text shown below input */
+  helperText?: string
+  /** Error message (shown when isInvalid is true) */
+  errorMessage?: string
+  /** Left element/icon */
+  leftElement?: React.ReactNode
+  /** Right element/icon */
+  rightElement?: React.ReactNode
+  /** Additional className for the container */
+  className?: string
+  /** Additional className for the input */
+  inputClassName?: string
+}
+
+const sizeStyles: Record<InputSize, string> = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-10 px-4 text-base',
+  lg: 'h-12 px-4 text-lg',
+}
+
+const multilineSizeStyles: Record<InputSize, string> = {
+  sm: 'min-h-[80px] px-3 py-2 text-sm',
+  md: 'min-h-[100px] px-4 py-3 text-base',
+  lg: 'min-h-[120px] px-4 py-3 text-lg',
+}
+
+const variantStyles: Record<InputVariant, { base: string; focus: string; hover: string; error: string }> = {
+  outline: {
+    base: 'border border-border-input rounded-md bg-transparent',
+    hover: 'web:hover:border-border-input-hover',
+    focus: 'border-border-input-focus',
+    error: 'border-border-input-error',
+  },
+  filled: {
+    base: 'border border-transparent rounded-md bg-surface-input',
+    hover: 'web:hover:border-border-input-hover',
+    focus: 'border-border-input-focus bg-transparent',
+    error: 'border-border-input-error',
+  },
+  underline: {
+    base: 'border-b border-border-input rounded-none bg-transparent',
+    hover: 'web:hover:border-border-input-hover',
+    focus: 'border-border-input-focus',
+    error: 'border-border-input-error',
+  },
+}
+
+/**
+ * Input component for text entry.
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   helperText="We'll never share your email"
+ * />
+ *
+ * // With error state
+ * <Input
+ *   label="Password"
+ *   isInvalid
+ *   errorMessage="Password is required"
+ * />
+ */
+export const Input = forwardRef<TextInput, InputProps>(function Input(
+  {
+    size = 'md',
+    variant = 'outline',
+    isDisabled = false,
+    isInvalid = false,
+    isReadOnly = false,
+    isRequired = false,
+    multiline = false,
+    numberOfLines = 4,
+    label,
+    helperText,
+    errorMessage,
+    leftElement,
+    rightElement,
+    className,
+    inputClassName,
+    onFocus,
+    onBlur,
+    ...props
+  },
+  ref
+) {
+  const [isFocused, setIsFocused] = useState(false)
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true)
+    onFocus?.(e)
+  }
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false)
+    onBlur?.(e)
+  }
+
+  const showError = isInvalid && errorMessage
+  const showHelper = !showError && helperText
+
+  return (
+    <View className={cn('w-full', className)}>
+      {label && (
+        <Text className="mb-1.5 text-sm font-medium text-text-primary">
+          {label}
+          {isRequired && <Text className="text-status-error ml-0.5">*</Text>}
+        </Text>
+      )}
+
+      <View
+        className={cn(
+          'flex-row transition-colors duration-150',
+          multiline ? 'items-start' : 'items-center',
+          variantStyles[variant].base,
+          !isDisabled && !isInvalid && variantStyles[variant].hover,
+          isFocused && variantStyles[variant].focus,
+          isInvalid && variantStyles[variant].error,
+          isDisabled && 'opacity-40 cursor-not-allowed'
+        )}
+      >
+        {leftElement && (
+          <View className={cn('pl-3 pr-1', multiline && 'pt-3')}>
+            {leftElement}
+          </View>
+        )}
+
+        <TextInput
+          ref={ref}
+          editable={!isDisabled && !isReadOnly}
+          accessibilityLabel={label}
+          accessibilityState={{
+            disabled: isDisabled,
+          }}
+          multiline={multiline}
+          numberOfLines={multiline ? numberOfLines : 1}
+          textAlignVertical={multiline ? 'top' : 'center'}
+          placeholderTextColor="var(--color-text-tertiary)"
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={cn(
+            'flex-1 text-text-primary',
+            multiline ? multilineSizeStyles[size] : sizeStyles[size],
+            leftElement && 'pl-1',
+            rightElement && 'pr-1',
+            inputClassName
+          )}
+          {...props}
+        />
+
+        {rightElement && (
+          <View className={cn('pl-1 pr-3', multiline && 'pt-3')}>
+            {rightElement}
+          </View>
+        )}
+      </View>
+
+      {showHelper && (
+        <Text className="mt-1.5 text-xs text-text-secondary">
+          {helperText}
+        </Text>
+      )}
+
+      {showError && (
+        <Text className="mt-1.5 text-xs text-status-error">
+          {errorMessage}
+        </Text>
+      )}
+    </View>
+  )
+})
+
+export interface InputGroupProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Container for grouping related inputs.
+ */
+export function InputGroup({ children, className }: InputGroupProps) {
+  return (
+    <View className={cn('flex-col gap-4', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface PasswordInputProps extends Omit<InputProps, 'secureTextEntry' | 'rightElement'> {
+  /** Custom show password icon */
+  showIcon?: React.ReactNode
+  /** Custom hide password icon */
+  hideIcon?: React.ReactNode
+}
+
+/**
+ * Password input with visibility toggle.
+ *
+ * @example
+ * <PasswordInput
+ *   label="Password"
+ *   placeholder="Enter your password"
+ * />
+ */
+export const PasswordInput = forwardRef<TextInput, PasswordInputProps>(function PasswordInput(
+  { showIcon, hideIcon, ...props },
+  ref
+) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const toggleVisibility = () => setIsVisible(!isVisible)
+
+  // Default eye icons (simple SVG-like views)
+  const defaultShowIcon = (
+    <View className="w-5 h-5 items-center justify-center">
+      <View className="w-3 h-3 rounded-full border-2 border-text-secondary" />
+      <View className="absolute w-1.5 h-1.5 rounded-full bg-text-secondary" />
+    </View>
+  )
+
+  const defaultHideIcon = (
+    <View className="w-5 h-5 items-center justify-center">
+      <View className="w-3 h-3 rounded-full border-2 border-text-secondary" />
+      <View className="absolute w-1.5 h-1.5 rounded-full bg-text-secondary" />
+      <View className="absolute w-5 h-0.5 bg-text-secondary rotate-45" />
+    </View>
+  )
+
+  return (
+    <Input
+      ref={ref}
+      secureTextEntry={!isVisible}
+      rightElement={
+        <Pressable
+          onPress={toggleVisibility}
+          accessibilityRole="button"
+          accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
+          className="p-1 rounded active:opacity-70"
+        >
+          {isVisible ? (hideIcon || defaultHideIcon) : (showIcon || defaultShowIcon)}
+        </Pressable>
+      }
+      {...props}
+    />
+  )
+})

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

@@ -0,0 +1,2 @@
+export { Input, InputGroup, PasswordInput } from './Input'
+export type { InputProps, InputGroupProps, PasswordInputProps, InputSize, InputVariant } from './Input'

package/src/components/ui/link/Link.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Link } from './Link'
+
+const meta: Meta<typeof Link> = {
+  title: 'Components/Link',
+  component: Link,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'inherit'],
+      description: 'Link color',
+    },
+    underline: {
+      control: 'select',
+      options: ['always', 'hover', 'none'],
+      description: 'Underline behavior',
+    },
+    isExternal: {
+      control: 'boolean',
+      description: 'Whether the link opens externally',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the link is disabled',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Link>
+
+export const Default: Story = {
+  args: {
+    children: 'Click here',
+    color: 'default',
+    underline: 'hover',
+    onPress: () => {},
+  },
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16 }}>
+      <Link color="default" onPress={() => {}}>Default</Link>
+      <Link color="primary" onPress={() => {}}>Primary</Link>
+      <Link color="secondary" onPress={() => {}}>Secondary</Link>
+    </View>
+  ),
+}
+
+export const UnderlineStyles: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16 }}>
+      <Link underline="always" onPress={() => {}}>Always</Link>
+      <Link underline="hover" onPress={() => {}}>Hover</Link>
+      <Link underline="none" onPress={() => {}}>None</Link>
+    </View>
+  ),
+}
+
+export const External: Story = {
+  args: {
+    children: 'Visit Example',
+    href: 'https://example.com',
+    isExternal: true,
+    onPress: () => {},
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Link',
+    isDisabled: true,
+    onPress: () => {},
+  },
+}