@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/ui/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs'
+
+describe('Breadcrumbs', () => {
+  it('renders breadcrumb items', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+        <BreadcrumbItem onPress={() => {}}>Products</BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>Widget</BreadcrumbItem>
+      </Breadcrumbs>
+    )
+
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Products')).toBeInTheDocument()
+    expect(screen.getByText('Widget')).toBeInTheDocument()
+  })
+
+  it('renders default separator between items', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>Page</BreadcrumbItem>
+      </Breadcrumbs>
+    )
+
+    // Default separator is '/'
+    const separators = screen.getAllByText('/')
+    expect(separators).toHaveLength(1)
+  })
+
+  it('renders custom separator', () => {
+    render(
+      <Breadcrumbs separator=">">
+        <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>Page</BreadcrumbItem>
+      </Breadcrumbs>
+    )
+
+    expect(screen.getByText('>')).toBeInTheDocument()
+  })
+
+  it('does not render separator after the last item', () => {
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+        <BreadcrumbItem onPress={() => {}}>Products</BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>Widget</BreadcrumbItem>
+      </Breadcrumbs>
+    )
+
+    const separators = screen.getAllByText('/')
+    expect(separators).toHaveLength(2)
+  })
+
+  describe('maxItems with collapse', () => {
+    it('collapses items when exceeding maxItems', () => {
+      render(
+        <Breadcrumbs maxItems={3}>
+          <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+          <BreadcrumbItem onPress={() => {}}>Products</BreadcrumbItem>
+          <BreadcrumbItem onPress={() => {}}>Category</BreadcrumbItem>
+          <BreadcrumbItem onPress={() => {}}>Subcategory</BreadcrumbItem>
+          <BreadcrumbItem isCurrentPage>Widget</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+
+      expect(screen.getByText('...')).toBeInTheDocument()
+      expect(screen.getByText('Home')).toBeInTheDocument()
+      expect(screen.getByText('Widget')).toBeInTheDocument()
+    })
+
+    it('does not collapse when items are within maxItems', () => {
+      render(
+        <Breadcrumbs maxItems={5}>
+          <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+          <BreadcrumbItem isCurrentPage>Page</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+
+      expect(screen.queryByText('...')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('BreadcrumbItem', () => {
+    it('renders as link when not current page', () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+
+      expect(screen.getByRole('link')).toBeInTheDocument()
+    })
+
+    it('renders as text when isCurrentPage is true', () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem isCurrentPage>Current</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+
+      expect(screen.queryByRole('link')).not.toBeInTheDocument()
+      expect(screen.getByText('Current')).toBeInTheDocument()
+    })
+
+    it('calls onPress handler when clicked', () => {
+      const onPress = vi.fn()
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem onPress={onPress}>Home</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+
+      fireEvent.click(screen.getByRole('link'))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('sets aria-current on current page item', () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem isCurrentPage>Current Page</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+
+      expect(screen.getByText('Current Page')).toHaveAttribute('aria-current', 'page')
+    })
+
+    it('accepts custom className', () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem className="custom-class" isCurrentPage>
+            Styled
+          </BreadcrumbItem>
+        </Breadcrumbs>
+      )
+      expect(screen.getByText('Styled')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Breadcrumbs>
+          <BreadcrumbItem onPress={() => {}}>Home</BreadcrumbItem>
+          <BreadcrumbItem onPress={() => {}}>Products</BreadcrumbItem>
+          <BreadcrumbItem isCurrentPage>Widget</BreadcrumbItem>
+        </Breadcrumbs>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface BreadcrumbsProps extends ViewProps {
+  /** Custom separator */
+  separator?: React.ReactNode
+  /** Maximum items to show (with collapse) */
+  maxItems?: number
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Breadcrumbs navigation component.
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem isCurrentPage>Widget</BreadcrumbItem>
+ * </Breadcrumbs>
+ */
+export function Breadcrumbs({
+  separator = '/',
+  maxItems,
+  className,
+  children,
+  ...props
+}: BreadcrumbsProps) {
+  const items = React.Children.toArray(children)
+  let displayItems = items
+
+  // Handle max items with ellipsis
+  if (maxItems && items.length > maxItems) {
+    const firstItem = items[0]
+    const lastItems = items.slice(-Math.floor(maxItems / 2))
+    displayItems = [
+      firstItem,
+      <BreadcrumbEllipsis key="ellipsis" />,
+      ...lastItems,
+    ]
+  }
+
+  return (
+    <View
+      accessibilityRole="none"
+      className={cn('flex-row items-center flex-wrap', className)}
+      {...props}
+    >
+      {displayItems.map((child, index) => (
+        <View key={index} className="flex-row items-center">
+          {child}
+          {index < displayItems.length - 1 && (
+            <Text className="mx-2 text-text-tertiary text-sm">
+              {separator}
+            </Text>
+          )}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export interface BreadcrumbItemProps {
+  /** Navigation URL */
+  href?: string
+  /** Whether this is the current page */
+  isCurrentPage?: boolean
+  /** Press handler */
+  onPress?: () => void
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Individual breadcrumb item.
+ */
+export function BreadcrumbItem({
+  href,
+  isCurrentPage = false,
+  onPress,
+  className,
+  children,
+}: BreadcrumbItemProps) {
+  if (isCurrentPage) {
+    return (
+      <Text
+        accessibilityRole="text"
+        aria-current="page"
+        className={cn('text-sm font-medium text-text-primary', className)}
+      >
+        {children}
+      </Text>
+    )
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="link"
+      accessibilityHint={href}
+    >
+      <Text
+        className={cn(
+          'text-sm text-text-secondary',
+          'web:hover:text-text-primary web:hover:underline',
+          'active:opacity-70',
+          className
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  )
+}
+
+/**
+ * Ellipsis for collapsed breadcrumbs.
+ */
+function BreadcrumbEllipsis() {
+  return (
+    <Text className="text-sm text-text-tertiary">...</Text>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs'
+export type { BreadcrumbsProps, BreadcrumbItemProps } from './Breadcrumbs'

package/src/components/ui/button/Button.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Button, ButtonText, ButtonIcon } from './Button'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'outline', 'ghost', 'link'],
+      description: 'Visual style variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Button size',
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'accent', 'success', 'error', 'warning', 'info'],
+      description: 'Color scheme',
+    },
+    isIconButton: {
+      control: 'boolean',
+      description: 'Whether this is an icon-only button (square aspect ratio)',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the button is in a loading state',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the button should take full width',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    variant: 'solid',
+    color: 'primary',
+    size: 'md',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Primary Button</ButtonText>
+    </Button>
+  ),
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'solid',
+    color: 'secondary',
+    size: 'md',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Secondary Button</ButtonText>
+    </Button>
+  ),
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    color: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Outline Button</ButtonText>
+    </Button>
+  ),
+}
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    color: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Ghost Button</ButtonText>
+    </Button>
+  ),
+}
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    color: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Link Button</ButtonText>
+    </Button>
+  ),
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    loadingText: 'Saving...',
+    variant: 'solid',
+    color: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Save</ButtonText>
+    </Button>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    variant: 'solid',
+    color: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>
+      <ButtonText>Disabled Button</ButtonText>
+    </Button>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+        <Button variant="solid" color="primary">
+          <ButtonText>Solid</ButtonText>
+        </Button>
+        <Button variant="outline" color="primary">
+          <ButtonText>Outline</ButtonText>
+        </Button>
+        <Button variant="ghost" color="primary">
+          <ButtonText>Ghost</ButtonText>
+        </Button>
+        <Button variant="link" color="primary">
+          <ButtonText>Link</ButtonText>
+        </Button>
+      </View>
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+        <Button color="primary"><ButtonText>Primary</ButtonText></Button>
+        <Button color="secondary"><ButtonText>Secondary</ButtonText></Button>
+        <Button color="success"><ButtonText>Success</ButtonText></Button>
+        <Button color="error"><ButtonText>Error</ButtonText></Button>
+        <Button color="warning"><ButtonText>Warning</ButtonText></Button>
+        <Button color="info"><ButtonText>Info</ButtonText></Button>
+      </View>
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Button size="sm"><ButtonText>Small</ButtonText></Button>
+      <Button size="md"><ButtonText>Medium</ButtonText></Button>
+      <Button size="lg"><ButtonText>Large</ButtonText></Button>
+    </View>
+  ),
+}
+
+// Simple plus icon component for demos
+function PlusIcon({ size = 16 }: { size?: number }) {
+  return (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <View style={{ position: 'absolute', width: size * 0.6, height: 2, backgroundColor: 'currentColor', borderRadius: 1 }} />
+      <View style={{ position: 'absolute', width: 2, height: size * 0.6, backgroundColor: 'currentColor', borderRadius: 1 }} />
+    </View>
+  )
+}
+
+export const IconButton: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+        <Button isIconButton size="sm" color="primary">
+          <ButtonIcon as={PlusIcon} size={14} />
+        </Button>
+        <Button isIconButton size="md" color="primary">
+          <ButtonIcon as={PlusIcon} size={16} />
+        </Button>
+        <Button isIconButton size="lg" color="primary">
+          <ButtonIcon as={PlusIcon} size={20} />
+        </Button>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+        <Button isIconButton variant="outline" color="primary">
+          <ButtonIcon as={PlusIcon} />
+        </Button>
+        <Button isIconButton variant="ghost" color="primary">
+          <ButtonIcon as={PlusIcon} />
+        </Button>
+      </View>
+    </View>
+  ),
+}

package/src/components/ui/button/Button.test.tsx

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Button, ButtonText } from './Button'
+
+describe('Button', () => {
+  it('renders children correctly', () => {
+    render(
+      <Button>
+        <ButtonText>Click me</ButtonText>
+      </Button>
+    )
+    expect(screen.getByText('Click me')).toBeInTheDocument()
+  })
+
+  it('handles press events', () => {
+    const onPress = vi.fn()
+    render(
+      <Button onPress={onPress}>
+        <ButtonText>Click</ButtonText>
+      </Button>
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('respects isDisabled prop', () => {
+    const onPress = vi.fn()
+    render(
+      <Button isDisabled onPress={onPress}>
+        <ButtonText>Disabled</ButtonText>
+      </Button>
+    )
+
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+
+    fireEvent.click(button)
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('respects isLoading prop', () => {
+    const onPress = vi.fn()
+    render(
+      <Button isLoading loadingText="Loading..." onPress={onPress}>
+        <ButtonText>Submit</ButtonText>
+      </Button>
+    )
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('applies variant styles correctly', () => {
+    const { rerender } = render(
+      <Button variant="solid" testID="button">
+        <ButtonText>Solid</ButtonText>
+      </Button>
+    )
+    // Button should have solid styles
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(
+      <Button variant="outline" testID="button">
+        <ButtonText>Outline</ButtonText>
+      </Button>
+    )
+    // Button should have outline styles
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('applies size styles correctly', () => {
+    const { rerender } = render(
+      <Button size="sm">
+        <ButtonText>Small</ButtonText>
+      </Button>
+    )
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(
+      <Button size="lg">
+        <ButtonText>Large</ButtonText>
+      </Button>
+    )
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('applies color variants correctly', () => {
+    render(
+      <Button color="primary">
+        <ButtonText>Primary</ButtonText>
+      </Button>
+    )
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Button>
+          <ButtonText>Accessible Button</ButtonText>
+        </Button>
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct accessibility role', () => {
+      render(
+        <Button>
+          <ButtonText>Button</ButtonText>
+        </Button>
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('communicates disabled state to assistive technology', () => {
+      render(
+        <Button isDisabled>
+          <ButtonText>Disabled</ButtonText>
+        </Button>
+      )
+
+      const button = screen.getByRole('button')
+      expect(button).toHaveAttribute('aria-disabled', 'true')
+    })
+  })
+})