@object-ui/react 0.5.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__/ThemeProvider.test.tsx

@@ -0,0 +1,451 @@
+/**
+ * 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');
+  });
+});