@object-ui/components 0.3.1 → 2.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/{ui → custom}/button-group.tsx

@@ -10,7 +10,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
-import { Separator } from "./separator"
+import { Separator } from "../ui/separator"
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",

package/src/{ui → custom}/combobox.tsx

@@ -12,7 +12,7 @@ import * as React from "react"
 import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "../lib/utils"
-import { Button } from "./button"
+import { Button } from "../ui/button"
 import {
   Command,
   CommandEmpty,
@@ -20,12 +20,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "./command"
+} from "../ui/command"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "./popover"
+} from "../ui/popover"
 
 export interface ComboboxOption {
   value: string

package/src/{ui → custom}/date-picker.tsx

@@ -13,9 +13,9 @@ import { CalendarIcon } from "lucide-react"
 import { format } from "date-fns"
 
 import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Calendar } from "./calendar"
-import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { Button } from "../ui/button"
+import { Calendar } from "../ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
 
 export interface DatePickerProps {
   date?: Date

package/src/custom/field.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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 { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Label } from "../ui/label"
+
+const fieldVariants = cva("space-y-2")
+
+export interface FieldProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof fieldVariants> {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  error?: React.ReactNode
+  required?: boolean
+  htmlFor?: string
+}
+
+const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
+    const id = React.useId()
+    const fieldId = htmlFor || id
+    const descriptionId = `${fieldId}-description`
+    const errorId = `${fieldId}-error`
+
+    return (
+      <div ref={ref} className={cn(fieldVariants(), className)} {...props}>
+        {label && (
+          <Label 
+            htmlFor={fieldId}
+            className={cn(error && "text-destructive", required && "after:content-['*'] after:ml-0.5 after:text-destructive")}
+          >
+            {label}
+          </Label>
+        )}
+        
+        <Slot 
+          id={fieldId}
+          aria-describedby={
+            [description && descriptionId, error && errorId]
+              .filter(Boolean)
+              .join(" ") || undefined
+          }
+          aria-invalid={!!error}
+        >
+          {children}
+        </Slot>
+
+        {description && !error && (
+          <p
+            id={descriptionId}
+            className="text-[0.8rem] text-muted-foreground"
+          >
+            {description}
+          </p>
+        )}
+
+        {error && (
+          <p
+            id={errorId}
+            className="text-[0.8rem] font-medium text-destructive"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+Field.displayName = "Field"
+
+export { Field }

package/src/{ui → custom}/filter-builder.tsx

@@ -12,9 +12,9 @@ import * as React from "react"
 import { X, Plus, Trash2 } from "lucide-react"
 
 import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
-import { Input } from "./input"
+import { Button } from "../ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+import { Input } from "../ui/input"
 
 export interface FilterCondition {
   id: string

package/src/custom/index.ts

@@ -0,0 +1,14 @@
+export * from './button-group';
+export * from './combobox';
+export * from './date-picker';
+export * from './empty';
+export * from './field';
+export * from './filter-builder';
+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';

package/src/custom/input-group.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 { cn } from "../lib/utils"
+import { Input } from "../ui/input"
+import { Button } from "../ui/button"
+
+export interface InputGroupProps extends React.ComponentProps<"div"> {
+  startContent?: React.ReactNode
+  endContent?: React.ReactNode
+}
+
+const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  ({ className, startContent, endContent, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex w-full items-center rounded-md border border-input bg-transparent ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          "has-[[data-invalid]]:border-destructive",
+          className
+        )}
+        {...props}
+      >
+        {startContent && (
+          <div className="flex items-center px-3 text-muted-foreground bg-muted/50 border-r h-full self-stretch rounded-l-md">
+            {startContent}
+          </div>
+        )}
+        
+        {/* We need to process children to remove their default borders/rings if they are Inputs */}
+        <div className="flex-1 relative [&_input]:border-0 [&_input]:shadow-none [&_input]:focus-visible:ring-0 [&_input]:bg-transparent">
+          {children}
+        </div>
+
+        {endContent && (
+          <div className="flex items-center px-3 text-muted-foreground bg-muted/50 border-l h-full self-stretch rounded-r-md">
+            {endContent}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+InputGroup.displayName = "InputGroup"
+
+export { InputGroup }

package/src/{ui → custom}/item.tsx

@@ -11,7 +11,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
-import { Separator } from "./separator"
+import { Separator } from "../ui/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/custom/native-select.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { cn } from "../lib/utils"
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+NativeSelect.displayName = "NativeSelect"
+
+export { NativeSelect }