@object-ui/components 0.3.0 → 0.5.0

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

@@ -1,3 +1,11 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { FileUploadSchema } from '@object-ui/types';
 import { Label, Button } from '../../ui';
@@ -87,7 +95,7 @@ ComponentRegistry.register('file-upload',
           <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",
+                "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-4 sm: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)]"
@@ -133,7 +141,7 @@ ComponentRegistry.register('file-upload',
                   
                   <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>
+                    <span className="truncate max-w-[150px] sm:max-w-[200px] md:max-w-[300px] text-muted-foreground group-hover/file:text-foreground font-mono text-xs transition-colors">{file.name}</span>
                   </div>
                   
                   <Button
@@ -157,6 +165,7 @@ ComponentRegistry.register('file-upload',
     );
   },
   {
+    namespace: 'ui',
     label: 'File Upload',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/form/form.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { FormSchema, FormField as FormFieldConfig, ValidationRule, FieldCondition, SelectOption } from '@object-ui/types';
 import { useForm } from 'react-hook-form';
@@ -6,6 +14,7 @@ import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
 import { Textarea } from '../../ui/textarea';
 import { Checkbox } from '../../ui/checkbox';
+import { Switch } from '../../ui/switch';
 import { 
   Select, 
   SelectTrigger, 
@@ -28,10 +37,12 @@ ComponentRegistry.register('form',
       submitLabel = 'Submit',
       cancelLabel = 'Cancel',
       showCancel = false,
+      showSubmit = true,
       layout = 'vertical',
       columns = 1,
       onSubmit: onSubmitProp,
       onChange: onChangeProp,
+      onCancel: onCancelProp,
       resetOnSubmit = false,
       validationMode = 'onSubmit',
       disabled = false,
@@ -46,6 +57,11 @@ ComponentRegistry.register('form',
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [submitError, setSubmitError] = React.useState<string | null>(null);
 
+    // React to defaultValues changes
+    React.useEffect(() => {
+      form.reset(defaultValues);
+    }, [defaultValues]);
+
     // Watch for form changes - only track changes when onAction is available
     React.useEffect(() => {
       if (onAction) {
@@ -65,12 +81,34 @@ ComponentRegistry.register('form',
       setIsSubmitting(true);
       setSubmitError(null);
 
+      // Defensive check: If data is an Event, use getValues()
+      let formData = data;
+      // Check for Event-like properties
+      const isEvent = data && (
+        (data as any).nativeEvent || 
+        typeof (data as any).preventDefault === 'function' || 
+        typeof (data as any).stopPropagation === 'function' ||
+        (data as any).target ||
+        (data as any).bubbles
+      );
+
+      if (isEvent) {
+        // This should not happen with RHF handleSubmit, but just in case
+        formData = form.getValues();
+      } else if (!formData || Object.keys(formData).length === 0) {
+        // Fallback: if data is empty check getValues(), in case RHF failed to pass it for some reason
+        const values = form.getValues();
+        if (values && Object.keys(values).length > 0) {
+             formData = values;
+        }
+      }
+
       try {
         if (onAction) {
           const result = await onAction({
             type: 'form_submit',
-            data,
-            formData: data,
+            data: formData,
+            formData: formData,
           }) as any;
 
           // Check if submission returned an error
@@ -81,7 +119,7 @@ ComponentRegistry.register('form',
         }
 
         if (onSubmitProp && typeof onSubmitProp === 'function') {
-          await onSubmitProp(data);
+          await onSubmitProp(formData);
         }
 
         if (resetOnSubmit) {
@@ -109,6 +147,11 @@ ComponentRegistry.register('form',
     // Handle cancel
     const handleCancel = () => {
       form.reset();
+      
+      if (onCancelProp && typeof onCancelProp === 'function') {
+        onCancelProp();
+      }
+
       if (onAction) {
         onAction({
           type: 'form_cancel',
@@ -118,21 +161,32 @@ ComponentRegistry.register('form',
     };
 
     // Determine grid classes based on columns (explicit classes for Tailwind JIT)
+    // Mobile-first: 1 column on mobile, 2 on sm, then md/lg for larger values
     const gridColsClass = 
       columns === 1 ? '' :
-      columns === 2 ? 'md:grid-cols-2' :
-      columns === 3 ? 'md:grid-cols-3' :
-      'md:grid-cols-4';
+      columns === 2 ? 'sm:grid-cols-2' :
+      columns === 3 ? 'sm:grid-cols-2 md:grid-cols-3' :
+      'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
     
     const gridClass = columns > 1 
       ? cn('grid gap-4', gridColsClass)
       : 'space-y-4';
 
-    // Extract designer-related props
+    // Extract designer-related props and conflicting handlers
     const { 
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
-        style, 
+        style,
+        onSubmit: _ignoredOnSubmit, // Prevent overwriting our handleSubmit
+        onChange: _ignoredOnChange, // Prevent overwriting our onChange
+        // Extract schema props that should not be spread to DOM (handled separately by schema destructuring above)
+        submitLabel: _submitLabel,
+        cancelLabel: _cancelLabel,
+        showSubmit: _showSubmit,
+        showCancel: _showCancel,
+        resetOnSubmit: _resetOnSubmit,
+        defaultValues: _defaultValues,
+        inputType: _inputType,
         ...formProps 
     } = props;
 
@@ -232,6 +286,9 @@ ComponentRegistry.register('form',
                           {/* Render the actual field component based on type */}
                           {renderFieldComponent(type, {
                             ...fieldProps,
+                            // specialized fields needs raw metadata, but we should traverse down if it exists
+                            // field is the field configuration loop variable
+                            field: (field as any).field || field, 
                             ...formField,
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
@@ -264,6 +321,7 @@ ComponentRegistry.register('form',
                   {cancelLabel}
                 </Button>
               )}
+              {showSubmit && (
               <Button
                 type="submit"
                 disabled={isSubmitting || disabled}
@@ -271,6 +329,7 @@ ComponentRegistry.register('form',
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {submitLabel}
               </Button>
+              )}
             </div>
           )}
         </form>
@@ -278,6 +337,7 @@ ComponentRegistry.register('form',
     );
   },
   {
+    namespace: 'ui',
     label: 'Form',
     inputs: [
       { 
@@ -363,26 +423,52 @@ interface RenderFieldProps {
 }
 
 function renderFieldComponent(type: string, props: RenderFieldProps) {
+  // 1. Try to resolve specialized field widget from registry first
+  // We prioritize registry components (e.g., 'field.currency', 'field.date')
+  const RegisteredComponent = ComponentRegistry.get(type);
+
+  if (RegisteredComponent) {
+    // For specialized fields (e.g. fields package), they expect 'field' prop.
+    // Ensure we pass all props.
+    // Also pass 'schema' for standard renderers that expect it
+    return <RegisteredComponent schema={props} {...props} />;
+  }
+
   const { inputType, options = [], placeholder, ...fieldProps } = props;
 
   switch (type) {
     case 'input':
-      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;
-    
+      if (inputType === 'file') {
+        // File inputs cannot be controlled with value prop
+         const { value, ...fileProps } = fieldProps;
+         return <Input type="file" placeholder={placeholder} {...fileProps} />;
+      }
+      return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
+      
     case 'textarea':
-      return <Textarea placeholder={placeholder} {...fieldProps} />;
+      return <Textarea placeholder={placeholder} {...fieldProps} value={fieldProps.value ?? ''} />;
     
     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>
+        <Checkbox 
+          checked={value}
+          onCheckedChange={onChange}
+          {...checkboxProps}
+        />
+      );
+    }
+
+    case 'switch': {
+      // For switch, we need to handle the value differently (same as checkbox)
+      const { value, onChange, ...switchProps } = fieldProps;
+      return (
+        <Switch 
+          checked={value}
+          onCheckedChange={onChange}
+          {...switchProps}
+        />
       );
     }
     

package/src/renderers/form/index.ts

@@ -1,3 +1,11 @@
+/**
+ * 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 './form';
 import './button';
 import './label';
@@ -14,3 +22,5 @@ import './input-otp';
 import './calendar';
 import './date-picker';
 import './file-upload';
+import './combobox';
+import './command';

package/src/renderers/form/input-otp.tsx

@@ -1,24 +1,44 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { InputOTPSchema } from '@object-ui/types';
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '../../ui';
 
 ComponentRegistry.register('input-otp', 
-  ({ schema, className, ...props }: { schema: InputOTPSchema; className?: string; [key: string]: any }) => (
-    <InputOTP maxLength={schema.length || 6} className={className} {...props}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
+  ({ schema, className, onChange, value, ...props }: { schema: InputOTPSchema; className?: string; [key: string]: any }) => {
+    const length = schema.maxLength || 6;
+    const slots = Array.from({ length });
+
+    const handleChange = (val: string) => {
+      if (onChange) {
+        onChange(val);
+      }
+    };
+
+    return (
+      <InputOTP 
+        maxLength={length} 
+        className={className} 
+        value={value ?? schema.value}
+        onChange={handleChange}
+        {...props}
+      >
+        <InputOTPGroup>
+          {slots.map((_, i) => (
+             <InputOTPSlot key={i} index={i} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+    );
+  },
   {
+    namespace: 'ui',
     label: 'Input OTP',
     inputs: [
       { name: 'maxLength', type: 'number', label: 'Max Length', defaultValue: 6 },

package/src/renderers/form/input.tsx

@@ -1,61 +1,69 @@
+/**
+ * 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 React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 import type { InputSchema } from '@object-ui/types';
 import { Input, Label } from '../../ui';
 import { cn } from '../../lib/utils';
 
-ComponentRegistry.register('input', 
-  ({ schema, className, onChange, value, ...props }: { schema: InputSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
-    
-    // Handle change for both raw inputs and form-bound inputs
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (onChange) {
-        onChange(e.target.value);
-      }
-    };
+const InputRenderer = ({ schema, className, onChange, value, ...props }: { schema: InputSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Handle change for both raw inputs and form-bound inputs
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  // Extract designer-related props to apply to the wrapper
+  // These props are injected by SchemaRenderer for designer interaction
+  const { 
+    'data-obj-id': dataObjId, 
+    'data-obj-type': dataObjType,
+    style, 
+    ...inputProps 
+  } = props;
 
-    // Extract designer-related props to apply to the wrapper
-    // These props are injected by SchemaRenderer for designer interaction
-    const { 
-      'data-obj-id': dataObjId, 
-      'data-obj-type': dataObjType,
-      style, 
-      ...inputProps 
-    } = props;
+  return (
+    <div 
+      className={cn("grid w-full items-center gap-1.5", schema.wrapperClass)}
+      data-obj-id={dataObjId}
+      data-obj-type={dataObjType}
+      style={style}
+    >
+      {schema.label && <Label htmlFor={schema.id} className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+      <Input 
+        type={schema.inputType || 'text'} 
+        id={schema.id} 
+        name={schema.name}
+        placeholder={schema.placeholder} 
+        className={className}
+        required={schema.required}
+        disabled={schema.disabled}
+        readOnly={schema.readOnly}
+        value={value ?? schema.value ?? ''} // Controlled if value provided
+        defaultValue={value === undefined ? schema.defaultValue : undefined}
+        onChange={handleChange}
+        min={schema.min}
+        max={schema.max}
+        step={schema.step}
+        maxLength={schema.maxLength}
+        pattern={schema.pattern}
+        {...inputProps} 
+      />
+      {schema.description && <p className="text-sm text-muted-foreground">{schema.description}</p>}
+      {schema.error && <p className="text-sm font-medium text-destructive">{schema.error}</p>}
+    </div>
+  );
+};
 
-    return (
-      <div 
-        className={cn("grid w-full items-center gap-1.5", schema.wrapperClass)}
-        data-obj-id={dataObjId}
-        data-obj-type={dataObjType}
-        style={style}
-      >
-        {schema.label && <Label htmlFor={schema.id} className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
-        <Input 
-          type={schema.inputType || 'text'} 
-          id={schema.id} 
-          name={schema.name}
-          placeholder={schema.placeholder} 
-          className={className}
-          required={schema.required}
-          disabled={schema.disabled}
-          readOnly={schema.readOnly}
-          value={value ?? schema.value ?? ''} // Controlled if value provided
-          defaultValue={value === undefined ? schema.defaultValue : undefined}
-          onChange={handleChange}
-          min={schema.min}
-          max={schema.max}
-          step={schema.step}
-          maxLength={schema.maxLength}
-          pattern={schema.pattern}
-          {...inputProps} 
-        />
-        {schema.description && <p className="text-sm text-muted-foreground">{schema.description}</p>}
-        {schema.error && <p className="text-sm font-medium text-destructive">{schema.error}</p>}
-      </div>
-    );
-  },
-  {
+ComponentRegistry.register('input', InputRenderer, {
+    namespace: 'ui',
     label: 'Input Field',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
@@ -77,3 +85,37 @@ ComponentRegistry.register('input',
     }
   }
 );
+
+ComponentRegistry.register('email', 
+  (props: any) => <InputRenderer {...props} schema={{ ...props.schema, inputType: 'email' }} />,
+  {
+    namespace: 'ui',
+    label: 'Email Input',
+    icon: 'mail', 
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'name', type: 'string', label: 'Field Name' },
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
+      { name: 'description', type: 'string', label: 'Description' }
+    ]
+  }
+);
+
+ComponentRegistry.register('password', 
+  (props: any) => <InputRenderer {...props} schema={{ ...props.schema, inputType: 'password' }} />,
+  {
+    namespace: 'ui',
+    label: 'Password Input',
+    icon: 'lock',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'name', type: 'string', label: 'Field Name' },
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
+      { name: 'description', type: 'string', label: 'Description' }
+    ]
+  }
+);

package/src/renderers/form/label.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { LabelSchema } from '@object-ui/types';
 import { Label } from '../../ui';
@@ -24,6 +32,7 @@ ComponentRegistry.register('label',
     );
   },
   {
+    namespace: 'ui',
     label: 'Label',
     inputs: [
       { name: 'text', type: 'string', label: 'Text', required: true },

package/src/renderers/form/radio-group.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { RadioGroupSchema } from '@object-ui/types';
 import { RadioGroup, RadioGroupItem, Label } from '../../ui';
@@ -30,6 +38,7 @@ ComponentRegistry.register('radio-group',
   );
   },
   {
+    namespace: 'ui',
     label: 'Radio Group',
     inputs: [
       { name: 'defaultValue', type: 'string', label: 'Default Value' },

package/src/renderers/form/select.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { SelectSchema } from '@object-ui/types';
 import {
@@ -8,44 +16,64 @@ import {
   SelectItem,
   Label
 } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
+
+const SelectRenderer = ({ schema, className, onChange, value, ...props }: { schema: SelectSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...selectProps 
+  } = props;
 
-ComponentRegistry.register('select', 
-  ({ schema, className, ...props }: { schema: SelectSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...selectProps 
-    } = props;
+  const handleValueChange = (newValue: string) => {
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
 
-    return (
+  return (
     <div 
-        className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}
+        className={cn("grid w-full items-center gap-1.5", schema.wrapperClass)}
         data-obj-id={dataObjId}
         data-obj-type={dataObjType}
         style={style}
     >
-      {schema.label && <Label>{schema.label}</Label>}
-      <Select defaultValue={schema.defaultValue} {...selectProps}>
+      {schema.label && <Label className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+      <Select 
+        defaultValue={value === undefined ? schema.defaultValue : undefined} 
+        value={value ?? schema.value}
+        onValueChange={handleValueChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        name={schema.name}
+        {...selectProps}
+      >
         <SelectTrigger className={className}>
           <SelectValue placeholder={schema.placeholder} />
         </SelectTrigger>
         <SelectContent>
           {schema.options?.map((opt) => (
-             <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+             <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</SelectItem>
           ))}
         </SelectContent>
       </Select>
     </div>
   );
-  },
+};
+
+ComponentRegistry.register('select', SelectRenderer,
   {
+    namespace: 'ui',
     label: 'Select',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'placeholder', type: 'string', label: 'Placeholder' },
       { name: 'defaultValue', type: 'string', label: 'Default Value' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
       { 
         name: 'options', 
         type: 'array', 

package/src/renderers/form/slider.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
 import type { SliderSchema } from '@object-ui/types';
 import { Slider } from '../../ui';
@@ -12,9 +20,16 @@ ComponentRegistry.register('slider',
         ...sliderProps 
     } = props;
 
+    // Ensure defaultValue is an array for backward compatibility
+    const defaultValue = Array.isArray(schema.defaultValue) 
+      ? schema.defaultValue 
+      : schema.defaultValue !== undefined 
+        ? [schema.defaultValue] 
+        : undefined;
+
     return (
     <Slider 
-      defaultValue={schema.defaultValue} 
+      defaultValue={defaultValue} 
       max={schema.max} 
       min={schema.min}
       step={schema.step}
@@ -26,6 +41,7 @@ ComponentRegistry.register('slider',
   );
   },
   {
+    namespace: 'ui',
     label: 'Slider',
     inputs: [
       { name: 'defaultValue', type: 'array', label: 'Default Value', defaultValue: [50] },