@jmruthers/pace-core 0.5.135 → 0.5.136

package/src/components/PasswordReset/PasswordResetForm.tsx

@@ -1,201 +0,0 @@
-/**
- * @file Password Reset Form Component
- * @package @jmruthers/pace-core
- * @module Components/PasswordReset
- * @since 0.1.0
- *
- * A comprehensive password reset form component that handles email-based password recovery
- * with proper validation, loading states, and success feedback.
- *
- * Features:
- * - Email validation and submission
- * - Loading states with disabled form
- * - Success state with confirmation message
- * - Error handling and display
- * - Resend functionality
- * - Accessibility compliant
- * - Responsive design
- * - Integration with UnifiedAuthProvider
- * - Form validation
- * - Success and error callbacks
- *
- * @example
- * ```tsx
- * // Basic password reset form
- * <PasswordResetForm
- *   onSuccess={() => {
- *     toast.success('Password reset email sent!');
- *   }}
- *   onError={(error) => {
- *     toast.error(`Failed to send reset email: ${error.message}`);
- *   }}
- * />
- * 
- * // Password reset form with custom styling
- * <PasswordResetForm
- *   className="max-w-md mx-auto p-6 bg-main-50 rounded-lg shadow-md"
- *   onSuccess={() => {
- *     console.log('Reset email sent successfully');
- *     navigate('/check-email');
- *   }}
- *   onError={(error) => {
- *     console.error('Password reset failed:', error);
- *   }}
- * />
- * 
- * // Password reset form in a modal
- * <Modal isOpen={showResetForm} onClose={() => setShowResetForm(false)}>
- *   <ModalContent>
- *     <PasswordResetForm
- *       onSuccess={() => {
- *         setShowResetForm(false);
- *         toast.success('Check your email for reset instructions');
- *       }}
- *       onError={(error) => {
- *         toast.error(error.message);
- *       }}
- *     />
- *   </ModalContent>
- * </Modal>
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper form labels and associations
- * - Screen reader friendly error messages
- * - Keyboard navigation support
- * - Focus management
- * - High contrast support
- * - Clear error identification
- * - Role="alert" for error announcements
- *
- * @dependencies
- * - React 18+ - Hooks and state
- * - UnifiedAuthProvider - Authentication context
- * - Button component
- * - Input component
- * - Label component
- * - Tailwind CSS - Styling
- */
-
-import React, { useState } from 'react';
-import { Button } from '../Button/Button';
-import { Input } from '../Input/Input';
-import { Label } from '../Label';
-import { cn } from '../../utils/cn';
-import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
-
-export interface PasswordResetFormProps {
-  onSuccess?: () => void;
-  onError?: (error: Error) => void;
-  className?: string;
-}
-
-export function PasswordResetForm({
-  onSuccess,
-  onError,
-  className
-}: PasswordResetFormProps) {
-  const { resetPassword } = useUnifiedAuth();
-  const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!email.trim()) {
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const { error: resetError } = await resetPassword(email);
-      
-      if (resetError) {
-        const errorObj = new Error(resetError.message || 'Failed to send reset email');
-        setError(errorObj.message);
-        onError?.(errorObj);
-      } else {
-        setIsSuccess(true);
-        onSuccess?.();
-      }
-    } catch (err) {
-      const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
-      setError(errorObj.message);
-      onError?.(errorObj);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSendAnother = () => {
-    setIsSuccess(false);
-    setError(null);
-  };
-
-  if (isSuccess) {
-    return (
-      <div className={cn('', className)} role="form">
-        <div className="space-y-4 text-center">
-          <h2>Check your email</h2>
-          <p className="text-sec-600">
-            We have sent a password reset link to {email}
-          </p>
-          <Button 
-            variant="outline" 
-            onClick={handleSendAnother}
-            className="w-full"
-          >
-            Send another email
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('', className)} role="form">
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h2>Reset Password</h2>
-          <p className="text-sec-600">
-            Enter your email address and we'll send you a reset link.
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="email">Email Address</Label>
-            <Input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
-              required
-              disabled={isLoading}
-            />
-          </div>
-
-          {error && (
-            <div className="text-sm text-destructive" role="alert">
-              {error}
-            </div>
-          )}
-
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={!email.trim() || isLoading}
-          >
-            {isLoading ? 'Sending...' : 'Send Reset Link'}
-          </Button>
-        </form>
-      </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;
-    const supabaseKey = (import.meta as any).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;
-      const supabaseKey = (import.meta as any).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>
-  );
-}

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

@@ -1,185 +0,0 @@
-/**
- * @file PublicPageDebugger Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- *
- * Comprehensive tests for the PublicPageDebugger component
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { PublicPageDebugger } from '../PublicPageDebugger';
-import { PublicPageProvider } from '../PublicPageProvider';
-
-describe('PublicPageDebugger', () => {
-  const consoleLogSpy = vi.spyOn(console, 'log');
-  const consoleWarnSpy = vi.spyOn(console, 'warn');
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    consoleLogSpy.mockImplementation(() => {});
-    consoleWarnSpy.mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    consoleLogSpy.mockRestore();
-    consoleWarnSpy.mockRestore();
-  });
-
-  describe('Rendering', () => {
-    it('renders debugger UI when enabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-      expect(screen.getByText('Check console for context analysis')).toBeInTheDocument();
-    });
-
-    it('does not render when disabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={false} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.queryByText('Public Page Debugger')).not.toBeInTheDocument();
-    });
-
-    it('renders with default enabled state', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-
-    it('renders with custom label', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger label="CustomLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-  });
-
-  describe('Console Logging', () => {
-    it('renders with debugging enabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-
-    it('does not render when disabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={false} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.queryByText('Public Page Debugger')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Context Detection', () => {
-    it('renders within public page context', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-  });
-
-  describe('Visual Debugger', () => {
-    it('displays fixed position debugger', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} />
-        </PublicPageProvider>
-      );
-
-      // Visual debugger should be rendered
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-
-    it('renders debugger with correct text content', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-      expect(screen.getByText('Check console for context analysis')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('renders without crashing', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-
-    it('handles multiple instances', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} label="FirstDebugger" />
-          <PublicPageDebugger enabled={true} label="SecondDebugger" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getAllByText('Public Page Debugger')).toHaveLength(2);
-    });
-
-    it('handles label changes on re-render', () => {
-      const { rerender } = render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} label="Label1" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-
-      rerender(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} label="Label2" />
-        </PublicPageProvider>
-      );
-
-      // Component should still render
-      expect(screen.getByText('Public Page Debugger')).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance', () => {
-    it('renders quickly without performance issues', () => {
-      const { container } = render(
-        <PublicPageProvider>
-          <PublicPageDebugger enabled={true} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(container).toBeInTheDocument();
-    });
-  });
-});
-