@object-ui/components 0.3.0 → 0.3.1

package/src/renderers/feedback/toast.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 { ToastSchema } from '@object-ui/types';
+import { toast } from 'sonner';
+import { Button } from '../../ui';
+
+ComponentRegistry.register('toast', 
+  ({ schema }: { schema: ToastSchema }) => {
+    const showToast = () => {
+      const toastFn = schema.variant === 'success' ? toast.success :
+                      schema.variant === 'error' ? toast.error :
+                      schema.variant === 'warning' ? toast.warning :
+                      schema.variant === 'info' ? toast.info :
+                      toast;
+      
+      toastFn(schema.title || 'Notification', {
+        description: schema.description,
+        duration: schema.duration,
+      });
+    };
+    
+    return (
+      <Button onClick={showToast} variant={schema.buttonVariant} className={schema.className}>
+        {schema.buttonLabel || 'Show Toast'}
+      </Button>
+    );
+  },
+  {
+    label: 'Toast',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'success', 'warning', 'error', 'info'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { name: 'duration', type: 'number', label: 'Duration (ms)' },
+      { name: 'buttonLabel', type: 'string', label: 'Button Label' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Notification',
+      buttonLabel: 'Show Toast',
+      variant: 'default',
+      duration: 5000
+    }
+  }
+);

package/src/renderers/feedback/toaster.tsx

@@ -1,26 +1,22 @@
+/**
+ * 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 { ToasterSchema } from '@object-ui/types';
-import { Toaster as SonnerToaster } from '../../ui';
-import { Toaster as DefaultToaster } from '../../ui'; 
-// Note: In shadcn/ui typical setup, Toaster is exported from 'components/ui/toaster' and 'components/ui/sonner'.
-// But in @object-ui/ui index.tsx, we need to check if they are exported.
-// Assuming they are exported as Toaster and Sonner (or similar).
-// Let's assume standard exports.
+import { Toaster as SonnerToaster } from '../../ui/sonner';
 
 ComponentRegistry.register('toaster', 
-  ({ schema }: { schema: ToasterSchema }) => {
-    if (schema.provider === 'sonner') {
-        return <SonnerToaster />;
-    }
-    return <DefaultToaster />;
+  () => {
+    return <SonnerToaster />;
   },
   {
     label: 'Toaster',
-    inputs: [
-      { name: 'provider', type: 'enum', enum: ['default', 'sonner'], defaultValue: 'default', label: 'Provider' }
-    ],
-    defaultProps: {
-      provider: 'default'
-    }
+    inputs: [],
+    defaultProps: {}
   }
 );

package/src/renderers/form/button.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 { ButtonSchema } from '@object-ui/types';
 import { Button } from '../../ui';

package/src/renderers/form/calendar.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 { CalendarSchema } from '@object-ui/types';
 import { Calendar } from '../../ui';

package/src/renderers/form/checkbox.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 { CheckboxSchema } from '@object-ui/types';
 import { Checkbox, Label } from '../../ui';

package/src/renderers/form/combobox.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 { ComboboxSchema } from '@object-ui/types';
+import { Combobox } from '../../ui';
+
+ComponentRegistry.register('combobox', 
+  ({ schema, ...props }: { schema: ComboboxSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...comboboxProps
+    } = props;
+    
+    return (
+    <Combobox 
+        options={schema.options || []}
+        placeholder={schema.placeholder}
+        value={schema.value}
+        disabled={schema.disabled}
+        className={schema.className} 
+        {...comboboxProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    />
+  );
+  },
+  {
+    label: 'Combobox',
+    inputs: [
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'value', type: 'string', label: 'Value' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled', defaultValue: false },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      placeholder: 'Select option...',
+      options: []
+    }
+  }
+);

package/src/renderers/form/command.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 { CommandSchema } from '@object-ui/types';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../../ui/command';
+
+ComponentRegistry.register('command', 
+  ({ schema, ...props }: { schema: CommandSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...commandProps
+    } = props;
+    
+    return (
+    <Command 
+        className={schema.className} 
+        {...commandProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      <CommandInput placeholder={schema.placeholder || 'Type a command or search...'} />
+      <CommandList>
+        <CommandEmpty>{schema.emptyText || 'No results found.'}</CommandEmpty>
+        {schema.groups?.map((group, idx) => (
+          <CommandGroup key={idx} heading={group.heading}>
+            {group.items?.map((item, itemIdx) => (
+              <CommandItem key={itemIdx} value={item.value}>
+                {item.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        ))}
+      </CommandList>
+    </Command>
+  );
+  },
+  {
+    label: 'Command',
+    inputs: [
+      { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'emptyText', type: 'string', label: 'Empty Text' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      placeholder: 'Type a command or search...',
+      emptyText: 'No results found.',
+      groups: []
+    }
+  }
+);

package/src/renderers/form/date-picker.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 { DatePickerSchema } from '@object-ui/types';
 import { Calendar, Button, Popover, PopoverTrigger, PopoverContent, Label } from '../../ui';
@@ -35,8 +43,8 @@ ComponentRegistry.register('date-picker',
               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',
+                'w-full justify-start text-left font-normal',
+                !value && 'text-muted-foreground',
                 className
               )}
               {...triggerProps}

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

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';
@@ -118,11 +126,12 @@ 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)

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,23 +1,42 @@
+/**
+ * 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>
+    );
+  },
   {
     label: 'Input OTP',
     inputs: [

package/src/renderers/form/input.tsx

@@ -1,61 +1,68 @@
+/**
+ * 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, {
     label: 'Input Field',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
@@ -77,3 +84,35 @@ ComponentRegistry.register('input',
     }
   }
 );
+
+ComponentRegistry.register('email', 
+  (props: any) => <InputRenderer {...props} schema={{ ...props.schema, inputType: 'email' }} />,
+  {
+    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' }} />,
+  {
+    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';

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

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 {

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}

package/src/renderers/form/switch.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 { SwitchSchema } from '@object-ui/types';
 import { Switch, Label } from '../../ui';

package/src/renderers/form/textarea.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 { TextareaSchema } from '@object-ui/types';
 import { Textarea, Label } from '../../ui';

package/src/renderers/form/toggle.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 { ToggleSchema } from '@object-ui/types';
 import { Toggle, ToggleGroup, ToggleGroupItem } from '../../ui';