@object-ui/fields 3.0.2 → 3.1.0

package/src/__tests__/datetime-cell.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * DateTimeCellRenderer Tests
+ *
+ * Tests for the Airtable-style split date/time cell renderer.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { DateTimeCellRenderer } from '../index';
+
+describe('DateTimeCellRenderer', () => {
+  it('should render date and time separately', () => {
+    render(
+      <DateTimeCellRenderer
+        value="2026-02-18T12:57:00.000Z"
+        field={{ name: 'created_at', type: 'datetime' } as any}
+      />
+    );
+    // Date part should be visible
+    expect(screen.getByText('2/18/2026')).toBeInTheDocument();
+    // Time part should be in a muted span
+    const container = screen.getByText('2/18/2026').closest('span');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should show dash for null value', () => {
+    const { container } = render(
+      <DateTimeCellRenderer
+        value={null}
+        field={{ name: 'created_at', type: 'datetime' } as any}
+      />
+    );
+    expect(container.textContent).toBe('-');
+  });
+
+  it('should show dash for invalid date', () => {
+    const { container } = render(
+      <DateTimeCellRenderer
+        value="not-a-date"
+        field={{ name: 'created_at', type: 'datetime' } as any}
+      />
+    );
+    expect(container.textContent).toBe('-');
+  });
+});

package/src/index.tsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
 import { ComponentRegistry } from '@object-ui/core';
-import { Badge, Avatar, AvatarFallback, Button } from '@object-ui/components';
-import { Check, X } from 'lucide-react';
+import { Badge, Avatar, AvatarFallback, Button, Checkbox } from '@object-ui/components';
+import { Check, X, Copy, Phone as PhoneIcon } from 'lucide-react';
 
 import { TextField } from './widgets/TextField';
 import { NumberField } from './widgets/NumberField';
@@ -74,6 +74,26 @@ export function formatCurrency(value: number, currency: string = 'USD'): string
   }
 }
 
+/**
+ * Format currency value in compact form for mobile display.
+ * E.g., $150,000 → $150K, $1,200,000 → $1.2M
+ */
+export function formatCompactCurrency(value: number, currency: string = 'USD'): string {
+  try {
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+      notation: 'compact',
+      maximumFractionDigits: 1,
+    }).format(value);
+    // Strip trailing ".0" before compact suffix for consistent cross-environment output
+    // e.g. "$150.0K" → "$150K" while keeping "$1.5M" intact
+    return formatted.replace(/\.0(?=[KMBT])/, '');
+  } catch {
+    return `${currency} ${value}`;
+  }
+}
+
 /**
  * Format percent value
  * Handles both decimal (0.8 = 80%) and whole number (80 = 80%) inputs.
@@ -84,16 +104,67 @@ export function formatPercent(value: number, precision: number = 0): string {
   return `${displayValue.toFixed(precision)}%`;
 }
 
+/**
+ * Humanize a snake_case or kebab-case string into Title Case.
+ * Used as fallback label when no explicit option.label exists.
+ * 
+ * Examples:
+ *   "in_progress" → "In Progress"
+ *   "high-priority" → "High Priority"
+ *   "active" → "Active"
+ */
+export function humanizeLabel(value: string): string {
+  return value.replace(/[_-]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+/**
+ * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
+ */
+export function formatRelativeDate(value: string | Date): string {
+  if (!value) return '-';
+  const date = typeof value === 'string' ? new Date(value) : value;
+  if (isNaN(date.getTime())) return '-';
+
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const diffMs = startOfDate.getTime() - startOfToday.getTime();
+  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return 'Today';
+  if (diffDays === 1) return 'Tomorrow';
+  if (diffDays === -1) return 'Yesterday';
+  if (diffDays < -1) {
+    const absDays = Math.abs(diffDays);
+    if (absDays <= 7) return `Overdue ${absDays}d`;
+    return formatDate(date);
+  }
+  if (diffDays > 1 && diffDays <= 7) return `In ${diffDays} days`;
+  return formatDate(date);
+}
+
 /**
  * Format date value
  */
-export function formatDate(value: string | Date, _format?: string): string {
+export function formatDate(value: string | Date, style?: string): string {
   if (!value) return '-';
   const date = typeof value === 'string' ? new Date(value) : value;
   if (isNaN(date.getTime())) return '-';
+
+  if (style === 'short') {
+    // Compact format for mobile: "Jan 15, '24"
+    const month = date.toLocaleDateString('en-US', { month: 'short' });
+    const day = date.getDate();
+    const year = String(date.getFullYear()).slice(-2);
+    return `${month} ${day}, '${year}`;
+  }
+
+  if (style === 'relative') {
+    return formatRelativeDate(date);
+  }
   
-  // Default format: MMM DD, YYYY
-  return date.toLocaleDateString('en-US', {
+  // Default format: locale-aware human-readable (e.g. "Jan 15, 2024" or "2024/1/15")
+  return date.toLocaleDateString(undefined, {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
@@ -108,7 +179,7 @@ export function formatDateTime(value: string | Date): string {
   const date = typeof value === 'string' ? new Date(value) : value;
   if (isNaN(date.getTime())) return '-';
   
-  return date.toLocaleDateString('en-US', {
+  return date.toLocaleDateString(undefined, {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
@@ -121,7 +192,7 @@ export function formatDateTime(value: string | Date): string {
  * Text field cell renderer
  */
 export function TextCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  return <span className="truncate">{value || '-'}</span>;
+  return <span className="truncate">{(value != null && value !== '') ? String(value) : '-'}</span>;
 }
 
 /**
@@ -152,6 +223,9 @@ export function CurrencyCellRenderer({ value, field }: CellRendererProps): React
   return <span className="tabular-nums font-medium whitespace-nowrap">{formatted}</span>;
 }
 
+// Fields that store percentage values as whole numbers (0-100) rather than fractions (0-1)
+const WHOLE_PERCENT_FIELD_PATTERN = /progress|completion/;
+
 /**
  * Percent field cell renderer with mini progress bar
  */
@@ -161,9 +235,13 @@ export function PercentCellRenderer({ value, field }: CellRendererProps): React.
   const percentField = field as any;
   const precision = percentField.precision ?? 0;
   const numValue = Number(value);
-  const formatted = formatPercent(numValue, precision);
-  // Normalize to 0-100 range for progress bar
-  const barValue = (numValue > -1 && numValue < 1) ? numValue * 100 : numValue;
+  // Use field name to disambiguate 0-1 fraction vs 0-100 whole number:
+  // Fields like "progress" or "completion" store values as 0-100, not 0-1
+  const isWholePercentField = WHOLE_PERCENT_FIELD_PATTERN.test(field?.name?.toLowerCase() || '');
+  const barValue = isWholePercentField
+    ? numValue
+    : (numValue > -1 && numValue < 1) ? numValue * 100 : numValue;
+  const formatted = isWholePercentField ? `${numValue.toFixed(precision)}%` : formatPercent(numValue, precision);
   const clampedBar = Math.max(0, Math.min(100, barValue));
   
   return (
@@ -185,23 +263,53 @@ export function PercentCellRenderer({ value, field }: CellRendererProps): React.
   );
 }
 
+/** Field names that trigger warning badge when boolean value is false */
+const STATUS_FIELD_NAMES = new Set([
+  'active', 'is_active', 'enabled', 'is_enabled', 'verified', 'is_verified',
+]);
+
 /**
- * Boolean field cell renderer
+ * Boolean field cell renderer (Airtable-style checkbox)
+ * Supports semantic rendering for completion fields (green indicator)
+ * and warning badge for active/enabled fields when false.
  */
-export function BooleanCellRenderer({ value }: CellRendererProps): React.ReactElement {
+export function BooleanCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
+  if (value == null) {
+    return <span className="text-muted-foreground/50 text-xs italic flex items-center justify-center">—</span>;
+  }
+
+  // Semantic rendering for completion fields (green circle indicator)
+  // Only match exact field names to avoid false positives
+  const fieldName = field?.name?.toLowerCase() || '';
+  const isCompletionField = fieldName === 'completed' || fieldName === 'is_completed'
+    || fieldName === 'done' || fieldName === 'is_done';
+
+  if (isCompletionField) {
+    return (
+      <div className="flex items-center justify-center">
+        {value ? (
+          <div className="size-5 rounded-full bg-green-500 flex items-center justify-center" role="img" aria-label="Completed" data-testid="completion-indicator">
+            <Check className="size-3 text-white" />
+          </div>
+        ) : (
+          <div className="size-5 rounded-full border-2 border-muted-foreground/30" role="img" aria-label="Not completed" data-testid="completion-indicator" />
+        )}
+      </div>
+    );
+  }
+
+  // Warning badge for active/enabled fields when false
+  if (STATUS_FIELD_NAMES.has(fieldName) && !value) {
+    return (
+      <Badge variant="destructive" className="text-xs" data-testid="boolean-warning-badge">
+        {field?.label || humanizeLabel(fieldName)} — Off
+      </Badge>
+    );
+  }
+
   return (
-    <div className="flex items-center">
-      {value ? (
-        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 gap-1">
-          <Check className="size-3" />
-          True
-        </Badge>
-      ) : (
-        <Badge variant="outline" className="bg-gray-50 text-gray-500 border-gray-200 gap-1">
-          <X className="size-3" />
-          False
-        </Badge>
-      )}
+    <div className="flex items-center justify-center">
+      <Checkbox checked={!!value} disabled className="pointer-events-none" />
     </div>
   );
 }
@@ -210,19 +318,84 @@ export function BooleanCellRenderer({ value }: CellRendererProps): React.ReactEl
  * Date field cell renderer
  */
 export function DateCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
+  if (!value) return <span className="text-muted-foreground">-</span>;
   const dateField = field as any;
-  const formatted = formatDate(value, dateField.format);
+  const style = dateField.format || 'relative';
+  const formatted = formatDate(value, style);
   
-  return <span className="tabular-nums">{formatted}</span>;
+  // Determine if date is overdue (in the past)
+  const date = typeof value === 'string' ? new Date(value) : value;
+  const isValidDate = date instanceof Date && !isNaN(date.getTime());
+  const startOfToday = new Date();
+  startOfToday.setHours(0, 0, 0, 0);
+  const isOverdue = isValidDate && date < startOfToday;
+  const isoString = isValidDate ? date.toISOString() : String(value);
+  
+  return (
+    <span
+      className={`tabular-nums${isOverdue ? ' text-red-600' : ''}`}
+      title={isoString}
+    >
+      {formatted}
+    </span>
+  );
 }
 
 /**
- * DateTime field cell renderer
+ * DateTime field cell renderer (Airtable-style with date and time visually separated)
  */
 export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  const formatted = formatDateTime(value);
-  
-  return <span className="tabular-nums text-sm">{formatted}</span>;
+  if (!value) return <span className="text-muted-foreground">-</span>;
+  const date = typeof value === 'string' ? new Date(value) : value;
+  if (isNaN(date.getTime())) return <span className="text-muted-foreground">-</span>;
+
+  const datePart = date.toLocaleDateString(undefined, {
+    month: 'numeric',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  const timePart = date.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).toLowerCase();
+
+  return (
+    <span className="tabular-nums text-sm whitespace-nowrap">
+      <span>{datePart}</span>
+      <span className="ml-2 text-muted-foreground">{timePart}</span>
+    </span>
+  );
+}
+
+// Priority semantic color mapping (auto-detect from value text)
+const PRIORITY_COLOR_MAP: Record<string, string> = {
+  critical: 'red',
+  urgent: 'red',
+  high: 'orange',
+  medium: 'yellow',
+  normal: 'blue',
+  low: 'gray',
+  none: 'gray',
+};
+
+// Color to Tailwind class mapping for custom Badge styling
+const BADGE_COLOR_MAP: Record<string, string> = {
+  gray: 'bg-gray-100 text-gray-800 border-gray-300',
+  red: 'bg-red-100 text-red-800 border-red-300',
+  orange: 'bg-orange-100 text-orange-800 border-orange-300',
+  yellow: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+  green: 'bg-green-100 text-green-800 border-green-300',
+  blue: 'bg-blue-100 text-blue-800 border-blue-300',
+  indigo: 'bg-indigo-100 text-indigo-800 border-indigo-300',
+  purple: 'bg-purple-100 text-purple-800 border-purple-300',
+  pink: 'bg-pink-100 text-pink-800 border-pink-300',
+};
+
+function getBadgeColorClasses(color?: string, val?: string): string {
+  const resolvedColor = color
+    || (val ? PRIORITY_COLOR_MAP[String(val).toLowerCase()] : undefined);
+  return BADGE_COLOR_MAP[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
 }
 
 /**
@@ -234,30 +407,14 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
   
   if (!value) return <span>-</span>;
   
-  // Color to Tailwind class mapping for custom Badge styling
-  const getColorClasses = (color?: string) => {
-    const colorMap: Record<string, string> = {
-      gray: 'bg-gray-100 text-gray-800 border-gray-300',
-      red: 'bg-red-100 text-red-800 border-red-300',
-      orange: 'bg-orange-100 text-orange-800 border-orange-300',
-      yellow: 'bg-yellow-100 text-yellow-800 border-yellow-300',
-      green: 'bg-green-100 text-green-800 border-green-300',
-      blue: 'bg-blue-100 text-blue-800 border-blue-300',
-      indigo: 'bg-indigo-100 text-indigo-800 border-indigo-300',
-      purple: 'bg-purple-100 text-purple-800 border-purple-300',
-      pink: 'bg-pink-100 text-pink-800 border-pink-300',
-    };
-    return colorMap[color || 'blue'] || colorMap.blue;
-  };
-  
   // Handle multiple values
   if (Array.isArray(value)) {
     return (
       <div className="flex flex-wrap gap-1">
         {value.map((val, idx) => {
           const option = options.find(opt => opt.value === val);
-          const label = option?.label || val;
-          const colorClasses = getColorClasses(option?.color);
+          const label = option?.label || humanizeLabel(String(val));
+          const colorClasses = getBadgeColorClasses(option?.color, val);
           
           return (
             <Badge
@@ -275,8 +432,8 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
   
   // Handle single value
   const option = options.find(opt => opt.value === value);
-  const label = option?.label || value;
-  const colorClasses = getColorClasses(option?.color);
+  const label = option?.label || humanizeLabel(String(value));
+  const colorClasses = getBadgeColorClasses(option?.color, value);
   
   return (
     <Badge
@@ -294,19 +451,44 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
 export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
   
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard.writeText(String(value)).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }).catch(() => { /* clipboard not available */ });
+  };
+  
   return (
-    <Button
-      variant="link"
-      className="p-0 h-auto font-normal text-blue-600 hover:text-blue-800"
-      asChild
-    >
-      <a
-        href={`mailto:${value}`}
-        onClick={(e) => e.stopPropagation()}
+    <span className="inline-flex items-center gap-1 group/email">
+      <Button
+        variant="link"
+        className="p-0 h-auto font-normal text-blue-600 hover:text-blue-800"
+        asChild
       >
-        {value}
-      </a>
-    </Button>
+        <a
+          href={`mailto:${value}`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {value}
+        </a>
+      </Button>
+      <button
+        type="button"
+        className="opacity-0 group-hover/email:opacity-100 transition-opacity p-0.5 rounded hover:bg-muted"
+        onClick={handleCopy}
+        aria-label="Copy email"
+      >
+        {copied ? (
+          <Check className="h-3 w-3 text-green-600" />
+        ) : (
+          <Copy className="h-3 w-3 text-muted-foreground" />
+        )}
+      </button>
+    </span>
   );
 }
 
@@ -340,14 +522,40 @@ export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElemen
 export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
   
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard.writeText(String(value)).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }).catch(() => { /* clipboard not available */ });
+  };
+  
   return (
-    <a
-      href={`tel:${value}`}
-      className="text-blue-600 hover:text-blue-800"
-      onClick={(e) => e.stopPropagation()}
-    >
-      {value}
-    </a>
+    <span className="inline-flex items-center gap-1 group/phone">
+      <a
+        href={`tel:${value}`}
+        className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <PhoneIcon className="h-3 w-3" />
+        {value}
+      </a>
+      <button
+        type="button"
+        className="opacity-0 group-hover/phone:opacity-100 transition-opacity p-0.5 rounded hover:bg-muted"
+        onClick={handleCopy}
+        aria-label="Copy phone number"
+      >
+        {copied ? (
+          <Check className="h-3 w-3 text-green-600" />
+        ) : (
+          <Copy className="h-3 w-3 text-muted-foreground" />
+        )}
+      </button>
+    </span>
   );
 }
 
@@ -411,14 +619,31 @@ export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElem
 /**
  * Lookup/Master-Detail field cell renderer
  */
-export function LookupCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
-  
+export function LookupCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
+  if (value == null || value === '') return <span>-</span>;
+
+  const options: Array<{ value: unknown; label: string }> =
+    (field as { options?: Array<{ value: unknown; label: string }> }).options || [];
+
+  // Resolve a primitive ID to a label via options if available
+  const resolveLabel = (val: unknown): string => {
+    if (options.length > 0) {
+      const found = options.find((opt) => String(opt.value) === String(val));
+      if (found) return found.label;
+    }
+    return String(val);
+  };
+
   if (Array.isArray(value)) {
     return (
       <div className="flex flex-wrap gap-1">
         {value.map((item, idx) => {
-          const label = item.name || item.label || item._id || String(item);
+          let label: string;
+          if (item != null && typeof item === 'object') {
+            label = item.name || item.label || item._id || String(item);
+          } else {
+            label = resolveLabel(item);
+          }
           return (
             <span
               key={idx}
@@ -437,7 +662,8 @@ export function LookupCellRenderer({ value }: CellRendererProps): React.ReactEle
     return <span className="truncate">{label}</span>;
   }
   
-  return <span className="truncate">{String(value)}</span>;
+  // Primitive value (e.g. raw ID): try to resolve from options
+  return <span className="truncate">{resolveLabel(value)}</span>;
 }
 
 /**
@@ -456,11 +682,24 @@ export function FormulaCellRenderer({ value }: CellRendererProps): React.ReactEl
  */
 export function UserCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
+
+  // Primitive value: just display the ID/username as text
+  if (typeof value !== 'object') {
+    return <span className="truncate">{String(value)}</span>;
+  }
   
   if (Array.isArray(value)) {
     return (
       <div className="flex -space-x-2">
         {value.slice(0, 3).map((user, idx) => {
+          // Primitive user in array
+          if (typeof user !== 'object' || user === null) {
+            return (
+              <span key={idx} className="truncate text-sm">
+                {String(user)}
+              </span>
+            );
+          }
           const name = user.name || user.username || 'User';
           const initials = name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
           
@@ -540,8 +779,9 @@ export function getCellRenderer(fieldType: string): React.FC<CellRendererProps>
     datetime: DateTimeCellRenderer,
     time: TextCellRenderer,
     select: SelectCellRenderer,
-    lookup: SelectCellRenderer, // Default fallback
-    master_detail: SelectCellRenderer, // Default fallback
+    status: SelectCellRenderer,
+    lookup: LookupCellRenderer,
+    master_detail: LookupCellRenderer,
     email: EmailCellRenderer,
     url: UrlCellRenderer,
     phone: PhoneCellRenderer,
@@ -569,6 +809,9 @@ export function getCellRenderer(fieldType: string): React.FC<CellRendererProps>
 registerFieldRenderer('lookup', LookupCellRenderer);
 registerFieldRenderer('master_detail', LookupCellRenderer);
 registerFieldRenderer('select', SelectCellRenderer);
+registerFieldRenderer('status', SelectCellRenderer);
+registerFieldRenderer('user', UserCellRenderer);
+registerFieldRenderer('owner', UserCellRenderer);
 
 
 

package/src/remaining-widgets.test.tsx

@@ -92,6 +92,32 @@ describe('Remaining Field Widgets', () => {
         fireEvent.change(input, { target: { value: '75' } });
         expect(handleChange).toHaveBeenCalledWith(0.75);
     });
+
+    it('slider renders and syncs with input value', () => {
+      render(<PercentField {...baseProps} value={0.5} />);
+      const slider = screen.getByTestId('percent-slider');
+      expect(slider).toBeInTheDocument();
+    });
+
+    it('slider does not fire onChange when disabled', () => {
+      const handleChange = vi.fn();
+      render(<PercentField {...baseProps} onChange={handleChange} value={0.5} disabled={true} />);
+      const slider = screen.getByTestId('percent-slider');
+      expect(slider).toBeInTheDocument();
+      // The slider should be disabled, so no changes should fire
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('slider is not rendered in readonly mode', () => {
+      render(<PercentField {...baseProps} value={0.5} readonly={true} />);
+      expect(screen.queryByTestId('percent-slider')).not.toBeInTheDocument();
+    });
+
+    it('handles null value gracefully for slider', () => {
+      render(<PercentField {...baseProps} value={null as any} />);
+      const slider = screen.getByTestId('percent-slider');
+      expect(slider).toBeInTheDocument();
+    });
   });
 
   // 5. ImageField