@object-ui/fields 0.3.1 → 0.5.0

package/src/index.tsx

@@ -8,9 +8,48 @@
 
 import React from 'react';
 import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
+import { ComponentRegistry } from '@object-ui/core';
 import { Badge, Avatar, AvatarFallback, Button } from '@object-ui/components';
 import { Check, X } from 'lucide-react';
 
+import { TextField } from './widgets/TextField';
+import { NumberField } from './widgets/NumberField';
+import { BooleanField } from './widgets/BooleanField';
+import { SelectField } from './widgets/SelectField';
+import { DateField } from './widgets/DateField';
+import { EmailField } from './widgets/EmailField';
+import { PhoneField } from './widgets/PhoneField';
+import { UrlField } from './widgets/UrlField';
+import { CurrencyField } from './widgets/CurrencyField';
+import { TextAreaField } from './widgets/TextAreaField';
+import { RichTextField } from './widgets/RichTextField';
+import { LookupField } from './widgets/LookupField';
+import { DateTimeField } from './widgets/DateTimeField';
+import { TimeField } from './widgets/TimeField';
+import { PercentField } from './widgets/PercentField';
+import { PasswordField } from './widgets/PasswordField';
+import { FileField } from './widgets/FileField';
+import { ImageField } from './widgets/ImageField';
+import { LocationField } from './widgets/LocationField';
+import { FormulaField } from './widgets/FormulaField';
+import { SummaryField } from './widgets/SummaryField';
+import { AutoNumberField } from './widgets/AutoNumberField';
+import { UserField } from './widgets/UserField';
+import { ObjectField } from './widgets/ObjectField';
+import { VectorField } from './widgets/VectorField';
+import { GridField } from './widgets/GridField';
+// New widgets according to @objectstack/spec
+import { ColorField } from './widgets/ColorField';
+import { SliderField } from './widgets/SliderField';
+import { RatingField } from './widgets/RatingField';
+import { CodeField } from './widgets/CodeField';
+import { AvatarField } from './widgets/AvatarField';
+import { AddressField } from './widgets/AddressField';
+import { GeolocationField } from './widgets/GeolocationField';
+import { SignatureField } from './widgets/SignatureField';
+import { QRCodeField } from './widgets/QRCodeField';
+import { MasterDetailField } from './widgets/MasterDetailField';
+
 /**
  * Cell renderer props
  */
@@ -519,54 +558,49 @@ registerFieldRenderer('select', SelectCellRenderer);
 export function mapFieldTypeToFormType(fieldType: string): string {
   const typeMap: Record<string, string> = {
     // Text-based fields
-    text: 'input',
-    textarea: 'textarea',
-    markdown: 'textarea', // Markdown editor (fallback to textarea)
-    html: 'textarea', // Rich text editor (fallback to textarea)
+    text: 'field:text',
+    textarea: 'field:textarea',
+    markdown: 'field:markdown', // Markdown editor (fallback to textarea)
+    html: 'field:html', // Rich text editor (fallback to textarea)
     
     // Numeric fields
-    number: 'input',
-    currency: 'input',
-    percent: 'input',
+    number: 'field:number',
+    currency: 'field:currency',
+    percent: 'field:percent',
     
     // Date/Time fields
-    date: 'date-picker',
-    datetime: 'date-picker',
-    time: 'input', // Time picker (fallback to input with type="time")
+    date: 'field:date',
+    datetime: 'field:datetime',
+    time: 'field:time',
     
     // Boolean
-    boolean: 'switch',
+    boolean: 'field:boolean',
     
     // Selection fields
-    select: 'select',
-    lookup: 'select',
-    master_detail: 'select',
+    select: 'field:select',
+    lookup: 'field:lookup',
+    master_detail: 'field:master_detail',
     
     // Contact fields
-    email: 'input',
-    phone: 'input',
-    url: 'input',
+    email: 'field:email',
+    phone: 'field:phone',
+    url: 'field:url',
     
     // File fields
-    file: 'file-upload',
-    image: 'file-upload',
+    file: 'field:file',
+    image: 'field:image',
     
     // Special fields
-    password: 'input',
-    location: 'input', // Location/map field (fallback to input)
+    password: 'field:password',
+    location: 'field:location', // Location/map field (fallback to input)
     
     // Auto-generated/computed fields (typically read-only)
-    formula: 'input',
-    summary: 'input',
-    auto_number: 'input',
-    
-    // Complex data types
-    object: 'input', // JSON object (fallback to input)
-    vector: 'input', // Vector/embedding data (fallback to input)
-    grid: 'input', // Grid/table data (fallback to input)
+    formula: 'field:formula',
+    summary: 'field:summary',
+    auto_number: 'field:auto_number',
   };
 
-  return typeMap[fieldType] || 'input';
+  return typeMap[fieldType] || 'field:text';
 }
 
 /**
@@ -714,50 +748,223 @@ export function evaluateCondition(condition: any, formData: any): boolean {
   return true;
 }
 
-import { ComponentRegistry } from '@object-ui/core';
-import { TextField } from './widgets/TextField';
-import { NumberField } from './widgets/NumberField';
-import { BooleanField } from './widgets/BooleanField';
-import { SelectField } from './widgets/SelectField';
-import { DateField } from './widgets/DateField';
-import { EmailField } from './widgets/EmailField';
-import { PhoneField } from './widgets/PhoneField';
-import { UrlField } from './widgets/UrlField';
-import { CurrencyField } from './widgets/CurrencyField';
-import { TextAreaField } from './widgets/TextAreaField';
-import { RichTextField } from './widgets/RichTextField';
-import { LookupField } from './widgets/LookupField';
+// Create wrapper renderers for field widgets to work with ComponentDemo
+function createFieldRenderer(FieldWidget: React.ComponentType<any>) {
+  const FieldRenderer: React.FC<any> = ({ schema, className, value: initialValue, ...props }) => {
+    const [value, setValue] = React.useState(initialValue ?? schema?.value ?? '');
+    
+    const field = {
+      name: schema?.name || 'field',
+      label: schema?.label,
+      type: schema?.type,
+      placeholder: schema?.placeholder,
+      required: schema?.required,
+      readonly: schema?.readonly || schema?.readOnly,
+      help: schema?.help,
+      description: schema?.description,
+      defaultValue: schema?.defaultValue || schema?.value,
+      ...schema,
+    };
 
-export function registerFields() {
+    const handleChange = React.useCallback((newValue: any) => {
+      setValue(newValue);
+      if (props.onChange) {
+        props.onChange(newValue);
+      }
+    }, [props]);
+
+    const readonly = schema?.readonly || schema?.readOnly || false;
+
+    return (
+      <div 
+        className="grid w-full items-center gap-1.5"
+        data-obj-id={schema?.id}
+        data-obj-type={schema?.type}
+      >
+        {schema?.label && (
+          <label htmlFor={schema.id} className={schema.required ? "after:content-['*'] after:ml-0.5 after:text-red-500" : ""}>
+            {schema.label}
+          </label>
+        )}
+        <FieldWidget
+          value={value}
+          onChange={handleChange}
+          field={field}
+          readonly={readonly}
+          className={className}
+        />
+        {schema?.description && (
+          <p className="text-sm text-gray-500">{schema.description}</p>
+        )}
+      </div>
+    );
+  };
+  
+  FieldRenderer.displayName = `FieldRenderer(${FieldWidget.displayName || FieldWidget.name || 'Component'})`;
+  
+  return FieldRenderer;
+}
+
+/**
+ * Field widget map for lazy loading
+ * Maps field type to widget component
+ */
+const fieldWidgetMap: Record<string, () => Promise<{ default: React.ComponentType<any> }>> = {
   // Basic fields
-  ComponentRegistry.register('text', TextField);
-  ComponentRegistry.register('textarea', TextAreaField);
-  ComponentRegistry.register('number', NumberField);
-  ComponentRegistry.register('boolean', BooleanField);
-  ComponentRegistry.register('select', SelectField);
-  ComponentRegistry.register('date', DateField);
+  'text': () => import('./widgets/TextField').then(m => ({ default: m.TextField })),
+  'textarea': () => import('./widgets/TextAreaField').then(m => ({ default: m.TextAreaField })),
+  'number': () => import('./widgets/NumberField').then(m => ({ default: m.NumberField })),
+  'boolean': () => import('./widgets/BooleanField').then(m => ({ default: m.BooleanField })),
+  'select': () => import('./widgets/SelectField').then(m => ({ default: m.SelectField })),
+  'date': () => import('./widgets/DateField').then(m => ({ default: m.DateField })),
+  'datetime': () => import('./widgets/DateTimeField').then(m => ({ default: m.DateTimeField })),
+  'time': () => import('./widgets/TimeField').then(m => ({ default: m.TimeField })),
   
   // Contact fields
-  ComponentRegistry.register('email', EmailField);
-  ComponentRegistry.register('phone', PhoneField);
-  ComponentRegistry.register('url', UrlField);
+  'email': () => import('./widgets/EmailField').then(m => ({ default: m.EmailField })),
+  'phone': () => import('./widgets/PhoneField').then(m => ({ default: m.PhoneField })),
+  'url': () => import('./widgets/UrlField').then(m => ({ default: m.UrlField })),
   
   // Specialized fields
-  ComponentRegistry.register('currency', CurrencyField);
-  ComponentRegistry.register('markdown', RichTextField);
-  ComponentRegistry.register('html', RichTextField);
-  ComponentRegistry.register('lookup', LookupField);
-  ComponentRegistry.register('master_detail', LookupField);
-  
-  // Register with field: prefix for explicit field widgets
-  ComponentRegistry.register('field:text', TextField);
-  ComponentRegistry.register('field:textarea', TextAreaField);
-  ComponentRegistry.register('field:number', NumberField);
-  ComponentRegistry.register('field:email', EmailField);
-  ComponentRegistry.register('field:phone', PhoneField);
-  ComponentRegistry.register('field:url', UrlField);
-  ComponentRegistry.register('field:currency', CurrencyField);
-  ComponentRegistry.register('field:lookup', LookupField);
+  'currency': () => import('./widgets/CurrencyField').then(m => ({ default: m.CurrencyField })),
+  'percent': () => import('./widgets/PercentField').then(m => ({ default: m.PercentField })),
+  'password': () => import('./widgets/PasswordField').then(m => ({ default: m.PasswordField })),
+  'markdown': () => import('./widgets/RichTextField').then(m => ({ default: m.RichTextField })),
+  'html': () => import('./widgets/RichTextField').then(m => ({ default: m.RichTextField })),
+  'lookup': () => import('./widgets/LookupField').then(m => ({ default: m.LookupField })),
+  'master_detail': () => import('./widgets/MasterDetailField').then(m => ({ default: m.MasterDetailField })),
+  
+  // File fields
+  'file': () => import('./widgets/FileField').then(m => ({ default: m.FileField })),
+  'image': () => import('./widgets/ImageField').then(m => ({ default: m.ImageField })),
+  
+  // Location field
+  'location': () => import('./widgets/LocationField').then(m => ({ default: m.LocationField })),
+  
+  // Computed/Read-only fields
+  'formula': () => import('./widgets/FormulaField').then(m => ({ default: m.FormulaField })),
+  'summary': () => import('./widgets/SummaryField').then(m => ({ default: m.SummaryField })),
+  'auto_number': () => import('./widgets/AutoNumberField').then(m => ({ default: m.AutoNumberField })),
+  
+  // User fields
+  'user': () => import('./widgets/UserField').then(m => ({ default: m.UserField })),
+  'owner': () => import('./widgets/UserField').then(m => ({ default: m.UserField })),
+  
+  // Complex data types
+  'object': () => import('./widgets/ObjectField').then(m => ({ default: m.ObjectField })),
+  'vector': () => import('./widgets/VectorField').then(m => ({ default: m.VectorField })),
+  'grid': () => import('./widgets/GridField').then(m => ({ default: m.GridField })),
+  
+  // Additional field types from @objectstack/spec
+  'color': () => import('./widgets/ColorField').then(m => ({ default: m.ColorField })),
+  'slider': () => import('./widgets/SliderField').then(m => ({ default: m.SliderField })),
+  'rating': () => import('./widgets/RatingField').then(m => ({ default: m.RatingField })),
+  'code': () => import('./widgets/CodeField').then(m => ({ default: m.CodeField })),
+  'avatar': () => import('./widgets/AvatarField').then(m => ({ default: m.AvatarField })),
+  'address': () => import('./widgets/AddressField').then(m => ({ default: m.AddressField })),
+  'geolocation': () => import('./widgets/GeolocationField').then(m => ({ default: m.GeolocationField })),
+  'signature': () => import('./widgets/SignatureField').then(m => ({ default: m.SignatureField })),
+  'qrcode': () => import('./widgets/QRCodeField').then(m => ({ default: m.QRCodeField })),
+};
+
+/**
+ * Register a specific field type lazily
+ * @param fieldType - The field type to register (e.g., 'text', 'number')
+ * 
+ * @example
+ * // Register only the text field
+ * registerField('text');
+ */
+export function registerField(fieldType: string): void {
+  const loader = fieldWidgetMap[fieldType];
+  if (!loader) {
+    console.warn(`Unknown field type: ${fieldType}`);
+    return;
+  }
+  
+  // Create lazy component
+  const LazyFieldWidget = React.lazy(loader);
+  
+  // Register with field namespace - NO WRAPPER to allow form renderer to control label/layout
+  ComponentRegistry.register(fieldType, LazyFieldWidget, { namespace: 'field' });
+}
+
+/**
+ * Register all field types (for backward compatibility)
+ * This function auto-registers all field widgets on import.
+ * 
+ * For better tree-shaking, use registerField() to register only needed fields.
+ * 
+ * @example
+ * // Register all fields at once
+ * registerAllFields();
+ */
+export function registerAllFields(): void {
+  Object.keys(fieldWidgetMap).forEach(fieldType => {
+    registerField(fieldType);
+  });
+}
+
+/**
+ * Legacy function - kept for backward compatibility
+ * @deprecated Use registerAllFields() instead
+ */
+export function registerFields() {
+  // Basic fields - wrapped for documentation compatibility
+  ComponentRegistry.register('text', createFieldRenderer(TextField), { namespace: 'field' });
+  ComponentRegistry.register('textarea', createFieldRenderer(TextAreaField), { namespace: 'field' });
+  ComponentRegistry.register('number', createFieldRenderer(NumberField), { namespace: 'field' });
+  ComponentRegistry.register('boolean', createFieldRenderer(BooleanField), { namespace: 'field' });
+  ComponentRegistry.register('select', createFieldRenderer(SelectField), { namespace: 'field' });
+  ComponentRegistry.register('date', createFieldRenderer(DateField), { namespace: 'field' });
+  ComponentRegistry.register('datetime', createFieldRenderer(DateTimeField), { namespace: 'field' });
+  ComponentRegistry.register('time', createFieldRenderer(TimeField), { namespace: 'field' });
+  
+  // Contact fields - wrapped for documentation compatibility
+  ComponentRegistry.register('email', createFieldRenderer(EmailField), { namespace: 'field' });
+  ComponentRegistry.register('phone', createFieldRenderer(PhoneField), { namespace: 'field' });
+  ComponentRegistry.register('url', createFieldRenderer(UrlField), { namespace: 'field' });
+  
+  // Specialized fields - wrapped for documentation compatibility
+  ComponentRegistry.register('currency', createFieldRenderer(CurrencyField), { namespace: 'field' });
+  ComponentRegistry.register('percent', createFieldRenderer(PercentField), { namespace: 'field' });
+  ComponentRegistry.register('password', createFieldRenderer(PasswordField), { namespace: 'field' });
+  ComponentRegistry.register('markdown', createFieldRenderer(RichTextField), { namespace: 'field' });
+  ComponentRegistry.register('html', createFieldRenderer(RichTextField), { namespace: 'field' });
+  ComponentRegistry.register('lookup', createFieldRenderer(LookupField), { namespace: 'field' });
+  ComponentRegistry.register('master_detail', createFieldRenderer(MasterDetailField), { namespace: 'field' });
+  
+  // File fields
+  ComponentRegistry.register('file', createFieldRenderer(FileField), { namespace: 'field' });
+  ComponentRegistry.register('image', createFieldRenderer(ImageField), { namespace: 'field' });
+  
+  // Location field
+  ComponentRegistry.register('location', createFieldRenderer(LocationField), { namespace: 'field' });
+  
+  // Computed/Read-only fields
+  ComponentRegistry.register('formula', createFieldRenderer(FormulaField), { namespace: 'field' });
+  ComponentRegistry.register('summary', createFieldRenderer(SummaryField), { namespace: 'field' });
+  ComponentRegistry.register('auto_number', createFieldRenderer(AutoNumberField), { namespace: 'field' });
+  
+  // User fields
+  ComponentRegistry.register('user', createFieldRenderer(UserField), { namespace: 'field' });
+  ComponentRegistry.register('owner', createFieldRenderer(UserField), { namespace: 'field' });
+  
+  // Complex data types
+  ComponentRegistry.register('object', createFieldRenderer(ObjectField), { namespace: 'field' });
+  ComponentRegistry.register('vector', createFieldRenderer(VectorField), { namespace: 'field' });
+  ComponentRegistry.register('grid', createFieldRenderer(GridField), { namespace: 'field' });
+  
+  // NEW: Additional field types from @objectstack/spec
+  ComponentRegistry.register('color', createFieldRenderer(ColorField), { namespace: 'field' });
+  ComponentRegistry.register('slider', createFieldRenderer(SliderField), { namespace: 'field' });
+  ComponentRegistry.register('rating', createFieldRenderer(RatingField), { namespace: 'field' });
+  ComponentRegistry.register('code', createFieldRenderer(CodeField), { namespace: 'field' });
+  ComponentRegistry.register('avatar', createFieldRenderer(AvatarField), { namespace: 'field' });
+  ComponentRegistry.register('address', createFieldRenderer(AddressField), { namespace: 'field' });
+  ComponentRegistry.register('geolocation', createFieldRenderer(GeolocationField), { namespace: 'field' });
+  ComponentRegistry.register('signature', createFieldRenderer(SignatureField), { namespace: 'field' });
+  ComponentRegistry.register('qrcode', createFieldRenderer(QRCodeField), { namespace: 'field' });
 }
 
 export * from './widgets/types';
@@ -766,10 +973,38 @@ export * from './widgets/NumberField';
 export * from './widgets/BooleanField';
 export * from './widgets/SelectField';
 export * from './widgets/DateField';
+export * from './widgets/DateTimeField';
+export * from './widgets/TimeField';
 export * from './widgets/EmailField';
 export * from './widgets/PhoneField';
 export * from './widgets/UrlField';
 export * from './widgets/CurrencyField';
+export * from './widgets/PercentField';
+export * from './widgets/PasswordField';
 export * from './widgets/TextAreaField';
 export * from './widgets/RichTextField';
 export * from './widgets/LookupField';
+export * from './widgets/FileField';
+export * from './widgets/ImageField';
+export * from './widgets/LocationField';
+export * from './widgets/FormulaField';
+export * from './widgets/SummaryField';
+export * from './widgets/AutoNumberField';
+export * from './widgets/UserField';
+export * from './widgets/ObjectField';
+export * from './widgets/VectorField';
+export * from './widgets/GridField';
+// New widgets according to @objectstack/spec
+export * from './widgets/ColorField';
+export * from './widgets/SliderField';
+export * from './widgets/RatingField';
+export * from './widgets/CodeField';
+export * from './widgets/AvatarField';
+export * from './widgets/AddressField';
+export * from './widgets/GeolocationField';
+export * from './widgets/SignatureField';
+export * from './widgets/QRCodeField';
+export * from './widgets/MasterDetailField';
+
+// Initialize registry
+registerAllFields();