@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/collapse/Collapse.test.tsx

@@ -0,0 +1,298 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Collapse,
+  CollapseButton,
+  CollapseContent,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from './Collapse'
+
+describe('Collapse', () => {
+  it('renders correctly', () => {
+    render(
+      <Collapse>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Hidden content</CollapseContent>
+      </Collapse>
+    )
+    expect(screen.getByText('Toggle')).toBeInTheDocument()
+  })
+
+  it('hides content by default', () => {
+    render(
+      <Collapse>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Hidden content</CollapseContent>
+      </Collapse>
+    )
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument()
+  })
+
+  it('shows content when defaultIsOpen is true', () => {
+    render(
+      <Collapse defaultIsOpen>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Visible content</CollapseContent>
+      </Collapse>
+    )
+    expect(screen.getByText('Visible content')).toBeInTheDocument()
+  })
+
+  it('toggles content on button click', () => {
+    render(
+      <Collapse>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Content</CollapseContent>
+      </Collapse>
+    )
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(screen.getByText('Content')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+  })
+
+  it('calls onToggle callback', () => {
+    const onToggle = vi.fn()
+    render(
+      <Collapse onToggle={onToggle}>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Content</CollapseContent>
+      </Collapse>
+    )
+    fireEvent.click(screen.getByRole('button'))
+    expect(onToggle).toHaveBeenCalledWith(true)
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onToggle).toHaveBeenCalledWith(false)
+  })
+
+  it('supports controlled isOpen prop', () => {
+    const onToggle = vi.fn()
+    const { rerender } = render(
+      <Collapse isOpen={false} onToggle={onToggle}>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Content</CollapseContent>
+      </Collapse>
+    )
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onToggle).toHaveBeenCalledWith(true)
+    // Still hidden because controlled
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    rerender(
+      <Collapse isOpen={true} onToggle={onToggle}>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Content</CollapseContent>
+      </Collapse>
+    )
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('communicates expanded state via aria', () => {
+    render(
+      <Collapse>
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Content</CollapseContent>
+      </Collapse>
+    )
+    // react-native-web does not map accessibilityState.expanded to aria-expanded
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+
+    fireEvent.click(button)
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Collapse className="extra">
+        <CollapseButton>Toggle</CollapseButton>
+        <CollapseContent>Content</CollapseContent>
+      </Collapse>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('Accordion', () => {
+    it('renders accordion items', () => {
+      render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>Section 2</AccordionButton>
+            <AccordionPanel>Panel 2</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      expect(screen.getByText('Section 1')).toBeInTheDocument()
+      expect(screen.getByText('Section 2')).toBeInTheDocument()
+    })
+
+    it('hides all panels by default', () => {
+      render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      expect(screen.queryByText('Panel 1')).not.toBeInTheDocument()
+    })
+
+    it('opens panel on click', () => {
+      render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      fireEvent.click(screen.getByText('Section 1'))
+      expect(screen.getByText('Panel 1')).toBeInTheDocument()
+    })
+
+    it('closes other panels in single mode', () => {
+      render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>Section 2</AccordionButton>
+            <AccordionPanel>Panel 2</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      fireEvent.click(screen.getByText('Section 1'))
+      expect(screen.getByText('Panel 1')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('Section 2'))
+      expect(screen.queryByText('Panel 1')).not.toBeInTheDocument()
+      expect(screen.getByText('Panel 2')).toBeInTheDocument()
+    })
+
+    it('allows multiple open panels when allowMultiple', () => {
+      render(
+        <Accordion allowMultiple>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>Section 2</AccordionButton>
+            <AccordionPanel>Panel 2</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      fireEvent.click(screen.getByText('Section 1'))
+      fireEvent.click(screen.getByText('Section 2'))
+      expect(screen.getByText('Panel 1')).toBeInTheDocument()
+      expect(screen.getByText('Panel 2')).toBeInTheDocument()
+    })
+
+    it('supports defaultIndex for initially open items', () => {
+      render(
+        <Accordion defaultIndex={[0]}>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>Section 2</AccordionButton>
+            <AccordionPanel>Panel 2</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      expect(screen.getByText('Panel 1')).toBeInTheDocument()
+      expect(screen.queryByText('Panel 2')).not.toBeInTheDocument()
+    })
+
+    it('closes an open panel on toggle', () => {
+      render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      fireEvent.click(screen.getByText('Section 1'))
+      expect(screen.getByText('Panel 1')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('Section 1'))
+      expect(screen.queryByText('Panel 1')).not.toBeInTheDocument()
+    })
+
+    it('communicates expanded state via aria', () => {
+      render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      const buttons = screen.getAllByRole('button')
+      // react-native-web does not map accessibilityState.expanded to aria-expanded
+      expect(buttons[0]).toBeInTheDocument()
+
+      fireEvent.click(buttons[0])
+      expect(screen.getByText('Panel 1')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations for Collapse', async () => {
+      const { container } = render(
+        <Collapse>
+          <CollapseButton>Toggle</CollapseButton>
+          <CollapseContent>Content</CollapseContent>
+        </Collapse>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for Accordion', async () => {
+      const { container } = render(
+        <Accordion>
+          <AccordionItem>
+            <AccordionButton>Section 1</AccordionButton>
+            <AccordionPanel>Panel 1</AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>Section 2</AccordionButton>
+            <AccordionPanel>Panel 2</AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has button role on collapse trigger', () => {
+      render(
+        <Collapse>
+          <CollapseButton>Toggle</CollapseButton>
+          <CollapseContent>Content</CollapseContent>
+        </Collapse>
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/ui/collapse/Collapse.tsx

@@ -0,0 +1,275 @@
+import React, { useState, createContext, useContext } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface CollapseProps extends ViewProps {
+  /** Whether the collapse is initially open */
+  defaultIsOpen?: boolean
+  /** Controlled open state */
+  isOpen?: boolean
+  /** Callback when state changes */
+  onToggle?: (isOpen: boolean) => void
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+interface CollapseContextType {
+  isOpen: boolean
+  toggle: () => void
+}
+
+const CollapseContext = createContext<CollapseContextType>({
+  isOpen: false,
+  toggle: () => {},
+})
+
+/**
+ * Collapsible content container.
+ *
+ * @example
+ * <Collapse>
+ *   <CollapseButton>
+ *     <Text>Click to expand</Text>
+ *   </CollapseButton>
+ *   <CollapseContent>
+ *     <Text>Hidden content</Text>
+ *   </CollapseContent>
+ * </Collapse>
+ */
+export function Collapse({
+  defaultIsOpen = false,
+  isOpen: controlledIsOpen,
+  onToggle,
+  className,
+  children,
+  ...props
+}: CollapseProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen)
+  const isOpen = controlledIsOpen ?? internalIsOpen
+
+  const toggle = () => {
+    const newState = !isOpen
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(newState)
+    }
+    onToggle?.(newState)
+  }
+
+  return (
+    <CollapseContext.Provider value={{ isOpen, toggle }}>
+      <View className={cn('w-full', className)} {...props}>
+        {children}
+      </View>
+    </CollapseContext.Provider>
+  )
+}
+
+export interface CollapseButtonProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Button to toggle collapse state.
+ */
+export function CollapseButton({ children, className }: CollapseButtonProps) {
+  const { isOpen, toggle } = useContext(CollapseContext)
+
+  return (
+    <Pressable
+      onPress={toggle}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isOpen }}
+      className={cn(
+        'flex-row items-center justify-between py-3 px-4',
+        'web:hover:bg-interactive-hover active:bg-interactive-active rounded-lg',
+        className
+      )}
+    >
+      {children}
+      <Text className={cn('text-text-secondary transition-transform', isOpen && 'rotate-180')}>
+        ▼
+      </Text>
+    </Pressable>
+  )
+}
+
+export interface CollapseContentProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Collapsible content area.
+ */
+export function CollapseContent({ children, className }: CollapseContentProps) {
+  const { isOpen } = useContext(CollapseContext)
+
+  if (!isOpen) return null
+
+  return (
+    <View className={cn('overflow-hidden', className)}>
+      {children}
+    </View>
+  )
+}
+
+// Accordion component
+
+export interface AccordionProps extends ViewProps {
+  /** Allow multiple items to be open */
+  allowMultiple?: boolean
+  /** Default open item indices */
+  defaultIndex?: number[]
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+interface AccordionContextType {
+  openIndices: Set<number>
+  toggleIndex: (index: number) => void
+  allowMultiple: boolean
+}
+
+const AccordionContext = createContext<AccordionContextType>({
+  openIndices: new Set(),
+  toggleIndex: () => {},
+  allowMultiple: false,
+})
+
+/**
+ * Accordion component for multiple collapsible sections.
+ *
+ * @example
+ * <Accordion>
+ *   <AccordionItem>
+ *     <AccordionButton>Section 1</AccordionButton>
+ *     <AccordionPanel>Content 1</AccordionPanel>
+ *   </AccordionItem>
+ *   <AccordionItem>
+ *     <AccordionButton>Section 2</AccordionButton>
+ *     <AccordionPanel>Content 2</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+export function Accordion({
+  allowMultiple = false,
+  defaultIndex = [],
+  className,
+  children,
+  ...props
+}: AccordionProps) {
+  const [openIndices, setOpenIndices] = useState<Set<number>>(new Set(defaultIndex))
+
+  const toggleIndex = (index: number) => {
+    setOpenIndices((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(index)) {
+        newSet.delete(index)
+      } else {
+        if (!allowMultiple) {
+          newSet.clear()
+        }
+        newSet.add(index)
+      }
+      return newSet
+    })
+  }
+
+  return (
+    <AccordionContext.Provider value={{ openIndices, toggleIndex, allowMultiple }}>
+      <View className={cn('w-full divide-y divide-border-default', className)} {...props}>
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as React.ReactElement<any>, { index })
+          }
+          return child
+        })}
+      </View>
+    </AccordionContext.Provider>
+  )
+}
+
+export interface AccordionItemProps {
+  index?: number
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Individual accordion item.
+ */
+export function AccordionItem({ index = 0, children, className }: AccordionItemProps) {
+  const { openIndices, toggleIndex } = useContext(AccordionContext)
+  const isOpen = openIndices.has(index)
+
+  return (
+    <View className={className}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            isOpen,
+            onToggle: () => toggleIndex(index),
+          })
+        }
+        return child
+      })}
+    </View>
+  )
+}
+
+export interface AccordionButtonProps {
+  isOpen?: boolean
+  onToggle?: () => void
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Accordion item toggle button.
+ */
+export function AccordionButton({
+  isOpen = false,
+  onToggle,
+  children,
+  className,
+}: AccordionButtonProps) {
+  return (
+    <Pressable
+      onPress={onToggle}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isOpen }}
+      className={cn(
+        'flex-row items-center justify-between py-4 px-1',
+        'web:hover:bg-interactive-hover active:bg-interactive-active',
+        className
+      )}
+    >
+      <Text className="text-text-primary font-medium">{children}</Text>
+      <Text className={cn('text-text-secondary transition-transform', isOpen && 'rotate-180')}>
+        ▼
+      </Text>
+    </Pressable>
+  )
+}
+
+export interface AccordionPanelProps {
+  isOpen?: boolean
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Accordion item content panel.
+ */
+export function AccordionPanel({ isOpen = false, children, className }: AccordionPanelProps) {
+  if (!isOpen) return null
+
+  return (
+    <View className={cn('pb-4 px-1', className)}>
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,18 @@
+export {
+  Collapse,
+  CollapseButton,
+  CollapseContent,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from './Collapse'
+export type {
+  CollapseProps,
+  CollapseButtonProps,
+  CollapseContentProps,
+  AccordionProps,
+  AccordionItemProps,
+  AccordionButtonProps,
+  AccordionPanelProps,
+} from './Collapse'

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { DataRow } from './DataRow'
+
+const meta: Meta<typeof DataRow> = {
+  title: 'Components/DataRow',
+  component: DataRow,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Descriptive label shown on the left',
+    },
+    value: {
+      control: 'text',
+      description: 'Value shown on the right (string or ReactNode)',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DataRow>
+
+export const Default: Story = {
+  args: {
+    label: 'Weight',
+    value: '185 lbs',
+  },
+}
+
+export const WithNumber: Story = {
+  args: {
+    label: 'Sets Completed',
+    value: '5',
+  },
+}
+
+export const WithCustomValue: Story = {
+  render: () => (
+    <DataRow
+      label="Status"
+      value={
+        <View style={{ backgroundColor: '#22c55e', borderRadius: 9999, paddingHorizontal: 8, paddingVertical: 2 }}>
+          <Text style={{ color: '#fff', fontSize: 12, fontWeight: '600' }}>Active</Text>
+        </View>
+      }
+    />
+  ),
+}
+
+export const WithValueClassName: Story = {
+  args: {
+    label: 'Peak Velocity',
+    value: '1.25 m/s',
+    valueClassName: 'text-brand-primary font-bold',
+  },
+}
+
+export const MultipleRows: Story = {
+  render: () => (
+    <View style={{ gap: 0 }}>
+      <DataRow label="Exercise" value="Back Squat" />
+      <DataRow label="Weight" value="185 lbs" />
+      <DataRow label="Sets" value="5" />
+      <DataRow label="Reps" value="5" />
+      <DataRow label="Mean Velocity" value="0.75 m/s" />
+      <DataRow label="Peak Velocity" value="1.25 m/s" valueClassName="font-bold" />
+    </View>
+  ),
+}
+
+export const CustomClassName: Story = {
+  args: {
+    label: 'Bordered Row',
+    value: 'With custom styles',
+    className: 'border-b border-border-primary px-4',
+  },
+}