@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/popover/Popover.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useRef, useCallback, createContext, useContext } from 'react'
+import { View, Pressable, Modal, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+interface PopoverContextType {
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+  placement: PopoverPlacement
+  triggerMode: 'click' | 'hover'
+  handleHoverIn: () => void
+  handleHoverOut: () => void
+}
+
+const PopoverContext = createContext<PopoverContextType>({
+  isOpen: false,
+  setIsOpen: () => {},
+  placement: 'bottom',
+  triggerMode: 'click',
+  handleHoverIn: () => {},
+  handleHoverOut: () => {},
+})
+
+export interface PopoverProps extends ViewProps {
+  /** Placement of the popover */
+  placement?: PopoverPlacement
+  /** Controlled open state */
+  isOpen?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (isOpen: boolean) => void
+  /** Whether clicking outside closes the popover */
+  closeOnClickOutside?: boolean
+  /** Trigger mode: 'click' opens on click, 'hover' opens on hover */
+  triggerMode?: 'click' | 'hover'
+  /** Delay in ms before closing in hover mode (default 150) */
+  closeDelay?: number
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Popover component for displaying floating content.
+ *
+ * @example
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button><ButtonText>Open</ButtonText></Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <Text>Popover content</Text>
+ *   </PopoverContent>
+ * </Popover>
+ */
+export function Popover({
+  placement = 'bottom',
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  triggerMode = 'click',
+  closeDelay = 150,
+  className,
+  children,
+  ...props
+}: PopoverProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false)
+  const isOpen = controlledIsOpen ?? internalIsOpen
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const setIsOpen = useCallback((open: boolean) => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(open)
+    }
+    onOpenChange?.(open)
+  }, [controlledIsOpen, onOpenChange])
+
+  const handleHoverIn = useCallback(() => {
+    if (triggerMode !== 'hover') return
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+    setIsOpen(true)
+  }, [triggerMode, setIsOpen])
+
+  const handleHoverOut = useCallback(() => {
+    if (triggerMode !== 'hover') return
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false)
+      closeTimerRef.current = null
+    }, closeDelay)
+  }, [triggerMode, closeDelay, setIsOpen])
+
+  return (
+    <PopoverContext.Provider
+      value={{ isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut }}
+    >
+      <View className={cn('relative', className)} {...props}>
+        {children}
+      </View>
+    </PopoverContext.Provider>
+  )
+}
+
+export interface PopoverTriggerProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Trigger element for the popover.
+ */
+export function PopoverTrigger({ children, className }: PopoverTriggerProps) {
+  const { isOpen, setIsOpen, triggerMode, handleHoverIn, handleHoverOut } =
+    useContext(PopoverContext)
+
+  const hoverProps =
+    triggerMode === 'hover'
+      ? {
+          onHoverIn: handleHoverIn,
+          onHoverOut: handleHoverOut,
+          onMouseEnter: handleHoverIn,
+          onMouseLeave: handleHoverOut,
+        }
+      : {}
+
+  return (
+    <Pressable
+      onPress={() => setIsOpen(!isOpen)}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isOpen }}
+      className={className}
+      {...hoverProps}
+    >
+      {children}
+    </Pressable>
+  )
+}
+
+export interface PopoverContentProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+const SPACER_STYLES: Record<PopoverPlacement, React.CSSProperties> = {
+  top: { left: 0, right: 0, bottom: 0, height: 8, transform: 'translateY(100%)' },
+  bottom: { left: 0, right: 0, top: 0, height: 8, transform: 'translateY(-100%)' },
+  left: { top: 0, bottom: 0, right: 0, width: 8, transform: 'translateX(100%)' },
+  right: { top: 0, bottom: 0, left: 0, width: 8, transform: 'translateX(-100%)' },
+}
+
+/**
+ * Content container for the popover.
+ */
+export function PopoverContent({ children, className }: PopoverContentProps) {
+  const { isOpen, setIsOpen, placement, triggerMode, handleHoverIn, handleHoverOut } =
+    useContext(PopoverContext)
+
+  if (!isOpen) return null
+
+  const placementStyles = {
+    top: 'bottom-full left-0 mb-2',
+    bottom: 'top-full left-0 mt-2',
+    left: 'right-full top-0 mr-2',
+    right: 'left-full top-0 ml-2',
+  }
+
+  const hoverProps =
+    triggerMode === 'hover'
+      ? {
+          onHoverIn: handleHoverIn,
+          onHoverOut: handleHoverOut,
+          onMouseEnter: handleHoverIn,
+          onMouseLeave: handleHoverOut,
+        }
+      : {}
+
+  return (
+    <>
+      {/* Backdrop */}
+      <Pressable
+        onPress={() => setIsOpen(false)}
+        className="fixed inset-0 z-40"
+        style={{ position: 'absolute' }}
+      />
+      {/* Content */}
+      <View
+        className={cn(
+          'absolute z-50 min-w-[200px]',
+          'bg-surface-elevated rounded-lg shadow-lg border border-border-default',
+          'p-4',
+          placementStyles[placement],
+          className
+        )}
+        {...hoverProps}
+      >
+        {triggerMode === 'hover' && (
+          <div
+            style={{
+              position: 'absolute',
+              pointerEvents: 'auto',
+              background: 'transparent',
+              ...SPACER_STYLES[placement],
+            }}
+            onMouseEnter={handleHoverIn}
+            onMouseLeave={handleHoverOut}
+          />
+        )}
+        {children}
+      </View>
+    </>
+  )
+}
+
+export interface PopoverCloseButtonProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Button to close the popover.
+ */
+export function PopoverCloseButton({ children, className }: PopoverCloseButtonProps) {
+  const { setIsOpen } = useContext(PopoverContext)
+
+  return (
+    <Pressable
+      onPress={() => setIsOpen(false)}
+      accessibilityRole="button"
+      accessibilityLabel="Close popover"
+      className={cn('p-1', className)}
+    >
+      {children}
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './Popover'
+export type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverCloseButtonProps, PopoverPlacement } from './Popover'

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

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Progress, CircularProgress, ProgressSteps } from './Progress'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+    },
+    isIndeterminate: {
+      control: 'boolean',
+    },
+    showValue: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {
+  args: {
+    value: 60,
+    size: 'md',
+    color: 'primary',
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    value: 45,
+    label: 'Uploading files...',
+    showValue: true,
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View className="gap-6 w-64">
+      <View>
+        <Text className="text-text-secondary text-sm mb-2">Small</Text>
+        <Progress value={60} size="sm" />
+      </View>
+      <View>
+        <Text className="text-text-secondary text-sm mb-2">Medium</Text>
+        <Progress value={60} size="md" />
+      </View>
+      <View>
+        <Text className="text-text-secondary text-sm mb-2">Large</Text>
+        <Progress value={60} size="lg" />
+      </View>
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View className="gap-4 w-64">
+      <Progress value={75} color="primary" label="Primary" showValue />
+      <Progress value={75} color="secondary" label="Secondary" showValue />
+      <Progress value={75} color="success" label="Success" showValue />
+      <Progress value={75} color="error" label="Error" showValue />
+      <Progress value={75} color="warning" label="Warning" showValue />
+      <Progress value={75} color="info" label="Info" showValue />
+    </View>
+  ),
+}
+
+export const Indeterminate: Story = {
+  args: {
+    isIndeterminate: true,
+    label: 'Loading...',
+  },
+}
+
+export const CustomFormat: Story = {
+  args: {
+    value: 750,
+    max: 1000,
+    showValue: true,
+    label: 'Storage used',
+    formatValue: (value, max) => `${value} MB / ${max} MB`,
+  },
+}
+
+export const Circular: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center">
+      <CircularProgress value={25} showValue />
+      <CircularProgress value={50} showValue />
+      <CircularProgress value={75} showValue />
+      <CircularProgress value={100} showValue />
+    </View>
+  ),
+}
+
+export const CircularSizes: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center">
+      <CircularProgress value={60} size={32} strokeWidth={3} showValue />
+      <CircularProgress value={60} size={48} strokeWidth={4} showValue />
+      <CircularProgress value={60} size={64} strokeWidth={5} showValue />
+      <CircularProgress value={60} size={80} strokeWidth={6} showValue />
+    </View>
+  ),
+}
+
+export const Steps: Story = {
+  render: () => (
+    <View className="gap-8">
+      <ProgressSteps
+        currentStep={1}
+        totalSteps={4}
+        labels={['Cart', 'Shipping', 'Payment', 'Done']}
+      />
+      <ProgressSteps
+        currentStep={2}
+        totalSteps={4}
+        color="success"
+        labels={['Step 1', 'Step 2', 'Step 3', 'Step 4']}
+      />
+      <ProgressSteps
+        currentStep={0}
+        totalSteps={5}
+        size="lg"
+      />
+    </View>
+  ),
+}
+
+export const UsageExamples: Story = {
+  render: () => (
+    <View className="gap-6">
+      {/* File upload */}
+      <View className="p-4 bg-surface-elevated rounded-lg">
+        <Text className="text-text-primary font-medium mb-3">File Upload</Text>
+        <Progress value={67} label="document.pdf" showValue />
+      </View>
+
+      {/* Storage quota */}
+      <View className="p-4 bg-surface-elevated rounded-lg">
+        <Text className="text-text-primary font-medium mb-3">Storage</Text>
+        <Progress
+          value={8.5}
+          max={10}
+          color="warning"
+          label="8.5 GB of 10 GB used"
+        />
+      </View>
+
+      {/* Checkout steps */}
+      <View className="p-4 bg-surface-elevated rounded-lg">
+        <Text className="text-text-primary font-medium mb-3">Checkout Progress</Text>
+        <ProgressSteps
+          currentStep={2}
+          totalSteps={4}
+          labels={['Cart', 'Shipping', 'Payment', 'Confirm']}
+        />
+      </View>
+
+      {/* Loading stats */}
+      <View className="p-4 bg-surface-elevated rounded-lg flex-row gap-4">
+        <View className="items-center">
+          <CircularProgress value={87} size={56} showValue color="success" />
+          <Text className="text-xs text-text-secondary mt-1">Success Rate</Text>
+        </View>
+        <View className="items-center">
+          <CircularProgress value={45} size={56} showValue color="warning" />
+          <Text className="text-xs text-text-secondary mt-1">Performance</Text>
+        </View>
+        <View className="items-center">
+          <CircularProgress value={12} size={56} showValue color="error" />
+          <Text className="text-xs text-text-secondary mt-1">Error Rate</Text>
+        </View>
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,210 @@
+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('trackWidth and customColor', () => {
+    it('supports fixed trackWidth', () => {
+      const { container } = render(<Progress value={50} trackWidth={60} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('supports customColor', () => {
+      const { container } = render(<Progress value={50} customColor="#FF6B6B" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders correctly without trackWidth or customColor', () => {
+      render(<Progress value={75} />)
+      expect(screen.getByRole('progressbar')).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()
+      })
+    })
+
+    it('renders SVG circles', () => {
+      const { container } = render(<CircularProgress value={50} />)
+      const circles = container.querySelectorAll('circle')
+      expect(circles.length).toBe(2) // track + progress
+    })
+
+    it('applies custom color to SVG progress circle', () => {
+      const { container } = render(<CircularProgress value={50} color="success" />)
+      const progressCircle = container.querySelectorAll('circle')[1]
+      expect(progressCircle?.getAttribute('stroke')).toBe('var(--color-status-success)')
+    })
+  })
+
+  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()
+    })
+  })
+})