@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,276 +0,0 @@
-/**
- * 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

@@ -1,306 +0,0 @@
-/**
- * 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

@@ -1,50 +0,0 @@
-/**
- * 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/date-picker.tsx

@@ -1,61 +0,0 @@
-/**
- * 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.
- */
-
-"use client"
-
-import * as React from "react"
-import { CalendarIcon } from "lucide-react"
-import { format } from "date-fns"
-
-import { cn } from "../lib/utils"
-import { Button } from "../ui/button"
-import { Calendar } from "../ui/calendar"
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
-
-export interface DatePickerProps {
-  date?: Date
-  onDateChange?: (date: Date | undefined) => void
-  placeholder?: string
-  className?: string
-  disabled?: boolean
-}
-
-export function DatePicker({
-  date,
-  onDateChange,
-  placeholder = "Pick a date",
-  className,
-  disabled,
-}: DatePickerProps) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground",
-            className
-          )}
-          disabled={disabled}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>{placeholder}</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={onDateChange}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}