@object-ui/react 0.5.0 → 2.0.0

package/src/context/index.ts

@@ -7,3 +7,5 @@
  */
 
 export * from './SchemaRendererContext';
+export * from './ActionContext';
+export * from './ThemeContext';

package/src/hooks/__tests__/useActionRunner.test.ts

@@ -0,0 +1,153 @@
+/**
+ * Tests for useActionRunner hook
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useActionRunner } from '../useActionRunner';
+
+describe('useActionRunner', () => {
+  it('returns initial state with loading=false, error=null, result=null', () => {
+    const { result } = renderHook(() => useActionRunner());
+
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+    expect(result.current.result).toBeNull();
+  });
+
+  it('exposes runner, execute, and updateContext', () => {
+    const { result } = renderHook(() => useActionRunner());
+
+    expect(result.current.runner).toBeDefined();
+    expect(typeof result.current.execute).toBe('function');
+    expect(typeof result.current.updateContext).toBe('function');
+  });
+
+  it('handles options with context key format', () => {
+    const { result } = renderHook(() =>
+      useActionRunner({ context: { data: { name: 'test' } } }),
+    );
+
+    expect(result.current.runner).toBeDefined();
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('handles plain context object format (backwards compat)', () => {
+    const { result } = renderHook(() =>
+      useActionRunner({ data: { name: 'test' } }),
+    );
+
+    expect(result.current.runner).toBeDefined();
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('sets loading=true during execution and loading=false after', async () => {
+    let resolveAction: () => void;
+    const pendingAction = new Promise<void>((resolve) => {
+      resolveAction = resolve;
+    });
+
+    const { result } = renderHook(() => useActionRunner());
+
+    let executePromise: Promise<unknown>;
+    act(() => {
+      executePromise = result.current.execute({
+        onClick: () => pendingAction,
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(true);
+    });
+
+    await act(async () => {
+      resolveAction!();
+      await executePromise;
+    });
+
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('sets result on successful action execution', async () => {
+    const onNavigate = vi.fn();
+    const { result } = renderHook(() =>
+      useActionRunner({ context: {}, onNavigate }),
+    );
+
+    await act(async () => {
+      await result.current.execute({
+        type: 'navigation',
+        navigate: { to: '/dashboard' },
+      });
+    });
+
+    expect(result.current.result).toEqual({ success: true });
+    expect(result.current.error).toBeNull();
+    expect(result.current.loading).toBe(false);
+    expect(onNavigate).toHaveBeenCalledWith(
+      '/dashboard',
+      expect.objectContaining({ external: false }),
+    );
+  });
+
+  it('sets error on failed action execution (catch path)', async () => {
+    const { result } = renderHook(() => useActionRunner());
+
+    await act(async () => {
+      await result.current.execute({
+        onClick: () => {
+          throw new Error('Something went wrong');
+        },
+      });
+    });
+
+    expect(result.current.error).toBe('Something went wrong');
+    expect(result.current.result).toEqual({
+      success: false,
+      error: 'Something went wrong',
+    });
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('updateContext calls runner.updateContext', () => {
+    const { result } = renderHook(() => useActionRunner());
+
+    const spy = vi.spyOn(result.current.runner, 'updateContext');
+
+    act(() => {
+      result.current.updateContext({ data: { id: 42 } });
+    });
+
+    expect(spy).toHaveBeenCalledWith({ data: { id: 42 } });
+  });
+
+  it('accepts handler options (onToast, onNavigate, etc.)', async () => {
+    const onToast = vi.fn();
+    const onNavigate = vi.fn();
+
+    const { result } = renderHook(() =>
+      useActionRunner({
+        context: {},
+        onToast,
+        onNavigate,
+      }),
+    );
+
+    await act(async () => {
+      await result.current.execute({
+        type: 'navigation',
+        navigate: { to: '/settings' },
+        successMessage: 'Navigated!',
+      });
+    });
+
+    expect(onNavigate).toHaveBeenCalledWith(
+      '/settings',
+      expect.objectContaining({ external: false }),
+    );
+    expect(onToast).toHaveBeenCalledWith(
+      'Navigated!',
+      expect.objectContaining({ type: 'success' }),
+    );
+  });
+});

package/src/hooks/__tests__/useDiscovery.test.tsx

@@ -0,0 +1,149 @@
+/**
+ * Tests for useDiscovery hook
+ */
+
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useDiscovery } from '../useDiscovery';
+import { SchemaRendererContext } from '../../context/SchemaRendererContext';
+
+function createWrapper(dataSource: any) {
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(
+      SchemaRendererContext.Provider,
+      { value: { dataSource } },
+      children,
+    );
+}
+
+describe('useDiscovery', () => {
+  it('returns isLoading false and null discovery when no context is provided', async () => {
+    const { result } = renderHook(() => useDiscovery());
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toBeNull();
+    expect(result.current.error).toBeNull();
+  });
+
+  it('returns isLoading false and null discovery when dataSource has no getDiscovery method', async () => {
+    const dataSource = { someOtherMethod: vi.fn() };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toBeNull();
+    expect(result.current.error).toBeNull();
+  });
+
+  it('successfully fetches discovery data from dataSource.getDiscovery()', async () => {
+    const discoveryData = {
+      name: 'test-server',
+      version: '1.0.0',
+      services: {
+        auth: { enabled: true, status: 'available' as const },
+        data: { enabled: true, status: 'available' as const },
+      },
+    };
+
+    const dataSource = {
+      getDiscovery: vi.fn().mockResolvedValue(discoveryData),
+    };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toEqual(discoveryData);
+    expect(result.current.error).toBeNull();
+    expect(dataSource.getDiscovery).toHaveBeenCalled();
+  });
+
+  it('handles errors from getDiscovery gracefully', async () => {
+    const dataSource = {
+      getDiscovery: vi.fn().mockRejectedValue(new Error('Network error')),
+    };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.discovery).toBeNull();
+    expect(result.current.error?.message).toBe('Network error');
+  });
+
+  it('isAuthEnabled defaults to true when no discovery', async () => {
+    const { result } = renderHook(() => useDiscovery());
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.isAuthEnabled).toBe(true);
+  });
+
+  it('isAuthEnabled reflects the auth service enabled state', async () => {
+    const discoveryData = {
+      services: {
+        auth: { enabled: false },
+      },
+    };
+
+    const dataSource = {
+      getDiscovery: vi.fn().mockResolvedValue(discoveryData),
+    };
+
+    const { result } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.isAuthEnabled).toBe(false);
+  });
+
+  it('cleans up on unmount (cancelled flag)', async () => {
+    let resolveDiscovery: (value: any) => void;
+    const discoveryPromise = new Promise((resolve) => {
+      resolveDiscovery = resolve;
+    });
+
+    const dataSource = {
+      getDiscovery: vi.fn().mockReturnValue(discoveryPromise),
+    };
+
+    const { result, unmount } = renderHook(() => useDiscovery(), {
+      wrapper: createWrapper(dataSource),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    unmount();
+
+    // Resolve after unmount — state should not update
+    resolveDiscovery!({ name: 'late-response' });
+
+    // Discovery should remain null since the component was unmounted
+    expect(result.current.discovery).toBeNull();
+  });
+});

package/src/hooks/__tests__/useDynamicApp.test.ts

@@ -0,0 +1,161 @@
+/**
+ * Tests for useDynamicApp hook
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useDynamicApp } from '../useDynamicApp';
+
+describe('useDynamicApp', () => {
+  const staticConfig = {
+    name: 'crm',
+    label: 'CRM App',
+    objects: ['contact', 'account'],
+  };
+
+  it('returns static config when no adapter is provided', () => {
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig }),
+    );
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isServerConfig).toBe(false);
+  });
+
+  it('returns null config when neither adapter nor static config provided', () => {
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm' }),
+    );
+
+    expect(result.current.config).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('loads config from server adapter', async () => {
+    const serverConfig = { name: 'crm', label: 'CRM (Server)', objects: ['contact'] };
+    const adapter = {
+      getApp: vi.fn().mockResolvedValue(serverConfig),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter }),
+    );
+
+    // Initially loading
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.config).toEqual(serverConfig);
+    expect(result.current.isServerConfig).toBe(true);
+    expect(adapter.getApp).toHaveBeenCalledWith('crm');
+  });
+
+  it('falls back to static config when server returns null', async () => {
+    const adapter = {
+      getApp: vi.fn().mockResolvedValue(null),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isServerConfig).toBe(false);
+  });
+
+  it('falls back to static config on server error', async () => {
+    const adapter = {
+      getApp: vi.fn().mockRejectedValue(new Error('Network error')),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isServerConfig).toBe(false);
+    expect(result.current.error?.message).toBe('Network error');
+  });
+
+  it('skips loading when enabled is false', () => {
+    const adapter = {
+      getApp: vi.fn(),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', staticConfig, adapter, enabled: false }),
+    );
+
+    expect(result.current.config).toEqual(staticConfig);
+    expect(result.current.isLoading).toBe(false);
+    expect(adapter.getApp).not.toHaveBeenCalled();
+  });
+
+  it('refresh invalidates cache and re-fetches', async () => {
+    let callCount = 0;
+    const adapter = {
+      getApp: vi.fn().mockImplementation(async () => {
+        callCount++;
+        return { name: 'crm', version: callCount };
+      }),
+      invalidateCache: vi.fn(),
+    };
+
+    const { result } = renderHook(() =>
+      useDynamicApp({ appId: 'crm', adapter }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect((result.current.config as any).version).toBe(1);
+
+    await act(async () => {
+      await result.current.refresh();
+    });
+
+    expect(adapter.invalidateCache).toHaveBeenCalledWith('app:crm');
+    expect((result.current.config as any).version).toBe(2);
+  });
+
+  it('reloads when appId changes', async () => {
+    const adapter = {
+      getApp: vi.fn().mockImplementation(async (appId: string) => {
+        return { name: appId };
+      }),
+    };
+
+    const { result, rerender } = renderHook(
+      ({ appId }: { appId: string }) =>
+        useDynamicApp({ appId, adapter }),
+      { initialProps: { appId: 'crm' } },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect((result.current.config as any).name).toBe('crm');
+
+    rerender({ appId: 'erp' });
+
+    await waitFor(() => {
+      expect((result.current.config as any).name).toBe('erp');
+    });
+
+    expect(adapter.getApp).toHaveBeenCalledWith('erp');
+  });
+});

package/src/hooks/__tests__/useExpression.test.ts

@@ -0,0 +1,86 @@
+/**
+ * Tests for useExpression and useCondition hooks
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useExpression, useCondition } from '../useExpression';
+
+describe('useExpression', () => {
+  it('returns string value directly for non-expression strings', () => {
+    const { result } = renderHook(() => useExpression('hello'));
+
+    expect(result.current).toBe('hello');
+  });
+
+  it('returns number value directly', () => {
+    const { result } = renderHook(() => useExpression(42));
+
+    expect(result.current).toBe(42);
+  });
+
+  it('returns boolean value directly', () => {
+    const { result } = renderHook(() => useExpression(true));
+
+    expect(result.current).toBe(true);
+  });
+
+  it('returns null for null expressions', () => {
+    const { result } = renderHook(() => useExpression(null));
+
+    expect(result.current).toBeNull();
+  });
+
+  it('returns undefined for undefined expressions', () => {
+    const { result } = renderHook(() => useExpression(undefined));
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('evaluates expressions with ${...} syntax', () => {
+    const context = { data: { name: 'John' } };
+    const { result } = renderHook(() =>
+      useExpression('${data.name}', context),
+    );
+
+    expect(result.current).toBe('John');
+  });
+
+  it('evaluates expressions with context data', () => {
+    const context = { data: { age: 25 } };
+    const { result } = renderHook(() =>
+      useExpression('${data.age > 18}', context),
+    );
+
+    expect(result.current).toBe(true);
+  });
+});
+
+describe('useCondition', () => {
+  it('returns true for boolean true', () => {
+    const { result } = renderHook(() => useCondition(true));
+
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false for boolean false', () => {
+    const { result } = renderHook(() => useCondition(false));
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns true for undefined', () => {
+    const { result } = renderHook(() => useCondition(undefined));
+
+    expect(result.current).toBe(true);
+  });
+
+  it('evaluates string conditions with context', () => {
+    const context = { data: { status: 'active' } };
+    const { result } = renderHook(() =>
+      useCondition('${data.status === "active"}', context),
+    );
+
+    expect(result.current).toBe(true);
+  });
+});

package/src/hooks/index.ts

@@ -8,4 +8,9 @@
 
 export * from './useExpression';
 export * from './useActionRunner';
+export * from './useNavigationOverlay';
+export * from './usePageVariables';
+export * from './useViewData';
+export * from './useDynamicApp';
+export * from './useDiscovery';
 

package/src/hooks/useActionRunner.ts

@@ -7,36 +7,74 @@
  */
 
 import { useState, useCallback, useMemo } from 'react';
-import { ActionRunner, type ActionContext, type ActionResult } from '@object-ui/core';
+import {
+  ActionRunner,
+  type ActionContext,
+  type ActionDef,
+  type ActionResult,
+  type ConfirmationHandler,
+  type ToastHandler,
+  type ModalHandler,
+  type NavigationHandler,
+} from '@object-ui/core';
+
+export interface UseActionRunnerOptions {
+  context?: ActionContext;
+  /** Custom confirmation handler — wire to Shadcn AlertDialog or similar */
+  onConfirm?: ConfirmationHandler;
+  /** Custom toast handler — wire to Sonner or similar */
+  onToast?: ToastHandler;
+  /** Custom modal handler — render modals in response to modal actions */
+  onModal?: ModalHandler;
+  /** Custom navigation handler — SPA-aware routing */
+  onNavigate?: NavigationHandler;
+}
 
 /**
- * Hook for executing actions with loading state
+ * Hook for executing actions with loading state, typed with ActionDef.
  * 
  * @example
  * ```tsx
- * const { execute, loading, error, result } = useActionRunner({ data: formData });
+ * const { execute, loading, error, result } = useActionRunner({
+ *   context: { data: formData },
+ *   onToast: (msg, opts) => toast[opts?.type || 'info'](msg),
+ * });
  * 
  * const handleClick = () => {
  *   execute({
- *     type: 'action',
+ *     type: 'api',
  *     api: '/api/save',
- *     successMessage: 'Saved successfully!'
+ *     successMessage: 'Saved successfully!',
  *   });
  * };
  * ```
  */
-export function useActionRunner(context: ActionContext = {}) {
+export function useActionRunner(
+  optionsOrContext: UseActionRunnerOptions | ActionContext = {},
+) {
+  // Backwards compat: if no 'context' key, treat entire object as context
+  const options: UseActionRunnerOptions = 'context' in optionsOrContext
+    ? optionsOrContext as UseActionRunnerOptions
+    : { context: optionsOrContext as ActionContext };
+
+  const { context = {}, onConfirm, onToast, onModal, onNavigate } = options;
+
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<ActionResult | null>(null);
 
-  const runner = useMemo(
-    () => new ActionRunner(context),
-    [JSON.stringify(context)]
-  );
+  const runner = useMemo(() => {
+    const r = new ActionRunner(context);
+    if (onConfirm) r.setConfirmHandler(onConfirm);
+    if (onToast) r.setToastHandler(onToast);
+    if (onModal) r.setModalHandler(onModal);
+    if (onNavigate) r.setNavigationHandler(onNavigate);
+    return r;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(context)]);
 
   const execute = useCallback(
-    async (action: any): Promise<ActionResult> => {
+    async (action: ActionDef): Promise<ActionResult> => {
       setLoading(true);
       setError(null);
       setResult(null);