@object-ui/components 0.3.0

package/src/renderers/form/date-picker.tsx

@@ -0,0 +1,75 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { DatePickerSchema } from '@object-ui/types';
+import { Calendar, Button, Popover, PopoverTrigger, PopoverContent, Label } from '../../ui';
+import { CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('date-picker', 
+  ({ schema, className, value, onChange, ...props }: { schema: DatePickerSchema; className?: string; value?: Date; onChange?: (date: Date | undefined) => void; [key: string]: any }) => {
+    const handleSelect = (date: Date | undefined) => {
+      if (onChange) {
+        onChange(date);
+      }
+    };
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...triggerProps 
+    } = props;
+
+    return (
+      <div 
+        className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+      >
+        {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              id={schema.id}
+              variant="outline"
+              className={cn(
+                'w-full justify-start text-left font-normal transition-all duration-300',
+                !value ? 'text-muted-foreground' : 'text-cyan-300 font-medium shadow-[0_0_10px_-5px_rgba(6,182,212,0.5)] border-cyan-500/50 bg-cyan-950/20',
+                className
+              )}
+              {...triggerProps}
+            >
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              {value ? format(value, schema.format || 'PPP') : <span>{schema.placeholder || 'Pick a date'}</span>}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-0">
+            <Calendar
+              mode="single"
+              selected={value}
+              onSelect={handleSelect}
+              initialFocus
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  },
+  {
+    label: 'Date Picker',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'format', type: 'string', label: 'Date Format', description: 'date-fns format string (e.g., "PPP", "yyyy-MM-dd")' },
+      { name: 'id', type: 'string', label: 'ID', required: true }
+    ],
+    defaultProps: {
+      label: 'Date',
+      placeholder: 'Pick a date',
+      format: 'PPP',
+      id: 'date-picker-field'
+    }
+  }
+);

package/src/renderers/form/file-upload.tsx

@@ -0,0 +1,175 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { FileUploadSchema } from '@object-ui/types';
+import { Label, Button } from '../../ui';
+import { Upload, X, Rocket, CheckCircle2, ScanLine } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('file-upload', 
+  ({ schema, className, value, onChange, ...props }: { schema: FileUploadSchema; className?: string; value?: File[]; onChange?: (files: File[]) => void; [key: string]: any }) => {
+    const [files, setFiles] = useState<File[]>(value || []);
+    const [isUploading, setIsUploading] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    // Simulate upload effect
+    useEffect(() => {
+        if (isUploading) {
+            const interval = setInterval(() => {
+                setProgress(prev => {
+                    if (prev >= 100) {
+                        clearInterval(interval);
+                        setIsUploading(false);
+                        return 0;
+                    }
+                    return prev + 5;
+                });
+            }, 50);
+            return () => clearInterval(interval);
+        }
+    }, [isUploading]);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newFiles = Array.from(e.target.files || []);
+      if (newFiles.length > 0) {
+          setIsUploading(true);
+          setProgress(0);
+          const updatedFiles = schema.multiple ? [...files, ...newFiles] : newFiles;
+          setTimeout(() => {
+            setFiles(updatedFiles);
+            if (onChange) {
+                onChange(updatedFiles);
+            }
+          }, 1000); // Delay actual "completion" to match animation
+      }
+    };
+
+    const handleRemoveFile = (index: number) => {
+      const updatedFiles = files.filter((_, i) => i !== index);
+      setFiles(updatedFiles);
+      if (onChange) {
+        onChange(updatedFiles);
+      }
+    };
+
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...inputProps 
+    } = props;
+
+    return (
+      <div 
+        className={`grid w-full max-w-sm items-center gap-2 ${schema.wrapperClass || ''}`}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+      >
+        {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
+        <div className={cn('relative flex flex-col gap-3 group/upload', className)}>
+          <input
+            ref={inputRef}
+            type="file"
+            id={schema.id}
+            className="hidden"
+            accept={schema.accept}
+            multiple={schema.multiple}
+            onChange={handleFileChange}
+            {...inputProps}
+          />
+          
+          <div 
+            onClick={handleClick}
+            className={cn(
+                "relative overflow-hidden cursor-pointer rounded-lg border-2 border-dashed transition-all duration-300 min-h-[120px] flex flex-col items-center justify-center p-6 gap-3",
+                isUploading 
+                    ? "border-cyan-400 bg-cyan-950/30" 
+                    : "border-slate-700 bg-slate-900/50 hover:bg-slate-900 hover:border-cyan-500/50 hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.3)]"
+            )}
+          >
+            {/* Background Grid Animation */}
+            <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 pointer-events-none" />
+            <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:14px_24px] pointer-events-none" />
+
+            {/* Launch Pad Visual */}
+             <div className={cn(
+                "relative z-10 p-3 rounded-full bg-slate-800 border border-slate-700 transition-all duration-500",
+                isUploading ? "scale-110 shadow-[0_0_30px_cyan] border-cyan-400 animate-bounce" : "group-hover/upload:scale-110 group-hover/upload:shadow-lg group-hover/upload:border-cyan-500"
+             )}>
+                {isUploading ? (
+                    <Rocket className="w-8 h-8 text-cyan-300 animate-pulse" />
+                ) : (
+                    <Upload className="w-6 h-6 text-slate-400 group-hover/upload:text-cyan-400" />
+                )}
+             </div>
+
+             <div className="relative z-10 text-center">
+                <p className={cn("text-xs font-mono uppercase tracking-widest transition-colors", isUploading ? "text-cyan-300" : "text-slate-500 group-hover/upload:text-cyan-200")}>
+                    {isUploading ? "INITIATING LAUNCH SEQUENCE..." : (schema.buttonText || "DROP PAYLOAD OR CLICK TO UPLOAD")}
+                </p>
+             </div>
+
+            {/* Progress Bar (Holographic Beam) */}
+             {isUploading && (
+                <div className="absolute bottom-0 left-0 h-1 bg-cyan-500 shadow-[0_0_10px_cyan] transition-all duration-75 ease-out" style={{ width: `${progress}%` }} />
+             )}
+          </div>
+
+          {/* File List */}
+          {files.length > 0 && (
+            <div className="flex flex-col gap-2 mt-1 perspective-1000">
+              {files.map((file, index) => (
+                <div
+                  key={index}
+                  className="relative group/file overflow-hidden flex items-center justify-between p-3 border border-border bg-card/80 rounded-sm text-sm transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/10 animate-in slide-in-from-bottom-2 fade-in"
+                >
+                  <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-primary/50 group-hover/file:bg-primary group-hover/file:shadow-[0_0_8px_hsl(var(--primary))]" />
+                  
+                  <div className="flex items-center gap-3 z-10">
+                    <CheckCircle2 className="w-4 h-4 text-emerald-500 rounded-full" />
+                    <span className="truncate max-w-[200px] text-muted-foreground group-hover/file:text-foreground font-mono text-xs transition-colors">{file.name}</span>
+                  </div>
+                  
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => handleRemoveFile(index)}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+
+                  {/* Scanning Effect - Fixed gradient syntax */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/5 to-transparent -translate-x-full group-hover/file:animate-[shimmer_1s_infinite] pointer-events-none" />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+  {
+    label: 'File Upload',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'buttonText', type: 'string', label: 'Button Text' },
+      { name: 'accept', type: 'string', label: 'Accepted File Types', description: 'MIME types (e.g., "image/*,application/pdf")' },
+      { name: 'multiple', type: 'boolean', label: 'Allow Multiple Files' },
+      { name: 'id', type: 'string', label: 'ID', required: true }
+    ],
+    defaultProps: {
+      label: 'Upload files',
+      buttonText: 'Choose files',
+      multiple: true,
+      id: 'file-upload-field'
+    }
+  }
+);

package/src/renderers/form/form.tsx

@@ -0,0 +1,417 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { FormSchema, FormField as FormFieldConfig, ValidationRule, FieldCondition, SelectOption } from '@object-ui/types';
+import { useForm } from 'react-hook-form';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from '../../ui/form';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+import { Textarea } from '../../ui/textarea';
+import { Checkbox } from '../../ui/checkbox';
+import { 
+  Select, 
+  SelectTrigger, 
+  SelectValue, 
+  SelectContent, 
+  SelectItem 
+} from '../../ui/select';
+import { renderChildren } from '../../lib/utils';
+import { Alert, AlertDescription } from '../../ui/alert';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import React from 'react';
+
+// Form renderer component - Airtable-style feature-complete form
+ComponentRegistry.register('form',
+  ({ schema, className, onAction, ...props }: { schema: FormSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
+    const {
+      defaultValues = {},
+      fields = [],
+      submitLabel = 'Submit',
+      cancelLabel = 'Cancel',
+      showCancel = false,
+      layout = 'vertical',
+      columns = 1,
+      onSubmit: onSubmitProp,
+      onChange: onChangeProp,
+      resetOnSubmit = false,
+      validationMode = 'onSubmit',
+      disabled = false,
+    } = schema;
+
+    // Initialize react-hook-form
+    const form = useForm({
+      defaultValues,
+      mode: validationMode,
+    });
+
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [submitError, setSubmitError] = React.useState<string | null>(null);
+
+    // Watch for form changes - only track changes when onAction is available
+    React.useEffect(() => {
+      if (onAction) {
+        const subscription = form.watch((data) => {
+          onAction({
+            type: 'form_change',
+            data,
+            formData: data,
+          });
+        });
+        return () => subscription.unsubscribe();
+      }
+    }, [form, onAction]);
+
+    // Handle form submission
+    const handleSubmit = form.handleSubmit(async (data) => {
+      setIsSubmitting(true);
+      setSubmitError(null);
+
+      try {
+        if (onAction) {
+          const result = await onAction({
+            type: 'form_submit',
+            data,
+            formData: data,
+          }) as any;
+
+          // Check if submission returned an error
+          if (result?.error) {
+            setSubmitError(result.error);
+            return;
+          }
+        }
+
+        if (onSubmitProp && typeof onSubmitProp === 'function') {
+          await onSubmitProp(data);
+        }
+
+        if (resetOnSubmit) {
+          form.reset();
+        }
+      } catch (error) {
+        // Handle different error types safely
+        const errorMessage = error instanceof Error 
+          ? error.message 
+          : typeof error === 'string' 
+            ? error 
+            : 'An error occurred during submission';
+        setSubmitError(errorMessage);
+        
+        // Log errors for debugging (dev environment only)
+        // process may not be defined in all environments
+        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+          console.error('Form submission error:', error);
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    });
+
+    // Handle cancel
+    const handleCancel = () => {
+      form.reset();
+      if (onAction) {
+        onAction({
+          type: 'form_cancel',
+          data: form.getValues(),
+        });
+      }
+    };
+
+    // Determine grid classes based on columns (explicit classes for Tailwind JIT)
+    const gridColsClass = 
+      columns === 1 ? '' :
+      columns === 2 ? 'md:grid-cols-2' :
+      columns === 3 ? 'md:grid-cols-3' :
+      'md:grid-cols-4';
+    
+    const gridClass = columns > 1 
+      ? cn('grid gap-4', gridColsClass)
+      : 'space-y-4';
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...formProps 
+    } = props;
+
+    return (
+      <Form {...form}>
+        <form 
+            onSubmit={handleSubmit} 
+            className={className} 
+            {...formProps}
+            // Apply designer props
+            data-obj-id={dataObjId}
+            data-obj-type={dataObjType}
+            style={style}
+        >
+          {/* Form Error Alert */}
+          {submitError && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{submitError}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Form Fields */}
+          {schema.children ? (
+            // If children are provided directly, render them
+            <div className={schema.fieldContainerClass || 'space-y-4'}>
+              {renderChildren(schema.children)}
+            </div>
+          ) : (
+            // Otherwise render fields from schema
+            <div className={schema.fieldContainerClass || gridClass}>
+              {fields.map((field: FormFieldConfig) => {
+                const {
+                  name,
+                  label,
+                  description,
+                  type = 'input',
+                  required = false,
+                  disabled: fieldDisabled = false,
+                  validation = {},
+                  condition,
+                  ...fieldProps
+                } = field;
+
+                // Handle conditional rendering with null/undefined safety
+                if (condition) {
+                  const watchField = condition.field;
+                  const watchValue = form.watch(watchField);
+                  
+                  // Check for null/undefined before evaluating conditions
+                  const hasValue = watchValue !== undefined && watchValue !== null;
+                  
+                  if (condition.equals !== undefined && watchValue !== condition.equals) {
+                    return null;
+                  }
+                  if (condition.notEquals !== undefined && watchValue === condition.notEquals) {
+                    return null;
+                  }
+                  if (condition.in && (!hasValue || !condition.in.includes(watchValue))) {
+                    return null;
+                  }
+                }
+
+                // Build validation rules
+                const rules: any = {
+                  ...validation,
+                };
+
+                if (required) {
+                  rules.required = typeof validation.required === 'string' 
+                    ? validation.required 
+                    : `${label || name} is required`;
+                }
+
+                // Use field.id or field.name for stable keys (never use index alone)
+                const fieldKey = field.id ?? name;
+
+                return (
+                  <FormField
+                    key={fieldKey}
+                    control={form.control}
+                    name={name}
+                    rules={rules}
+                    render={({ field: formField }) => (
+                      <FormItem>
+                        {label && (
+                          <FormLabel>
+                            {label}
+                            {required && (
+                              <span className="text-destructive ml-1" aria-label="required">
+                                *
+                              </span>
+                            )}
+                          </FormLabel>
+                        )}
+                        <FormControl>
+                          {/* Render the actual field component based on type */}
+                          {renderFieldComponent(type, {
+                            ...fieldProps,
+                            ...formField,
+                            inputType: fieldProps.inputType,
+                            options: fieldProps.options,
+                            placeholder: fieldProps.placeholder,
+                            disabled: disabled || fieldDisabled || isSubmitting,
+                          })}
+                        </FormControl>
+                        {description && (
+                          <FormDescription>{description}</FormDescription>
+                        )}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          {/* Form Actions */}
+          {(schema.showActions !== false) && (
+            <div className={`flex gap-2 ${layout === 'horizontal' ? 'justify-end' : 'justify-start'} mt-6`}>
+              {showCancel && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancel}
+                  disabled={isSubmitting || disabled}
+                >
+                  {cancelLabel}
+                </Button>
+              )}
+              <Button
+                type="submit"
+                disabled={isSubmitting || disabled}
+              >
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {submitLabel}
+              </Button>
+            </div>
+          )}
+        </form>
+      </Form>
+    );
+  },
+  {
+    label: 'Form',
+    inputs: [
+      { 
+        name: 'fields', 
+        type: 'array', 
+        label: 'Fields',
+        description: 'Array of field configurations with name, label, type, validation, etc.'
+      },
+      { 
+        name: 'defaultValues', 
+        type: 'object', 
+        label: 'Default Values',
+        description: 'Object with default values for form fields'
+      },
+      { name: 'submitLabel', type: 'string', label: 'Submit Button Label', defaultValue: 'Submit' },
+      { name: 'cancelLabel', type: 'string', label: 'Cancel Button Label', defaultValue: 'Cancel' },
+      { name: 'showCancel', type: 'boolean', label: 'Show Cancel Button', defaultValue: false },
+      { 
+        name: 'layout', 
+        type: 'enum', 
+        enum: ['vertical', 'horizontal'],
+        label: 'Layout',
+        defaultValue: 'vertical'
+      },
+      { 
+        name: 'columns', 
+        type: 'number', 
+        label: 'Number of Columns',
+        defaultValue: 1,
+        description: 'For multi-column layouts (1-4)'
+      },
+      { 
+        name: 'validationMode', 
+        type: 'enum',
+        enum: ['onSubmit', 'onBlur', 'onChange', 'onTouched', 'all'],
+        label: 'Validation Mode',
+        defaultValue: 'onSubmit'
+      },
+      { name: 'resetOnSubmit', type: 'boolean', label: 'Reset After Submit', defaultValue: false },
+      { name: 'disabled', type: 'boolean', label: 'Disabled', defaultValue: false },
+      { name: 'className', type: 'string', label: 'CSS Class' },
+      { name: 'fieldContainerClass', type: 'string', label: 'Field Container CSS Class' }
+    ],
+    defaultProps: {
+      submitLabel: 'Submit',
+      cancelLabel: 'Cancel',
+      showCancel: false,
+      layout: 'vertical',
+      columns: 1,
+      validationMode: 'onSubmit',
+      resetOnSubmit: false,
+      disabled: false,
+      fields: [
+        {
+          name: 'name',
+          label: 'Name',
+          type: 'input',
+          required: true,
+          placeholder: 'Enter your name',
+        },
+        {
+          name: 'email',
+          label: 'Email',
+          type: 'input',
+          inputType: 'email',
+          required: true,
+          placeholder: 'Enter your email',
+        },
+      ],
+    },
+  }
+);
+
+// Helper function to render field components with proper typing
+interface RenderFieldProps {
+  inputType?: string;
+  options?: SelectOption[];
+  placeholder?: string;
+  value?: any;
+  onChange?: (value: any) => void;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+function renderFieldComponent(type: string, props: RenderFieldProps) {
+  const { inputType, options = [], placeholder, ...fieldProps } = props;
+
+  switch (type) {
+    case 'input':
+      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;
+    
+    case 'textarea':
+      return <Textarea placeholder={placeholder} {...fieldProps} />;
+    
+    case 'checkbox': {
+      // For checkbox, we need to handle the value differently
+      const { value, onChange, ...checkboxProps } = fieldProps;
+      return (
+        <div className="flex items-center space-x-2">
+          <Checkbox 
+            checked={value}
+            onCheckedChange={onChange}
+            {...checkboxProps}
+          />
+        </div>
+      );
+    }
+    
+    case 'select': {
+      // For select with react-hook-form, we need to handle the onChange
+      const { value: selectValue, onChange: selectOnChange, ...selectProps } = fieldProps;
+      
+      // Safety check for options
+      if (!options || options.length === 0) {
+        return <div className="text-sm text-muted-foreground">No options available</div>;
+      }
+      
+      return (
+        <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
+          <SelectTrigger>
+            <SelectValue placeholder={placeholder ?? 'Select an option'} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((opt: SelectOption) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    }
+    
+    default:
+      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;
+  }
+}

package/src/renderers/form/index.ts

@@ -0,0 +1,16 @@
+import './form';
+import './button';
+import './label';
+import './input';
+import './textarea';
+
+import './checkbox';
+import './switch';
+import './select';
+import './radio-group';
+import './slider';
+import './toggle';
+import './input-otp';
+import './calendar';
+import './date-picker';
+import './file-upload';