@object-ui/react 0.3.0 → 0.3.1

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/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,4 +1,11 @@
 import { Fragment as _Fragment, 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, { forwardRef } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {

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';