@jmruthers/pace-core 0.2.6 → 0.4.1

package/src/components/PublicLayout/PublicLoadingSpinner.tsx

@@ -1,208 +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';
-
-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={`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={`${sizeClass} border-2 border-gray-200 border-t-blue-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-gray-600 text-center">
-          {displayMessage}
-        </p>
-      )}
-    </div>
-  );
-
-  if (centered) {
-    return (
-      <div className="min-h-screen bg-white 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={`min-h-screen bg-white 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-gray-900 mb-4">
-            {eventName}
-          </h1>
-        )}
-
-        {/* Spinner */}
-        <div className="relative mb-6">
-          <div
-            className="h-12 w-12 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin mx-auto"
-            role="status"
-            aria-label="Loading"
-          />
-        </div>
-
-        {/* Loading Message */}
-        <p className="text-lg text-gray-600">
-          {message}
-        </p>
-
-        {/* Loading Dots Animation */}
-        <div className="mt-4 flex justify-center space-x-1">
-          <div className="h-2 w-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-          <div className="h-2 w-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-          <div className="h-2 w-2 bg-blue-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={`animate-pulse ${className}`}>
-      {Array.from({ length: lines }).map((_, index) => (
-        <div
-          key={index}
-          className={`h-4 bg-gray-200 rounded mb-2 ${
-            index === lines - 1 ? 'w-3/4' : 'w-full'
-          }`}
-        />
-      ))}
-    </div>
-  );
-}

package/src/components/PublicLayout/PublicPageContextChecker.tsx

@@ -1,130 +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';
-
-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.
- */
-export function PublicPageContextChecker({ enabled = true, label = 'PublicPage' }: PublicPageContextCheckerProps) {
-  useEffect(() => {
-    if (!enabled) return;
-
-    console.group(`🚨 [${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();
-      console.error(`❌ [${label}] AUTHENTICATION CONTEXT DETECTED!`);
-      console.error(`❌ [${label}] isAuthenticated:`, isAuthenticated);
-      console.error(`❌ [${label}] This public page is inside UnifiedAuthProvider - THIS IS WRONG!`);
-      console.error(`❌ [${label}] SOLUTION: Move public routes outside of authentication providers`);
-    } catch (error) {
-      console.log(`✅ [${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();
-      console.error(`❌ [${label}] ORGANISATION CONTEXT DETECTED!`);
-      console.error(`❌ [${label}] selectedOrganisation:`, selectedOrganisation);
-      console.error(`❌ [${label}] This public page is inside OrganisationProvider - THIS IS WRONG!`);
-      console.error(`❌ [${label}] SOLUTION: Move public routes outside of authentication providers`);
-    } catch (error) {
-      console.log(`✅ [${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();
-      console.error(`❌ [${label}] EVENT CONTEXT DETECTED!`);
-      console.error(`❌ [${label}] events:`, events);
-      console.error(`❌ [${label}] This public page is inside EventProvider - THIS IS WRONG!`);
-      console.error(`❌ [${label}] SOLUTION: Move public routes outside of authentication providers`);
-    } catch (error) {
-      console.log(`✅ [${label}] No event context detected (GOOD!)`);
-    }
-
-    // Check for PublicPageProvider context
-    try {
-      const { isPublicPage } = usePublicPageContext();
-      if (isPublicPage) {
-        console.log(`✅ [${label}] Public page context detected (GOOD!)`);
-      } else {
-        console.warn(`⚠️ [${label}] Not in PublicPageProvider context`);
-        console.warn(`⚠️ [${label}] SOLUTION: Wrap your public page in <PublicPageProvider>`);
-      }
-    } catch (error) {
-      console.warn(`⚠️ [${label}] Not in PublicPageProvider context`);
-      console.warn(`⚠️ [${label}] SOLUTION: Wrap your public page in <PublicPageProvider>`);
-    }
-
-    console.groupEnd();
-
-    // Provide immediate guidance
-    console.group(`📖 [${label}] IMMEDIATE ACTION REQUIRED`);
-    console.log(`If you see any ❌ errors above, your public page is inside authentication context.`);
-    console.log(`This will cause infinite loading loops and authentication errors.`);
-    console.log(``);
-    console.log(`🔧 SOLUTION:`);
-    console.log(`1. Check your main App.tsx file`);
-    console.log(`2. Make sure public routes are completely separate from authentication providers`);
-    console.log(`3. Follow the architecture in: packages/core/docs/public-pages-guide.md`);
-    console.log(``);
-    console.log(`✅ CORRECT ARCHITECTURE:`);
-    console.log(`<BrowserRouter>`);
-    console.log(`  <Routes>`);
-    console.log(`    <Route path="/events/*" element={<PublicPageApp />} />`);
-    console.log(`    <Route path="/*" element={<AuthenticatedApp />} />`);
-    console.log(`  </Routes>`);
-    console.log(`</BrowserRouter>`);
-    console.groupEnd();
-
-  }, [enabled, label]);
-
-  if (!enabled) return null;
-
-  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>
-  );
-}

package/src/components/PublicLayout/PublicPageDebugger.tsx

@@ -1,104 +0,0 @@
-/**
- * @file Public Page Debugger
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A debugging component that helps identify why authentication context
- * is being triggered in public pages.
- */
-
-import React, { useEffect } from 'react';
-import { usePublicPageContext } from './PublicPageProvider';
-
-export interface PublicPageDebuggerProps {
-  /** Whether to enable debugging */
-  enabled?: boolean;
-  /** Custom label for this debugger instance */
-  label?: string;
-}
-
-/**
- * Debugger component that logs context information
- * 
- * This component helps identify why authentication context
- * is being triggered in public pages.
- */
-export function PublicPageDebugger({ enabled = true, label = 'PublicPage' }: PublicPageDebuggerProps) {
-  useEffect(() => {
-    if (!enabled) return;
-
-    console.log(`[${label}] Component mounted`);
-    
-    // Check if we're in a public page context
-    try {
-      // This will throw if we're not in PublicPageProvider
-      const { isPublicPage } = usePublicPageContext();
-      console.log(`[${label}] Public page context detected:`, isPublicPage);
-    } catch (error) {
-      console.warn(`[${label}] Not in PublicPageProvider context:`, error instanceof Error ? error.message : String(error));
-    }
-
-    // Check for authentication context
-    try {
-      // This will throw if we're not in UnifiedAuthProvider
-      const { isAuthenticated } = require('../../providers/UnifiedAuthProvider').useUnifiedAuth();
-      console.warn(`[${label}] AUTHENTICATION CONTEXT DETECTED! This should not happen in public pages.`);
-      console.warn(`[${label}] isAuthenticated:`, isAuthenticated);
-    } catch (error) {
-      console.log(`[${label}] No authentication context detected (good for public pages)`);
-    }
-
-    // Check for organisation context
-    try {
-      // This will throw if we're not in OrganisationProvider
-      const { selectedOrganisation } = require('../../providers/OrganisationProvider').useOrganisations();
-      console.warn(`[${label}] ORGANISATION CONTEXT DETECTED! This should not happen in public pages.`);
-      console.warn(`[${label}] selectedOrganisation:`, selectedOrganisation);
-    } catch (error) {
-      console.log(`[${label}] No organisation context detected (good for public pages)`);
-    }
-
-    // Check for event context
-    try {
-      // This will throw if we're not in EventProvider
-      const { events } = require('../../providers/EventProvider').useEvents();
-      console.warn(`[${label}] EVENT CONTEXT DETECTED! This should not happen in public pages.`);
-      console.warn(`[${label}] events:`, events);
-    } catch (error) {
-      console.log(`[${label}] No event context detected (good for public pages)`);
-    }
-
-    // Check environment variables
-    const supabaseUrl = (import.meta as any).env?.VITE_SUPABASE_URL || process.env.VITE_SUPABASE_URL;
-    const supabaseKey = (import.meta as any).env?.VITE_SUPABASE_ANON_KEY || process.env.VITE_SUPABASE_ANON_KEY;
-    
-    console.log(`[${label}] Environment variables:`, {
-      supabaseUrl: supabaseUrl ? 'Present' : 'Missing',
-      supabaseKey: supabaseKey ? 'Present' : 'Missing'
-    });
-
-    return () => {
-      console.log(`[${label}] Component unmounted`);
-    };
-  }, [enabled, label]);
-
-  if (!enabled) return null;
-
-  return (
-    <div style={{ 
-      position: 'fixed', 
-      top: 0, 
-      right: 0, 
-      background: 'rgba(0,0,0,0.8)', 
-      color: 'white', 
-      padding: '8px', 
-      fontSize: '12px',
-      zIndex: 9999,
-      fontFamily: 'monospace'
-    }}>
-      <div>Public Page Debugger</div>
-      <div>Check console for context analysis</div>
-    </div>
-  );
-}

package/src/components/PublicLayout/PublicPageDiagnostic.tsx

@@ -1,162 +0,0 @@
-/**
- * @file Public Page Diagnostic Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A diagnostic component that helps identify exactly where authentication
- * context is being triggered in public pages.
- */
-
-import React, { useEffect, useState } from 'react';
-import { usePublicPageContext } from './PublicPageProvider';
-
-export interface PublicPageDiagnosticProps {
-  /** Whether to enable diagnostics */
-  enabled?: boolean;
-  /** Custom label for this diagnostic instance */
-  label?: string;
-}
-
-/**
- * Diagnostic component that identifies authentication context issues
- * 
- * This component will help you identify exactly where the problem is
- * in your public page implementation.
- */
-export function PublicPageDiagnostic({ enabled = true, label = 'PublicPage' }: PublicPageDiagnosticProps) {
-  const [diagnostics, setDiagnostics] = useState<{
-    hasPublicPageContext: boolean;
-    hasAuthContext: boolean;
-    hasOrgContext: boolean;
-    hasEventContext: boolean;
-    hasEnvironmentVars: boolean;
-    routeParams: any;
-  }>({
-    hasPublicPageContext: false,
-    hasAuthContext: false,
-    hasOrgContext: false,
-    hasEventContext: false,
-    hasEnvironmentVars: false,
-    routeParams: null
-  });
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    const runDiagnostics = () => {
-      const newDiagnostics = {
-        hasPublicPageContext: false,
-        hasAuthContext: false,
-        hasOrgContext: false,
-        hasEventContext: false,
-        hasEnvironmentVars: false,
-        routeParams: null
-      };
-
-      // Check for PublicPageProvider context
-      try {
-        const { isPublicPage } = usePublicPageContext();
-        newDiagnostics.hasPublicPageContext = isPublicPage === true;
-      } catch (error) {
-        newDiagnostics.hasPublicPageContext = false;
-      }
-
-      // Check for authentication context
-      try {
-        const { isAuthenticated } = require('../../providers/UnifiedAuthProvider').useUnifiedAuth();
-        newDiagnostics.hasAuthContext = true;
-      } catch (error) {
-        newDiagnostics.hasAuthContext = false;
-      }
-
-      // Check for organisation context
-      try {
-        const { selectedOrganisation } = require('../../providers/OrganisationProvider').useOrganisations();
-        newDiagnostics.hasOrgContext = true;
-      } catch (error) {
-        newDiagnostics.hasOrgContext = false;
-      }
-
-      // Check for event context
-      try {
-        const { events } = require('../../providers/EventProvider').useEvents();
-        newDiagnostics.hasEventContext = true;
-      } catch (error) {
-        newDiagnostics.hasEventContext = false;
-      }
-
-      // Check environment variables
-      const supabaseUrl = (import.meta as any).env?.VITE_SUPABASE_URL || process.env.VITE_SUPABASE_URL;
-      const supabaseKey = (import.meta as any).env?.VITE_SUPABASE_ANON_KEY || process.env.VITE_SUPABASE_ANON_KEY;
-      newDiagnostics.hasEnvironmentVars = !!(supabaseUrl && supabaseKey);
-
-      // Check route parameters
-      try {
-        const { useParams } = require('react-router-dom');
-        const params = useParams();
-        newDiagnostics.routeParams = params;
-      } catch (error) {
-        newDiagnostics.routeParams = null;
-      }
-
-      setDiagnostics(newDiagnostics);
-
-      // Log results
-      console.group(`🔍 [${label}] Public Page Diagnostics`);
-      console.log('✅ Public Page Context:', newDiagnostics.hasPublicPageContext ? 'PRESENT' : 'MISSING');
-      console.log('❌ Auth Context:', newDiagnostics.hasAuthContext ? 'PRESENT (BAD!)' : 'ABSENT (GOOD!)');
-      console.log('❌ Org Context:', newDiagnostics.hasOrgContext ? 'PRESENT (BAD!)' : 'ABSENT (GOOD!)');
-      console.log('❌ Event Context:', newDiagnostics.hasEventContext ? 'PRESENT (BAD!)' : 'ABSENT (GOOD!)');
-      console.log('✅ Environment Vars:', newDiagnostics.hasEnvironmentVars ? 'PRESENT' : 'MISSING');
-      console.log('✅ Route Params:', newDiagnostics.routeParams);
-      console.groupEnd();
-
-      // Provide specific guidance
-      if (newDiagnostics.hasAuthContext || newDiagnostics.hasOrgContext || newDiagnostics.hasEventContext) {
-        console.error(`🚨 [${label}] PROBLEM DETECTED: Public page is inside authentication context!`);
-        console.error('🔧 SOLUTION: Move public routes outside of UnifiedAuthProvider, OrganisationProvider, and EventProvider');
-        console.error('📖 See: packages/core/docs/emergency-public-pages-fix.md');
-      } else if (!newDiagnostics.hasPublicPageContext) {
-        console.warn(`⚠️ [${label}] WARNING: Not in PublicPageProvider context`);
-        console.warn('🔧 SOLUTION: Wrap your public page component in <PublicPageProvider>');
-      } else if (!newDiagnostics.hasEnvironmentVars) {
-        console.warn(`⚠️ [${label}] WARNING: Missing environment variables`);
-        console.warn('🔧 SOLUTION: Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your environment');
-      } else {
-        console.log(`✅ [${label}] All diagnostics passed! Public page should work correctly.`);
-      }
-    };
-
-    runDiagnostics();
-  }, [enabled, label]);
-
-  if (!enabled) return null;
-
-  return (
-    <div style={{ 
-      position: 'fixed', 
-      top: 0, 
-      left: 0, 
-      background: 'rgba(0,0,0,0.9)', 
-      color: 'white', 
-      padding: '12px', 
-      fontSize: '11px',
-      zIndex: 9999,
-      fontFamily: 'monospace',
-      maxWidth: '300px',
-      borderRadius: '0 0 8px 0'
-    }}>
-      <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>🔍 Public Page Diagnostics</div>
-      <div>Public Context: {diagnostics.hasPublicPageContext ? '✅' : '❌'}</div>
-      <div>Auth Context: {diagnostics.hasAuthContext ? '❌ BAD' : '✅ GOOD'}</div>
-      <div>Org Context: {diagnostics.hasOrgContext ? '❌ BAD' : '✅ GOOD'}</div>
-      <div>Event Context: {diagnostics.hasEventContext ? '❌ BAD' : '✅ GOOD'}</div>
-      <div>Env Vars: {diagnostics.hasEnvironmentVars ? '✅' : '❌'}</div>
-      <div>Route Params: {diagnostics.routeParams ? '✅' : '❌'}</div>
-      <div style={{ marginTop: '8px', fontSize: '10px', opacity: 0.8 }}>
-        Check console for detailed analysis
-      </div>
-    </div>
-  );
-}