@object-ui/react 3.3.0 → 3.3.1

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

@@ -1,132 +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.
- */
-
-/**
- * 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__/ThemeProvider.test.tsx

@@ -1,451 +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 React from 'react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import type { Theme } from '@object-ui/types';
-import {
-  ThemeProvider,
-  useTheme,
-  useOptionalTheme,
-} from '../context/ThemeContext';
-
-// ============================================================================
-// Fixtures
-// ============================================================================
-
-const lightTheme: Theme = {
-  name: 'light',
-  label: 'Light',
-  mode: 'light',
-  colors: {
-    primary: '#3B82F6',
-    secondary: '#64748B',
-    background: '#FFFFFF',
-    text: '#0F172A',
-    error: '#EF4444',
-  },
-  typography: {
-    fontFamily: { base: 'Inter, sans-serif' },
-    fontSize: { base: '1rem' },
-  },
-  borderRadius: { base: '0.25rem', lg: '0.5rem' },
-};
-
-const darkTheme: Theme = {
-  name: 'dark',
-  label: 'Dark',
-  mode: 'dark',
-  colors: {
-    primary: '#60A5FA',
-    secondary: '#94A3B8',
-    background: '#0F172A',
-    text: '#F1F5F9',
-    error: '#FCA5A5',
-  },
-};
-
-const childTheme: Theme = {
-  name: 'corporate',
-  label: 'Corporate',
-  colors: { primary: '#1E40AF' },
-  extends: 'light',
-};
-
-function createWrapper(props: Omit<React.ComponentProps<typeof ThemeProvider>, 'children'>) {
-  return function Wrapper({ children }: { children: React.ReactNode }) {
-    return <ThemeProvider {...props}>{children}</ThemeProvider>;
-  };
-}
-
-// ============================================================================
-// Setup
-// ============================================================================
-
-beforeEach(() => {
-  // Clean DOM state
-  document.documentElement.style.cssText = '';
-  document.documentElement.className = '';
-  localStorage.clear();
-});
-
-afterEach(() => {
-  document.documentElement.style.cssText = '';
-  document.documentElement.className = '';
-  localStorage.clear();
-});
-
-// ============================================================================
-// useTheme — basic context
-// ============================================================================
-
-describe('useTheme', () => {
-  it('should throw when used outside ThemeProvider', () => {
-    expect(() => {
-      renderHook(() => useTheme());
-    }).toThrow('useTheme must be used within a <ThemeProvider>');
-  });
-
-  it('should return theme context when inside ThemeProvider', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    expect(result.current.theme).toBeTruthy();
-    expect(result.current.theme?.name).toBe('light');
-    expect(result.current.activeTheme).toBe('light');
-  });
-
-  it('should default to first theme when no defaultTheme', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [darkTheme, lightTheme] }),
-    });
-
-    expect(result.current.activeTheme).toBe('dark');
-  });
-
-  it('should use defaultTheme when provided', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme, darkTheme], defaultTheme: 'dark' }),
-    });
-
-    expect(result.current.activeTheme).toBe('dark');
-  });
-
-  it('should return empty state when no themes', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [] }),
-    });
-
-    expect(result.current.theme).toBeNull();
-    expect(result.current.activeTheme).toBeNull();
-    expect(result.current.cssVars).toEqual({});
-  });
-});
-
-// ============================================================================
-// useOptionalTheme
-// ============================================================================
-
-describe('useOptionalTheme', () => {
-  it('should return null outside ThemeProvider', () => {
-    const { result } = renderHook(() => useOptionalTheme());
-    expect(result.current).toBeNull();
-  });
-
-  it('should return context inside ThemeProvider', () => {
-    const { result } = renderHook(() => useOptionalTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    expect(result.current).toBeTruthy();
-    expect(result.current?.theme?.name).toBe('light');
-  });
-});
-
-// ============================================================================
-// Theme switching
-// ============================================================================
-
-describe('Theme switching', () => {
-  it('should switch theme via setTheme', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme, darkTheme], defaultTheme: 'light' }),
-    });
-
-    expect(result.current.activeTheme).toBe('light');
-
-    act(() => {
-      result.current.setTheme('dark');
-    });
-
-    expect(result.current.activeTheme).toBe('dark');
-    expect(result.current.theme?.name).toBe('dark');
-  });
-
-  it('should not switch to nonexistent theme', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme], defaultTheme: 'light' }),
-    });
-
-    act(() => {
-      result.current.setTheme('nonexistent');
-    });
-
-    expect(result.current.activeTheme).toBe('light');
-  });
-
-  it('should update CSS variables when theme changes', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme, darkTheme], defaultTheme: 'light' }),
-    });
-
-    const lightPrimary = result.current.cssVars['--primary'];
-
-    act(() => {
-      result.current.setTheme('dark');
-    });
-
-    const darkPrimary = result.current.cssVars['--primary'];
-    expect(darkPrimary).not.toBe(lightPrimary);
-  });
-});
-
-// ============================================================================
-// Mode management
-// ============================================================================
-
-describe('Mode management', () => {
-  it('should default mode to auto', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    expect(result.current.mode).toBe('auto');
-  });
-
-  it('should use defaultMode when provided', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'dark' }),
-    });
-
-    expect(result.current.mode).toBe('dark');
-    expect(result.current.resolvedMode).toBe('dark');
-  });
-
-  it('should switch mode via setMode', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'light' }),
-    });
-
-    expect(result.current.resolvedMode).toBe('light');
-
-    act(() => {
-      result.current.setMode('dark');
-    });
-
-    expect(result.current.mode).toBe('dark');
-    expect(result.current.resolvedMode).toBe('dark');
-  });
-
-  it('should resolve auto mode based on system preference', () => {
-    // Mock system dark mode
-    const original = window.matchMedia;
-    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
-      matches: query === '(prefers-color-scheme: dark)',
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    }));
-
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'auto' }),
-    });
-
-    expect(result.current.resolvedMode).toBe('dark');
-
-    window.matchMedia = original;
-  });
-});
-
-// ============================================================================
-// CSS variable injection
-// ============================================================================
-
-describe('CSS variable injection', () => {
-  it('should inject CSS variables into documentElement', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    const root = document.documentElement;
-    expect(root.style.getPropertyValue('--primary')).toBeTruthy();
-  });
-
-  it('should inject mode class on documentElement', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme], defaultMode: 'dark' }),
-    });
-
-    expect(document.documentElement.classList.contains('dark')).toBe(true);
-  });
-
-  it('should inject into custom target element', () => {
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme], target }),
-    });
-
-    expect(target.style.getPropertyValue('--primary')).toBeTruthy();
-
-    document.body.removeChild(target);
-  });
-
-  it('should clean up CSS variables on unmount', () => {
-    const { unmount } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    const root = document.documentElement;
-    expect(root.style.getPropertyValue('--primary')).toBeTruthy();
-
-    unmount();
-
-    expect(root.style.getPropertyValue('--primary')).toBe('');
-  });
-
-  it('should include typography and radius variables', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    const root = document.documentElement;
-    expect(root.style.getPropertyValue('--font-sans')).toBe('Inter, sans-serif');
-    expect(root.style.getPropertyValue('--radius')).toBe('0.25rem');
-    expect(root.style.getPropertyValue('--radius-lg')).toBe('0.5rem');
-  });
-});
-
-// ============================================================================
-// Theme inheritance
-// ============================================================================
-
-describe('Theme inheritance', () => {
-  it('should resolve theme.extends', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme, childTheme],
-        defaultTheme: 'corporate',
-      }),
-    });
-
-    // Child overrides primary
-    expect(result.current.theme?.colors.primary).toBe('#1E40AF');
-    // Inherits from parent
-    expect(result.current.theme?.colors.secondary).toBe('#64748B');
-    expect(result.current.theme?.colors.background).toBe('#FFFFFF');
-    expect(result.current.theme?.typography?.fontFamily?.base).toBe('Inter, sans-serif');
-  });
-});
-
-// ============================================================================
-// Persistence
-// ============================================================================
-
-describe('Persistence', () => {
-  it('should persist theme name to localStorage', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme, darkTheme],
-        defaultTheme: 'light',
-        persist: true,
-      }),
-    });
-
-    expect(localStorage.getItem('objectui-theme-name')).toBe('light');
-  });
-
-  it('should persist mode to localStorage', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme],
-        defaultMode: 'dark',
-        persist: true,
-      }),
-    });
-
-    expect(localStorage.getItem('objectui-theme-mode')).toBe('dark');
-  });
-
-  it('should restore theme from localStorage', () => {
-    localStorage.setItem('objectui-theme-name', 'dark');
-    localStorage.setItem('objectui-theme-mode', 'dark');
-
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme, darkTheme],
-        defaultTheme: 'light',
-        defaultMode: 'light',
-        persist: true,
-      }),
-    });
-
-    expect(result.current.activeTheme).toBe('dark');
-    expect(result.current.mode).toBe('dark');
-  });
-
-  it('should use custom storageKey', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme],
-        persist: true,
-        storageKey: 'myapp-theme',
-      }),
-    });
-
-    expect(localStorage.getItem('myapp-theme-name')).toBe('light');
-    expect(localStorage.getItem('myapp-theme-mode')).toBeTruthy();
-  });
-
-  it('should not persist when persist=false', () => {
-    renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme],
-        persist: false,
-      }),
-    });
-
-    expect(localStorage.getItem('objectui-theme-name')).toBeNull();
-  });
-
-  it('should update persistence when theme changes', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({
-        themes: [lightTheme, darkTheme],
-        defaultTheme: 'light',
-        persist: true,
-      }),
-    });
-
-    act(() => {
-      result.current.setTheme('dark');
-    });
-
-    expect(localStorage.getItem('objectui-theme-name')).toBe('dark');
-  });
-});
-
-// ============================================================================
-// Generated CSS vars object
-// ============================================================================
-
-describe('cssVars output', () => {
-  it('should expose cssVars in the context', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme] }),
-    });
-
-    expect(result.current.cssVars).toBeDefined();
-    expect(result.current.cssVars['--primary']).toBeTruthy();
-    expect(result.current.cssVars['--foreground']).toBeTruthy();
-    expect(result.current.cssVars['--font-sans']).toBe('Inter, sans-serif');
-  });
-
-  it('should provide themes list', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: createWrapper({ themes: [lightTheme, darkTheme] }),
-    });
-
-    expect(result.current.themes).toHaveLength(2);
-    expect(result.current.themes[0].name).toBe('light');
-    expect(result.current.themes[1].name).toBe('dark');
-  });
-});