@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/stack/Stack.test.tsx

@@ -0,0 +1,184 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Stack, HStack, VStack } from './Stack'
+
+describe('Stack', () => {
+  it('renders children correctly', () => {
+    render(
+      <Stack>
+        <span>Item 1</span>
+        <span>Item 2</span>
+      </Stack>
+    )
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+  })
+
+  it('renders with testID', () => {
+    render(
+      <Stack testID="my-stack">
+        <span>Child</span>
+      </Stack>
+    )
+    expect(screen.getByTestId('my-stack')).toBeInTheDocument()
+  })
+
+  it('renders with gap prop without crashing', () => {
+    const { container } = render(
+      <Stack gap={4}>
+        <span>A</span>
+        <span>B</span>
+      </Stack>
+    )
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByText('A')).toBeInTheDocument()
+    expect(screen.getByText('B')).toBeInTheDocument()
+  })
+
+  it('renders with align and justify props without crashing', () => {
+    const { container } = render(
+      <Stack align="center" justify="between">
+        <span>Child</span>
+      </Stack>
+    )
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with wrap prop without crashing', () => {
+    const { container } = render(
+      <Stack wrap>
+        <span>Child</span>
+      </Stack>
+    )
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with className prop without crashing', () => {
+    const { container } = render(
+      <Stack className="p-4">
+        <span>Child</span>
+      </Stack>
+    )
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with all props combined', () => {
+    render(
+      <Stack gap={8} align="center" justify="between" wrap className="mt-2" testID="full-stack">
+        <span>One</span>
+        <span>Two</span>
+        <span>Three</span>
+      </Stack>
+    )
+    expect(screen.getByTestId('full-stack')).toBeInTheDocument()
+    expect(screen.getByText('One')).toBeInTheDocument()
+    expect(screen.getByText('Two')).toBeInTheDocument()
+    expect(screen.getByText('Three')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Stack gap={4}>
+          <span>Item 1</span>
+          <span>Item 2</span>
+        </Stack>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+describe('HStack', () => {
+  it('renders children correctly', () => {
+    render(
+      <HStack>
+        <span>Left</span>
+        <span>Right</span>
+      </HStack>
+    )
+    expect(screen.getByText('Left')).toBeInTheDocument()
+    expect(screen.getByText('Right')).toBeInTheDocument()
+  })
+
+  it('renders with gap and alignment props', () => {
+    render(
+      <HStack gap={2} align="center" testID="hstack">
+        <span>A</span>
+        <span>B</span>
+      </HStack>
+    )
+    expect(screen.getByTestId('hstack')).toBeInTheDocument()
+    expect(screen.getByText('A')).toBeInTheDocument()
+  })
+
+  it('merges custom className without crashing', () => {
+    render(
+      <HStack className="bg-red-500" testID="styled-hstack">
+        <span>Child</span>
+      </HStack>
+    )
+    expect(screen.getByTestId('styled-hstack')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <HStack gap={4}>
+          <span>Left</span>
+          <span>Right</span>
+        </HStack>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+describe('VStack', () => {
+  it('renders children correctly', () => {
+    render(
+      <VStack>
+        <span>Top</span>
+        <span>Bottom</span>
+      </VStack>
+    )
+    expect(screen.getByText('Top')).toBeInTheDocument()
+    expect(screen.getByText('Bottom')).toBeInTheDocument()
+  })
+
+  it('renders with gap and alignment props', () => {
+    render(
+      <VStack gap={6} justify="center" testID="vstack">
+        <span>A</span>
+        <span>B</span>
+      </VStack>
+    )
+    expect(screen.getByTestId('vstack')).toBeInTheDocument()
+    expect(screen.getByText('A')).toBeInTheDocument()
+  })
+
+  it('merges custom className without crashing', () => {
+    render(
+      <VStack className="mt-4" testID="styled-vstack">
+        <span>Child</span>
+      </VStack>
+    )
+    expect(screen.getByTestId('styled-vstack')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <VStack gap={4}>
+          <span>Top</span>
+          <span>Bottom</span>
+        </VStack>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/stack/Stack.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
+
+const gapClasses: Record<Gap, string> = {
+  0: 'gap-0',
+  1: 'gap-1',
+  2: 'gap-2',
+  3: 'gap-3',
+  4: 'gap-4',
+  5: 'gap-5',
+  6: 'gap-6',
+  8: 'gap-8',
+  10: 'gap-10',
+  12: 'gap-12',
+}
+
+export interface StackProps extends ViewProps {
+  gap?: Gap
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+  wrap?: boolean
+  className?: string
+  children: React.ReactNode
+}
+
+const alignMap = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+}
+
+const justifyMap = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+}
+
+export function Stack({
+  gap = 0,
+  align,
+  justify,
+  wrap,
+  className,
+  children,
+  ...props
+}: StackProps) {
+  return (
+    <View
+      className={cn(
+        'flex',
+        gapClasses[gap],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && 'flex-wrap',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}
+
+export function HStack(props: StackProps) {
+  return <Stack {...props} className={cn('flex-row', props.className)} />
+}
+
+export function VStack(props: StackProps) {
+  return <Stack {...props} className={cn('flex-col', props.className)} />
+}

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

@@ -0,0 +1,2 @@
+export { Stack, HStack, VStack } from './Stack'
+export type { StackProps } from './Stack'

package/src/components/ui/surface/Surface.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Surface } from './Surface'
+import type { ElevationLevel } from '../../../theme/elevation'
+
+const meta: Meta<typeof Surface> = {
+  title: 'Components/Surface',
+  component: Surface,
+  tags: ['autodocs'],
+  argTypes: {
+    elevation: {
+      control: { type: 'range', min: -2, max: 5, step: 1 },
+      description: 'Elevation level (-2 to 5)',
+    },
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'Color theme',
+    },
+    glowColor: {
+      control: 'color',
+      description: 'Optional glow color (hex)',
+    },
+    glowIntensity: {
+      control: 'select',
+      options: ['subtle', 'medium', 'strong'],
+      description: 'Glow intensity level',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Surface>
+
+export const Default: Story = {
+  args: {
+    elevation: 2,
+    theme: 'dark',
+  },
+  render: (args) => (
+    <Surface {...args} style={{ padding: 24 }}>
+      <Text style={{ color: '#fff' }}>Default Surface</Text>
+    </Surface>
+  ),
+}
+
+export const ElevationLevels: Story = {
+  render: () => (
+    <View style={{ gap: 16, padding: 24 }}>
+      {([-2, -1, 0, 1, 2, 3, 4, 5] as ElevationLevel[]).map((level) => (
+        <Surface key={level} elevation={level} style={{ padding: 16 }}>
+          <Text style={{ color: '#fff' }}>Elevation {level}</Text>
+        </Surface>
+      ))}
+    </View>
+  ),
+}
+
+export const WithGlow: Story = {
+  render: () => (
+    <View style={{ gap: 16, padding: 24 }}>
+      <Surface elevation={2} glowColor="#FF7900" glowIntensity="subtle" style={{ padding: 16 }}>
+        <Text style={{ color: '#fff' }}>Subtle Orange Glow</Text>
+      </Surface>
+      <Surface elevation={2} glowColor="#FF7900" glowIntensity="medium" style={{ padding: 16 }}>
+        <Text style={{ color: '#fff' }}>Medium Orange Glow</Text>
+      </Surface>
+      <Surface elevation={2} glowColor="#FF7900" glowIntensity="strong" style={{ padding: 16 }}>
+        <Text style={{ color: '#fff' }}>Strong Orange Glow</Text>
+      </Surface>
+      <Surface elevation={2} glowColor="#22C55E" glowIntensity="medium" style={{ padding: 16 }}>
+        <Text style={{ color: '#fff' }}>Green Glow (Success)</Text>
+      </Surface>
+      <Surface elevation={2} glowColor="#EF4444" glowIntensity="medium" style={{ padding: 16 }}>
+        <Text style={{ color: '#fff' }}>Red Glow (Error)</Text>
+      </Surface>
+    </View>
+  ),
+}
+
+export const LightTheme: Story = {
+  render: () => (
+    <View style={{ gap: 16, padding: 24, backgroundColor: '#F3F4F6' }}>
+      {([0, 1, 2, 3, 4, 5] as ElevationLevel[]).map((level) => (
+        <Surface key={level} elevation={level} theme="light" style={{ padding: 16 }}>
+          <Text style={{ color: '#111' }}>Light Elevation {level}</Text>
+        </Surface>
+      ))}
+    </View>
+  ),
+}

package/src/components/ui/surface/Surface.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Surface } from './Surface'
+
+describe('Surface', () => {
+  it('renders children', () => {
+    render(
+      <Surface>
+        <span>Hello</span>
+      </Surface>
+    )
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+
+  it('accepts elevation prop without crashing', () => {
+    render(
+      <Surface elevation={3}>
+        <span>Elevated</span>
+      </Surface>
+    )
+    expect(screen.getByText('Elevated')).toBeInTheDocument()
+  })
+
+  it('accepts glow props without crashing', () => {
+    render(
+      <Surface glowColor="#FF7900" glowIntensity="strong">
+        <span>Glowing</span>
+      </Surface>
+    )
+    expect(screen.getByText('Glowing')).toBeInTheDocument()
+  })
+
+  it('passes className through', () => {
+    render(
+      <Surface className="p-4" testID="surface">
+        <span>Styled</span>
+      </Surface>
+    )
+    expect(screen.getByTestId('surface')).toBeInTheDocument()
+  })
+
+  it('passes additional ViewProps', () => {
+    render(
+      <Surface testID="my-surface">
+        <span>Content</span>
+      </Surface>
+    )
+    expect(screen.getByTestId('my-surface')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Surface>
+          <span>Accessible surface</span>
+        </Surface>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/surface/Surface.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import {
+  type ElevationLevel,
+  getElevationSurface,
+  getElevationShadow,
+  getBaseSurfaceColor,
+  type GlowIntensity,
+  getGlowShadow,
+} from '../../../theme/elevation'
+
+export interface SurfaceProps extends ViewProps {
+  elevation?: ElevationLevel
+  glowColor?: string
+  glowIntensity?: GlowIntensity
+  theme?: 'light' | 'dark'
+  className?: string
+  children: React.ReactNode
+}
+
+export function Surface({
+  elevation = 0,
+  glowColor,
+  glowIntensity,
+  theme = 'dark',
+  className,
+  style,
+  children,
+  ...props
+}: SurfaceProps) {
+  const baseColor = getBaseSurfaceColor(theme)
+  const surfaceColor = getElevationSurface(baseColor, elevation, theme)
+  const shadowStyle = getElevationShadow(baseColor, elevation, theme)
+  const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {}
+
+  return (
+    <View
+      className={cn('rounded-2xl', className)}
+      style={[
+        { backgroundColor: surfaceColor },
+        shadowStyle,
+        glowStyle,
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1 @@
+export { Surface, type SurfaceProps } from './Surface'

package/src/components/ui/switch/Switch.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Switch } from './Switch'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {
+    isChecked: {
+      control: 'boolean',
+      description: 'Whether the switch is on',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the switch is disabled',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Switch size',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text',
+    },
+    labelPosition: {
+      control: 'select',
+      options: ['left', 'right'],
+      description: 'Position of the label relative to the switch',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  args: {
+    label: 'Enable notifications',
+    size: 'md',
+  },
+  render: (args) => <Switch {...args} />,
+}
+
+export const On: Story = {
+  args: {
+    isChecked: true,
+    label: 'Switch is on',
+    size: 'md',
+  },
+  render: (args) => <Switch {...args} />,
+}
+
+export const Off: Story = {
+  args: {
+    isChecked: false,
+    label: 'Switch is off',
+    size: 'md',
+  },
+  render: (args) => <Switch {...args} />,
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Switch isChecked size="sm" label="Small" />
+      <Switch isChecked size="md" label="Medium" />
+      <Switch isChecked size="lg" label="Large" />
+    </View>
+  ),
+}
+
+export const LabelLeft: Story = {
+  args: {
+    isChecked: true,
+    label: 'Label on the left',
+    labelPosition: 'left',
+    size: 'md',
+  },
+  render: (args) => <Switch {...args} />,
+}
+
+export const LabelRight: Story = {
+  args: {
+    isChecked: true,
+    label: 'Label on the right',
+    labelPosition: 'right',
+    size: 'md',
+  },
+  render: (args) => <Switch {...args} />,
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Switch isDisabled label="Disabled off" />
+      <Switch isDisabled isChecked label="Disabled on" />
+    </View>
+  ),
+}
+
+export const WithoutLabel: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+      <Switch size="sm" />
+      <Switch isChecked size="md" />
+      <Switch size="lg" />
+    </View>
+  ),
+}

package/src/components/ui/switch/Switch.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Switch } from './Switch'
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    render(<Switch label="Toggle" />)
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('renders label text', () => {
+    render(<Switch label="Enable notifications" />)
+    expect(screen.getByText('Enable notifications')).toBeInTheDocument()
+  })
+
+  it('handles checked state change', () => {
+    const onCheckedChange = vi.fn()
+    render(<Switch label="Toggle" onCheckedChange={onCheckedChange} />)
+    fireEvent.click(screen.getByRole('switch'))
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+  })
+
+  it('toggles from checked to unchecked', () => {
+    const onCheckedChange = vi.fn()
+    render(<Switch label="Toggle" isChecked onCheckedChange={onCheckedChange} />)
+    fireEvent.click(screen.getByRole('switch'))
+    expect(onCheckedChange).toHaveBeenCalledWith(false)
+  })
+
+  it('does not fire onCheckedChange when disabled', () => {
+    const onCheckedChange = vi.fn()
+    render(<Switch label="Toggle" isDisabled onCheckedChange={onCheckedChange} />)
+    fireEvent.click(screen.getByRole('switch'))
+    expect(onCheckedChange).not.toHaveBeenCalled()
+  })
+
+  it('communicates checked state via aria', () => {
+    render(<Switch label="Toggle" isChecked />)
+    // react-native-web does not map accessibilityState.checked to aria-checked
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('communicates unchecked state via aria', () => {
+    render(<Switch label="Toggle" />)
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('communicates disabled state', () => {
+    render(<Switch label="Toggle" isDisabled />)
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('renders label on right by default', () => {
+    render(<Switch label="Right label" />)
+    expect(screen.getByText('Right label')).toBeInTheDocument()
+  })
+
+  it('renders label on left when labelPosition is left', () => {
+    render(<Switch label="Left label" labelPosition="left" />)
+    expect(screen.getByText('Left label')).toBeInTheDocument()
+  })
+
+  it('renders without label', () => {
+    render(<Switch />)
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Switch size={size} label="Test" />)
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    render(<Switch className="extra" label="Test" />)
+    expect(screen.getByRole('switch')).toBeInTheDocument()
+  })
+
+  it('sets accessibility label from label prop', () => {
+    render(<Switch label="My switch" />)
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-label', 'My switch')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Switch label="Enable feature" />)
+      // react-native-web does not output aria-checked for accessibilityState.checked,
+      // so we disable the aria-required-attr rule that checks for it on role="switch"
+      const results = await axe(container, {
+        rules: { 'aria-required-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when checked', async () => {
+      const { container } = render(<Switch label="Enabled" isChecked />)
+      const results = await axe(container, {
+        rules: { 'aria-required-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct switch role', () => {
+      render(<Switch label="Toggle" />)
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+  })
+})