@object-ui/components 3.0.3 → 3.1.1

package/src/__tests__/use-config-draft.test.tsx

@@ -0,0 +1,295 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useConfigDraft } from '../hooks/use-config-draft';
+
+describe('useConfigDraft', () => {
+  const source = { name: 'Test', columns: 3, gap: 4, enabled: true };
+
+  it('should initialize draft from source', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    expect(result.current.draft).toEqual(source);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should start dirty in create mode', () => {
+    const { result } = renderHook(() =>
+      useConfigDraft(source, { mode: 'create' }),
+    );
+    expect(result.current.isDirty).toBe(true);
+  });
+
+  it('should start clean in edit mode', () => {
+    const { result } = renderHook(() =>
+      useConfigDraft(source, { mode: 'edit' }),
+    );
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should update a single field and mark dirty', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.updateField('columns', 6);
+    });
+    expect(result.current.draft.columns).toBe(6);
+    expect(result.current.isDirty).toBe(true);
+  });
+
+  it('should preserve other fields when updating one', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.updateField('gap', 8);
+    });
+    expect(result.current.draft.name).toBe('Test');
+    expect(result.current.draft.columns).toBe(3);
+    expect(result.current.draft.gap).toBe(8);
+  });
+
+  it('should discard changes and revert to source', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.updateField('name', 'Modified');
+      result.current.updateField('columns', 12);
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    act(() => {
+      result.current.discard();
+    });
+    expect(result.current.draft).toEqual(source);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should call onUpdate callback when field changes', () => {
+    const onUpdate = vi.fn();
+    const { result } = renderHook(() =>
+      useConfigDraft(source, { onUpdate }),
+    );
+    act(() => {
+      result.current.updateField('gap', 10);
+    });
+    expect(onUpdate).toHaveBeenCalledWith('gap', 10);
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset draft when source changes', () => {
+    const source1 = { name: 'A', value: 1 };
+    const source2 = { name: 'B', value: 2 };
+
+    const { result, rerender } = renderHook(
+      ({ src }) => useConfigDraft(src),
+      { initialProps: { src: source1 } },
+    );
+
+    act(() => {
+      result.current.updateField('name', 'Modified');
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    rerender({ src: source2 });
+    expect(result.current.draft).toEqual(source2);
+    expect(result.current.isDirty).toBe(false);
+  });
+
+  it('should handle setDraft for advanced use cases', () => {
+    const { result } = renderHook(() => useConfigDraft(source));
+    act(() => {
+      result.current.setDraft({ ...source, name: 'Advanced', extra: 42 });
+    });
+    expect(result.current.draft.name).toBe('Advanced');
+    expect(result.current.draft.extra).toBe(42);
+  });
+
+  it('should not share reference with source', () => {
+    const mutableSource = { name: 'Original' };
+    const { result } = renderHook(() => useConfigDraft(mutableSource));
+    expect(result.current.draft).not.toBe(mutableSource);
+    expect(result.current.draft).toEqual(mutableSource);
+  });
+
+  // ── Undo / Redo ──────────────────────────────────────────────
+
+  describe('undo/redo', () => {
+    it('should start with canUndo=false and canRedo=false', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should enable undo after a field update', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      expect(result.current.canUndo).toBe(true);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should undo to previous state', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      expect(result.current.draft.name).toBe('Changed');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('Test');
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(true);
+    });
+
+    it('should redo after undo', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      act(() => {
+        result.current.undo();
+      });
+      act(() => {
+        result.current.redo();
+      });
+      expect(result.current.draft.name).toBe('Changed');
+      expect(result.current.canUndo).toBe(true);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should clear redo stack when a new change is made after undo', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'First');
+      });
+      act(() => {
+        result.current.updateField('name', 'Second');
+      });
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.canRedo).toBe(true);
+
+      act(() => {
+        result.current.updateField('name', 'Third');
+      });
+      expect(result.current.canRedo).toBe(false);
+      expect(result.current.draft.name).toBe('Third');
+    });
+
+    it('should support multiple undo steps', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'A');
+      });
+      act(() => {
+        result.current.updateField('name', 'B');
+      });
+      act(() => {
+        result.current.updateField('name', 'C');
+      });
+      expect(result.current.draft.name).toBe('C');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('B');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('A');
+
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('Test');
+      expect(result.current.canUndo).toBe(false);
+    });
+
+    it('should do nothing when undoing with empty history', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft).toEqual(source);
+    });
+
+    it('should do nothing when redoing with empty future', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.redo();
+      });
+      expect(result.current.draft).toEqual(source);
+    });
+
+    it('should clear history on discard', () => {
+      const { result } = renderHook(() => useConfigDraft(source));
+      act(() => {
+        result.current.updateField('name', 'Changed');
+      });
+      expect(result.current.canUndo).toBe(true);
+
+      act(() => {
+        result.current.discard();
+      });
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should clear history when source changes', () => {
+      const source1 = { name: 'A', value: 1 };
+      const source2 = { name: 'B', value: 2 };
+      const { result, rerender } = renderHook(
+        ({ src }) => useConfigDraft(src),
+        { initialProps: { src: source1 } },
+      );
+      act(() => {
+        result.current.updateField('name', 'Modified');
+      });
+      expect(result.current.canUndo).toBe(true);
+
+      rerender({ src: source2 });
+      expect(result.current.canUndo).toBe(false);
+      expect(result.current.canRedo).toBe(false);
+    });
+
+    it('should respect maxHistory limit', () => {
+      const { result } = renderHook(() =>
+        useConfigDraft(source, { maxHistory: 3 }),
+      );
+      act(() => {
+        result.current.updateField('name', 'A');
+      });
+      act(() => {
+        result.current.updateField('name', 'B');
+      });
+      act(() => {
+        result.current.updateField('name', 'C');
+      });
+      act(() => {
+        result.current.updateField('name', 'D');
+      });
+      // maxHistory=3, so only 3 undo steps (not 4)
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('C');
+      act(() => {
+        result.current.undo();
+      });
+      expect(result.current.draft.name).toBe('B');
+      act(() => {
+        result.current.undo();
+      });
+      // Should stop here — oldest entry was trimmed
+      expect(result.current.canUndo).toBe(false);
+    });
+  });
+});

package/src/custom/config-field-renderer.tsx

@@ -0,0 +1,276 @@
+/**
+ * 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.
+ */
+
+import * as React from 'react';
+import { Settings } from 'lucide-react';
+import { Input } from '../ui/input';
+import { Switch } from '../ui/switch';
+import { Checkbox } from '../ui/checkbox';
+import { Slider } from '../ui/slider';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { Button } from '../ui/button';
+import { cn } from '../lib/utils';
+import { ConfigRow } from './config-row';
+import { FilterBuilder } from './filter-builder';
+import { SortBuilder } from './sort-builder';
+import type { ConfigField } from '../types/config-panel';
+
+export interface ConfigFieldRendererProps {
+  /** Field schema */
+  field: ConfigField;
+  /** Current value */
+  value: any;
+  /** Change handler */
+  onChange: (value: any) => void;
+  /** Full draft for visibility evaluation and custom render */
+  draft: Record<string, any>;
+  /** Object definition for field-picker controls */
+  objectDef?: Record<string, any>;
+}
+
+/**
+ * Renders a single config field based on its ControlType.
+ *
+ * Supports: input, switch, select, checkbox, slider, color, icon-group, custom.
+ * filter/sort/field-picker are rendered as placeholders that consumers can
+ * override with type='custom' when full sub-editor integration is needed.
+ */
+export function ConfigFieldRenderer({
+  field,
+  value,
+  onChange,
+  draft,
+  objectDef: _objectDef,
+}: ConfigFieldRendererProps) {
+  // Visibility gate
+  if (field.visibleWhen && !field.visibleWhen(draft)) {
+    return null;
+  }
+
+  const effectiveDisabled = field.disabled || (field.disabledWhen ? field.disabledWhen(draft) : false);
+  const effectiveValue = value ?? field.defaultValue;
+
+  let content: React.ReactNode = null;
+
+  switch (field.type) {
+    case 'input':
+      content = (
+        <ConfigRow label={field.label}>
+          <Input
+            data-testid={`config-field-${field.key}`}
+            className="h-7 w-32 text-xs"
+            value={effectiveValue ?? ''}
+            placeholder={field.placeholder}
+            disabled={effectiveDisabled}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </ConfigRow>
+      );
+      break;
+
+    case 'switch':
+      content = (
+        <ConfigRow label={field.label}>
+          <Switch
+            data-testid={`config-field-${field.key}`}
+            checked={!!effectiveValue}
+            disabled={effectiveDisabled}
+            onCheckedChange={(checked) => onChange(checked)}
+            className="scale-75"
+          />
+        </ConfigRow>
+      );
+      break;
+
+    case 'checkbox':
+      content = (
+        <ConfigRow label={field.label}>
+          <Checkbox
+            data-testid={`config-field-${field.key}`}
+            checked={!!effectiveValue}
+            disabled={effectiveDisabled}
+            onCheckedChange={(checked) => onChange(checked)}
+          />
+        </ConfigRow>
+      );
+      break;
+
+    case 'select':
+      content = (
+        <ConfigRow label={field.label}>
+          <Select
+            value={String(effectiveValue ?? '')}
+            onValueChange={(val) => onChange(val)}
+            disabled={effectiveDisabled}
+          >
+            <SelectTrigger
+              data-testid={`config-field-${field.key}`}
+              className="h-7 w-32 text-xs"
+            >
+              <SelectValue placeholder={field.placeholder ?? 'Select…'} />
+            </SelectTrigger>
+            <SelectContent>
+              {(field.options ?? []).map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </ConfigRow>
+      );
+      break;
+
+    case 'slider':
+      content = (
+        <ConfigRow label={field.label}>
+          <div className="flex items-center gap-2 w-32">
+            <Slider
+              data-testid={`config-field-${field.key}`}
+              value={[Number(effectiveValue ?? field.min ?? 0)]}
+              min={field.min ?? 0}
+              max={field.max ?? 100}
+              step={field.step ?? 1}
+              disabled={effectiveDisabled}
+              onValueChange={(vals) => onChange(vals[0])}
+              aria-label={field.label}
+            />
+            <span className="text-xs text-muted-foreground w-6 text-right">
+              {effectiveValue ?? field.min ?? 0}
+            </span>
+          </div>
+        </ConfigRow>
+      );
+      break;
+
+    case 'color':
+      content = (
+        <ConfigRow label={field.label}>
+          <input
+            data-testid={`config-field-${field.key}`}
+            type="color"
+            className="h-7 w-10 rounded border cursor-pointer"
+            value={effectiveValue ?? '#000000'}
+            disabled={effectiveDisabled}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </ConfigRow>
+      );
+      break;
+
+    case 'icon-group':
+      content = (
+        <ConfigRow label={field.label}>
+          <div className="flex items-center gap-0.5" data-testid={`config-field-${field.key}`}>
+            {(field.options ?? []).map((opt) => (
+              <Button
+                key={opt.value}
+                type="button"
+                size="sm"
+                variant={effectiveValue === opt.value ? 'default' : 'ghost'}
+                className={cn('h-7 w-7 p-0', effectiveValue === opt.value && 'ring-1 ring-primary')}
+                disabled={effectiveDisabled}
+                onClick={() => onChange(opt.value)}
+                title={opt.label}
+              >
+                {opt.icon ?? <span className="text-[10px]">{opt.label.charAt(0)}</span>}
+              </Button>
+            ))}
+          </div>
+        </ConfigRow>
+      );
+      break;
+
+    case 'field-picker':
+      content = (
+        <ConfigRow
+          label={field.label}
+          value={effectiveValue ?? field.placeholder ?? 'Select field…'}
+          onClick={effectiveDisabled ? undefined : () => {
+            /* open field picker - consumers should use type='custom' for full integration */
+          }}
+        />
+      );
+      break;
+
+    case 'filter':
+      content = (
+        <div data-testid={`config-field-${field.key}`}>
+          <ConfigRow label={field.label} />
+          <FilterBuilder
+            fields={field.fields}
+            value={effectiveValue}
+            onChange={onChange}
+            className="px-1 pb-2"
+          />
+        </div>
+      );
+      break;
+
+    case 'sort':
+      content = (
+        <div data-testid={`config-field-${field.key}`}>
+          <ConfigRow label={field.label} />
+          <SortBuilder
+            fields={field.fields}
+            value={effectiveValue}
+            onChange={onChange}
+            className="px-1 pb-2"
+          />
+        </div>
+      );
+      break;
+
+    case 'custom':
+      if (field.render) {
+        content = <>{field.render(effectiveValue, onChange, draft)}</>;
+      }
+      break;
+
+    case 'summary':
+      content = (
+        <ConfigRow
+          label={field.label}
+          onClick={field.onSummaryClick}
+        >
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs text-foreground truncate max-w-[120px]" data-testid={`config-field-${field.key}-text`}>
+              {field.summaryText ?? effectiveValue ?? ''}
+            </span>
+            {field.onSummaryClick && (
+              <Settings className="h-3.5 w-3.5 text-muted-foreground shrink-0" aria-hidden="true" data-testid={`config-field-${field.key}-gear`} />
+            )}
+          </div>
+        </ConfigRow>
+      );
+      break;
+
+    default:
+      break;
+  }
+
+  if (!content) return null;
+
+  // Wrap with helpText when provided
+  if (field.helpText) {
+    return (
+      <div>
+        {content}
+        <p className="text-[10px] text-muted-foreground mt-0.5 mb-1">{field.helpText}</p>
+      </div>
+    );
+  }
+
+  return <>{content}</>;
+}