@object-ui/react 0.5.0 → 2.0.0

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

@@ -10,3 +10,4 @@ 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

@@ -10,3 +10,5 @@ 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,6 @@
 {
   "name": "@object-ui/react",
-  "version": "0.5.0",
+  "version": "2.0.0",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -23,16 +23,18 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^0.9.1",
+    "@objectstack/spec": "^2.0.7",
     "react-hook-form": "^7.71.1",
-    "@object-ui/core": "0.5.0"
+    "@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.10",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   },

package/src/LazyPluginLoader.tsx

@@ -6,13 +6,83 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { lazy, Suspense } from 'react';
+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();
+  };
 }
 
 /**
@@ -34,19 +104,71 @@ export interface LazyPluginOptions {
  *   () => 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 LazyComponent = lazy(importFn);
+  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) => (
-    <Suspense fallback={options?.fallback || null}>
-      <LazyComponent {...props} />
-    </Suspense>
-  );
+  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/__tests__/LazyPluginLoader.test.tsx

@@ -9,7 +9,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { createLazyPlugin } from '../LazyPluginLoader';
+import { createLazyPlugin, preloadPlugin } from '../LazyPluginLoader';
 
 describe('createLazyPlugin', () => {
   it('should create a lazy-loaded component', async () => {
@@ -77,4 +77,100 @@ describe('createLazyPlugin', () => {
     // Restore console.error
     console.error = originalError;
   });
+
+  it('should preload a plugin without rendering', async () => {
+    const TestComponent = () => <div>Preloaded</div>;
+    const importFn = vi.fn(() => Promise.resolve({ default: TestComponent }));
+
+    const result = await preloadPlugin(importFn);
+
+    expect(importFn).toHaveBeenCalledTimes(1);
+    expect(result).toEqual({ default: TestComponent });
+  });
+
+  it('should render errorFallback when component fails to load', async () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const ErrorFallback = ({ error, retry }: { error: Error; retry: () => void }) => (
+      <div>
+        <span>Error: {error.message}</span>
+        <button onClick={retry}>Retry</button>
+      </div>
+    );
+
+    const LazyComponent = createLazyPlugin(
+      () => Promise.reject(new Error('chunk failed')),
+      { retries: 0, errorFallback: ErrorFallback }
+    );
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error: chunk failed')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
+
+    console.error = originalError;
+  });
+
+  it('should not retry when retries=0', async () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const importFn = vi.fn(() => Promise.reject(new Error('fail')));
+
+    const ErrorFallback = ({ error }: { error: Error; retry: () => void }) => (
+      <div>Error: {error.message}</div>
+    );
+
+    const LazyComponent = createLazyPlugin(importFn, {
+      retries: 0,
+      errorFallback: ErrorFallback,
+    });
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error: fail')).toBeInTheDocument();
+    });
+
+    // Called only once — no retries
+    expect(importFn).toHaveBeenCalledTimes(1);
+
+    console.error = originalError;
+  });
+
+  it('should retry on failure then succeed', async () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const TestComponent = () => <div>Success after retry</div>;
+
+    let callCount = 0;
+    const importFn = vi.fn(() => {
+      callCount++;
+      if (callCount <= 2) {
+        return Promise.reject(new Error('transient error'));
+      }
+      return Promise.resolve({ default: TestComponent as React.ComponentType });
+    });
+
+    const LazyComponent = createLazyPlugin(importFn, {
+      retries: 3,
+      retryDelay: 10,
+    });
+
+    render(<LazyComponent />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Success after retry')).toBeInTheDocument();
+    }, { timeout: 5000 });
+
+    // First call + 2 retries (fails) + 1 success = called 3 times
+    expect(importFn).toHaveBeenCalledTimes(3);
+
+    console.error = originalError;
+  });
 });