@jmruthers/pace-core 0.5.134 → 0.5.136

package/src/examples/PublicPageApp.tsx

@@ -1,321 +0,0 @@
-/**
- * @file Public Page App Example
- * @package @jmruthers/pace-core
- * @module Examples/PublicPages
- * @since 1.0.0
- *
- * A complete example showing how to properly implement public pages
- * that are completely isolated from the authentication context.
- *
- * This example demonstrates the correct architecture for public pages:
- * 1. Separate routing structure outside authentication context
- * 2. PublicPageProvider for environment variables
- * 3. No authentication context initialization
- * 4. Proper error handling and loading states
- *
- * @example
- * ```tsx
- * import { PublicPageApp } from '@jmruthers/pace-core/examples';
- * 
- * // In your main App.tsx, use this for public routes
- * function App() {
- *   return (
- *     <BrowserRouter>
- *       <Routes>
- *         <Route path="/public/*" element={<PublicPageApp />} />
- *         <Route path="/*" element={<AuthenticatedApp />} />
- *       </Routes>
- *     </BrowserRouter>
- *   );
- * }
- * ```
- */
-
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { 
-  PublicPageProvider,
-  PublicPageLayout, 
-  PublicPageHeader, 
-  PublicPageFooter,
-  FileDisplay,
-  usePublicEvent,
-  usePublicRouteParams,
-  PublicLoadingSpinner,
-  PublicErrorBoundary
-} from '../index';
-import { FileCategory } from '../types/file-reference';
-
-/**
- * Complete public page application that works independently
- * of the main application's authentication context.
- * 
- * This component should be used for all public routes that don't
- * require authentication, such as:
- * - Event pages: /events/:eventCode/recipe-grid-report
- * - Public reports: /reports/:reportId
- * - Public information: /info/:pageId
- */
-export function PublicPageApp() {
-  return (
-    <PublicPageProvider>
-      <Routes>
-        {/* Public event pages */}
-        <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipeGridReportPage />} />
-        <Route path="/events/:eventCode" element={<PublicEventPage />} />
-        
-        {/* Add more public routes as needed */}
-        <Route path="/info/:pageId" element={<PublicInfoPage />} />
-        <Route path="/reports/:reportId" element={<PublicReportPage />} />
-      </Routes>
-    </PublicPageProvider>
-  );
-}
-
-/**
- * Public recipe grid report page
- * 
- * This is the specific page mentioned in the bug report.
- * It demonstrates the correct usage pattern for public pages.
- */
-function PublicRecipeGridReportPage() {
-  // Step 1: Extract event code from URL (no auth context triggered)
-  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
-  
-  // Step 2: Fetch event data using the event code
-  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
-  
-  // Step 3: Handle loading state
-  if (isLoading) {
-    return (
-      <PublicLoadingSpinner 
-        message="Loading recipe grid report..."
-      />
-    );
-  }
-
-  // Step 4: Handle error state
-  if (error) {
-    return (
-      <div className="min-h-screen bg-main-50 flex items-center justify-center">
-        <div className="max-w-md mx-auto text-center px-4">
-          <div className="mb-6">
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
-              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-              </svg>
-            </div>
-            <h1 className="text-2xl font-bold text-sec-900 mb-2">
-              Recipe Grid Report Not Found
-            </h1>
-            <p className="text-sec-600 mb-6">
-              The event code "{eventCode}" is invalid or the recipe grid report is not available for public viewing.
-            </p>
-            <button
-              onClick={refetch}
-              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Step 5: Handle missing event
-  if (!event) {
-    return (
-      <div className="min-h-screen bg-main-50 flex items-center justify-center">
-        <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-sec-900 mb-4">
-            Recipe Grid Report Not Available
-          </h1>
-          <p className="text-sec-600 mb-6">
-            This recipe grid report is not available for public viewing.
-          </p>
-          <button
-            onClick={refetch}
-            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
-          >
-            Try Again
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Step 6: Render the public page with event data
-  return (
-    <PublicPageLayout eventCode={eventCode || ''} event={event}>
-      <PublicPageHeader 
-        event={event}
-        eventCode={eventCode || ''}
-        title="Recipe Grid Report"
-        description="Public recipe grid report for this event"
-      />
-      
-      <main className="max-w-6xl mx-auto px-4 py-8">
-        {/* Recipe Grid Report Content */}
-        <div className="mb-12">
-          <div className="bg-main-50 border border-main-200 rounded-lg p-6">
-            <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
-            <p className="text-main-800">
-              This is where your recipe grid report content would go. 
-              The public page is now working correctly without authentication context conflicts.
-            </p>
-            <div className="mt-4 text-sm text-main-700">
-              <p><strong>Event Code:</strong> {eventCode}</p>
-              <p><strong>Event ID:</strong> {event.event_id}</p>
-              <p><strong>Event Name:</strong> {event.event_name}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Event Information */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
-          <div className="lg:col-span-2 space-y-6">
-            <div>
-              <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
-              <div className="bg-sec-50 rounded-lg p-6 space-y-4">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <h3 className="font-semibold text-sec-700">Date</h3>
-                    <p className="text-sec-900">
-                      {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
-                        weekday: 'long',
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric'
-                      }) : 'TBA'}
-                    </p>
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-sec-700">Venue</h3>
-                    <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-sec-700">Participants</h3>
-                    <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-sec-700">Event Code</h3>
-                    <p className="text-sec-900 font-mono">{event.event_code}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Event Logo */}
-          <div className="flex justify-center lg:justify-start">
-            <div className="text-center">
-              <FileDisplay
-                table_name="event"
-                record_id={event.event_id}
-                organisation_id={event.organisation_id}
-                category={FileCategory.EVENT_LOGOS}
-                showDelete={false}
-                className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
-              />
-              <p className="mt-4 text-sm text-sec-600">Event Logo</p>
-            </div>
-          </div>
-        </div>
-      </main>
-
-      <PublicPageFooter event={event} />
-    </PublicPageLayout>
-  );
-}
-
-/**
- * Generic public event page
- */
-function PublicEventPage() {
-  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
-  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
-
-  if (isLoading) return <PublicLoadingSpinner message="Loading event..." />;
-  if (error || !event) return <div>Event not found</div>;
-
-  return (
-    <PublicPageLayout eventCode={eventCode || ''} event={event}>
-      <PublicPageHeader 
-        event={event}
-        eventCode={eventCode || ''}
-        title="Event Details"
-        description="Public information about this event"
-      />
-      
-      <main className="max-w-4xl mx-auto px-4 py-6">
-        <div className="text-center mb-6">
-            <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-sec-900">{event.event_name}</h1>
-          {event.event_date && (
-            <p className="text-sec-600 mt-2">
-              {new Date(event.event_date).toLocaleDateString('en-AU')}
-            </p>
-          )}
-        </div>
-      </main>
-
-      <PublicPageFooter event={event} />
-    </PublicPageLayout>
-  );
-}
-
-/**
- * Generic public info page
- */
-function PublicInfoPage() {
-  return (
-    <div className="min-h-screen bg-main-50 flex items-center justify-center">
-      <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-sec-900 mb-4">
-          Public Information Page
-        </h1>
-        <p className="text-sec-600">
-          This is a public information page that doesn't require authentication.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Generic public report page
- */
-function PublicReportPage() {
-  return (
-    <div className="min-h-screen bg-main-50 flex items-center justify-center">
-      <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-sec-900 mb-4">
-          Public Report Page
-        </h1>
-        <p className="text-sec-600">
-          This is a public report page that doesn't require authentication.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default PublicPageApp;

package/src/examples/PublicPageUsageExample.tsx

@@ -1,218 +0,0 @@
-/**
- * @file Public Page Usage Example
- * @package @jmruthers/pace-core
- * @module Examples/PublicPages
- * @since 1.0.0
- *
- * A complete example showing the correct usage pattern for public pages.
- * This example demonstrates how to properly implement public pages without
- * authentication context conflicts.
- *
- * @example
- * ```tsx
- * import { PublicPageUsageExample } from '@jmruthers/pace-core/examples';
- * 
- * function App() {
- *   return (
- *     <BrowserRouter>
- *       <Routes>
- *         <Route path="/events/:eventCode/recipe-grid-report" element={<PublicPageUsageExample />} />
- *       </Routes>
- *     </BrowserRouter>
- *   );
- * }
- * ```
- */
-
-import React from 'react';
-import { 
-  PublicPageLayout, 
-  PublicPageHeader, 
-  PublicPageFooter,
-  FileDisplay,
-  usePublicEvent,
-  usePublicRouteParams,
-  PublicLoadingSpinner,
-  PublicErrorBoundary
-} from '../index';
-import { FileCategory } from '../types/file-reference';
-
-/**
- * Correct usage pattern for public pages
- * 
- * This component demonstrates the proper way to implement public pages:
- * 1. Use usePublicRouteParams to get the eventCode from URL
- * 2. Use usePublicEvent to fetch event data
- * 3. Pass event data to PublicPageLayout
- * 4. No authentication context is triggered
- */
-export function PublicPageUsageExample() {
-  // Step 1: Extract event code from URL parameters
-  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
-  
-  // Step 2: Fetch event data using the event code
-  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
-
-  // Step 3: Handle loading state
-  if (isLoading) {
-    return (
-      <PublicLoadingSpinner 
-        message="Loading event details..."
-      />
-    );
-  }
-
-  // Step 4: Handle error state
-  if (error) {
-    return (
-      <div className="min-h-screen bg-main-50 flex items-center justify-center">
-        <div className="max-w-md mx-auto text-center px-4">
-          <div className="mb-6">
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
-              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-              </svg>
-            </div>
-            <h1 className="text-2xl font-bold text-sec-900 mb-2">
-              Event Not Found
-            </h1>
-            <p className="text-sec-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-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Step 5: Handle missing event
-  if (!event) {
-    return (
-      <div className="min-h-screen bg-main-50 flex items-center justify-center">
-        <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-sec-900 mb-4">
-            Event Not Available
-          </h1>
-          <p className="text-sec-600 mb-6">
-            This event is not available for public viewing.
-          </p>
-          <button
-            onClick={refetch}
-            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
-          >
-            Try Again
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Step 6: Render the public page with event data
-  return (
-    <PublicErrorBoundary>
-      <PublicPageLayout eventCode={eventCode || ''} event={event}>
-        <PublicPageHeader 
-          event={event}
-          eventCode={eventCode || ''}
-          title="Recipe Grid Report"
-          description="Public recipe grid report for this event"
-        />
-        
-        <main className="max-w-6xl mx-auto px-4 py-8">
-          {/* Event Overview */}
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
-            {/* Event Information */}
-            <div className="lg:col-span-2 space-y-6">
-              <div>
-                <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
-                <div className="bg-sec-50 rounded-lg p-6 space-y-4">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                      <h3 className="font-semibold text-sec-700">Date</h3>
-                      <p className="text-sec-900">
-                        {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
-                          weekday: 'long',
-                          year: 'numeric',
-                          month: 'long',
-                          day: 'numeric'
-                        }) : 'TBA'}
-                      </p>
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-sec-700">Venue</h3>
-                      <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-sec-700">Participants</h3>
-                      <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-sec-700">Event Code</h3>
-                      <p className="text-sec-900 font-mono">{event.event_code}</p>
-                    </div>
-                  </div>
-                  
-                  {event.event_news && (
-                    <div>
-                      <h3 className="font-semibold text-sec-700 mb-2">Event News</h3>
-                      <p className="text-sec-900">{event.event_news}</p>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Event Logo */}
-            <div className="flex justify-center lg:justify-start">
-              <div className="text-center">
-                <FileDisplay
-                  table_name="event"
-                  record_id={event.event_id}
-                  organisation_id={event.organisation_id}
-                  category={FileCategory.EVENT_LOGOS}
-                  showDelete={false}
-                  className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
-                />
-                <p className="mt-4 text-sm text-sec-600">Event Logo</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Recipe Grid Report Content */}
-          <div className="mb-12">
-            <div className="bg-main-50 border border-main-200 rounded-lg p-6">
-              <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
-              <p className="text-main-800">
-                This is where your recipe grid report content would go. 
-                The public page is now working correctly without authentication context conflicts.
-              </p>
-              <div className="mt-4 text-sm text-main-700">
-                <p><strong>Event Code:</strong> {eventCode}</p>
-                <p><strong>Event ID:</strong> {event.event_id}</p>
-                <p><strong>Event Name:</strong> {event.event_name}</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Event Footer Information */}
-          {event.event_footer && (
-            <div className="bg-sec-50 rounded-lg p-6">
-              <h3 className="font-semibold text-sec-900 mb-2">Additional Information</h3>
-              <p className="text-sec-700">{event.event_footer}</p>
-            </div>
-          )}
-        </main>
-
-        <PublicPageFooter event={event} />
-      </PublicPageLayout>
-    </PublicErrorBoundary>
-  );
-}
-
-export default PublicPageUsageExample;

package/src/utils/schemaUtils.ts

@@ -1,37 +0,0 @@
-import { z } from 'zod';
-
-/**
- * Creates a subset schema from a larger schema
- * 
- * @param schema - Original Zod schema
- * @param keys - Array of keys to pick from the schema
- * @returns New schema with only the selected fields
- */
-export function pickSchema<T extends z.ZodObject<any, any, any>, K extends keyof z.infer<T>>(
-  schema: T,
-  keys: K[]
-): z.ZodObject<any> {
-  const shape = Object.entries(schema.shape)
-    .filter(([key]) => keys.includes(key as K))
-    .reduce((acc, [key, value]) => {
-      acc[key] = value as z.ZodTypeAny;
-      return acc;
-    }, {} as Record<string, z.ZodTypeAny>);
-
-  return z.object(shape);
-}
-
-/**
- * Combines multiple Zod schemas into one
- * 
- * @param schemas - Array of Zod schemas to combine
- * @returns Combined schema
- */
-export function combineSchemas<T extends z.ZodObject<any, any, any>[]>(
-  schemas: T
-): z.ZodObject<any> {
-  return schemas.reduce(
-    (merged, schema) => merged.merge(schema),
-    z.object({})
-  );
-} 

package/src/validation/__tests__/common.unit.test.ts

@@ -1,101 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { 
-  emailSchema, 
-  nameSchema, 
-  phoneSchema, 
-  urlSchema, 
-  dateSchema 
-} from '../common';
-
-describe('Common Validation Schemas', () => {
-  describe('emailSchema', () => {
-    it('should validate correct email addresses', () => {
-      expect(emailSchema.safeParse('test@example.com').success).toBe(true);
-      expect(emailSchema.safeParse('user.name+tag@domain.co.uk').success).toBe(true);
-      expect(emailSchema.safeParse('123@domain.org').success).toBe(true);
-    });
-
-    it('should reject invalid email addresses', () => {
-      expect(emailSchema.safeParse('invalid-email').success).toBe(false);
-      expect(emailSchema.safeParse('@domain.com').success).toBe(false);
-      expect(emailSchema.safeParse('user@').success).toBe(false);
-      expect(emailSchema.safeParse('').success).toBe(false);
-    });
-
-    it('should reject emails that are too long', () => {
-      const longEmail = 'a'.repeat(255) + '@example.com';
-      expect(emailSchema.safeParse(longEmail).success).toBe(false);
-    });
-  });
-
-  describe('nameSchema', () => {
-    it('should validate correct names', () => {
-      expect(nameSchema.safeParse('John Doe').success).toBe(true);
-      expect(nameSchema.safeParse('Mary-Jane').success).toBe(true);
-      expect(nameSchema.safeParse("O'Connor").success).toBe(true);
-    });
-
-    it('should reject invalid names', () => {
-      expect(nameSchema.safeParse('').success).toBe(false);
-      expect(nameSchema.safeParse('John123').success).toBe(false);
-      expect(nameSchema.safeParse('John@Doe').success).toBe(false);
-    });
-
-    it('should reject names that are too long', () => {
-      const longName = 'A'.repeat(101);
-      expect(nameSchema.safeParse(longName).success).toBe(false);
-    });
-  });
-
-  describe('phoneSchema', () => {
-    it('should validate correct phone numbers', () => {
-      expect(phoneSchema.safeParse('+1-555-123-4567').success).toBe(true);
-      expect(phoneSchema.safeParse('555-123-4567').success).toBe(true);
-      expect(phoneSchema.safeParse('(555) 123-4567').success).toBe(true);
-    });
-
-    it('should reject invalid phone numbers', () => {
-      expect(phoneSchema.safeParse('123').success).toBe(false);
-      expect(phoneSchema.safeParse('not-a-number').success).toBe(false);
-      expect(phoneSchema.safeParse('').success).toBe(false);
-    });
-
-    it('should reject phone numbers that are too short or long', () => {
-      expect(phoneSchema.safeParse('123').success).toBe(false);
-      expect(phoneSchema.safeParse('1'.repeat(21)).success).toBe(false);
-    });
-  });
-
-  describe('urlSchema', () => {
-    it('should validate correct URLs', () => {
-      expect(urlSchema.safeParse('https://example.com').success).toBe(true);
-      expect(urlSchema.safeParse('http://sub.domain.co.uk/path').success).toBe(true);
-      expect(urlSchema.safeParse('https://example.com?param=value').success).toBe(true);
-    });
-
-    it('should reject invalid URLs', () => {
-      expect(urlSchema.safeParse('not-a-url').success).toBe(false);
-      expect(urlSchema.safeParse('').success).toBe(false);
-    });
-
-    it('should reject URLs that are too long', () => {
-      const longUrl = 'https://example.com/' + 'a'.repeat(2048);
-      expect(urlSchema.safeParse(longUrl).success).toBe(false);
-    });
-  });
-
-  describe('dateSchema', () => {
-    it('should validate correct dates', () => {
-      expect(dateSchema.safeParse('2023-12-25').success).toBe(true);
-      expect(dateSchema.safeParse('2023-01-01').success).toBe(true);
-    });
-
-    it('should reject invalid dates', () => {
-      expect(dateSchema.safeParse('invalid-date').success).toBe(false);
-      expect(dateSchema.safeParse('2023/12/25').success).toBe(false);
-      expect(dateSchema.safeParse('12/25/2023').success).toBe(false);
-      expect(dateSchema.safeParse('2023-13-45').success).toBe(false);
-      expect(dateSchema.safeParse('').success).toBe(false);
-    });
-  });
-});