@titan-design/react-ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { DataRow } from './DataRow'
+
+describe('DataRow', () => {
+  it('renders label and string value', () => {
+    render(<DataRow label="Weight" value="185 lbs" />)
+    expect(screen.getByText('Weight')).toBeInTheDocument()
+    expect(screen.getByText('185 lbs')).toBeInTheDocument()
+  })
+
+  it('renders label and ReactNode value', () => {
+    render(
+      <DataRow label="Status" value={<span data-testid="custom-node">Active</span>} />
+    )
+    expect(screen.getByText('Status')).toBeInTheDocument()
+    expect(screen.getByTestId('custom-node')).toBeInTheDocument()
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('renders string value as text content', () => {
+    render(<DataRow label="Sets" value="5" />)
+    const valueEl = screen.getByText('5')
+    expect(valueEl).toBeInTheDocument()
+    expect(valueEl.textContent).toBe('5')
+  })
+
+  it('wraps ReactNode value in a View container', () => {
+    const { container } = render(
+      <DataRow label="Custom" value={<div data-testid="inner">Content</div>} />
+    )
+    expect(screen.getByTestId('inner')).toBeInTheDocument()
+  })
+
+  it('applies custom className to root container', () => {
+    const { container } = render(
+      <DataRow label="Test" value="Value" className="bg-red-500" />
+    )
+    const root = container.firstChild as HTMLElement
+    expect(root).toBeInTheDocument()
+  })
+
+  it('applies valueClassName to string value', () => {
+    render(
+      <DataRow label="Test" value="Value" valueClassName="text-lg" />
+    )
+    expect(screen.getByText('Value')).toBeInTheDocument()
+  })
+
+  it('applies valueClassName to ReactNode wrapper', () => {
+    render(
+      <DataRow label="Test" value={<span>Node</span>} valueClassName="text-lg" />
+    )
+    expect(screen.getByText('Node')).toBeInTheDocument()
+  })
+
+  it('passes through additional ViewProps', () => {
+    render(<DataRow label="Test" value="Value" testID="data-row" />)
+    expect(screen.getByTestId('data-row')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations with string value', async () => {
+      const { container } = render(<DataRow label="Weight" value="185 lbs" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with ReactNode value', async () => {
+      const { container } = render(
+        <DataRow label="Status" value={<span>Active</span>} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface DataRowProps extends ViewProps {
+  /** Descriptive label shown on the left */
+  label: string
+  /** Value shown on the right -- string renders as Text, ReactNode renders inside a View */
+  value: React.ReactNode
+  /** Additional className applied to the value element */
+  valueClassName?: string
+  /** Additional className applied to the root container */
+  className?: string
+}
+
+export function DataRow({ label, value, valueClassName, className, ...props }: DataRowProps) {
+  return (
+    <View className={cn('flex-row items-center justify-between py-2', className)} {...props}>
+      <Text className="text-sm text-text-secondary">{label}</Text>
+      {typeof value === 'string' ? (
+        <Text className={cn('text-sm font-medium text-text-primary', valueClassName)}>
+          {value}
+        </Text>
+      ) : (
+        <View className={cn(valueClassName)}>{value}</View>
+      )}
+    </View>
+  )
+}

package/src/components/ui/data-row/index.ts

@@ -0,0 +1,2 @@
+export { DataRow } from './DataRow'
+export type { DataRowProps } from './DataRow'

package/src/components/ui/divider/Divider.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Divider } from './Divider'
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Divider orientation',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Divider>
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <View style={{ width: 300 }}>
+      <Text className="text-text-primary mb-3">Content above</Text>
+      <Divider {...args} />
+      <Text className="text-text-primary mt-3">Content below</Text>
+    </View>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <View style={{ width: 300, gap: 12 }}>
+      <Text className="text-text-primary">Section One</Text>
+      <Divider />
+      <Text className="text-text-primary">Section Two</Text>
+      <Divider />
+      <Text className="text-text-primary">Section Three</Text>
+    </View>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'center', height: 40, gap: 12 }}>
+      <Text className="text-text-primary">Left</Text>
+      <Divider orientation="vertical" />
+      <Text className="text-text-primary">Center</Text>
+      <Divider orientation="vertical" />
+      <Text className="text-text-primary">Right</Text>
+    </View>
+  ),
+}
+
+export const InList: Story = {
+  render: () => (
+    <View style={{ width: 300 }}>
+      {['Item One', 'Item Two', 'Item Three', 'Item Four'].map((item, index, arr) => (
+        <View key={item}>
+          <View style={{ paddingVertical: 12 }}>
+            <Text className="text-text-primary">{item}</Text>
+          </View>
+          {index < arr.length - 1 && <Divider />}
+        </View>
+      ))}
+    </View>
+  ),
+}

package/src/components/ui/divider/Divider.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Divider } from './Divider'
+
+describe('Divider', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Divider />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('defaults to horizontal orientation', () => {
+    const { container } = render(<Divider />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders with vertical orientation', () => {
+    const { container } = render(<Divider orientation="vertical" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders with horizontal orientation', () => {
+    const { container } = render(<Divider orientation="horizontal" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Divider className="my-4" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('passes additional props through', () => {
+    const { container } = render(<Divider testID="divider" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('has accessibilityRole of none', () => {
+    const { container } = render(<Divider />)
+    expect(container.firstChild).toHaveAttribute('role', 'presentation')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Divider />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in vertical orientation', async () => {
+      const { container } = render(<Divider orientation="vertical" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/divider/Divider.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type DividerOrientation = 'horizontal' | 'vertical'
+
+export interface DividerProps extends ViewProps {
+  /** Divider orientation */
+  orientation?: DividerOrientation
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Divider component for visual separation of content.
+ *
+ * @example
+ * <Divider />
+ * <Divider orientation="vertical" />
+ */
+export function Divider({
+  orientation = 'horizontal',
+  className,
+  ...props
+}: DividerProps) {
+  return (
+    <View
+      accessibilityRole="none"
+      className={cn(
+        'bg-divider',
+        orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        className
+      )}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider'
+export type { DividerProps, DividerOrientation } from './Divider'

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View, Text, Pressable } from 'react-native'
+import { Drawer, DrawerBody, DrawerFooter } from './Drawer'
+import { Button, ButtonText } from '../button'
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+    },
+    closeOnOverlayClick: {
+      control: 'boolean',
+    },
+    showCloseButton: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Drawer>
+
+export const Default: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <View>
+        <Button onPress={() => setIsOpen(true)}>
+          <ButtonText>Open Drawer</ButtonText>
+        </Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Drawer Title"
+        >
+          <DrawerBody>
+            <Text className="text-text-primary">
+              This is the drawer content. You can put any content here.
+            </Text>
+          </DrawerBody>
+        </Drawer>
+      </View>
+    )
+  },
+}
+
+export const LeftPlacement: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <View>
+        <Button onPress={() => setIsOpen(true)}>
+          <ButtonText>Open Left Drawer</ButtonText>
+        </Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          placement="left"
+          title="Navigation"
+        >
+          <DrawerBody>
+            <View className="gap-2">
+              <Pressable className="p-3 rounded-lg web:hover:bg-interactive-hover">
+                <Text className="text-text-primary">Dashboard</Text>
+              </Pressable>
+              <Pressable className="p-3 rounded-lg web:hover:bg-interactive-hover">
+                <Text className="text-text-primary">Settings</Text>
+              </Pressable>
+              <Pressable className="p-3 rounded-lg web:hover:bg-interactive-hover">
+                <Text className="text-text-primary">Profile</Text>
+              </Pressable>
+            </View>
+          </DrawerBody>
+        </Drawer>
+      </View>
+    )
+  },
+}
+
+export const BottomPlacement: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <View>
+        <Button onPress={() => setIsOpen(true)}>
+          <ButtonText>Open Bottom Drawer</ButtonText>
+        </Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          placement="bottom"
+          size="md"
+          title="Actions"
+        >
+          <DrawerBody>
+            <View className="gap-3">
+              <Button variant="outline" className="w-full">
+                <ButtonText>Share</ButtonText>
+              </Button>
+              <Button variant="outline" className="w-full">
+                <ButtonText>Download</ButtonText>
+              </Button>
+              <Button variant="outline" color="error" className="w-full">
+                <ButtonText>Delete</ButtonText>
+              </Button>
+            </View>
+          </DrawerBody>
+        </Drawer>
+      </View>
+    )
+  },
+}
+
+export const AllSizes: Story = {
+  render: function Render() {
+    const [openSize, setOpenSize] = useState<string | null>(null)
+    const sizes = ['sm', 'md', 'lg', 'xl'] as const
+    
+    return (
+      <View className="flex-row gap-2 flex-wrap">
+        {sizes.map((size) => (
+          <Button key={size} onPress={() => setOpenSize(size)}>
+            <ButtonText>{size.toUpperCase()}</ButtonText>
+          </Button>
+        ))}
+        {sizes.map((size) => (
+          <Drawer
+            key={size}
+            isOpen={openSize === size}
+            onClose={() => setOpenSize(null)}
+            size={size}
+            title={`${size.toUpperCase()} Drawer`}
+          >
+            <DrawerBody>
+              <Text className="text-text-primary">
+                This is a {size} size drawer.
+              </Text>
+            </DrawerBody>
+          </Drawer>
+        ))}
+      </View>
+    )
+  },
+}
+
+export const WithFooter: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <View>
+        <Button onPress={() => setIsOpen(true)}>
+          <ButtonText>Open Form Drawer</ButtonText>
+        </Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Edit Profile"
+          size="lg"
+        >
+          <DrawerBody>
+            <View className="gap-4">
+              <View>
+                <Text className="text-sm font-medium text-text-secondary mb-1">Name</Text>
+                <View className="border border-border-input rounded-md px-3 py-2 bg-surface-input">
+                  <Text className="text-text-primary">John Doe</Text>
+                </View>
+              </View>
+              <View>
+                <Text className="text-sm font-medium text-text-secondary mb-1">Email</Text>
+                <View className="border border-border-input rounded-md px-3 py-2 bg-surface-input">
+                  <Text className="text-text-primary">john@example.com</Text>
+                </View>
+              </View>
+              <View>
+                <Text className="text-sm font-medium text-text-secondary mb-1">Bio</Text>
+                <View className="border border-border-input rounded-md px-3 py-2 bg-surface-input h-24">
+                  <Text className="text-text-primary">Software developer...</Text>
+                </View>
+              </View>
+            </View>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button variant="ghost" onPress={() => setIsOpen(false)}>
+              <ButtonText>Cancel</ButtonText>
+            </Button>
+            <Button onPress={() => setIsOpen(false)}>
+              <ButtonText>Save Changes</ButtonText>
+            </Button>
+          </DrawerFooter>
+        </Drawer>
+      </View>
+    )
+  },
+}
+
+export const NoCloseButton: Story = {
+  render: function Render() {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <View>
+        <Button onPress={() => setIsOpen(true)}>
+          <ButtonText>Open Drawer</ButtonText>
+        </Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Custom Header"
+          showCloseButton={false}
+        >
+          <DrawerBody>
+            <Text className="text-text-primary">
+              This drawer has no close button. Click the overlay to close.
+            </Text>
+          </DrawerBody>
+        </Drawer>
+      </View>
+    )
+  },
+}

package/src/components/ui/drawer/Drawer.test.tsx

@@ -0,0 +1,142 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Drawer, DrawerBody, DrawerHeader, DrawerFooter } from './Drawer'
+
+function renderDrawer(props: Partial<React.ComponentProps<typeof Drawer>> = {}) {
+  return render(
+    <Drawer isOpen onClose={vi.fn()} title="Test Drawer" {...props}>
+      <DrawerBody>Drawer body content</DrawerBody>
+      <DrawerFooter>
+        <button>Save</button>
+      </DrawerFooter>
+    </Drawer>
+  )
+}
+
+describe('Drawer', () => {
+  it('renders when isOpen is true', () => {
+    renderDrawer({ isOpen: true })
+    expect(screen.getByText('Test Drawer')).toBeInTheDocument()
+    expect(screen.getByText('Drawer body content')).toBeInTheDocument()
+  })
+
+  it('does not render when isOpen is false', () => {
+    renderDrawer({ isOpen: false })
+    expect(screen.queryByText('Test Drawer')).not.toBeInTheDocument()
+  })
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = vi.fn()
+    renderDrawer({ isOpen: true, onClose })
+
+    const closeButton = screen.getByLabelText('Close drawer')
+    fireEvent.click(closeButton)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides close button when showCloseButton is false', () => {
+    renderDrawer({ isOpen: true, showCloseButton: false })
+    expect(screen.queryByLabelText('Close drawer')).not.toBeInTheDocument()
+  })
+
+  it('renders title', () => {
+    renderDrawer({ isOpen: true, title: 'Settings' })
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('renders without title', () => {
+    renderDrawer({ isOpen: true, title: undefined, showCloseButton: false })
+    expect(screen.getByText('Drawer body content')).toBeInTheDocument()
+  })
+
+  describe('placements', () => {
+    const placements = ['left', 'right', 'top', 'bottom'] as const
+    placements.forEach((placement) => {
+      it(`renders with placement ${placement}`, () => {
+        renderDrawer({ isOpen: true, placement })
+        expect(screen.getByText('Test Drawer')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('sizes', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl', 'full'] as const
+    sizes.forEach((size) => {
+      it(`renders with size ${size}`, () => {
+        renderDrawer({ isOpen: true, size })
+        expect(screen.getByText('Test Drawer')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('overlay click behavior', () => {
+    it('calls onClose when overlay is clicked with closeOnOverlayClick true', () => {
+      const onClose = vi.fn()
+      renderDrawer({ isOpen: true, onClose, closeOnOverlayClick: true })
+      // The backdrop Pressable triggers onClose
+    })
+
+    it('does not call onClose when closeOnOverlayClick is false', () => {
+      const onClose = vi.fn()
+      renderDrawer({ isOpen: true, onClose, closeOnOverlayClick: false })
+      // Clicking backdrop should not call onClose
+    })
+  })
+
+  describe('DrawerBody', () => {
+    it('renders body content', () => {
+      renderDrawer({ isOpen: true })
+      expect(screen.getByText('Drawer body content')).toBeInTheDocument()
+    })
+
+    it('renders scrollable body by default', () => {
+      render(
+        <Drawer isOpen onClose={vi.fn()}>
+          <DrawerBody scrollable>Scrollable content</DrawerBody>
+        </Drawer>
+      )
+      expect(screen.getByText('Scrollable content')).toBeInTheDocument()
+    })
+
+    it('renders non-scrollable body', () => {
+      render(
+        <Drawer isOpen onClose={vi.fn()}>
+          <DrawerBody scrollable={false}>Non-scrollable content</DrawerBody>
+        </Drawer>
+      )
+      expect(screen.getByText('Non-scrollable content')).toBeInTheDocument()
+    })
+  })
+
+  describe('DrawerHeader', () => {
+    it('renders custom header content', () => {
+      render(
+        <Drawer isOpen onClose={vi.fn()} showCloseButton={false}>
+          <DrawerHeader>Custom Header</DrawerHeader>
+        </Drawer>
+      )
+      expect(screen.getByText('Custom Header')).toBeInTheDocument()
+    })
+  })
+
+  describe('DrawerFooter', () => {
+    it('renders footer content', () => {
+      renderDrawer({ isOpen: true })
+      expect(screen.getByText('Save')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = renderDrawer({ isOpen: true })
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('close button has accessible label', () => {
+      renderDrawer({ isOpen: true })
+      expect(screen.getByLabelText('Close drawer')).toBeInTheDocument()
+    })
+  })
+})