@titan-design/react-ui 0.0.2 → 0.1.1

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: () => {},
+  },
+}

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

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Link } from './Link'
+
+describe('Link', () => {
+  it('renders children correctly', () => {
+    render(<Link>Click here</Link>)
+    expect(screen.getByText('Click here')).toBeInTheDocument()
+  })
+
+  it('has link accessibility role', () => {
+    render(<Link>Link</Link>)
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+
+  it('handles press events', () => {
+    const onPress = vi.fn()
+    render(<Link onPress={onPress}>Press me</Link>)
+    fireEvent.click(screen.getByRole('link'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire onPress when disabled', () => {
+    const onPress = vi.fn()
+    render(
+      <Link onPress={onPress} isDisabled>
+        Disabled
+      </Link>
+    )
+    fireEvent.click(screen.getByRole('link'))
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('appends external indicator when isExternal', () => {
+    render(<Link isExternal>External</Link>)
+    expect(screen.getByText(/External/)).toBeInTheDocument()
+    expect(screen.getByText(/\u2197/)).toBeInTheDocument()
+  })
+
+  it('provides accessibility hint for external links', () => {
+    render(<Link isExternal>External</Link>)
+    // react-native-web does not map accessibilityHint to aria-description
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+
+  it('does not have external hint for internal links', () => {
+    render(<Link>Internal</Link>)
+    expect(screen.getByRole('link')).not.toHaveAttribute('aria-description')
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['default', 'primary', 'secondary', 'inherit'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Link color={color}>Test</Link>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all underline options', () => {
+    const underlines = ['always', 'hover', 'none'] as const
+    underlines.forEach((underline) => {
+      const { unmount } = render(<Link underline={underline}>Test</Link>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    render(<Link className="extra">Test</Link>)
+    expect(screen.getByText('Test')).toBeInTheDocument()
+  })
+
+  it('disables the pressable when isDisabled', () => {
+    render(<Link isDisabled>Disabled link</Link>)
+    // react-native-web renders aria-disabled on a div, toBeDisabled() only works on form elements
+    expect(screen.getByRole('link')).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Link>Visit site</Link>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for external link', async () => {
+      const { container } = render(<Link isExternal>External site</Link>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Text, Pressable, type TextProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type LinkUnderline = 'always' | 'hover' | 'none'
+export type LinkColor = 'default' | 'primary' | 'secondary' | 'inherit'
+
+export interface LinkProps extends Omit<TextProps, 'onPress'> {
+  /** URL to navigate to (for accessibility) */
+  href?: string
+  /** Underline behavior */
+  underline?: LinkUnderline
+  /** Link color */
+  color?: LinkColor
+  /** Whether the link opens in a new tab/window */
+  isExternal?: boolean
+  /** Press handler */
+  onPress?: () => void
+  /** Whether the link is disabled */
+  isDisabled?: boolean
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+const colorStyles: Record<LinkColor, string> = {
+  default: 'text-text-link',
+  primary: 'text-brand-primary',
+  secondary: 'text-brand-secondary',
+  inherit: '',
+}
+
+const underlineStyles: Record<LinkUnderline, string> = {
+  always: 'underline',
+  hover: 'no-underline web:hover:underline',
+  none: 'no-underline',
+}
+
+/**
+ * Link component for navigation.
+ *
+ * @example
+ * <Link href="https://example.com">Visit Site</Link>
+ * <Link href="https://example.com" isExternal>External Link ↗</Link>
+ * <Link onPress={() => navigate('/page')}>Go to Page</Link>
+ */
+export function Link({
+  href,
+  underline = 'hover',
+  color = 'default',
+  isExternal = false,
+  onPress,
+  isDisabled = false,
+  className,
+  children,
+  ...props
+}: LinkProps) {
+  const handlePress = () => {
+    if (isDisabled) return
+    onPress?.()
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="link"
+      accessibilityHint={isExternal ? 'Opens in new window' : undefined}
+    >
+      <Text
+        className={cn(
+          'font-medium',
+          colorStyles[color],
+          underlineStyles[underline],
+          isDisabled && 'opacity-50 cursor-not-allowed',
+          'web:cursor-pointer active:opacity-70',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {isExternal && ' ↗'}
+      </Text>
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Link } from './Link'
+export type { LinkProps, LinkUnderline, LinkColor } from './Link'

package/src/components/ui/list-item/ListItem.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemContent,
+  ListItemTrailing,
+  ListItemDivider,
+} from './ListItem'
+
+function UserIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: '#6366f1', justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ color: '#fff', fontSize: size * 0.5, fontWeight: '600' }}>U</Text>
+    </View>
+  )
+}
+
+function WifiIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.7 }}>W</Text>
+    </View>
+  )
+}
+
+function BellIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.7 }}>B</Text>
+    </View>
+  )
+}
+
+function LockIcon({ size = 20 }: { size?: number; className?: string }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.7 }}>L</Text>
+    </View>
+  )
+}
+
+function ChevronRight({ size = 16 }: { size?: number }) {
+  return <Text style={{ color: '#9ca3af', fontSize: size }}>{'>'}</Text>
+}
+
+const meta: Meta<typeof ListItem> = {
+  title: 'Components/ListItem',
+  component: ListItem,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ListItem>
+
+export const Basic: Story = {
+  render: () => (
+    <ListItem>
+      <ListItemContent title="Simple list item" />
+    </ListItem>
+  ),
+}
+
+export const WithSubtitle: Story = {
+  render: () => (
+    <ListItem>
+      <ListItemContent title="Wi-Fi" subtitle="Connected to HomeNetwork" />
+    </ListItem>
+  ),
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <ListItem>
+      <ListItemIcon icon={WifiIcon} />
+      <ListItemContent title="Wi-Fi" subtitle="Connected" />
+    </ListItem>
+  ),
+}
+
+export const WithTrailing: Story = {
+  render: () => (
+    <ListItem onPress={() => {}}>
+      <ListItemIcon icon={UserIcon} />
+      <ListItemContent title="Account" subtitle="Manage your account" />
+      <ListItemTrailing>
+        <ChevronRight />
+      </ListItemTrailing>
+    </ListItem>
+  ),
+}
+
+export const SettingsList: Story = {
+  render: () => (
+    <View>
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={UserIcon} />
+        <ListItemContent title="Profile" subtitle="Edit your profile details" />
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
+      <ListItemDivider />
+
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={BellIcon} />
+        <ListItemContent title="Notifications" subtitle="Push, email, SMS" />
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
+      <ListItemDivider />
+
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={LockIcon} />
+        <ListItemContent title="Privacy" subtitle="Manage your data" />
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
+      <ListItemDivider />
+
+      <ListItem onPress={() => {}}>
+        <ListItemIcon icon={WifiIcon} />
+        <ListItemContent title="Wi-Fi" subtitle="HomeNetwork" />
+        <ListItemTrailing>
+          <Text style={{ color: '#22c55e', fontSize: 12 }}>Connected</Text>
+        </ListItemTrailing>
+      </ListItem>
+    </View>
+  ),
+}
+
+export const FullWidthDivider: Story = {
+  render: () => (
+    <View>
+      <ListItem>
+        <ListItemContent title="First item" />
+      </ListItem>
+      <ListItemDivider inset={false} />
+      <ListItem>
+        <ListItemContent title="Second item" />
+      </ListItem>
+    </View>
+  ),
+}