@titan-design/react-ui 0.1.0 → 0.2.5

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

@@ -0,0 +1,103 @@
+import React, { forwardRef } from 'react'
+import { Pressable, View, Text, type PressableProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type SwitchSize = 'sm' | 'md' | 'lg'
+
+export interface SwitchProps extends Omit<PressableProps, 'children'> {
+  /** Whether the switch is on */
+  isChecked?: boolean
+  /** Whether the switch is disabled */
+  isDisabled?: boolean
+  /** Switch size */
+  size?: SwitchSize
+  /** Label text */
+  label?: string
+  /** Label position */
+  labelPosition?: 'left' | 'right'
+  /** Callback when switch state changes */
+  onCheckedChange?: (checked: boolean) => void
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<SwitchSize, { track: string; thumb: string; translate: string }> = {
+  sm: { track: 'w-8 h-4', thumb: 'w-3 h-3', translate: 'translate-x-4' },
+  md: { track: 'w-10 h-5', thumb: 'w-4 h-4', translate: 'translate-x-5' },
+  lg: { track: 'w-12 h-6', thumb: 'w-5 h-5', translate: 'translate-x-6' },
+}
+
+/**
+ * Switch component for toggling boolean values.
+ *
+ * @example
+ * <Switch
+ *   isChecked={enabled}
+ *   onCheckedChange={setEnabled}
+ *   label="Enable notifications"
+ * />
+ */
+export const Switch = forwardRef<View, SwitchProps>(function Switch(
+  {
+    isChecked = false,
+    isDisabled = false,
+    size = 'md',
+    label,
+    labelPosition = 'right',
+    onCheckedChange,
+    className,
+    ...props
+  },
+  ref
+) {
+  const styles = sizeStyles[size]
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onCheckedChange?.(!isChecked)
+    }
+  }
+
+  const switchElement = (
+    <View
+      className={cn(
+        'rounded-full p-0.5 transition-colors',
+        styles.track,
+        isChecked ? 'bg-brand-primary' : 'bg-border-strong'
+      )}
+    >
+      <View
+        className={cn(
+          'rounded-full bg-white shadow-sm transition-transform',
+          styles.thumb,
+          isChecked && styles.translate
+        )}
+      />
+    </View>
+  )
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      onPress={handlePress}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      accessibilityLabel={label}
+      className={cn(
+        'flex-row items-center gap-2',
+        isDisabled && 'opacity-50',
+        className
+      )}
+      {...props}
+    >
+      {label && labelPosition === 'left' && (
+        <Text className="text-text-primary font-medium">{label}</Text>
+      )}
+      {switchElement}
+      {label && labelPosition === 'right' && (
+        <Text className="text-text-primary font-medium">{label}</Text>
+      )}
+    </Pressable>
+  )
+})

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch'
+export type { SwitchProps, SwitchSize } from './Switch'

package/src/components/ui/tabs/Tabs.stories.tsx

@@ -0,0 +1,213 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['line', 'enclosed', 'soft-rounded'],
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultIndex={0}>
+      <TabList>
+        <Tab>Account</Tab>
+        <Tab>Security</Tab>
+        <Tab>Notifications</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Text className="text-text-primary">Account settings content</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Security settings content</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Notification settings content</Text>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+}
+
+export const LineVariant: Story = {
+  render: () => (
+    <Tabs variant="line">
+      <TabList>
+        <Tab>Overview</Tab>
+        <Tab>Analytics</Tab>
+        <Tab>Reports</Tab>
+        <Tab>Settings</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Text className="text-text-primary">Overview content</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Analytics content</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Reports content</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Settings content</Text>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+}
+
+export const EnclosedVariant: Story = {
+  render: () => (
+    <Tabs variant="enclosed">
+      <TabList>
+        <Tab>Day</Tab>
+        <Tab>Week</Tab>
+        <Tab>Month</Tab>
+        <Tab>Year</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Text className="text-text-primary">Daily view</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Weekly view</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Monthly view</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Yearly view</Text>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+}
+
+export const SoftRoundedVariant: Story = {
+  render: () => (
+    <Tabs variant="soft-rounded">
+      <TabList>
+        <Tab>All</Tab>
+        <Tab>Active</Tab>
+        <Tab>Completed</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Text className="text-text-primary">All items</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Active items</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Completed items</Text>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+}
+
+export const VerticalOrientation: Story = {
+  render: () => (
+    <View style={{ height: 300 }}>
+      <Tabs orientation="vertical" variant="line">
+        <TabList>
+          <Tab>Profile</Tab>
+          <Tab>Account</Tab>
+          <Tab>Security</Tab>
+          <Tab>Billing</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Text className="text-text-primary">Profile settings</Text>
+          </TabPanel>
+          <TabPanel>
+            <Text className="text-text-primary">Account settings</Text>
+          </TabPanel>
+          <TabPanel>
+            <Text className="text-text-primary">Security settings</Text>
+          </TabPanel>
+          <TabPanel>
+            <Text className="text-text-primary">Billing settings</Text>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </View>
+  ),
+}
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs>
+      <TabList>
+        <Tab>Available</Tab>
+        <Tab isDisabled>Disabled</Tab>
+        <Tab>Also Available</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Text className="text-text-primary">First tab content</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">This won&apos;t show</Text>
+        </TabPanel>
+        <TabPanel>
+          <Text className="text-text-primary">Third tab content</Text>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 32 }}>
+      <View>
+        <Text className="text-text-secondary mb-2">Line Variant</Text>
+        <Tabs variant="line">
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
+        </Tabs>
+      </View>
+
+      <View>
+        <Text className="text-text-secondary mb-2">Enclosed Variant</Text>
+        <Tabs variant="enclosed">
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
+        </Tabs>
+      </View>
+
+      <View>
+        <Text className="text-text-secondary mb-2">Soft Rounded Variant</Text>
+        <Tabs variant="soft-rounded">
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
+        </Tabs>
+      </View>
+    </View>
+  ),
+}

package/src/components/ui/tabs/Tabs.test.tsx

@@ -0,0 +1,192 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'
+
+function renderTabs(props: Record<string, unknown> = {}) {
+  return render(
+    <Tabs {...props}>
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Content 1</TabPanel>
+        <TabPanel>Content 2</TabPanel>
+        <TabPanel>Content 3</TabPanel>
+      </TabPanels>
+    </Tabs>
+  )
+}
+
+describe('Tabs', () => {
+  it('renders all tab buttons', () => {
+    renderTabs()
+    expect(screen.getByText('Tab 1')).toBeInTheDocument()
+    expect(screen.getByText('Tab 2')).toBeInTheDocument()
+    expect(screen.getByText('Tab 3')).toBeInTheDocument()
+  })
+
+  it('shows first tab panel by default', () => {
+    renderTabs()
+    expect(screen.getByText('Content 1')).toBeInTheDocument()
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument()
+  })
+
+  it('shows correct panel for defaultIndex', () => {
+    renderTabs({ defaultIndex: 1 })
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+    expect(screen.getByText('Content 2')).toBeInTheDocument()
+  })
+
+  it('switches tab on click', () => {
+    renderTabs()
+    fireEvent.click(screen.getAllByRole('tab')[1])
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+    expect(screen.getByText('Content 2')).toBeInTheDocument()
+  })
+
+  it('calls onChange when tab is clicked', () => {
+    const onChange = vi.fn()
+    renderTabs({ onChange })
+    fireEvent.click(screen.getAllByRole('tab')[2])
+    expect(onChange).toHaveBeenCalledWith(2)
+  })
+
+  it('supports controlled index', () => {
+    const onChange = vi.fn()
+    const { rerender } = render(
+      <Tabs index={0} onChange={onChange}>
+        <TabList>
+          <Tab>A</Tab>
+          <Tab>B</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Panel A</TabPanel>
+          <TabPanel>Panel B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    )
+    expect(screen.getByText('Panel A')).toBeInTheDocument()
+
+    fireEvent.click(screen.getAllByRole('tab')[1])
+    expect(onChange).toHaveBeenCalledWith(1)
+    // Still shows Panel A because controlled
+    expect(screen.getByText('Panel A')).toBeInTheDocument()
+
+    rerender(
+      <Tabs index={1} onChange={onChange}>
+        <TabList>
+          <Tab>A</Tab>
+          <Tab>B</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Panel A</TabPanel>
+          <TabPanel>Panel B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    )
+    expect(screen.getByText('Panel B')).toBeInTheDocument()
+  })
+
+  it('renders with all variant options', () => {
+    const variants = ['line', 'enclosed', 'soft-rounded'] as const
+    variants.forEach((variant) => {
+      const { unmount } = render(
+        <Tabs variant={variant}>
+          <TabList>
+            <Tab>A</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>Panel</TabPanel>
+          </TabPanels>
+        </Tabs>
+      )
+      expect(screen.getByText('A')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with vertical orientation', () => {
+    const { container } = render(
+      <Tabs orientation="vertical">
+        <TabList>
+          <Tab>A</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Panel</TabPanel>
+        </TabPanels>
+      </Tabs>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('disables individual tabs', () => {
+    render(
+      <Tabs>
+        <TabList>
+          <Tab>Enabled</Tab>
+          <Tab isDisabled>Disabled</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Panel 1</TabPanel>
+          <TabPanel>Panel 2</TabPanel>
+        </TabPanels>
+      </Tabs>
+    )
+    const tabs = screen.getAllByRole('tab')
+    expect(tabs[1]).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('does not switch to disabled tab on click', () => {
+    render(
+      <Tabs>
+        <TabList>
+          <Tab>A</Tab>
+          <Tab isDisabled>B</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Panel A</TabPanel>
+          <TabPanel>Panel B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    )
+    fireEvent.click(screen.getAllByRole('tab')[1])
+    expect(screen.getByText('Panel A')).toBeInTheDocument()
+  })
+
+  it('applies custom className to Tabs', () => {
+    const { container } = renderTabs({ className: 'extra' })
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = renderTabs()
+      // react-native-web does not render role="tablist" on the TabList container
+      // or aria-selected on tabs, so we disable related rules
+      const results = await axe(container, {
+        rules: {
+          'aria-required-parent': { enabled: false },
+          'aria-required-attr': { enabled: false },
+        },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct tab role on tabs', () => {
+      renderTabs()
+      const tabs = screen.getAllByRole('tab')
+      expect(tabs).toHaveLength(3)
+    })
+
+    it('marks active tab as selected', () => {
+      renderTabs()
+      const tabs = screen.getAllByRole('tab')
+      // react-native-web does not output aria-selected for accessibilityState.selected on tabs
+      expect(tabs[0]).toBeInTheDocument()
+      expect(tabs[1]).toBeInTheDocument()
+    })
+  })
+})