@jmruthers/pace-core 0.5.120 → 0.5.123

package/src/hooks/useEventTheme.ts

@@ -7,84 +7,113 @@
  * Hook that automatically applies event-specific theming when an event is selected.
  * This ensures consistent UX across all apps in the pace suite.
  * 
+ * Works in two modes:
+ * 1. Authenticated mode: Uses EventProvider context via useEvents() hook
+ * 2. Public page mode: Accepts event prop directly (no EventProvider required)
+ * 
  * @example
  * ```tsx
+ * // Authenticated pages (with EventProvider)
  * import { useEventTheme } from '@jmruthers/pace-core/hooks';
  * 
  * function MyApp() {
- *   // Automatically applies event colors when event is selected
+ *   // Automatically applies event colors when event is selected via EventProvider
  *   useEventTheme();
  *   
  *   return <div>Your app content</div>;
  * }
  * ```
+ * 
+ * @example
+ * ```tsx
+ * // Public pages (without EventProvider)
+ * import { useEventTheme } from '@jmruthers/pace-core/hooks';
+ * 
+ * function PublicPageLayout({ event }) {
+ *   // Applies event colors directly from event prop
+ *   useEventTheme(event);
+ *   
+ *   return <div>Public page content</div>;
+ * }
+ * ```
  */
 
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useEvents } from './useEvents';
 import { applyPalette, clearPalette } from '../theming/runtime';
-import type { PaletteData, ColorPalette } from '../theming/runtime';
-
-/**
- * Parse and normalize event_colours to PaletteData (supports ev-* keys and string JSON)
- * This matches the logic in EventService.parseAndNormalizeEventColours()
- */
-function parseAndNormalizeEventColours(input: unknown): { main: any; sec: any; acc: any } | null {
-  try {
-    if (!input) return null;
-    let obj: any = input;
-    if (typeof input === 'string') {
-      try {
-        obj = JSON.parse(input);
-      } catch {
-        return null;
-      }
-    } else if (typeof input !== 'object') {
-      return null;
-    }
-
-    const pick = (o: any, pref: string, plain: string) => (o?.[pref] ?? o?.[plain]) || null;
-    const main = pick(obj, 'ev-main', 'main');
-    const sec  = pick(obj, 'ev-sec',  'sec');
-    const acc  = pick(obj, 'ev-acc',  'acc');
-    if (!main && !sec && !acc) return null;
-
-    // Fill helper: return palette as-is, only return empty object if null/undefined/empty
-    const fill = (p: any) => {
-      if (!p) return {};
-      // If object is empty or has no actual color values, return empty object
-      const keys = Object.keys(p);
-      if (keys.length === 0) return {};
-      // Check if any values are truthy (not null/undefined)
-      const hasValues = keys.some(k => p[k] != null);
-      if (!hasValues) return {};
-      // Return the object as-is (don't fill missing shades)
-      return p;
-    };
-
-    return { main: fill(main), sec: fill(sec), acc: fill(acc) };
-  } catch (error) {
-    console.warn('[useEventTheme] Failed to parse/normalize event colours:', error);
-    return null;
-  }
-}
+import { parseAndNormalizeEventColours } from '../theming/parseEventColours';
+import type { Event } from '../types/unified';
 
 /**
  * Hook that automatically applies event-specific theming
  * 
- * This hook watches the selected event and applies its colors using the theming system.
- * It will:
- * - Apply event colors when an event with `event_colours` is selected
- * - Clear theming when no event is selected
- * - Skip theme application when on the login route to prevent login screen styling
- * - Handle cleanup when the component unmounts
+ * This hook applies event colors using the theming system. It works in two modes:
+ * 
+ * **Authenticated Mode (default):**
+ * - Uses EventProvider context via useEvents() hook
+ * - Automatically watches selectedEvent changes
+ * - Used in authenticated pages with EventProvider
+ * 
+ * **Public Page Mode:**
+ * - Accepts event prop directly
+ * - No EventProvider required
+ * - Used in public pages without authentication context
+ * 
+ * Behavior:
+ * - Applies event colors when an event with `event_colours` is provided
+ * - Clears theming when no event is provided
+ * - Skips theme application when on the login route to prevent login screen styling
+ * - Handles cleanup and error cases gracefully
+ * 
+ * @param event - Optional event object. If provided, uses this event directly (public page mode).
+ *                If not provided, uses EventProvider context via useEvents() (authenticated mode).
  * 
  * @returns void - This is an effect hook with no return value
+ * 
+ * @example
+ * ```tsx
+ * // Authenticated mode - uses EventProvider
+ * function MyApp() {
+ *   useEventTheme(); // Watches selectedEvent from EventProvider
+ *   return <div>App content</div>;
+ * }
+ * ```
+ * 
+ * @example
+ * ```tsx
+ * // Public page mode - uses event prop
+ * function PublicPageLayout({ event }) {
+ *   useEventTheme(event); // Uses event prop directly
+ *   return <div>Public content</div>;
+ * }
+ * ```
  */
-export function useEventTheme(): void {
-  const { selectedEvent } = useEvents();
+export function useEventTheme(event?: Event | null): void {
   const location = useLocation();
+  
+  // Try to get event from EventProvider context (authenticated mode)
+  // Only use useEvents() if event prop is not provided
+  let selectedEvent: Event | null | undefined;
+  try {
+    if (event === undefined) {
+      // No event prop provided, try to use EventProvider context
+      const eventsContext = useEvents();
+      selectedEvent = eventsContext.selectedEvent;
+    } else {
+      // Event prop provided, use it directly (public page mode)
+      selectedEvent = event;
+    }
+  } catch (error) {
+    // useEvents() throws if EventProvider is not available
+    // This is expected for public pages - use the event prop if provided
+    if (event !== undefined) {
+      selectedEvent = event;
+    } else {
+      // No event prop and no EventProvider - can't apply theme
+      selectedEvent = null;
+    }
+  }
 
   useEffect(() => {
     // Skip theme application when on login route
@@ -106,7 +135,7 @@ export function useEventTheme(): void {
     // Check if the event has theme colors
     const eventColours = selectedEvent.event_colours;
 
-    // Parse and normalize event_colours (same logic as EventService)
+    // Parse and normalize event_colours using shared utility
     const normalized = parseAndNormalizeEventColours(eventColours);
     
     if (!normalized) {

package/src/index.ts

@@ -241,8 +241,10 @@ export {
   TableRow,
 } from './components/Table/Table';
 
-// STYLES
+// STYLES & THEMING
 export * from './styles';
+// Direct export of theming utilities for convenience
+export { parseAndNormalizeEventColours } from './theming/parseEventColours';
 
 // PUBLIC PAGES
 export * from './hooks/public';