@jmruthers/pace-core 0.5.101 → 0.5.103

package/docs/api/interfaces/UsePublicEventLogoOptions.md

@@ -1,87 +0,0 @@
-[@jmruthers/pace-core - v0.5.101](../README.md) / [Exports](../modules.md) / UsePublicEventLogoOptions
-
-# Interface: UsePublicEventLogoOptions
-
-## Table of contents
-
-### Properties
-
-- [cacheTtl](UsePublicEventLogoOptions.md#cachettl)
-- [enableCache](UsePublicEventLogoOptions.md#enablecache)
-- [validateImage](UsePublicEventLogoOptions.md#validateimage)
-- [generateFallbackText](UsePublicEventLogoOptions.md#generatefallbacktext)
-- [supabase](UsePublicEventLogoOptions.md#supabase)
-
-## Properties
-
-### cacheTtl
-
-• `Optional` **cacheTtl**: `number`
-
-Cache TTL in milliseconds (default: 30 minutes)
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:91](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L91)
-
-___
-
-### enableCache
-
-• `Optional` **enableCache**: `boolean`
-
-Whether to enable caching (default: true)
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:93](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L93)
-
-___
-
-### validateImage
-
-• `Optional` **validateImage**: `boolean`
-
-Whether to validate image existence (default: true)
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:95](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L95)
-
-___
-
-### generateFallbackText
-
-• `Optional` **generateFallbackText**: (`eventName`: `string`) => `string`
-
-Custom fallback text generator
-
-#### Type declaration
-
-▸ (`eventName`): `string`
-
-##### Parameters
-
-| Name | Type |
-| :------ | :------ |
-| `eventName` | `string` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:97](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L97)
-
-___
-
-### supabase
-
-• **supabase**: `default`\<`Database`, ``"public"``, ``"public"``, `never`, {}\>
-
-Supabase client instance (required)
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:99](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L99)

package/docs/api/interfaces/UsePublicEventLogoReturn.md

@@ -1,81 +0,0 @@
-[@jmruthers/pace-core - v0.5.101](../README.md) / [Exports](../modules.md) / UsePublicEventLogoReturn
-
-# Interface: UsePublicEventLogoReturn
-
-## Table of contents
-
-### Properties
-
-- [logoUrl](UsePublicEventLogoReturn.md#logourl)
-- [fallbackText](UsePublicEventLogoReturn.md#fallbacktext)
-- [isLoading](UsePublicEventLogoReturn.md#isloading)
-- [error](UsePublicEventLogoReturn.md#error)
-- [refetch](UsePublicEventLogoReturn.md#refetch)
-
-## Properties
-
-### logoUrl
-
-• **logoUrl**: ``null`` \| `string`
-
-The logo URL if available, null if not found or error
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:78](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L78)
-
-___
-
-### fallbackText
-
-• **fallbackText**: `string`
-
-Fallback text (event initials) if no logo is available
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:80](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L80)
-
-___
-
-### isLoading
-
-• **isLoading**: `boolean`
-
-Whether the logo is currently loading
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:82](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L82)
-
-___
-
-### error
-
-• **error**: ``null`` \| `Error`
-
-Any error that occurred during loading
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:84](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L84)
-
-___
-
-### refetch
-
-• **refetch**: () => `Promise`\<`void`\>
-
-Function to manually refetch the logo
-
-#### Type declaration
-
-▸ (): `Promise`\<`void`\>
-
-##### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:86](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L86)

package/src/components/PublicLayout/EventLogo.tsx

@@ -1,474 +0,0 @@
-/**
- * @file Event Logo Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A context-aware component for displaying event logos with automatic fallback to event initials.
- * Automatically detects whether it's being used in a public or authenticated context and behaves
- * appropriately without triggering authentication context leakage.
- *
- * Features:
- * - Context-aware (works in both public and authenticated contexts)
- * - Automatic fallback to event initials
- * - Logo validation and error handling
- * - Multiple size options
- * - Responsive design
- * - Accessibility compliant
- * - TypeScript support
- *
- * @example
- * ```tsx
- * import { EventLogo } from '@jmruthers/pace-core';
- *
- * function EventHeader() {
- *   return (
- *     <EventLogo
- *       eventId={event.id}
- *       eventName={event.event_name}
- *       organisationId={event.organisation_id}
- *       size="lg"
- *       className="rounded-full"
- *     />
- *   );
- * }
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper alt text for images
- * - Screen reader friendly fallbacks
- * - High contrast support
- *
- * @dependencies
- * - React 18+ - Component framework
- * - usePublicEventLogo hook - Logo data access
- * - Tailwind CSS - Styling
- */
-
-import React, { useMemo, useContext } from 'react';
-import { usePublicEventLogo } from '../../hooks/public/usePublicEventLogo';
-import { useEventLogo } from '../../hooks/useEventLogo';
-import { PublicPageContext, useIsPublicPage } from './PublicPageProvider';
-import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
-import type { SupabaseClient } from '@supabase/supabase-js';
-import type { Database } from '../../types/database';
-
-export interface EventLogoProps {
-  /** The event ID to fetch logo for */
-  eventId: string;
-  /** The event name for fallback text generation */
-  eventName: string;
-  /** The organisation ID for storage path */
-  organisationId: string;
-  /** Logo size variant */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Custom CSS classes */
-  className?: string;
-  /** Whether to show fallback text when no logo is available */
-  showFallback?: boolean;
-  /** Custom fallback text generator */
-  generateFallbackText?: (eventName: string) => string;
-  /** Whether to validate image existence */
-  validateImage?: boolean;
-  /** Custom loading component */
-  loadingComponent?: React.ComponentType;
-  /** Custom error component */
-  errorComponent?: React.ComponentType<{ error: Error }>;
-}
-
-/**
- * Size classes for different logo sizes
- */
-const sizeClasses = {
-  xs: 'h-4 w-4 text-xs',
-  sm: 'h-6 w-6 text-sm',
-  md: 'h-8 w-8 text-base',
-  lg: 'h-12 w-12 text-lg',
-  xl: 'h-16 w-16 text-xl',
-  '2xl': 'h-20 w-20 text-2xl'
-};
-
-/**
- * Default fallback text generator
- */
-function defaultGenerateFallbackText(eventName: string): string {
-  if (!eventName) return 'EV';
-  
-  return eventName
-    .split(' ')
-    .map(word => word.charAt(0).toUpperCase())
-    .join('')
-    .substring(0, 3); // Max 3 characters
-}
-
-/**
- * Component for displaying event logos with fallback to initials
- * 
- * This component is context-aware and automatically detects whether it's being used
- * in a public or authenticated context. It fetches and displays event logos from storage,
- * with automatic fallback to event initials if no logo is available.
- * 
- * @param props - Logo configuration and styling
- * @returns React element with event logo or fallback
- */
-/**
- * Internal component for public page context
- * Uses PublicPageContext to get Supabase client
- */
-function EventLogoPublic({
-  eventId,
-  eventName,
-  organisationId,
-  size,
-  className,
-  showFallback,
-  generateFallbackText,
-  validateImage,
-  LoadingComponent,
-  ErrorComponent
-}: EventLogoProps & { LoadingComponent?: React.ComponentType; ErrorComponent?: React.ComponentType<{ error: Error }> }) {
-  const publicPageContext = useContext(PublicPageContext);
-  const supabase = publicPageContext?.supabase ?? null;
-
-  // Validate UUID format for organisationId to prevent database errors
-  const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-  const hasValidOrganisationId = organisationId && uuidRegex.test(organisationId);
-
-  // If no Supabase client is available, show fallback immediately
-  if (!supabase) {
-    const effectiveSize = size || 'md';
-    return (
-      <div className={`${sizeClasses[effectiveSize]} ${className}`.trim()} title={`${eventName} logo (Supabase not configured)`}>
-        {eventName ? defaultGenerateFallbackText(eventName) : 'EV'}
-      </div>
-    );
-  }
-
-  const {
-    logoUrl,
-    fallbackText,
-    isLoading,
-    error
-  } = usePublicEventLogo(
-    eventId, 
-    eventName, 
-    organisationId, // Always pass organisationId, let the hook handle validation
-    {
-      validateImage,
-      generateFallbackText,
-      supabase
-    }
-  );
-
-  // Memoize the size classes - provide default 'md' if size is undefined
-  const sizeClass = useMemo(() => sizeClasses[size || 'md'], [size]);
-
-  // Memoize the combined classes
-  const combinedClasses = useMemo(() => {
-    const baseClasses = 'flex items-center justify-center bg-gray-100 text-gray-600 font-semibold rounded';
-    return `${baseClasses} ${sizeClass} ${className}`.trim();
-  }, [sizeClass, className]);
-
-  // Handle invalid organisation ID - show fallback immediately only if we have no data
-  if (!hasValidOrganisationId && !isLoading && !logoUrl && showFallback) {
-    return (
-      <div className={combinedClasses} title={`${eventName} logo (invalid organisation ID)`}>
-        {fallbackText}
-      </div>
-    );
-  }
-
-  // Handle loading state
-  if (isLoading) {
-    if (LoadingComponent) {
-      return <LoadingComponent />;
-    }
-    
-    return (
-      <div className={`${combinedClasses} animate-pulse`}>
-        <div className="w-3/4 h-3/4 bg-gray-300 rounded"></div>
-      </div>
-    );
-  }
-
-  // Handle error state
-  if (error) {
-    if (ErrorComponent) {
-      return <ErrorComponent error={error} />;
-    }
-    
-    if (showFallback) {
-      return (
-        <div className={combinedClasses} title={`${eventName} (logo unavailable)`}>
-          {fallbackText}
-        </div>
-      );
-    }
-    
-    return null;
-  }
-
-  // Handle no logo available
-  if (!logoUrl) {
-    if (showFallback) {
-      return (
-        <div className={combinedClasses} title={`${eventName} logo`}>
-          {fallbackText}
-        </div>
-      );
-    }
-    
-    return null;
-  }
-
-  // Render the actual logo
-  // Apply object-contain to maintain aspect ratio and rounded to match fallback styling
-  const imageClasses = `${sizeClass} object-contain rounded ${className}`.trim();
-  
-  return (
-    <img
-      src={logoUrl}
-      alt={`${eventName} logo`}
-      className={imageClasses}
-      onError={(e) => {
-        // If image fails to load, hide it and show fallback
-        const target = e.target as HTMLImageElement;
-        target.style.display = 'none';
-        
-        // Create fallback element
-        const fallback = document.createElement('div');
-        fallback.className = combinedClasses;
-        fallback.textContent = fallbackText;
-        fallback.title = `${eventName} logo`;
-        
-        // Insert fallback after the image
-        target.parentNode?.insertBefore(fallback, target.nextSibling);
-      }}
-    />
-  );
-}
-
-/**
- * Internal component for authenticated page context
- * Uses UnifiedAuthProvider to get Supabase client
- */
-function EventLogoAuthenticated({
-  eventId,
-  eventName,
-  organisationId,
-  size,
-  className,
-  showFallback,
-  generateFallbackText,
-  validateImage,
-  LoadingComponent,
-  ErrorComponent
-}: EventLogoProps & { LoadingComponent?: React.ComponentType; ErrorComponent?: React.ComponentType<{ error: Error }> }) {
-  const { supabase } = useUnifiedAuth();
-
-  // Validate UUID format for organisationId to prevent database errors
-  const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-  const hasValidOrganisationId = organisationId && uuidRegex.test(organisationId);
-
-  // If no Supabase client is available, show fallback immediately
-  if (!supabase) {
-    const effectiveSize = size || 'md';
-    return (
-      <div className={`${sizeClasses[effectiveSize]} ${className}`.trim()} title={`${eventName} logo (Supabase not configured)`}>
-        {eventName ? defaultGenerateFallbackText(eventName) : 'EV'}
-      </div>
-    );
-  }
-
-  // Use the authenticated event logo hook (supports both public and private logos)
-  const {
-    logoUrl,
-    fallbackText,
-    isLoading,
-    error
-  } = useEventLogo(
-    supabase,
-    eventId, 
-    eventName, 
-    organisationId,
-    {
-      validateImage,
-      generateFallbackText
-    }
-  );
-
-  // Memoize the size classes - provide default 'md' if size is undefined
-  const sizeClass = useMemo(() => sizeClasses[size || 'md'], [size]);
-
-  // Memoize the combined classes
-  const combinedClasses = useMemo(() => {
-    const baseClasses = 'flex items-center justify-center bg-gray-100 text-gray-600 font-semibold rounded';
-    return `${baseClasses} ${sizeClass} ${className}`.trim();
-  }, [sizeClass, className]);
-
-  // Handle invalid organisation ID - show fallback immediately only if we have no data
-  if (!hasValidOrganisationId && !isLoading && !logoUrl && showFallback) {
-    return (
-      <div className={combinedClasses} title={`${eventName} logo (invalid organisation ID)`}>
-        {fallbackText}
-      </div>
-    );
-  }
-
-  // Handle loading state
-  if (isLoading) {
-    if (LoadingComponent) {
-      return <LoadingComponent />;
-    }
-    
-    return (
-      <div className={`${combinedClasses} animate-pulse`}>
-        <div className="w-3/4 h-3/4 bg-gray-300 rounded"></div>
-      </div>
-    );
-  }
-
-  // Handle error state
-  if (error) {
-    if (ErrorComponent) {
-      return <ErrorComponent error={error} />;
-    }
-    
-    if (showFallback) {
-      return (
-        <div className={combinedClasses} title={`${eventName} (logo unavailable)`}>
-          {fallbackText}
-        </div>
-      );
-    }
-    
-    return null;
-  }
-
-  // Handle no logo available
-  if (!logoUrl) {
-    if (showFallback) {
-      return (
-        <div className={combinedClasses} title={`${eventName} logo`}>
-          {fallbackText}
-        </div>
-      );
-    }
-    
-    return null;
-  }
-
-  // Render the actual logo
-  // Apply object-contain to maintain aspect ratio and rounded to match fallback styling
-  const imageClasses = `${sizeClass} object-contain rounded ${className}`.trim();
-  
-  return (
-    <img
-      src={logoUrl}
-      alt={`${eventName} logo`}
-      className={imageClasses}
-      onError={(e) => {
-        // If image fails to load, hide it and show fallback
-        const target = e.target as HTMLImageElement;
-        target.style.display = 'none';
-        
-        // Create fallback element
-        const fallback = document.createElement('div');
-        fallback.className = combinedClasses;
-        fallback.textContent = fallbackText;
-        fallback.title = `${eventName} logo`;
-        
-        // Insert fallback after the image
-        target.parentNode?.insertBefore(fallback, target.nextSibling);
-      }}
-    />
-  );
-}
-
-/**
- * Component for displaying event logos with fallback to initials
- * 
- * This component is context-aware and automatically detects whether it's being used
- * in a public or authenticated context. It fetches and displays event logos from storage,
- * with automatic fallback to event initials if no logo is available.
- * 
- * @param props - Logo configuration and styling
- * @returns React element with event logo or fallback
- */
-export function EventLogo({
-  eventId,
-  eventName,
-  organisationId,
-  size = 'md',
-  className = '',
-  showFallback = true,
-  generateFallbackText = defaultGenerateFallbackText,
-  validateImage = true,
-  loadingComponent: LoadingComponent,
-  errorComponent: ErrorComponent
-}: EventLogoProps) {
-  // Check which context we're in and route to the appropriate component
-  const isPublicPage = useIsPublicPage();
-  
-  // If we're in a public page context, use the public component
-  if (isPublicPage) {
-    return (
-      <EventLogoPublic
-        eventId={eventId}
-        eventName={eventName}
-        organisationId={organisationId}
-        size={size}
-        className={className}
-        showFallback={showFallback}
-        generateFallbackText={generateFallbackText}
-        validateImage={validateImage}
-        LoadingComponent={LoadingComponent}
-        ErrorComponent={ErrorComponent}
-      />
-    );
-  }
-  
-  // Otherwise, try to use the authenticated component
-  // It will throw if not in UnifiedAuthProvider, which will be caught by error boundary
-  return (
-    <EventLogoAuthenticated
-      eventId={eventId}
-      eventName={eventName}
-      organisationId={organisationId}
-      size={size}
-      className={className}
-      showFallback={showFallback}
-      generateFallbackText={generateFallbackText}
-      validateImage={validateImage}
-      LoadingComponent={LoadingComponent}
-      ErrorComponent={ErrorComponent}
-    />
-  );
-}
-
-/**
- * Compact event logo for small spaces
- */
-export function EventLogoCompact(props: EventLogoProps) {
-  return (
-    <EventLogo
-      {...props}
-      size="sm"
-      className={`${props.className || ''} rounded-sm`}
-    />
-  );
-}
-
-/**
- * Large event logo for prominent display
- */
-export function EventLogoLarge(props: EventLogoProps) {
-  return (
-    <EventLogo
-      {...props}
-      size="xl"
-      className={`${props.className || ''} rounded-lg`}
-    />
-  );
-}