@jmruthers/pace-core 0.2.4

package/src/components/PublicLayout/PublicPageFooter.tsx

@@ -0,0 +1,124 @@
+/**
+ * @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/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 border-t border-border bg-main-100', 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

@@ -0,0 +1,178 @@
+/**
+ * @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, EventLogo } from '@jmruthers/pace-core';
+ *
+ * function PublicEventPage() {
+ *   return (
+ *     <PublicPageHeader 
+ *       event={event}
+ *       title="Event Details"
+ *       description="Public information about this event"
+ *       showEventLogo={true}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @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
+ * - EventLogo component - Logo display
+ * - Tailwind CSS - Styling
+ */
+
+import React, { ReactNode } from 'react';
+import type { Event } from '../../types/unified';
+import { EventLogo } from './EventLogo';
+import { useAppConfig } from '../../hooks/useAppConfig';
+
+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 app logo component */
+  customAppLogo?: 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.
+ * 
+ * @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,
+  customAppLogo,
+  customEventLogo
+}: PublicPageHeaderProps) {
+  const { appName } = useAppConfig();
+  const headerClasses = `bg-white border-b border-gray-200 ${className}`.trim();
+
+  return (
+    <header className={headerClasses}>
+      <div className="px-4 w-[min(var(--app-width),100%)] mx-auto">
+        {/* Top row with logos */}
+        <div className="flex items-center justify-between py-4">
+          {/* App Logo */}
+          {showAppLogo && (
+            <div className="flex-shrink-0">
+              {customAppLogo || (
+                <div className="flex items-center">
+                  <img
+                    className="h-8 w-auto"
+                    src={`/${appName.toLowerCase()}_logo_wide.svg`}
+                    alt={appName}
+                  />
+                  <span className="ml-2 text-lg font-semibold text-gray-900">
+                    {appName}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Event Logo */}
+          {showEventLogo && (
+            <div className="flex-shrink-0">
+              {customEventLogo || (
+                <EventLogo
+                  eventId={event.event_id}
+                  eventName={event.event_name}
+                  organisationId={event.organisation_id}
+                  size="md"
+                  className="h-12 w-12"
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Event Information */}
+        <div className="pb-4">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+              {event.event_name}
+            </h1>
+
+            {event.event_venue && (
+              <p className="text-md text-gray-500 mb-4">
+                {event.event_venue}
+              </p>
+            )}
+
+            {/* Page Title and Description */}
+            {title && (
+              <div className="mt-6">
+                <h2 className="text-2xl font-semibold text-gray-800 mb-2">
+                  {title}
+                </h2>
+                {description && (
+                  <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+                    {description}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Custom Content */}
+            {children && (
+              <div className="mt-4">
+                {children}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -0,0 +1,232 @@
+/**
+ * @file Public Page Layout Component
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A layout component specifically designed for public pages that don't require authentication.
+ * Provides a consistent structure for public event pages with event-specific branding.
+ *
+ * Features:
+ * - No authentication required
+ * - Event-specific header and branding
+ * - Responsive design
+ * - Print-friendly styling
+ * - Error boundary integration
+ * - Loading state management
+ * - TypeScript support
+ *
+ * @example
+ * ```tsx
+ * import { PublicPageLayout, PublicPageHeader } from '@jmruthers/pace-core';
+ *
+ * function PublicEventPage() {
+ *   const { eventCode } = usePublicRouteParams();
+ *   
+ *   return (
+ *     <PublicPageLayout eventCode={eventCode}>
+ *       <PublicPageHeader 
+ *         event={event}
+ *         title="Event Details"
+ *         description="Public information about this event"
+ *       />
+ *       <div className="content">
+ *         Your public page content
+ *       </div>
+ *     </PublicPageLayout>
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper semantic HTML structure
+ * - Screen reader friendly
+ * - Keyboard navigation support
+ * - High contrast support
+ * - Clear content hierarchy
+ *
+ * @routing
+ * - Works with React Router
+ * - Supports public route patterns
+ * - Event code validation
+ * - Error handling for invalid routes
+ *
+ * @dependencies
+ * - React 18+ - Component framework
+ * - React Router - Routing integration
+ * - Public hooks - Data access
+ * - Tailwind CSS - Styling
+ */
+
+import React, { ReactNode, useMemo } from 'react';
+import { PublicPageHeader } from './PublicPageHeader';
+import { PublicPageFooter } from './PublicPageFooter';
+import { PublicErrorBoundary } from './PublicErrorBoundary';
+import { PublicLoadingSpinner } from './PublicLoadingSpinner';
+import type { Event } from '../../types/unified';
+
+export interface PublicPageLayoutProps {
+  /** The event code for this public page */
+  eventCode: string;
+  /** Child components to render */
+  children: ReactNode;
+  /** Optional event data - if not provided, will be fetched by parent component */
+  event?: Event | null;
+  /** Whether to show the footer (default: true) */
+  showFooter?: boolean;
+  /** Custom CSS classes for the layout */
+  className?: string;
+  /** Custom error fallback component */
+  errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>;
+  /** Custom loading fallback component */
+  loadingFallback?: React.ComponentType;
+  /** Custom header component */
+  customHeader?: ReactNode;
+  /** Custom footer component */
+  customFooter?: ReactNode;
+  /** Whether to show event validation errors (default: true) */
+  showValidationErrors?: boolean;
+}
+
+/**
+ * Layout component for public pages that don't require authentication
+ * 
+ * This component provides a consistent structure for public event pages
+ * with event-specific branding, error handling, and loading states.
+ * 
+ * @param props - Layout configuration and content
+ * @returns React element with complete public page layout
+ */
+export function PublicPageLayout({
+  eventCode,
+  children,
+  event = null,
+  showFooter = true,
+  className = '',
+  errorFallback: ErrorFallback,
+  loadingFallback: LoadingFallback = PublicLoadingSpinner,
+  customHeader,
+  customFooter,
+  showValidationErrors = true
+}: PublicPageLayoutProps) {
+  // Don't automatically fetch event data - let the parent component handle this
+  // This prevents authentication context conflicts
+  const isLoading = false;
+  const error = null;
+  const refetch = async () => {};
+
+  // Memoize the layout classes
+  const layoutClasses = useMemo(() => {
+    const baseClasses = 'min-h-screen bg-white flex flex-col';
+    return `${baseClasses} ${className}`.trim();
+  }, [className]);
+
+  // Handle loading state
+  if (isLoading) {
+    return (
+      <div className={layoutClasses}>
+        <div className="flex-1 flex items-center justify-center">
+          <LoadingFallback />
+        </div>
+      </div>
+    );
+  }
+
+  // Handle error state
+  if (error && showValidationErrors) {
+    return (
+      <div className={layoutClasses}>
+        <div className="flex-1 flex items-center justify-center">
+          {ErrorFallback ? (
+            <ErrorFallback error={error} retry={refetch} />
+          ) : (
+            <div className="text-center p-8">
+              <h1 className="text-2xl font-bold text-gray-900 mb-4">
+                Event Not Found
+              </h1>
+              <p className="text-gray-600 mb-6">
+                The event code "{eventCode}" is invalid or the event is not available for public viewing.
+              </p>
+              <button
+                onClick={refetch}
+                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              >
+                Try Again
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Handle missing event
+  if (!event) {
+    return (
+      <div className={layoutClasses}>
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center p-8">
+            <h1 className="text-2xl font-bold text-gray-900 mb-4">
+              Event Not Available
+            </h1>
+            <p className="text-gray-600 mb-6">
+              This event is not available for public viewing.
+            </p>
+            <button
+              onClick={refetch}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <PublicErrorBoundary>
+      <div className={layoutClasses}>
+        {/* Header */}
+        {customHeader || (
+          <PublicPageHeader 
+            event={event}
+            eventCode={eventCode}
+          />
+        )}
+
+        {/* Main Content */}
+        <main className="px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
+          {children}
+        </main>
+
+        {/* Footer */}
+        {showFooter && (
+          customFooter || <PublicPageFooter event={event} />
+        )}
+      </div>
+    </PublicErrorBoundary>
+  );
+}
+
+/**
+ * Hook for accessing public page context
+ * Provides access to event data and layout state within public pages
+ * 
+ * @deprecated This hook is no longer needed as PublicPageLayout no longer
+ * automatically fetches event data. Use usePublicRouteParams and usePublicEvent
+ * directly in your components instead.
+ */
+export function usePublicPageContext() {
+  // This hook is deprecated - use usePublicRouteParams and usePublicEvent directly
+  return {
+    eventCode: null,
+    eventId: null,
+    event: null,
+    isLoading: false,
+    error: null,
+    refetch: async () => {},
+    isPublicPage: true
+  };
+}

package/src/components/PublicLayout/PublicPageProvider.tsx

@@ -0,0 +1,137 @@
+/**
+ * @file Public Page Provider
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A completely isolated provider for public pages that doesn't trigger
+ * any authentication context. This ensures public pages work independently
+ * of the main application's authentication system.
+ *
+ * Features:
+ * - No authentication required
+ * - No organisation context
+ * - No event context
+ * - Completely isolated from main app context
+ * - Environment variable access for public data
+ * - Error boundary integration
+ *
+ * @example
+ * ```tsx
+ * import { PublicPageProvider } from '@jmruthers/pace-core';
+ * 
+ * function PublicApp() {
+ *   return (
+ *     <PublicPageProvider>
+ *       <Routes>
+ *         <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipePage />} />
+ *       </Routes>
+ *     </PublicPageProvider>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from '../../types/database';
+import { PublicErrorBoundary } from './PublicErrorBoundary';
+
+interface PublicPageContextType {
+  isPublicPage: true;
+  supabase: ReturnType<typeof createClient<Database>> | null;
+  environment: {
+    supabaseUrl: string | null;
+    supabaseKey: string | null;
+  };
+}
+
+const PublicPageContext = createContext<PublicPageContextType | undefined>(undefined);
+
+export interface PublicPageProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for public pages that completely isolates them from authentication context
+ * 
+ * This provider:
+ * - Does not initialize any authentication providers
+ * - Provides environment variables for public data access
+ * - Includes error boundary for graceful error handling
+ * - Is completely separate from the main app context
+ */
+export function PublicPageProvider({ children }: PublicPageProviderProps) {
+  // Get environment variables for public data access
+  // Handle both Vite (import.meta.env) and Node.js (process.env) environments
+  const getEnvVar = (key: string): string | undefined => {
+    // Check Vite environment first (browser)
+    if (typeof import.meta !== 'undefined' && (import.meta as any).env) {
+      return (import.meta as any).env[key];
+    }
+    // Check Node.js environment (server-side)
+    if (typeof process !== 'undefined' && process.env) {
+      return process.env[key];
+    }
+    return undefined;
+  };
+
+  const supabaseUrl = getEnvVar('VITE_SUPABASE_URL') || 
+                     getEnvVar('NEXT_PUBLIC_SUPABASE_URL') || 
+                     null;
+                     
+  const supabaseKey = getEnvVar('VITE_SUPABASE_ANON_KEY') || 
+                     getEnvVar('NEXT_PUBLIC_SUPABASE_ANON_KEY') || 
+                     null;
+
+  // Create Supabase client if environment variables are available
+  const supabase = useMemo(() => {
+    if (!supabaseUrl || !supabaseKey) {
+      console.warn('[PublicPageProvider] Missing Supabase environment variables. Please ensure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in your environment.');
+      return null;
+    }
+    return createClient<Database>(supabaseUrl, supabaseKey);
+  }, [supabaseUrl, supabaseKey]);
+
+  const contextValue: PublicPageContextType = {
+    isPublicPage: true,
+    supabase,
+    environment: {
+      supabaseUrl,
+      supabaseKey
+    }
+  };
+
+  return (
+    <PublicPageContext.Provider value={contextValue}>
+      <PublicErrorBoundary>
+        {children}
+      </PublicErrorBoundary>
+    </PublicPageContext.Provider>
+  );
+}
+
+/**
+ * Hook to access public page context
+ * 
+ * @returns Public page context with environment variables
+ */
+export function usePublicPageContext(): PublicPageContextType {
+  const context = useContext(PublicPageContext);
+  
+  if (!context) {
+    throw new Error('usePublicPageContext must be used within a PublicPageProvider');
+  }
+  
+  return context;
+}
+
+/**
+ * Hook to check if we're in a public page context
+ * 
+ * @returns True if we're in a public page context
+ */
+export function useIsPublicPage(): boolean {
+  const context = useContext(PublicPageContext);
+  return context !== undefined;
+}