@object-ui/react 3.3.0 → 3.3.1

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

@@ -1,158 +0,0 @@
-/**
- * Tests for usePageTransition hook
- */
-import { describe, it, expect, vi } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { usePageTransition } from '../usePageTransition';
-
-describe('usePageTransition', () => {
-
-  it('returns inactive result when type is none (default)', () => {
-    const { result } = renderHook(() => usePageTransition());
-    expect(result.current.isActive).toBe(false);
-    expect(result.current.enterClassName).toBe('');
-    expect(result.current.exitClassName).toBe('');
-    expect(result.current.type).toBe('none');
-  });
-
-  it('returns active result for fade transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.isActive).toBe(true);
-    expect(result.current.enterClassName).toContain('fade-in');
-    expect(result.current.exitClassName).toContain('fade-out');
-    expect(result.current.type).toBe('fade');
-  });
-
-  it('returns correct classes for slide_up transition', () => {
-    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('returns correct classes for slide_down transition', () => {
-    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('returns correct classes for slide_left transition', () => {
-    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('returns correct classes for slide_right transition', () => {
-    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('returns correct classes for scale transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'scale' }));
-    expect(result.current.enterClassName).toContain('zoom-in');
-    expect(result.current.exitClassName).toContain('zoom-out');
-  });
-
-  it('returns correct classes for rotate transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'rotate' }));
-    expect(result.current.enterClassName).toContain('spin-in');
-    expect(result.current.exitClassName).toContain('spin-out');
-  });
-
-  it('returns correct classes for flip transition', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'flip' }));
-    expect(result.current.enterClassName).toContain('zoom-in');
-    expect(result.current.exitClassName).toContain('zoom-out');
-  });
-
-  it('uses default duration of 300ms', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.duration).toBe(300);
-    expect(result.current.enterStyle.animationDuration).toBe('300ms');
-  });
-
-  it('accepts custom duration', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', duration: 500 }));
-    expect(result.current.duration).toBe(500);
-    expect(result.current.enterStyle.animationDuration).toBe('500ms');
-  });
-
-  it('uses ease_in_out easing by default', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease-in-out');
-  });
-
-  it('accepts 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('sets animationFillMode to both', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.enterStyle.animationFillMode).toBe('both');
-    expect(result.current.exitStyle.animationFillMode).toBe('both');
-  });
-
-  it('applies crossFade positioning', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', crossFade: true }));
-    expect(result.current.enterStyle.position).toBe('absolute');
-    expect(result.current.enterStyle.inset).toBe('0');
-    expect(result.current.exitStyle.position).toBe('absolute');
-    expect(result.current.exitStyle.inset).toBe('0');
-  });
-
-  it('does not apply crossFade positioning when disabled', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', crossFade: false }));
-    expect(result.current.enterStyle.position).toBeUndefined();
-    expect(result.current.exitStyle.position).toBeUndefined();
-  });
-
-  it('returns inactive when reduced motion is preferred', () => {
-    // Mock window.matchMedia to simulate reduced motion preference
-    const original = window.matchMedia;
-    window.matchMedia = vi.fn((query: string) => ({
-      matches: query === '(prefers-reduced-motion: reduce)',
-      media: query,
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })) as unknown as typeof window.matchMedia;
-
-    const { result } = renderHook(() => usePageTransition({ type: 'fade' }));
-    expect(result.current.isActive).toBe(false);
-    expect(result.current.enterClassName).toBe('');
-    expect(result.current.exitClassName).toBe('');
-
-    window.matchMedia = original;
-  });
-
-  it('returns empty styles when inactive', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'none' }));
-    expect(result.current.enterStyle).toEqual({});
-    expect(result.current.exitStyle).toEqual({});
-  });
-
-  it('accepts linear easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'linear' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('linear');
-  });
-
-  it('accepts ease easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'ease' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease');
-  });
-
-  it('accepts ease_in easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'ease_in' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease-in');
-  });
-
-  it('accepts ease_out easing', () => {
-    const { result } = renderHook(() => usePageTransition({ type: 'fade', easing: 'ease_out' }));
-    expect(result.current.enterStyle.animationTimingFunction).toBe('ease-out');
-  });
-});

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

@@ -1,157 +0,0 @@
-/**
- * Tests for usePerformanceBudget hook
- */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { usePerformanceBudget } from '../usePerformanceBudget';
-
-describe('usePerformanceBudget', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    vi.restoreAllMocks();
-  });
-
-  it('returns default budget config when no config provided', () => {
-    const { result } = renderHook(() => usePerformanceBudget());
-
-    // Default snapshot values
-    expect(result.current.snapshot).toEqual({
-      lcp: null,
-      fcp: null,
-      memoryMB: null,
-    });
-    expect(result.current.clearViolations).toBeTypeOf('function');
-    expect(result.current.checkMetric).toBeTypeOf('function');
-    expect(result.current.trackRender).toBeTypeOf('function');
-  });
-
-  it('isWithinBudget is true initially (no violations)', () => {
-    const { result } = renderHook(() => usePerformanceBudget());
-
-    expect(result.current.isWithinBudget).toBe(true);
-    expect(result.current.violations).toEqual([]);
-  });
-
-  it('trackRender records a violation when render exceeds maxRenderTime', () => {
-    const { result } = renderHook(() =>
-      usePerformanceBudget({ maxRenderTime: 16, warnOnViolation: false }),
-    );
-
-    act(() => {
-      result.current.trackRender(50);
-    });
-
-    expect(result.current.violations).toHaveLength(1);
-    expect(result.current.violations[0].metric).toBe('renderTime');
-    expect(result.current.violations[0].actual).toBe(50);
-    expect(result.current.violations[0].budget).toBe(16);
-    expect(result.current.isWithinBudget).toBe(false);
-  });
-
-  it('trackRender does NOT record when render is within budget', () => {
-    const { result } = renderHook(() =>
-      usePerformanceBudget({ maxRenderTime: 16, warnOnViolation: false }),
-    );
-
-    let withinBudget: boolean = false;
-    act(() => {
-      withinBudget = result.current.trackRender(10);
-    });
-
-    expect(withinBudget).toBe(true);
-    expect(result.current.violations).toHaveLength(0);
-    expect(result.current.isWithinBudget).toBe(true);
-  });
-
-  it('checkMetric returns false for metrics exceeding budget', () => {
-    const { result } = renderHook(() =>
-      usePerformanceBudget({ maxLCP: 600, warnOnViolation: false }),
-    );
-
-    let withinBudget: boolean = true;
-    act(() => {
-      withinBudget = result.current.checkMetric('lcp', 800);
-    });
-
-    expect(withinBudget).toBe(false);
-    expect(result.current.violations).toHaveLength(1);
-    expect(result.current.violations[0].metric).toBe('lcp');
-  });
-
-  it('checkMetric returns true for metrics within budget', () => {
-    const { result } = renderHook(() =>
-      usePerformanceBudget({ maxLCP: 600, warnOnViolation: false }),
-    );
-
-    let withinBudget: boolean = false;
-    act(() => {
-      withinBudget = result.current.checkMetric('lcp', 400);
-    });
-
-    expect(withinBudget).toBe(true);
-    expect(result.current.violations).toHaveLength(0);
-  });
-
-  it('clearViolations removes all violations', () => {
-    const { result } = renderHook(() =>
-      usePerformanceBudget({ maxRenderTime: 16, warnOnViolation: false }),
-    );
-
-    act(() => {
-      result.current.trackRender(50);
-    });
-    expect(result.current.violations).toHaveLength(1);
-
-    act(() => {
-      result.current.clearViolations();
-    });
-
-    expect(result.current.violations).toHaveLength(0);
-    expect(result.current.isWithinBudget).toBe(true);
-  });
-
-  it('deduplication: same metric type only recorded once', () => {
-    const { result } = renderHook(() =>
-      usePerformanceBudget({ maxRenderTime: 16, warnOnViolation: false }),
-    );
-
-    act(() => {
-      result.current.trackRender(50);
-    });
-    act(() => {
-      result.current.trackRender(100);
-    });
-
-    // Only one violation for 'renderTime' due to deduplication
-    expect(result.current.violations).toHaveLength(1);
-    expect(result.current.violations[0].metric).toBe('renderTime');
-  });
-
-  it('onViolation callback is called on budget violation', () => {
-    const onViolation = vi.fn();
-    const { result } = renderHook(() =>
-      usePerformanceBudget({
-        maxRenderTime: 16,
-        warnOnViolation: false,
-        onViolation,
-      }),
-    );
-
-    act(() => {
-      result.current.trackRender(50);
-    });
-
-    expect(onViolation).toHaveBeenCalledTimes(1);
-    expect(onViolation).toHaveBeenCalledWith(
-      expect.objectContaining({
-        metric: 'renderTime',
-        budget: 16,
-        actual: 50,
-      }),
-    );
-  });
-});

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

@@ -1,104 +0,0 @@
-/**
- * Tests for useReducedMotion hook
- */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useReducedMotion } from '../useReducedMotion';
-
-describe('useReducedMotion', () => {
-  let originalMatchMedia: typeof window.matchMedia;
-  let listeners: Map<string, ((event: MediaQueryListEvent) => void)[]>;
-
-  beforeEach(() => {
-    originalMatchMedia = window.matchMedia;
-    listeners = new Map();
-
-    window.matchMedia = vi.fn((query: string) => {
-      const mediaQueryList = {
-        matches: false,
-        media: query,
-        onchange: null,
-        addEventListener: vi.fn((event: string, handler: (event: MediaQueryListEvent) => void) => {
-          const key = `${query}:${event}`;
-          if (!listeners.has(key)) {
-            listeners.set(key, []);
-          }
-          listeners.get(key)!.push(handler);
-        }),
-        removeEventListener: vi.fn(),
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      } as unknown as MediaQueryList;
-      return mediaQueryList;
-    });
-  });
-
-  afterEach(() => {
-    window.matchMedia = originalMatchMedia;
-    listeners.clear();
-  });
-
-  it('returns false when prefers-reduced-motion is not set', () => {
-    const { result } = renderHook(() => useReducedMotion());
-    expect(result.current).toBe(false);
-  });
-
-  it('returns true when prefers-reduced-motion is set', () => {
-    window.matchMedia = vi.fn((query: string) => ({
-      matches: true,
-      media: query,
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })) as unknown as typeof window.matchMedia;
-
-    const { result } = renderHook(() => useReducedMotion());
-    expect(result.current).toBe(true);
-  });
-
-  it('registers a change event listener', () => {
-    renderHook(() => useReducedMotion());
-
-    const key = '(prefers-reduced-motion: reduce):change';
-    expect(listeners.has(key)).toBe(true);
-    expect(listeners.get(key)!.length).toBe(1);
-  });
-
-  it('updates when media query changes', () => {
-    const { result } = renderHook(() => useReducedMotion());
-
-    expect(result.current).toBe(false);
-
-    const key = '(prefers-reduced-motion: reduce):change';
-    const handler = listeners.get(key)![0];
-
-    act(() => {
-      handler({ matches: true } as MediaQueryListEvent);
-    });
-
-    expect(result.current).toBe(true);
-  });
-
-  it('cleans up event listener on unmount', () => {
-    const removeEventListener = vi.fn();
-    window.matchMedia = vi.fn((query: string) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener,
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })) as unknown as typeof window.matchMedia;
-
-    const { unmount } = renderHook(() => useReducedMotion());
-    unmount();
-
-    expect(removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
-  });
-});

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

@@ -1,220 +0,0 @@
-/**
- * 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 { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import {
-  useSchemaPersistence,
-  createLocalStorageAdapter,
-} from '../useSchemaPersistence';
-import type { SchemaPersistenceAdapter } from '../useSchemaPersistence';
-
-// Mock localStorage
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: (key: string) => store[key] ?? null,
-    setItem: (key: string, value: string) => { store[key] = value; },
-    removeItem: (key: string) => { delete store[key]; },
-    clear: () => { store = {}; },
-  };
-})();
-
-Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-
-describe('useSchemaPersistence', () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-  });
-
-  it('should initialize with default state', () => {
-    const { result } = renderHook(() => useSchemaPersistence());
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-    expect(result.current.isDirty).toBe(false);
-    expect(result.current.lastSavedAt).toBeNull();
-  });
-
-  it('should save and load a schema with default localStorage adapter', async () => {
-    const { result } = renderHook(() => useSchemaPersistence());
-    const testSchema = { type: 'page', title: 'My Page', regions: [] };
-
-    let savedId: string | null = null;
-    await act(async () => {
-      savedId = await result.current.save('test-page', testSchema);
-    });
-
-    expect(savedId).toBe('test-page');
-    expect(result.current.isDirty).toBe(false);
-    expect(result.current.lastSavedAt).not.toBeNull();
-
-    let loaded: Record<string, unknown> | null = null;
-    await act(async () => {
-      loaded = await result.current.load('test-page');
-    });
-
-    expect(loaded).toEqual(testSchema);
-  });
-
-  it('should list saved schemas', async () => {
-    const { result } = renderHook(() => useSchemaPersistence());
-
-    await act(async () => {
-      await result.current.save('schema-1', { type: 'page' });
-      await result.current.save('schema-2', { type: 'form' });
-    });
-
-    let items: Array<{ id: string }> = [];
-    await act(async () => {
-      items = await result.current.list();
-    });
-
-    expect(items).toHaveLength(2);
-    expect(items.map((i) => i.id)).toEqual(['schema-1', 'schema-2']);
-  });
-
-  it('should delete a schema', async () => {
-    const { result } = renderHook(() => useSchemaPersistence());
-
-    await act(async () => {
-      await result.current.save('to-delete', { type: 'grid' });
-    });
-
-    let success = false;
-    await act(async () => {
-      success = await result.current.remove('to-delete');
-    });
-
-    expect(success).toBe(true);
-
-    let loaded: Record<string, unknown> | null = null;
-    await act(async () => {
-      loaded = await result.current.load('to-delete');
-    });
-
-    expect(loaded).toBeNull();
-  });
-
-  it('should track dirty state', () => {
-    const { result } = renderHook(() => useSchemaPersistence());
-
-    expect(result.current.isDirty).toBe(false);
-
-    act(() => {
-      result.current.markDirty();
-    });
-
-    expect(result.current.isDirty).toBe(true);
-  });
-
-  it('should clear dirty state after save', async () => {
-    const { result } = renderHook(() => useSchemaPersistence());
-
-    act(() => {
-      result.current.markDirty();
-    });
-    expect(result.current.isDirty).toBe(true);
-
-    await act(async () => {
-      await result.current.save('test', { type: 'page' });
-    });
-    expect(result.current.isDirty).toBe(false);
-  });
-
-  it('should handle save errors gracefully', async () => {
-    const failingAdapter: SchemaPersistenceAdapter = {
-      save: () => Promise.reject(new Error('Network error')),
-      load: () => Promise.resolve(null),
-    };
-
-    const { result } = renderHook(() => useSchemaPersistence(failingAdapter));
-
-    await act(async () => {
-      await result.current.save('test', { type: 'page' });
-    });
-
-    expect(result.current.error).not.toBeNull();
-    expect(result.current.error?.message).toBe('Network error');
-  });
-
-  it('should clear errors', async () => {
-    const failingAdapter: SchemaPersistenceAdapter = {
-      save: () => Promise.reject(new Error('fail')),
-      load: () => Promise.resolve(null),
-    };
-
-    const { result } = renderHook(() => useSchemaPersistence(failingAdapter));
-
-    await act(async () => {
-      await result.current.save('test', { type: 'page' });
-    });
-    expect(result.current.error).not.toBeNull();
-
-    act(() => {
-      result.current.clearError();
-    });
-    expect(result.current.error).toBeNull();
-  });
-
-  it('should work with custom adapter', async () => {
-    const mockStore: Record<string, Record<string, unknown>> = {};
-    const customAdapter: SchemaPersistenceAdapter = {
-      save: async (id, schema) => { mockStore[id] = schema; return id; },
-      load: async (id) => mockStore[id] ?? null,
-      list: async () => Object.keys(mockStore).map((id) => ({ id })),
-      delete: async (id) => { delete mockStore[id]; },
-    };
-
-    const { result } = renderHook(() => useSchemaPersistence(customAdapter));
-
-    await act(async () => {
-      await result.current.save('custom-1', { type: 'dashboard' });
-    });
-
-    let loaded: Record<string, unknown> | null = null;
-    await act(async () => {
-      loaded = await result.current.load('custom-1');
-    });
-
-    expect(loaded).toEqual({ type: 'dashboard' });
-  });
-});
-
-describe('createLocalStorageAdapter', () => {
-  beforeEach(() => {
-    localStorageMock.clear();
-  });
-
-  it('should create an adapter with custom prefix', async () => {
-    const adapter = createLocalStorageAdapter('my-prefix');
-
-    await adapter.save('test', { hello: 'world' });
-    const result = await adapter.load('test');
-    expect(result).toEqual({ hello: 'world' });
-  });
-
-  it('should maintain an index of saved schemas', async () => {
-    const adapter = createLocalStorageAdapter('test-prefix');
-
-    await adapter.save('a', { type: 'a' });
-    await adapter.save('b', { type: 'b' });
-
-    const items = await adapter.list!();
-    expect(items).toHaveLength(2);
-  });
-
-  it('should not duplicate IDs in index', async () => {
-    const adapter = createLocalStorageAdapter('test-prefix');
-
-    await adapter.save('same-id', { v: 1 });
-    await adapter.save('same-id', { v: 2 });
-
-    const items = await adapter.list!();
-    expect(items).toHaveLength(1);
-  });
-});