@object-ui/components 0.5.0 → 3.0.0

package/src/custom/action-param-dialog.tsx

@@ -0,0 +1,264 @@
+/**
+ * ObjectUI — Action Param Dialog
+ * 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.
+ *
+ * Renders a dialog to collect ActionParam values before action execution.
+ * Used by the ActionRunner when an action defines params to collect.
+ */
+
+import React, { useState, useCallback } from 'react';
+import type { ActionParamDef } from '@object-ui/core';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import { Checkbox } from '../ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+
+export interface ActionParamDialogProps {
+  /** The param definitions to render */
+  params: ActionParamDef[];
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Called when the user submits the form */
+  onSubmit: (values: Record<string, any>) => void;
+  /** Called when the user cancels */
+  onCancel: () => void;
+  /** Dialog title */
+  title?: string;
+  /** Dialog description */
+  description?: string;
+}
+
+/**
+ * ActionParamDialog renders a dialog with form fields for each ActionParam.
+ * It collects user input and returns the values on submit.
+ */
+export const ActionParamDialog: React.FC<ActionParamDialogProps> = ({
+  params,
+  open,
+  onSubmit,
+  onCancel,
+  title = 'Action Parameters',
+  description = 'Please provide the required parameters.',
+}) => {
+  // Initialize values from defaultValues
+  const [values, setValues] = useState<Record<string, any>>(() => {
+    const initial: Record<string, any> = {};
+    params.forEach((p) => {
+      if (p.defaultValue !== undefined) {
+        initial[p.name] = p.defaultValue;
+      } else {
+        initial[p.name] = p.type === 'boolean' ? false : '';
+      }
+    });
+    return initial;
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const handleChange = useCallback((name: string, value: any) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    // Clear error on change
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    // Validate required fields
+    const newErrors: Record<string, string> = {};
+    params.forEach((p) => {
+      if (p.required) {
+        const val = values[p.name];
+        if (val === undefined || val === null || val === '') {
+          newErrors[p.name] = `${p.label} is required`;
+        }
+      }
+    });
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    onSubmit(values);
+  }, [params, values, onSubmit]);
+
+  const renderField = (param: ActionParamDef) => {
+    const value = values[param.name];
+    const error = errors[param.name];
+
+    switch (param.type) {
+      case 'textarea':
+        return (
+          <div key={param.name} className="space-y-2">
+            <Label htmlFor={param.name}>
+              {param.label}
+              {param.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Textarea
+              id={param.name}
+              value={value || ''}
+              onChange={(e) => handleChange(param.name, e.target.value)}
+              placeholder={param.placeholder}
+            />
+            {param.helpText && (
+              <p className="text-sm text-muted-foreground">{param.helpText}</p>
+            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+        );
+
+      case 'number':
+        return (
+          <div key={param.name} className="space-y-2">
+            <Label htmlFor={param.name}>
+              {param.label}
+              {param.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              id={param.name}
+              type="number"
+              value={value ?? ''}
+              onChange={(e) => handleChange(param.name, Number.isNaN(e.target.valueAsNumber) ? '' : e.target.valueAsNumber)}
+              placeholder={param.placeholder}
+            />
+            {param.helpText && (
+              <p className="text-sm text-muted-foreground">{param.helpText}</p>
+            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+        );
+
+      case 'boolean':
+        return (
+          <div key={param.name} className="flex items-center space-x-2">
+            <Checkbox
+              id={param.name}
+              checked={!!value}
+              onCheckedChange={(checked) => handleChange(param.name, !!checked)}
+            />
+            <Label htmlFor={param.name}>{param.label}</Label>
+            {param.helpText && (
+              <p className="text-sm text-muted-foreground ml-2">{param.helpText}</p>
+            )}
+          </div>
+        );
+
+      case 'select':
+        return (
+          <div key={param.name} className="space-y-2">
+            <Label htmlFor={param.name}>
+              {param.label}
+              {param.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Select
+              value={value || ''}
+              onValueChange={(val) => handleChange(param.name, val)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={param.placeholder || 'Select...'} />
+              </SelectTrigger>
+              <SelectContent>
+                {param.options?.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {param.helpText && (
+              <p className="text-sm text-muted-foreground">{param.helpText}</p>
+            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+        );
+
+      case 'date':
+        return (
+          <div key={param.name} className="space-y-2">
+            <Label htmlFor={param.name}>
+              {param.label}
+              {param.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              id={param.name}
+              type="date"
+              value={value || ''}
+              onChange={(e) => handleChange(param.name, e.target.value)}
+            />
+            {param.helpText && (
+              <p className="text-sm text-muted-foreground">{param.helpText}</p>
+            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+        );
+
+      // text and all other types default to text input
+      default:
+        return (
+          <div key={param.name} className="space-y-2">
+            <Label htmlFor={param.name}>
+              {param.label}
+              {param.required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              id={param.name}
+              type="text"
+              value={value || ''}
+              onChange={(e) => handleChange(param.name, e.target.value)}
+              placeholder={param.placeholder}
+            />
+            {param.helpText && (
+              <p className="text-sm text-muted-foreground">{param.helpText}</p>
+            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+        );
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onCancel(); }}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          {params.map(renderField)}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>
+            Continue
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+ActionParamDialog.displayName = 'ActionParamDialog';

package/src/custom/index.ts

@@ -8,5 +8,9 @@ export * from './input-group';
 export * from './item';
 export * from './kbd';
 export * from './native-select';
+export * from './navigation-overlay';
 export * from './spinner';
 export * from './sort-builder';
+export * from './action-param-dialog';
+export * from './view-skeleton';
+export * from './view-states';

package/src/custom/navigation-overlay.tsx

@@ -0,0 +1,296 @@
+/**
+ * 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.
+ */
+
+/**
+ * NavigationOverlay
+ *
+ * A reusable component that renders record detail overlays based on
+ * ViewNavigationConfig mode. Supports drawer (Sheet), modal (Dialog),
+ * split (ResizablePanelGroup), and popover modes.
+ *
+ * Works in conjunction with useNavigationOverlay hook from @object-ui/react —
+ * the hook manages state while this component handles the visual presentation.
+ *
+ * @example
+ * ```tsx
+ * import { useNavigationOverlay } from '@object-ui/react';
+ * import { NavigationOverlay } from '@object-ui/components';
+ *
+ * const nav = useNavigationOverlay({
+ *   navigation: schema.navigation,
+ *   objectName: schema.objectName,
+ * });
+ *
+ * return (
+ *   <>
+ *     <DataTable onRowClick={nav.handleClick} />
+ *     <NavigationOverlay {...nav} title="Record Detail">
+ *       {(record) => <RecordDetail record={record} />}
+ *     </NavigationOverlay>
+ *   </>
+ * );
+ * ```
+ */
+
+import React from 'react';
+import { cn } from '../lib/utils';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '../ui/sheet';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../ui/dialog';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '../ui/resizable';
+
+/** Navigation mode type — matches ViewNavigationConfig.mode */
+export type NavigationOverlayMode =
+  | 'page'
+  | 'drawer'
+  | 'modal'
+  | 'split'
+  | 'popover'
+  | 'new_window'
+  | 'none';
+
+export interface NavigationOverlayProps {
+  /** Whether the overlay is open */
+  isOpen: boolean;
+  /** The selected record */
+  selectedRecord: Record<string, unknown> | null;
+  /** The navigation mode */
+  mode: NavigationOverlayMode;
+  /** Close the overlay */
+  close: () => void;
+  /** Set open state (for controlled Sheet/Dialog onOpenChange) */
+  setIsOpen: (open: boolean) => void;
+  /** Width for the overlay (drawer/modal/split) */
+  width?: string | number;
+  /** Whether navigation is an overlay mode */
+  isOverlay: boolean;
+  /** Title for the overlay header */
+  title?: string;
+  /** Description for the overlay header */
+  description?: string;
+  /** CSS class for the overlay container */
+  className?: string;
+  /**
+   * Render function for the overlay content.
+   * Receives the selected record.
+   */
+  children: (record: Record<string, unknown>) => React.ReactNode;
+  /**
+   * The main content to wrap (for split mode only).
+   * In split mode, the main content is rendered in the left panel.
+   */
+  mainContent?: React.ReactNode;
+  /**
+   * Popover trigger element (for popover mode).
+   */
+  popoverTrigger?: React.ReactNode;
+}
+
+/**
+ * Resolve width to CSS-compatible value
+ */
+function resolveWidth(width: string | number | undefined): string | undefined {
+  if (width == null) return undefined;
+  if (typeof width === 'number') return `${width}px`;
+  return width;
+}
+
+/**
+ * Compute CSS style from NavigationConfig width
+ */
+function getWidthStyle(width: string | number | undefined): React.CSSProperties {
+  const resolved = resolveWidth(width);
+  if (!resolved) return {};
+  return { maxWidth: resolved, width: '100%' };
+}
+
+/**
+ * NavigationOverlay — renders record detail in the configured overlay mode.
+ *
+ * Supports:
+ * - **drawer**: Right-side Sheet panel
+ * - **modal**: Center Dialog overlay
+ * - **split**: Side-by-side ResizablePanelGroup
+ * - **popover**: Hoverable/clickable popover card
+ * - **page / new_window / none**: No overlay rendered (handled by hook)
+ */
+export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
+  isOpen,
+  selectedRecord,
+  mode,
+  close,
+  setIsOpen,
+  width,
+  title,
+  description,
+  className,
+  children,
+  mainContent,
+  popoverTrigger,
+}) => {
+  // Non-overlay modes don't render anything
+  if (mode === 'page' || mode === 'new_window' || mode === 'none') {
+    return null;
+  }
+
+  if (!selectedRecord) {
+    return null;
+  }
+
+  const widthStyle = getWidthStyle(width);
+  const resolvedTitle = title || 'Record Detail';
+
+  // --- Drawer Mode (Sheet) ---
+  if (mode === 'drawer') {
+    return (
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetContent
+          side="right"
+          className={cn('w-full sm:max-w-2xl overflow-y-auto', className)}
+          style={widthStyle}
+        >
+          <SheetHeader>
+            <SheetTitle>{resolvedTitle}</SheetTitle>
+            {description && <SheetDescription>{description}</SheetDescription>}
+          </SheetHeader>
+          <div className="mt-4">
+            {children(selectedRecord)}
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  // --- Modal Mode (Dialog) ---
+  if (mode === 'modal') {
+    return (
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent
+          className={cn('max-w-2xl max-h-[90vh] overflow-y-auto', className)}
+          style={widthStyle}
+        >
+          <DialogHeader>
+            <DialogTitle>{resolvedTitle}</DialogTitle>
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+          <div className="mt-4">
+            {children(selectedRecord)}
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // --- Split Mode (Resizable Panels) ---
+  if (mode === 'split') {
+    if (!isOpen || !mainContent) {
+      return null;
+    }
+
+    // Calculate panel sizes based on width config
+    const detailPercent = width
+      ? typeof width === 'number'
+        ? Math.min(70, Math.max(20, (width / 1200) * 100))
+        : 40
+      : 40;
+    const mainPercent = 100 - detailPercent;
+
+    // Cast needed: ResizablePanelGroup has correct runtime behavior but
+    // vite-plugin-dts may not resolve the direction prop type correctly
+    const PanelGroup = ResizablePanelGroup as React.FC<any>;
+
+    return (
+      <PanelGroup direction="horizontal" className={cn('h-full', className)}>
+        <ResizablePanel defaultSize={mainPercent} minSize={30}>
+          {mainContent}
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={detailPercent} minSize={20}>
+          <div className="h-full overflow-y-auto p-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold">{resolvedTitle}</h3>
+              <button
+                onClick={close}
+                className="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"
+                aria-label="Close panel"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+            {description && (
+              <p className="text-sm text-muted-foreground mb-4">{description}</p>
+            )}
+            {children(selectedRecord)}
+          </div>
+        </ResizablePanel>
+      </PanelGroup>
+    );
+  }
+
+  // --- Popover Mode ---
+  if (mode === 'popover') {
+    return (
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        {popoverTrigger && (
+          <PopoverTrigger asChild>
+            {popoverTrigger}
+          </PopoverTrigger>
+        )}
+        <PopoverContent
+          className={cn('w-96 max-h-[400px] overflow-y-auto p-4', className)}
+          style={widthStyle}
+        >
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">{resolvedTitle}</h4>
+            {description && (
+              <p className="text-xs text-muted-foreground">{description}</p>
+            )}
+            {children(selectedRecord)}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return null;
+};
+
+NavigationOverlay.displayName = 'NavigationOverlay';