@object-ui/components 3.0.2 → 3.1.0

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}</>;
+}

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

@@ -0,0 +1,306 @@
+/**
+ * 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 { useState } from 'react';
+import { X, Save, RotateCcw, ChevronRight, Undo2, Redo2 } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Button } from '../ui/button';
+import { Separator } from '../ui/separator';
+import { SectionHeader } from './section-header';
+import { ConfigFieldRenderer } from './config-field-renderer';
+import type { ConfigPanelSchema } from '../types/config-panel';
+
+export interface ConfigPanelRendererProps {
+  /** Whether the panel is visible */
+  open: boolean;
+  /** Close callback */
+  onClose: () => void;
+  /** Schema describing the panel structure */
+  schema: ConfigPanelSchema;
+  /** Current draft values */
+  draft: Record<string, any>;
+  /** Whether the draft has uncommitted changes */
+  isDirty: boolean;
+  /** Called when any field changes */
+  onFieldChange: (key: string, value: any) => void;
+  /** Persist current draft */
+  onSave: () => void;
+  /** Revert draft to source */
+  onDiscard: () => void;
+  /** Extra content rendered in the header row */
+  headerExtra?: React.ReactNode;
+  /** Object definition for field pickers */
+  objectDef?: Record<string, any>;
+  /** Additional CSS class name */
+  className?: string;
+  /** Label for save button (default: "Save") */
+  saveLabel?: string;
+  /** Label for discard button (default: "Discard") */
+  discardLabel?: string;
+  /** Ref for the panel root element */
+  panelRef?: React.Ref<HTMLDivElement>;
+  /** ARIA role for the panel (e.g. "complementary") */
+  role?: string;
+  /** ARIA label for the panel */
+  ariaLabel?: string;
+  /** tabIndex for the panel root element */
+  tabIndex?: number;
+  /** Override data-testid for the panel root (default: "config-panel") */
+  testId?: string;
+  /** Title for the close button */
+  closeTitle?: string;
+  /** Override data-testid for the footer (default: "config-panel-footer") */
+  footerTestId?: string;
+  /** Override data-testid for the save button (default: "config-panel-save") */
+  saveTestId?: string;
+  /** Override data-testid for the discard button (default: "config-panel-discard") */
+  discardTestId?: string;
+  /** Externally-controlled set of section keys that should be expanded (overrides local collapse state) */
+  expandedSections?: string[];
+  /** Undo callback */
+  onUndo?: () => void;
+  /** Redo callback */
+  onRedo?: () => void;
+  /** Whether undo is available */
+  canUndo?: boolean;
+  /** Whether redo is available */
+  canRedo?: boolean;
+  /** Label for undo button */
+  undoLabel?: string;
+  /** Label for redo button */
+  redoLabel?: string;
+}
+
+/**
+ * Schema-driven configuration panel renderer.
+ *
+ * Takes a `ConfigPanelSchema` and automatically renders the full panel:
+ * - Header with breadcrumb & close button
+ * - Scrollable body with collapsible sections
+ * - Sticky footer with Save / Discard when dirty
+ *
+ * Each concrete panel (Dashboard, Form, Page…) only needs to provide
+ * a schema and wire up `useConfigDraft`.
+ */
+export function ConfigPanelRenderer({
+  open,
+  onClose,
+  schema,
+  draft,
+  isDirty,
+  onFieldChange,
+  onSave,
+  onDiscard,
+  headerExtra,
+  objectDef,
+  className,
+  saveLabel = 'Save',
+  discardLabel = 'Discard',
+  panelRef,
+  role,
+  ariaLabel,
+  tabIndex,
+  testId,
+  closeTitle,
+  footerTestId,
+  saveTestId,
+  discardTestId,
+  expandedSections,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  undoLabel = 'Undo',
+  redoLabel = 'Redo',
+}: ConfigPanelRendererProps) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  if (!open) return null;
+
+  const toggleCollapse = (key: string, defaultCollapsed?: boolean) => {
+    setCollapsed((prev) => ({
+      ...prev,
+      [key]: !(prev[key] ?? defaultCollapsed ?? false),
+    }));
+  };
+
+  // Resolve effective collapsed state: expandedSections prop overrides local state
+  const isCollapsed = (sectionKey: string, defaultCollapsed?: boolean): boolean => {
+    if (expandedSections && expandedSections.includes(sectionKey)) {
+      return false;
+    }
+    return collapsed[sectionKey] ?? defaultCollapsed ?? false;
+  };
+
+  return (
+    <div
+      ref={panelRef}
+      data-testid={testId ?? 'config-panel'}
+      role={role}
+      aria-label={ariaLabel}
+      tabIndex={tabIndex}
+      className={cn(
+        'absolute inset-y-0 right-0 w-full sm:w-[var(--config-panel-width,280px)] sm:relative border-l bg-background flex flex-col shrink-0 z-20',
+        className,
+      )}
+    >
+      {/* ── Header ─────────────────────────────────────────── */}
+      <div className="px-4 py-3 border-b flex items-center justify-between shrink-0">
+        <nav aria-label="breadcrumb">
+          <ol className="flex items-center gap-1 text-xs text-muted-foreground">
+            {schema.breadcrumb.map((segment, idx) => (
+              <React.Fragment key={idx}>
+                {idx > 0 && <ChevronRight className="h-3 w-3" />}
+                <li
+                  className={cn(
+                    idx === schema.breadcrumb.length - 1 && 'text-foreground font-medium',
+                  )}
+                >
+                  {segment}
+                </li>
+              </React.Fragment>
+            ))}
+          </ol>
+        </nav>
+        <div className="flex items-center gap-1">
+          {onUndo && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onUndo}
+              disabled={!canUndo}
+              className="h-7 w-7 p-0"
+              data-testid="config-panel-undo"
+              title={undoLabel}
+            >
+              <Undo2 className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          {onRedo && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onRedo}
+              disabled={!canRedo}
+              className="h-7 w-7 p-0"
+              data-testid="config-panel-redo"
+              title={redoLabel}
+            >
+              <Redo2 className="h-3.5 w-3.5" />
+            </Button>
+          )}
+          {headerExtra}
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onClose}
+            className="h-7 w-7 p-0"
+            data-testid="config-panel-close"
+            title={closeTitle}
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Scrollable sections ────────────────────────────── */}
+      <div className="flex-1 overflow-auto px-4 pb-4">
+        {schema.sections.map((section, sectionIdx) => {
+          if (section.visibleWhen && !section.visibleWhen(draft)) return null;
+
+          const sectionCollapsed = isCollapsed(section.key, section.defaultCollapsed);
+
+          return (
+            <div key={section.key} data-testid={`config-section-${section.key}`}>
+              {sectionIdx > 0 && <Separator className="my-3" />}
+              <SectionHeader
+                title={section.title}
+                icon={section.icon}
+                collapsible={section.collapsible}
+                collapsed={sectionCollapsed}
+                onToggle={() => toggleCollapse(section.key, section.defaultCollapsed)}
+                testId={`section-header-${section.key}`}
+              />
+              {section.hint && (
+                <p className="text-[10px] text-muted-foreground mb-1">
+                  {section.hint}
+                </p>
+              )}
+              {!sectionCollapsed && (
+                <div className="space-y-1">
+                  {section.fields.map((field) => (
+                    <ConfigFieldRenderer
+                      key={field.key}
+                      field={field}
+                      value={draft[field.key]}
+                      onChange={(v) => onFieldChange(field.key, v)}
+                      draft={draft}
+                      objectDef={objectDef}
+                    />
+                  ))}
+                  {section.subsections?.map((sub) => {
+                    if (sub.visibleWhen && !sub.visibleWhen(draft)) return null;
+                    const subCollapsed = isCollapsed(sub.key, sub.defaultCollapsed);
+                    return (
+                      <div key={sub.key} data-testid={`config-subsection-${sub.key}`} className="ml-1" role="group" aria-label={sub.title}>
+                        <SectionHeader
+                          title={sub.title}
+                          icon={sub.icon}
+                          collapsible={sub.collapsible}
+                          collapsed={subCollapsed}
+                          onToggle={() => toggleCollapse(sub.key, sub.defaultCollapsed)}
+                          testId={`section-header-${sub.key}`}
+                          className="pt-2 pb-1"
+                        />
+                        {!subCollapsed && (
+                          <div className="space-y-1">
+                            {sub.fields.map((field) => (
+                              <ConfigFieldRenderer
+                                key={field.key}
+                                field={field}
+                                value={draft[field.key]}
+                                onChange={(v) => onFieldChange(field.key, v)}
+                                draft={draft}
+                                objectDef={objectDef}
+                              />
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* ── Footer ─────────────────────────────────────────── */}
+      {isDirty && (
+        <div className="px-4 py-2 border-t flex gap-2 shrink-0" data-testid={footerTestId ?? 'config-panel-footer'}>
+          <Button size="sm" onClick={onSave} data-testid={saveTestId ?? 'config-panel-save'}>
+            <Save className="h-3.5 w-3.5 mr-1" />
+            {saveLabel}
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onDiscard}
+            data-testid={discardTestId ?? 'config-panel-discard'}
+          >
+            <RotateCcw className="h-3.5 w-3.5 mr-1" />
+            {discardLabel}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/custom/config-row.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { cn } from "../lib/utils"
+
+export interface ConfigRowProps {
+  /** Left-side label text */
+  label: string
+  /** Right-side display value (used when children are not provided) */
+  value?: string
+  /** Makes row clickable with hover effect */
+  onClick?: () => void
+  /** Custom content replacing value */
+  children?: React.ReactNode
+  /** Additional CSS class name */
+  className?: string
+}
+
+/**
+ * A single labeled row in a configuration panel.
+ *
+ * Renders as a `<button>` when `onClick` is provided, otherwise as a `<div>`.
+ * Shows label on the left and either custom children or a text value on the right.
+ */
+function ConfigRow({ label, value, onClick, children, className }: ConfigRowProps) {
+  const Wrapper = onClick ? 'button' : 'div'
+  return (
+    <Wrapper
+      className={cn(
+        'flex items-center justify-between py-1.5 min-h-[32px] w-full text-left',
+        onClick && 'cursor-pointer hover:bg-accent/50 rounded-sm -mx-1 px-1',
+        className,
+      )}
+      onClick={onClick}
+      type={onClick ? 'button' : undefined}
+    >
+      <span className="text-xs text-muted-foreground shrink-0 max-w-[45%] truncate" title={label}>{label}</span>
+      {children || (
+        <span className="text-xs text-foreground truncate ml-4 text-right max-w-[55%]" title={value}>{value}</span>
+      )}
+    </Wrapper>
+  )
+}
+
+export { ConfigRow }

package/src/custom/index.ts

@@ -1,5 +1,8 @@
 export * from './button-group';
 export * from './combobox';
+export * from './config-row';
+export * from './config-field-renderer';
+export * from './config-panel-renderer';
 export * from './date-picker';
 export * from './empty';
 export * from './field';
@@ -9,8 +12,10 @@ export * from './item';
 export * from './kbd';
 export * from './native-select';
 export * from './navigation-overlay';
+export * from './section-header';
 export * from './spinner';
 export * from './sort-builder';
 export * from './action-param-dialog';
 export * from './view-skeleton';
 export * from './view-states';
+export * from './mobile-dialog-content';