@object-ui/components 0.3.0 → 0.5.0

package/src/renderers/feedback/empty.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 { EmptySchema } from '@object-ui/types';
+import { InboxIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('empty', 
+  ({ schema, ...props }: { schema: EmptySchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...emptyProps
+    } = props;
+    
+    return (
+      <div 
+        className={cn('flex flex-col items-center justify-center p-8 text-center', schema.className)} 
+        {...emptyProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        <InboxIcon className="h-12 w-12 text-muted-foreground mb-4" />
+        <h3 className="text-lg font-semibold">{schema.title || 'No data'}</h3>
+        {schema.description && (
+          <p className="text-sm text-muted-foreground mt-2">{schema.description}</p>
+        )}
+      </div>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Empty',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title', defaultValue: 'No data' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      title: 'No data'
+    }
+  }
+);

package/src/renderers/feedback/index.ts

@@ -1,4 +1,16 @@
+/**
+ * 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 './progress';
 import './skeleton';
 import './toaster';
 import './loading';
+import './toast';
+import './spinner';
+import './empty';
+import './sonner';

package/src/renderers/feedback/loading.tsx

@@ -1,6 +1,14 @@
+/**
+ * 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 { LoadingSchema } from '@object-ui/types';
-import { Spinner } from '../../ui';
+import { Spinner } from '../../custom';
 import { cn } from '../../lib/utils';
 
 ComponentRegistry.register('loading', 
@@ -42,6 +50,7 @@ ComponentRegistry.register('loading',
     );
   },
   {
+    namespace: 'ui',
     label: 'Loading',
     inputs: [
       { name: 'text', type: 'string', label: 'Loading Text' },

package/src/renderers/feedback/progress.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 { ProgressSchema } from '@object-ui/types';
 import { Progress } from '../../ui';
@@ -7,6 +15,7 @@ ComponentRegistry.register('progress',
     <Progress value={schema.value} className={className} {...props} />
   ),
   {
+    namespace: 'ui',
     label: 'Progress',
     inputs: [
       { name: 'value', type: 'number', label: 'Value', defaultValue: 0 },

package/src/renderers/feedback/skeleton.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 { SkeletonSchema } from '@object-ui/types';
 import { Skeleton } from '../../ui';
@@ -7,6 +15,7 @@ ComponentRegistry.register('skeleton',
     <Skeleton className={className} {...props} style={{ width: schema.width, height: schema.height }} />
   ),
   {
+    namespace: 'ui',
     label: 'Skeleton',
     inputs: [
       { name: 'width', type: 'string', label: 'Width' },

package/src/renderers/feedback/sonner.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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 { SonnerSchema } from '@object-ui/types';
+import { toast } from 'sonner';
+import { Button } from '../../ui';
+
+ComponentRegistry.register('sonner', 
+  ({ schema, ...props }: { schema: SonnerSchema; [key: string]: any }) => {
+    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.message || schema.title || 'Notification', {
+        description: schema.description,
+      });
+    };
+    
+    return (
+      <Button onClick={showToast} variant={schema.buttonVariant} className={schema.className} {...props}>
+        {schema.buttonLabel || 'Show Toast'}
+      </Button>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Sonner Toast',
+    inputs: [
+      { name: 'message', type: 'string', label: 'Message' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'success', 'error', 'warning', 'info'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { name: 'buttonLabel', type: 'string', label: 'Button Label' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      message: 'Notification',
+      buttonLabel: 'Show Toast',
+      variant: 'default'
+    }
+  }
+);

package/src/renderers/feedback/spinner.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { SpinnerSchema } from '@object-ui/types';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('spinner', 
+  ({ schema, ...props }: { schema: SpinnerSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...spinnerProps
+    } = props;
+    
+    const sizeClasses = {
+      sm: 'h-4 w-4',
+      md: 'h-6 w-6',
+      lg: 'h-8 w-8',
+      xl: 'h-12 w-12'
+    };
+    
+    return (
+      <Loader2 
+        className={cn('animate-spin', sizeClasses[schema.size || 'md'], schema.className)} 
+        {...spinnerProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      />
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Spinner',
+    inputs: [
+      { 
+        name: 'size', 
+        type: 'enum', 
+        enum: ['sm', 'md', 'lg', 'xl'], 
+        defaultValue: 'md',
+        label: 'Size'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      size: 'md'
+    }
+  }
+);

package/src/renderers/feedback/toast.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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>
+    );
+  },
+  {
+    namespace: 'ui',
+    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,23 @@
+/**
+ * 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 />;
   },
   {
+    namespace: 'ui',
     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,8 +1,30 @@
+/**
+ * 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';
 import { renderChildren } from '../../lib/utils';
 import { forwardRef } from 'react';
+import { Loader2, icons, type LucideIcon } from 'lucide-react';
+
+// Helper to convert icon names to PascalCase (e.g., "arrow-right" -> "ArrowRight")
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+// Map of renamed icons in lucide-react
+const iconNameMap: Record<string, string> = {
+  'Home': 'House',
+};
 
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [key: string]: any }>(
   ({ schema, ...props }, ref) => {
@@ -14,17 +36,36 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [ke
         ...buttonProps 
     } = props;
 
+    // Resolve icon
+    let Icon: LucideIcon | null = null;
+    if (schema.icon) {
+      const iconName = toPascalCase(schema.icon);
+      const mappedIconName = iconNameMap[iconName] || iconName;
+      Icon = (icons as any)[mappedIconName] as LucideIcon;
+    }
+    
+    // Determine loading state
+    const isLoading = schema.loading || props.loading;
+    
+    // Determine disabled state
+    const isDisabled = schema.disabled || props.disabled || isLoading;
+
     return (
     <Button 
         ref={ref}
+        type={schema.buttonType || "button"}
         variant={schema.variant} 
         size={schema.size} 
         className={schema.className} 
+        disabled={isDisabled}
         {...buttonProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
     >
-      {schema.label || renderChildren(schema.body)}
+      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {!isLoading && Icon && schema.iconPosition !== 'right' && <Icon className="mr-2 h-4 w-4" />}
+      {schema.label || renderChildren(schema.body || schema.children)}
+      {!isLoading && Icon && schema.iconPosition === 'right' && <Icon className="ml-2 h-4 w-4" />}
     </Button>
   );
   }
@@ -33,6 +74,7 @@ ButtonRenderer.displayName = 'ButtonRenderer';
 
 ComponentRegistry.register('button', ButtonRenderer,
   {
+    namespace: 'ui',
     label: 'Button',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', defaultValue: 'Button' },

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';
@@ -12,6 +20,7 @@ ComponentRegistry.register('calendar',
     />
   ),
   {
+    namespace: 'ui',
     label: 'Calendar',
     inputs: [
       { name: 'mode', type: 'enum', enum: ['default', 'single', 'multiple', 'range'], defaultValue: 'single', label: 'Mode' },

package/src/renderers/form/checkbox.tsx

@@ -1,41 +1,71 @@
+/**
+ * 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';
+import { cn } from '../../lib/utils';
+import React from 'react';
+
+const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; 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, 
+      ...checkboxProps 
+  } = props;
 
-ComponentRegistry.register('checkbox', 
-  ({ schema, className, ...props }: { schema: CheckboxSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...checkboxProps 
-    } = props;
+  const handleCheckedChange = (checked: boolean) => {
+    if (onChange) {
+      onChange(checked);
+    }
+  };
 
-    return (
+  return (
     <div 
-        className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}
+        className={cn("flex items-center space-x-2", schema.wrapperClass)}
         data-obj-id={dataObjId}
         data-obj-type={dataObjType}
         style={style}
     >
-      <Checkbox id={schema.id} className={className} {...checkboxProps} />
-      <Label htmlFor={schema.id} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <Checkbox 
+        id={schema.id} 
+        className={className} 
+        checked={value ?? schema.checked ?? false}
+        defaultChecked={value === undefined ? schema.defaultChecked : undefined}
+        onCheckedChange={handleCheckedChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        name={schema.name}
+        {...checkboxProps} 
+      />
+      <Label htmlFor={schema.id} className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>
         {schema.label}
       </Label>
     </div>
   );
-  },
+};
+
+ComponentRegistry.register('checkbox', CheckboxRenderer,
   {
+    namespace: 'ui',
     label: 'Checkbox',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', required: true },
       { name: 'id', type: 'string', label: 'ID', required: true },
-      { name: 'checked', type: 'boolean', label: 'Checked' }
+      { name: 'checked', type: 'boolean', label: 'Checked' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' }
     ],
     defaultProps: {
       label: 'Checkbox label',
-      id: 'checkbox-field' // Will be made unique by designer's ensureNodeIds
+      id: 'checkbox-field'
     }
   }
 );

package/src/renderers/form/combobox.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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 '../../custom';
+
+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 }}
+    />
+  );
+  },
+  {
+    namespace: 'ui',
+    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,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 { 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>
+  );
+  },
+  {
+    namespace: 'ui',
+    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}
@@ -58,6 +66,7 @@ ComponentRegistry.register('date-picker',
     );
   },
   {
+    namespace: 'ui',
     label: 'Date Picker',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },