@object-ui/components 3.0.3 → 3.1.1

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/filter-builder.tsx

@@ -13,6 +13,7 @@ import { X, Plus, Trash2 } from "lucide-react"
 
 import { cn } from "../lib/utils"
 import { Button } from "../ui/button"
+import { Checkbox } from "../ui/checkbox"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { Input } from "../ui/input"
 
@@ -20,7 +21,7 @@ export interface FilterCondition {
   id: string
   field: string
   operator: string
-  value: string | number | boolean
+  value: string | number | boolean | (string | number | boolean)[]
 }
 
 export interface FilterGroup {
@@ -65,6 +66,23 @@ const numberOperators = ["equals", "notEquals", "greaterThan", "lessThan", "grea
 const booleanOperators = ["equals", "notEquals"]
 const dateOperators = ["equals", "notEquals", "before", "after", "between", "isEmpty", "isNotEmpty"]
 const selectOperators = ["equals", "notEquals", "in", "notIn", "isEmpty", "isNotEmpty"]
+const lookupOperators = ["equals", "notEquals", "in", "notIn", "isEmpty", "isNotEmpty"]
+
+/** Field types that share the same operator/input behavior as number (numeric comparison operators, number input) */
+const numberLikeTypes = ["number", "currency", "percent", "rating"]
+/** Field types that share the same operator/input behavior as date (before/after operators, date/datetime/time input) */
+const dateLikeTypes = ["date", "datetime", "time"]
+/** Field types that use select operators (equals/in/notIn) and render dropdown or checkbox list when options provided */
+const selectLikeTypes = ["select", "status"]
+/** Relational/reference field types that use lookup operators (equals/in/notIn) and render dropdown or checkbox list when options provided */
+const lookupLikeTypes = ["lookup", "master_detail", "user", "owner"]
+
+/** Normalize a filter value into an array for multi-select scenarios */
+function normalizeToArray(value: FilterCondition["value"]): (string | number | boolean)[] {
+  if (Array.isArray(value)) return value
+  if (value !== undefined && value !== null && value !== "") return [value as string | number | boolean]
+  return []
+}
 
 function FilterBuilder({
   fields = [],
@@ -139,19 +157,22 @@ function FilterBuilder({
     const field = fields.find((f) => f.value === fieldValue)
     const fieldType = field?.type || "text"
 
-    switch (fieldType) {
-      case "number":
-        return defaultOperators.filter((op) => numberOperators.includes(op.value))
-      case "boolean":
-        return defaultOperators.filter((op) => booleanOperators.includes(op.value))
-      case "date":
-        return defaultOperators.filter((op) => dateOperators.includes(op.value))
-      case "select":
-        return defaultOperators.filter((op) => selectOperators.includes(op.value))
-      case "text":
-      default:
-        return defaultOperators.filter((op) => textOperators.includes(op.value))
+    if (numberLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => numberOperators.includes(op.value))
+    }
+    if (fieldType === "boolean") {
+      return defaultOperators.filter((op) => booleanOperators.includes(op.value))
+    }
+    if (dateLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => dateOperators.includes(op.value))
+    }
+    if (selectLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => selectOperators.includes(op.value))
+    }
+    if (lookupLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => lookupOperators.includes(op.value))
     }
+    return defaultOperators.filter((op) => textOperators.includes(op.value))
   }
 
   const needsValueInput = (operator: string) => {
@@ -162,21 +183,51 @@ function FilterBuilder({
     const field = fields.find((f) => f.value === fieldValue)
     const fieldType = field?.type || "text"
     
-    switch (fieldType) {
-      case "number":
-        return "number"
-      case "date":
-        return "date"
-      default:
-        return "text"
-    }
+    if (numberLikeTypes.includes(fieldType)) return "number"
+    if (fieldType === "date") return "date"
+    if (fieldType === "datetime") return "datetime-local"
+    if (fieldType === "time") return "time"
+    return "text"
   }
 
   const renderValueInput = (condition: FilterCondition) => {
     const field = fields.find((f) => f.value === condition.field)
+    const isMultiOperator = ["in", "notIn"].includes(condition.operator)
     
-    // For select fields with options
-    if (field?.type === "select" && field.options) {
+    // For select/lookup fields with options and multi-select operator (in/notIn)
+    if (field?.options && isMultiOperator) {
+      const selectedValues = normalizeToArray(condition.value)
+      return (
+        <div className="max-h-40 overflow-y-auto space-y-0.5 border rounded-md p-2">
+          {field.options.map((opt) => {
+            const isChecked = selectedValues.map(String).includes(String(opt.value))
+            return (
+              <label
+                key={opt.value}
+                className={cn(
+                  "flex items-center gap-2 text-sm py-1 px-1.5 rounded cursor-pointer",
+                  isChecked ? "bg-primary/5 text-primary" : "hover:bg-muted",
+                )}
+              >
+                <Checkbox
+                  checked={isChecked}
+                  onCheckedChange={(checked) => {
+                    const next = checked
+                      ? [...selectedValues, opt.value]
+                      : selectedValues.filter((v) => String(v) !== String(opt.value))
+                    updateCondition(condition.id, { value: next })
+                  }}
+                />
+                <span className="truncate">{opt.label}</span>
+              </label>
+            )
+          })}
+        </div>
+      )
+    }
+
+    // For select/lookup fields with options (single select)
+    if (field?.options && (selectLikeTypes.includes(field.type || "") || lookupLikeTypes.includes(field.type || ""))) {
       return (
         <Select
           value={String(condition.value || "")}
@@ -235,9 +286,9 @@ function FilterBuilder({
     const handleValueChange = (newValue: string) => {
       let convertedValue: string | number | boolean = newValue
       
-      if (field?.type === "number" && newValue !== "") {
+      if (numberLikeTypes.includes(field?.type || "") && newValue !== "") {
         convertedValue = parseFloat(newValue) || 0
-      } else if (field?.type === "date") {
+      } else if (dateLikeTypes.includes(field?.type || "")) {
         convertedValue = newValue // Keep as ISO string
       }
       

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';

package/src/custom/mobile-dialog-content.tsx

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+/**
+ * MobileDialogContent
+ *
+ * A mobile-optimized wrapper around the upstream Shadcn DialogContent.
+ * On mobile (< sm breakpoint), the dialog is full-screen with a larger
+ * close-button touch target (≥ 44×44px per WCAG 2.5.5).
+ * On tablet+ (≥ sm), it falls back to the standard centered dialog.
+ *
+ * This lives in `custom/` to avoid modifying the Shadcn-synced `ui/dialog.tsx`.
+ */
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { DialogOverlay, DialogPortal } from '../ui/dialog';
+
+export const MobileDialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        // Mobile-first: full-screen
+        'fixed inset-0 z-50 w-full bg-background p-4 shadow-lg duration-200',
+        'h-[100dvh]',
+        // Desktop (sm+): centered dialog with border + rounded corners
+        'sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%]',
+        'sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6',
+        // Animations
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        className={cn(
+          'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity',
+          'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+          'disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+          // Mobile touch target ≥ 44×44px (WCAG 2.5.5)
+          'min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center',
+        )}
+      >
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+MobileDialogContent.displayName = 'MobileDialogContent';