@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -65,13 +65,15 @@
  */
 
 import React, { ReactNode } from 'react';
-import { PublicPageHeader } from './PublicPageHeader';
-import { PublicPageFooter } from './PublicPageFooter';
-import { PublicErrorBoundary } from './PublicErrorBoundary';
-import { PublicLoadingSpinner } from './PublicLoadingSpinner';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { LoadingSpinner } from '../LoadingSpinner';
 import { Button } from '../Button';
+import { FileDisplay } from '../FileDisplay/FileDisplay';
+import { FileCategory } from '../../types/file-reference';
 import { useEventTheme } from '../../hooks/useEventTheme';
-import type { Event } from '../../types/unified';
+import { useAppConfig } from '../../hooks/useAppConfig';
+import { cn } from '../../utils/core/cn';
+import type { Event } from '../../types/event';
 
 export interface PublicPageLayoutProps {
   /** The event code for this public page */
@@ -104,6 +106,174 @@ export interface PublicPageLayoutProps {
   loadingMessage?: string;
 }
 
+// === HEADER COMPONENT ===
+
+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;
+}
+
+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
+    )}>
+      {/* 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);
+                  }}
+                />
+              )}
+            </>
+          )}
+          {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>
+  );
+}
+
+// === FOOTER COMPONENT ===
+
+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;
+}
+
+export function PublicPageFooter({
+  event,
+  companyName = 'Solvera Solutions Pty Ltd',
+  year = new Date().getFullYear(),
+  links,
+  className = '',
+  logo,
+  copyright,
+  children
+}: PublicPageFooterProps) {
+  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>
+  );
+}
+
 /**
  * Layout component for public pages that don't require authentication
  * 
@@ -126,7 +296,7 @@ export function PublicPageLayout({
   showFooter = true,
   className = '',
   errorFallback: ErrorFallback,
-  loadingFallback: LoadingFallback = PublicLoadingSpinner,
+  loadingFallback: LoadingFallback,
   customHeader,
   customFooter,
   showValidationErrors = true,
@@ -141,15 +311,19 @@ export function PublicPageLayout({
 
   // Handle loading state
   if (isLoading) {
-    if (LoadingFallback === PublicLoadingSpinner) {
-      return (
-        <PublicLoadingSpinner 
-          className="items-center justify-center"
-          message={loadingMessage}
-        />
-      );
+    if (LoadingFallback) {
+      return <LoadingFallback />;
     }
-    return <LoadingFallback />;
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <LoadingSpinner size="lg" className="mx-auto mb-4" />
+          {loadingMessage && (
+            <p className="text-sec-600">{loadingMessage}</p>
+          )}
+        </div>
+      </div>
+    );
   }
 
   // Handle error state
@@ -189,7 +363,7 @@ export function PublicPageLayout({
   // If showValidationErrors is false, we allow rendering without event
   // But footer requires event, so only show it if event exists
   return (
-    <PublicErrorBoundary>
+    <ErrorBoundary componentName="PublicPageLayout">
       <>
         {/* Header */}
         {customHeader || (
@@ -209,27 +383,7 @@ export function PublicPageLayout({
           customFooter || <PublicPageFooter event={event} />
         )}
       </>
-    </PublicErrorBoundary>
+    </ErrorBoundary>
   );
 }
 
-/**
- * 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

@@ -37,7 +37,7 @@
 import React, { createContext, useContext, ReactNode, useMemo } from 'react';
 import { createClient } from '@supabase/supabase-js';
 import type { Database } from '../../types/database';
-import { PublicErrorBoundary } from './PublicErrorBoundary';
+import { ErrorBoundary } from '../ErrorBoundary';
 import { logger } from '../../utils/core/logger';
 
 interface PublicPageContextType {
@@ -73,12 +73,13 @@ export function PublicPageProvider({ children, appName }: PublicPageProviderProp
   // 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];
+    if (typeof import.meta !== 'undefined' && import.meta.env) {
+      const env = import.meta.env as Record<string, string | undefined>;
+      return env[key];
     }
     // Check Node.js environment (server-side)
-    if (typeof import.meta !== 'undefined' && import.meta.env) {
-      return import.meta.env[key];
+    if (typeof process !== 'undefined' && process.env) {
+      return process.env[key];
     }
     return undefined;
   };
@@ -115,9 +116,9 @@ export function PublicPageProvider({ children, appName }: PublicPageProviderProp
 
   return (
     <PublicPageContext.Provider value={contextValue}>
-      <PublicErrorBoundary>
+      <ErrorBoundary componentName="PublicPageProvider">
         {children}
-      </PublicErrorBoundary>
+      </ErrorBoundary>
     </PublicPageContext.Provider>
   );
 }

package/src/components/PublicLayout/index.ts

@@ -17,34 +17,16 @@
  */
 
 // === MAIN LAYOUT COMPONENTS ===
-export { PublicPageLayout, usePublicPageContext } from './PublicPageLayout';
-export { PublicPageHeader } from './PublicPageHeader';
-export { PublicPageProvider, usePublicPageContext as usePublicPageProviderContext, useIsPublicPage } from './PublicPageProvider';
-export { PublicPageFooter } from './PublicPageFooter';
-export { PublicPageContextChecker } from './PublicPageContextChecker';
-
-
-// === ERROR HANDLING COMPONENTS ===
 export { 
-  PublicErrorBoundary, 
-  useErrorBoundary, 
-  DefaultPublicErrorFallback 
-} from './PublicErrorBoundary';
-
-// === LOADING COMPONENTS ===
-export { 
-  PublicLoadingSpinner, 
-  PublicLoadingSpinnerFullPage,
-  PublicLoadingSkeleton 
-} from './PublicLoadingSpinner';
-
-// === EVENT LOGO COMPONENT ===
-export { EventLogo, EventLogoCompact, EventLogoLarge } from './EventLogo';
-export type { EventLogoProps } from './EventLogo';
+  PublicPageLayout,
+  PublicPageHeader,
+  PublicPageFooter
+} from './PublicPageLayout';
+export { PublicPageProvider, usePublicPageContext, useIsPublicPage } from './PublicPageProvider';
 
 // === TYPES ===
-export type { PublicPageLayoutProps } from './PublicPageLayout';
-export type { PublicPageHeaderProps } from './PublicPageHeader';
-export type { PublicPageFooterProps } from './PublicPageFooter';
-export type { PublicErrorBoundaryProps, PublicErrorBoundaryState } from './PublicErrorBoundary';
-export type { PublicLoadingSpinnerProps } from './PublicLoadingSpinner';
+export type { 
+  PublicPageLayoutProps,
+  PublicPageHeaderProps,
+  PublicPageFooterProps
+} from './PublicPageLayout';

package/src/components/Select/Select.test.tsx

@@ -26,15 +26,15 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 // Mock lucide-react icons
 vi.mock('lucide-react', () => ({
-  Search: ({ className, ...props }: any) => <div data-testid="search-icon" className={className} {...props} />,
-  X: ({ className, ...props }: any) => <div data-testid="x-icon" className={className} {...props} />,
-  ChevronDown: ({ className, ...props }: any) => <div data-testid="chevron-down" className={className} {...props} />,
-  Check: ({ className, ...props }: any) => <div data-testid="check-icon" className={className} {...props} />,
+  Search: ({ className, ...props }: React.ComponentProps<'div'>) => <div data-testid="search-icon" className={className} {...props} />,
+  X: ({ className, ...props }: React.ComponentProps<'div'>) => <div data-testid="x-icon" className={className} {...props} />,
+  ChevronDown: ({ className, ...props }: React.ComponentProps<'div'>) => <div data-testid="chevron-down" className={className} {...props} />,
+  Check: ({ className, ...props }: React.ComponentProps<'div'>) => <div data-testid="check-icon" className={className} {...props} />,
 }));
 
 // Mock Button component
 vi.mock('../Button/Button', () => ({
-  Button: React.forwardRef<HTMLButtonElement, any>(({ children, ...props }, ref) => (
+  Button: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ children, ...props }, ref) => (
     <button ref={ref} {...props}>
       {children}
     </button>
@@ -43,7 +43,7 @@ vi.mock('../Button/Button', () => ({
 
 // Mock cn utility
 vi.mock('../../utils/core/cn', () => ({
-  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
+  cn: (...classes: (string | undefined | null | false)[]) => classes.filter(Boolean).join(' '),
 }));
 
 describe('Select Component', () => {
@@ -53,7 +53,7 @@ describe('Select Component', () => {
     { value: 'option3', label: 'Option 3' },
   ];
 
-  const renderSelect = (props: any = {}, options = defaultOptions) => {
+  const renderSelect = (props: Partial<React.ComponentProps<typeof Select>> = {}, options = defaultOptions) => {
     return renderWithProviders(
       <Select {...props}>
         <SelectTrigger>