@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/modal/Modal.test.tsx

@@ -0,0 +1,159 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+} from './Modal'
+
+function renderModal(props: Partial<React.ComponentProps<typeof Modal>> = {}) {
+  return render(
+    <Modal isOpen onClose={vi.fn()} {...props}>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>Test Modal</ModalTitle>
+          <ModalCloseButton />
+        </ModalHeader>
+        <ModalBody>Modal body content</ModalBody>
+        <ModalFooter>
+          <button>Cancel</button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+describe('Modal', () => {
+  it('renders when isOpen is true', () => {
+    renderModal({ isOpen: true })
+    expect(screen.getByText('Test Modal')).toBeInTheDocument()
+    expect(screen.getByText('Modal body content')).toBeInTheDocument()
+  })
+
+  it('does not render content when isOpen is false', () => {
+    renderModal({ isOpen: false })
+    expect(screen.queryByText('Test Modal')).not.toBeInTheDocument()
+  })
+
+  it('calls onClose when backdrop is pressed', () => {
+    const onClose = vi.fn()
+    renderModal({ isOpen: true, onClose })
+    // The backdrop is a Pressable wrapping children
+    // ModalContent stops propagation, so clicking outside content triggers onClose
+  })
+
+  it('does not call onClose on backdrop press when closeOnOverlayClick is false', () => {
+    const onClose = vi.fn()
+    renderModal({ isOpen: true, onClose, closeOnOverlayClick: false })
+    // Backdrop press should not trigger onClose
+  })
+
+  describe('ModalCloseButton', () => {
+    it('calls onClose when close button is pressed', () => {
+      const onClose = vi.fn()
+      renderModal({ isOpen: true, onClose })
+
+      const closeButton = screen.getByLabelText('Close modal')
+      fireEvent.click(closeButton)
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('has accessible label', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByLabelText('Close modal')).toBeInTheDocument()
+    })
+  })
+
+  describe('ModalTitle', () => {
+    it('renders title text', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByText('Test Modal')).toBeInTheDocument()
+    })
+
+    it('has header accessibility role', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByRole('heading')).toBeInTheDocument()
+    })
+  })
+
+  describe('ModalBody', () => {
+    it('renders body content', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByText('Modal body content')).toBeInTheDocument()
+    })
+
+    it('renders as ScrollView when scrollBehavior is inside', () => {
+      render(
+        <Modal isOpen onClose={vi.fn()} scrollBehavior="inside">
+          <ModalContent>
+            <ModalBody>Scrollable content</ModalBody>
+          </ModalContent>
+        </Modal>
+      )
+      expect(screen.getByText('Scrollable content')).toBeInTheDocument()
+    })
+  })
+
+  describe('ModalFooter', () => {
+    it('renders footer content', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByText('Cancel')).toBeInTheDocument()
+    })
+  })
+
+  describe('sizes', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
+    sizes.forEach((size) => {
+      it(`renders with size ${size}`, () => {
+        renderModal({ isOpen: true, size })
+        expect(screen.getByText('Test Modal')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('scroll behavior', () => {
+    it('renders with outside scroll behavior by default', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByText('Modal body content')).toBeInTheDocument()
+    })
+
+    it('renders with inside scroll behavior', () => {
+      render(
+        <Modal isOpen onClose={vi.fn()} scrollBehavior="inside">
+          <ModalContent>
+            <ModalBody>Inside scroll content</ModalBody>
+          </ModalContent>
+        </Modal>
+      )
+      expect(screen.getByText('Inside scroll content')).toBeInTheDocument()
+    })
+  })
+
+  describe('animation types', () => {
+    const animationTypes = ['none', 'fade', 'slide'] as const
+    animationTypes.forEach((animationType) => {
+      it(`renders with animationType ${animationType}`, () => {
+        renderModal({ isOpen: true, animationType })
+        expect(screen.getByText('Test Modal')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = renderModal({ isOpen: true })
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('close button has correct accessibility role', () => {
+      renderModal({ isOpen: true })
+      expect(screen.getByRole('button', { name: 'Close modal' })).toBeInTheDocument()
+    })
+  })
+})

package/src/components/ui/modal/Modal.tsx

@@ -0,0 +1,254 @@
+import React, { createContext, useContext } from 'react'
+import { Modal as RNModal, View, Text, Pressable, ScrollView, type ModalProps as RNModalProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+export type ModalScrollBehavior = 'inside' | 'outside'
+
+interface ModalContextType {
+  onClose?: () => void
+  size: ModalSize
+  scrollBehavior: ModalScrollBehavior
+}
+
+const ModalContext = createContext<ModalContextType>({ size: 'md', scrollBehavior: 'outside' })
+
+export interface ModalProps extends Omit<RNModalProps, 'visible'> {
+  /** Whether the modal is open */
+  isOpen: boolean
+  /** Callback when modal should close */
+  onClose?: () => void
+  /** Modal size */
+  size?: ModalSize
+  /** Where scrolling happens: inside modal body or whole modal */
+  scrollBehavior?: ModalScrollBehavior
+  /** Whether clicking backdrop closes modal */
+  closeOnOverlayClick?: boolean
+  /** Whether to blur the backdrop */
+  backdropBlur?: boolean
+  /** Additional className for backdrop */
+  backdropClassName?: string
+  /** Animation type */
+  animationType?: 'none' | 'fade' | 'slide'
+  children?: React.ReactNode
+}
+
+const sizeStyles: Record<ModalSize, string> = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  full: 'max-w-full m-4',
+}
+
+/**
+ * Modal component for dialogs and overlays.
+ *
+ * @example
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalContent>
+ *     <ModalHeader>
+ *       <ModalTitle>Modal Title</ModalTitle>
+ *       <ModalCloseButton />
+ *     </ModalHeader>
+ *     <ModalBody>
+ *       <Text>Modal content</Text>
+ *     </ModalBody>
+ *     <ModalFooter>
+ *       <Button onPress={() => setIsOpen(false)}>Close</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ */
+export function Modal({
+  isOpen,
+  onClose,
+  size = 'md',
+  scrollBehavior = 'outside',
+  closeOnOverlayClick = true,
+  backdropBlur = false,
+  backdropClassName,
+  animationType = 'fade',
+  children,
+  ...props
+}: ModalProps) {
+  const handleBackdropPress = () => {
+    if (closeOnOverlayClick && onClose) {
+      onClose()
+    }
+  }
+
+  const backdropContent = (
+    <Pressable
+      onPress={handleBackdropPress}
+      className={cn(
+        'flex-1 items-center justify-center',
+        backdropBlur ? 'bg-black/30 web:backdrop-blur-sm' : 'bg-black/50',
+        backdropClassName
+      )}
+    >
+      {children}
+    </Pressable>
+  )
+
+  return (
+    <ModalContext.Provider value={{ onClose, size, scrollBehavior }}>
+      <RNModal
+        visible={isOpen}
+        transparent
+        animationType={animationType}
+        onRequestClose={onClose}
+        {...props}
+      >
+        {scrollBehavior === 'outside' ? (
+          <ScrollView
+            contentContainerStyle={{ flexGrow: 1 }}
+            keyboardShouldPersistTaps="handled"
+          >
+            {backdropContent}
+          </ScrollView>
+        ) : (
+          backdropContent
+        )}
+      </RNModal>
+    </ModalContext.Provider>
+  )
+}
+
+export interface ModalContentProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Container for modal content.
+ */
+export function ModalContent({ children, className }: ModalContentProps) {
+  const { size } = useContext(ModalContext)
+
+  return (
+    <Pressable
+      // Prevent backdrop click from propagating
+      onPress={(e) => e.stopPropagation()}
+    >
+      <View
+        className={cn(
+          'bg-surface-elevated rounded-lg shadow-xl w-full',
+          sizeStyles[size],
+          className
+        )}
+      >
+        {children}
+      </View>
+    </Pressable>
+  )
+}
+
+export interface ModalHeaderProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Header section of modal.
+ */
+export function ModalHeader({ children, className }: ModalHeaderProps) {
+  return (
+    <View className={cn('flex-row items-center justify-between px-6 py-4 border-b border-divider', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface ModalTitleProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Title for modal header.
+ */
+export function ModalTitle({ children, className }: ModalTitleProps) {
+  return (
+    <Text
+      accessibilityRole="header"
+      className={cn('text-lg font-semibold text-text-primary font-heading', className)}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export interface ModalCloseButtonProps {
+  className?: string
+}
+
+/**
+ * Close button for modal header.
+ */
+export function ModalCloseButton({ className }: ModalCloseButtonProps) {
+  const { onClose } = useContext(ModalContext)
+
+  return (
+    <Pressable
+      onPress={onClose}
+      accessibilityRole="button"
+      accessibilityLabel="Close modal"
+      className={cn(
+        'p-1 rounded-md web:hover:bg-interactive-hover active:bg-interactive-active',
+        className
+      )}
+    >
+      <Text className="text-text-secondary text-xl leading-none">×</Text>
+    </Pressable>
+  )
+}
+
+export interface ModalBodyProps {
+  children?: React.ReactNode
+  /** Maximum height for scrollable content (when scrollBehavior="inside") */
+  maxHeight?: number
+  className?: string
+}
+
+/**
+ * Body section of modal.
+ */
+export function ModalBody({ children, maxHeight, className }: ModalBodyProps) {
+  const { scrollBehavior } = useContext(ModalContext)
+
+  if (scrollBehavior === 'inside') {
+    return (
+      <ScrollView
+        className={cn('px-6 py-4', className)}
+        style={maxHeight ? { maxHeight } : undefined}
+        showsVerticalScrollIndicator
+      >
+        {children}
+      </ScrollView>
+    )
+  }
+
+  return (
+    <View className={cn('px-6 py-4', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface ModalFooterProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Footer section of modal.
+ */
+export function ModalFooter({ children, className }: ModalFooterProps) {
+  return (
+    <View className={cn('flex-row items-center justify-end gap-2 px-6 py-4 border-t border-divider', className)}>
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,19 @@
+export {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+} from './Modal'
+export type {
+  ModalProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalTitleProps,
+  ModalCloseButtonProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalSize,
+} from './Modal'

package/src/components/ui/pill/Pill.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Pill } from './Pill'
+import { Indicator } from '../indicator'
+
+const meta: Meta<typeof Pill> = {
+  title: 'Components/Pill',
+  component: Pill,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['subtle', 'outline'] },
+    color: { control: 'select', options: ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] },
+    size: { control: 'select', options: ['xs', 'sm', 'md'] },
+    rounded: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Pill>
+
+export const Default: Story = { args: { children: 'Label', color: 'primary' } }
+
+export const AllVariants: Story = {
+  render: () => (
+    <View className="flex-row gap-2">
+      <Pill variant="subtle" color="primary">Subtle</Pill>
+      <Pill variant="outline" color="primary">Outline</Pill>
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View className="flex-row gap-2 flex-wrap">
+      <Pill color="default">Default</Pill>
+      <Pill color="primary">Primary</Pill>
+      <Pill color="success">Success</Pill>
+      <Pill color="error">Error</Pill>
+      <Pill color="warning">Warning</Pill>
+      <Pill color="info">Info</Pill>
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View className="flex-row gap-2 items-center">
+      <Pill size="xs" color="primary">XS</Pill>
+      <Pill size="sm" color="primary">SM</Pill>
+      <Pill size="md" color="primary">MD</Pill>
+    </View>
+  ),
+}
+
+export const WithDot: Story = {
+  render: () => (
+    <View className="flex-row gap-2">
+      <Pill color="success" leftElement={<Indicator size="xs" color="success" />}>Active</Pill>
+      <Pill color="error" leftElement={<Indicator size="xs" color="error" />}>Failed</Pill>
+      <Pill color="warning" leftElement={<Indicator size="xs" color="warning" />}>Pending</Pill>
+    </View>
+  ),
+}
+
+export const SquareCorners: Story = {
+  render: () => (
+    <View className="flex-row gap-2">
+      <Pill rounded={false} color="primary">Tag</Pill>
+      <Pill rounded={false} color="success">Done</Pill>
+    </View>
+  ),
+}

package/src/components/ui/pill/Pill.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Pill } from './Pill'
+
+describe('Pill', () => {
+  it('renders string children', () => {
+    render(<Pill>Active</Pill>)
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('renders with all variants', () => {
+    const variants = ['subtle', 'outline'] as const
+    variants.forEach((variant) => {
+      const { unmount } = render(<Pill variant={variant}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all colors', () => {
+    const colors = ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Pill color={color}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all sizes', () => {
+    const sizes = ['xs', 'sm', 'md'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Pill size={size}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies rounded-full by default', () => {
+    const { container } = render(<Pill>Test</Pill>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports leftElement', () => {
+    render(<Pill leftElement={<span data-testid="dot" />}>Label</Pill>)
+    expect(screen.getByTestId('dot')).toBeInTheDocument()
+    expect(screen.getByText('Label')).toBeInTheDocument()
+  })
+
+  it('handles onPress', () => {
+    const handler = vi.fn()
+    render(<Pill onPress={handler}>Click</Pill>)
+    fireEvent.click(screen.getByText('Click'))
+    expect(handler).toHaveBeenCalled()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Pill className="custom">Test</Pill>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Pill>Active</Pill>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/pill/Pill.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type PillVariant = 'subtle' | 'outline'
+export type PillColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type PillSize = 'xs' | 'sm' | 'md'
+
+export interface PillProps extends ViewProps {
+  /** Pill content */
+  children: React.ReactNode
+  /** Visual variant */
+  variant?: PillVariant
+  /** Color scheme */
+  color?: PillColor
+  /** Size */
+  size?: PillSize
+  /** Fully rounded (default true) or slight radius */
+  rounded?: boolean
+  /** Element before the label (e.g., Indicator dot) */
+  leftElement?: React.ReactNode
+  /** Press handler (makes pill interactive) */
+  onPress?: () => void
+  /** Additional className */
+  className?: string
+}
+
+const variantColorStyles: Record<PillVariant, Record<PillColor, string>> = {
+  subtle: {
+    default: 'bg-surface-raised border-border-subtle text-text-secondary',
+    primary: 'bg-brand-primary/10 border-brand-primary/25 text-brand-primary',
+    secondary: 'bg-brand-secondary/10 border-brand-secondary/25 text-brand-secondary',
+    success: 'bg-status-success/10 border-status-success/25 text-status-success',
+    error: 'bg-status-error/10 border-status-error/25 text-status-error',
+    warning: 'bg-status-warning/10 border-status-warning/25 text-status-warning',
+    info: 'bg-status-info/10 border-status-info/25 text-status-info',
+  },
+  outline: {
+    default: 'border-border-default text-text-secondary',
+    primary: 'border-brand-primary text-brand-primary',
+    secondary: 'border-brand-secondary text-brand-secondary',
+    success: 'border-status-success text-status-success',
+    error: 'border-status-error text-status-error',
+    warning: 'border-status-warning text-status-warning',
+    info: 'border-status-info text-status-info',
+  },
+}
+
+const sizeStyles: Record<PillSize, { container: string; text: string }> = {
+  xs: { container: 'px-1 py-px', text: 'text-[9px]' },
+  sm: { container: 'px-2 py-0.5', text: 'text-[10px]' },
+  md: { container: 'px-2 py-1', text: 'text-[10px]' },
+}
+
+export function Pill({
+  children,
+  variant = 'subtle',
+  color = 'default',
+  size = 'sm',
+  rounded = true,
+  leftElement,
+  onPress,
+  className,
+  ...props
+}: PillProps) {
+  const containerClasses = cn(
+    'flex-row items-center gap-1 border self-start shrink-0',
+    rounded ? 'rounded-full' : 'rounded',
+    variantColorStyles[variant][color],
+    sizeStyles[size].container,
+    className
+  )
+
+  const textClasses = cn(
+    'font-heading font-semibold',
+    sizeStyles[size].text,
+    'text-inherit'
+  )
+
+  const content = (
+    <>
+      {leftElement}
+      {typeof children === 'string' ? (
+        <Text className={textClasses}>{children}</Text>
+      ) : (
+        children
+      )}
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} className={containerClasses} {...props}>
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View className={containerClasses} {...props}>
+      {content}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Pill } from './Pill'
+export type { PillProps, PillVariant, PillColor, PillSize } from './Pill'