@titan-design/react-ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,277 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverCloseButton,
+} from './Popover'
+
+describe('Popover', () => {
+  it('renders trigger element', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <button>Open</button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <span>Content</span>
+        </PopoverContent>
+      </Popover>
+    )
+    expect(screen.getByText('Open')).toBeInTheDocument()
+  })
+
+  it('does not show content by default', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <button>Open</button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <span>Hidden content</span>
+        </PopoverContent>
+      </Popover>
+    )
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument()
+  })
+
+  it('opens popover when trigger is clicked', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <button>Open</button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <span>Visible content</span>
+        </PopoverContent>
+      </Popover>
+    )
+
+    fireEvent.click(screen.getByText('Open'))
+    expect(screen.getByText('Visible content')).toBeInTheDocument()
+  })
+
+  it('closes popover when trigger is clicked again', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <button>Toggle</button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <span>Content</span>
+        </PopoverContent>
+      </Popover>
+    )
+
+    fireEvent.click(screen.getByText('Toggle'))
+    expect(screen.getByText('Content')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Toggle'))
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+  })
+
+  describe('controlled state', () => {
+    it('shows content when isOpen is true', () => {
+      render(
+        <Popover isOpen>
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Open content</span>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.getByText('Open content')).toBeInTheDocument()
+    })
+
+    it('hides content when isOpen is false', () => {
+      render(
+        <Popover isOpen={false}>
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Closed content</span>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.queryByText('Closed content')).not.toBeInTheDocument()
+    })
+
+    it('calls onOpenChange when trigger is clicked', () => {
+      const onOpenChange = vi.fn()
+      render(
+        <Popover onOpenChange={onOpenChange}>
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.click(screen.getByText('Trigger'))
+      expect(onOpenChange).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('placement', () => {
+    it('renders with bottom placement (default)', () => {
+      render(
+        <Popover isOpen placement="bottom">
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Bottom</span>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.getByText('Bottom')).toBeInTheDocument()
+    })
+
+    it('renders with top placement', () => {
+      render(
+        <Popover isOpen placement="top">
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Top</span>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.getByText('Top')).toBeInTheDocument()
+    })
+
+    it('renders with left placement', () => {
+      render(
+        <Popover isOpen placement="left">
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Left</span>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.getByText('Left')).toBeInTheDocument()
+    })
+
+    it('renders with right placement', () => {
+      render(
+        <Popover isOpen placement="right">
+          <PopoverTrigger>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Right</span>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.getByText('Right')).toBeInTheDocument()
+    })
+  })
+
+  describe('PopoverCloseButton', () => {
+    it('closes popover when clicked', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>
+            <button>Open</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Content</span>
+            <PopoverCloseButton>
+              <span>Close</span>
+            </PopoverCloseButton>
+          </PopoverContent>
+        </Popover>
+      )
+
+      fireEvent.click(screen.getByText('Open'))
+      expect(screen.getByText('Content')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByLabelText('Close popover'))
+      expect(screen.queryByText('Content')).not.toBeInTheDocument()
+    })
+
+    it('has correct accessibility label', () => {
+      render(
+        <Popover isOpen>
+          <PopoverTrigger>
+            <button>Open</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverCloseButton>
+              <span>X</span>
+            </PopoverCloseButton>
+          </PopoverContent>
+        </Popover>
+      )
+      expect(screen.getByLabelText('Close popover')).toBeInTheDocument()
+    })
+  })
+
+  describe('PopoverTrigger', () => {
+    it('communicates expanded state', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>
+            <span>Trigger</span>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Content</span>
+          </PopoverContent>
+        </Popover>
+      )
+
+      const trigger = screen.getByRole('button', { name: 'Trigger' })
+      // react-native-web does not render aria-expanded for accessibilityState.expanded
+      expect(trigger).toBeInTheDocument()
+
+      fireEvent.click(trigger)
+      // Verify popover opens by checking for content
+      expect(screen.getByText('Content')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations when closed', async () => {
+      const { container } = render(
+        <Popover>
+          <PopoverTrigger>
+            <span>Open popover</span>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Popover content</span>
+          </PopoverContent>
+        </Popover>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when open', async () => {
+      const { container } = render(
+        <Popover isOpen>
+          <PopoverTrigger>
+            <span>Open popover</span>
+          </PopoverTrigger>
+          <PopoverContent>
+            <span>Popover content</span>
+            <PopoverCloseButton>
+              <span>Close</span>
+            </PopoverCloseButton>
+          </PopoverContent>
+        </Popover>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,162 @@
+import React, { useState, 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
+}
+
+const PopoverContext = createContext<PopoverContextType>({
+  isOpen: false,
+  setIsOpen: () => {},
+  placement: 'bottom',
+})
+
+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
+  /** 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,
+  className,
+  children,
+  ...props
+}: PopoverProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false)
+  const isOpen = controlledIsOpen ?? internalIsOpen
+
+  const setIsOpen = (open: boolean) => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(open)
+    }
+    onOpenChange?.(open)
+  }
+
+  return (
+    <PopoverContext.Provider value={{ isOpen, setIsOpen, placement }}>
+      <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 } = useContext(PopoverContext)
+
+  return (
+    <Pressable
+      onPress={() => setIsOpen(!isOpen)}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isOpen }}
+      className={className}
+    >
+      {children}
+    </Pressable>
+  )
+}
+
+export interface PopoverContentProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Content container for the popover.
+ */
+export function PopoverContent({ children, className }: PopoverContentProps) {
+  const { isOpen, setIsOpen, placement } = 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',
+  }
+
+  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
+        )}
+      >
+        {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>
+  ),
+}