@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/card/Card.test.tsx

@@ -0,0 +1,294 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardSkeleton,
+  CardInset,
+} from './Card'
+
+describe('Card', () => {
+  it('renders children correctly', () => {
+    render(
+      <Card>
+        <CardContent>Card body</CardContent>
+      </Card>
+    )
+    expect(screen.getByText('Card body')).toBeInTheDocument()
+  })
+
+  it('renders with default variant (elevated)', () => {
+    render(
+      <Card testID="card">
+        <CardContent>Content</CardContent>
+      </Card>
+    )
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('renders with outline variant', () => {
+    render(
+      <Card variant="outline">
+        <CardContent>Outline card</CardContent>
+      </Card>
+    )
+    expect(screen.getByText('Outline card')).toBeInTheDocument()
+  })
+
+  it('renders with filled variant', () => {
+    render(
+      <Card variant="filled">
+        <CardContent>Filled card</CardContent>
+      </Card>
+    )
+    expect(screen.getByText('Filled card')).toBeInTheDocument()
+  })
+
+  it('renders with different elevation levels', () => {
+    const { rerender } = render(
+      <Card elevation={1}>
+        <CardContent>Subtle</CardContent>
+      </Card>
+    )
+    expect(screen.getByText('Subtle')).toBeInTheDocument()
+
+    rerender(
+      <Card elevation={3}>
+        <CardContent>Prominent</CardContent>
+      </Card>
+    )
+    expect(screen.getByText('Prominent')).toBeInTheDocument()
+  })
+
+  describe('interactive card', () => {
+    it('renders as a button when isInteractive is true', () => {
+      render(
+        <Card isInteractive>
+          <CardContent>Interactive card</CardContent>
+        </Card>
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('renders as a button when onPress is provided', () => {
+      render(
+        <Card onPress={() => {}}>
+          <CardContent>Pressable card</CardContent>
+        </Card>
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('calls onPress handler when clicked', () => {
+      const onPress = vi.fn()
+      render(
+        <Card onPress={onPress}>
+          <CardContent>Click me</CardContent>
+        </Card>
+      )
+
+      fireEvent.click(screen.getByRole('button'))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not render as a button when not interactive', () => {
+      render(
+        <Card>
+          <CardContent>Static card</CardContent>
+        </Card>
+      )
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('loading state', () => {
+    it('renders skeleton content when isLoading is true', () => {
+      render(
+        <Card isLoading>
+          <CardContent>This should not appear</CardContent>
+        </Card>
+      )
+      expect(screen.queryByText('This should not appear')).not.toBeInTheDocument()
+    })
+
+    it('renders skeleton without header when skeletonHasHeader is false', () => {
+      const { container } = render(
+        <Card isLoading skeletonHasHeader={false}>
+          <CardContent>Hidden</CardContent>
+        </Card>
+      )
+      expect(container).toBeInTheDocument()
+    })
+
+    it('renders skeleton with footer when skeletonHasFooter is true', () => {
+      const { container } = render(
+        <Card isLoading skeletonHasFooter>
+          <CardContent>Hidden</CardContent>
+        </Card>
+      )
+      expect(container).toBeInTheDocument()
+    })
+  })
+
+  describe('compound sub-components', () => {
+    it('renders full compound card structure', () => {
+      render(
+        <Card>
+          <CardHeader>
+            <CardTitle>Title</CardTitle>
+            <CardDescription>Description</CardDescription>
+          </CardHeader>
+          <CardContent>Body content</CardContent>
+          <CardFooter>Footer content</CardFooter>
+        </Card>
+      )
+
+      expect(screen.getByText('Title')).toBeInTheDocument()
+      expect(screen.getByText('Description')).toBeInTheDocument()
+      expect(screen.getByText('Body content')).toBeInTheDocument()
+      expect(screen.getByText('Footer content')).toBeInTheDocument()
+    })
+
+    it('CardTitle has header accessibility role', () => {
+      render(<CardTitle>My Title</CardTitle>)
+      expect(screen.getByRole('heading')).toBeInTheDocument()
+    })
+
+    it('accepts custom className on sub-components', () => {
+      render(
+        <Card className="custom-card">
+          <CardHeader className="custom-header">
+            <CardTitle className="custom-title">Title</CardTitle>
+            <CardDescription className="custom-desc">Desc</CardDescription>
+          </CardHeader>
+          <CardContent className="custom-content">Content</CardContent>
+          <CardFooter className="custom-footer">Footer</CardFooter>
+        </Card>
+      )
+      expect(screen.getByText('Title')).toBeInTheDocument()
+    })
+  })
+
+  describe('CardSkeleton', () => {
+    it('renders skeleton placeholder', () => {
+      const { container } = render(<CardSkeleton />)
+      expect(container).toBeInTheDocument()
+    })
+
+    it('renders skeleton with custom content lines', () => {
+      const { container } = render(<CardSkeleton contentLines={5} />)
+      expect(container).toBeInTheDocument()
+    })
+
+    it('renders skeleton without header', () => {
+      const { container } = render(<CardSkeleton hasHeader={false} />)
+      expect(container).toBeInTheDocument()
+    })
+
+    it('renders skeleton with footer', () => {
+      const { container } = render(<CardSkeleton hasFooter />)
+      expect(container).toBeInTheDocument()
+    })
+  })
+
+  describe('CardInset', () => {
+    it('renders inset content', () => {
+      render(
+        <CardInset>
+          <span>Inset content</span>
+        </CardInset>
+      )
+      expect(screen.getByText('Inset content')).toBeInTheDocument()
+    })
+
+    it('accepts elevation prop', () => {
+      const { container } = render(
+        <CardInset elevation={-2}>
+          <span>Deep inset</span>
+        </CardInset>
+      )
+      expect(container).toBeInTheDocument()
+    })
+  })
+
+  describe('accent and subtle variants', () => {
+    it('renders accent variant', () => {
+      const { container } = render(
+        <Card variant="accent">
+          <CardContent>Accent card</CardContent>
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders subtle variant', () => {
+      const { container } = render(
+        <Card variant="subtle">
+          <CardContent>Subtle card</CardContent>
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders accent variant with custom accentColor and accentWidth', () => {
+      const { container } = render(
+        <Card variant="accent" accentColor="#FF0000" accentWidth={5}>
+          <CardContent>Custom accent</CardContent>
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('custom styling', () => {
+    it('applies custom borderColor', () => {
+      const { container } = render(
+        <Card variant="outline" borderColor="#ff0000">
+          <CardContent>Red border</CardContent>
+        </Card>
+      )
+      expect(container).toBeInTheDocument()
+    })
+
+    it('applies custom bgColor', () => {
+      const { container } = render(
+        <Card bgColor="#00ff00">
+          <CardContent>Green background</CardContent>
+        </Card>
+      )
+      expect(container).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Card>
+          <CardHeader>
+            <CardTitle>Accessible Card</CardTitle>
+            <CardDescription>Card description</CardDescription>
+          </CardHeader>
+          <CardContent>Card content</CardContent>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when interactive', async () => {
+      const { container } = render(
+        <Card isInteractive onPress={() => {}}>
+          <CardContent>Interactive card</CardContent>
+        </Card>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/card/Card.tsx

@@ -0,0 +1,401 @@
+import React, { useMemo, useState } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { 
+  getElevationSurface, 
+  getElevationShadow, 
+  getBaseSurfaceColor,
+  getValidatedElevation,
+  type ElevationLevel 
+} from '../../../theme'
+import { useTheme } from '../../../utils/useTheme'
+
+export type CardVariant = 'elevated' | 'outline' | 'filled' | 'accent' | 'subtle'
+export type CardElevation = 1 | 2 | 3  // subtle, standard, prominent
+
+export interface CardProps extends ViewProps {
+  /** Visual variant */
+  variant?: CardVariant
+  /** Elevation level (1=subtle, 2=standard, 3=prominent) */
+  elevation?: CardElevation
+  /** Whether the card is interactive (hoverable/pressable) */
+  isInteractive?: boolean
+  /** Whether the card is in a loading state (renders skeleton) */
+  isLoading?: boolean
+  /** Callback when card is pressed (makes card interactive) */
+  onPress?: () => void
+  /** Custom border color (hex, rgb, or CSS color). Useful for status cards. */
+  borderColor?: string
+  /** Custom background color (hex, rgb, or CSS color). Useful for colored cards. */
+  bgColor?: string
+  /** Accent stripe color for accent variant (CSS color or hex) */
+  accentColor?: string
+  /** Accent stripe width for accent variant in pixels (default: 3) */
+  accentWidth?: number
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+  /** Show header skeleton when loading (default: true) */
+  skeletonHasHeader?: boolean
+  /** Show footer skeleton when loading (default: false) */
+  skeletonHasFooter?: boolean
+  /** Number of content lines in skeleton when loading (default: 3) */
+  skeletonContentLines?: number
+}
+
+const variantStyles: Record<CardVariant, string> = {
+  elevated: '', // Will be set dynamically via elevation system
+  outline: 'border-2 border-border-strong',  // Thicker border with stronger contrast
+  filled: '', // Will be set dynamically via elevation system
+  accent: 'border border-border-default',
+  subtle: 'border border-border-subtle',
+}
+
+/**
+ * Card component for containing related content.
+ *
+ * @example
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Text>Card content goes here</Text>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ *
+ * // Interactive card
+ * <Card isInteractive onPress={() => console.log('pressed')}>
+ *   <CardContent>Click me</CardContent>
+ * </Card>
+ */
+export function Card({
+  variant = 'elevated',
+  elevation = 2,
+  isInteractive = false,
+  isLoading = false,
+  onPress,
+  borderColor,
+  bgColor,
+  accentColor,
+  accentWidth,
+  className,
+  children,
+  style,
+  skeletonHasHeader = true,
+  skeletonHasFooter = false,
+  skeletonContentLines = 3,
+  ...props
+}: CardProps) {
+  const isClickable = isInteractive || !!onPress
+  const [isHovered, setIsHovered] = useState(false)
+  const theme = useTheme()
+
+  // Get elevation level (validate and clamp to card's allowed range)
+  const elevationLevel = useMemo(() => {
+    const validated = getValidatedElevation('card', elevation as ElevationLevel)
+    // Map variant to elevation if needed
+    if (variant === 'outline' || variant === 'accent' || variant === 'subtle') {
+      return 1 as ElevationLevel  // These border variants use subtle elevation
+    }
+    return validated
+  }, [variant, elevation])
+
+  // Get base surface color for theme
+  const baseColor = useMemo(() => getBaseSurfaceColor(theme), [theme])
+
+  // Calculate surface color and shadow from elevation
+  const surfaceColor = useMemo(() => {
+    // Outline variant in light mode uses a specific off-white for clear visibility
+    if ((variant === 'outline' || variant === 'accent') && theme === 'light') {
+      return '#FAFAFA'  // Matches --color-surface-elevated in light mode
+    }
+    // Subtle variant uses the base surface color without elevation lift
+    if (variant === 'subtle') {
+      return getElevationSurface(baseColor, 0 as ElevationLevel, theme)
+    }
+    return getElevationSurface(baseColor, elevationLevel, theme)
+  }, [baseColor, elevationLevel, theme, variant])
+
+  const shadowStyle = useMemo(() => {
+    // Only apply hover shadow if card is actually clickable
+    const shouldHover = isHovered && isClickable
+    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover)
+  }, [baseColor, elevationLevel, theme, isHovered, isClickable])
+
+  // Render skeleton content when loading, otherwise render children
+  const cardContent = isLoading ? (
+    <>
+      {skeletonHasHeader && (
+        <CardHeader>
+          <View className="h-5 w-1/3 bg-interactive-disabled rounded" />
+          <View className="mt-2 h-4 w-2/3 bg-interactive-disabled rounded" />
+        </CardHeader>
+      )}
+      <CardContent>
+        {Array.from({ length: skeletonContentLines }).map((_, i) => (
+          <View
+            key={i}
+            className={cn(
+              'h-4 bg-interactive-disabled rounded',
+              i < skeletonContentLines - 1 ? 'mb-2 w-full' : 'w-4/5'
+            )}
+          />
+        ))}
+      </CardContent>
+      {skeletonHasFooter && (
+        <CardFooter>
+          <View className="h-9 w-24 bg-interactive-disabled rounded" />
+        </CardFooter>
+      )}
+    </>
+  ) : (
+    children
+  )
+
+  const baseClassName = cn(
+    'rounded-lg overflow-hidden relative',
+    // Apply variant styles, but only use default border color if no custom borderColor
+    variant === 'outline'
+      ? borderColor
+        ? 'border-2'  // Just the border width, color via style
+        : variantStyles[variant]  // Full variant styles including color
+      : variantStyles[variant],
+    // Remove Tailwind shadow classes - we're using elevation shadows via style prop
+    isClickable && 'web:cursor-pointer web:transition-all web:duration-150',
+    isClickable && 'web:hover:-translate-y-0.5 active:scale-[0.99]',
+    isLoading && 'pointer-events-none animate-pulse',
+    className
+  )
+
+  // Accent variant: left stripe via borderLeft override
+  const accentStyle = useMemo(() => variant === 'accent' ? {
+    borderLeftWidth: accentWidth ?? 3,
+    borderLeftColor: accentColor ?? 'var(--color-brand-primary)',
+  } : {}, [variant, accentWidth, accentColor])
+
+  // Merge styles: background color from elevation + shadow style + custom colors + custom style
+  const mergedStyle = useMemo(() => {
+    const elevationStyle: Record<string, any> = {
+      backgroundColor: bgColor || surfaceColor,
+      borderRadius: 8,
+      overflow: 'hidden' as const,
+      ...shadowStyle,
+      ...accentStyle,
+    }
+
+    // Add custom border color if provided
+    if (borderColor) {
+      elevationStyle.borderColor = borderColor
+    }
+
+    if (!style) return elevationStyle
+    // User style takes precedence over elevation defaults (e.g. maxWidth, custom bg)
+    return [elevationStyle, style]
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle])
+
+  if (isClickable) {
+    return (
+      <Pressable
+        onPress={onPress}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        accessibilityRole="button"
+        className={baseClassName}
+        style={mergedStyle}
+        {...props}
+      >
+        {cardContent}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View className={baseClassName} style={mergedStyle} {...props}>
+      {cardContent}
+    </View>
+  )
+}
+
+export interface CardHeaderProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Header section of a Card.
+ */
+export function CardHeader({ children, className }: CardHeaderProps) {
+  return (
+    <View className={cn('px-6 py-6', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface CardTitleProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Title for CardHeader.
+ */
+export function CardTitle({ children, className }: CardTitleProps) {
+  return (
+    <Text
+      accessibilityRole="header"
+      className={cn('text-lg font-semibold text-text-primary font-heading', className)}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export interface CardDescriptionProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Description for CardHeader.
+ */
+export function CardDescription({ children, className }: CardDescriptionProps) {
+  return (
+    <Text className={cn('mt-1.5 text-sm text-text-secondary', className)}>
+      {children}
+    </Text>
+  )
+}
+
+export interface CardContentProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Content section of a Card.
+ */
+export function CardContent({ children, className }: CardContentProps) {
+  return (
+    <View className={cn('px-6 py-4', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface CardFooterProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Footer section of a Card.
+ */
+export function CardFooter({ children, className }: CardFooterProps) {
+  return (
+    <View className={cn('px-6 py-4 flex-row items-center gap-2', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface CardSkeletonProps {
+  /** Whether to show header skeleton */
+  hasHeader?: boolean
+  /** Whether to show footer skeleton */
+  hasFooter?: boolean
+  /** Number of content lines */
+  contentLines?: number
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Skeleton placeholder for Card loading state.
+ */
+export function CardSkeleton({
+  hasHeader = true,
+  hasFooter = false,
+  contentLines = 3,
+  className,
+}: CardSkeletonProps) {
+  return (
+    <Card variant="elevated" elevation={2} className={cn('animate-pulse', className)}>
+      {hasHeader && (
+        <CardHeader>
+          <View className="h-5 w-1/3 bg-interactive-disabled rounded" />
+          <View className="mt-2 h-4 w-2/3 bg-interactive-disabled rounded" />
+        </CardHeader>
+      )}
+      <CardContent>
+        {Array.from({ length: contentLines }).map((_, i) => (
+          <View
+            key={i}
+            className={cn(
+              'h-4 bg-interactive-disabled rounded',
+              i < contentLines - 1 ? 'mb-2 w-full' : 'w-4/5'
+            )}
+          />
+        ))}
+      </CardContent>
+      {hasFooter && (
+        <CardFooter>
+          <View className="h-9 w-24 bg-interactive-disabled rounded" />
+        </CardFooter>
+      )}
+    </Card>
+  )
+}
+
+export interface CardInsetProps extends ViewProps {
+  /** Elevation level for inset (-2=deep, -1=shallow) */
+  elevation?: -2 | -1
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Inset element within a Card. Applies pressed neumorphic shadow
+ * to create a sunken/recessed appearance.
+ * 
+ * @example
+ * <Card elevation={2}>
+ *   <CardContent>
+ *     <CardInset elevation={-1}>
+ *       <Text>This content appears inset/sunken</Text>
+ *     </CardInset>
+ *   </CardContent>
+ * </Card>
+ */
+export function CardInset({
+  elevation = -1,
+  className,
+  children,
+  style,
+  ...props
+}: CardInsetProps) {
+  const theme = useTheme()
+  const baseColor = useMemo(() => getBaseSurfaceColor(theme), [theme])
+  const surfaceColor = useMemo(() => {
+    return getElevationSurface(baseColor, elevation as ElevationLevel, theme)
+  }, [baseColor, elevation, theme])
+  const shadowStyle = useMemo(() => {
+    return getElevationShadow(baseColor, elevation as ElevationLevel, theme)
+  }, [baseColor, elevation, theme])
+  
+  return (
+    <View
+      className={cn('rounded', className)}
+      style={[{ backgroundColor: surfaceColor }, shadowStyle, style]}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,20 @@
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardSkeleton,
+} from './Card'
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+  CardFooterProps,
+  CardSkeletonProps,
+  CardVariant,
+  CardElevation,
+} from './Card'