@jmruthers/pace-core 0.5.101 → 0.5.102

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -41,7 +41,7 @@
  * @dependencies
  * - React 18+ - Component framework
  * - Event types - Type definitions
- * - EventLogo component - Logo display
+ * - FileDisplay component - Logo display
  * - Tailwind CSS - Styling
  */
 
@@ -50,7 +50,6 @@ import type { Event } from '../../types/unified';
 import { FileDisplay } from '../FileDisplay/FileDisplay';
 import { FileCategory } from '../../types/file-reference';
 import { useAppConfig } from '../../hooks/useAppConfig';
-import type { SupabaseClient } from '@supabase/supabase-js';
 
 export interface PublicPageHeaderProps {
   /** The event data for this public page */
@@ -73,8 +72,6 @@ export interface PublicPageHeaderProps {
   customAppLogo?: ReactNode;
   /** Custom event logo component */
   customEventLogo?: ReactNode;
-  /** Optional Supabase client (for testing) */
-  supabase?: SupabaseClient;
 }
 
 /**
@@ -96,8 +93,7 @@ export function PublicPageHeader({
   className = '',
   children,
   customAppLogo,
-  customEventLogo,
-  supabase
+  customEventLogo
 }: PublicPageHeaderProps) {
   const { appName } = useAppConfig();
   const headerClasses = `bg-white border-b border-gray-200 ${className}`.trim();
@@ -125,13 +121,22 @@ export function PublicPageHeader({
             <div className="flex-shrink-0">
               {customEventLogo || (
                 <FileDisplay
-                  supabase={supabase}
                   table_name="event"
                   record_id={event.event_id}
                   organisation_id={event.organisation_id}
                   category={FileCategory.EVENT_LOGOS}
-                  showDelete={false}
-                  className="[&_img]:h-12 [&_img]:w-12 [&_img]:object-contain"
+                  displayOnly={true}
+                  showFallback={true}
+                  fallbackSize="md"
+                  className="[&_img]:h-12 [&_img]:w-12 [&_img]:object-contain [&>div]:h-12 [&>div]:w-12"
+                  generateFallbackText={(fileName) => {
+                    if (!event.event_name) return 'EV';
+                    return event.event_name
+                      .split(/[\s\-_]+/)
+                      .map(word => word.charAt(0).toUpperCase())
+                      .join('')
+                      .substring(0, 3);
+                  }}
                 />
               )}
             </div>

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

@@ -46,9 +46,9 @@ vi.mock('../../../hooks/useAppConfig', () => ({
   }))
 }));
 
-// Mock the EventLogo component
-vi.mock('../EventLogo', () => ({
-  EventLogo: vi.fn(({ eventId, eventName, organisationId, size, className }) => (
+// Mock the FileDisplay component
+vi.mock('../../FileDisplay/FileDisplay', () => ({
+  FileDisplay: vi.fn(({ table_name, record_id, organisation_id, category, className }) => (
     <div 
       data-testid="event-logo" 
       data-event-id={eventId}
@@ -85,7 +85,7 @@ describe('[component] PublicPageHeader', () => {
     describe('Rendering', () => {
     it('renders with basic props', () => {
       render(
-        <PublicPageHeader event={mockEvent} eventCode="EVENT123" supabase={mockSupabase} />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       expect(screen.getByRole('banner')).toBeInTheDocument();
@@ -99,7 +99,6 @@ describe('[component] PublicPageHeader', () => {
           event={mockEvent} 
           eventCode="EVENT123" 
           className="custom-header-class"
-          supabase={mockSupabase}
         />
       );
 
@@ -114,7 +113,6 @@ describe('[component] PublicPageHeader', () => {
           eventCode="EVENT123"
           title="Page Title"
           description="Page Description"
-          supabase={mockSupabase}
         />
       );
 
@@ -124,7 +122,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('renders with custom children', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123">
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123">
           <div data-testid="custom-content">Custom Content</div>
         </PublicPageHeader>
       );
@@ -136,7 +134,7 @@ describe('[component] PublicPageHeader', () => {
   describe('Logo Display', () => {
     it('shows app logo by default', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const appLogo = screen.getByAltText('Test App');
@@ -151,7 +149,6 @@ describe('[component] PublicPageHeader', () => {
           event={mockEvent} 
           eventCode="EVENT123" 
           showAppLogo={false}
-          supabase={mockSupabase}
         />
       );
 
@@ -166,7 +163,6 @@ describe('[component] PublicPageHeader', () => {
           event={mockEvent} 
           eventCode="EVENT123" 
           customAppLogo={customAppLogo}
-          supabase={mockSupabase}
         />
       );
 
@@ -176,10 +172,10 @@ describe('[component] PublicPageHeader', () => {
 
     it('shows event logo by default', () => {
       render(
-        <PublicPageHeader event={mockEvent} eventCode="EVENT123" supabase={mockSupabase} />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
-      // PublicPageHeader uses FileDisplay for event logos, not EventLogo component
+      // PublicPageHeader uses FileDisplay for event logos
       // FileDisplay is rendered but will show "No files found" with our mocks
       // We just verify the component renders without errors
       expect(screen.getByRole('banner')).toBeInTheDocument();
@@ -189,9 +185,8 @@ describe('[component] PublicPageHeader', () => {
       render(
         <PublicPageHeader 
           event={mockEvent} 
-          eventCode="EVENT123" 
+          eventCode="EVENT123"
           showEventLogo={false}
-          supabase={mockSupabase}
         />
       );
 
@@ -204,9 +199,8 @@ describe('[component] PublicPageHeader', () => {
       render(
         <PublicPageHeader 
           event={mockEvent} 
-          eventCode="EVENT123" 
+          eventCode="EVENT123"
           customEventLogo={customEventLogo}
-          supabase={mockSupabase}
         />
       );
 
@@ -216,7 +210,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('passes correct props to FileDisplay for event logo', () => {
       render(
-        <PublicPageHeader event={mockEvent} eventCode="EVENT123" supabase={mockSupabase} />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       // PublicPageHeader uses FileDisplay with category EVENT_LOGOS
@@ -228,7 +222,7 @@ describe('[component] PublicPageHeader', () => {
   describe('Event Information', () => {
     it('displays event name as main heading', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const heading = screen.getByRole('heading', { level: 1 });
@@ -237,7 +231,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('displays event venue when available', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       expect(screen.getByText('Test Venue')).toBeInTheDocument();
@@ -247,7 +241,7 @@ describe('[component] PublicPageHeader', () => {
       const eventWithoutVenue = { ...mockEvent, event_venue: undefined };
       
       render(
-        <PublicPageHeader event={eventWithoutVenue} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={eventWithoutVenue} eventCode="EVENT123" />
       );
 
       expect(screen.queryByText('Test Venue')).not.toBeInTheDocument();
@@ -259,7 +253,6 @@ describe('[component] PublicPageHeader', () => {
           event={mockEvent} 
           eventCode="EVENT123"
           title="Page Title"
-          supabase={mockSupabase}
         />
       );
 
@@ -274,7 +267,6 @@ describe('[component] PublicPageHeader', () => {
           eventCode="EVENT123"
           title="Page Title"
           description="Page Description"
-          supabase={mockSupabase}
         />
       );
 
@@ -285,7 +277,7 @@ describe('[component] PublicPageHeader', () => {
   describe('Layout Structure', () => {
     it('has correct header classes', () => {
       const { container } = render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const header = container.firstChild as HTMLElement;
@@ -294,7 +286,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('has proper container structure', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const container = screen.getByRole('banner').querySelector('div');
@@ -303,7 +295,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('has proper logo row structure', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const logoRow = screen.getByRole('banner').querySelector('div > div:first-child');
@@ -312,7 +304,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('has proper event info structure', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const eventInfo = screen.getByRole('banner').querySelector('div.pb-4');
@@ -323,7 +315,7 @@ describe('[component] PublicPageHeader', () => {
   describe('Accessibility', () => {
     it('has proper semantic structure', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       expect(screen.getByRole('banner')).toBeInTheDocument();
@@ -336,7 +328,6 @@ describe('[component] PublicPageHeader', () => {
           event={mockEvent} 
           eventCode="EVENT123"
           title="Page Title"
-          supabase={mockSupabase}
         />
       );
 
@@ -349,7 +340,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('has proper alt text for images', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       const appLogo = screen.getByAltText('Test App');
@@ -362,7 +353,7 @@ describe('[component] PublicPageHeader', () => {
       const eventWithoutVenue = { ...mockEvent, event_venue: undefined };
       
       render(
-        <PublicPageHeader event={eventWithoutVenue} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={eventWithoutVenue} eventCode="EVENT123" />
       );
 
       expect(screen.getByText('Test Event')).toBeInTheDocument();
@@ -373,7 +364,7 @@ describe('[component] PublicPageHeader', () => {
       const eventWithEmptyVenue = { ...mockEvent, event_venue: '' };
       
       render(
-        <PublicPageHeader event={eventWithEmptyVenue} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={eventWithEmptyVenue} eventCode="EVENT123" />
       );
 
       expect(screen.getByText('Test Event')).toBeInTheDocument();
@@ -382,7 +373,7 @@ describe('[component] PublicPageHeader', () => {
 
     it('handles missing title', () => {
       render(
-        <PublicPageHeader event={mockEvent} supabase={mockSupabase} eventCode="EVENT123" />
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
       expect(screen.getByText('Test Event')).toBeInTheDocument();
@@ -395,7 +386,6 @@ describe('[component] PublicPageHeader', () => {
           event={mockEvent} 
           eventCode="EVENT123"
           title="Page Title"
-          supabase={mockSupabase}
         />
       );
 
@@ -407,13 +397,13 @@ describe('[component] PublicPageHeader', () => {
   describe('Props Validation', () => {
     it('handles missing event prop gracefully', () => {
       // @ts-expect-error - Testing invalid props
-      const { container } = render(<PublicPageHeader eventCode="EVENT123" supabase={mockSupabase} />);
+      const { container } = render(<PublicPageHeader eventCode="EVENT123" />);
       expect(container.firstChild).toBeInTheDocument();
     });
 
     it('handles missing eventCode prop gracefully', () => {
       // @ts-expect-error - Testing invalid props
-      const { container } = render(<PublicPageHeader event={mockEvent} supabase={mockSupabase} />);
+      const { container } = render(<PublicPageHeader event={mockEvent} />);
       expect(container.firstChild).toBeInTheDocument();
     });
   });

package/src/components/PublicLayout/index.ts

@@ -10,10 +10,10 @@
  * 
  * @example
  * // Import individual components
- * import { PublicPageLayout, PublicPageHeader, EventLogo } from '@jmruthers/pace-core/components/PublicLayout';
+ * import { PublicPageLayout, PublicPageHeader } from '@jmruthers/pace-core/components/PublicLayout';
  * 
  * // Or import from main package
- * import { PublicPageLayout, PublicPageHeader, EventLogo } from '@jmruthers/pace-core';
+ * import { PublicPageLayout, PublicPageHeader } from '@jmruthers/pace-core';
  */
 
 // === MAIN LAYOUT COMPONENTS ===
@@ -25,8 +25,6 @@ export { PublicPageDebugger } from './PublicPageDebugger';
 export { PublicPageDiagnostic } from './PublicPageDiagnostic';
 export { PublicPageContextChecker } from './PublicPageContextChecker';
 
-// === LOGO COMPONENTS ===
-export { EventLogo, EventLogoCompact, EventLogoLarge } from './EventLogo';
 
 // === ERROR HANDLING COMPONENTS ===
 export { 
@@ -46,6 +44,5 @@ export {
 export type { PublicPageLayoutProps } from './PublicPageLayout';
 export type { PublicPageHeaderProps } from './PublicPageHeader';
 export type { PublicPageFooterProps } from './PublicPageFooter';
-export type { EventLogoProps } from './EventLogo';
 export type { PublicErrorBoundaryProps, PublicErrorBoundaryState } from './PublicErrorBoundary';
 export type { PublicLoadingSpinnerProps } from './PublicLoadingSpinner';

package/src/components/Toast/Toast.tsx

@@ -143,7 +143,7 @@ const Toast = React.forwardRef<
       ref={ref}
       data-testid="toast-root"
       className={cn(
-        "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+        "group pointer-events-auto  bg-background relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
         className
       )}
       {...props}

package/src/examples/PublicEventPage.tsx

@@ -35,7 +35,6 @@ import {
   PublicPageHeader, 
   PublicPageFooter,
   FileDisplay,
-  EventLogo,
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner,
@@ -234,12 +233,23 @@ export function PublicEventPageCompact() {
         
         <main className="max-w-4xl mx-auto px-4 py-6">
           <div className="text-center mb-6">
-            <EventLogo
-              eventId={event.event_id}
-              eventName={event.event_name}
-              organisationId={event.organisation_id}
-              size="xl"
-              className="mx-auto mb-4"
+            <FileDisplay
+              table_name="event"
+              record_id={event.event_id}
+              organisation_id={event.organisation_id}
+              category={FileCategory.EVENT_LOGOS}
+              displayOnly={true}
+              showFallback={true}
+              fallbackSize="xl"
+              className="h-24 w-24 mx-auto mb-4 object-contain rounded"
+              generateFallbackText={(fileName) => {
+                if (!event.event_name) return 'EV';
+                return event.event_name
+                  .split(/[\s\-_]+/)
+                  .map(word => word.charAt(0).toUpperCase())
+                  .join('')
+                  .substring(0, 3);
+              }}
             />
             <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
             {event.event_date && (

package/src/examples/PublicPageApp.tsx

@@ -39,7 +39,6 @@ import {
   PublicPageHeader, 
   PublicPageFooter,
   FileDisplay,
-  EventLogo,
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner,
@@ -251,13 +250,24 @@ function PublicEventPage() {
       
       <main className="max-w-4xl mx-auto px-4 py-6">
         <div className="text-center mb-6">
-          <EventLogo
-            eventId={event.event_id}
-            eventName={event.event_name}
-            organisationId={event.organisation_id}
-            size="xl"
-            className="mx-auto mb-4"
-          />
+            <FileDisplay
+              table_name="event"
+              record_id={event.event_id}
+              organisation_id={event.organisation_id}
+              category={FileCategory.EVENT_LOGOS}
+              displayOnly={true}
+              showFallback={true}
+              fallbackSize="xl"
+              className="h-24 w-24 mx-auto mb-4 object-contain rounded"
+              generateFallbackText={(fileName) => {
+                if (!event.event_name) return 'EV';
+                return event.event_name
+                  .split(/[\s\-_]+/)
+                  .map(word => word.charAt(0).toUpperCase())
+                  .join('')
+                  .substring(0, 3);
+              }}
+            />
           <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
           {event.event_date && (
             <p className="text-gray-600 mt-2">

package/src/hooks/useFileReference.ts

@@ -360,7 +360,16 @@ export function useFileReferenceById(
 }
 
 /**
- * Hook for getting files by category
+ * Convenience hook for getting files by category with automatic URL loading.
+ * 
+ * This hook wraps useFileReference().getFilesByCategory and automatically:
+ * - Loads file references filtered by category
+ * - Generates URLs for all files (public URLs for public files, signed URLs for private files)
+ * - Manages state for fileReferences and fileUrls
+ * - Auto-refetches when table_name, record_id, category, or organisation_id changes
+ * 
+ * Use this hook when you need files by category with their URLs ready to display.
+ * For more control, use useFileReference() directly and manage URLs yourself.
  */
 export function useFilesByCategory(
   supabase: SupabaseClient,

package/src/utils/file-reference.ts

@@ -15,6 +15,20 @@ import { setOrganisationContext } from './organisationContext';
 export class FileReferenceServiceImpl implements FileReferenceService {
   constructor(private supabase: SupabaseClient) {}
 
+  /**
+   * Creates a file reference by uploading a file to storage and linking it in the database.
+   * 
+   * Storage Flow:
+   * 1. Upload file to storage bucket first (files or public-files based on is_public flag)
+   *    - Path format: {orgId}/{category}/{timestamp-uuid-filename}
+   *    - Bucket selection: 'files' (private) or 'public-files' (public)
+   * 2. Extract file metadata (dimensions, hash, etc.)
+   * 3. Set organisation context for RLS policies
+   * 4. Create database reference via RPC function
+   * 5. If DB insert fails, rollback by deleting uploaded file
+   * 
+   * This ensures atomicity: either both storage and DB succeed, or both are cleaned up.
+   */
   async createFileReference(options: FileUploadOptions, file: File): Promise<FileReference> {
     try {
 
@@ -29,12 +43,14 @@ export class FileReferenceServiceImpl implements FileReferenceService {
         throw new Error('record_id is required for file upload');
       }
 
-      // Upload file to storage (this will generate the path internally)
+      // Step 1: Upload file to storage bucket first
+      // This generates a unique path: {orgId}/{category}/{timestamp-uuid-filename}
+      // Bucket is automatically selected based on is_public flag
       const uploadResult = await uploadFile(this.supabase, file, {
         appName: 'file-reference',
         orgId: options.organisation_id,
         isPublic: options.is_public || false,
-        customPath: options.category // Use category as the custom path
+        customPath: options.category // Use category as the custom path segment
       });
       if (!uploadResult.success) {
         throw new Error(`Failed to upload file: ${uploadResult.error}`);
@@ -46,23 +62,24 @@ export class FileReferenceServiceImpl implements FileReferenceService {
 
       const filePath = uploadResult.path;
 
-      // Extract file metadata
+      // Step 2: Extract file metadata (dimensions, hash, etc.)
       const metadata = await extractFileMetadata(file, {
         appName: 'file-reference',
         orgId: options.organisation_id,
         isPublic: options.is_public || false
       }, 'system');
 
-      // Set organisation context in database session before creating file reference
+      // Step 3: Set organisation context in database session before creating file reference
       // This ensures RLS policies can check the organisation context
       await setOrganisationContext(this.supabase, options.organisation_id);
 
-      // Create file reference in database using new RPC function name
+      // Step 4: Create file reference in database using RPC function
+      // This links the storage path to the record in file_references table
       const { data, error } = await this.supabase
         .rpc('data_file_reference_create', {
           p_table_name: options.table_name,
           p_record_id: options.record_id,
-          p_file_path: filePath,
+          p_file_path: filePath, // Storage path from step 1
           p_organisation_id: options.organisation_id,
           p_app_id: options.app_id,
           p_file_metadata: {
@@ -76,8 +93,8 @@ export class FileReferenceServiceImpl implements FileReferenceService {
           p_is_public: options.is_public || false
         });
 
+      // Step 5: Rollback - if database insert fails, clean up uploaded file
       if (error) {
-        // Clean up uploaded file if database insert fails
         await deleteFile(this.supabase, filePath, options.is_public || false);
         throw new Error(`Failed to create file reference: ${error.message}`);
       }

package/src/utils/storage/helpers.ts

@@ -46,12 +46,23 @@ export function generateFilePath(options: StorageUploadOptions, fileName: string
 
 /**
  * Generate a unique filename with timestamp and UUID
+ * Sanitizes the original filename to remove spaces and invalid characters for storage compatibility
  */
 export function generateUniqueFileName(originalName: string): string {
   const timestamp = Date.now();
   const uuid = crypto.randomUUID();
   const extension = originalName.split('.').pop() || '';
-  const baseName = originalName.replace(/\.[^/.]+$/, '');
+  let baseName = originalName.replace(/\.[^/.]+$/, '');
+  
+  // Sanitize the base name for storage compatibility
+  // Replace spaces with underscores and remove invalid characters
+  baseName = baseName
+    .trim()
+    .replace(/\s+/g, '_') // Replace spaces with underscores
+    .replace(/[<>:"/\\|?*]/g, '') // Remove invalid file name characters
+    .replace(/\.\./g, '') // Remove directory traversal attempts
+    .replace(/^\.+|\.+$/g, '') // Remove leading/trailing dots
+    .substring(0, 200); // Limit length to leave room for timestamp and UUID
   
   // If there's no extension, don't add one
   if (!extension || extension === originalName) {