@object-ui/plugin-grid 0.5.0 → 3.0.0

package/src/InlineEditing.tsx

@@ -0,0 +1,235 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * InlineEditing Component
+ *
+ * A reusable inline cell editor for grid views. Provides save/cancel
+ * controls and validation feedback. Designed to be integrated into
+ * ObjectGrid or VirtualGrid rows.
+ *
+ * Features:
+ * - Click-to-edit with automatic focus
+ * - Save (Enter / ✓) and Cancel (Escape / ✗) actions
+ * - Validation feedback with error messages
+ * - Keyboard navigation (Enter to save, Escape to cancel)
+ */
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '@object-ui/components';
+import { Check, X } from 'lucide-react';
+
+export interface InlineEditingProps {
+  /** Current cell value */
+  value: any;
+  /** Called with new value on save. Return a string to signal validation error. */
+  onSave: (newValue: any) => void | string | Promise<void | string>;
+  /** Called when editing is cancelled */
+  onCancel?: () => void;
+  /** Validate before saving. Return error message or undefined. */
+  validate?: (value: any) => string | undefined;
+  /** Field type hint used to determine input type */
+  type?: 'text' | 'number' | 'email';
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the cell is in editing mode initially */
+  editing?: boolean;
+  /** Additional class names */
+  className?: string;
+  /** Whether this field is disabled */
+  disabled?: boolean;
+}
+
+export function InlineEditing({
+  value,
+  onSave,
+  onCancel,
+  validate,
+  type = 'text',
+  placeholder,
+  editing: editingProp = false,
+  className,
+  disabled = false,
+}: InlineEditingProps) {
+  const [isEditing, setIsEditing] = useState(editingProp);
+  const [editValue, setEditValue] = useState<string>(String(value ?? ''));
+  const [error, setError] = useState<string | undefined>();
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync with prop changes
+  useEffect(() => {
+    if (!isEditing) {
+      setEditValue(String(value ?? ''));
+    }
+  }, [value, isEditing]);
+
+  // Auto-focus when entering edit mode
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const startEditing = useCallback(() => {
+    if (disabled) return;
+    setIsEditing(true);
+    setEditValue(String(value ?? ''));
+    setError(undefined);
+  }, [disabled, value]);
+
+  const cancel = useCallback(() => {
+    setIsEditing(false);
+    setEditValue(String(value ?? ''));
+    setError(undefined);
+    onCancel?.();
+  }, [value, onCancel]);
+
+  const save = useCallback(async () => {
+    // Run validation
+    if (validate) {
+      const validationError = validate(editValue);
+      if (validationError) {
+        setError(validationError);
+        return;
+      }
+    }
+
+    // Coerce number values
+    const coercedValue = type === 'number' ? Number(editValue) : editValue;
+
+    setSaving(true);
+    try {
+      const result = await onSave(coercedValue);
+      if (typeof result === 'string') {
+        setError(result);
+        setSaving(false);
+        return;
+      }
+      setIsEditing(false);
+      setError(undefined);
+    } catch (err: any) {
+      setError(err?.message || 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  }, [editValue, validate, type, onSave]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        save();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        cancel();
+      }
+    },
+    [save, cancel],
+  );
+
+  // Display mode
+  if (!isEditing) {
+    return (
+      <div
+        data-slot="inline-editing"
+        className={cn(
+          'group relative cursor-pointer rounded px-2 py-1 hover:bg-muted/50 transition-colors min-h-[1.75rem] flex items-center',
+          disabled && 'cursor-default opacity-60',
+          className,
+        )}
+        onClick={startEditing}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            startEditing();
+          }
+        }}
+        aria-label={`Edit value: ${String(value ?? '')}`}
+      >
+        <span data-slot="inline-editing-display" className="truncate text-sm">
+          {value != null && String(value) !== '' ? String(value) : (
+            <span className="text-muted-foreground italic">{placeholder || 'Click to edit'}</span>
+          )}
+        </span>
+      </div>
+    );
+  }
+
+  // Edit mode
+  return (
+    <div
+      data-slot="inline-editing"
+      className={cn('relative flex items-center gap-1', className)}
+    >
+      <div className="flex-1 relative">
+        <input
+          ref={inputRef}
+          data-slot="inline-editing-input"
+          type={type}
+          value={editValue}
+          onChange={(e) => {
+            setEditValue(e.target.value);
+            if (error) setError(undefined);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={saving}
+          aria-invalid={!!error}
+          aria-describedby={error ? 'inline-editing-error' : undefined}
+          className={cn(
+            'w-full rounded border px-2 py-1 text-sm outline-none transition-colors',
+            'focus:ring-2 focus:ring-ring focus:border-input',
+            error
+              ? 'border-destructive focus:ring-destructive/30'
+              : 'border-input',
+            saving && 'opacity-50',
+          )}
+        />
+        {error && (
+          <p
+            id="inline-editing-error"
+            data-slot="inline-editing-error"
+            className="absolute left-0 top-full mt-0.5 text-xs text-destructive"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      <button
+        data-slot="inline-editing-save"
+        type="button"
+        onClick={save}
+        disabled={saving}
+        aria-label="Save"
+        className={cn(
+          'inline-flex h-6 w-6 items-center justify-center rounded text-primary hover:bg-primary/10 transition-colors',
+          saving && 'opacity-50 cursor-not-allowed',
+        )}
+      >
+        <Check className="h-3.5 w-3.5" />
+      </button>
+      <button
+        data-slot="inline-editing-cancel"
+        type="button"
+        onClick={cancel}
+        disabled={saving}
+        aria-label="Cancel"
+        className="inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}

package/src/ListColumnExtensions.test.tsx

@@ -0,0 +1,374 @@
+/**
+ * ListColumn Extensions Tests
+ *
+ * Tests for link, action, hidden, type, wrap, and resizable properties
+ * on ListColumn when rendered through ObjectGrid → data-table.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { ObjectGrid } from './ObjectGrid';
+import { registerAllFields } from '@object-ui/fields';
+import { ActionProvider } from '@object-ui/react';
+import type { ListColumn } from '@object-ui/types';
+
+registerAllFields();
+
+// --- Mock Data ---
+const mockData = [
+  { _id: '1', name: 'Alice', email: 'alice@test.com', amount: 1500, status: 'active' },
+  { _id: '2', name: 'Bob', email: 'bob@test.com', amount: 2300, status: 'inactive' },
+  { _id: '3', name: 'Charlie', email: 'charlie@test.com', amount: 800, status: 'active' },
+];
+
+// --- Helper: Render ObjectGrid with static data and ListColumn[] ---
+function renderGrid(columns: ListColumn[], opts?: { onNavigate?: any; navigation?: any }) {
+  const schema: any = {
+    type: 'object-grid' as const,
+    objectName: 'test_object',
+    columns,
+    data: { provider: 'value', items: mockData },
+    navigation: opts?.navigation,
+    onNavigate: opts?.onNavigate,
+  };
+
+  return render(
+    <ActionProvider>
+      <ObjectGrid schema={schema} />
+    </ActionProvider>
+  );
+}
+
+// =========================================================================
+// 1. Hidden columns
+// =========================================================================
+describe('ListColumn: hidden', () => {
+  it('should not render hidden columns', async () => {
+    renderGrid([
+      { field: 'name', label: 'Name' },
+      { field: 'email', label: 'Email', hidden: true },
+      { field: 'amount', label: 'Amount' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Amount')).toBeInTheDocument();
+    // Email column should NOT be rendered
+    expect(screen.queryByText('Email')).not.toBeInTheDocument();
+    expect(screen.queryByText('alice@test.com')).not.toBeInTheDocument();
+  });
+
+  it('should render non-hidden columns normally', async () => {
+    renderGrid([
+      { field: 'name', label: 'Name', hidden: false },
+      { field: 'email', label: 'Email' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Email')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 2. Link columns
+// =========================================================================
+describe('ListColumn: link', () => {
+  it('should render link columns as clickable text', async () => {
+    renderGrid([
+      { field: 'name', label: 'Name', link: true },
+      { field: 'email', label: 'Email' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    // The name cells should be rendered as buttons (clickable links)
+    const aliceLink = screen.getByRole('button', { name: 'Alice' });
+    expect(aliceLink).toBeInTheDocument();
+    expect(aliceLink).toHaveClass('text-primary');
+
+    const bobLink = screen.getByRole('button', { name: 'Bob' });
+    expect(bobLink).toBeInTheDocument();
+  });
+
+  it('should trigger navigation when link column is clicked', async () => {
+    const onNavigate = vi.fn();
+
+    renderGrid(
+      [
+        { field: 'name', label: 'Name', link: true },
+        { field: 'email', label: 'Email' },
+      ],
+      {
+        navigation: { mode: 'page' },
+        onNavigate,
+      }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Alice' })).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Alice' }));
+
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+    expect(onNavigate).toHaveBeenCalledWith('1', 'view');
+  });
+
+  it('should not render non-link columns as buttons', async () => {
+    renderGrid([
+      { field: 'name', label: 'Name', link: true },
+      { field: 'email', label: 'Email' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    // Email values should NOT be buttons
+    expect(screen.queryByRole('button', { name: 'alice@test.com' })).not.toBeInTheDocument();
+    // But the text should still render
+    expect(screen.getByText('alice@test.com')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 3. Action columns
+// =========================================================================
+describe('ListColumn: action', () => {
+  it('should render action columns as clickable text', async () => {
+    renderGrid([
+      { field: 'name', label: 'Name' },
+      { field: 'status', label: 'Status', action: 'toggleStatus' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    // Status cells should be buttons
+    const activeBtn = screen.getAllByRole('button', { name: 'active' });
+    expect(activeBtn.length).toBeGreaterThanOrEqual(1);
+    expect(activeBtn[0]).toHaveClass('text-primary');
+  });
+
+  it('should execute action when action column is clicked', async () => {
+    const actionHandler = vi.fn().mockResolvedValue({ success: true });
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'test_object',
+      columns: [
+        { field: 'name', label: 'Name' },
+        { field: 'status', label: 'Status', action: 'toggleStatus' },
+      ],
+      data: { provider: 'value', items: mockData },
+    };
+
+    render(
+      <ActionProvider handlers={{ toggleStatus: actionHandler }}>
+        <ObjectGrid schema={schema} />
+      </ActionProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    const statusBtns = screen.getAllByRole('button', { name: 'active' });
+    fireEvent.click(statusBtns[0]);
+
+    await waitFor(() => {
+      expect(actionHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(actionHandler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'toggleStatus',
+        params: expect.objectContaining({
+          field: 'status',
+          value: 'active',
+          record: expect.objectContaining({ _id: '1', name: 'Alice' }),
+        }),
+      }),
+      expect.any(Object) // ActionCtx
+    );
+  });
+});
+
+// =========================================================================
+// 4. Type-based cell rendering
+// =========================================================================
+describe('ListColumn: type', () => {
+  it('should use getCellRenderer for typed columns', async () => {
+    renderGrid([
+      { field: 'name', label: 'Name' },
+      { field: 'email', label: 'Email', type: 'email' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    // Email type should render as a mailto link
+    const emailLink = screen.getByText('alice@test.com');
+    expect(emailLink).toBeInTheDocument();
+    // The email cell renderer wraps in an anchor
+    expect(emailLink.closest('a')).toHaveAttribute('href', 'mailto:alice@test.com');
+  });
+
+  it('should render boolean type columns correctly', async () => {
+    const boolData = [
+      { _id: '1', name: 'Alice', active: true },
+      { _id: '2', name: 'Bob', active: false },
+    ];
+
+    const schema: any = {
+      type: 'object-grid' as const,
+      objectName: 'test_object',
+      columns: [
+        { field: 'name', label: 'Name' },
+        { field: 'active', label: 'Active', type: 'boolean' },
+      ],
+      data: { provider: 'value', items: boolData },
+    };
+
+    render(
+      <ActionProvider>
+        <ObjectGrid schema={schema} />
+      </ActionProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+    });
+
+    // Boolean renderer should show check/x icons or text representation
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 5. Combined: link + type
+// =========================================================================
+describe('ListColumn: link + type', () => {
+  it('should render typed content inside a clickable link', async () => {
+    const onNavigate = vi.fn();
+
+    renderGrid(
+      [
+        { field: 'email', label: 'Email', link: true, type: 'email' },
+        { field: 'name', label: 'Name' },
+      ],
+      {
+        navigation: { mode: 'page' },
+        onNavigate,
+      }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Email')).toBeInTheDocument();
+    });
+
+    // Should be a button wrapping the email content
+    const emailBtn = screen.getByRole('button', { name: /alice@test.com/ });
+    expect(emailBtn).toBeInTheDocument();
+    expect(emailBtn).toHaveClass('text-primary');
+
+    fireEvent.click(emailBtn);
+    expect(onNavigate).toHaveBeenCalledWith('1', 'view');
+  });
+});
+
+// =========================================================================
+// 6. Column properties passthrough
+// =========================================================================
+describe('ListColumn: property passthrough', () => {
+  it('should auto-generate header from field name if no label', async () => {
+    renderGrid([
+      { field: 'first_name' },
+    ]);
+
+    await waitFor(() => {
+      // Should convert snake_case to title case
+      expect(screen.getByText('First name')).toBeInTheDocument();
+    });
+  });
+
+  it('should use label when provided', async () => {
+    renderGrid([
+      { field: 'name', label: 'Full Name' },
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Full Name')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle all columns hidden gracefully', async () => {
+    const { container } = renderGrid([
+      { field: 'name', hidden: true },
+      { field: 'email', hidden: true },
+    ]);
+
+    // Should render without error, just no columns
+    await waitFor(() => {
+      expect(container).toBeInTheDocument();
+    });
+  });
+});
+
+// =========================================================================
+// 7. Type definitions alignment
+// =========================================================================
+describe('ListColumn type definitions', () => {
+  it('should accept link property on ListColumn', () => {
+    const col: ListColumn = {
+      field: 'name',
+      link: true,
+    };
+    expect(col.link).toBe(true);
+  });
+
+  it('should accept action property on ListColumn', () => {
+    const col: ListColumn = {
+      field: 'status',
+      action: 'toggleStatus',
+    };
+    expect(col.action).toBe('toggleStatus');
+  });
+
+  it('should accept both link and action together', () => {
+    const col: ListColumn = {
+      field: 'name',
+      link: true,
+      action: 'viewDetail',
+    };
+    expect(col.link).toBe(true);
+    expect(col.action).toBe('viewDetail');
+  });
+
+  it('should accept all ListColumn properties', () => {
+    const col: ListColumn = {
+      field: 'amount',
+      label: 'Total Amount',
+      width: 150,
+      align: 'right',
+      hidden: false,
+      sortable: true,
+      resizable: true,
+      wrap: false,
+      type: 'currency',
+      link: false,
+      action: 'editAmount',
+    };
+    expect(col.field).toBe('amount');
+    expect(col.type).toBe('currency');
+    expect(col.link).toBe(false);
+    expect(col.action).toBe('editAmount');
+  });
+});

package/src/ListColumnSchema.test.ts

@@ -0,0 +1,88 @@
+/**
+ * ListColumn Zod Schema Tests
+ *
+ * Verifies that the ListColumnSchema Zod definition includes link and action properties.
+ */
+import { describe, it, expect } from 'vitest';
+import { ListColumnSchema } from '@object-ui/types/zod';
+
+describe('ListColumnSchema (Zod)', () => {
+  it('should accept link property', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      link: true,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.link).toBe(true);
+    }
+  });
+
+  it('should accept action property', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'status',
+      action: 'toggleStatus',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.action).toBe('toggleStatus');
+    }
+  });
+
+  it('should accept all properties together', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      label: 'Full Name',
+      width: 200,
+      align: 'left',
+      hidden: false,
+      sortable: true,
+      resizable: true,
+      wrap: false,
+      type: 'text',
+      link: true,
+      action: 'viewDetail',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.link).toBe(true);
+      expect(result.data.action).toBe('viewDetail');
+    }
+  });
+
+  it('should make link optional', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.link).toBeUndefined();
+    }
+  });
+
+  it('should make action optional', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.action).toBeUndefined();
+    }
+  });
+
+  it('should reject non-boolean link', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      link: 'yes',
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('should reject non-string action', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      action: 42,
+    });
+    expect(result.success).toBe(false);
+  });
+});