@object-ui/react 2.0.0 → 3.0.0

package/src/__tests__/SchemaRendererProvider.smoke.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * 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.
+ */
+
+/**
+ * Smoke tests for SchemaRendererProvider.
+ *
+ * These tests ensure that every registered plugin component that calls
+ * useSchemaContext() can render without throwing when wrapped in a
+ * SchemaRendererProvider. This catches the class of errors reported in
+ * Storybook ("useSchemaContext must be used within a SchemaRendererProvider").
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { SchemaRenderer } from '../SchemaRenderer';
+import { SchemaRendererProvider, useSchemaContext } from '../context/SchemaRendererContext';
+
+// Suppress console.error from React error boundary during tests
+const originalConsoleError = console.error;
+beforeEach(() => {
+  console.error = vi.fn();
+});
+afterEach(() => {
+  console.error = originalConsoleError;
+});
+
+// Helper: a component that calls useSchemaContext (mimics plugin pattern)
+const ContextConsumer: React.FC<any> = ({ schema }) => {
+  const { dataSource } = useSchemaContext();
+  return <div data-testid="ctx-consumer">dataSource: {JSON.stringify(dataSource)}</div>;
+};
+
+describe('useSchemaContext provider requirement', () => {
+  it('should throw when used outside SchemaRendererProvider', () => {
+    expect(() => render(<ContextConsumer schema={{}} />)).toThrow(
+      'useSchemaContext must be used within a SchemaRendererProvider'
+    );
+  });
+
+  it('should not throw when used inside SchemaRendererProvider', () => {
+    render(
+      <SchemaRendererProvider dataSource={{ test: true }}>
+        <ContextConsumer schema={{}} />
+      </SchemaRendererProvider>
+    );
+    expect(screen.getByTestId('ctx-consumer')).toHaveTextContent('dataSource: {"test":true}');
+  });
+
+  it('should fall back to empty dataSource when provider has empty object', () => {
+    render(
+      <SchemaRendererProvider dataSource={{}}>
+        <ContextConsumer schema={{}} />
+      </SchemaRendererProvider>
+    );
+    expect(screen.getByTestId('ctx-consumer')).toHaveTextContent('dataSource: {}');
+  });
+});
+
+describe('SchemaRenderer + SchemaRendererProvider integration', () => {
+  beforeEach(() => {
+    ComponentRegistry.register('test-ctx-consumer', ContextConsumer);
+  });
+
+  afterEach(() => {
+    ComponentRegistry.unregister?.('test-ctx-consumer');
+  });
+
+  it('should render a component that calls useSchemaContext without error when provider wraps the tree', () => {
+    render(
+      <SchemaRendererProvider dataSource={{ foo: 'bar' }}>
+        <SchemaRenderer schema={{ type: 'test-ctx-consumer' }} />
+      </SchemaRendererProvider>
+    );
+    expect(screen.getByTestId('ctx-consumer')).toHaveTextContent('dataSource: {"foo":"bar"}');
+  });
+
+  it('should show error boundary fallback (not crash) when provider is missing', () => {
+    // Without a provider, the SchemaErrorBoundary catches the throw
+    render(
+      <SchemaRenderer schema={{ type: 'test-ctx-consumer' }} />
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByText(/failed to render/i)).toBeInTheDocument();
+  });
+});
+
+describe('Plugin component types render inside provider', () => {
+  // This test ensures all registered plugin types that use useSchemaContext
+  // can at least mount without throwing inside a SchemaRendererProvider.
+  const pluginTypes = [
+    'kanban',
+    'object-kanban',
+    'timeline',
+    'object-timeline',
+    'object-grid',
+    'object-calendar',
+    'object-map',
+    'chart',
+    'object-gantt',
+  ];
+
+  for (const type of pluginTypes) {
+    it(`type="${type}" should not throw inside SchemaRendererProvider`, () => {
+      const component = ComponentRegistry.get(type);
+      if (!component) {
+        // Component not registered in test environment — skip
+        return;
+      }
+
+      // Render via SchemaRenderer inside provider
+      const { container } = render(
+        <SchemaRendererProvider dataSource={{}}>
+          <SchemaRenderer schema={{ type }} />
+        </SchemaRendererProvider>
+      );
+
+      // Should NOT show the error boundary alert
+      const alerts = container.querySelectorAll('[role="alert"]');
+      const providerErrors = Array.from(alerts).filter((el) =>
+        el.textContent?.includes('useSchemaContext must be used within')
+      );
+      expect(providerErrors).toHaveLength(0);
+    });
+  }
+});

package/src/__tests__/useOffline.test.ts

@@ -0,0 +1,198 @@
+/**
+ * ObjectUI — useOffline Tests
+ * 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, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useOffline } from '../hooks/useOffline';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const QUEUE_KEY = 'objectui-offline-queue';
+
+function mockOnlineStatus(online: boolean) {
+  Object.defineProperty(navigator, 'onLine', {
+    value: online,
+    configurable: true,
+    writable: true,
+  });
+}
+
+function triggerOnline() {
+  mockOnlineStatus(true);
+  window.dispatchEvent(new Event('online'));
+}
+
+function triggerOffline() {
+  mockOnlineStatus(false);
+  window.dispatchEvent(new Event('offline'));
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useOffline', () => {
+  beforeEach(() => {
+    mockOnlineStatus(true);
+    localStorage.removeItem(QUEUE_KEY);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should default to online with empty queue', () => {
+    const { result } = renderHook(() => useOffline());
+    expect(result.current.isOnline).toBe(true);
+    expect(result.current.enabled).toBe(true);
+    expect(result.current.syncState).toBe('idle');
+    expect(result.current.pendingCount).toBe(0);
+    expect(result.current.showIndicator).toBe(false);
+    expect(result.current.strategy).toBe('network_first');
+  });
+
+  it('should detect offline status', () => {
+    const { result } = renderHook(() => useOffline());
+    expect(result.current.isOnline).toBe(true);
+
+    act(() => {
+      triggerOffline();
+    });
+
+    expect(result.current.isOnline).toBe(false);
+    expect(result.current.showIndicator).toBe(true);
+  });
+
+  it('should detect coming back online', () => {
+    mockOnlineStatus(false);
+    const { result } = renderHook(() => useOffline());
+    expect(result.current.isOnline).toBe(false);
+
+    act(() => {
+      triggerOnline();
+    });
+
+    expect(result.current.isOnline).toBe(true);
+    expect(result.current.showIndicator).toBe(false);
+  });
+
+  it('should queue mutations', () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({
+        operation: 'create',
+        resource: 'users',
+        data: { name: 'Alice' },
+      });
+    });
+
+    expect(result.current.pendingCount).toBe(1);
+
+    act(() => {
+      result.current.queueMutation({
+        operation: 'update',
+        resource: 'users',
+        data: { id: '1', name: 'Bob' },
+      });
+    });
+
+    expect(result.current.pendingCount).toBe(2);
+  });
+
+  it('should clear the mutation queue', () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+      result.current.queueMutation({ operation: 'delete', resource: 'users' });
+    });
+
+    expect(result.current.pendingCount).toBe(2);
+
+    act(() => {
+      result.current.clearQueue();
+    });
+
+    expect(result.current.pendingCount).toBe(0);
+  });
+
+  it('should enforce queueMaxSize', () => {
+    const { result } = renderHook(() => useOffline({ queueMaxSize: 2 }));
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'a' });
+      result.current.queueMutation({ operation: 'create', resource: 'b' });
+      result.current.queueMutation({ operation: 'create', resource: 'c' });
+    });
+
+    expect(result.current.pendingCount).toBe(2);
+  });
+
+  it('should respect custom config values', () => {
+    const { result } = renderHook(() =>
+      useOffline({
+        strategy: 'cache_first',
+        offlineIndicator: false,
+        offlineMessage: 'Custom message',
+      }),
+    );
+
+    expect(result.current.strategy).toBe('cache_first');
+    expect(result.current.offlineMessage).toBe('Custom message');
+
+    act(() => {
+      triggerOffline();
+    });
+
+    // offlineIndicator is false, so showIndicator should be false even when offline
+    expect(result.current.showIndicator).toBe(false);
+  });
+
+  it('should not queue mutations when disabled', () => {
+    const { result } = renderHook(() => useOffline({ enabled: false }));
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+    });
+
+    expect(result.current.pendingCount).toBe(0);
+    expect(result.current.enabled).toBe(false);
+  });
+
+  it('should sync mutations', async () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+    });
+
+    expect(result.current.pendingCount).toBe(1);
+
+    await act(async () => {
+      await result.current.sync();
+    });
+
+    expect(result.current.pendingCount).toBe(0);
+    expect(result.current.syncState).toBe('idle');
+  });
+
+  it('should persist queue to localStorage', () => {
+    const { result } = renderHook(() => useOffline());
+
+    act(() => {
+      result.current.queueMutation({ operation: 'create', resource: 'users' });
+    });
+
+    const stored = JSON.parse(localStorage.getItem(QUEUE_KEY) || '[]');
+    expect(stored).toHaveLength(1);
+    expect(stored[0].resource).toBe('users');
+  });
+});

package/src/__tests__/usePageTransition.test.ts

@@ -0,0 +1,214 @@
+/**
+ * ObjectUI — usePageTransition Tests
+ * 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, beforeEach, afterEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { usePageTransition } from '../hooks/usePageTransition';
+
+// ---------------------------------------------------------------------------
+// matchMedia mock helper
+// ---------------------------------------------------------------------------
+
+function mockMatchMedia(reducedMotion: boolean) {
+  const listeners: Array<(e: MediaQueryListEvent) => void> = [];
+  const mql = {
+    matches: reducedMotion,
+    media: '(prefers-reduced-motion: reduce)',
+    addEventListener: (_: string, cb: (e: MediaQueryListEvent) => void) => {
+      listeners.push(cb);
+    },
+    removeEventListener: (_: string, cb: (e: MediaQueryListEvent) => void) => {
+      const idx = listeners.indexOf(cb);
+      if (idx >= 0) listeners.splice(idx, 1);
+    },
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    onchange: null,
+    dispatchEvent: vi.fn(),
+  } as unknown as MediaQueryList;
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: vi.fn().mockReturnValue(mql),
+  });
+
+  return { mql, listeners };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('usePageTransition', () => {
+  beforeEach(() => {
+    mockMatchMedia(false);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return inactive result for default (none) type', () => {
+    const { result } = renderHook(() => usePageTransition());
+
+    expect(result.current.isActive).toBe(false);
+    expect(result.current.type).toBe('none');
+    expect(result.current.enterClassName).toBe('');
+    expect(result.current.exitClassName).toBe('');
+    expect(result.current.enterStyle).toEqual({});
+    expect(result.current.exitStyle).toEqual({});
+  });
+
+  it('should generate fade transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'fade', duration: 200 }),
+    );
+
+    expect(result.current.isActive).toBe(true);
+    expect(result.current.enterClassName).toContain('animate-in');
+    expect(result.current.enterClassName).toContain('fade-in');
+    expect(result.current.exitClassName).toContain('animate-out');
+    expect(result.current.exitClassName).toContain('fade-out');
+    expect(result.current.enterStyle.animationDuration).toBe('200ms');
+    expect(result.current.duration).toBe(200);
+  });
+
+  it('should generate slide_up transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'slide_up' }),
+    );
+
+    expect(result.current.isActive).toBe(true);
+    expect(result.current.enterClassName).toContain('slide-in-from-bottom');
+    expect(result.current.exitClassName).toContain('slide-out-to-top');
+  });
+
+  it('should generate slide_down transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'slide_down' }),
+    );
+
+    expect(result.current.enterClassName).toContain('slide-in-from-top');
+    expect(result.current.exitClassName).toContain('slide-out-to-bottom');
+  });
+
+  it('should generate slide_left transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'slide_left' }),
+    );
+
+    expect(result.current.enterClassName).toContain('slide-in-from-right');
+    expect(result.current.exitClassName).toContain('slide-out-to-left');
+  });
+
+  it('should generate slide_right transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'slide_right' }),
+    );
+
+    expect(result.current.enterClassName).toContain('slide-in-from-left');
+    expect(result.current.exitClassName).toContain('slide-out-to-right');
+  });
+
+  it('should generate scale transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'scale' }),
+    );
+
+    expect(result.current.enterClassName).toContain('zoom-in');
+    expect(result.current.exitClassName).toContain('zoom-out');
+  });
+
+  it('should generate rotate transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'rotate' }),
+    );
+
+    expect(result.current.enterClassName).toContain('spin-in');
+    expect(result.current.exitClassName).toContain('spin-out');
+  });
+
+  it('should generate flip transition classes', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'flip' }),
+    );
+
+    expect(result.current.isActive).toBe(true);
+    expect(result.current.enterClassName).toContain('fade-in');
+    expect(result.current.exitClassName).toContain('fade-out');
+  });
+
+  it('should apply custom easing', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'fade', easing: 'spring' }),
+    );
+
+    expect(result.current.enterStyle.animationTimingFunction).toBe(
+      'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    );
+  });
+
+  it('should apply custom duration', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'fade', duration: 500 }),
+    );
+
+    expect(result.current.enterStyle.animationDuration).toBe('500ms');
+    expect(result.current.duration).toBe(500);
+  });
+
+  it('should use default duration of 300ms', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'fade' }),
+    );
+
+    expect(result.current.duration).toBe(300);
+    expect(result.current.enterStyle.animationDuration).toBe('300ms');
+  });
+
+  it('should disable transitions when reduced motion is preferred', () => {
+    mockMatchMedia(true);
+
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'fade', duration: 200 }),
+    );
+
+    expect(result.current.isActive).toBe(false);
+    expect(result.current.enterClassName).toBe('');
+    expect(result.current.exitClassName).toBe('');
+    expect(result.current.enterStyle).toEqual({});
+    expect(result.current.exitStyle).toEqual({});
+  });
+
+  it('should set animationFillMode to both', () => {
+    const { result } = renderHook(() =>
+      usePageTransition({ type: 'fade' }),
+    );
+
+    expect(result.current.enterStyle.animationFillMode).toBe('both');
+    expect(result.current.exitStyle.animationFillMode).toBe('both');
+  });
+
+  it('should support all easing values', () => {
+    const easings = [
+      { input: 'linear' as const, expected: 'linear' },
+      { input: 'ease' as const, expected: 'ease' },
+      { input: 'ease_in' as const, expected: 'ease-in' },
+      { input: 'ease_out' as const, expected: 'ease-out' },
+      { input: 'ease_in_out' as const, expected: 'ease-in-out' },
+    ];
+
+    for (const { input, expected } of easings) {
+      const { result } = renderHook(() =>
+        usePageTransition({ type: 'fade', easing: input }),
+      );
+      expect(result.current.enterStyle.animationTimingFunction).toBe(expected);
+    }
+  });
+});

package/src/__tests__/usePerformance.test.ts

@@ -0,0 +1,137 @@
+/**
+ * ObjectUI — usePerformance Tests
+ * 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, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { usePerformance } from '../hooks/usePerformance';
+
+describe('usePerformance', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return default config values', () => {
+    const { result } = renderHook(() => usePerformance());
+
+    expect(result.current.config).toEqual({
+      lazyLoad: true,
+      cacheStrategy: 'stale-while-revalidate',
+      prefetch: false,
+      pageSize: 50,
+      debounceMs: 300,
+      virtualScroll: {
+        enabled: false,
+        itemHeight: 40,
+        overscan: 5,
+      },
+    });
+  });
+
+  it('should merge user config with defaults', () => {
+    const { result } = renderHook(() =>
+      usePerformance({
+        lazyLoad: false,
+        pageSize: 100,
+        virtualScroll: { enabled: true, itemHeight: 60 },
+      }),
+    );
+
+    expect(result.current.config.lazyLoad).toBe(false);
+    expect(result.current.config.pageSize).toBe(100);
+    expect(result.current.config.virtualScroll.enabled).toBe(true);
+    expect(result.current.config.virtualScroll.itemHeight).toBe(60);
+    // Default overscan preserved
+    expect(result.current.config.virtualScroll.overscan).toBe(5);
+  });
+
+  it('should accept all cache strategy values', () => {
+    for (const strategy of [
+      'none',
+      'cache-first',
+      'network-first',
+      'stale-while-revalidate',
+    ] as const) {
+      const { result } = renderHook(() =>
+        usePerformance({ cacheStrategy: strategy }),
+      );
+      expect(result.current.config.cacheStrategy).toBe(strategy);
+    }
+  });
+
+  it('should track render count via markRenderStart', () => {
+    const { result } = renderHook(() => usePerformance());
+
+    // Initial render count should be 0 (only increments when markRenderStart stop is called)
+    expect(result.current.metrics.renderCount).toBe(0);
+
+    // After calling markRenderStart and its stop function, count should increment
+    act(() => {
+      const stop = result.current.markRenderStart();
+      stop();
+    });
+    expect(result.current.metrics.renderCount).toBeGreaterThanOrEqual(1);
+  });
+
+  it('should provide markRenderStart that returns stop function', () => {
+    const { result } = renderHook(() => usePerformance());
+
+    let stop: () => void;
+    act(() => {
+      stop = result.current.markRenderStart();
+    });
+
+    // stop should be a function
+    expect(typeof stop!).toBe('function');
+
+    act(() => {
+      stop();
+    });
+
+    // After calling stop, lastRenderDuration should be a number
+    expect(result.current.metrics.lastRenderDuration).toBeTypeOf('number');
+    expect(result.current.metrics.lastRenderDuration!).toBeGreaterThanOrEqual(0);
+  });
+
+  it('should create a debounced function', async () => {
+    const { result } = renderHook(() => usePerformance({ debounceMs: 100 }));
+
+    const callback = vi.fn();
+    let debounced: typeof callback;
+
+    act(() => {
+      debounced = result.current.debounce(callback);
+    });
+
+    // Call the debounced function multiple times in quick succession
+    act(() => {
+      debounced!('arg1');
+    });
+
+    // Callback not called immediately
+    expect(callback).not.toHaveBeenCalled();
+
+    // Wait for debounce to fire
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 150));
+    });
+
+    // Called once with the last arguments
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith('arg1');
+  });
+
+  it('should provide initial metrics with null values', () => {
+    const { result } = renderHook(() => usePerformance());
+
+    // FCP and LCP may be null in test environment
+    expect(result.current.metrics.lcp).toBeNull();
+    expect(result.current.metrics.fcp).toBeNull();
+    expect(result.current.metrics.tti).toBeNull();
+    expect(result.current.metrics.lastRenderDuration).toBeNull();
+  });
+});