@titan-design/react-ui 0.1.0 → 0.2.5

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

@@ -0,0 +1,229 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type SkeletonVariant = 'text' | 'circle' | 'rect' | 'rounded'
+export type SkeletonAnimation = 'pulse' | 'shimmer' | 'none'
+
+export interface SkeletonProps extends ViewProps {
+  /** Shape variant */
+  variant?: SkeletonVariant
+  /** Animation type */
+  animation?: SkeletonAnimation
+  /** Width (number for pixels, string for percentages/other) */
+  width?: number | string
+  /** Height (number for pixels, string for percentages/other) */
+  height?: number | string
+  /** Border radius (only for 'rect' variant) */
+  borderRadius?: number
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Skeleton component for loading placeholders.
+ *
+ * @example
+ * // Text skeleton
+ * <Skeleton variant="text" width="60%" />
+ *
+ * // Avatar skeleton
+ * <Skeleton variant="circle" width={48} height={48} />
+ *
+ * // Card skeleton
+ * <Skeleton variant="rounded" width="100%" height={200} />
+ */
+export function Skeleton({
+  variant = 'text',
+  animation = 'pulse',
+  width,
+  height,
+  borderRadius,
+  className,
+  style,
+  ...props
+}: SkeletonProps) {
+  const variantStyles = {
+    text: 'h-4 rounded',
+    circle: 'rounded-full',
+    rect: '',
+    rounded: 'rounded-lg',
+  }
+
+  const animationStyles = {
+    pulse: 'animate-pulse',
+    shimmer: 'animate-shimmer', // Note: requires custom animation in Tailwind config
+    none: '',
+  }
+
+  // For circle variant, if only one dimension is provided, make it square
+  let finalWidth = width
+  let finalHeight = height
+  if (variant === 'circle') {
+    if (width && !height) finalHeight = width
+    if (height && !width) finalWidth = height
+  }
+
+  return (
+    <View
+      accessibilityRole="none"
+      accessibilityLabel="Loading..."
+      className={cn(
+        'bg-interactive-disabled',
+        variantStyles[variant],
+        animationStyles[animation],
+        className
+      )}
+      style={[
+        {
+          ...(finalWidth !== undefined && { width: finalWidth as number }),
+          ...(finalHeight !== undefined && { height: finalHeight as number }),
+          ...(borderRadius !== undefined && { borderRadius }),
+        },
+        style,
+      ]}
+      {...props}
+    />
+  )
+}
+
+// Convenience components for common patterns
+
+export interface SkeletonTextProps {
+  /** Number of lines */
+  lines?: number
+  /** Last line width (percentage) */
+  lastLineWidth?: string
+  /** Gap between lines */
+  gap?: number
+  /** Animation type */
+  animation?: SkeletonAnimation
+  className?: string
+}
+
+/**
+ * Multi-line text skeleton.
+ */
+export function SkeletonText({
+  lines = 3,
+  lastLineWidth = '60%',
+  gap = 8,
+  animation = 'pulse',
+  className,
+}: SkeletonTextProps) {
+  return (
+    <View className={cn('gap-2', className)} style={{ gap }}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          variant="text"
+          animation={animation}
+          width={i === lines - 1 ? lastLineWidth : '100%'}
+        />
+      ))}
+    </View>
+  )
+}
+
+export interface SkeletonCircleProps {
+  /** Size in pixels */
+  size?: number
+  /** Animation type */
+  animation?: SkeletonAnimation
+  className?: string
+}
+
+/**
+ * Circle skeleton for avatars.
+ */
+export function SkeletonCircle({
+  size = 40,
+  animation = 'pulse',
+  className,
+}: SkeletonCircleProps) {
+  return (
+    <Skeleton
+      variant="circle"
+      width={size}
+      height={size}
+      animation={animation}
+      className={className}
+    />
+  )
+}
+
+// Composed skeleton patterns
+
+export interface SkeletonCardProps {
+  /** Show image area */
+  hasImage?: boolean
+  /** Image height */
+  imageHeight?: number
+  /** Number of text lines */
+  lines?: number
+  /** Animation type */
+  animation?: SkeletonAnimation
+  className?: string
+}
+
+/**
+ * Card skeleton pattern.
+ */
+export function SkeletonCard({
+  hasImage = true,
+  imageHeight = 160,
+  lines = 3,
+  animation = 'pulse',
+  className,
+}: SkeletonCardProps) {
+  return (
+    <View className={cn('rounded-lg overflow-hidden bg-surface-elevated', className)}>
+      {hasImage && (
+        <Skeleton
+          variant="rect"
+          width="100%"
+          height={imageHeight}
+          animation={animation}
+        />
+      )}
+      <View className="p-4 gap-3">
+        <Skeleton variant="text" width="70%" animation={animation} />
+        <SkeletonText lines={lines} animation={animation} />
+      </View>
+    </View>
+  )
+}
+
+export interface SkeletonListItemProps {
+  /** Show avatar */
+  hasAvatar?: boolean
+  /** Avatar size */
+  avatarSize?: number
+  /** Number of text lines */
+  lines?: number
+  /** Animation type */
+  animation?: SkeletonAnimation
+  className?: string
+}
+
+/**
+ * List item skeleton pattern.
+ */
+export function SkeletonListItem({
+  hasAvatar = true,
+  avatarSize = 40,
+  lines = 2,
+  animation = 'pulse',
+  className,
+}: SkeletonListItemProps) {
+  return (
+    <View className={cn('flex-row items-center gap-3 p-3', className)}>
+      {hasAvatar && (
+        <SkeletonCircle size={avatarSize} animation={animation} />
+      )}
+      <View className="flex-1">
+        <SkeletonText lines={lines} animation={animation} />
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,16 @@
+export {
+  Skeleton,
+  SkeletonText,
+  SkeletonCircle,
+  SkeletonCard,
+  SkeletonListItem,
+} from './Skeleton'
+export type {
+  SkeletonProps,
+  SkeletonTextProps,
+  SkeletonCircleProps,
+  SkeletonCardProps,
+  SkeletonListItemProps,
+  SkeletonVariant,
+  SkeletonAnimation,
+} from './Skeleton'

package/src/components/ui/spinner/Spinner.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Spinner } from './Spinner'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description: 'Spinner size',
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'white', 'default'],
+      description: 'Color scheme',
+    },
+    label: {
+      control: 'text',
+      description: 'Accessibility label',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    color: 'primary',
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+      <Spinner size="xl" />
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+      <Spinner color="primary" />
+      <Spinner color="secondary" />
+      <Spinner color="default" />
+      <View className="bg-surface-elevated p-2 rounded-md">
+        <Spinner color="white" />
+      </View>
+    </View>
+  ),
+}
+
+export const WithCustomLabel: Story = {
+  args: {
+    size: 'lg',
+    color: 'primary',
+    label: 'Fetching data...',
+  },
+}

package/src/components/ui/spinner/Spinner.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Spinner } from './Spinner'
+
+describe('Spinner', () => {
+  it('renders correctly', () => {
+    render(<Spinner />)
+    const progressbars = screen.getAllByRole('progressbar')
+    expect(progressbars.length).toBeGreaterThan(0)
+  })
+
+  it('has default accessibility label of Loading', () => {
+    render(<Spinner />)
+    const wrapper = screen.getAllByRole('progressbar')[0]
+    expect(wrapper).toHaveAttribute('aria-label', 'Loading')
+  })
+
+  it('accepts custom label', () => {
+    render(<Spinner label="Processing" />)
+    const wrapper = screen.getAllByRole('progressbar')[0]
+    expect(wrapper).toHaveAttribute('aria-label', 'Processing')
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Spinner size={size} />)
+      expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0)
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['primary', 'secondary', 'white', 'default'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Spinner color={color} />)
+      expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0)
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    render(<Spinner className="extra" />)
+    expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0)
+  })
+
+  it('passes additional props through', () => {
+    render(<Spinner testID="spinner-test" />)
+    expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0)
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Spinner />)
+      const results = await axe(container, {
+        rules: { 'aria-progressbar-name': { enabled: false } },
+      })
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct progressbar role', () => {
+      render(<Spinner />)
+      expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0)
+    })
+  })
+})

package/src/components/ui/spinner/Spinner.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { ActivityIndicator, View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
+export type SpinnerColor = 'primary' | 'secondary' | 'white' | 'default'
+
+export interface SpinnerProps extends ViewProps {
+  /** Spinner size */
+  size?: SpinnerSize
+  /** Color scheme */
+  color?: SpinnerColor
+  /** Accessibility label */
+  label?: string
+  /** Additional className */
+  className?: string
+}
+
+const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
+  sm: 'small',
+  md: 'small',
+  lg: 'large',
+  xl: 'large',
+}
+
+const colorMap: Record<SpinnerColor, string> = {
+  primary: '#5048E5',
+  secondary: '#10B981',
+  white: '#FFFFFF',
+  default: '#6B7280',
+}
+
+const containerSizes: Record<SpinnerSize, string> = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+  xl: 'w-12 h-12',
+}
+
+/**
+ * Spinner component for loading states.
+ *
+ * @example
+ * <Spinner size="md" color="primary" />
+ *
+ * // In a button
+ * <Button isLoading>
+ *   <Spinner size="sm" color="white" />
+ *   <ButtonText>Loading...</ButtonText>
+ * </Button>
+ */
+export function Spinner({
+  size = 'md',
+  color = 'primary',
+  label = 'Loading',
+  className,
+  ...props
+}: SpinnerProps) {
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      className={cn('items-center justify-center', containerSizes[size], className)}
+      {...props}
+    >
+      <ActivityIndicator
+        size={sizeMap[size]}
+        color={colorMap[color]}
+      />
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner'
+export type { SpinnerProps, SpinnerSize, SpinnerColor } from './Spinner'

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

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Stack, HStack, VStack } from './Stack'
+
+const meta: Meta<typeof Stack> = {
+  title: 'Components/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  argTypes: {
+    gap: {
+      control: 'select',
+      options: [0, 1, 2, 3, 4, 5, 6, 8, 10, 12],
+      description: 'Gap between children (Tailwind spacing scale)',
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'stretch'],
+      description: 'Cross-axis alignment',
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between', 'around'],
+      description: 'Main-axis alignment',
+    },
+    wrap: {
+      control: 'boolean',
+      description: 'Whether children should wrap',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+function Box({ children }: { children: string }) {
+  return (
+    <View className="rounded bg-primary-500 px-4 py-2">
+      <Text className="text-sm text-white">{children}</Text>
+    </View>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    gap: 4,
+  },
+  render: (args) => (
+    <Stack {...args}>
+      <Box>Item 1</Box>
+      <Box>Item 2</Box>
+      <Box>Item 3</Box>
+    </Stack>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <HStack gap={4} align="center">
+      <Box>Left</Box>
+      <Box>Center</Box>
+      <Box>Right</Box>
+    </HStack>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <VStack gap={4} align="start">
+      <Box>Top</Box>
+      <Box>Middle</Box>
+      <Box>Bottom</Box>
+    </VStack>
+  ),
+}
+
+export const WithAlignment: Story = {
+  render: () => (
+    <VStack gap={6}>
+      <Text className="text-sm font-medium text-neutral-400">justify=&quot;between&quot;</Text>
+      <HStack gap={2} justify="between" className="w-full">
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </HStack>
+
+      <Text className="text-sm font-medium text-neutral-400">align=&quot;center&quot;</Text>
+      <HStack gap={2} align="center">
+        <View className="rounded bg-primary-500 px-4 py-1">
+          <Text className="text-sm text-white">Short</Text>
+        </View>
+        <View className="rounded bg-primary-500 px-4 py-4">
+          <Text className="text-sm text-white">Tall</Text>
+        </View>
+        <View className="rounded bg-primary-500 px-4 py-2">
+          <Text className="text-sm text-white">Medium</Text>
+        </View>
+      </HStack>
+    </VStack>
+  ),
+}
+
+export const WithWrapping: Story = {
+  render: () => (
+    <HStack gap={2} wrap className="max-w-xs">
+      {Array.from({ length: 8 }, (_, i) => (
+        <Box key={i}>Tag {i + 1}</Box>
+      ))}
+    </HStack>
+  ),
+}
+
+export const GapScale: Story = {
+  render: () => (
+    <VStack gap={6}>
+      {([0, 1, 2, 4, 6, 8, 12] as const).map((g) => (
+        <VStack key={g} gap={1}>
+          <Text className="text-xs text-neutral-400">gap={g}</Text>
+          <HStack gap={g}>
+            <Box>A</Box>
+            <Box>B</Box>
+            <Box>C</Box>
+          </HStack>
+        </VStack>
+      ))}
+    </VStack>
+  ),
+}