@jmruthers/pace-core 0.5.181 → 0.5.182

package/src/components/PublicLayout/__tests__/PublicPageProvider.test.tsx

@@ -1,313 +0,0 @@
-/**
- * @file PublicPageProvider Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- *
- * Comprehensive tests for the PublicPageProvider component
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { PublicPageProvider, usePublicPageContext, useIsPublicPage } from '../PublicPageProvider';
-
-// Mock the Supabase client
-vi.mock('@supabase/supabase-js', () => ({
-  createClient: vi.fn(() => ({
-    from: vi.fn(),
-    rpc: vi.fn(),
-  }))
-}));
-
-// Mock PublicErrorBoundary
-vi.mock('../PublicErrorBoundary', () => ({
-  PublicErrorBoundary: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
-}));
-
-describe('PublicPageProvider', () => {
-  const originalEnv = (import.meta as any).env;
-
-  beforeEach(() => {
-    // Reset environment to empty
-    (import.meta as any).env = {};
-  });
-
-  afterEach(() => {
-    // Restore original environment
-    (import.meta as any).env = originalEnv;
-  });
-
-  describe('Rendering', () => {
-    it('renders children without crashing', () => {
-      render(
-        <PublicPageProvider>
-          <div>Test Content</div>
-        </PublicPageProvider>
-      );
-      
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
-    });
-
-    it('wraps children with error boundary', () => {
-      const { container } = render(
-        <PublicPageProvider>
-          <div>Test Content</div>
-        </PublicPageProvider>
-      );
-      
-      // Error boundary wrapper should be present
-      expect(container.querySelector('div')).toBeTruthy();
-    });
-  });
-
-  describe('Environment Variable Handling', () => {
-    it('provides environment variables in context', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return (
-          <div>
-            <div data-testid="is-public-page">{context.isPublicPage.toString()}</div>
-            <div data-testid="has-supabase">{context.supabase ? 'yes' : 'no'}</div>
-            <div data-testid="env-url">{context.environment.supabaseUrl || 'null'}</div>
-            <div data-testid="env-key">{context.environment.supabaseKey ? 'present' : 'null'}</div>
-          </div>
-        );
-      };
-
-      const { getByTestId } = render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      // Verify context is provided (values depend on actual env vars)
-      expect(getByTestId('is-public-page')).toHaveTextContent('true');
-      // Supabase may or may not be created depending on env vars
-      expect(getByTestId('has-supabase')).toBeInTheDocument();
-      expect(getByTestId('env-url')).toBeInTheDocument();
-      expect(getByTestId('env-key')).toBeInTheDocument();
-    });
-
-    it('handles missing environment variables gracefully', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return <div data-testid="supabase">{context.supabase === null ? 'no-client' : 'has-client'}</div>;
-      };
-
-      const { getByTestId } = render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      // Should handle gracefully whether or not env vars are present
-      expect(getByTestId('supabase')).toBeInTheDocument();
-    });
-  });
-
-  describe('Supabase Client Creation', () => {
-    it('attempts to create Supabase client', () => {
-      const { createClient } = require('@supabase/supabase-js');
-
-      render(
-        <PublicPageProvider>
-          <div>Test</div>
-        </PublicPageProvider>
-      );
-
-      // createClient may or may not be called depending on actual env vars
-      // Just verify the component doesn't crash
-      expect(true).toBe(true);
-    });
-  });
-
-  describe('Context API', () => {
-    it('provides context with isPublicPage flag', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return <div>{context.isPublicPage ? 'true' : 'false'}</div>;
-      };
-
-      render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('true')).toBeInTheDocument();
-    });
-
-    it('provides environment object in context', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return (
-          <div>
-            <div data-testid="url">{context.environment.supabaseUrl || 'null'}</div>
-            <div data-testid="key">{context.environment.supabaseKey ? 'present' : 'null'}</div>
-          </div>
-        );
-      };
-
-      const { getByTestId } = render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      // Verify the environment object is accessible (values depend on actual env vars)
-      expect(getByTestId('url')).toBeInTheDocument();
-      expect(getByTestId('key')).toBeInTheDocument();
-    });
-
-    it('provides context with Supabase client status', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return <div data-testid="supabase-status">{context.supabase === null ? 'no client' : 'has client'}</div>;
-      };
-
-      const { getByTestId } = render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      // Status depends on actual env vars, just verify it's rendered
-      expect(getByTestId('supabase-status')).toBeInTheDocument();
-    });
-  });
-
-  describe('usePublicPageContext Hook', () => {
-    it('throws error when used outside provider', () => {
-      // Suppress console.error for this test
-      const consoleError = console.error;
-      console.error = vi.fn();
-
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return <div>{context.isPublicPage ? 'true' : 'false'}</div>;
-      };
-
-      expect(() => render(<TestComponent />)).toThrow('usePublicPageContext must be used within a PublicPageProvider');
-
-      console.error = consoleError;
-    });
-
-    it('returns context when used inside provider', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return <div>Context available</div>;
-      };
-
-      render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Context available')).toBeInTheDocument();
-    });
-  });
-
-  describe('useIsPublicPage Hook', () => {
-    it('returns false when used outside provider', () => {
-      const TestComponent = () => {
-        const isPublic = useIsPublicPage();
-        return <div>{isPublic ? 'true' : 'false'}</div>;
-      };
-
-      render(<TestComponent />);
-      expect(screen.getByText('false')).toBeInTheDocument();
-    });
-
-    it('returns true when used inside provider', () => {
-      const TestComponent = () => {
-        const isPublic = useIsPublicPage();
-        return <div>{isPublic ? 'true' : 'false'}</div>;
-      };
-
-      render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('true')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Boundary Integration', () => {
-    it('wraps children with PublicErrorBoundary', () => {
-      const { container } = render(
-        <PublicPageProvider>
-          <div>Test Content</div>
-        </PublicPageProvider>
-      );
-
-      // PublicErrorBoundary creates a div wrapper
-      expect(container.querySelector('div div')).toBeTruthy();
-    });
-
-    it('renders even with error-prone children', () => {
-      const ConsoleError = () => {
-        console.error('This is expected in the test');
-        return <div>Error content</div>;
-      };
-
-      render(
-        <PublicPageProvider>
-          <ConsoleError />
-        </PublicPageProvider>
-      );
-
-      // Component should still render successfully
-      expect(screen.getByText('Error content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Memoization', () => {
-    it('memoizes Supabase client creation', () => {
-      const TestComponent = () => {
-        const context = usePublicPageContext();
-        return <div>Client status: {context.supabase ? 'present' : 'absent'}</div>;
-      };
-
-      const { container, rerender } = render(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      const firstRender = container.textContent;
-
-      // Re-render with same props
-      rerender(
-        <PublicPageProvider>
-          <TestComponent />
-        </PublicPageProvider>
-      );
-
-      // Should maintain consistent state (memoized)
-      expect(container.textContent).toBe(firstRender);
-    });
-  });
-
-  describe('Console Warnings', () => {
-    it('may log warning depending on environment variables', () => {
-      const consoleWarn = console.warn;
-      console.warn = vi.fn();
-
-      render(
-        <PublicPageProvider>
-          <div>Test</div>
-        </PublicPageProvider>
-      );
-
-      // Warning may or may not be called depending on actual env vars
-      // Just verify the component renders without crashing
-      expect(true).toBe(true);
-
-      console.warn = consoleWarn;
-    });
-  });
-});
-

package/src/components/Select/hooks.ts

@@ -1,289 +0,0 @@
-/**
- * @file Select Hooks - Custom hooks for Select component state management
- * @package @jmruthers/pace-core
- * @module Components/Select/Hooks
- * @since 0.4.0
- *
- * Custom hooks for Select component following SOLID principles:
- * - Single Responsibility: Each hook handles one concern
- * - Open/Closed: Easy to extend without modification
- * - Dependency Inversion: Abstractions over concrete implementations
- */
-
-import * as React from "react";
-
-// ============================================================================
-// TYPES AND INTERFACES
-// ============================================================================
-
-export interface SelectState {
-  value: string;
-  selectedText: string;
-  open: boolean;
-  disabled: boolean;
-}
-
-export interface SelectActions {
-  setValue: (value: string, text: string) => void;
-  setOpen: (open: boolean) => void;
-  setSelectedText: (text: string) => void;
-}
-
-export interface SelectEventHandlers {
-  onValueChange?: (value: string) => void;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export interface UseSelectStateProps {
-  value?: string;
-  defaultValue?: string;
-  selectedText?: string;
-  open?: boolean;
-  defaultOpen?: boolean;
-  disabled?: boolean;
-  onValueChange?: (value: string) => void;
-  onOpenChange?: (open: boolean) => void;
-}
-
-// ============================================================================
-// STATE MANAGEMENT HOOK
-// ============================================================================
-
-export const useSelectState = ({
-  value: controlledValue,
-  defaultValue = '',
-  selectedText: controlledSelectedText,
-  open: controlledOpen,
-  defaultOpen = false,
-  disabled = false,
-  onValueChange,
-  onOpenChange,
-}: UseSelectStateProps) => {
-  // Internal state for uncontrolled mode
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
-  const [internalSelectedText, setInternalSelectedText] = React.useState('');
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-
-  // Computed values (controlled vs uncontrolled)
-  const value = controlledValue !== undefined ? controlledValue : internalValue;
-  const selectedText = controlledSelectedText !== undefined ? controlledSelectedText : internalSelectedText;
-  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
-
-  // Actions
-  const setValue = React.useCallback((newValue: string, newText: string) => {
-    if (controlledValue === undefined) {
-      setInternalValue(newValue);
-      setInternalSelectedText(newText);
-    }
-    onValueChange?.(newValue);
-    
-    // Close dropdown after selection (for uncontrolled mode)
-    if (controlledOpen === undefined) {
-      setInternalOpen(false);
-    }
-    onOpenChange?.(false);
-  }, [controlledValue, onValueChange, controlledOpen, onOpenChange]);
-
-  const setOpen = React.useCallback((newOpen: boolean) => {
-    if (disabled) return;
-    
-    // Close all other select dropdowns when opening this one
-    if (newOpen) {
-      const allTriggers = document.querySelectorAll('[data-testid="select-trigger"]');
-      allTriggers.forEach(trigger => {
-        if (trigger.getAttribute('aria-expanded') === 'true') {
-          const selectRoot = trigger.closest('[data-testid="select-root"]');
-          if (selectRoot) {
-            const closeEvent = new CustomEvent('closeSelect');
-            selectRoot.dispatchEvent(closeEvent);
-          }
-        }
-      });
-    }
-    
-    if (controlledOpen === undefined) {
-      setInternalOpen(newOpen);
-    }
-    onOpenChange?.(newOpen);
-  }, [controlledOpen, onOpenChange, disabled]);
-
-  const setSelectedText = React.useCallback((newText: string) => {
-    if (controlledSelectedText === undefined) {
-      setInternalSelectedText(newText);
-    }
-  }, [controlledSelectedText]);
-
-  const state: SelectState = {
-    value,
-    selectedText,
-    open,
-    disabled,
-  };
-
-  const actions: SelectActions = {
-    setValue,
-    setOpen,
-    setSelectedText,
-  };
-
-  return { state, actions };
-};
-
-// ============================================================================
-// EVENT HANDLING HOOK
-// ============================================================================
-
-export interface UseSelectEventsProps {
-  state: SelectState;
-  actions: SelectActions;
-  selectRef: React.RefObject<HTMLElement>;
-}
-
-export const useSelectEvents = ({ state, actions, selectRef }: UseSelectEventsProps) => {
-  const [isSelecting, setIsSelecting] = React.useState(false);
-
-  // Listen for close events from other selects
-  React.useEffect(() => {
-    const handleCloseSelect = () => {
-      actions.setOpen(false);
-    };
-
-    const selectElement = selectRef.current as HTMLElement;
-    if (selectElement) {
-      selectElement.addEventListener('closeSelect', handleCloseSelect);
-      return () => {
-        selectElement.removeEventListener('closeSelect', handleCloseSelect);
-      };
-    }
-  }, [actions, selectRef]);
-
-  // Handle click outside to close dropdown
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const selectElement = selectRef.current;
-      const clickedElement = event.target as Element;
-      const isSelectItem = clickedElement?.closest('[data-testid="select-item"]');
-      const isSearchInput = clickedElement?.closest('[data-testid="select-search-input"]');
-      const isSelectContent = clickedElement?.closest('[data-testid="select-content"]');
-      
-      if (state.open && selectElement && !selectElement.contains(event.target as Node) && !isSelectItem && !isSearchInput && !isSelectContent && !isSelecting) {
-        actions.setOpen(false);
-      }
-    };
-
-    if (state.open) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [state.open, actions, selectRef, isSelecting]);
-
-  // Handle SelectItem mousedown events
-  React.useEffect(() => {
-    let timeoutId: NodeJS.Timeout | null = null;
-    let isMounted = true;
-    
-    const handleSelectItemMouseDown = () => {
-      if (!isMounted) return;
-      
-      setIsSelecting(true);
-      timeoutId = setTimeout(() => {
-        if (isMounted) {
-          setIsSelecting(false);
-        }
-      }, 150);
-    };
-
-    document.addEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
-    return () => {
-      isMounted = false;
-      document.removeEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, []);
-
-  return { isSelecting };
-};
-
-// ============================================================================
-// SEARCH FUNCTIONALITY HOOK
-// ============================================================================
-
-export interface UseSelectSearchProps {
-  children: React.ReactNode;
-  searchable?: boolean;
-  searchTerm?: string;
-  onSearchChange?: (term: string) => void;
-}
-
-export const useSelectSearch = ({ 
-  children, 
-  searchable = false, 
-  searchTerm: controlledSearchTerm,
-  onSearchChange 
-}: UseSelectSearchProps) => {
-  const [internalSearchTerm, setInternalSearchTerm] = React.useState('');
-  const [filteredChildren, setFilteredChildren] = React.useState<React.ReactNode>(children);
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const searchTerm = controlledSearchTerm !== undefined ? controlledSearchTerm : internalSearchTerm;
-
-  const setSearchTerm = React.useCallback((term: string) => {
-    if (controlledSearchTerm === undefined) {
-      setInternalSearchTerm(term);
-    }
-    onSearchChange?.(term);
-  }, [controlledSearchTerm, onSearchChange]);
-
-  // Filter children based on search term
-  React.useEffect(() => {
-    if (!searchable || !searchTerm) {
-      setFilteredChildren(children);
-      return;
-    }
-
-    const filterChildren = (nodes: React.ReactNode): React.ReactNode => {
-      return React.Children.map(nodes, (child) => {
-        if (!React.isValidElement(child)) return child;
-
-        // Check if this is a SelectItem by looking for the data-testid or value prop
-        const isSelectItem = child.props && 
-          (child.props['data-testid'] === 'select-item' || 
-           child.props.value !== undefined);
-
-        if (isSelectItem) {
-          const childText = React.Children.toArray(child.props.children).join(' ').toLowerCase();
-          const searchLower = searchTerm.toLowerCase();
-          
-          if (childText.includes(searchLower)) {
-            return child;
-          }
-          return null;
-        }
-
-        if (child.props.children) {
-          const filteredChildChildren = filterChildren(child.props.children);
-          if (React.Children.count(filteredChildChildren) > 0) {
-            return React.cloneElement(child, {}, filteredChildChildren);
-          }
-          return null;
-        }
-
-        return child;
-      });
-    };
-
-    const filtered = filterChildren(children);
-    setFilteredChildren(filtered);
-  }, [children, searchTerm, searchable]);
-
-  return {
-    searchTerm,
-    setSearchTerm,
-    filteredChildren,
-    searchInputRef,
-  };
-};