@jmruthers/pace-core 0.5.181 → 0.5.182

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 (use publishable key if anon key is disabled)');
-      } 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/PublicPageFooter.tsx

@@ -1,124 +0,0 @@
-/**
- * @file Public Page Footer Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A footer component for public pages that matches the normal PaceAppLayout footer exactly.
- * Uses the same styling and structure as the main Footer component.
- *
- * Features:
- * - Identical to normal Footer component
- * - Consistent branding with main app
- * - Responsive design
- * - Accessibility compliant
- * - TypeScript support
- *
- * @example
- * ```tsx
- * import { PublicPageFooter } from '@jmruthers/pace-core';
- *
- * function PublicEventPage() {
- *   return (
- *     <PublicPageFooter 
- *       event={event}
- *       companyName="My Company"
- *     />
- *   );
- * }
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper semantic HTML structure
- * - Screen reader friendly
- * - High contrast support
- * - Clear content hierarchy
- *
- * @dependencies
- * - React 18+ - Component framework
- * - Event types - Type definitions
- * - Tailwind CSS - Styling
- */
-
-import React from 'react';
-import { cn } from '../../utils/core/cn';
-import type { Event } from '../../types/unified';
-
-export interface PublicPageFooterProps {
-  /** The event data for this public page */
-  event: Event;
-  /** Company or organization name */
-  companyName?: string;
-  /** Current year or custom year for copyright */
-  year?: number;
-  /** Optional array of navigation links to display */
-  links?: Array<{
-    label: string;
-    href: string;
-  }>;
-  /** Optional CSS class name */
-  className?: string;
-  /** Logo image URL */
-  logo?: string;
-  /** Copyright text */
-  copyright?: string;
-  /** Footer content - children to render inside footer */
-  children?: React.ReactNode;
-}
-
-/**
- * Footer component for public pages that matches the normal Footer exactly
- * 
- * This component uses the same styling and structure as the main Footer component
- * to ensure consistency across the application.
- * 
- * @param props - Footer configuration and content
- * @returns React element with public page footer
- */
-export function PublicPageFooter({
-  event,
-  companyName = 'Solvera Solutions Pty Ltd',
-  year = new Date().getFullYear(),
-  links,
-  className = '',
-  logo,
-  copyright,
-  children
-}: PublicPageFooterProps) {
-  // Use custom copyright if provided, otherwise generate default
-  const copyrightText = copyright || `© Copyright 2022–${year} all rights reserved, ${companyName}.`;
-
-  return (
-    <footer className={cn('mt-8 py-6 flex justify-center', className)}>
-      <section className='px-4 w-[min(var(--app-width),100%)] mx-auto text-center'>
-        {logo && (
-          <img src={logo} alt="Logo" className="h-8 w-auto" />
-        )}
-
-        {children && (
-          <>
-            {children}
-          </>
-        )}
-
-        <span className="text-muted-foreground">
-          {copyrightText}
-        </span>
-
-        {links && links.length > 0 && (
-          <ul className="flex gap-4 mt-2 md:mt-0">
-            {links.map((link, index) => (
-              <li key={index}>
-                <a href={link.href} className="text-muted-foreground hover:text-foreground">
-                  {link.label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-    </footer>
-  );
-}
-

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -1,209 +0,0 @@
-/**
- * @file Public Page Header Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A header component specifically designed for public pages with event-specific branding.
- * Displays app logo, event logo, and event information in a clean, accessible layout.
- *
- * Features:
- * - Event-specific branding
- * - App and event logo display
- * - Responsive design
- * - Print-friendly styling
- * - Accessibility compliant
- * - TypeScript support
- *
- * @example
- * ```tsx
- * import { PublicPageHeader, PublicPageProvider } from '@jmruthers/pace-core';
- * 
- * const APP_NAME = 'CORE';
- * 
- * function PublicEventPage() {
- *   return (
- *     <PublicPageProvider appName={APP_NAME}>
- *       <PublicPageHeader 
- *         event={event}
- *         title="Event Details"
- *         description="Public information about this event"
- *         showEventLogo={true}
- *       />
- *     </PublicPageProvider>
- *   );
- * }
- * ```
- * 
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper semantic HTML structure
- * - Screen reader friendly
- * - High contrast support
- * - Clear content hierarchy
- *
- * @dependencies
- * - React 18+ - Component framework
- * - Event types - Type definitions
- * - FileDisplay component - Logo display
- * - Tailwind CSS - Styling
- */
-
-import React, { ReactNode } from 'react';
-import type { Event } from '../../types/unified';
-import { FileDisplay } from '../FileDisplay/FileDisplay';
-import { FileCategory } from '../../types/file-reference';
-import { useAppConfig } from '../../hooks/useAppConfig';
-import { cn } from '../../utils/core/cn';
-
-export interface PublicPageHeaderProps {
-  /** The event data for this public page */
-  event?: Event;
-  /** The event code for this public page */
-  eventCode: string;
-  /** Optional page title */
-  title?: string;
-  /** Optional page description */
-  description?: string;
-  /** Whether to show the event logo (default: true) */
-  showEventLogo?: boolean;
-  /** Whether to show the app logo (default: true) */
-  showAppLogo?: boolean;
-  /** Custom CSS classes for the header */
-  className?: string;
-  /** Custom content to display in the header */
-  children?: ReactNode;
-  /** Custom event logo component */
-  customEventLogo?: ReactNode;
-}
-
-/**
- * Header component for public pages with event-specific branding
- * 
- * This component displays the app logo, event logo, and event information
- * in a clean, accessible layout suitable for public pages.
- * 
- * The app logo is automatically generated from the appName using the pattern:
- * `/{appName.toLowerCase()}_logo_wide.svg` from the public folder.
- * 
- * **Important:** The appName is obtained from PublicPageProvider context, which should
- * receive the APP_NAME constant from your App.tsx file. This ensures consistency with
- * authenticated pages that use the same APP_NAME constant.
- * 
- * **Event Logo Requirements:**
- * - Event logo files must be marked as `is_public = true` in the `file_references` table
- * - The RPC function `data_file_reference_by_category_list` must be accessible to the anonymous/public role
- * - Storage bucket must allow public read access for logo files
- * - If no public logo is available, a fallback UI with event initials will be displayed
- * 
- * @param props - Header configuration and content
- * @returns React element with public page header
- */
-export function PublicPageHeader({
-  event,
-  eventCode,
-  title,
-  description,
-  showEventLogo = true,
-  showAppLogo = true,
-  className = '',
-  children,
-  customEventLogo
-}: PublicPageHeaderProps) {
-  const { appName } = useAppConfig();
-
-  return (
-    <header className={cn(
-
-      "w-full px-[max(0rem,calc((100vw-var(--app-width))/2-0.5rem))] grid grid-cols-[auto_1fr_auto]  place-items-center gap-2",
-      className
-    )}>
-      
-        {/* Top row with logos */}
-
-          {/* App Logo */}
-          {showAppLogo && appName && (
-            <img
-              className="ml-4 max-w-36 object-contain row-span-2"
-              src={`/${appName.toLowerCase()}_logo_wide.svg`}
-              alt={appName}
-            />
-          )}
-
-
-        {/* Event Information */}
-
-
-            {event && (
-              <>
-                <h1>
-                  {event.event_name}
-                </h1>
-          {/* Event Logo */}
-          {showEventLogo && event && (
-            <>
-              {customEventLogo || (
-                <>
-                  <FileDisplay
-                    table_name="event"
-                    record_id={event.event_id}
-                    organisation_id={event.organisation_id}
-                    category={FileCategory.EVENT_LOGOS}
-                    displayOnly={true}
-                    showFallback={true}
-                    fallbackSize="md"
-                    className="mr-4 max-w-36 row-span-2"
-                    generateFallbackText={(fileName) => {
-                      if (!event.event_name) return 'EV';
-                      return event.event_name
-                        .split(/[\s\-_]+/)
-                        .map(word => word.charAt(0).toUpperCase())
-                        .join('')
-                        .substring(0, 3);
-                    }}
-                    // Note: FileDisplay automatically detects public page context
-                    // and uses FileDisplayPublic component which queries only public files (is_public = true)
-                    // If no public logo is found, fallback UI with event initials will be displayed
-                  />
-                </>
-              )}
-            </>
-          )}
-                {event.event_venue && (
-                  <h4>
-                    {event.event_venue}
-                  </h4>
-                )}
-              </>
-            )}
-
-            {/* Page Title and Description */}
-            {title && (
-              <>
-                <h1>
-                  {title}
-                </h1>
-                {description && (
-                  <p className="text-lg text-sec-600 max-w-3xl mx-auto">
-                    {description}
-                  </p>
-                )}
-              </>
-            )}
-
-            {/* Custom Content */}
-            {children && (
-              <>
-                {children}
-              </>
-            )}
-
-
-
-
-      
-    </header>
-  );
-}
-