@object-ui/components 0.3.1 → 2.0.0

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

package/src/custom/sort-builder.tsx

@@ -0,0 +1,129 @@
+/**
+ * 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 { X, Plus, Trash2 } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+
+export interface SortItem {
+  id: string;
+  field: string;
+  order: 'asc' | 'desc';
+}
+
+export interface SortBuilderProps {
+  fields?: Array<{ 
+    value: string
+    label: string
+  }>;
+  value?: SortItem[];
+  onChange?: (value: SortItem[]) => void;
+  className?: string;
+}
+
+export function SortBuilder({
+  fields = [],
+  value = [],
+  onChange,
+  className,
+}: SortBuilderProps) {
+  // Use internal state initialization prop changes
+  const [items, setItems] = React.useState<SortItem[]>(value || []);
+
+  React.useEffect(() => {
+    if (value && JSON.stringify(value) !== JSON.stringify(items)) {
+         setItems(value);
+    }
+  }, [value]);
+
+  const handleChange = (newItems: SortItem[]) => {
+    setItems(newItems);
+    onChange?.(newItems);
+  };
+
+  const addItem = () => {
+    const newItem: SortItem = {
+      id: crypto.randomUUID(),
+      field: fields[0]?.value || "",
+      order: 'asc',
+    };
+    handleChange([...items, newItem]);
+  };
+
+  const updateItem = (id: string, updates: Partial<SortItem>) => {
+    handleChange(items.map(item => item.id === id ? { ...item, ...updates } : item));
+  };
+
+  const removeItem = (id: string) => {
+    handleChange(items.filter(item => item.id !== id));
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="space-y-2">
+        {items.map((item, index) => (
+          <div key={item.id} className="flex items-center gap-2">
+             <span className="text-sm font-medium w-16 text-muted-foreground">
+               {index === 0 ? "Sort by" : "Then by"}
+             </span>
+             <div className="flex-1">
+                <Select
+                  value={item.field}
+                  onValueChange={(val) => updateItem(item.id, { field: val })}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="Select field" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fields.map(f => (
+                      <SelectItem key={f.value} value={f.value}>{f.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+             </div>
+             <div className="w-28">
+                <Select
+                  value={item.order}
+                  onValueChange={(val) => updateItem(item.id, { order: val as 'asc' | 'desc' })}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="asc">A -&gt; Z</SelectItem>
+                    <SelectItem value="desc">Z -&gt; A</SelectItem>
+                  </SelectContent>
+                </Select>
+             </div>
+             <Button
+               variant="ghost"
+               size="icon-sm"
+               className="h-9 w-9 shrink-0"
+               onClick={() => removeItem(item.id)}
+             >
+               <X className="h-4 w-4" />
+             </Button>
+          </div>
+        ))}
+      </div>
+       <Button
+        variant="outline"
+        size="sm"
+        onClick={addItem}
+        className="h-8"
+        disabled={fields.length === 0}
+      >
+        <Plus className="h-3 w-3 mr-2" />
+        Add sort
+      </Button>
+    </div>
+  );
+}

package/src/index.css

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 /* Scan sources for Tailwind classes */
-@source './src/**/*.{ts,tsx}';
+@source '../src/**/*.{ts,tsx}';
 
 /* Tailwind plugin for animations */
 @plugin 'tailwindcss-animate';
@@ -33,6 +33,13 @@
   --color-popover-foreground: hsl(var(--popover-foreground));
   --color-card: hsl(var(--card));
   --color-card-foreground: hsl(var(--card-foreground));
+
+  /* Chart colors */
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
 }
 
 /* CSS custom properties for theme */
@@ -66,6 +73,12 @@
   --ring: 222.2 84% 4.9%;
 
   --radius: 0.5rem;
+
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
 }
 
 .dark {
@@ -96,6 +109,12 @@
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
+
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
 }
 
 * {

package/src/index.ts

@@ -14,12 +14,14 @@ import './renderers';
 // Export utils
 export { cn } from './lib/utils';
 export { renderChildren } from './lib/utils';
+export { cva } from 'class-variance-authority';
 
 // Export placeholder registration
 export { registerPlaceholders } from './renderers/placeholders';
 
 // Export raw Shadcn UI components
 export * from './ui';
+export * from './custom';
 
 // Export an init function to ensure components are registered
 // This is a workaround for bundlers that might tree-shake side-effect imports

package/src/renderers/action/action-button.tsx

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ */
+
+/**
+ * action:button — Smart action button driven by ActionSchema.
+ *
+ * Renders a Shadcn Button wired to the ActionRunner. Supports:
+ * - All 5 spec action types (script, url, modal, flow, api)
+ * - Conditional visibility & enabled state
+ * - Loading indicator during async execution
+ * - Icon rendering via Lucide
+ * - Variant / size / className overrides from schema
+ */
+
+import React, { forwardRef, useCallback, useState } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { ActionSchema } from '@object-ui/types';
+import { useAction } from '@object-ui/react';
+import { useCondition } from '@object-ui/react';
+import { Button } from '../../ui';
+import { cn } from '../../lib/utils';
+import { Loader2 } from 'lucide-react';
+import { resolveIcon } from './resolve-icon';
+
+export interface ActionButtonProps {
+  schema: ActionSchema & { type: string; className?: string };
+  className?: string;
+  /** Override context for this specific action */
+  context?: Record<string, any>;
+  [key: string]: any;
+}
+
+const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ schema, className, context: localContext, ...props }, ref) => {
+    const {
+      'data-obj-id': dataObjId,
+      'data-obj-type': dataObjType,
+      style,
+      ...rest
+    } = props;
+
+    const { execute } = useAction();
+    const [loading, setLoading] = useState(false);
+
+    // Evaluate visibility and enabled conditions
+    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
+    const isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined);
+
+    // Resolve icon
+    const Icon = resolveIcon(schema.icon);
+
+    // Map schema variant to Shadcn button variant
+    const variant = schema.variant === 'primary' ? 'default' : (schema.variant || 'default');
+    const size = schema.size === 'md' ? 'default' : (schema.size || 'default');
+
+    const handleClick = useCallback(async () => {
+      if (loading) return;
+      setLoading(true);
+
+      try {
+        await execute({
+          type: schema.type,
+          name: schema.name,
+          target: schema.target,
+          execute: schema.execute,
+          endpoint: schema.endpoint,
+          method: schema.method,
+          params: schema.params as Record<string, any> | undefined,
+          confirmText: schema.confirmText,
+          successMessage: schema.successMessage,
+          errorMessage: schema.errorMessage,
+          refreshAfter: schema.refreshAfter,
+          toast: schema.toast,
+          ...localContext,
+        });
+      } finally {
+        setLoading(false);
+      }
+    }, [schema, execute, loading, localContext]);
+
+    if (schema.visible && !isVisible) return null;
+
+    return (
+      <Button
+        ref={ref}
+        type="button"
+        variant={variant as any}
+        size={size as any}
+        className={cn(schema.className, className)}
+        disabled={(schema.enabled ? !isEnabled : false) || loading}
+        onClick={handleClick}
+        {...rest}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        {!loading && Icon && <Icon className={cn('h-4 w-4', schema.label && 'mr-2')} />}
+        {schema.label}
+      </Button>
+    );
+  },
+);
+
+ActionButtonRenderer.displayName = 'ActionButtonRenderer';
+
+ComponentRegistry.register('action:button', ActionButtonRenderer, {
+  namespace: 'action',
+  label: 'Action Button',
+  inputs: [
+    { name: 'name', type: 'string', label: 'Action Name' },
+    { name: 'label', type: 'string', label: 'Label', defaultValue: 'Action' },
+    { name: 'icon', type: 'string', label: 'Icon' },
+    {
+      name: 'type',
+      type: 'enum',
+      label: 'Action Type',
+      enum: ['script', 'url', 'modal', 'flow', 'api'],
+      defaultValue: 'script',
+    },
+    { name: 'target', type: 'string', label: 'Target' },
+    {
+      name: 'variant',
+      type: 'enum',
+      label: 'Variant',
+      enum: ['default', 'primary', 'secondary', 'destructive', 'outline', 'ghost'],
+      defaultValue: 'default',
+    },
+    {
+      name: 'size',
+      type: 'enum',
+      label: 'Size',
+      enum: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
+    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
+  ],
+  defaultProps: {
+    label: 'Action',
+    type: 'script',
+    variant: 'default',
+    size: 'md',
+  },
+});