@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/PublicLayout/PublicErrorBoundary.tsx

@@ -1,282 +0,0 @@
-/**
- * @file Public Error Boundary Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * An error boundary component specifically designed for public pages.
- * Provides graceful error handling and recovery for public content.
- *
- * Features:
- * - Graceful error handling
- * - User-friendly error messages
- * - Recovery mechanisms
- * - Accessibility compliant
- * - TypeScript support
- *
- * @example
- * ```tsx
- * import { PublicErrorBoundary } from '@jmruthers/pace-core';
- *
- * function PublicEventPage() {
- *   return (
- *     <PublicErrorBoundary>
- *       <PublicPageContent />
- *     </PublicErrorBoundary>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Screen reader friendly error messages
- * - Keyboard accessible recovery actions
- * - High contrast support
- *
- * @dependencies
- * - React 18+ - Component framework
- * - Error boundary patterns
- * - Tailwind CSS - Styling
- */
-
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { cn } from '../../utils/core/cn';
-
-export interface PublicErrorBoundaryProps {
-  /** Child components to wrap */
-  children: ReactNode;
-  /** Custom error fallback component */
-  fallback?: React.ComponentType<PublicErrorBoundaryState>;
-  /** Custom CSS classes for error display */
-  className?: string;
-  /** Whether to show error details in development */
-  showErrorDetails?: boolean;
-  /** Custom error message */
-  customErrorMessage?: string;
-  /** Custom recovery action */
-  onRecover?: () => void;
-}
-
-export interface PublicErrorBoundaryState {
-  /** Whether an error has occurred */
-  hasError: boolean;
-  /** The error that occurred */
-  error: Error | null;
-  /** Error information */
-  errorInfo: ErrorInfo | null;
-  /** Function to reset the error state */
-  resetError: () => void;
-}
-
-/**
- * Error boundary component for public pages
- * 
- * This component catches JavaScript errors anywhere in the child component tree,
- * logs those errors, and displays a fallback UI instead of the component tree that crashed.
- * 
- * @param props - Error boundary configuration
- * @returns React element with error boundary wrapper
- */
-export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, PublicErrorBoundaryState> {
-  constructor(props: PublicErrorBoundaryProps) {
-    super(props);
-    this.state = {
-      hasError: false,
-      error: null,
-      errorInfo: null,
-      resetError: this.resetError.bind(this)
-    };
-  }
-
-  static getDerivedStateFromError(error: Error): Partial<PublicErrorBoundaryState> {
-    // Update state so the next render will show the fallback UI
-    return {
-      hasError: true,
-      error
-    };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log the error to console in development
-    if (import.meta.env.MODE === 'development') {
-      console.error('PublicErrorBoundary caught an error:', error, errorInfo);
-    }
-
-    // Update state with error info
-    this.setState({
-      error,
-      errorInfo
-    });
-
-    // You can also log the error to an error reporting service here
-    // Example: logErrorToService(error, errorInfo);
-  }
-
-  resetError = () => {
-    this.setState({
-      hasError: false,
-      error: null,
-      errorInfo: null
-    });
-  };
-
-  render() {
-    if (this.state.hasError) {
-      // Custom fallback component
-      if (this.props.fallback) {
-        return <this.props.fallback {...this.state} />;
-      }
-
-      // Default error UI
-      return (
-        <div className={cn(
-          "min-h-screen bg-background flex items-center justify-center",
-          this.props.className
-        )}>
-          <div className="max-w-md mx-auto text-center px-4">
-            <div className="mb-6">
-              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
-                <svg
-                  className="h-6 w-6 text-acc-600"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                  />
-                </svg>
-              </div>
-              <h1 className="text-2xl font-bold text-sec-900 mb-2">
-                Something went wrong
-              </h1>
-              <p className="text-sec-600 mb-6">
-                {this.props.customErrorMessage || 
-                  'We encountered an error while loading this page. Please try again.'}
-              </p>
-            </div>
-
-            {/* Error details in development */}
-            {this.props.showErrorDetails && this.state.error && (
-              <div className="mb-6 p-4 bg-acc-50 border border-acc-200 rounded-md text-left">
-                <h3 className="text-sm font-medium text-acc-800 mb-2">
-                  Error Details (Development Only)
-                </h3>
-                <pre className="text-xs text-acc-700 whitespace-pre-wrap">
-                  {this.state.error.toString()}
-                  {this.state.errorInfo?.componentStack}
-                </pre>
-              </div>
-            )}
-
-            {/* Recovery actions */}
-            <div className="space-y-3">
-              <button
-                onClick={this.resetError}
-                className="w-full px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
-              >
-                Try Again
-              </button>
-              
-              <button
-                onClick={() => window.location.reload()}
-                className="w-full px-4 py-2 bg-sec-600 text-main-50 rounded-md hover:bg-sec-700 transition-colors focus:outline-none focus:ring-2 focus:ring-sec-500 focus:ring-offset-2"
-              >
-                Reload Page
-              </button>
-
-              {this.props.onRecover && (
-                <button
-                  onClick={this.props.onRecover}
-                  className="w-full px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
-                >
-                  Alternative Action
-                </button>
-              )}
-            </div>
-
-            {/* Help text */}
-            <div className="mt-6 text-sm text-sec-500">
-              <p>
-                If this problem persists, please contact support or try accessing the page later.
-              </p>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-/**
- * Hook for accessing error boundary state
- * Useful for components that need to know if they're inside an error boundary
- */
-export function useErrorBoundary() {
-  const [error, setError] = React.useState<Error | null>(null);
-
-  const resetError = React.useCallback(() => {
-    setError(null);
-  }, []);
-
-  const captureError = React.useCallback((error: Error) => {
-    setError(error);
-  }, []);
-
-  // Throw error synchronously during render so error boundary can catch it
-  if (error) {
-    throw error;
-  }
-
-  return { captureError, resetError };
-}
-
-/**
- * Default error fallback component
- */
-export function DefaultPublicErrorFallback({ 
-  error, 
-  resetError 
-}: PublicErrorBoundaryState) {
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center">
-      <div className="max-w-md mx-auto text-center px-4">
-        <div className="mb-6">
-          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
-            <svg
-              className="h-6 w-6 text-acc-600"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-              />
-            </svg>
-          </div>
-          <h1 className="text-2xl font-bold text-sec-900 mb-2">
-            Page Error
-          </h1>
-          <p className="text-sec-600 mb-6">
-            We encountered an error while loading this page.
-          </p>
-        </div>
-
-        <button
-          onClick={resetError}
-          className="w-full px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
-        >
-          Try Again
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/PublicLayout/PublicLoadingSpinner.tsx

@@ -1,216 +0,0 @@
-/**
- * @file Public Loading Spinner Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A loading spinner component specifically designed for public pages.
- * Provides consistent loading states with event-specific branding.
- *
- * Features:
- * - Consistent loading design
- * - Event-specific branding
- * - Multiple size options
- * - Accessibility compliant
- * - TypeScript support
- *
- * @example
- * ```tsx
- * import { PublicLoadingSpinner } from '@jmruthers/pace-core';
- *
- * function PublicEventPage() {
- *   if (isLoading) {
- *     return <PublicLoadingSpinner message="Loading event details..." />;
- *   }
- * }
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Screen reader friendly
- * - Proper ARIA labels
- * - High contrast support
- *
- * @dependencies
- * - React 18+ - Component framework
- * - Tailwind CSS - Styling
- */
-
-import React from 'react';
-import { cn } from '../../utils/core/cn';
-
-export interface PublicLoadingSpinnerProps {
-  /** Loading message to display */
-  message?: string;
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  /** Custom CSS classes */
-  className?: string;
-  /** Whether to show the app logo */
-  showLogo?: boolean;
-  /** Custom loading message */
-  customMessage?: string;
-  /** Whether to center the spinner */
-  centered?: boolean;
-}
-
-/**
- * Size classes for different spinner sizes
- */
-const sizeClasses = {
-  sm: 'h-4 w-4',
-  md: 'h-8 w-8',
-  lg: 'h-12 w-12',
-  xl: 'h-16 w-16'
-};
-
-/**
- * Loading spinner component for public pages
- * 
- * This component displays a consistent loading state with optional
- * branding and messaging for public pages.
- * 
- * @param props - Spinner configuration and styling
- * @returns React element with loading spinner
- */
-export function PublicLoadingSpinner({
-  message = 'Loading...',
-  size = 'md',
-  className = '',
-  showLogo = true,
-  customMessage,
-  centered = true
-}: PublicLoadingSpinnerProps) {
-  const sizeClass = sizeClasses[size];
-  const displayMessage = customMessage || message;
-
-  const content = (
-    <div className={cn("flex flex-col items-center", className)}>
-      {/* App Logo */}
-      {showLogo && (
-        <div className="mb-4">
-          <img
-            className="h-8 w-auto"
-            src="/pace_logo_wide.svg"
-            alt="PACE Core"
-          />
-        </div>
-      )}
-
-      {/* Spinner */}
-      <div className="relative">
-        <div
-          className={cn(
-            sizeClass,
-            "border-2 border-sec-200 border-t-main-600 rounded-full animate-spin"
-          )}
-          role="status"
-          aria-label="Loading"
-        />
-        <span className="sr-only">{displayMessage}</span>
-      </div>
-
-      {/* Loading Message */}
-      {displayMessage && (
-        <p className="mt-4 text-sm text-sec-600 text-center">
-          {displayMessage}
-        </p>
-      )}
-    </div>
-  );
-
-  if (centered) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="max-w-md mx-auto px-4">
-          {content}
-        </div>
-      </div>
-    );
-  }
-
-  return content;
-}
-
-
-/**
- * Full page loading spinner with event branding
- */
-export function PublicLoadingSpinnerFullPage({
-  message = 'Loading event details...',
-  eventName,
-  className = ''
-}: Pick<PublicLoadingSpinnerProps, 'message' | 'className'> & {
-  eventName?: string;
-}) {
-  return (
-    <div className={cn(
-      "min-h-screen bg-background flex items-center justify-center",
-      className
-    )}>
-      <div className="max-w-md mx-auto text-center px-4">
-        {/* App Logo */}
-        <div className="mb-8">
-          <img
-            className="h-12 w-auto mx-auto"
-            src="/pace_logo_wide.svg"
-            alt="PACE Core"
-          />
-        </div>
-
-        {/* Event Name */}
-        {eventName && (
-          <h1 className="text-2xl font-bold text-sec-900 mb-4">
-            {eventName}
-          </h1>
-        )}
-
-        {/* Spinner */}
-        <div className="relative mb-6">
-          <div
-            className="h-12 w-12 border-4 border-sec-200 border-t-main-600 rounded-full animate-spin mx-auto"
-            role="status"
-            aria-label="Loading"
-          />
-        </div>
-
-        {/* Loading Message */}
-        <p className="text-lg text-sec-600">
-          {message}
-        </p>
-
-        {/* Loading Dots Animation */}
-        <div className="mt-4 flex justify-center space-x-1">
-          <div className="h-2 w-2 bg-main-600 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-          <div className="h-2 w-2 bg-main-600 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-          <div className="h-2 w-2 bg-main-600 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Skeleton loading component for content placeholders
- */
-export function PublicLoadingSkeleton({
-  lines = 3,
-  className = ''
-}: {
-  lines?: number;
-  className?: string;
-}) {
-  return (
-    <div className={cn("animate-pulse", className)}>
-      {Array.from({ length: lines }).map((_, index) => (
-        <div
-          key={index}
-          className={cn(
-            "h-4 bg-sec-200 rounded mb-2",
-            index === lines - 1 ? 'w-3/4' : 'w-full'
-          )}
-        />
-      ))}
-    </div>
-  );
-}

package/src/components/PublicLayout/PublicPageContextChecker.tsx

@@ -1,131 +0,0 @@
-/**
- * @file Public Page Context Checker
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A simple component that immediately identifies if a public page
- * is being rendered inside authentication context.
- */
-
-import React, { useEffect } from 'react';
-import { usePublicPageContext } from './PublicPageProvider';
-import { logger } from '../../utils/core/logger';
-
-export interface PublicPageContextCheckerProps {
-  /** Whether to enable checking */
-  enabled?: boolean;
-  /** Custom label for this checker instance */
-  label?: string;
-}
-
-/**
- * Context checker component that immediately identifies authentication context issues
- * 
- * This component will immediately log to console if authentication context
- * is being triggered in a public page.
- * 
- * Only enabled in development mode when VITE_ENABLE_DEBUG_LOGS is 'true'
- */
-export function PublicPageContextChecker({ enabled = true, label = 'PublicPage' }: PublicPageContextCheckerProps) {
-  // Check if debug logging is enabled
-  // Allow in development mode with VITE_ENABLE_DEBUG_LOGS, or in test mode
-  // Also check for VITEST environment variable which is set by Vitest
-  const isDebugEnabled = 
-    (import.meta.env.MODE === 'development' && import.meta.env.VITE_ENABLE_DEBUG_LOGS === 'true') ||
-    import.meta.env.MODE === 'test' ||
-    import.meta.env.VITEST === true ||
-    (typeof process !== 'undefined' && process.env.NODE_ENV === 'test');
-
-  // Early return if not in debug mode
-  if (!isDebugEnabled || !enabled) {
-    return null;
-  }
-
-  useEffect(() => {
-
-    logger.debug('PublicPageContextChecker', `🚨 [${label}] PUBLIC PAGE CONTEXT CHECK`);
-    
-    // Check for authentication context
-    try {
-      // This will throw if we're not in UnifiedAuthProvider
-      const { isAuthenticated } = require('../../providers/UnifiedAuthProvider').useUnifiedAuth();
-      logger.error('PublicPageContextChecker', `❌ [${label}] AUTHENTICATION CONTEXT DETECTED!`);
-      logger.error('PublicPageContextChecker', `❌ [${label}] isAuthenticated:`, isAuthenticated);
-      logger.error('PublicPageContextChecker', `❌ [${label}] This public page is inside UnifiedAuthProvider - THIS IS WRONG!`);
-      logger.error('PublicPageContextChecker', `❌ [${label}] SOLUTION: Move public routes outside of authentication providers`);
-    } catch (error) {
-      logger.debug('PublicPageContextChecker', `✅ [${label}] No authentication context detected (GOOD!)`);
-    }
-
-    // Check for organisation context
-    try {
-      // This will throw if we're not in OrganisationProvider
-      const { selectedOrganisation } = require('../../providers/OrganisationProvider').useOrganisations();
-      logger.error('PublicPageContextChecker', `❌ [${label}] ORGANISATION CONTEXT DETECTED!`);
-      logger.error('PublicPageContextChecker', `❌ [${label}] selectedOrganisation:`, selectedOrganisation);
-      logger.error('PublicPageContextChecker', `❌ [${label}] This public page is inside OrganisationProvider - THIS IS WRONG!`);
-      logger.error('PublicPageContextChecker', `❌ [${label}] SOLUTION: Move public routes outside of authentication providers`);
-    } catch (error) {
-      logger.debug('PublicPageContextChecker', `✅ [${label}] No organisation context detected (GOOD!)`);
-    }
-
-    // Check for event context
-    try {
-      // This will throw if we're not in EventProvider
-      const { events } = require('../../providers/EventProvider').useEvents();
-      logger.error('PublicPageContextChecker', `❌ [${label}] EVENT CONTEXT DETECTED!`);
-      logger.error('PublicPageContextChecker', `❌ [${label}] events:`, events);
-      logger.error('PublicPageContextChecker', `❌ [${label}] This public page is inside EventProvider - THIS IS WRONG!`);
-      logger.error('PublicPageContextChecker', `❌ [${label}] SOLUTION: Move public routes outside of authentication providers`);
-    } catch (error) {
-      logger.debug('PublicPageContextChecker', `✅ [${label}] No event context detected (GOOD!)`);
-    }
-
-    // Check for PublicPageProvider context
-    try {
-      const { isPublicPage } = usePublicPageContext();
-      if (isPublicPage) {
-        logger.debug('PublicPageContextChecker', `✅ [${label}] Public page context detected (GOOD!)`);
-      } else {
-        logger.warn('PublicPageContextChecker', `⚠️ [${label}] Not in PublicPageProvider context`);
-        logger.warn('PublicPageContextChecker', `⚠️ [${label}] SOLUTION: Wrap your public page in <PublicPageProvider>`);
-      }
-    } catch (error) {
-      logger.warn('PublicPageContextChecker', `⚠️ [${label}] Not in PublicPageProvider context`);
-      logger.warn('PublicPageContextChecker', `⚠️ [${label}] SOLUTION: Wrap your public page in <PublicPageProvider>`);
-    }
-
-    // Provide immediate guidance
-    logger.debug('PublicPageContextChecker', `📖 [${label}] IMMEDIATE ACTION REQUIRED`);
-    logger.debug('PublicPageContextChecker', `If you see any ❌ errors above, your public page is inside authentication context.`);
-    logger.debug('PublicPageContextChecker', `This will cause infinite loading loops and authentication errors.`);
-    logger.debug('PublicPageContextChecker', `🔧 SOLUTION: Check your main App.tsx file`);
-    logger.debug('PublicPageContextChecker', `Make sure public routes are completely separate from authentication providers`);
-    logger.debug('PublicPageContextChecker', `Follow the architecture in: packages/core/docs/public-pages-guide.md`);
-
-  }, [enabled, label]);
-
-  return (
-    <div style={{ 
-      position: 'fixed', 
-      top: 0, 
-      left: 0, 
-      background: 'rgba(220, 38, 38, 0.95)', 
-      color: 'white', 
-      padding: '12px', 
-      fontSize: '12px',
-      zIndex: 9999,
-      fontFamily: 'monospace',
-      maxWidth: '400px',
-      borderRadius: '0 0 8px 0',
-      border: '2px solid #dc2626'
-    }}>
-      <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>🚨 PUBLIC PAGE CONTEXT CHECK</div>
-      <div>Check console for authentication context analysis</div>
-      <div style={{ marginTop: '8px', fontSize: '10px', opacity: 0.9 }}>
-        If you see ❌ errors in console, your public page is inside auth context!
-      </div>
-    </div>
-  );
-}