@titan-design/react-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Cross-platform design system built on Gluestack UI",
   "author": "Henry Jewkes",
   "license": "MIT",
@@ -13,21 +13,26 @@
   "bugs": {
     "url": "https://github.com/HJewkes/titan-design/issues"
   },
+  "source": "./src/index.ts",
+  "react-native": "./src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "react-native": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
     "./theme": {
+      "react-native": "./src/theme/index.ts",
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.mjs",
       "require": "./dist/theme/index.js"
     },
-    "./theme/global.css": "./src/theme/global.css"
+    "./theme/global.css": "./src/theme/global.css",
+    "./tailwind.config.js": "./tailwind.config.js"
   },
   "engines": {
     "node": ">=20.0.0"
@@ -47,8 +52,8 @@
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
     "lucide-react-native": ">=0.400.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.72.0",
     "react-native-web": ">=0.19.0"
   },
@@ -106,7 +111,7 @@
   },
   "files": [
     "dist",
-    "src/theme/global.css",
+    "src",
     "tailwind.config.js"
   ],
   "sideEffects": false,

package/src/components/custom/DateTime/DateTime.stories.tsx

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { DateTime } from './DateTime'
+
+const meta: Meta<typeof DateTime> = {
+  title: 'Custom/DateTime',
+  component: DateTime,
+  tags: ['autodocs'],
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['date', 'time', 'datetime', 'relative', 'short', 'medium', 'long', 'full'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'inherit'],
+    },
+    isUTC: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DateTime>
+
+const now = Date.now()
+const yesterday = now - 24 * 60 * 60 * 1000
+const lastWeek = now - 7 * 24 * 60 * 60 * 1000
+const nextWeek = now + 7 * 24 * 60 * 60 * 1000
+
+export const Default: Story = {
+  args: {
+    value: now,
+    format: 'datetime',
+  },
+}
+
+export const AllFormats: Story = {
+  render: () => {
+    const date = new Date('2024-06-15T14:30:00')
+    return (
+      <View className="gap-3">
+        <Row label="date" value={date} format="date" />
+        <Row label="time" value={date} format="time" />
+        <Row label="datetime" value={date} format="datetime" />
+        <Row label="short" value={date} format="short" />
+        <Row label="medium" value={date} format="medium" />
+        <Row label="long" value={date} format="long" />
+        <Row label="full" value={date} format="full" />
+      </View>
+    )
+  },
+}
+
+function Row({ label, value, format }: { label: string; value: any; format: any }) {
+  return (
+    <View className="flex-row items-center">
+      <Text className="w-24 text-text-secondary text-sm">{label}:</Text>
+      <DateTime value={value} format={format} className="text-text-primary" />
+    </View>
+  )
+}
+
+export const RelativeTime: Story = {
+  render: () => {
+    const now = Date.now()
+    const dates = [
+      { label: '30 seconds ago', value: now - 30 * 1000 },
+      { label: '5 minutes ago', value: now - 5 * 60 * 1000 },
+      { label: '2 hours ago', value: now - 2 * 60 * 60 * 1000 },
+      { label: 'Yesterday', value: now - 24 * 60 * 60 * 1000 },
+      { label: 'Last week', value: now - 7 * 24 * 60 * 60 * 1000 },
+      { label: 'Last month', value: now - 30 * 24 * 60 * 60 * 1000 },
+      { label: 'Last year', value: now - 365 * 24 * 60 * 60 * 1000 },
+      { label: 'In 2 hours', value: now + 2 * 60 * 60 * 1000 },
+      { label: 'Tomorrow', value: now + 24 * 60 * 60 * 1000 },
+      { label: 'Next week', value: now + 7 * 24 * 60 * 60 * 1000 },
+    ]
+
+    return (
+      <View className="gap-2">
+        {dates.map(({ label, value }) => (
+          <View key={label} className="flex-row items-center">
+            <Text className="w-32 text-text-secondary text-sm">{label}:</Text>
+            <DateTime value={value} format="relative" className="text-text-primary" />
+          </View>
+        ))}
+      </View>
+    )
+  },
+}
+
+export const Colors: Story = {
+  render: () => (
+    <View className="gap-2">
+      <DateTime value={now} color="primary" />
+      <DateTime value={now} color="secondary" />
+      <DateTime value={now} color="tertiary" />
+    </View>
+  ),
+}
+
+export const UTCTime: Story = {
+  render: () => (
+    <View className="gap-3">
+      <View>
+        <Text className="text-text-secondary text-sm mb-1">Local Time:</Text>
+        <DateTime value={now} format="datetime" className="text-text-primary" />
+      </View>
+      <View>
+        <Text className="text-text-secondary text-sm mb-1">UTC Time:</Text>
+        <DateTime value={now} format="datetime" isUTC className="text-text-primary" />
+      </View>
+    </View>
+  ),
+}
+
+export const NullValue: Story = {
+  render: () => (
+    <View className="gap-2">
+      <View className="flex-row items-center">
+        <Text className="w-32 text-text-secondary text-sm">Default fallback:</Text>
+        <DateTime value={null} className="text-text-primary" />
+      </View>
+      <View className="flex-row items-center">
+        <Text className="w-32 text-text-secondary text-sm">Custom fallback:</Text>
+        <DateTime value={undefined} fallback="Not set" className="text-text-primary" />
+      </View>
+    </View>
+  ),
+}
+
+export const DifferentInputTypes: Story = {
+  render: () => {
+    const timestamp = 1718450400000 // June 15, 2024
+    const dateObject = new Date(timestamp)
+    const isoString = dateObject.toISOString()
+
+    return (
+      <View className="gap-3">
+        <View>
+          <Text className="text-text-secondary text-sm mb-1">Timestamp (number):</Text>
+          <DateTime value={timestamp} format="medium" className="text-text-primary" />
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-1">Date object:</Text>
+          <DateTime value={dateObject} format="medium" className="text-text-primary" />
+        </View>
+        <View>
+          <Text className="text-text-secondary text-sm mb-1">ISO string:</Text>
+          <DateTime value={isoString} format="medium" className="text-text-primary" />
+        </View>
+      </View>
+    )
+  },
+}
+
+export const UsageExample: Story = {
+  render: () => {
+    const items = [
+      { title: 'Project kickoff meeting', date: now - 3 * 24 * 60 * 60 * 1000 },
+      { title: 'Design review', date: now - 1 * 24 * 60 * 60 * 1000 },
+      { title: 'Sprint planning', date: now + 2 * 24 * 60 * 60 * 1000 },
+      { title: 'Release deadline', date: now + 7 * 24 * 60 * 60 * 1000 },
+    ]
+
+    return (
+      <View className="gap-2 p-4 bg-surface-elevated rounded-lg max-w-md">
+        <Text className="text-lg font-semibold text-text-primary mb-2">Upcoming Events</Text>
+        {items.map((item, index) => (
+          <View key={index} className="flex-row justify-between items-center py-2 border-b border-border-default">
+            <Text className="text-text-primary">{item.title}</Text>
+            <DateTime value={item.date} format="relative" color="secondary" className="text-sm" />
+          </View>
+        ))}
+      </View>
+    )
+  },
+}

package/src/components/custom/DateTime/DateTime.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 { DateTime, formatDateTime } from './DateTime'
+
+describe('DateTime', () => {
+  const testDate = new Date('2024-06-15T14:30:00Z')
+  const testTimestamp = testDate.getTime()
+  const testISOString = '2024-06-15T14:30:00Z'
+
+  it('renders with Date object', () => {
+    render(<DateTime value={testDate} format="date" isUTC />)
+    // Should render a formatted date string
+    expect(screen.getByText(/2024/)).toBeInTheDocument()
+  })
+
+  it('renders with timestamp', () => {
+    render(<DateTime value={testTimestamp} format="date" isUTC />)
+    expect(screen.getByText(/2024/)).toBeInTheDocument()
+  })
+
+  it('renders with ISO string', () => {
+    render(<DateTime value={testISOString} format="date" isUTC />)
+    expect(screen.getByText(/2024/)).toBeInTheDocument()
+  })
+
+  it('renders fallback when value is null', () => {
+    render(<DateTime value={null} />)
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('renders fallback when value is undefined', () => {
+    render(<DateTime value={undefined} />)
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('renders custom fallback', () => {
+    render(<DateTime value={null} fallback="N/A" />)
+    expect(screen.getByText('N/A')).toBeInTheDocument()
+  })
+
+  it('renders Invalid Date for bad input', () => {
+    render(<DateTime value="not-a-date" />)
+    expect(screen.getByText('Invalid Date')).toBeInTheDocument()
+  })
+
+  describe('formats', () => {
+    it('renders date format', () => {
+      render(<DateTime value={testDate} format="date" isUTC />)
+      expect(screen.getByText(/06/)).toBeInTheDocument()
+    })
+
+    it('renders time format', () => {
+      render(<DateTime value={testDate} format="time" isUTC />)
+      // Should contain time portion
+      const textContent = screen.getByText(/\d/).textContent
+      expect(textContent).toBeDefined()
+    })
+
+    it('renders datetime format', () => {
+      render(<DateTime value={testDate} format="datetime" isUTC />)
+      expect(screen.getByText(/2024/)).toBeInTheDocument()
+    })
+
+    it('renders short format', () => {
+      render(<DateTime value={testDate} format="short" isUTC />)
+      expect(screen.getByText(/Jun/)).toBeInTheDocument()
+    })
+
+    it('renders medium format', () => {
+      render(<DateTime value={testDate} format="medium" isUTC />)
+      expect(screen.getByText(/Jun/)).toBeInTheDocument()
+      expect(screen.getByText(/2024/)).toBeInTheDocument()
+    })
+
+    it('renders long format', () => {
+      render(<DateTime value={testDate} format="long" isUTC />)
+      expect(screen.getByText(/June/)).toBeInTheDocument()
+    })
+
+    it('renders full format', () => {
+      render(<DateTime value={testDate} format="full" isUTC />)
+      expect(screen.getByText(/June/)).toBeInTheDocument()
+      expect(screen.getByText(/2024/)).toBeInTheDocument()
+    })
+
+    it('renders relative format', () => {
+      // Use a date far in the past to get a stable relative output
+      const pastDate = new Date('2020-01-01T00:00:00Z')
+      render(<DateTime value={pastDate} format="relative" />)
+      // Should contain "ago" or "year" type relative text
+      const el = screen.getByText(/year|ago/)
+      expect(el).toBeInTheDocument()
+    })
+  })
+
+  describe('color variants', () => {
+    const colors = ['primary', 'secondary', 'tertiary', 'inherit'] as const
+    colors.forEach((color) => {
+      it(`renders with color ${color}`, () => {
+        render(<DateTime value={testDate} format="short" color={color} isUTC />)
+        expect(screen.getByText(/Jun/)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('UTC mode', () => {
+    it('renders in UTC when isUTC is true', () => {
+      render(<DateTime value={testDate} format="date" isUTC />)
+      expect(screen.getByText(/2024/)).toBeInTheDocument()
+    })
+  })
+
+  describe('formatDateTime utility', () => {
+    it('formats a date value', () => {
+      const result = formatDateTime(testDate, 'short', true)
+      expect(result).toContain('Jun')
+    })
+
+    it('returns fallback for null', () => {
+      expect(formatDateTime(null)).toBe('-')
+    })
+
+    it('returns fallback for undefined', () => {
+      expect(formatDateTime(undefined)).toBe('-')
+    })
+
+    it('returns custom fallback', () => {
+      expect(formatDateTime(null, 'date', false, 'N/A')).toBe('N/A')
+    })
+
+    it('returns Invalid Date for bad input', () => {
+      expect(formatDateTime('not-a-date')).toBe('Invalid Date')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <DateTime value={testDate} format="medium" isUTC />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with fallback', async () => {
+      const { container } = render(<DateTime value={null} fallback="No date" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/DateTime/DateTime.tsx

@@ -0,0 +1,235 @@
+import React from 'react'
+import { Text, type TextProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type DateTimeFormat = 
+  | 'date' // 2024-01-15
+  | 'time' // 14:30
+  | 'datetime' // 2024-01-15 14:30
+  | 'relative' // 2 hours ago
+  | 'short' // Jan 15
+  | 'medium' // Jan 15, 2024
+  | 'long' // January 15, 2024
+  | 'full' // Monday, January 15, 2024
+
+export interface DateTimeProps extends TextProps {
+  /** Date value (timestamp in ms, Date object, or ISO string) */
+  value: number | Date | string | null | undefined
+  /** Display format */
+  format?: DateTimeFormat
+  /** Custom format string (overrides format) */
+  customFormat?: string
+  /** Whether to show in UTC */
+  isUTC?: boolean
+  /** Fallback text when value is null/undefined */
+  fallback?: string
+  /** Text color */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'inherit'
+  /** Additional className */
+  className?: string
+}
+
+const colorStyles = {
+  primary: 'text-text-primary',
+  secondary: 'text-text-secondary',
+  tertiary: 'text-text-tertiary',
+  inherit: '',
+}
+
+/**
+ * Formats a date value to a readable string.
+ */
+function formatDate(
+  value: number | Date | string,
+  format: DateTimeFormat,
+  isUTC: boolean
+): string {
+  const date = value instanceof Date ? value : new Date(value)
+  
+  if (isNaN(date.getTime())) {
+    return 'Invalid Date'
+  }
+
+  // For relative time
+  if (format === 'relative') {
+    return getRelativeTime(date)
+  }
+
+  // Use Intl.DateTimeFormat for locale-aware formatting
+  const options: Intl.DateTimeFormatOptions = {}
+  
+  switch (format) {
+    case 'date':
+      options.year = 'numeric'
+      options.month = '2-digit'
+      options.day = '2-digit'
+      break
+    case 'time':
+      options.hour = '2-digit'
+      options.minute = '2-digit'
+      break
+    case 'datetime':
+      options.year = 'numeric'
+      options.month = '2-digit'
+      options.day = '2-digit'
+      options.hour = '2-digit'
+      options.minute = '2-digit'
+      break
+    case 'short':
+      options.month = 'short'
+      options.day = 'numeric'
+      break
+    case 'medium':
+      options.month = 'short'
+      options.day = 'numeric'
+      options.year = 'numeric'
+      break
+    case 'long':
+      options.month = 'long'
+      options.day = 'numeric'
+      options.year = 'numeric'
+      break
+    case 'full':
+      options.weekday = 'long'
+      options.month = 'long'
+      options.day = 'numeric'
+      options.year = 'numeric'
+      break
+  }
+
+  if (isUTC) {
+    options.timeZone = 'UTC'
+  }
+
+  return new Intl.DateTimeFormat(undefined, options).format(date)
+}
+
+/**
+ * Gets relative time string (e.g., "2 hours ago", "in 3 days")
+ */
+function getRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = date.getTime() - now.getTime()
+  const diffSecs = Math.round(diffMs / 1000)
+  const diffMins = Math.round(diffSecs / 60)
+  const diffHours = Math.round(diffMins / 60)
+  const diffDays = Math.round(diffHours / 24)
+  const diffWeeks = Math.round(diffDays / 7)
+  const diffMonths = Math.round(diffDays / 30)
+  const diffYears = Math.round(diffDays / 365)
+
+  // Use Intl.RelativeTimeFormat if available
+  if (typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) {
+    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+    
+    if (Math.abs(diffSecs) < 60) {
+      return rtf.format(diffSecs, 'second')
+    }
+    if (Math.abs(diffMins) < 60) {
+      return rtf.format(diffMins, 'minute')
+    }
+    if (Math.abs(diffHours) < 24) {
+      return rtf.format(diffHours, 'hour')
+    }
+    if (Math.abs(diffDays) < 7) {
+      return rtf.format(diffDays, 'day')
+    }
+    if (Math.abs(diffWeeks) < 4) {
+      return rtf.format(diffWeeks, 'week')
+    }
+    if (Math.abs(diffMonths) < 12) {
+      return rtf.format(diffMonths, 'month')
+    }
+    return rtf.format(diffYears, 'year')
+  }
+
+  // Fallback for environments without Intl.RelativeTimeFormat
+  const absSeconds = Math.abs(diffSecs)
+  const isFuture = diffMs > 0
+  const prefix = isFuture ? 'in ' : ''
+  const suffix = isFuture ? '' : ' ago'
+
+  if (absSeconds < 60) {
+    return 'just now'
+  }
+  if (Math.abs(diffMins) < 60) {
+    const mins = Math.abs(diffMins)
+    return `${prefix}${mins} minute${mins === 1 ? '' : 's'}${suffix}`
+  }
+  if (Math.abs(diffHours) < 24) {
+    const hours = Math.abs(diffHours)
+    return `${prefix}${hours} hour${hours === 1 ? '' : 's'}${suffix}`
+  }
+  if (Math.abs(diffDays) < 7) {
+    const days = Math.abs(diffDays)
+    return `${prefix}${days} day${days === 1 ? '' : 's'}${suffix}`
+  }
+  if (Math.abs(diffWeeks) < 4) {
+    const weeks = Math.abs(diffWeeks)
+    return `${prefix}${weeks} week${weeks === 1 ? '' : 's'}${suffix}`
+  }
+  if (Math.abs(diffMonths) < 12) {
+    const months = Math.abs(diffMonths)
+    return `${prefix}${months} month${months === 1 ? '' : 's'}${suffix}`
+  }
+  const years = Math.abs(diffYears)
+  return `${prefix}${years} year${years === 1 ? '' : 's'}${suffix}`
+}
+
+/**
+ * DateTime component for displaying formatted dates and times.
+ *
+ * @example
+ * // Basic usage
+ * <DateTime value={Date.now()} />
+ *
+ * @example
+ * // Different formats
+ * <DateTime value={date} format="relative" />
+ * <DateTime value={date} format="long" />
+ *
+ * @example
+ * // UTC time
+ * <DateTime value={timestamp} format="datetime" isUTC />
+ */
+export function DateTime({
+  value,
+  format = 'datetime',
+  customFormat,
+  isUTC = false,
+  fallback = '-',
+  color = 'inherit',
+  className,
+  ...props
+}: DateTimeProps) {
+  if (value === null || value === undefined) {
+    return (
+      <Text className={cn(colorStyles[color], className)} {...props}>
+        {fallback}
+      </Text>
+    )
+  }
+
+  const formattedDate = formatDate(value, format, isUTC)
+
+  return (
+    <Text className={cn(colorStyles[color], className)} {...props}>
+      {formattedDate}
+    </Text>
+  )
+}
+
+/**
+ * Utility function to format dates outside of React components.
+ */
+export function formatDateTime(
+  value: number | Date | string | null | undefined,
+  format: DateTimeFormat = 'datetime',
+  isUTC: boolean = false,
+  fallback: string = '-'
+): string {
+  if (value === null || value === undefined) {
+    return fallback
+  }
+  return formatDate(value, format, isUTC)
+}

package/src/components/custom/DateTime/index.ts

@@ -0,0 +1,2 @@
+export { DateTime, formatDateTime } from './DateTime'
+export type { DateTimeProps, DateTimeFormat } from './DateTime'