@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/avatar/Avatar.test.tsx

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
+
+describe('Avatar', () => {
+  it('renders correctly with default props', () => {
+    render(<Avatar />)
+    expect(screen.getByRole('img')).toBeInTheDocument()
+  })
+
+  it('renders fallback text', () => {
+    render(<Avatar fallback="JD" />)
+    expect(screen.getByText('JD')).toBeInTheDocument()
+  })
+
+  it('uses fallback as accessibility label when no alt provided', () => {
+    render(<Avatar fallback="JD" />)
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'JD')
+  })
+
+  it('uses alt as accessibility label', () => {
+    render(<Avatar alt="John Doe" fallback="JD" />)
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'John Doe')
+  })
+
+  it('uses default accessibility label when no alt or fallback', () => {
+    render(<Avatar />)
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'Avatar')
+  })
+
+  it('renders with image source', () => {
+    render(<Avatar source={{ uri: 'https://example.com/avatar.jpg' }} alt="User" />)
+    const imgs = screen.getAllByRole('img')
+    expect(imgs.length).toBeGreaterThan(0)
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Avatar size={size} fallback="AB" />)
+      expect(screen.getByRole('img')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders empty placeholder when no source or fallback', () => {
+    const { container } = render(<Avatar />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<Avatar className="extra" />)
+    expect(screen.getByRole('img')).toBeInTheDocument()
+  })
+
+  describe('colorFromName', () => {
+    it('renders initials from colorFromName', () => {
+      render(<Avatar colorFromName="John Doe" />)
+      expect(screen.getByText('JD')).toBeInTheDocument()
+    })
+
+    it('generates deterministic color from name', () => {
+      const { container } = render(<Avatar colorFromName="Alice" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('colorFromName fallback is overridden by explicit fallback', () => {
+      render(<Avatar colorFromName="John Doe" fallback="XX" />)
+      expect(screen.getByText('XX')).toBeInTheDocument()
+    })
+  })
+
+  describe('AvatarBadge', () => {
+    it('renders with default success color', () => {
+      const { container } = render(<AvatarBadge />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders with all color options', () => {
+      const colors = ['success', 'error', 'warning', 'default'] as const
+      colors.forEach((color) => {
+        const { unmount } = render(<AvatarBadge color={color} />)
+        unmount()
+      })
+    })
+
+    it('accepts custom className', () => {
+      const { container } = render(<AvatarBadge className="extra" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('AvatarGroup', () => {
+    it('renders children avatars', () => {
+      render(
+        <AvatarGroup>
+          <Avatar fallback="A" />
+          <Avatar fallback="B" />
+        </AvatarGroup>
+      )
+      expect(screen.getByText('A')).toBeInTheDocument()
+      expect(screen.getByText('B')).toBeInTheDocument()
+    })
+
+    it('limits visible avatars with max prop', () => {
+      render(
+        <AvatarGroup max={2}>
+          <Avatar fallback="A" />
+          <Avatar fallback="B" />
+          <Avatar fallback="C" />
+          <Avatar fallback="D" />
+        </AvatarGroup>
+      )
+      expect(screen.getByText('A')).toBeInTheDocument()
+      expect(screen.getByText('B')).toBeInTheDocument()
+      expect(screen.getByText('+2')).toBeInTheDocument()
+    })
+
+    it('shows no +N indicator when all avatars fit', () => {
+      render(
+        <AvatarGroup max={5}>
+          <Avatar fallback="A" />
+          <Avatar fallback="B" />
+        </AvatarGroup>
+      )
+      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
+    })
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <AvatarGroup className="extra">
+          <Avatar fallback="A" />
+        </AvatarGroup>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Avatar fallback="JD" alt="John Doe" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct image role', () => {
+      render(<Avatar fallback="JD" />)
+      expect(screen.getByRole('img')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/ui/avatar/Avatar.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import { View, Text, Image, type ViewProps, type ImageSourcePropType } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { avatarColor, getInitials } from '../../../utils/avatar-color'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+export interface AvatarProps extends ViewProps {
+  /** Avatar size */
+  size?: AvatarSize
+  /** Image source */
+  source?: ImageSourcePropType
+  /** Fallback text (usually initials) */
+  fallback?: string
+  /** Alt text for accessibility */
+  alt?: string
+  /** Generate background color and initials from a name */
+  colorFromName?: string
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<AvatarSize, { container: string; text: string; image: string }> = {
+  xs: { container: 'w-6 h-6', text: 'text-xs', image: 'w-6 h-6' },
+  sm: { container: 'w-8 h-8', text: 'text-xs', image: 'w-8 h-8' },
+  md: { container: 'w-10 h-10', text: 'text-sm', image: 'w-10 h-10' },
+  lg: { container: 'w-12 h-12', text: 'text-base', image: 'w-12 h-12' },
+  xl: { container: 'w-16 h-16', text: 'text-lg', image: 'w-16 h-16' },
+  '2xl': { container: 'w-20 h-20', text: 'text-xl', image: 'w-20 h-20' },
+}
+
+/**
+ * Avatar component for user/entity representation.
+ *
+ * @example
+ * // With image
+ * <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} alt="User" />
+ *
+ * // With fallback initials
+ * <Avatar fallback="JD" />
+ *
+ * // With badge
+ * <AvatarGroup>
+ *   <Avatar source={source1} />
+ *   <Avatar source={source2} />
+ *   <AvatarBadge />
+ * </AvatarGroup>
+ */
+export function Avatar({
+  size = 'md',
+  source,
+  fallback,
+  alt,
+  colorFromName,
+  className,
+  ...props
+}: AvatarProps) {
+  const styles = sizeStyles[size]
+  const hasImage = source !== undefined
+
+  const resolvedFallback = fallback ?? (colorFromName ? getInitials(colorFromName) : undefined)
+  const nameColor = colorFromName ? avatarColor(colorFromName) : undefined
+
+  return (
+    <View
+      accessibilityRole="image"
+      accessibilityLabel={alt || resolvedFallback || 'Avatar'}
+      className={cn(
+        'items-center justify-center rounded-full overflow-hidden',
+        !nameColor && 'bg-border-strong',
+        styles.container,
+        className
+      )}
+      style={nameColor ? { backgroundColor: nameColor } : undefined}
+      {...props}
+    >
+      {hasImage ? (
+        <Image
+          source={source}
+          className={cn('rounded-full', styles.image)}
+          accessibilityLabel={alt}
+        />
+      ) : resolvedFallback ? (
+        <Text className={cn('font-semibold text-text-inverse', styles.text)}>
+          {resolvedFallback}
+        </Text>
+      ) : (
+        <View className="w-full h-full bg-surface-raised" />
+      )}
+    </View>
+  )
+}
+
+export interface AvatarBadgeProps {
+  /** Badge color */
+  color?: 'success' | 'error' | 'warning' | 'default'
+  /** Additional className */
+  className?: string
+}
+
+const badgeColors: Record<string, string> = {
+  success: 'bg-status-success',
+  error: 'bg-status-error',
+  warning: 'bg-status-warning',
+  default: 'bg-border-strong',
+}
+
+/**
+ * Status badge for Avatar (e.g., online indicator).
+ */
+export function AvatarBadge({ color = 'success', className }: AvatarBadgeProps) {
+  return (
+    <View
+      className={cn(
+        'absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-surface-base',
+        badgeColors[color],
+        className
+      )}
+    />
+  )
+}
+
+export interface AvatarGroupProps {
+  children: React.ReactNode
+  /** Maximum avatars to show before +N indicator */
+  max?: number
+  /** Size of avatars */
+  size?: AvatarSize
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Group of avatars with stacking effect.
+ */
+export function AvatarGroup({
+  children,
+  max,
+  size = 'md',
+  className,
+}: AvatarGroupProps) {
+  const childArray = React.Children.toArray(children)
+  const visibleChildren = max ? childArray.slice(0, max) : childArray
+  const remainingCount = max ? Math.max(0, childArray.length - max) : 0
+
+  return (
+    <View className={cn('flex-row', className)}>
+      {visibleChildren.map((child, index) => (
+        <View
+          key={index}
+          className={cn(
+            'border-2 border-surface-base rounded-full',
+            index > 0 && '-ml-2'
+          )}
+        >
+          {React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<any>, { size })
+            : child}
+        </View>
+      ))}
+      {remainingCount > 0 && (
+        <View
+          className={cn(
+            'border-2 border-surface-base rounded-full -ml-2',
+            'items-center justify-center bg-surface-raised',
+            sizeStyles[size].container
+          )}
+        >
+          <Text className={cn('font-semibold text-text-secondary', sizeStyles[size].text)}>
+            +{remainingCount}
+          </Text>
+        </View>
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
+export type { AvatarProps, AvatarBadgeProps, AvatarGroupProps, AvatarSize } from './Avatar'

package/src/components/ui/badge/Badge.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Badge, BadgeText } from './Badge'
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'subtle', 'outline'],
+      description: 'Visual variant',
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'],
+      description: 'Color scheme',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Badge size',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+  args: {
+    variant: 'subtle',
+    color: 'default',
+    size: 'md',
+    children: 'Badge',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+      <Badge variant="solid" color="primary">Solid</Badge>
+      <Badge variant="subtle" color="primary">Subtle</Badge>
+      <Badge variant="outline" color="primary">Outline</Badge>
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+        <Badge variant="solid" color="default">Default</Badge>
+        <Badge variant="solid" color="primary">Primary</Badge>
+        <Badge variant="solid" color="secondary">Secondary</Badge>
+        <Badge variant="solid" color="success">Success</Badge>
+        <Badge variant="solid" color="error">Error</Badge>
+        <Badge variant="solid" color="warning">Warning</Badge>
+        <Badge variant="solid" color="info">Info</Badge>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+        <Badge variant="subtle" color="default">Default</Badge>
+        <Badge variant="subtle" color="primary">Primary</Badge>
+        <Badge variant="subtle" color="secondary">Secondary</Badge>
+        <Badge variant="subtle" color="success">Success</Badge>
+        <Badge variant="subtle" color="error">Error</Badge>
+        <Badge variant="subtle" color="warning">Warning</Badge>
+        <Badge variant="subtle" color="info">Info</Badge>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+        <Badge variant="outline" color="default">Default</Badge>
+        <Badge variant="outline" color="primary">Primary</Badge>
+        <Badge variant="outline" color="secondary">Secondary</Badge>
+        <Badge variant="outline" color="success">Success</Badge>
+        <Badge variant="outline" color="error">Error</Badge>
+        <Badge variant="outline" color="warning">Warning</Badge>
+        <Badge variant="outline" color="info">Info</Badge>
+      </View>
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Badge size="sm" color="primary">Small</Badge>
+      <Badge size="md" color="primary">Medium</Badge>
+      <Badge size="lg" color="primary">Large</Badge>
+    </View>
+  ),
+}
+
+export const WithBadgeText: Story = {
+  render: () => (
+    <Badge variant="solid" color="success">
+      <BadgeText>Active</BadgeText>
+    </Badge>
+  ),
+}

package/src/components/ui/badge/Badge.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Badge, BadgeText } from './Badge'
+
+describe('Badge', () => {
+  it('renders string children correctly', () => {
+    render(<Badge>Active</Badge>)
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('renders BadgeText compound component', () => {
+    render(
+      <Badge>
+        <BadgeText>Status</BadgeText>
+      </Badge>
+    )
+    expect(screen.getByText('Status')).toBeInTheDocument()
+  })
+
+  it('applies default variant (subtle) and color (default)', () => {
+    const { container } = render(<Badge>Default</Badge>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders with all variant options', () => {
+    const variants = ['solid', 'subtle', 'outline'] as const
+    variants.forEach((variant) => {
+      const { unmount } = render(<Badge variant={variant}>Test</Badge>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Badge color={color}>Test</Badge>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Badge size={size}>Test</Badge>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Badge className="custom-class">Test</Badge>)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('passes additional props through', () => {
+    render(<Badge testID="badge-test">Test</Badge>)
+    expect(screen.getByText('Test')).toBeInTheDocument()
+  })
+
+  describe('BadgeText', () => {
+    it('renders children', () => {
+      render(<BadgeText>Label</BadgeText>)
+      expect(screen.getByText('Label')).toBeInTheDocument()
+    })
+
+    it('accepts custom className', () => {
+      render(<BadgeText className="extra">Label</BadgeText>)
+      expect(screen.getByText('Label')).toBeInTheDocument()
+    })
+  })
+
+  describe('dot indicator', () => {
+    it('renders dot when dot prop is true', () => {
+      const { container } = render(<Badge dot color="success">Active</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders dot with explicit dotColor', () => {
+      const { container } = render(<Badge dot dotColor="warning">Pending</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('does not render dot by default', () => {
+      const { container } = render(<Badge>No dot</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Badge color="success">
+          <BadgeText>Active</BadgeText>
+        </Badge>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/badge/Badge.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Indicator, type IndicatorColor } from '../indicator'
+
+export type BadgeVariant = 'solid' | 'subtle' | 'outline'
+export type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type BadgeSize = 'sm' | 'md' | 'lg'
+
+export interface BadgeProps extends ViewProps {
+  /** Visual variant */
+  variant?: BadgeVariant
+  /** Color scheme */
+  color?: BadgeColor
+  /** Size */
+  size?: BadgeSize
+  /** Show a leading indicator dot */
+  dot?: boolean
+  /** Color for the dot indicator (defaults to match badge color) */
+  dotColor?: IndicatorColor
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+const variantColorStyles: Record<BadgeVariant, Record<BadgeColor, string>> = {
+  solid: {
+    default: 'bg-border-strong text-text-inverse',
+    primary: 'bg-brand-primary text-text-inverse',
+    secondary: 'bg-brand-secondary text-text-inverse',
+    success: 'bg-status-success text-text-inverse',
+    error: 'bg-status-error text-text-inverse',
+    warning: 'bg-status-warning text-text-inverse',
+    info: 'bg-status-info text-text-inverse',
+  },
+  subtle: {
+    default: 'bg-surface-raised text-text-secondary',
+    primary: 'bg-brand-primary-subtle text-brand-primary',
+    secondary: 'bg-brand-secondary-subtle text-brand-secondary',
+    success: 'bg-status-success-subtle text-status-success',
+    error: 'bg-status-error-subtle text-status-error',
+    warning: 'bg-status-warning-subtle text-status-warning',
+    info: 'bg-status-info-subtle text-status-info',
+  },
+  outline: {
+    default: 'border border-border-strong text-text-secondary',
+    primary: 'border border-brand-primary text-brand-primary',
+    secondary: 'border border-brand-secondary text-brand-secondary',
+    success: 'border border-status-success text-status-success',
+    error: 'border border-status-error text-status-error',
+    warning: 'border border-status-warning text-status-warning',
+    info: 'border border-status-info text-status-info',
+  },
+}
+
+const sizeStyles: Record<BadgeSize, string> = {
+  sm: 'px-1.5 py-0.5 text-xs',
+  md: 'px-2 py-0.5 text-xs',
+  lg: 'px-2.5 py-1 text-sm',
+}
+
+/**
+ * Badge component for status indicators and labels.
+ *
+ * @example
+ * <Badge color="success">Active</Badge>
+ * <Badge variant="outline" color="warning">Pending</Badge>
+ */
+export function Badge({
+  variant = 'subtle',
+  color = 'default',
+  size = 'md',
+  dot,
+  dotColor,
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  return (
+    <View
+      className={cn(
+        'inline-flex items-center justify-center rounded-full font-medium',
+        variantColorStyles[variant][color],
+        sizeStyles[size],
+        className
+      )}
+      {...props}
+    >
+      {dot && (
+        <Indicator
+          size="xs"
+          color={dotColor ?? (color === 'default' || color === 'secondary' ? 'default' : color as IndicatorColor)}
+          className="mr-0.5"
+        />
+      )}
+      {typeof children === 'string' ? (
+        <Text className="text-inherit font-medium">{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+}
+
+export interface BadgeTextProps {
+  children: React.ReactNode
+  className?: string
+}
+
+/**
+ * Text component for Badge content.
+ */
+export function BadgeText({ children, className }: BadgeTextProps) {
+  return (
+    <Text className={cn('text-inherit font-medium', className)}>
+      {children}
+    </Text>
+  )
+}

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

@@ -0,0 +1,3 @@
+export { Badge, BadgeText } from './Badge'
+export type { BadgeProps, BadgeTextProps, BadgeVariant, BadgeColor, BadgeSize } from './Badge'
+export type { IndicatorColor } from '../indicator'