@object-ui/react 0.3.1 → 2.0.0

package/dist/hooks/usePageVariables.js

@@ -0,0 +1,109 @@
+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 { createContext, useContext, useState, useCallback, useMemo } from 'react';
+const PageVariablesContext = createContext(null);
+/**
+ * Initialize page variables from their definitions.
+ * Sets each variable to its defaultValue or type-appropriate default.
+ */
+function initializeVariables(definitions) {
+    if (!definitions || definitions.length === 0)
+        return {};
+    const initial = {};
+    for (const def of definitions) {
+        if (def.defaultValue !== undefined) {
+            initial[def.name] = def.defaultValue;
+        }
+        else {
+            // Type-appropriate defaults
+            switch (def.type) {
+                case 'number':
+                    initial[def.name] = 0;
+                    break;
+                case 'boolean':
+                    initial[def.name] = false;
+                    break;
+                case 'object':
+                    initial[def.name] = {};
+                    break;
+                case 'array':
+                    initial[def.name] = [];
+                    break;
+                case 'string':
+                default:
+                    initial[def.name] = '';
+                    break;
+            }
+        }
+    }
+    return initial;
+}
+/**
+ * PageVariablesProvider — Provides page-level state variables to the component tree.
+ *
+ * Initializes variables from their definitions and provides read/write access
+ * to all child components via the usePageVariables hook.
+ *
+ * @example
+ * ```tsx
+ * <PageVariablesProvider definitions={[
+ *   { name: 'selectedId', type: 'string', defaultValue: '' },
+ *   { name: 'count', type: 'number', defaultValue: 0 },
+ * ]}>
+ *   <MyComponents />
+ * </PageVariablesProvider>
+ * ```
+ */
+export const PageVariablesProvider = ({ definitions, children, }) => {
+    const [variables, setVariablesState] = useState(() => initializeVariables(definitions));
+    const setVariable = useCallback((name, value) => {
+        setVariablesState((prev) => ({ ...prev, [name]: value }));
+    }, []);
+    const setVariables = useCallback((updates) => {
+        setVariablesState((prev) => ({ ...prev, ...updates }));
+    }, []);
+    const resetVariables = useCallback(() => {
+        setVariablesState(initializeVariables(definitions));
+    }, [definitions]);
+    const value = useMemo(() => ({ variables, setVariable, setVariables, resetVariables }), [variables, setVariable, setVariables, resetVariables]);
+    return (_jsx(PageVariablesContext.Provider, { value: value, children: children }));
+};
+PageVariablesProvider.displayName = 'PageVariablesProvider';
+/**
+ * Hook to access page-level variables.
+ *
+ * Returns the current variable values and setter functions.
+ * Returns a no-op fallback if used outside a PageVariablesProvider.
+ *
+ * @example
+ * ```tsx
+ * const { variables, setVariable } = usePageVariables();
+ * const userId = variables.selectedId;
+ * setVariable('selectedId', '123');
+ * ```
+ */
+export function usePageVariables() {
+    const ctx = useContext(PageVariablesContext);
+    if (!ctx) {
+        // Graceful fallback — allows components to work outside a Page
+        return {
+            variables: {},
+            setVariable: () => { },
+            setVariables: () => { },
+            resetVariables: () => { },
+        };
+    }
+    return ctx;
+}
+/**
+ * Hook to check if a PageVariablesProvider is available.
+ */
+export function useHasPageVariables() {
+    return useContext(PageVariablesContext) !== null;
+}

package/dist/hooks/useViewData.d.ts

@@ -0,0 +1,73 @@
+/**
+ * ObjectUI — useViewData
+ * 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.
+ *
+ * A React hook that resolves a ViewData configuration into a DataSource
+ * and provides reactive data fetching with loading/error states.
+ */
+import type { DataSource, ViewData, QueryParams } from '@object-ui/types';
+import { type ResolveDataSourceOptions } from '@object-ui/core';
+export interface UseViewDataOptions<T = any> {
+    /** The ViewData configuration from the schema */
+    viewData?: ViewData | null;
+    /** Resource name (object name, used for DataSource.find calls) */
+    resource?: string;
+    /** Initial query parameters */
+    params?: QueryParams;
+    /** Explicit data source override (bypasses context) */
+    dataSource?: DataSource<T> | null;
+    /** Options for adapter construction */
+    adapterOptions?: ResolveDataSourceOptions;
+    /** If true, skip the initial fetch (useful for forms in create mode) */
+    skip?: boolean;
+}
+export interface UseViewDataResult<T = any> {
+    /** Resolved data array */
+    data: T[];
+    /** Total number of records (from server or array length) */
+    totalCount: number;
+    /** Whether data is being fetched */
+    loading: boolean;
+    /** Error from the last fetch attempt */
+    error: Error | null;
+    /** The resolved DataSource instance (can be used for create/update/delete) */
+    dataSource: DataSource<T> | null;
+    /** Re-fetch data with current or new params */
+    refresh: (newParams?: QueryParams) => Promise<void>;
+    /** Fetch a single record by ID */
+    fetchOne: (id: string | number) => Promise<T | null>;
+    /** Whether more records are available */
+    hasMore: boolean;
+}
+/**
+ * useViewData — resolves ViewData into a DataSource and provides reactive data.
+ *
+ * This hook centralizes the data resolution pattern that was previously
+ * duplicated across plugins (ObjectGrid, ObjectView, etc.). It:
+ *
+ * 1. Resolves the ViewData config to the right DataSource adapter
+ *    - `provider: 'object'` → context DataSource (ObjectStackAdapter)
+ *    - `provider: 'api'`    → ApiDataSource (raw HTTP)
+ *    - `provider: 'value'`  → ValueDataSource (in-memory)
+ * 2. Fetches data automatically on mount
+ * 3. Provides loading/error states and refresh capability
+ *
+ * @example
+ * ```tsx
+ * function MyGrid({ schema }) {
+ *   const { data, loading, error, refresh, dataSource } = useViewData({
+ *     viewData: schema.data,
+ *     resource: schema.objectName,
+ *     params: { $top: 50 },
+ *   });
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <ErrorMessage error={error} />;
+ *   return <Table data={data} />;
+ * }
+ * ```
+ */
+export declare function useViewData<T = any>(options: UseViewDataOptions<T>): UseViewDataResult<T>;

package/dist/hooks/useViewData.js

@@ -0,0 +1,135 @@
+/**
+ * ObjectUI — useViewData
+ * 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.
+ *
+ * A React hook that resolves a ViewData configuration into a DataSource
+ * and provides reactive data fetching with loading/error states.
+ */
+import { useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import { resolveDataSource } from '@object-ui/core';
+import { SchemaRendererContext } from '../context/SchemaRendererContext';
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+/**
+ * useViewData — resolves ViewData into a DataSource and provides reactive data.
+ *
+ * This hook centralizes the data resolution pattern that was previously
+ * duplicated across plugins (ObjectGrid, ObjectView, etc.). It:
+ *
+ * 1. Resolves the ViewData config to the right DataSource adapter
+ *    - `provider: 'object'` → context DataSource (ObjectStackAdapter)
+ *    - `provider: 'api'`    → ApiDataSource (raw HTTP)
+ *    - `provider: 'value'`  → ValueDataSource (in-memory)
+ * 2. Fetches data automatically on mount
+ * 3. Provides loading/error states and refresh capability
+ *
+ * @example
+ * ```tsx
+ * function MyGrid({ schema }) {
+ *   const { data, loading, error, refresh, dataSource } = useViewData({
+ *     viewData: schema.data,
+ *     resource: schema.objectName,
+ *     params: { $top: 50 },
+ *   });
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <ErrorMessage error={error} />;
+ *   return <Table data={data} />;
+ * }
+ * ```
+ */
+export function useViewData(options) {
+    const { viewData, resource = '', params, dataSource: explicitDataSource, adapterOptions, skip = false, } = options;
+    // Get context DataSource
+    const context = useContext(SchemaRendererContext);
+    const contextDataSource = context?.dataSource ?? null;
+    // Resolve the DataSource — memoize to prevent re-creation on every render.
+    // We key on the viewData provider + config identity.
+    const resolvedDataSource = useMemo(() => {
+        if (explicitDataSource)
+            return explicitDataSource;
+        return resolveDataSource(viewData, contextDataSource, adapterOptions);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        explicitDataSource,
+        viewData?.provider,
+        // For 'api' provider, key on read/write URLs
+        viewData?.provider === 'api' ? viewData.read?.url : undefined,
+        viewData?.provider === 'api' ? viewData.write?.url : undefined,
+        // For 'value' provider, key on items reference (or length as proxy)
+        viewData?.provider === 'value' ? viewData.items?.length : undefined,
+        contextDataSource,
+    ]);
+    // State
+    const [data, setData] = useState([]);
+    const [totalCount, setTotalCount] = useState(0);
+    const [loading, setLoading] = useState(!skip);
+    const [error, setError] = useState(null);
+    const [hasMore, setHasMore] = useState(false);
+    // Stable params reference
+    const paramsKey = useMemo(() => JSON.stringify(params ?? {}), [params]);
+    // Fetch function
+    const fetchData = useCallback(async (fetchParams) => {
+        if (!resolvedDataSource || !resource) {
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const mergedParams = fetchParams ?? (params ? { ...params } : undefined);
+            const result = await resolvedDataSource.find(resource, mergedParams);
+            setData(result.data ?? []);
+            setTotalCount(result.total ?? result.data?.length ?? 0);
+            setHasMore(result.hasMore ?? false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+            setData([]);
+            setTotalCount(0);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [resolvedDataSource, resource, params]);
+    // Auto-fetch on mount / when deps change
+    useEffect(() => {
+        if (skip) {
+            setLoading(false);
+            return;
+        }
+        // For value provider, data is synchronous — still go through fetchData
+        // for consistency, but it resolves immediately.
+        fetchData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resolvedDataSource, resource, paramsKey, skip]);
+    // Refresh function (can accept new params)
+    const refresh = useCallback(async (newParams) => {
+        await fetchData(newParams);
+    }, [fetchData]);
+    // Fetch one record
+    const fetchOne = useCallback(async (id) => {
+        if (!resolvedDataSource)
+            return null;
+        try {
+            return await resolvedDataSource.findOne(resource, id);
+        }
+        catch {
+            return null;
+        }
+    }, [resolvedDataSource, resource]);
+    return {
+        data,
+        totalCount,
+        loading,
+        error,
+        dataSource: resolvedDataSource,
+        refresh,
+        fetchOne,
+        hasMore,
+    };
+}

package/dist/index.d.ts

@@ -9,3 +9,5 @@ export * from './SchemaRenderer';
 export * from './hooks';
 export * from './context';
 export * from './components/form';
+export * from './LazyPluginLoader';
+export { I18nProvider, useObjectTranslation, useI18nContext, createI18n, getDirection, getAvailableLanguages, formatDate, formatDateTime, formatRelativeTime, formatCurrency, formatNumber, type I18nConfig, type I18nProviderProps, type TranslationKeys, type DateFormatOptions, type CurrencyFormatOptions, type NumberFormatOptions, } from '@object-ui/i18n';

package/dist/index.js

@@ -9,3 +9,6 @@ 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';
+// Built-in i18n support
+export { I18nProvider, useObjectTranslation, useI18nContext, createI18n, getDirection, getAvailableLanguages, formatDate, formatDateTime, formatRelativeTime, formatCurrency, formatNumber, } from '@object-ui/i18n';

package/dist/utils/i18n.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Resolves an I18nLabel to a plain string.
+ * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
+ * When it's an object, we return the defaultValue or the key as fallback.
+ */
+export declare function resolveI18nLabel(label: string | {
+    key: string;
+    defaultValue?: string;
+    params?: Record<string, any>;
+} | undefined): string | undefined;

package/dist/utils/i18n.js

@@ -0,0 +1,12 @@
+/**
+ * Resolves an I18nLabel to a plain string.
+ * I18nLabel can be either a string or an object { key, defaultValue?, params? }.
+ * When it's an object, we return the defaultValue or the key as fallback.
+ */
+export function resolveI18nLabel(label) {
+    if (label === undefined || label === null)
+        return undefined;
+    if (typeof label === 'string')
+        return label;
+    return label.defaultValue || label.key;
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@object-ui/react",
-  "version": "0.3.1",
+  "version": "2.0.0",
+  "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
   "homepage": "https://www.objectui.org",
@@ -12,19 +13,28 @@
   "bugs": {
     "url": "https://github.com/objectstack-ai/objectui/issues"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "dependencies": {
-    "@objectstack/spec": "^0.3.3",
+    "@objectstack/spec": "^2.0.7",
     "react-hook-form": "^7.71.1",
-    "@object-ui/core": "0.3.1"
+    "@object-ui/core": "2.0.0",
+    "@object-ui/i18n": "2.0.0",
+    "@object-ui/types": "2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   },

package/src/LazyPluginLoader.tsx

@@ -0,0 +1,174 @@
+/**
+ * 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, Component } from 'react';
+
+export interface LazyPluginOptions {
+  /**
+   * Fallback component to show while loading
+   */
+  fallback?: React.ReactNode;
+  /**
+   * Number of retry attempts on load failure (default: 2)
+   */
+  retries?: number;
+  /**
+   * Delay in ms between retries (default: 1000)
+   */
+  retryDelay?: number;
+  /**
+   * Custom error fallback component
+   */
+  errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>;
+}
+
+/**
+ * Error boundary for lazy-loaded plugins
+ */
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class PluginErrorBoundary extends Component<
+  { fallback?: React.ComponentType<{ error: Error; retry: () => void }>; children: React.ReactNode },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      const FallbackComponent = this.props.fallback;
+      if (FallbackComponent) {
+        return <FallbackComponent error={this.state.error} retry={this.handleRetry} />;
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+/**
+ * Create a lazy-loaded import function with retry support
+ */
+function createRetryImport<P extends object>(
+  importFn: () => Promise<{ default: React.ComponentType<P> }>,
+  retries: number,
+  retryDelay: number,
+): () => Promise<{ default: React.ComponentType<P> }> {
+  return () => {
+    let attempt = 0;
+    const tryImport = (): Promise<{ default: React.ComponentType<P> }> =>
+      importFn().catch((err) => {
+        attempt++;
+        if (attempt <= retries) {
+          return new Promise((resolve) =>
+            setTimeout(() => resolve(tryImport()), retryDelay),
+          );
+        }
+        throw err;
+      });
+    return tryImport();
+  };
+}
+
+/**
+ * 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> }
+ * );
+ * 
+ * // With retry and error handling
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   {
+ *     retries: 3,
+ *     errorFallback: ({ error, retry }) => (
+ *       <div>
+ *         <p>Failed to load: {error.message}</p>
+ *         <button onClick={retry}>Retry</button>
+ *       </div>
+ *     ),
+ *   }
+ * );
+ * ```
+ */
+export function createLazyPlugin<P extends object = any>(
+  importFn: () => Promise<{ default: React.ComponentType<P> }>,
+  options?: LazyPluginOptions
+): React.ComponentType<P> {
+  const { retries = 2, retryDelay = 1000, errorFallback } = options || {};
+
+  const retryImport = retries > 0
+    ? createRetryImport(importFn, retries, retryDelay)
+    : importFn;
+
+  const LazyComponent = lazy(retryImport);
+  
+  const PluginWrapper: React.FC<P> = (props) => {
+    const content = (
+      <Suspense fallback={options?.fallback || null}>
+        <LazyComponent {...props} />
+      </Suspense>
+    );
+
+    if (errorFallback) {
+      return (
+        <PluginErrorBoundary fallback={errorFallback}>
+          {content}
+        </PluginErrorBoundary>
+      );
+    }
+
+    return content;
+  };
+  
+  return PluginWrapper;
+}
+
+/**
+ * Preload a plugin module without rendering it.
+ * Useful for preloading plugins that will be needed soon.
+ *
+ * @param importFn - Dynamic import function
+ * @returns Promise that resolves when the module is loaded
+ *
+ * @example
+ * ```tsx
+ * // Preload on hover
+ * const loadGrid = () => import('@object-ui/plugin-grid');
+ * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
+ * ```
+ */
+export function preloadPlugin<T = unknown>(
+  importFn: () => Promise<T>,
+): Promise<T> {
+  return importFn();
+}

package/src/SchemaRenderer.tsx

@@ -6,33 +6,85 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef } from 'react';
-import { SchemaNode, ComponentRegistry } from '@object-ui/core';
+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
   });
 });