@object-ui/react 0.3.0 → 0.5.0

package/dist/hooks/useActionRunner.js

@@ -0,0 +1,65 @@
+/**
+ * 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 { useState, useCallback, useMemo } from 'react';
+import { ActionRunner } 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 function useActionRunner(context = {}) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    const runner = useMemo(() => new ActionRunner(context), [JSON.stringify(context)]);
+    const execute = useCallback(async (action) => {
+        setLoading(true);
+        setError(null);
+        setResult(null);
+        try {
+            const actionResult = await runner.execute(action);
+            setResult(actionResult);
+            if (!actionResult.success) {
+                setError(actionResult.error || 'Action failed');
+            }
+            return actionResult;
+        }
+        catch (err) {
+            const errorMessage = err.message;
+            setError(errorMessage);
+            const failureResult = { success: false, error: errorMessage };
+            setResult(failureResult);
+            return failureResult;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [runner]);
+    const updateContext = useCallback((newContext) => {
+        runner.updateContext(newContext);
+    }, [runner]);
+    return {
+        execute,
+        loading,
+        error,
+        result,
+        updateContext,
+        runner
+    };
+}

package/dist/hooks/useExpression.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+/**
+ * Hook for evaluating expressions with dynamic context
+ *
+ * @example
+ * ```tsx
+ * const isVisible = useExpression('${data.age >= 18}', { data });
+ * const label = useExpression('Hello ${user.name}!', { user });
+ * ```
+ */
+export declare function useExpression(expression: string | boolean | number | null | undefined, context?: Record<string, any>): any;
+/**
+ * Hook for evaluating conditional expressions
+ * Returns a boolean value
+ *
+ * @example
+ * ```tsx
+ * const isVisible = useCondition('${data.status === "active"}', { data });
+ * ```
+ */
+export declare function useCondition(condition: string | boolean | undefined, context?: Record<string, any>): boolean;

package/dist/hooks/useExpression.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { useMemo } from 'react';
+import { ExpressionEvaluator } from '@object-ui/core';
+/**
+ * Hook for evaluating expressions with dynamic context
+ *
+ * @example
+ * ```tsx
+ * const isVisible = useExpression('${data.age >= 18}', { data });
+ * const label = useExpression('Hello ${user.name}!', { user });
+ * ```
+ */
+export function useExpression(expression, context = {}) {
+    // We evaluate directly without caching the evaluator to avoid issues with context changes
+    return useMemo(() => {
+        const evaluator = new ExpressionEvaluator(context);
+        return evaluator.evaluate(expression);
+    }, [expression, context]);
+}
+/**
+ * Hook for evaluating conditional expressions
+ * Returns a boolean value
+ *
+ * @example
+ * ```tsx
+ * const isVisible = useCondition('${data.status === "active"}', { data });
+ * ```
+ */
+export function useCondition(condition, context = {}) {
+    // We evaluate directly without caching the evaluator to avoid issues with context changes
+    return useMemo(() => {
+        const evaluator = new ExpressionEvaluator(context);
+        return evaluator.evaluateCondition(condition);
+    }, [condition, context]);
+}

package/dist/index.d.ts

@@ -1,3 +1,12 @@
+/**
+ * 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 './SchemaRenderer';
 export * from './hooks';
 export * from './context';
+export * from './components/form';
+export * from './LazyPluginLoader';

package/dist/index.js

@@ -1,3 +1,12 @@
+/**
+ * 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 './SchemaRenderer';
 export * from './hooks'; // will be empty for now
 export * from './context'; // will be empty for now
+export * from './components/form';
+export * from './LazyPluginLoader';

package/dist/index.test.d.ts

@@ -1 +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/index.test.js

@@ -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 { describe, it, expect } from 'vitest';
 describe('react', () => {
     it('should work', () => {

package/package.json

@@ -1,19 +1,39 @@
 {
   "name": "@object-ui/react",
-  "version": "0.3.0",
+  "version": "0.5.0",
+  "type": "module",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "description": "React bindings and SchemaRenderer component for Object UI",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "dependencies": {
-    "@object-ui/core": "0.3.0"
+    "@objectstack/spec": "^0.9.1",
+    "react-hook-form": "^7.71.1",
+    "@object-ui/core": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   },
   "scripts": {

package/src/LazyPluginLoader.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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, { lazy, Suspense } 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 function createLazyPlugin<P extends object = any>(
+  importFn: () => Promise<{ default: React.ComponentType<P> }>,
+  options?: LazyPluginOptions
+): React.ComponentType<P> {
+  const LazyComponent = lazy(importFn);
+  
+  const PluginWrapper: React.FC<P> = (props) => (
+    <Suspense fallback={options?.fallback || null}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+  
+  return PluginWrapper;
+}

package/src/SchemaRenderer.tsx

@@ -1,30 +1,90 @@
-import React, { forwardRef } from 'react';
-import { SchemaNode, 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 { SchemaNode, ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
+import { SchemaRendererContext } from './context/SchemaRendererContext';
 
 export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<string, any>>(({ schema, ...props }, _ref) => {
-  if (!schema) return null;
+  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 as any);
+      }
+      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 <>{schema}</>;
+  if (typeof evaluatedSchema === 'string') return <>{evaluatedSchema}</>;
   
-  const Component = ComponentRegistry.get(schema.type);
+  const Component = ComponentRegistry.get(evaluatedSchema.type);
 
   if (!Component) {
     return (
       <div className="p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2">
-        Unknown component type: <strong>{schema.type}</strong>
-        <pre className="text-xs mt-2 overflow-auto">{JSON.stringify(schema, null, 2)}</pre>
+        Unknown component type: <strong>{evaluatedSchema.type}</strong>
+        <pre className="text-xs mt-2 overflow-auto">{JSON.stringify(evaluatedSchema, null, 2)}</pre>
       </div>
     );
   }
 
   // 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/src/__tests__/LazyPluginLoader.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 React from 'react';
+import { createLazyPlugin } from '../LazyPluginLoader';
+
+describe('createLazyPlugin', () => {
+  it('should create a lazy-loaded component', async () => {
+    const TestComponent = () => <div>Test Component</div>;
+    
+    const LazyComponent = createLazyPlugin(
+      () => Promise.resolve({ default: TestComponent })
+    );
+    
+    render(<LazyComponent />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should show custom fallback while loading', async () => {
+    const TestComponent = () => <div>Test Component</div>;
+    
+    const LazyComponent = createLazyPlugin(
+      () => new Promise<{ default: React.ComponentType }>((resolve) => {
+        setTimeout(() => resolve({ default: TestComponent }), 100);
+      }),
+      { fallback: <div>Loading...</div> }
+    );
+    
+    render(<LazyComponent />);
+    
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should pass props to the lazy component', async () => {
+    interface TestProps {
+      message: string;
+    }
+    
+    const TestComponent = ({ message }: TestProps) => <div>{message}</div>;
+    
+    const LazyComponent = createLazyPlugin<TestProps>(
+      () => Promise.resolve({ default: TestComponent })
+    );
+    
+    render(<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<any>(
+      () => Promise.reject(new Error('Load error'))
+    );
+    
+    expect(() => render(<LazyComponent />)).not.toThrow();
+    
+    // Restore console.error
+    console.error = originalError;
+  });
+});