@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/icon-box/IconBox.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { IconBox } from './IconBox'
+
+function StarIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return (
+    <View
+      className={className}
+      style={{
+        width: size,
+        height: size,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: size * 0.8,
+          height: size * 0.8,
+          borderRadius: size * 0.4,
+          backgroundColor: 'currentColor',
+        }}
+      />
+    </View>
+  )
+}
+
+function BoltIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return (
+    <View
+      className={className}
+      style={{
+        width: size,
+        height: size,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.3,
+          borderRightWidth: size * 0.3,
+          borderBottomWidth: size * 0.6,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: 'currentColor',
+        }}
+      />
+    </View>
+  )
+}
+
+const meta: Meta<typeof IconBox> = {
+  title: 'Components/IconBox',
+  component: IconBox,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'neutral'],
+      description: 'Color variant for the icon box',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof IconBox>
+
+export const Default: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'neutral',
+    size: 'md',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'primary',
+    size: 'md',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'primary',
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    icon: StarIcon,
+    color: 'primary',
+    size: 'lg',
+  },
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+      <IconBox icon={StarIcon} color="primary" />
+      <IconBox icon={StarIcon} color="secondary" />
+      <IconBox icon={StarIcon} color="success" />
+      <IconBox icon={StarIcon} color="error" />
+      <IconBox icon={StarIcon} color="warning" />
+      <IconBox icon={StarIcon} color="info" />
+      <IconBox icon={StarIcon} color="neutral" />
+    </View>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <IconBox icon={StarIcon} color="primary" size="sm" />
+      <IconBox icon={StarIcon} color="primary" size="md" />
+      <IconBox icon={StarIcon} color="primary" size="lg" />
+    </View>
+  ),
+}
+
+export const DifferentIcons: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12 }}>
+      <IconBox icon={StarIcon} color="success" />
+      <IconBox icon={BoltIcon} color="warning" />
+    </View>
+  ),
+}

package/src/components/ui/icon-box/IconBox.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { IconBox } from './IconBox'
+
+function MockIcon({ size, className }: { size?: number; className?: string }) {
+  return (
+    <span data-testid="icon" data-size={size} className={className}>
+      icon
+    </span>
+  )
+}
+
+describe('IconBox', () => {
+  it('renders the icon component', () => {
+    render(<IconBox icon={MockIcon} />)
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('passes correct default size to icon (md = 20)', () => {
+    render(<IconBox icon={MockIcon} />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '20')
+  })
+
+  it('passes correct size to icon for sm variant', () => {
+    render(<IconBox icon={MockIcon} size="sm" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '16')
+  })
+
+  it('passes correct size to icon for lg variant', () => {
+    render(<IconBox icon={MockIcon} size="lg" />)
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '24')
+  })
+
+  it('renders with size sm without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} size="sm" />)
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with size md by default without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} />)
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with size lg without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} size="lg" />)
+    expect(container.firstChild).toBeTruthy()
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('renders with color primary without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} color="primary" />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with neutral color by default', () => {
+    const { container } = render(<IconBox icon={MockIcon} />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('renders with className prop without crashing', () => {
+    const { container } = render(<IconBox icon={MockIcon} className="mt-4" />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('passes through testID prop', () => {
+    render(<IconBox icon={MockIcon} testID="my-icon-box" />)
+    expect(screen.getByTestId('my-icon-box')).toBeInTheDocument()
+  })
+
+  it('supports all color variants without errors', () => {
+    const colors = [
+      'primary',
+      'secondary',
+      'success',
+      'error',
+      'warning',
+      'info',
+      'neutral',
+    ] as const
+    for (const color of colors) {
+      const { unmount } = render(<IconBox icon={MockIcon} color={color} />)
+      expect(screen.getByTestId('icon')).toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  it('supports all size variants without errors', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    for (const size of sizes) {
+      const { unmount } = render(<IconBox icon={MockIcon} size={size} />)
+      expect(screen.getByTestId('icon')).toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  it('renders with all props combined', () => {
+    render(
+      <IconBox
+        icon={MockIcon}
+        color="success"
+        size="lg"
+        className="mt-2"
+        testID="full-icon-box"
+      />,
+    )
+    expect(screen.getByTestId('full-icon-box')).toBeInTheDocument()
+    expect(screen.getByTestId('icon')).toHaveAttribute('data-size', '24')
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<IconBox icon={MockIcon} color="primary" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/icon-box/IconBox.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+type IconBoxColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'neutral'
+
+type IconBoxSize = 'sm' | 'md' | 'lg'
+
+export interface IconBoxProps extends ViewProps {
+  icon: React.ComponentType<{ size?: number; className?: string }>
+  color?: IconBoxColor
+  size?: IconBoxSize
+  className?: string
+}
+
+const colorClasses: Record<IconBoxColor, { bg: string; icon: string }> = {
+  primary: { bg: 'bg-brand-primary/10', icon: 'text-brand-primary' },
+  secondary: { bg: 'bg-brand-secondary/10', icon: 'text-brand-secondary' },
+  success: { bg: 'bg-status-success/10', icon: 'text-status-success' },
+  error: { bg: 'bg-status-error/10', icon: 'text-status-error' },
+  warning: { bg: 'bg-status-warning/10', icon: 'text-status-warning' },
+  info: { bg: 'bg-status-info/10', icon: 'text-status-info' },
+  neutral: { bg: 'bg-surface-elevated', icon: 'text-text-secondary' },
+}
+
+const sizeClasses: Record<IconBoxSize, { box: string; iconSize: number }> = {
+  sm: { box: 'w-8 h-8 rounded-lg', iconSize: 16 },
+  md: { box: 'w-10 h-10 rounded-xl', iconSize: 20 },
+  lg: { box: 'w-12 h-12 rounded-xl', iconSize: 24 },
+}
+
+export function IconBox({
+  icon: Icon,
+  color = 'neutral',
+  size = 'md',
+  className,
+  ...props
+}: IconBoxProps) {
+  const colors = colorClasses[color]
+  const sizes = sizeClasses[size]
+
+  return (
+    <View
+      className={cn('items-center justify-center', colors.bg, sizes.box, className)}
+      {...props}
+    >
+      <Icon size={sizes.iconSize} className={colors.icon} />
+    </View>
+  )
+}

package/src/components/ui/icon-box/index.ts

@@ -0,0 +1 @@
+export { IconBox, type IconBoxProps } from './IconBox'

package/src/components/ui/index.ts

@@ -0,0 +1,38 @@
+// Core UI components
+export * from './alert'
+export * from './button'
+export * from './input'
+export * from './card'
+export * from './badge'
+export * from './spinner'
+export * from './avatar'
+export * from './divider'
+export * from './checkbox'
+export * from './switch'
+export * from './modal'
+export * from './skeleton'
+export * from './tabs'
+export * from './chip'
+export * from './link'
+export * from './tooltip'
+export * from './collapse'
+export * from './breadcrumbs'
+export * from './popover'
+export * from './menu'
+export * from './select'
+export * from './toolbar-button'
+export * from './radio'
+export * from './drawer'
+export * from './progress'
+export * from './toast'
+export * from './autocomplete'
+export * from './help-tip'
+export * from './form-field'
+export * from './stack'
+export * from './section'
+export * from './data-row'
+export * from './icon-box'
+export * from './surface'
+export * from './list-item'
+export * from './indicator'
+export * from './pill'

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Indicator } from './Indicator'
+
+const meta: Meta<typeof Indicator> = {
+  title: 'Components/Indicator',
+  component: Indicator,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['default', 'primary', 'success', 'error', 'warning', 'info'] },
+    glow: { control: 'boolean' },
+    ring: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Indicator>
+
+export const Default: Story = { args: { color: 'primary', size: 'md' } }
+
+export const AllSizes: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="xs" color="primary" />
+      <Indicator size="sm" color="primary" />
+      <Indicator size="md" color="primary" />
+      <Indicator size="lg" color="primary" />
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="default" />
+      <Indicator size="md" color="primary" />
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="error" />
+      <Indicator size="md" color="warning" />
+      <Indicator size="md" color="info" />
+    </View>
+  ),
+}
+
+export const WithGlow: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center p-4 bg-surface-base">
+      <Indicator size="md" color="success" glow />
+      <Indicator size="md" color="error" glow />
+      <Indicator size="md" color="warning" glow />
+      <Indicator size="md" color="primary" glow />
+    </View>
+  ),
+}
+
+export const WithRing: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="success" ring />
+      <Indicator size="md" color="error" ring />
+      <Indicator size="lg" color="primary" ring />
+    </View>
+  ),
+}
+
+export const CustomColor: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" customColor="#FF6B6B" />
+      <Indicator size="md" customColor="#4ECDC4" />
+      <Indicator size="md" customColor="#45B7D1" glow />
+    </View>
+  ),
+}

package/src/components/ui/indicator/Indicator.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Indicator } from './Indicator'
+
+describe('Indicator', () => {
+  it('renders with default props', () => {
+    const { container } = render(<Indicator />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders with all size options', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const { unmount } = render(<Indicator size={size} />)
+      unmount()
+    })
+  })
+
+  it('renders with all color options', () => {
+    const colors = ['default', 'primary', 'success', 'error', 'warning', 'info'] as const
+    colors.forEach((color) => {
+      const { unmount } = render(<Indicator color={color} />)
+      unmount()
+    })
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Indicator className="custom-class" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports customColor via inline style', () => {
+    const { container } = render(<Indicator customColor="#FF0000" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports ring prop', () => {
+    const { container } = render(<Indicator ring />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports glow prop', () => {
+    const { container } = render(<Indicator glow color="success" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Indicator color="success" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/indicator/Indicator.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type IndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
+export type IndicatorColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'
+
+export interface IndicatorProps extends ViewProps {
+  /** Dot size */
+  size?: IndicatorSize
+  /** Semantic color */
+  color?: IndicatorColor
+  /** Custom hex color (overrides color prop) */
+  customColor?: string
+  /** Add a glow shadow effect */
+  glow?: boolean
+  /** Add a ring border */
+  ring?: boolean
+  /** Additional className */
+  className?: string
+}
+
+const sizeStyles: Record<IndicatorSize, string> = {
+  xs: 'w-1 h-1',
+  sm: 'w-1.5 h-1.5',
+  md: 'w-2 h-2',
+  lg: 'w-2.5 h-2.5',
+}
+
+const colorStyles: Record<IndicatorColor, string> = {
+  default: 'bg-text-tertiary',
+  primary: 'bg-brand-primary',
+  success: 'bg-status-success',
+  error: 'bg-status-error',
+  warning: 'bg-status-warning',
+  info: 'bg-status-info',
+}
+
+export function Indicator({
+  size = 'sm',
+  color = 'default',
+  customColor,
+  glow = false,
+  ring = false,
+  className,
+  style,
+  ...props
+}: IndicatorProps) {
+  const dynamicStyle = {
+    ...(typeof style === 'object' ? style : {}),
+    ...(customColor ? { backgroundColor: customColor } : {}),
+    ...(glow && !customColor ? {} : {}),
+    ...(glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}),
+  }
+
+  return (
+    <View
+      className={cn(
+        'rounded-full shrink-0',
+        sizeStyles[size],
+        !customColor && colorStyles[color],
+        ring && 'border-2 border-background-base',
+        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(20,184,166,0.6)]',
+        glow && !customColor && color === 'error' && 'shadow-[0_0_6px_rgba(239,68,68,0.6)]',
+        glow && !customColor && color === 'warning' && 'shadow-[0_0_6px_rgba(245,158,11,0.6)]',
+        glow && !customColor && color === 'primary' && 'shadow-[0_0_6px_rgba(255,121,0,0.6)]',
+        className
+      )}
+      style={Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Indicator } from './Indicator'
+export type { IndicatorProps, IndicatorSize, IndicatorColor } from './Indicator'