@object-ui/react 0.5.0 → 3.0.0

package/src/context/__tests__/ActionContext.test.tsx

@@ -0,0 +1,174 @@
+/**
+ * Tests for ActionContext — ActionProvider, useAction, useHasActionProvider
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import React from 'react';
+import { ActionProvider, useAction, useHasActionProvider } from '../ActionContext';
+
+describe('ActionContext', () => {
+  describe('useAction without ActionProvider', () => {
+    it('falls back to local ActionRunner with default state', () => {
+      const { result } = renderHook(() => useAction());
+
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBeNull();
+      expect(result.current.result).toBeNull();
+      expect(typeof result.current.execute).toBe('function');
+      expect(typeof result.current.executeChain).toBe('function');
+      expect(typeof result.current.updateContext).toBe('function');
+      expect(result.current.runner).toBeDefined();
+    });
+  });
+
+  describe('useHasActionProvider', () => {
+    it('returns false without provider', () => {
+      const { result } = renderHook(() => useHasActionProvider());
+
+      expect(result.current).toBe(false);
+    });
+
+    it('returns true with provider', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(ActionProvider, { context: {} }, children);
+
+      const { result } = renderHook(() => useHasActionProvider(), { wrapper });
+
+      expect(result.current).toBe(true);
+    });
+  });
+
+  describe('ActionProvider basic', () => {
+    it('children can access execute function', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(ActionProvider, { context: {} }, children);
+
+      const { result } = renderHook(() => useAction(), { wrapper });
+
+      expect(typeof result.current.execute).toBe('function');
+      expect(typeof result.current.executeChain).toBe('function');
+      expect(typeof result.current.updateContext).toBe('function');
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBeNull();
+      expect(result.current.result).toBeNull();
+    });
+  });
+
+  describe('ActionProvider execute', () => {
+    it('executes a toast action and returns result', async () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(ActionProvider, { context: {} }, children);
+
+      const { result } = renderHook(() => useAction(), { wrapper });
+
+      let actionResult: any;
+      await act(async () => {
+        actionResult = await result.current.execute({
+          type: 'script',
+          execute: 'true',
+          toast: { showOnSuccess: true },
+          successMessage: 'Done!',
+        });
+      });
+
+      expect(actionResult.success).toBe(true);
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.result).toEqual(actionResult);
+      expect(result.current.error).toBeNull();
+    });
+  });
+
+  describe('ActionProvider execute error', () => {
+    it('executes an action that fails and sets error state', async () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(ActionProvider, { context: {} }, children);
+
+      const { result } = renderHook(() => useAction(), { wrapper });
+
+      let actionResult: any;
+      await act(async () => {
+        actionResult = await result.current.execute({
+          onClick: vi.fn().mockRejectedValue(new Error('boom')),
+        });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(actionResult.success).toBe(false);
+      expect(result.current.error).toBeTruthy();
+      expect(result.current.result?.success).toBe(false);
+    });
+  });
+
+  describe('ActionProvider executeChain', () => {
+    it('executes a chain of actions', async () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(ActionProvider, { context: {} }, children);
+
+      const { result } = renderHook(() => useAction(), { wrapper });
+
+      let chainResult: any;
+      await act(async () => {
+        chainResult = await result.current.executeChain([
+          { type: 'script', execute: 'true' },
+          { type: 'script', execute: 'true' },
+        ]);
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(chainResult.success).toBe(true);
+      expect(result.current.result).toEqual(chainResult);
+      expect(result.current.error).toBeNull();
+    });
+  });
+
+  describe('ActionProvider updateContext', () => {
+    it('updateContext is callable', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(ActionProvider, { context: {} }, children);
+
+      const { result } = renderHook(() => useAction(), { wrapper });
+
+      expect(() => {
+        result.current.updateContext({ record: { id: 1 } });
+      }).not.toThrow();
+    });
+  });
+
+  describe('ActionProvider with handlers', () => {
+    it('invokes onToast handler when a toast action is executed', async () => {
+      const onToast = vi.fn();
+      const onNavigate = vi.fn();
+
+      const wrapper = ({ children }: { children: React.ReactNode }) =>
+        React.createElement(
+          ActionProvider,
+          { context: {}, onToast, onNavigate },
+          children,
+        );
+
+      const { result } = renderHook(() => useAction(), { wrapper });
+
+      await act(async () => {
+        await result.current.execute({
+          type: 'script',
+          execute: 'true',
+          toast: { showOnSuccess: true },
+          successMessage: 'Saved!',
+        });
+      });
+
+      expect(onToast).toHaveBeenCalledWith('Saved!', expect.objectContaining({ type: 'success' }));
+    });
+  });
+});

package/src/context/__tests__/DndContext.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * Tests for DndProvider and useDnd
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import React from 'react';
+import {
+  DndProvider,
+  useDnd,
+  useHasDndProvider,
+} from '../DndContext';
+
+const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <DndProvider>{children}</DndProvider>
+);
+
+describe('DndProvider', () => {
+  it('provides DnD context', () => {
+    const { result } = renderHook(() => useDnd(), { wrapper });
+    expect(result.current.enabled).toBe(true);
+    expect(result.current.activeItem).toBeNull();
+  });
+
+  it('starts drag operation', () => {
+    const onDragStart = vi.fn();
+    const customWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <DndProvider onDragStart={onDragStart}>{children}</DndProvider>
+    );
+
+    const { result } = renderHook(() => useDnd(), { wrapper: customWrapper });
+
+    act(() => {
+      result.current.startDrag({ id: 'item-1', type: 'card' });
+    });
+
+    expect(result.current.activeItem).toEqual({ id: 'item-1', type: 'card' });
+    expect(onDragStart).toHaveBeenCalledTimes(1);
+  });
+
+  it('ends drag operation', () => {
+    const onDrop = vi.fn();
+    const customWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <DndProvider onDrop={onDrop}>{children}</DndProvider>
+    );
+
+    const { result } = renderHook(() => useDnd(), { wrapper: customWrapper });
+
+    act(() => {
+      result.current.startDrag({ id: 'item-1', type: 'card' });
+    });
+
+    act(() => {
+      result.current.endDrag('zone-1');
+    });
+
+    expect(result.current.activeItem).toBeNull();
+    expect(onDrop).toHaveBeenCalledTimes(1);
+    expect(onDrop).toHaveBeenCalledWith(
+      expect.objectContaining({ item: { id: 'item-1', type: 'card' }, targetZoneId: 'zone-1' })
+    );
+  });
+
+  it('cancels drag operation', () => {
+    const onDragCancel = vi.fn();
+    const customWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <DndProvider onDragCancel={onDragCancel}>{children}</DndProvider>
+    );
+
+    const { result } = renderHook(() => useDnd(), { wrapper: customWrapper });
+
+    act(() => {
+      result.current.startDrag({ id: 'item-1', type: 'card' });
+    });
+
+    act(() => {
+      result.current.cancelDrag();
+    });
+
+    expect(result.current.activeItem).toBeNull();
+    expect(onDragCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('registers and checks drop zones', () => {
+    const { result } = renderHook(() => useDnd(), { wrapper });
+
+    act(() => {
+      result.current.registerDropZone({
+        id: 'zone-1',
+        acceptTypes: ['card', 'widget'],
+      });
+    });
+
+    expect(result.current.canDrop('zone-1', 'card')).toBe(true);
+    expect(result.current.canDrop('zone-1', 'unknown')).toBe(false);
+    expect(result.current.canDrop('nonexistent', 'card')).toBe(false);
+  });
+
+  it('unregisters drop zones', () => {
+    const { result } = renderHook(() => useDnd(), { wrapper });
+
+    act(() => {
+      result.current.registerDropZone({
+        id: 'zone-1',
+        acceptTypes: ['card'],
+      });
+    });
+
+    act(() => {
+      result.current.unregisterDropZone('zone-1');
+    });
+
+    expect(result.current.canDrop('zone-1', 'card')).toBe(false);
+  });
+
+  it('respects disabled config', () => {
+    const onDragStart = vi.fn();
+    const customWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <DndProvider config={{ enabled: false }} onDragStart={onDragStart}>{children}</DndProvider>
+    );
+
+    const { result } = renderHook(() => useDnd(), { wrapper: customWrapper });
+
+    act(() => {
+      result.current.startDrag({ id: 'item-1', type: 'card' });
+    });
+
+    expect(result.current.activeItem).toBeNull();
+    expect(onDragStart).not.toHaveBeenCalled();
+  });
+});
+
+describe('useHasDndProvider', () => {
+  it('returns false outside provider', () => {
+    const { result } = renderHook(() => useHasDndProvider());
+    expect(result.current).toBe(false);
+  });
+
+  it('returns true inside provider', () => {
+    const { result } = renderHook(() => useHasDndProvider(), { wrapper });
+    expect(result.current).toBe(true);
+  });
+});
+
+describe('useDnd without provider', () => {
+  it('throws error', () => {
+    expect(() => {
+      renderHook(() => useDnd());
+    }).toThrow('useDnd must be used within a <DndProvider>');
+  });
+});

package/src/context/__tests__/NotificationContext.test.tsx

@@ -0,0 +1,176 @@
+/**
+ * Tests for NotificationProvider and useNotifications
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import React from 'react';
+import {
+  NotificationProvider,
+  useNotifications,
+  useHasNotificationProvider,
+} from '../NotificationContext';
+
+const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <NotificationProvider>{children}</NotificationProvider>
+);
+
+describe('NotificationProvider', () => {
+  it('provides notifications context', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+    expect(result.current.notifications).toEqual([]);
+    expect(result.current.unreadCount).toBe(0);
+  });
+
+  it('adds a notification via notify', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.notify({ title: 'Hello', severity: 'info' });
+    });
+
+    expect(result.current.notifications).toHaveLength(1);
+    expect(result.current.notifications[0].title).toBe('Hello');
+    expect(result.current.unreadCount).toBe(1);
+  });
+
+  it('adds info notification', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.info('Info title', 'Info message');
+    });
+
+    expect(result.current.notifications[0].severity).toBe('info');
+  });
+
+  it('adds success notification', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.success('Success!');
+    });
+
+    expect(result.current.notifications[0].severity).toBe('success');
+  });
+
+  it('adds warning notification', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.warning('Warning!');
+    });
+
+    expect(result.current.notifications[0].severity).toBe('warning');
+  });
+
+  it('adds error notification', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.error('Error!');
+    });
+
+    expect(result.current.notifications[0].severity).toBe('error');
+  });
+
+  it('marks notification as read', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    let id: string = '';
+    act(() => {
+      id = result.current.info('Test');
+    });
+
+    act(() => {
+      result.current.markAsRead(id);
+    });
+
+    expect(result.current.notifications[0].read).toBe(true);
+    expect(result.current.unreadCount).toBe(0);
+  });
+
+  it('marks all as read', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.info('Test 1');
+      result.current.info('Test 2');
+    });
+
+    act(() => {
+      result.current.markAllAsRead();
+    });
+
+    expect(result.current.unreadCount).toBe(0);
+  });
+
+  it('dismisses a notification', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    let id: string = '';
+    act(() => {
+      id = result.current.info('Test');
+    });
+
+    act(() => {
+      result.current.dismiss(id);
+    });
+
+    expect(result.current.notifications).toHaveLength(0);
+  });
+
+  it('clears all notifications', () => {
+    const { result } = renderHook(() => useNotifications(), { wrapper });
+
+    act(() => {
+      result.current.info('Test 1');
+      result.current.info('Test 2');
+    });
+
+    act(() => {
+      result.current.clearAll();
+    });
+
+    expect(result.current.notifications).toHaveLength(0);
+  });
+
+  it('calls onToast handler', () => {
+    const onToast = vi.fn();
+    const customWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+      <NotificationProvider onToast={onToast}>{children}</NotificationProvider>
+    );
+
+    const { result } = renderHook(() => useNotifications(), {
+      wrapper: customWrapper,
+    });
+
+    act(() => {
+      result.current.info('Toast test');
+    });
+
+    expect(onToast).toHaveBeenCalledTimes(1);
+    expect(onToast).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'Toast test', severity: 'info' })
+    );
+  });
+});
+
+describe('useHasNotificationProvider', () => {
+  it('returns false outside provider', () => {
+    const { result } = renderHook(() => useHasNotificationProvider());
+    expect(result.current).toBe(false);
+  });
+
+  it('returns true inside provider', () => {
+    const { result } = renderHook(() => useHasNotificationProvider(), { wrapper });
+    expect(result.current).toBe(true);
+  });
+});
+
+describe('useNotifications without provider', () => {
+  it('throws error', () => {
+    expect(() => {
+      renderHook(() => useNotifications());
+    }).toThrow('useNotifications must be used within a <NotificationProvider>');
+  });
+});

package/src/context/index.ts

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

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' }),
+    );
+  });
+});