@object-ui/react 0.3.0 → 0.3.1

package/dist/components/form/FormRenderer.test.js

@@ -0,0 +1,534 @@
+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 } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { FormRenderer } from './FormRenderer';
+describe('FormRenderer', () => {
+    it('should render a simple form with text fields', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Personal Information',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 2,
+                    fields: [
+                        {
+                            field: 'firstName',
+                            label: 'First Name',
+                            required: true,
+                            widget: 'text',
+                        },
+                        {
+                            field: 'lastName',
+                            label: 'Last Name',
+                            required: true,
+                            widget: 'text',
+                        },
+                    ],
+                },
+            ],
+        };
+        const { container } = render(_jsx(FormRenderer, { schema: schema }));
+        expect(screen.getByText('Personal Information')).toBeInTheDocument();
+        expect(screen.getByLabelText(/First Name/)).toBeInTheDocument();
+        expect(screen.getByLabelText(/Last Name/)).toBeInTheDocument();
+    });
+    it('should render form with initial data', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'User Details',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: [
+                        {
+                            field: 'username',
+                            label: 'Username',
+                            widget: 'text',
+                        },
+                    ],
+                },
+            ],
+        };
+        const data = { username: 'john_doe' };
+        render(_jsx(FormRenderer, { schema: schema, data: data }));
+        const input = screen.getByLabelText('Username');
+        expect(input.value).toBe('john_doe');
+    });
+    it('should handle multi-column layout', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Contact',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 3,
+                    fields: [
+                        {
+                            field: 'email',
+                            label: 'Email',
+                            widget: 'email',
+                        },
+                        {
+                            field: 'phone',
+                            label: 'Phone',
+                            widget: 'tel',
+                        },
+                        {
+                            field: 'address',
+                            label: 'Address',
+                            widget: 'textarea',
+                            colSpan: 3,
+                        },
+                    ],
+                },
+            ],
+        };
+        render(_jsx(FormRenderer, { schema: schema }));
+        expect(screen.getByLabelText('Email')).toBeInTheDocument();
+        expect(screen.getByLabelText('Phone')).toBeInTheDocument();
+        expect(screen.getByLabelText('Address')).toBeInTheDocument();
+    });
+    it('should hide fields marked as hidden', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Form',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: [
+                        {
+                            field: 'visible',
+                            label: 'Visible Field',
+                            widget: 'text',
+                        },
+                        {
+                            field: 'hidden',
+                            label: 'Hidden Field',
+                            widget: 'text',
+                            hidden: true,
+                        },
+                    ],
+                },
+            ],
+        };
+        render(_jsx(FormRenderer, { schema: schema }));
+        expect(screen.getByLabelText('Visible Field')).toBeInTheDocument();
+        expect(screen.queryByLabelText('Hidden Field')).not.toBeInTheDocument();
+    });
+    it('should support legacy string field format', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Legacy Form',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: ['username', 'email'],
+                },
+            ],
+        };
+        const { container } = render(_jsx(FormRenderer, { schema: schema }));
+        // String fields should still render as inputs
+        const inputs = container.querySelectorAll('input[type="text"]');
+        expect(inputs.length).toBeGreaterThan(0);
+    });
+    it('should handle number fields', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Numbers',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: [
+                        {
+                            field: 'age',
+                            label: 'Age',
+                            widget: 'number',
+                            required: true,
+                        },
+                    ],
+                },
+            ],
+        };
+        render(_jsx(FormRenderer, { schema: schema }));
+        const input = screen.getByLabelText(/Age/);
+        expect(input.type).toBe('number');
+    });
+    it('should handle checkbox fields', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Preferences',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: [
+                        {
+                            field: 'subscribe',
+                            label: 'Subscribe to newsletter',
+                            widget: 'checkbox',
+                        },
+                    ],
+                },
+            ],
+        };
+        render(_jsx(FormRenderer, { schema: schema }));
+        const checkbox = screen.getByLabelText('Subscribe to newsletter');
+        expect(checkbox.type).toBe('checkbox');
+    });
+    it('should render help text when provided', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Help Text',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: [
+                        {
+                            field: 'password',
+                            label: 'Password',
+                            widget: 'password',
+                            helpText: 'Must be at least 8 characters',
+                        },
+                    ],
+                },
+            ],
+        };
+        render(_jsx(FormRenderer, { schema: schema }));
+        expect(screen.getByText('Must be at least 8 characters')).toBeInTheDocument();
+    });
+    it('should mark required fields with asterisk', () => {
+        const schema = {
+            type: 'simple',
+            sections: [
+                {
+                    label: 'Required',
+                    collapsible: false,
+                    collapsed: false,
+                    columns: 1,
+                    fields: [
+                        {
+                            field: 'name',
+                            label: 'Name',
+                            widget: 'text',
+                            required: true,
+                        },
+                    ],
+                },
+            ],
+        };
+        const { container } = render(_jsx(FormRenderer, { schema: schema }));
+        // Check for asterisk
+        const asterisk = container.querySelector('.text-red-500');
+        expect(asterisk).toBeInTheDocument();
+        expect(asterisk?.textContent).toContain('*');
+    });
+    // Test new field types
+    describe('Extended field types', () => {
+        it('should render currency field with dollar sign', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Pricing',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'price',
+                                label: 'Price',
+                                widget: 'currency',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const { container } = render(_jsx(FormRenderer, { schema: schema }));
+            expect(screen.getByLabelText('Price')).toBeInTheDocument();
+            expect(container.querySelector('.absolute')?.textContent).toBe('$');
+        });
+        it('should render percent field with percent sign', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Metrics',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'discount',
+                                label: 'Discount',
+                                widget: 'percent',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const { container } = render(_jsx(FormRenderer, { schema: schema }));
+            expect(screen.getByLabelText('Discount')).toBeInTheDocument();
+            expect(container.querySelector('.absolute')?.textContent).toBe('%');
+        });
+        it('should render phone field', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Contact',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'phoneNumber',
+                                label: 'Phone Number',
+                                widget: 'phone',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const input = screen.getByLabelText('Phone Number');
+            expect(input.type).toBe('tel');
+        });
+        it('should render markdown field as textarea', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Content',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'content',
+                                label: 'Content',
+                                widget: 'markdown',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const textarea = screen.getByLabelText('Content');
+            expect(textarea.tagName).toBe('TEXTAREA');
+        });
+        it('should render html field as textarea', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Content',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'htmlContent',
+                                label: 'HTML Content',
+                                widget: 'html',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const textarea = screen.getByLabelText('HTML Content');
+            expect(textarea.tagName).toBe('TEXTAREA');
+        });
+        it('should render file field', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Upload',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'document',
+                                label: 'Document',
+                                widget: 'file',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const input = screen.getByLabelText('Document');
+            expect(input.type).toBe('file');
+        });
+        it('should render image field', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Upload',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'avatar',
+                                label: 'Avatar',
+                                widget: 'image',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const input = screen.getByLabelText('Avatar');
+            expect(input.type).toBe('file');
+        });
+        it('should render location field with lat/lng inputs', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Location',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'coordinates',
+                                label: 'Coordinates',
+                                widget: 'location',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const { container } = render(_jsx(FormRenderer, { schema: schema }));
+            const inputs = container.querySelectorAll('input[type="number"]');
+            expect(inputs.length).toBe(2);
+        });
+        it('should render lookup field as select', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Relations',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: '1',
+                        fields: [
+                            {
+                                field: 'account',
+                                label: 'Account',
+                                widget: 'lookup',
+                                options: [
+                                    { label: 'Account 1', value: '1' },
+                                    { label: 'Account 2', value: '2' },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const select = screen.getByLabelText('Account');
+            expect(select.tagName).toBe('SELECT');
+        });
+        it('should render user field as select', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Assignment',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: '1',
+                        fields: [
+                            {
+                                field: 'assignedTo',
+                                label: 'Assigned To',
+                                widget: 'user',
+                                options: [
+                                    { label: 'User 1', value: 'user1' },
+                                    { label: 'User 2', value: 'user2' },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const select = screen.getByLabelText('Assigned To');
+            expect(select.tagName).toBe('SELECT');
+        });
+        it('should render formula field as disabled input', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Computed',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'total',
+                                label: 'Total',
+                                widget: 'formula',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const input = screen.getByLabelText('Total');
+            expect(input.disabled).toBe(true);
+        });
+        it('should render object field as JSON textarea', () => {
+            const schema = {
+                type: 'simple',
+                sections: [
+                    {
+                        label: 'Data',
+                        collapsible: false,
+                        collapsed: false,
+                        columns: 1,
+                        fields: [
+                            {
+                                field: 'metadata',
+                                label: 'Metadata',
+                                widget: 'object',
+                            },
+                        ],
+                    },
+                ],
+            };
+            render(_jsx(FormRenderer, { schema: schema }));
+            const textarea = screen.getByLabelText('Metadata');
+            expect(textarea.tagName).toBe('TEXTAREA');
+        });
+    });
+});

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

@@ -0,0 +1,11 @@
+/**
+ * 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 { FormRenderer } from './FormRenderer';
+export type { FormRendererProps } from './FormRenderer';
+export { FieldFactory } from './FieldFactory';
+export type { FieldFactoryProps, ExtendedFormField } from './FieldFactory';

package/dist/components/form/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 { FormRenderer } from './FormRenderer';
+export { FieldFactory } from './FieldFactory';

package/dist/context/SchemaRendererContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface SchemaRendererContextType {
+    dataSource: any;
+    debug?: boolean;
+}
+export declare const SchemaRendererProvider: ({ children, dataSource, debug }: {
+    children: React.ReactNode;
+    dataSource: any;
+    debug?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useSchemaContext: () => SchemaRendererContextType;
+export declare const useDataScope: (path?: string) => any;
+export {};

package/dist/context/SchemaRendererContext.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const SchemaRendererContext = createContext(null);
+export const SchemaRendererProvider = ({ children, dataSource, debug }) => {
+    const value = useMemo(() => ({ dataSource, debug }), [dataSource, debug]);
+    return (_jsx(SchemaRendererContext.Provider, { value: value, children: children }));
+};
+export const useSchemaContext = () => {
+    const context = useContext(SchemaRendererContext);
+    if (!context) {
+        throw new Error('useSchemaContext must be used within a SchemaRendererProvider');
+    }
+    return context;
+};
+export const useDataScope = (path) => {
+    const { dataSource } = useSchemaContext();
+    if (!path)
+        return dataSource;
+    // Simple path resolution for now. In real app might be more complex
+    return path.split('.').reduce((acc, part) => acc && acc[part], dataSource);
+};

package/dist/context/index.d.ts

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

package/dist/context/index.js

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

package/dist/hooks/index.d.ts

@@ -1 +1,9 @@
-export {};
+/**
+ * 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 * from './useExpression';
+export * from './useActionRunner';

package/dist/hooks/index.js

@@ -1 +1,9 @@
-export {};
+/**
+ * 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 * from './useExpression';
+export * from './useActionRunner';

package/dist/hooks/useActionRunner.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { ActionRunner, type ActionContext, type ActionResult } from '@object-ui/core';
+/**
+ * Hook for executing actions with loading state
+ *
+ * @example
+ * ```tsx
+ * const { execute, loading, error, result } = useActionRunner({ data: formData });
+ *
+ * const handleClick = () => {
+ *   execute({
+ *     type: 'action',
+ *     api: '/api/save',
+ *     successMessage: 'Saved successfully!'
+ *   });
+ * };
+ * ```
+ */
+export declare function useActionRunner(context?: ActionContext): {
+    execute: (action: any) => Promise<ActionResult>;
+    loading: boolean;
+    error: string | null;
+    result: ActionResult | null;
+    updateContext: (newContext: Partial<ActionContext>) => void;
+    runner: ActionRunner;
+};