@jmruthers/pace-core 0.5.100 → 0.5.102

package/docs/api/interfaces/EventLogoProps.md

@@ -1,152 +0,0 @@
-[@jmruthers/pace-core - v0.5.100](../README.md) / [Exports](../modules.md) / EventLogoProps
-
-# Interface: EventLogoProps
-
-## Table of contents
-
-### Properties
-
-- [eventId](EventLogoProps.md#eventid)
-- [eventName](EventLogoProps.md#eventname)
-- [organisationId](EventLogoProps.md#organisationid)
-- [size](EventLogoProps.md#size)
-- [className](EventLogoProps.md#classname)
-- [showFallback](EventLogoProps.md#showfallback)
-- [generateFallbackText](EventLogoProps.md#generatefallbacktext)
-- [validateImage](EventLogoProps.md#validateimage)
-- [loadingComponent](EventLogoProps.md#loadingcomponent)
-- [errorComponent](EventLogoProps.md#errorcomponent)
-
-## Properties
-
-### eventId
-
-• **eventId**: `string`
-
-The event ID to fetch logo for
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:59](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L59)
-
-___
-
-### eventName
-
-• **eventName**: `string`
-
-The event name for fallback text generation
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:61](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L61)
-
-___
-
-### organisationId
-
-• **organisationId**: `string`
-
-The organisation ID for storage path
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:63](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L63)
-
-___
-
-### size
-
-• `Optional` **size**: ``"sm"`` \| ``"lg"`` \| ``"md"`` \| ``"xl"`` \| ``"xs"`` \| ``"2xl"``
-
-Logo size variant
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:65](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L65)
-
-___
-
-### className
-
-• `Optional` **className**: `string`
-
-Custom CSS classes
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:67](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L67)
-
-___
-
-### showFallback
-
-• `Optional` **showFallback**: `boolean`
-
-Whether to show fallback text when no logo is available
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:69](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L69)
-
-___
-
-### 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/components/PublicLayout/EventLogo.tsx:71](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L71)
-
-___
-
-### validateImage
-
-• `Optional` **validateImage**: `boolean`
-
-Whether to validate image existence
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:73](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L73)
-
-___
-
-### loadingComponent
-
-• `Optional` **loadingComponent**: `ComponentType`\<{}\>
-
-Custom loading component
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:75](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L75)
-
-___
-
-### errorComponent
-
-• `Optional` **errorComponent**: `ComponentType`\<\{ `error`: `Error`  }\>
-
-Custom error component
-
-#### Defined in
-
-[packages/core/src/components/PublicLayout/EventLogo.tsx:77](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PublicLayout/EventLogo.tsx#L77)

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`}
-    />
-  );
-}