@jmruthers/pace-core 0.5.121 → 0.5.124

package/src/components/PublicLayout/PublicLoadingSpinner.tsx

@@ -37,6 +37,7 @@
  */
 
 import React from 'react';
+import { cn } from '../../utils/cn';
 
 export interface PublicLoadingSpinnerProps {
   /** Loading message to display */
@@ -84,7 +85,7 @@ export function PublicLoadingSpinner({
   const displayMessage = customMessage || message;
 
   const content = (
-    <div className={`flex flex-col items-center ${className}`}>
+    <div className={cn("flex flex-col items-center", className)}>
       {/* App Logo */}
       {showLogo && (
         <div className="mb-4">
@@ -99,7 +100,10 @@ export function PublicLoadingSpinner({
       {/* Spinner */}
       <div className="relative">
         <div
-          className={`${sizeClass} border-2 border-gray-200 border-t-blue-600 rounded-full animate-spin`}
+          className={cn(
+            sizeClass,
+            "border-2 border-sec-200 border-t-main-600 rounded-full animate-spin"
+          )}
           role="status"
           aria-label="Loading"
         />
@@ -108,7 +112,7 @@ export function PublicLoadingSpinner({
 
       {/* Loading Message */}
       {displayMessage && (
-        <p className="mt-4 text-sm text-gray-600 text-center">
+        <p className="mt-4 text-sm text-sec-600 text-center">
           {displayMessage}
         </p>
       )}
@@ -117,7 +121,7 @@ export function PublicLoadingSpinner({
 
   if (centered) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="max-w-md mx-auto px-4">
           {content}
         </div>
@@ -140,7 +144,10 @@ export function PublicLoadingSpinnerFullPage({
   eventName?: string;
 }) {
   return (
-    <div className={`min-h-screen bg-white flex items-center justify-center ${className}`}>
+    <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">
@@ -153,7 +160,7 @@ export function PublicLoadingSpinnerFullPage({
 
         {/* Event Name */}
         {eventName && (
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             {eventName}
           </h1>
         )}
@@ -161,22 +168,22 @@ export function PublicLoadingSpinnerFullPage({
         {/* 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"
+            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-gray-600">
+        <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-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 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>
@@ -194,13 +201,14 @@ export function PublicLoadingSkeleton({
   className?: string;
 }) {
   return (
-    <div className={`animate-pulse ${className}`}>
+    <div className={cn("animate-pulse", className)}>
       {Array.from({ length: lines }).map((_, index) => (
         <div
           key={index}
-          className={`h-4 bg-gray-200 rounded mb-2 ${
+          className={cn(
+            "h-4 bg-sec-200 rounded mb-2",
             index === lines - 1 ? 'w-3/4' : 'w-full'
-          }`}
+          )}
         />
       ))}
     </div>

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -30,6 +30,27 @@
  *   );
  * }
  * ```
+ * 
+ * @example
+ * ```tsx
+ * // Using custom logo URL
+ * <PublicPageHeader 
+ *   event={event}
+ *   logoUrl="/custom-logo.svg"
+ *   logoAlt="My Custom Logo"
+ *   logoHref="/"
+ * />
+ * ```
+ * 
+ * @example
+ * ```tsx
+ * // Using custom logo component
+ * <PublicPageHeader 
+ *   event={event}
+ *   customAppLogo={<CustomLogoComponent />}
+ *   logoHref="/dashboard"
+ * />
+ * ```
  *
  * @accessibility
  * - WCAG 2.1 AA compliant
@@ -46,10 +67,12 @@
  */
 
 import React, { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
 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/cn';
 
 export interface PublicPageHeaderProps {
   /** The event data for this public page */
@@ -68,10 +91,16 @@ export interface PublicPageHeaderProps {
   className?: string;
   /** Custom content to display in the header */
   children?: ReactNode;
-  /** Custom app logo component */
+  /** Custom app logo component (overrides logoUrl and auto-generated path) */
   customAppLogo?: ReactNode;
   /** Custom event logo component */
   customEventLogo?: ReactNode;
+  /** URL to the app logo image (overrides auto-generated path, but customAppLogo takes precedence) */
+  logoUrl?: string;
+  /** Alt text for the app logo (defaults to appName from useAppConfig) */
+  logoAlt?: string;
+  /** URL to navigate to when app logo is clicked */
+  logoHref?: string;
 }
 
 /**
@@ -80,6 +109,15 @@ export interface PublicPageHeaderProps {
  * This component displays the app logo, event logo, and event information
  * in a clean, accessible layout suitable for public pages.
  * 
+ * Logo handling follows a priority order:
+ * 1. customAppLogo prop (if provided) - highest priority
+ * 2. logoUrl prop (if provided) - direct URL override
+ * 3. Auto-generated path from appName via useAppConfig() - convention-based
+ * 4. Default SVG fallback - lowest priority
+ * 
+ * The logo can be made clickable by providing the logoHref prop, which will
+ * wrap the logo in a Link component for navigation.
+ * 
  * @param props - Header configuration and content
  * @returns React element with public page header
  */
@@ -93,32 +131,96 @@ export function PublicPageHeader({
   className = '',
   children,
   customAppLogo,
-  customEventLogo
+  customEventLogo,
+  logoUrl,
+  logoAlt,
+  logoHref
 }: 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">
+    <header className={cn(
+      " px-4 w-[min(var(--app-width),100%)] mx-auto bg-background border-b border-sec-200 grid grid-cols-[auto_1fr_auto]  place-items-center gap-2",
+      className
+    )}>
+      
         {/* Top row with logos */}
-        <div className="flex items-center justify-between py-4">
+
           {/* App Logo */}
           {showAppLogo && (
-            <div className="flex-shrink-0">
-              {customAppLogo || (
-                <img
-                  className="h-8 w-8 object-contain"
-                  src={`/${appName.toLowerCase()}_logo_square.svg`}
-                  alt={appName}
-                />
+            <>
+              {customAppLogo ? (
+                logoHref ? (
+                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                    {customAppLogo}
+                  </Link>
+                ) : (
+                  customAppLogo
+                )
+              ) : logoUrl ? (
+                logoHref ? (
+                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                    <img
+                      className="max-w-36 object-contain row-span-2"
+                      src={logoUrl}
+                      alt={logoAlt || appName}
+                    />
+                  </Link>
+                ) : (
+                  <img
+                    className="max-w-36 object-contain row-span-2"
+                    src={logoUrl}
+                    alt={logoAlt || appName}
+                  />
+                )
+              ) : appName ? (
+                logoHref ? (
+                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                    <img
+                      className="max-w-36 object-contain row-span-2"
+                      src={`/${appName.toLowerCase()}_logo_wide.svg`}
+                      alt={logoAlt || appName}
+                    />
+                  </Link>
+                ) : (
+                  <img
+                    className="max-w-36 object-contain row-span-2"
+                    src={`/${appName.toLowerCase()}_logo_wide.svg`}
+                    alt={logoAlt || appName}
+                  />
+                )
+              ) : (
+                logoHref ? (
+                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                    <img
+                      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
+                      alt={logoAlt || 'Logo'}
+                      className="max-w-36 object-contain row-span-2"
+                    />
+                  </Link>
+                ) : (
+                  <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
+                    alt={logoAlt || 'Logo'}
+                    className="max-w-36 object-contain row-span-2"
+                  />
+                )
               )}
-            </div>
+            </>
           )}
 
+
+        {/* Event Information */}
+
+
+            {event && (
+              <>
+                <h1>
+                  {event.event_name}
+                </h1>
           {/* Event Logo */}
           {showEventLogo && event && (
-            <div className="flex-shrink-0">
+            <>
               {customEventLogo || (
                 <FileDisplay
                   table_name="event"
@@ -128,7 +230,7 @@ export function PublicPageHeader({
                   displayOnly={true}
                   showFallback={true}
                   fallbackSize="md"
-                  className="[&_img]:h-12 [&_img]:w-12 [&_img]:object-contain [&>div]:h-12 [&>div]:w-12"
+                  className="max-w-36 row-span-2"
                   generateFallbackText={(fileName) => {
                     if (!event.event_name) return 'EV';
                     return event.event_name
@@ -139,50 +241,41 @@ export function PublicPageHeader({
                   }}
                 />
               )}
-            </div>
+            </>
           )}
-        </div>
-
-        {/* Event Information */}
-        <div className="pb-4">
-          <div className="text-center">
-            {event && (
-              <>
-                <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">
+                  <h4>
                     {event.event_venue}
-                  </p>
+                  </h4>
                 )}
               </>
             )}
 
             {/* Page Title and Description */}
             {title && (
-              <div className="mt-6">
-                <h2 className="text-2xl font-semibold text-gray-800 mb-2">
+              <>
+                <h1>
                   {title}
-                </h2>
+                </h1>
                 {description && (
-                  <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+                  <p className="text-lg text-sec-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

@@ -10,6 +10,7 @@
  * Features:
  * - No authentication required
  * - Event-specific header and branding
+ * - Automatic event color theming (applies event_colours when available)
  * - Responsive design
  * - Print-friendly styling
  * - Error boundary integration
@@ -18,18 +19,22 @@
  *
  * @example
  * ```tsx
- * import { PublicPageLayout, PublicPageHeader } from '@jmruthers/pace-core';
+ * import { PublicPageLayout, usePublicRouteParams, usePublicEvent } from '@jmruthers/pace-core';
  *
  * function PublicEventPage() {
- *   const { eventCode } = usePublicRouteParams();
+ *   const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+ *   const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
  *   
+ *   // PublicPageLayout handles all loading, error, and missing event states
  *   return (
- *     <PublicPageLayout eventCode={eventCode}>
- *       <PublicPageHeader 
- *         event={event}
- *         title="Event Details"
- *         description="Public information about this event"
- *       />
+ *     <PublicPageLayout 
+ *       eventCode={eventCode || ''}
+ *       event={event}
+ *       isLoading={isLoading}
+ *       error={error}
+ *       refetch={refetch}
+ *     >
+ *       <h1>Event Details</h1>
  *       <div className="content">
  *         Your public page content
  *       </div>
@@ -59,11 +64,13 @@
  * - Tailwind CSS - Styling
  */
 
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode } from 'react';
 import { PublicPageHeader } from './PublicPageHeader';
 import { PublicPageFooter } from './PublicPageFooter';
 import { PublicErrorBoundary } from './PublicErrorBoundary';
 import { PublicLoadingSpinner } from './PublicLoadingSpinner';
+import { Button } from '../Button';
+import { useEventTheme } from '../../hooks/useEventTheme';
 import type { Event } from '../../types/unified';
 
 export interface PublicPageLayoutProps {
@@ -73,9 +80,15 @@ export interface PublicPageLayoutProps {
   children: ReactNode;
   /** Optional event data - if not provided, will be fetched by parent component */
   event?: Event | null;
+  /** Loading state - if true, shows loading spinner */
+  isLoading?: boolean;
+  /** Error state - if provided, shows error message */
+  error?: Error | null;
+  /** Function to retry loading event data */
+  refetch?: () => Promise<void> | void;
   /** Whether to show the footer (default: true) */
   showFooter?: boolean;
-  /** Custom CSS classes for the layout */
+  /** @deprecated Custom CSS classes for the layout - no longer used as wrapper div was removed */
   className?: string;
   /** Custom error fallback component */
   errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>;
@@ -87,6 +100,8 @@ export interface PublicPageLayoutProps {
   customFooter?: ReactNode;
   /** Whether to show event validation errors (default: true) */
   showValidationErrors?: boolean;
+  /** Custom loading message */
+  loadingMessage?: string;
 }
 
 /**
@@ -95,6 +110,9 @@ export interface PublicPageLayoutProps {
  * This component provides a consistent structure for public event pages
  * with event-specific branding, error handling, and loading states.
  * 
+ * Automatically applies event colors from the event's event_colours field
+ * when an event is provided, ensuring consistent theming across public pages.
+ * 
  * @param props - Layout configuration and content
  * @returns React element with complete public page layout
  */
@@ -102,96 +120,81 @@ export function PublicPageLayout({
   eventCode,
   children,
   event = null,
+  isLoading = false,
+  error = null,
+  refetch,
   showFooter = true,
   className = '',
   errorFallback: ErrorFallback,
   loadingFallback: LoadingFallback = PublicLoadingSpinner,
   customHeader,
   customFooter,
-  showValidationErrors = true
+  showValidationErrors = true,
+  loadingMessage
 }: 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 () => {};
+  // Apply event theme colors automatically when event is available
+  // This works in public page context without requiring EventProvider
+  useEventTheme(event);
 
-  // Memoize the layout classes
-  const layoutClasses = useMemo(() => {
-    const baseClasses = 'min-h-screen bg-white flex flex-col';
-    return `${baseClasses} ${className}`.trim();
-  }, [className]);
+  // Default refetch function
+  const handleRefetch = refetch || (async () => {});
 
   // Handle loading state
   if (isLoading) {
-    return (
-      <div className={layoutClasses}>
-        <div className="flex-1 flex items-center justify-center">
-          <LoadingFallback />
-        </div>
-      </div>
-    );
+    if (LoadingFallback === PublicLoadingSpinner) {
+      return (
+        <PublicLoadingSpinner 
+          className="items-center justify-center"
+          message={loadingMessage}
+        />
+      );
+    }
+    return <LoadingFallback />;
   }
 
   // Handle error state
   if (error && showValidationErrors) {
+    if (ErrorFallback) {
+      return <ErrorFallback error={error} retry={handleRefetch} />;
+    }
     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>
-          )}
+      <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
+        <div className="text-center">
+          <h1>Event Not Found</h1>
+          <p>
+            The event code "{eventCode}" is invalid or the event is not available for public viewing.
+          </p>
+          <Button onClick={handleRefetch}>Try Again</Button>
         </div>
-      </div>
+      </main>
     );
   }
 
   // Handle missing event
-  if (!event) {
+  if (!event && showValidationErrors) {
     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>
+      <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
+        <div className="text-center">
+          <h1>Event Not Available</h1>
+          <p>
+            This event is not available for public viewing.
+          </p>
+          {handleRefetch && <Button onClick={handleRefetch}>Try Again</Button>}
         </div>
-      </div>
+      </main>
     );
   }
 
+  // At this point, if showValidationErrors is true, event must exist
+  // If showValidationErrors is false, we allow rendering without event
+  // But footer requires event, so only show it if event exists
   return (
     <PublicErrorBoundary>
-      <div className={layoutClasses}>
+      <>
         {/* Header */}
         {customHeader || (
           <PublicPageHeader 
-            event={event}
+            event={event || undefined}
             eventCode={eventCode}
           />
         )}
@@ -201,11 +204,11 @@ export function PublicPageLayout({
           {children}
         </main>
 
-        {/* Footer */}
-        {showFooter && (
+        {/* Footer - only show if event exists */}
+        {showFooter && event && (
           customFooter || <PublicPageFooter event={event} />
         )}
-      </div>
+      </>
     </PublicErrorBoundary>
   );
 }

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

@@ -278,7 +278,7 @@ describe('[component] PublicErrorBoundary', () => {
       );
 
       const tryAgainButton = screen.getByRole('button', { name: 'Try Again' });
-      expect(tryAgainButton).toHaveClass('focus:outline-none', 'focus:ring-2', 'focus:ring-blue-500', 'focus:ring-offset-2');
+      expect(tryAgainButton).toHaveClass('focus:outline-none', 'focus:ring-2', 'focus:ring-main-500', 'focus:ring-offset-2');
     });
   });
 });