@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/form/input.tsx

@@ -1,121 +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 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';
-
-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;
-
-  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' },
-      { name: 'name', type: 'string', label: 'Field Name' },
-      { name: 'placeholder', type: 'string', label: 'Placeholder' },
-      { 
-        name: 'inputType', 
-        type: 'enum', 
-        label: 'Type',
-        enum: ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'time', 'datetime-local'],
-        defaultValue: 'text'
-      },
-      { name: 'required', type: 'boolean', label: 'Required' },
-      { name: 'disabled', type: 'boolean', label: 'Disabled' },
-      { name: 'description', type: 'string', label: 'Description' }
-    ],
-    defaultProps: {
-      inputType: 'text'
-    }
-  }
-);
-
-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,45 +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 { LabelSchema } from '@object-ui/types';
-import { Label } from '../../ui';
-
-ComponentRegistry.register('label', 
-  ({ schema, className, ...props }: { schema: LabelSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...labelProps 
-    } = props;
-
-    return (
-      <Label 
-        className={className} 
-        {...labelProps}
-        // Apply designer props
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {schema.text || schema.label || schema.content}
-      </Label>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Label',
-    inputs: [
-      { name: 'text', type: 'string', label: 'Text', required: true },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      text: 'Label Text'
-    }
-  }
-);

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

@@ -1,63 +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 { RadioGroupSchema } from '@object-ui/types';
-import { RadioGroup, RadioGroupItem, Label } from '../../ui';
-
-ComponentRegistry.register('radio-group', 
-  ({ schema, className, ...props }: { schema: RadioGroupSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...radioProps 
-    } = props;
-
-    return (
-    <RadioGroup 
-        defaultValue={schema.defaultValue} 
-        className={className} 
-        {...radioProps}
-        // Apply designer props to the root element
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-    >
-      {schema.options?.map((item) => (
-        <div key={item.value} className="flex items-center space-x-2">
-          <RadioGroupItem value={item.value} id={`${schema.id}-${item.value}`} />
-          <Label htmlFor={`${schema.id}-${item.value}`}>{item.label}</Label>
-        </div>
-      ))}
-    </RadioGroup>
-  );
-  },
-  {
-    namespace: 'ui',
-    label: 'Radio Group',
-    inputs: [
-      { name: 'defaultValue', type: 'string', label: 'Default Value' },
-      { name: 'id', type: 'string', label: 'Group ID', required: true },
-      { 
-        name: 'options', 
-        type: 'array', 
-        label: 'Options',
-        description: 'Array of {label, value} objects'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      id: 'radio-group', // Will be made unique by designer's ensureNodeIds
-      options: [
-        { label: 'Option 1', value: 'option1' },
-        { label: 'Option 2', value: 'option2' },
-        { label: 'Option 3', value: 'option3' }
-      ]
-    }
-  }
-);

package/src/renderers/form/select.tsx

@@ -1,94 +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 { SelectSchema } from '@object-ui/types';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  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;
-
-  const handleValueChange = (newValue: string) => {
-    if (onChange) {
-      onChange(newValue);
-    }
-  };
-
-  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 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} 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', 
-        label: 'Options',
-        description: 'Array of {label, value} objects'
-      }
-    ],
-    defaultProps: {
-      label: 'Select an option',
-      placeholder: 'Choose...',
-      options: [
-        { label: 'Option 1', value: 'option1' },
-        { label: 'Option 2', value: 'option2' },
-        { label: 'Option 3', value: 'option3' }
-      ]
-    }
-  }
-);

package/src/renderers/form/slider.tsx

@@ -1,61 +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 { SliderSchema } from '@object-ui/types';
-import { Slider } from '../../ui';
-
-ComponentRegistry.register('slider', 
-  ({ schema, className, ...props }: { schema: SliderSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...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={defaultValue} 
-      max={schema.max} 
-      min={schema.min}
-      step={schema.step}
-      className={className} 
-      {...sliderProps} 
-      // Apply designer props
-      {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-    />
-  );
-  },
-  {
-    namespace: 'ui',
-    label: 'Slider',
-    inputs: [
-      { name: 'defaultValue', type: 'array', label: 'Default Value', defaultValue: [50] },
-      { name: 'max', type: 'number', label: 'Max', defaultValue: 100 },
-      { name: 'min', type: 'number', label: 'Min', defaultValue: 0 },
-      { name: 'step', type: 'number', label: 'Step', defaultValue: 1 },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      defaultValue: [50],
-      max: 100,
-      min: 0,
-      step: 1,
-      className: 'w-full'
-    }
-  }
-);

package/src/renderers/form/switch.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 { SwitchSchema } from '@object-ui/types';
-import { Switch, Label } from '../../ui';
-
-ComponentRegistry.register('switch', 
-  ({ schema, className, ...props }: { schema: SwitchSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...switchProps 
-    } = props;
-
-    return (
-    <div 
-        className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}
-        data-obj-id={dataObjId}
-        data-obj-type={dataObjType}
-        style={style}
-    >
-      <Switch id={schema.id} className={className} {...switchProps} />
-      <Label htmlFor={schema.id}>{schema.label}</Label>
-    </div>
-  );
-  },
-  {
-    namespace: 'ui',
-    label: 'Switch',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label', required: true },
-      { name: 'id', type: 'string', label: 'ID', required: true },
-      { name: 'checked', type: 'boolean', label: 'Checked' }
-    ],
-    defaultProps: {
-      label: 'Switch label',
-      id: 'switch-field' // Will be made unique by designer's ensureNodeIds
-    }
-  }
-);

package/src/renderers/form/textarea.tsx

@@ -1,76 +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 { TextareaSchema } from '@object-ui/types';
-import { Textarea, Label } from '../../ui';
-import { cn } from '../../lib/utils';
-import React from 'react';
-
-const TextareaRenderer = ({ schema, className, onChange, value, ...props }: { schema: TextareaSchema; 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<HTMLTextAreaElement>) => {
-    if (onChange) {
-      onChange(e.target.value);
-    }
-  };
-
-  // Extract designer-related props
-  const { 
-    'data-obj-id': dataObjId, 
-    'data-obj-type': dataObjType,
-    style, 
-    ...inputProps 
-  } = props;
-
-  return (
-    <div 
-      className={cn("grid w-full 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>}
-      <Textarea 
-        id={schema.id} 
-        name={schema.name}
-        placeholder={schema.placeholder} 
-        className={className} 
-        disabled={schema.disabled}
-        readOnly={schema.readOnly}
-        required={schema.required}
-        rows={schema.rows}
-        value={value ?? schema.value ?? ''}
-        defaultValue={value === undefined ? schema.defaultValue : undefined}
-        onChange={handleChange}
-        {...inputProps} 
-      />
-    </div>
-  );
-};
-
-ComponentRegistry.register('textarea', TextareaRenderer,
-  {
-    namespace: 'ui',
-    label: 'Textarea',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label' },
-      { name: 'placeholder', type: 'string', label: 'Placeholder' },
-      { name: 'rows', type: 'number', label: 'Rows' },
-      { name: 'required', type: 'boolean', label: 'Required' },
-      { name: 'disabled', type: 'boolean', label: 'Disabled' },
-      { name: 'id', type: 'string', label: 'ID', required: true }
-    ],
-    defaultProps: {
-      label: 'Textarea label',
-      placeholder: 'Enter text here...',
-      rows: 3,
-      id: 'textarea-field'
-    }
-  }
-);

package/src/renderers/form/toggle.tsx

@@ -1,42 +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 { ToggleSchema } from '@object-ui/types';
-import { Toggle } from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('toggle', 
-  ({ schema, ...props }: { schema: ToggleSchema; [key: string]: any }) => (
-    <Toggle 
-      variant={schema.variant} 
-      size={schema.size} 
-      pressed={schema.pressed}
-      aria-label={schema.ariaLabel}
-      {...props}
-    >
-      {schema.label || renderChildren(schema.children)}
-    </Toggle>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Toggle',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label' },
-      { name: 'pressed', type: 'boolean', label: 'Pressed' },
-      { name: 'variant', type: 'enum', enum: ['default', 'outline'], defaultValue: 'default', label: 'Variant' },
-      { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' },
-      { name: 'ariaLabel', type: 'string', label: 'Aria Label' }
-    ],
-    defaultProps: {
-      label: 'Toggle',
-      variant: 'default',
-      size: 'default'
-    }
-  }
-);

package/src/renderers/index.ts

@@ -1,18 +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 './basic';
-import './form';
-import './layout';
-import './navigation';
-import './data-display';
-import './feedback';
-import './overlay';
-import './disclosure';
-import './complex';
-import './action';

package/src/renderers/layout/aspect-ratio.tsx

@@ -1,51 +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 { AspectRatioSchema } from '@object-ui/types';
-import { AspectRatio } from '../../ui/aspect-ratio';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('aspect-ratio', 
-  ({ schema, ...props }: { schema: AspectRatioSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...aspectRatioProps
-    } = props;
-    
-    return (
-      <AspectRatio 
-        ratio={schema.ratio || 16 / 9}
-        className={schema.className} 
-        {...aspectRatioProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {schema.image ? (
-          <img src={schema.image} alt={schema.alt || ''} loading="lazy" className="rounded-md object-cover w-full h-full" />
-        ) : (
-          renderChildren(schema.children || schema.body)
-        )}
-      </AspectRatio>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Aspect Ratio',
-    inputs: [
-      { name: 'ratio', type: 'number', label: 'Ratio', defaultValue: 16/9 },
-      { name: 'image', type: 'string', label: 'Image URL' },
-      { name: 'alt', type: 'string', label: 'Alt Text' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      ratio: 16 / 9
-    }
-  }
-);