@jmruthers/pace-core 0.2.6 → 0.4.1

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/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

@@ -1,178 +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, 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

@@ -1,232 +0,0 @@
-/**
- * @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

@@ -1,137 +0,0 @@
-/**
- * @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;
-}