@titan-design/react-ui 0.0.2 → 0.1.1

package/src/components/ui/progress/Progress.test.tsx

@@ -0,0 +1,181 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Progress, CircularProgress, ProgressSteps } from './Progress'
+
+describe('Progress', () => {
+  it('renders correctly', () => {
+    render(<Progress value={50} />)
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('renders with default props', () => {
+    render(<Progress />)
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('sets accessibility value', () => {
+    render(<Progress value={75} max={100} />)
+    const progressbar = screen.getByRole('progressbar')
+    // react-native-web maps accessibilityValue but not to standard aria-value* attributes
+    expect(progressbar).toBeInTheDocument()
+  })
+
+  it('renders with label', () => {
+    render(<Progress value={50} label="Uploading..." />)
+    expect(screen.getByText('Uploading...')).toBeInTheDocument()
+  })
+
+  it('renders with value display', () => {
+    render(<Progress value={50} showValue />)
+    expect(screen.getByText('50%')).toBeInTheDocument()
+  })
+
+  it('uses custom formatValue function', () => {
+    render(<Progress value={3} max={10} showValue formatValue={(v, m) => `${v}/${m}`} />)
+    expect(screen.getByText('3/10')).toBeInTheDocument()
+  })
+
+  it('does not show value when indeterminate', () => {
+    render(<Progress isIndeterminate showValue />)
+    expect(screen.queryByText(/%/)).not.toBeInTheDocument()
+  })
+
+  it('sets undefined aria-valuenow when indeterminate', () => {
+    render(<Progress isIndeterminate />)
+    const progressbar = screen.getByRole('progressbar')
+    expect(progressbar).not.toHaveAttribute('aria-valuenow')
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Progress size={size} value={50} />)
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Progress color={color} value={50} />)
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('clamps value between 0 and 100', () => {
+    const { unmount } = render(<Progress value={150} />)
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    unmount()
+
+    render(<Progress value={-10} />)
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Progress className="extra" value={50} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('CircularProgress', () => {
+    it('renders correctly', () => {
+      render(<CircularProgress value={50} />)
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    })
+
+    it('sets accessibility value', () => {
+      render(<CircularProgress value={75} max={100} />)
+      const progressbar = screen.getByRole('progressbar')
+      // react-native-web maps accessibilityValue but not to standard aria-value* attributes
+      expect(progressbar).toBeInTheDocument()
+    })
+
+    it('shows value when showValue is true', () => {
+      render(<CircularProgress value={50} showValue />)
+      expect(screen.getByText('50%')).toBeInTheDocument()
+    })
+
+    it('does not show value when indeterminate', () => {
+      render(<CircularProgress isIndeterminate showValue />)
+      expect(screen.queryByText(/%/)).not.toBeInTheDocument()
+    })
+
+    it('renders with custom size and strokeWidth', () => {
+      render(<CircularProgress size={64} strokeWidth={6} value={50} />)
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    })
+
+    it('renders with all color options', () => {
+      const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+      colors.forEach((color) => {
+        const { unmount } = render(<CircularProgress color={color} value={50} />)
+        expect(screen.getByRole('progressbar')).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+
+  describe('ProgressSteps', () => {
+    it('renders correct number of steps', () => {
+      const { container } = render(<ProgressSteps currentStep={1} totalSteps={4} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders labels', () => {
+      render(
+        <ProgressSteps
+          currentStep={1}
+          totalSteps={3}
+          labels={['Step 1', 'Step 2', 'Step 3']}
+        />
+      )
+      expect(screen.getByText('Step 1')).toBeInTheDocument()
+      expect(screen.getByText('Step 2')).toBeInTheDocument()
+      expect(screen.getByText('Step 3')).toBeInTheDocument()
+    })
+
+    it('renders with all size options', () => {
+      const sizes = ['sm', 'md', 'lg'] as const
+      sizes.forEach((size) => {
+        const { unmount } = render(<ProgressSteps currentStep={0} totalSteps={3} size={size} />)
+        unmount()
+      })
+    })
+
+    it('renders with all color options', () => {
+      const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+      colors.forEach((color) => {
+        const { unmount } = render(<ProgressSteps currentStep={0} totalSteps={3} color={color} />)
+        unmount()
+      })
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations for Progress', async () => {
+      const { container } = render(<Progress value={50} label="Upload progress" />)
+      const results = await axe(container, {
+        rules: { 'aria-progressbar-name': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for CircularProgress', async () => {
+      const { container } = render(<CircularProgress value={50} />)
+      const results = await axe(container, {
+        rules: { 'aria-progressbar-name': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for ProgressSteps', async () => {
+      const { container } = render(
+        <ProgressSteps currentStep={1} totalSteps={3} labels={['A', 'B', 'C']} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/progress/Progress.tsx

@@ -0,0 +1,320 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type ProgressSize = 'sm' | 'md' | 'lg'
+export type ProgressColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type ProgressVariant = 'linear' | 'circular'
+
+/** Maps the color prop to a CSS variable reference for inline styles */
+const colorVarMap: Record<ProgressColor, string> = {
+  primary: 'var(--color-brand-primary)',
+  secondary: 'var(--color-brand-secondary)',
+  success: 'var(--color-status-success)',
+  error: 'var(--color-status-error)',
+  warning: 'var(--color-status-warning)',
+  info: 'var(--color-status-info)',
+}
+
+export interface ProgressProps extends ViewProps {
+  /** Current value (0-100) */
+  value?: number
+  /** Maximum value */
+  max?: number
+  /** Whether the progress is indeterminate */
+  isIndeterminate?: boolean
+  /** Size of the progress bar */
+  size?: ProgressSize
+  /** Color of the progress */
+  color?: ProgressColor
+  /** Whether to show the value label */
+  showValue?: boolean
+  /** Custom value format function */
+  formatValue?: (value: number, max: number) => string
+  /** Label text */
+  label?: string
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<ProgressSize, string> = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+}
+
+const colorStyles: Record<ProgressColor, string> = {
+  primary: 'bg-brand-primary',
+  secondary: 'bg-brand-secondary',
+  success: 'bg-status-success',
+  error: 'bg-status-error',
+  warning: 'bg-status-warning',
+  info: 'bg-status-info',
+}
+
+const trackColorStyles: Record<ProgressColor, string> = {
+  primary: 'bg-brand-primary/20',
+  secondary: 'bg-brand-secondary/20',
+  success: 'bg-status-success/20',
+  error: 'bg-status-error/20',
+  warning: 'bg-status-warning/20',
+  info: 'bg-status-info/20',
+}
+
+/**
+ * Linear progress bar component.
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={75} />
+ *
+ * @example
+ * // With label and value
+ * <Progress value={45} label="Uploading..." showValue />
+ *
+ * @example
+ * // Indeterminate progress
+ * <Progress isIndeterminate />
+ */
+export function Progress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 'md',
+  color = 'primary',
+  showValue = false,
+  formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
+  label,
+  className,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
+
+  return (
+    <View className={cn('w-full', className)} {...props}>
+      {/* Label and Value Row */}
+      {(label || showValue) && (
+        <View className="flex-row justify-between items-center mb-1">
+          {label && (
+            <Text className="text-sm text-text-secondary">{label}</Text>
+          )}
+          {showValue && !isIndeterminate && (
+            <Text className="text-sm font-medium text-text-primary">
+              {formatValue(value, max)}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {/* Progress Track */}
+      <View
+        className={cn(
+          'w-full rounded-full overflow-hidden',
+          trackColorStyles[color],
+          sizeStyles[size]
+        )}
+        accessibilityRole="progressbar"
+        accessibilityValue={{
+          min: 0,
+          max: max,
+          now: isIndeterminate ? undefined : value,
+        }}
+      >
+        {/* Progress Fill */}
+        <View
+          className={cn(
+            'h-full rounded-full',
+            colorStyles[color],
+            isIndeterminate && 'animate-pulse w-1/3'
+          )}
+          style={isIndeterminate ? undefined : { width: `${percentage}%` }}
+        />
+      </View>
+    </View>
+  )
+}
+
+export interface CircularProgressProps extends ViewProps {
+  /** Current value (0-100) */
+  value?: number
+  /** Maximum value */
+  max?: number
+  /** Whether the progress is indeterminate */
+  isIndeterminate?: boolean
+  /** Size of the progress circle (diameter) */
+  size?: number
+  /** Stroke width */
+  strokeWidth?: number
+  /** Color of the progress */
+  color?: ProgressColor
+  /** Whether to show the value in center */
+  showValue?: boolean
+  /** Custom value format function */
+  formatValue?: (value: number, max: number) => string
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Circular progress indicator component.
+ *
+ * @example
+ * <CircularProgress value={75} showValue />
+ */
+export function CircularProgress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 48,
+  strokeWidth = 4,
+  color = 'primary',
+  showValue = false,
+  formatValue = (v, m) => `${Math.round((v / m) * 100)}%`,
+  className,
+  ...props
+}: CircularProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (percentage / 100) * circumference
+
+  // For web, we use SVG. For native, we use a simplified view-based approach.
+  return (
+    <View
+      className={cn('items-center justify-center', className)}
+      style={{ width: size, height: size }}
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: 0,
+        max: max,
+        now: isIndeterminate ? undefined : value,
+      }}
+      {...props}
+    >
+      {/* Background circle */}
+      <View
+        className={cn(
+          'absolute rounded-full border-4',
+          'border-border-default'
+        )}
+        style={{
+          width: size,
+          height: size,
+          borderWidth: strokeWidth,
+        }}
+      />
+
+      {/* Progress arc (simplified) */}
+      <View
+        className={cn(
+          'absolute rounded-full',
+          colorStyles[color],
+          isIndeterminate && 'animate-spin'
+        )}
+        style={{
+          width: size,
+          height: size,
+          borderWidth: strokeWidth,
+          borderColor: 'transparent',
+          borderTopColor: colorVarMap[color],
+          borderRightColor: percentage > 25 ? colorVarMap[color] : 'transparent',
+          borderBottomColor: percentage > 50 ? colorVarMap[color] : 'transparent',
+          borderLeftColor: percentage > 75 ? colorVarMap[color] : 'transparent',
+        }}
+      />
+
+      {/* Center value */}
+      {showValue && !isIndeterminate && (
+        <Text className="text-xs font-semibold text-text-primary">
+          {formatValue(value, max)}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export interface ProgressStepsProps extends ViewProps {
+  /** Current step (0-indexed) */
+  currentStep: number
+  /** Total number of steps */
+  totalSteps: number
+  /** Color of completed steps */
+  color?: ProgressColor
+  /** Size of step indicators */
+  size?: ProgressSize
+  /** Labels for each step */
+  labels?: string[]
+  /** Additional className */
+  className?: string
+}
+
+const stepSizeStyles: Record<ProgressSize, { dot: string; connector: string }> = {
+  sm: { dot: 'w-2 h-2', connector: 'h-0.5' },
+  md: { dot: 'w-3 h-3', connector: 'h-1' },
+  lg: { dot: 'w-4 h-4', connector: 'h-1.5' },
+}
+
+/**
+ * Step-based progress indicator.
+ *
+ * @example
+ * <ProgressSteps currentStep={2} totalSteps={4} labels={['Cart', 'Shipping', 'Payment', 'Done']} />
+ */
+export function ProgressSteps({
+  currentStep,
+  totalSteps,
+  color = 'primary',
+  size = 'md',
+  labels,
+  className,
+  ...props
+}: ProgressStepsProps) {
+  const { dot, connector } = stepSizeStyles[size]
+
+  return (
+    <View className={cn('w-full', className)} {...props}>
+      <View className="flex-row items-center">
+        {Array.from({ length: totalSteps }).map((_, index) => (
+          <React.Fragment key={index}>
+            {/* Step dot */}
+            <View
+              className={cn(
+                'rounded-full',
+                dot,
+                index <= currentStep ? colorStyles[color] : 'bg-border-strong'
+              )}
+            />
+
+            {/* Connector line */}
+            {index < totalSteps - 1 && (
+              <View
+                className={cn(
+                  'flex-1 mx-1',
+                  connector,
+                  index < currentStep ? colorStyles[color] : 'bg-border-strong'
+                )}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </View>
+
+      {/* Labels */}
+      {labels && labels.length > 0 && (
+        <View className="flex-row mt-2">
+          {labels.map((label, index) => (
+            <Text
+              key={index}
+              className={cn(
+                'flex-1 text-xs text-center',
+                index <= currentStep ? 'text-text-primary font-medium' : 'text-text-tertiary'
+              )}
+            >
+              {label}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,9 @@
+export { Progress, CircularProgress, ProgressSteps } from './Progress'
+export type {
+  ProgressProps,
+  CircularProgressProps,
+  ProgressStepsProps,
+  ProgressSize,
+  ProgressColor,
+  ProgressVariant,
+} from './Progress'