@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/select/Select.tsx

@@ -0,0 +1,243 @@
+import React, { useState, createContext, useContext } from 'react'
+import { View, Text, Pressable, ScrollView, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface SelectOption<T = string> {
+  value: T
+  label: string
+  isDisabled?: boolean
+}
+
+interface SelectContextType<T = string> {
+  value: T | T[] | null
+  isMulti: boolean
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+  selectValue: (val: T) => void
+  isSelected: (val: T) => boolean
+}
+
+const SelectContext = createContext<SelectContextType<any>>({
+  value: null,
+  isMulti: false,
+  isOpen: false,
+  setIsOpen: () => {},
+  selectValue: () => {},
+  isSelected: () => false,
+})
+
+export interface SelectProps<T = string> extends ViewProps {
+  /** Selected value (single mode) */
+  value?: T | null
+  /** Selected values (multi mode) */
+  values?: T[]
+  /** Callback when value changes (single mode) */
+  onChange?: (value: T | null) => void
+  /** Callback when values change (multi mode) */
+  onChangeMulti?: (values: T[]) => void
+  /** Enable multi-select */
+  isMulti?: boolean
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the select is disabled */
+  isDisabled?: boolean
+  /** Whether the select has an error */
+  isInvalid?: boolean
+  /** Options to display */
+  options: SelectOption<T>[]
+  /** Visual variant — use 'filled' on dark/elevated surfaces */
+  variant?: 'default' | 'filled'
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Select component for single or multi-selection.
+ *
+ * @example
+ * // Single select
+ * <Select
+ *   value={value}
+ *   onChange={setValue}
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ * />
+ *
+ * // Multi select
+ * <Select
+ *   isMulti
+ *   values={values}
+ *   onChangeMulti={setValues}
+ *   options={options}
+ * />
+ */
+export function Select<T extends string = string>({
+  value,
+  values = [],
+  onChange,
+  onChangeMulti,
+  isMulti = false,
+  placeholder = 'Select...',
+  isDisabled = false,
+  isInvalid = false,
+  options,
+  variant = 'default',
+  className,
+  ...props
+}: SelectProps<T>) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const selectValue = (val: T) => {
+    if (isMulti) {
+      const newValues = values.includes(val)
+        ? values.filter((v) => v !== val)
+        : [...values, val]
+      onChangeMulti?.(newValues)
+    } else {
+      onChange?.(val)
+      setIsOpen(false)
+    }
+  }
+
+  const isSelected = (val: T) => {
+    if (isMulti) {
+      return values.includes(val)
+    }
+    return value === val
+  }
+
+  const getDisplayValue = () => {
+    if (isMulti) {
+      if (values.length === 0) return placeholder
+      if (values.length === 1) {
+        return options.find((o) => o.value === values[0])?.label || placeholder
+      }
+      return `${values.length} selected`
+    }
+    if (value === null || value === undefined) return placeholder
+    return options.find((o) => o.value === value)?.label || placeholder
+  }
+
+  const clearValue = () => {
+    if (isMulti) {
+      onChangeMulti?.([])
+    } else {
+      onChange?.(null)
+    }
+  }
+
+  const hasValue = isMulti ? values.length > 0 : value !== null && value !== undefined
+
+  return (
+    <SelectContext.Provider value={{ value, isMulti, isOpen, setIsOpen, selectValue, isSelected }}>
+      <View className={cn('relative w-full', className)} {...props}>
+        {/* Trigger */}
+        <Pressable
+          onPress={() => !isDisabled && setIsOpen(!isOpen)}
+          disabled={isDisabled}
+          accessibilityRole="combobox"
+          accessibilityState={{ expanded: isOpen, disabled: isDisabled }}
+          className={cn(
+            'flex-row items-center justify-between px-4 py-2.5 rounded-md border',
+            variant === 'filled' ? 'bg-black/30' : 'bg-surface-base',
+            isInvalid
+              ? 'border-border-input-error'
+              : variant === 'filled'
+                ? 'border-border-subtle'
+                : 'border-border-input',
+            !isDisabled && !isInvalid && 'web:hover:border-border-input-hover',
+            isOpen && 'border-border-input-focus',
+            isDisabled && 'opacity-50 cursor-not-allowed'
+          )}
+        >
+          <Text
+            className={cn(
+              'flex-1',
+              hasValue ? 'text-text-primary' : 'text-text-tertiary'
+            )}
+          >
+            {getDisplayValue()}
+          </Text>
+          <View className="flex-row items-center gap-2">
+            {hasValue && (
+              <Pressable
+                onPress={(e) => {
+                  e.stopPropagation?.()
+                  clearValue()
+                }}
+                className="p-1"
+              >
+                <Text className="text-text-secondary text-xs">×</Text>
+              </Pressable>
+            )}
+            <Text className={cn('text-text-secondary', isOpen && 'rotate-180')}>▼</Text>
+          </View>
+        </Pressable>
+
+        {/* Dropdown */}
+        {isOpen && (
+          <>
+            <Pressable
+              onPress={() => setIsOpen(false)}
+              className="fixed inset-0 z-40"
+              style={{ position: 'absolute' }}
+            />
+            <View
+              className={cn(
+                'absolute z-50 top-full left-0 right-0 mt-1',
+                'bg-surface-elevated rounded-md shadow-lg border border-border-default',
+                'max-h-60 overflow-hidden'
+              )}
+            >
+              <ScrollView className="py-1">
+                {options.map((option) => (
+                  <SelectOption key={option.value} option={option} />
+                ))}
+              </ScrollView>
+            </View>
+          </>
+        )}
+      </View>
+    </SelectContext.Provider>
+  )
+}
+
+interface SelectOptionComponentProps<T> {
+  option: SelectOption<T>
+}
+
+function SelectOption<T>({ option }: SelectOptionComponentProps<T>) {
+  const { selectValue, isSelected, isMulti } = useContext(SelectContext)
+  const selected = isSelected(option.value)
+
+  return (
+    <Pressable
+      onPress={() => !option.isDisabled && selectValue(option.value)}
+      disabled={option.isDisabled}
+      accessibilityRole={isMulti ? 'checkbox' : ('option' as any)}
+      accessibilityState={{ selected, disabled: option.isDisabled }}
+      className={cn(
+        'flex-row items-center px-4 py-2',
+        'web:hover:bg-interactive-hover active:bg-interactive-active',
+        selected && 'bg-interactive-selected',
+        option.isDisabled && 'opacity-50 cursor-not-allowed'
+      )}
+    >
+      {isMulti && (
+        <View
+          className={cn(
+            'w-4 h-4 mr-3 rounded border',
+            selected ? 'bg-brand-primary border-brand-primary' : 'border-border-strong'
+          )}
+        >
+          {selected && <Text className="text-white text-xs text-center">✓</Text>}
+        </View>
+      )}
+      <Text className={cn('text-sm', selected && !isMulti ? 'text-brand-primary font-medium' : 'text-text-primary')}>
+        {option.label}
+      </Text>
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export type { SelectProps, SelectOption } from './Select'

package/src/components/ui/skeleton/Skeleton.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import {
+  Skeleton,
+  SkeletonText,
+  SkeletonCircle,
+  SkeletonCard,
+  SkeletonListItem,
+} from './Skeleton'
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['text', 'circle', 'rect', 'rounded'],
+    },
+    animation: {
+      control: 'select',
+      options: ['pulse', 'shimmer', 'none'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {
+  args: {
+    variant: 'text',
+    width: 200,
+  },
+}
+
+export const TextVariant: Story = {
+  render: () => (
+    <View style={{ gap: 8, width: 300 }}>
+      <Skeleton variant="text" width="100%" />
+      <Skeleton variant="text" width="80%" />
+      <Skeleton variant="text" width="60%" />
+    </View>
+  ),
+}
+
+export const CircleVariant: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12 }}>
+      <Skeleton variant="circle" width={32} height={32} />
+      <Skeleton variant="circle" width={48} height={48} />
+      <Skeleton variant="circle" width={64} height={64} />
+    </View>
+  ),
+}
+
+export const RectVariant: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Skeleton variant="rect" width={200} height={100} />
+      <Skeleton variant="rect" width={200} height={100} borderRadius={8} />
+    </View>
+  ),
+}
+
+export const RoundedVariant: Story = {
+  render: () => (
+    <Skeleton variant="rounded" width={300} height={200} />
+  ),
+}
+
+export const TextBlock: Story = {
+  render: () => (
+    <View style={{ width: 300 }}>
+      <SkeletonText lines={4} />
+    </View>
+  ),
+}
+
+export const Avatar: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <SkeletonCircle size={40} />
+      <SkeletonCircle size={48} />
+      <SkeletonCircle size={56} />
+    </View>
+  ),
+}
+
+export const CardSkeleton: Story = {
+  render: () => (
+    <View style={{ width: 300 }}>
+      <SkeletonCard />
+    </View>
+  ),
+}
+
+export const CardWithoutImage: Story = {
+  render: () => (
+    <View style={{ width: 300 }}>
+      <SkeletonCard hasImage={false} />
+    </View>
+  ),
+}
+
+export const ListItemSkeleton: Story = {
+  render: () => (
+    <View style={{ width: 350 }}>
+      <SkeletonListItem />
+      <SkeletonListItem />
+      <SkeletonListItem />
+    </View>
+  ),
+}
+
+export const ListWithoutAvatar: Story = {
+  render: () => (
+    <View style={{ width: 350 }}>
+      <SkeletonListItem hasAvatar={false} />
+      <SkeletonListItem hasAvatar={false} />
+      <SkeletonListItem hasAvatar={false} />
+    </View>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Skeleton variant="text" width={200} animation="none" />
+      <SkeletonCircle size={48} animation="none" />
+      <Skeleton variant="rounded" width={200} height={100} animation="none" />
+    </View>
+  ),
+}
+
+export const ComposedExample: Story = {
+  render: () => (
+    <View className="w-[400px] p-4 bg-surface-elevated rounded-xl">
+      <View style={{ flexDirection: 'row', gap: 12, marginBottom: 16 }}>
+        <SkeletonCircle size={56} />
+        <View style={{ flex: 1, justifyContent: 'center', gap: 8 }}>
+          <Skeleton variant="text" width="60%" />
+          <Skeleton variant="text" width="40%" />
+        </View>
+      </View>
+      <SkeletonText lines={3} />
+      <View style={{ flexDirection: 'row', gap: 8, marginTop: 16 }}>
+        <Skeleton variant="rounded" width={80} height={36} />
+        <Skeleton variant="rounded" width={80} height={36} />
+      </View>
+    </View>
+  ),
+}

package/src/components/ui/skeleton/Skeleton.test.tsx

@@ -0,0 +1,162 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonListItem } from './Skeleton'
+
+describe('Skeleton', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Skeleton />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('defaults to text variant with pulse animation', () => {
+    const { container } = render(<Skeleton />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders with all variant options', () => {
+    const variants = ['text', 'circle', 'rect', 'rounded'] as const
+    variants.forEach((variant) => {
+      const { unmount } = render(<Skeleton variant={variant} />)
+      unmount()
+    })
+  })
+
+  it('renders with all animation options', () => {
+    const animations = ['pulse', 'shimmer', 'none'] as const
+    animations.forEach((animation) => {
+      const { unmount } = render(<Skeleton animation={animation} />)
+      unmount()
+    })
+  })
+
+  it('accepts width and height props', () => {
+    const { container } = render(<Skeleton width={200} height={100} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('accepts string width and height', () => {
+    const { container } = render(<Skeleton width="50%" height="100px" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('makes circle variant square when only width is provided', () => {
+    const { container } = render(<Skeleton variant="circle" width={48} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('makes circle variant square when only height is provided', () => {
+    const { container } = render(<Skeleton variant="circle" height={48} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('accepts custom borderRadius', () => {
+    const { container } = render(<Skeleton variant="rect" borderRadius={8} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Skeleton className="extra" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('has accessibility label of Loading...', () => {
+    const { container } = render(<Skeleton />)
+    expect(container.firstChild).toHaveAttribute('aria-label', 'Loading...')
+  })
+
+  describe('SkeletonText', () => {
+    it('renders default 3 lines', () => {
+      const { container } = render(<SkeletonText />)
+      // 3 skeleton lines
+      expect(container.firstChild?.childNodes).toHaveLength(3)
+    })
+
+    it('renders custom number of lines', () => {
+      const { container } = render(<SkeletonText lines={5} />)
+      expect(container.firstChild?.childNodes).toHaveLength(5)
+    })
+
+    it('accepts custom lastLineWidth', () => {
+      const { container } = render(<SkeletonText lastLineWidth="40%" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('accepts custom animation', () => {
+      const { container } = render(<SkeletonText animation="none" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('SkeletonCircle', () => {
+    it('renders with default size', () => {
+      const { container } = render(<SkeletonCircle />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders with custom size', () => {
+      const { container } = render(<SkeletonCircle size={64} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('SkeletonCard', () => {
+    it('renders with default props', () => {
+      const { container } = render(<SkeletonCard />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders without image', () => {
+      const { container } = render(<SkeletonCard hasImage={false} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('accepts custom imageHeight and lines', () => {
+      const { container } = render(<SkeletonCard imageHeight={200} lines={4} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('SkeletonListItem', () => {
+    it('renders with default props', () => {
+      const { container } = render(<SkeletonListItem />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders without avatar', () => {
+      const { container } = render(<SkeletonListItem hasAvatar={false} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('accepts custom avatarSize and lines', () => {
+      const { container } = render(<SkeletonListItem avatarSize={56} lines={3} />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Skeleton />)
+      const results = await axe(container, {
+        rules: { 'aria-prohibited-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for SkeletonText', async () => {
+      const { container } = render(<SkeletonText />)
+      const results = await axe(container, {
+        rules: { 'aria-prohibited-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for SkeletonCard', async () => {
+      const { container } = render(<SkeletonCard />)
+      const results = await axe(container, {
+        rules: { 'aria-prohibited-attr': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+  })
+})