@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/feedback/loading.tsx

@@ -1,78 +0,0 @@
-/**
- * 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 '../../custom';
-import { cn } from '../../lib/utils';
-
-ComponentRegistry.register('loading', 
-  ({ schema, className, ...props }: { schema: LoadingSchema; className?: string; [key: string]: any }) => {
-    const size = schema.size || 'md';
-    const fullscreen = schema.fullscreen || false;
-    
-    const loadingContent = (
-      <div className={cn('flex flex-col items-center justify-center gap-2', className)}>
-        <Spinner 
-          className={cn(
-            size === 'sm' && 'h-4 w-4',
-            size === 'md' && 'h-8 w-8',
-            size === 'lg' && 'h-12 w-12',
-            size === ('xl' as any) && 'h-16 w-16'
-          )}
-        />
-        {schema.text && (
-          <p className="text-sm text-muted-foreground">{schema.text}</p>
-        )}
-      </div>
-    );
-
-    if (fullscreen) {
-      return (
-        <div 
-          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
-          {...props}
-        >
-          {loadingContent}
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex items-center justify-center p-8" {...props}>
-        {loadingContent}
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Loading',
-    inputs: [
-      { name: 'text', type: 'string', label: 'Loading Text' },
-      { 
-        name: 'size', 
-        type: 'enum', 
-        enum: ['sm', 'md', 'lg', 'xl'],
-        label: 'Size',
-        defaultValue: 'md'
-      },
-      { 
-        name: 'fullscreen', 
-        type: 'boolean', 
-        label: 'Fullscreen Overlay', 
-        defaultValue: false
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      text: 'Loading...',
-      size: 'md',
-      fullscreen: false
-    }
-  }
-);

package/src/renderers/feedback/progress.tsx

@@ -1,29 +0,0 @@
-/**
- * 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';
-
-ComponentRegistry.register('progress', 
-  ({ schema, className, ...props }: { schema: ProgressSchema; className?: string; [key: string]: any }) => (
-    <Progress value={schema.value} className={className} {...props} />
-  ),
-  {
-    namespace: 'ui',
-    label: 'Progress',
-    inputs: [
-      { name: 'value', type: 'number', label: 'Value', defaultValue: 0 },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      value: 50,
-      className: 'w-full'
-    }
-  }
-);

package/src/renderers/feedback/skeleton.tsx

@@ -1,31 +0,0 @@
-/**
- * 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';
-
-ComponentRegistry.register('skeleton', 
-  ({ schema, className, ...props }: { schema: SkeletonSchema; className?: string; [key: string]: any }) => (
-    <Skeleton className={className} {...props} style={{ width: schema.width, height: schema.height }} />
-  ),
-  {
-    namespace: 'ui',
-    label: 'Skeleton',
-    inputs: [
-      { name: 'width', type: 'string', label: 'Width' },
-      { name: 'height', type: 'string', label: 'Height' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      width: '100%',
-      height: '20px',
-      className: 'rounded-md'
-    }
-  }
-);

package/src/renderers/feedback/sonner.tsx

@@ -1,56 +0,0 @@
-/**
- * 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

@@ -1,55 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-/**
- * 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,23 +0,0 @@
-/**
- * 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/sonner';
-
-ComponentRegistry.register('toaster', 
-  () => {
-    return <SonnerToaster />;
-  },
-  {
-    namespace: 'ui',
-    label: 'Toaster',
-    inputs: [],
-    defaultProps: {}
-  }
-);

package/src/renderers/form/button.tsx

@@ -1,103 +0,0 @@
-/**
- * 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) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...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 }}
-    >
-      {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>
-  );
-  }
-);
-ButtonRenderer.displayName = 'ButtonRenderer';
-
-ComponentRegistry.register('button', ButtonRenderer,
-  {
-    namespace: 'ui',
-    label: 'Button',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label', defaultValue: 'Button' },
-      { 
-        name: 'variant', 
-        type: 'enum', 
-        label: 'Variant',
-        enum: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'],
-        defaultValue: 'default'
-      },
-      {
-        name: 'size',
-        type: 'enum',
-        label: 'Size',
-        enum: ['default', 'sm', 'lg', 'icon'],
-        defaultValue: 'default'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class', advanced: true }
-    ],
-    defaultProps: {
-      label: 'Button',
-      variant: 'default',
-      size: 'default'
-    }
-  }
-);

package/src/renderers/form/calendar.tsx

@@ -1,34 +0,0 @@
-/**
- * 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';
-
-ComponentRegistry.register('calendar', 
-  ({ schema, className, ...props }: { schema: CalendarSchema; className?: string; [key: string]: any }) => (
-    <Calendar
-      mode={(schema.mode || "single") as any}
-      selected={(schema.value || schema.defaultValue) as any}
-      className={className}
-      {...props}
-    />
-  ),
-  {
-    namespace: 'ui',
-    label: 'Calendar',
-    inputs: [
-      { name: 'mode', type: 'enum', enum: ['default', 'single', 'multiple', 'range'], defaultValue: 'single', label: 'Mode' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      mode: 'single',
-      className: 'rounded-md border'
-    }
-  }
-);

package/src/renderers/form/checkbox.tsx

@@ -1,71 +0,0 @@
-/**
- * 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;
-
-  const handleCheckedChange = (checked: boolean) => {
-    if (onChange) {
-      onChange(checked);
-    }
-  };
-
-  return (
-    <div 
-        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} 
-        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: 'required', type: 'boolean', label: 'Required' },
-      { name: 'disabled', type: 'boolean', label: 'Disabled' }
-    ],
-    defaultProps: {
-      label: 'Checkbox label',
-      id: 'checkbox-field'
-    }
-  }
-);

package/src/renderers/form/combobox.tsx

@@ -1,48 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-/**
- * 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: []
-    }
-  }
-);