@jmruthers/pace-core 0.5.181 → 0.5.182

package/examples/features/rbac/CompleteRBACExample.tsx

@@ -1,324 +0,0 @@
-/**
- * @file Complete RBAC Example
- * @package @jmruthers/pace-core
- * @module Examples/RBAC/CompleteRBACExample
- * @since 2.0.0
- *
- * A comprehensive example showing how to use the new centralized RBAC system
- * with all Phase 1 and Phase 2 components.
- *
- * This example demonstrates:
- * - Page-level permission enforcement
- * - Data access control
- * - Permission enforcement
- * - Role-based routing
- * - Navigation control
- * - Strict mode enforcement
- * - Audit logging
- */
-
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { 
-  PagePermissionProvider,
-  PagePermissionGuard,
-  SecureDataProvider,
-  PermissionEnforcer,
-  RoleBasedRouter,
-  NavigationProvider,
-  NavigationGuard,
-  EnhancedNavigationMenu,
-  type NavigationItem,
-  type RouteConfig
-} from '../../src/rbac/components';
-
-// Example navigation items
-const navigationItems: NavigationItem[] = [
-  {
-    id: 'dashboard',
-    label: 'Dashboard',
-    path: '/dashboard',
-    permissions: ['read:page.dashboard'],
-    meta: { icon: '🏠', description: 'Main dashboard' }
-  },
-  {
-    id: 'events',
-    label: 'Events',
-    path: '/events',
-    permissions: ['read:page.events'],
-    meta: { icon: '📅', description: 'Event management' }
-  },
-  {
-    id: 'admin',
-    label: 'Admin',
-    path: '/admin',
-    permissions: ['read:page.admin', 'create:page.admin', 'update:page.admin', 'delete:page.admin'],
-    roles: ['admin'],
-    accessLevel: 'admin',
-    meta: { icon: '⚙️', description: 'Administration' }
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    path: '/settings',
-    permissions: ['update:page.settings'],
-    meta: { icon: '🔧', description: 'Application settings' }
-  }
-];
-
-// Example route configuration
-const routeConfig: RouteConfig[] = [
-  {
-    path: '/dashboard',
-    component: DashboardPage,
-    permissions: ['read:page.dashboard'],
-    meta: { title: 'Dashboard', requiresAuth: true }
-  },
-  {
-    path: '/events',
-    component: EventsPage,
-    permissions: ['read:page.events'],
-    meta: { title: 'Events', requiresAuth: true }
-  },
-  {
-    path: '/admin',
-    component: AdminPage,
-    permissions: ['read:page.admin', 'create:page.admin', 'update:page.admin', 'delete:page.admin'],
-    roles: ['admin'],
-    accessLevel: 'admin',
-    strictMode: true,
-    meta: { title: 'Admin', requiresAuth: true, hidden: true }
-  },
-  {
-    path: '/settings',
-    component: SettingsPage,
-    permissions: ['update:page.settings'],
-    meta: { title: 'Settings', requiresAuth: true }
-  }
-];
-
-// Example page components
-function DashboardPage() {
-  return (
-    <PagePermissionGuard
-      pageName="dashboard"
-      operation="read"
-      fallback={<AccessDeniedPage />}
-    >
-      <div className="p-6">
-        <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
-        <p>Welcome to your dashboard!</p>
-        
-        {/* Example of permission enforcement within a page */}
-        <PermissionEnforcer
-          permissions={['read:data.events']}
-          operation="view-events"
-          fallback={<div>You don't have permission to view events</div>}
-        >
-          <EventsList />
-        </PermissionEnforcer>
-      </div>
-    </PagePermissionGuard>
-  );
-}
-
-function EventsPage() {
-  return (
-    <PagePermissionGuard
-      pageName="events"
-      operation="read"
-      fallback={<AccessDeniedPage />}
-    >
-      <div className="p-6">
-        <h1 className="text-2xl font-bold mb-4">Events</h1>
-        <EventsList />
-      </div>
-    </PagePermissionGuard>
-  );
-}
-
-function AdminPage() {
-  return (
-    <PagePermissionGuard
-      pageName="admin"
-      operation="read"
-      strictMode={true}
-      fallback={<AccessDeniedPage />}
-    >
-      <div className="p-6">
-        <h1 className="text-2xl font-bold mb-4">Admin Panel</h1>
-        <p>Administrative functions</p>
-        
-        {/* Example of multiple permission enforcement */}
-        <PermissionEnforcer
-          permissions={['read:data.users', 'create:data.users', 'update:data.users', 'delete:data.users', 'read:data.organisations', 'create:data.organisations', 'update:data.organisations', 'delete:data.organisations']}
-          operation="user-management"
-          requireAll={true}
-          fallback={<div>You need both user and organisation management permissions</div>}
-        >
-          <UserManagementPanel />
-        </PermissionEnforcer>
-      </div>
-    </PagePermissionGuard>
-  );
-}
-
-function SettingsPage() {
-  return (
-    <PagePermissionGuard
-      pageName="settings"
-      operation="read"
-      fallback={<AccessDeniedPage />}
-    >
-      <div className="p-6">
-        <h1 className="text-2xl font-bold mb-4">Settings</h1>
-        <p>Application settings</p>
-      </div>
-    </PagePermissionGuard>
-  );
-}
-
-function EventsList() {
-  return (
-    <div className="bg-main-50 p-4 rounded-lg shadow">
-      <h2 className="text-lg font-semibold mb-2">Events</h2>
-      <p>List of events would go here...</p>
-    </div>
-  );
-}
-
-function UserManagementPanel() {
-  return (
-    <div className="bg-main-50 p-4 rounded-lg shadow">
-      <h2 className="text-lg font-semibold mb-2">User Management</h2>
-      <p>User management functions would go here...</p>
-    </div>
-  );
-}
-
-function AccessDeniedPage() {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-8 text-center">
-      <div className="mb-4">
-        <svg className="w-16 h-16 text-acc-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <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>
-      <h2 className="text-xl font-semibold text-sec-900 mb-2">Access Denied</h2>
-      <p className="text-sec-600 mb-4">You don't have permission to access this page.</p>
-      <button 
-        onClick={() => window.history.back()}
-        className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
-      >
-        Go Back
-      </button>
-    </div>
-  );
-}
-
-function AppLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-screen bg-sec-50">
-      <header className="bg-main-50 shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-xl font-semibold">PACE Core RBAC Example</h1>
-            </div>
-            
-            {/* Enhanced Navigation Menu */}
-            <EnhancedNavigationMenu
-              items={navigationItems}
-              strictMode={true}
-              auditLog={true}
-              className="flex space-x-4"
-              itemClassName="px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-sec-100"
-              activeItemClassName="bg-main-100 text-main-700"
-              onNavigationAccess={(item, allowed) => {
-                console.log(`Navigation access: ${item.id} - ${allowed ? 'allowed' : 'denied'}`);
-              }}
-            />
-          </div>
-        </div>
-      </header>
-      
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        {children}
-      </main>
-    </div>
-  );
-}
-
-/**
- * Complete RBAC Example Application
- * 
- * This example shows how to use all the new RBAC components together
- * to create a secure, centralized permission system.
- */
-export function CompleteRBACExample() {
-  return (
-    <Router>
-      {/* Phase 1: Core Security Enforcement */}
-      <PagePermissionProvider
-        strictMode={true}
-        auditLog={true}
-        onPageAccess={(pageName, operation, allowed) => {
-          console.log(`Page access: ${pageName} ${operation} - ${allowed ? 'allowed' : 'denied'}`);
-        }}
-        onStrictModeViolation={(pageName, operation) => {
-          console.error(`Strict mode violation: ${pageName} ${operation}`);
-        }}
-      >
-        <SecureDataProvider
-          strictMode={true}
-          auditLog={true}
-          onDataAccess={(table, operation, allowed) => {
-            console.log(`Data access: ${table} ${operation} - ${allowed ? 'allowed' : 'denied'}`);
-          }}
-          onStrictModeViolation={(table, operation) => {
-            console.error(`Data access violation: ${table} ${operation}`);
-          }}
-        >
-          {/* Phase 2: Routing and Navigation */}
-          <NavigationProvider
-            strictMode={true}
-            auditLog={true}
-            onNavigationAccess={(item, allowed) => {
-              console.log(`Navigation access: ${item.id} - ${allowed ? 'allowed' : 'denied'}`);
-            }}
-            onStrictModeViolation={(item) => {
-              console.error(`Navigation violation: ${item.id}`);
-            }}
-          >
-            <RoleBasedRouter
-              routes={routeConfig}
-              fallbackRoute="/unauthorized"
-              strictMode={true}
-              auditLog={true}
-              onRouteAccess={(route, allowed) => {
-                console.log(`Route access: ${route} - ${allowed ? 'allowed' : 'denied'}`);
-              }}
-              onStrictModeViolation={(route) => {
-                console.error(`Route violation: ${route}`);
-              }}
-            >
-              <AppLayout>
-                <Routes>
-                  <Route path="/" element={<Navigate to="/dashboard" replace />} />
-                  <Route path="/dashboard" element={<DashboardPage />} />
-                  <Route path="/events" element={<EventsPage />} />
-                  <Route path="/admin" element={<AdminPage />} />
-                  <Route path="/settings" element={<SettingsPage />} />
-                  <Route path="/unauthorized" element={<AccessDeniedPage />} />
-                </Routes>
-              </AppLayout>
-            </RoleBasedRouter>
-          </NavigationProvider>
-        </SecureDataProvider>
-      </PagePermissionProvider>
-    </Router>
-  );
-}
-
-export default CompleteRBACExample;
-

package/examples/features/rbac/index.ts

@@ -1,13 +0,0 @@
-/**
- * @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

@@ -1,301 +0,0 @@
-/**
- * @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;