@jmruthers/pace-core 0.5.136 → 0.5.139

package/examples/RBAC/PermissionExample.tsx

@@ -0,0 +1,151 @@
+/**
+ * @file Permission System Example
+ * @package @jmruthers/pace-core
+ * @module Examples/RBAC/PermissionExample
+ * @since 0.4.0
+ *
+ * Example component demonstrating the hybrid permission system
+ * that supports both direct app access and event-based permissions.
+ */
+
+import React from 'react';
+import { useUnifiedAuth } from '../../src/providers';
+import { useAppConfig } from '../../src/hooks';
+import { AccessLevel } from '../../src/types';
+
+export function PermissionExample() {
+  const { 
+    user, 
+    isAuthenticated, 
+    hasPermission, 
+    hasAccessLevel, 
+    accessLevel,
+    selectedEventId,
+    setSelectedEventId 
+  } = useUnifiedAuth();
+  
+  const { supportsDirectAccess, requiresEvent, isLoading, appName } = useAppConfig();
+
+  if (!isAuthenticated) {
+    return <div>Please log in to see permissions</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading app configuration...</div>;
+  }
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h2>Permission System Example</h2>
+      
+      {/* App Configuration Info */}
+      <div className="mb-6 p-4 bg-sec-100 rounded-lg">
+        <h3>App Configuration: {appName}</h3>
+        <div className="space-y-1">
+          <div>Supports Direct Access: {supportsDirectAccess ? '✅' : '❌'}</div>
+          <div>Requires Event: {requiresEvent ? '✅' : '❌'}</div>
+          <div>Current Access Level: {accessLevel}</div>
+        </div>
+      </div>
+
+      {/* Event Selection */}
+      {requiresEvent && (
+        <div className="mb-6 p-4 border rounded-lg">
+          <h3>Event Context</h3>
+          <div className="space-y-2">
+            <div>Selected Event: {selectedEventId || 'None'}</div>
+            <div className="space-x-2">
+              <button 
+                onClick={() => setSelectedEventId('event-123')}
+                className="px-3 py-1 bg-main-500 text-main-50 rounded"
+              >
+                Select Event 123
+              </button>
+              <button 
+                onClick={() => setSelectedEventId(null)}
+                className="px-3 py-1 bg-sec-500 text-main-50 rounded"
+              >
+                Clear Event
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Permission Examples */}
+      <div className="space-y-4">
+        <h3>Permission Examples</h3>
+        
+        <div className="grid gap-4 md:grid-cols-2">
+          {/* Basic Permissions */}
+          <div className="p-4 border rounded-lg">
+            <h4>Basic Permissions</h4>
+            <div className="space-y-1 text-sm">
+              <div>Can Read: {hasPermission('app:read') ? '✅' : '❌'}</div>
+              <div>Can Write: {hasPermission('app:write') ? '✅' : '❌'}</div>
+              <div>Can Delete: {hasPermission('app:delete') ? '✅' : '❌'}</div>
+            </div>
+          </div>
+
+          {/* Access Level Checks */}
+          <div className="p-4 border rounded-lg">
+            <h4>Access Level Checks</h4>
+            <div className="space-y-1 text-sm">
+              <div>Is Editor+: {hasAccessLevel(AccessLevel.EDITOR) ? '✅' : '❌'}</div>
+              <div>Is Planner+: {hasAccessLevel(AccessLevel.PLANNER) ? '✅' : '❌'}</div>
+              <div>Is Admin: {hasAccessLevel(AccessLevel.ADMIN) ? '✅' : '❌'}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Conditional Rendering Examples */}
+        <div className="p-4 border rounded-lg">
+          <h4>Conditional UI Elements</h4>
+          <div className="space-y-2">
+            {hasPermission('app:read') && (
+              <div className="p-2 bg-main-100 text-main-800 rounded">
+                ✅ You can see this because you have read permission
+              </div>
+            )}
+            
+            {hasPermission('app:write') && (
+              <button className="px-4 py-2 bg-main-500 text-main-50 rounded">
+                Edit (Available with write permission)
+              </button>
+            )}
+            
+            {hasAccessLevel(AccessLevel.ADMIN) && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                🔒 Admin-only content visible
+              </div>
+            )}
+            
+            {!hasPermission('app:delete') && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                ⚠️ Delete functionality not available for your access level
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Status Summary */}
+        <div className="p-4 bg-main-50 rounded-lg">
+          <h4>Current Status</h4>
+          <div className="text-sm space-y-1">
+            <div>User: {user?.email}</div>
+            <div>App: {appName}</div>
+            <div>Event: {selectedEventId || 'Direct Access'}</div>
+            <div>
+              Permission Model: {
+                selectedEventId ? 'Event-based' : 
+                supportsDirectAccess ? 'Direct Access' : 
+                'No Access (requires event)'
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/examples/RBAC/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @file RBAC Examples
+ * @package @jmruthers/pace-core
+ * @module Examples/RBAC
+ * @since 2.0.0
+ *
+ * RBAC and permission-related examples
+ */
+
+export { EventBasedApp } from './EventBasedApp';
+export { CompleteRBACExample } from './CompleteRBACExample';
+export { PermissionExample } from './PermissionExample';
+

package/examples/public-pages/CorrectPublicPageImplementation.tsx

@@ -0,0 +1,301 @@
+/**
+ * @file Correct Public Page Implementation
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * This example shows the CORRECT way to implement public pages
+ * that are completely isolated from the authentication context.
+ *
+ * CRITICAL: Public pages MUST be completely separate from the main app's
+ * authentication context. They cannot be rendered inside the same component
+ * tree as UnifiedAuthProvider, OrganisationProvider, or EventProvider.
+ */
+
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { 
+  PublicPageProvider,
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter,
+  EventLogo,
+  usePublicEvent,
+  usePublicRouteParams,
+  PublicLoadingSpinner
+} from '../../src';
+
+/**
+ * MAIN APPLICATION - This is your main app with authentication
+ * 
+ * This should be completely separate from public pages.
+ * All authenticated routes go here.
+ */
+function MainApp() {
+  return (
+    <div>
+      <h1>Main Application (Requires Authentication)</h1>
+      <p>This is your main app with all the authenticated features.</p>
+      {/* Your main app content here */}
+    </div>
+  );
+}
+
+/**
+ * PUBLIC PAGE APPLICATION - This is completely separate
+ * 
+ * This handles ALL public pages and is completely isolated
+ * from the main application's authentication context.
+ */
+function PublicPageApp() {
+  return (
+    <PublicPageProvider>
+      <Routes>
+        {/* All public routes go here */}
+        <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipeGridReportPage />} />
+        <Route path="/events/:eventCode" element={<PublicEventPage />} />
+        <Route path="/public-info/:pageId" element={<PublicInfoPage />} />
+      </Routes>
+    </PublicPageProvider>
+  );
+}
+
+/**
+ * ROOT APPLICATION - This decides which app to render
+ * 
+ * This is the key: public pages and authenticated pages
+ * are completely separate applications.
+ */
+function RootApp() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Public routes - NO authentication context */}
+        <Route path="/events/*" element={<PublicPageApp />} />
+        <Route path="/public-info/*" element={<PublicPageApp />} />
+        
+        {/* Authenticated routes - WITH authentication context */}
+        <Route path="/*" element={<MainApp />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+/**
+ * Public Recipe Grid Report Page
+ * 
+ * This demonstrates the correct usage pattern.
+ * Notice: NO authentication context is triggered.
+ */
+function PublicRecipeGridReportPage() {
+  // Step 1: Extract event code from URL
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  
+  // Step 2: Fetch event data
+  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
+  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">
+              <EventLogo
+                eventId={event.event_id}
+                eventName={event.event_name}
+                organisationId={event.organisation_id}
+                size="2xl"
+                className="rounded-lg shadow-lg"
+              />
+              <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) return <div>Error: {error.message}</div>;
+  if (!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">
+          <EventLogo
+            eventId={event.event_id}
+            eventName={event.event_name}
+            organisationId={event.organisation_id}
+            size="xl"
+            className="mx-auto mb-4"
+          />
+          <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>
+  );
+}
+
+export default RootApp;