@object-ui/react 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @object-ui/react@0.5.0 build /home/runner/work/objectui/objectui/packages/react
+> tsc
+

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @object-ui/react
 
+## 0.3.1
+
+### Patch Changes
+
+- Maintenance release - Documentation and build improvements
+- Updated dependencies
+  - @object-ui/core@0.3.1
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/LazyPluginLoader.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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';
+export interface LazyPluginOptions {
+    /**
+     * Fallback component to show while loading
+     */
+    fallback?: React.ReactNode;
+}
+/**
+ * Create a lazy-loaded plugin component with Suspense wrapper
+ *
+ * @param importFn - Dynamic import function that returns a module with default export
+ * @param options - Configuration options for the lazy plugin
+ * @returns A component that lazy loads the plugin
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid')
+ * );
+ *
+ * // With custom fallback
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   { fallback: <div>Loading grid...</div> }
+ * );
+ * ```
+ */
+export declare function createLazyPlugin<P extends object = any>(importFn: () => Promise<{
+    default: React.ComponentType<P>;
+}>, options?: LazyPluginOptions): React.ComponentType<P>;

package/dist/LazyPluginLoader.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { lazy, Suspense } from 'react';
+/**
+ * Create a lazy-loaded plugin component with Suspense wrapper
+ *
+ * @param importFn - Dynamic import function that returns a module with default export
+ * @param options - Configuration options for the lazy plugin
+ * @returns A component that lazy loads the plugin
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid')
+ * );
+ *
+ * // With custom fallback
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   { fallback: <div>Loading grid...</div> }
+ * );
+ * ```
+ */
+export function createLazyPlugin(importFn, options) {
+    const LazyComponent = lazy(importFn);
+    const PluginWrapper = (props) => (_jsx(Suspense, { fallback: options?.fallback || null, children: _jsx(LazyComponent, { ...props }) }));
+    return PluginWrapper;
+}

package/dist/SchemaRenderer.d.ts

@@ -1,3 +1,10 @@
+/**
+ * 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 { SchemaNode } from '@object-ui/core';
 export declare const SchemaRenderer: React.ForwardRefExoticComponent<Omit<{

package/dist/SchemaRenderer.js

@@ -1,24 +1,63 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
+/**
+ * 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, { forwardRef, useContext, useMemo } from 'react';
+import { ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
+import { SchemaRendererContext } from './context/SchemaRendererContext';
 export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
-    if (!schema)
+    const context = useContext(SchemaRendererContext);
+    const dataSource = context?.dataSource || {};
+    // Evaluate schema expressions against the data source
+    const evaluatedSchema = useMemo(() => {
+        if (!schema || typeof schema === 'string')
+            return schema;
+        const evaluator = new ExpressionEvaluator({ data: dataSource });
+        // Shallow copy
+        const newSchema = { ...schema };
+        // COMPAT: Hoist 'properties' up to schema level
+        // This allows support for strict configs that wrap all props in 'properties'
+        if (newSchema.properties) {
+            Object.assign(newSchema, newSchema.properties);
+        }
+        // Evaluate 'content' (common in Text, Button)
+        if (typeof newSchema.content === 'string') {
+            newSchema.content = evaluator.evaluate(newSchema.content);
+        }
+        // Evaluate 'props'
+        if (newSchema.props) {
+            const newProps = { ...newSchema.props };
+            for (const [key, val] of Object.entries(newProps)) {
+                newProps[key] = evaluator.evaluate(val);
+            }
+            newSchema.props = newProps;
+        }
+        return newSchema;
+    }, [schema, dataSource]);
+    if (!evaluatedSchema)
         return null;
     // If schema is just a string, render it as text
-    if (typeof schema === 'string')
-        return _jsx(_Fragment, { children: schema });
-    const Component = ComponentRegistry.get(schema.type);
+    if (typeof evaluatedSchema === 'string')
+        return _jsx(_Fragment, { children: evaluatedSchema });
+    const Component = ComponentRegistry.get(evaluatedSchema.type);
     if (!Component) {
-        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: schema.type }), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(schema, null, 2) })] }));
+        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type }), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
     }
     // Note: We don't forward the ref to the Component because components in the registry
     // may not support refs. The SchemaRenderer itself can still receive refs for its own use.
+    // Extract schema metadata properties that should NOT be passed as React props
+    const { type: _type, children: _children, body: _body, schema: _schema, visible: _visible, visibleOn: _visibleOn, hidden: _hidden, hiddenOn: _hiddenOn, disabled: _disabled, disabledOn: _disabledOn, ...componentProps } = evaluatedSchema;
     return React.createElement(Component, {
-        schema,
-        ...(schema.props || {}),
-        className: schema.className,
-        'data-obj-id': schema.id,
-        'data-obj-type': schema.type,
+        schema: evaluatedSchema,
+        ...componentProps, // Spread non-metadata schema properties as props
+        ...(evaluatedSchema.props || {}), // Override with explicit props if provided
+        className: evaluatedSchema.className,
+        'data-obj-id': evaluatedSchema.id,
+        'data-obj-type': evaluatedSchema.type,
         ...props
     });
 });

package/dist/__tests__/LazyPluginLoader.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export {};

package/dist/__tests__/LazyPluginLoader.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { createLazyPlugin } from '../LazyPluginLoader';
+describe('createLazyPlugin', () => {
+    it('should create a lazy-loaded component', async () => {
+        const TestComponent = () => _jsx("div", { children: "Test Component" });
+        const LazyComponent = createLazyPlugin(() => Promise.resolve({ default: TestComponent }));
+        render(_jsx(LazyComponent, {}));
+        await waitFor(() => {
+            expect(screen.getByText('Test Component')).toBeInTheDocument();
+        });
+    });
+    it('should show custom fallback while loading', async () => {
+        const TestComponent = () => _jsx("div", { children: "Test Component" });
+        const LazyComponent = createLazyPlugin(() => new Promise((resolve) => {
+            setTimeout(() => resolve({ default: TestComponent }), 100);
+        }), { fallback: _jsx("div", { children: "Loading..." }) });
+        render(_jsx(LazyComponent, {}));
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByText('Test Component')).toBeInTheDocument();
+        });
+    });
+    it('should pass props to the lazy component', async () => {
+        const TestComponent = ({ message }) => _jsx("div", { children: message });
+        const LazyComponent = createLazyPlugin(() => Promise.resolve({ default: TestComponent }));
+        render(_jsx(LazyComponent, { message: "Hello World" }));
+        await waitFor(() => {
+            expect(screen.getByText('Hello World')).toBeInTheDocument();
+        });
+    });
+    it('should handle loading errors gracefully', async () => {
+        // Mock console.error to avoid noise in test output
+        const originalError = console.error;
+        console.error = vi.fn();
+        const LazyComponent = createLazyPlugin(() => Promise.reject(new Error('Load error')));
+        expect(() => render(_jsx(LazyComponent, {}))).not.toThrow();
+        // Restore console.error
+        console.error = originalError;
+    });
+});

package/dist/components/form/FieldFactory.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 { UseFormReturn } from 'react-hook-form';
+import type { FormField } from '@objectstack/spec/ui';
+/**
+ * Extended form field with additional properties for complex widgets
+ * These properties are not part of the standard FormField schema but may be
+ * provided by specific implementations
+ */
+export interface ExtendedFormField extends FormField {
+    multiple?: boolean;
+    accept?: string[];
+    options?: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+}
+export interface FieldFactoryProps {
+    /**
+     * Field configuration from FormFieldSchema
+     */
+    field: FormField;
+    /**
+     * React Hook Form methods
+     */
+    methods: UseFormReturn<any>;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * FieldFactory component that renders different input types based on
+ * the widget property or field type
+ */
+export declare const FieldFactory: React.FC<FieldFactoryProps>;

package/dist/components/form/FieldFactory.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FieldFactory component that renders different input types based on
+ * the widget property or field type
+ */
+export const FieldFactory = ({ field, methods, disabled = false, }) => {
+    const { register, formState: { errors } } = methods;
+    // Cast to extended field for properties not in base schema
+    const extendedField = field;
+    // Determine the widget type
+    const widgetType = field.widget || 'text';
+    const fieldName = field.field;
+    const error = errors[fieldName];
+    // Helper function to handle multiple select value conversion
+    const handleMultipleSelectValue = (value) => {
+        if (extendedField.multiple && value instanceof HTMLCollection) {
+            return Array.from(value).map((opt) => opt.value);
+        }
+        return value;
+    };
+    // Handle conditional visibility
+    // Note: visibleOn expression evaluation is not yet implemented
+    // Fields are always visible unless explicitly hidden
+    // Skip if explicitly hidden
+    if (field.hidden) {
+        return null;
+    }
+    // Common field wrapper
+    const renderField = (input) => (_jsxs("div", { className: "space-y-2", children: [field.label && (_jsxs("label", { htmlFor: fieldName, className: "block text-sm font-medium text-gray-700", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), input, field.helpText && (_jsx("p", { className: "text-sm text-gray-500", children: field.helpText })), error && (_jsx("p", { className: "text-sm text-red-600", children: error.message }))] }));
+    // Render based on widget type
+    switch (widgetType.toLowerCase()) {
+        case 'text':
+        case 'string':
+        case 'email':
+        case 'password':
+        case 'url':
+        case 'tel':
+            return renderField(_jsx("input", { id: fieldName, type: widgetType === 'string' ? 'text' : widgetType, placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'number':
+        case 'integer':
+        case 'float':
+            return renderField(_jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: widgetType === 'integer' ? '1' : 'any', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    valueAsNumber: true,
+                }) }));
+        case 'checkbox':
+        case 'boolean':
+            return (_jsxs("div", { className: "flex items-start space-x-2", children: [_jsx("input", { id: fieldName, type: "checkbox", disabled: disabled, className: "mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50", ...register(fieldName) }), _jsxs("div", { className: "flex-1", children: [field.label && (_jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-gray-700", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), field.helpText && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: field.helpText })), error && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: error.message }))] })] }));
+        case 'textarea':
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder, disabled: disabled, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'select':
+        case 'dropdown':
+            return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    setValueAs: handleMultipleSelectValue,
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+        case 'date':
+            return renderField(_jsx("input", { id: fieldName, type: "date", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'datetime':
+        case 'datetime-local':
+            return renderField(_jsx("input", { id: fieldName, type: "datetime-local", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'time':
+            return renderField(_jsx("input", { id: fieldName, type: "time", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'currency':
+            return renderField(_jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-3 top-2 text-gray-500", children: "$" }), _jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: "0.01", className: "w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                            required: field.required ? `${field.label || fieldName} is required` : false,
+                            valueAsNumber: true,
+                        }) })] }));
+        case 'percent':
+            return renderField(_jsxs("div", { className: "relative", children: [_jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: "0.01", min: "0", max: "100", className: "w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                            required: field.required ? `${field.label || fieldName} is required` : false,
+                            valueAsNumber: true,
+                        }) }), _jsx("span", { className: "absolute right-3 top-2 text-gray-500", children: "%" })] }));
+        case 'phone':
+            return renderField(_jsx("input", { id: fieldName, type: "tel", placeholder: field.placeholder || '+1 (555) 000-0000', disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'markdown':
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter markdown text...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'html':
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter HTML...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'file':
+            return renderField(_jsx("input", { id: fieldName, type: "file", disabled: disabled, multiple: extendedField.multiple, accept: extendedField.accept?.join(','), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'image':
+            return renderField(_jsx("input", { id: fieldName, type: "file", disabled: disabled, multiple: extendedField.multiple, accept: extendedField.accept?.join(',') || 'image/*', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+        case 'location':
+            return renderField(_jsxs("div", { className: "space-y-2", children: [_jsx("input", { id: `${fieldName}-lat`, type: "number", placeholder: "Latitude", disabled: disabled, step: "any", className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(`${fieldName}.lat`, {
+                            required: field.required ? 'Latitude is required' : false,
+                            valueAsNumber: true,
+                        }) }), _jsx("input", { id: `${fieldName}-lng`, type: "number", placeholder: "Longitude", disabled: disabled, step: "any", className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(`${fieldName}.lng`, {
+                            required: field.required ? 'Longitude is required' : false,
+                            valueAsNumber: true,
+                        }) })] }));
+        case 'lookup':
+        case 'master_detail':
+            return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    setValueAs: handleMultipleSelectValue,
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+        case 'user':
+        case 'owner':
+            return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    setValueAs: handleMultipleSelectValue,
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select user' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+        case 'formula':
+        case 'summary':
+        case 'auto_number':
+            // Read-only computed fields - display as disabled text input
+            return renderField(_jsx("input", { id: fieldName, type: "text", disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
+        case 'object':
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter JSON object...', disabled: disabled, rows: 6, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    validate: (value) => {
+                        if (!value)
+                            return true;
+                        try {
+                            JSON.parse(value);
+                            return true;
+                        }
+                        catch (e) {
+                            return 'Invalid JSON format';
+                        }
+                    },
+                }) }));
+        case 'vector':
+            // Vector fields are typically read-only or require specialized input
+            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: field.placeholder || 'Vector data (read-only)', disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
+        case 'grid':
+            // Grid fields require complex table/grid editor - placeholder for now
+            return renderField(_jsx("div", { className: "w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600", children: _jsx("p", { className: "text-sm", children: "Grid editor not yet implemented" }) }));
+        default:
+            // Default to text input
+            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${field.label || fieldName} is required` : false,
+                }) }));
+    }
+};
+FieldFactory.displayName = 'FieldFactory';

package/dist/components/form/FormRenderer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 type { FormView } from '@objectstack/spec/ui';
+export interface FormRendererProps {
+    /**
+     * The FormView schema from @objectstack/spec
+     */
+    schema: FormView;
+    /**
+     * Initial form data
+     */
+    data?: Record<string, any>;
+    /**
+     * Form submission handler
+     */
+    onSubmit?: (data: Record<string, any>) => void | Promise<void>;
+    /**
+     * Form change handler
+     */
+    onChange?: (data: Record<string, any>) => void;
+    /**
+     * Custom class name for the form
+     */
+    className?: string;
+    /**
+     * Whether the form is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * FormRenderer component that renders forms based on FormViewSchema
+ * from @objectstack/spec
+ */
+export declare const FormRenderer: React.FC<FormRendererProps>;

package/dist/components/form/FormRenderer.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { useForm, FormProvider } from 'react-hook-form';
+import { FieldFactory } from './FieldFactory';
+/**
+ * FormRenderer component that renders forms based on FormViewSchema
+ * from @objectstack/spec
+ */
+export const FormRenderer = ({ schema, data = {}, onSubmit, onChange, className = '', disabled = false, }) => {
+    // Create form methods with react-hook-form
+    const methods = useForm({
+        defaultValues: data,
+        mode: 'onChange',
+    });
+    const { handleSubmit, watch } = methods;
+    // Watch for form changes
+    React.useEffect(() => {
+        if (onChange) {
+            const subscription = watch((value) => {
+                onChange(value);
+            });
+            return () => subscription.unsubscribe();
+        }
+    }, [watch, onChange]);
+    // Handle form submission
+    const onSubmitForm = handleSubmit(async (formData) => {
+        if (onSubmit) {
+            await onSubmit(formData);
+        }
+    });
+    // Render sections or fields
+    const renderContent = () => {
+        if (!schema.sections || schema.sections.length === 0) {
+            return null;
+        }
+        return (_jsx("div", { className: "space-y-6", children: schema.sections.map((section, index) => (_jsx(FormSectionRenderer, { section: section, methods: methods, disabled: disabled }, index))) }));
+    };
+    return (_jsx(FormProvider, { ...methods, children: _jsxs("form", { onSubmit: onSubmitForm, className: `space-y-6 ${className}`, children: [renderContent(), _jsx("div", { className: "flex justify-end gap-2", children: _jsx("button", { type: "submit", disabled: disabled, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed", children: "Submit" }) })] }) }));
+};
+// Grid column classes for different column counts
+const GRID_COLS = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+};
+// Column span classes
+const COL_SPAN = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+};
+/**
+ * Renders a form section with grid layout
+ */
+const FormSectionRenderer = ({ section, methods, disabled = false, }) => {
+    const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
+    // Determine grid columns based on section.columns
+    const gridCols = GRID_COLS[section.columns || 1];
+    const handleToggleCollapse = () => {
+        if (section.collapsible) {
+            setIsCollapsed(!isCollapsed);
+        }
+    };
+    return (_jsxs("div", { className: "border rounded-lg p-4", children: [section.label && (_jsxs("div", { className: `flex items-center justify-between mb-4 ${section.collapsible ? 'cursor-pointer' : ''}`, onClick: handleToggleCollapse, children: [_jsx("h3", { className: "text-lg font-semibold", children: section.label }), section.collapsible && (_jsx("span", { className: "text-sm text-gray-500", children: isCollapsed ? '▶' : '▼' }))] })), !isCollapsed && (_jsx("div", { className: `grid ${gridCols} gap-4`, children: section.fields.map((field, index) => {
+                    // Handle both string fields (legacy) and FormFieldSchema objects
+                    const fieldName = typeof field === 'string' ? field : field.field;
+                    const fieldConfig = typeof field === 'string' ? { field: fieldName } : field;
+                    // Skip hidden fields
+                    if (fieldConfig.hidden) {
+                        return null;
+                    }
+                    // Calculate colSpan for grid
+                    const colSpan = fieldConfig.colSpan || 1;
+                    const colSpanClass = COL_SPAN[Math.min(colSpan, section.columns || 1)];
+                    return (_jsx("div", { className: colSpanClass, children: _jsx(FieldFactory, { field: fieldConfig, methods: methods, disabled: disabled || fieldConfig.readonly }) }, `${fieldName}-${index}`));
+                }) }))] }));
+};
+FormRenderer.displayName = 'FormRenderer';

package/dist/components/form/FormRenderer.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 '@testing-library/jest-dom';