@jmruthers/pace-core 0.5.86 → 0.5.88

package/src/components/examples/PermissionExample.tsx

@@ -1,173 +0,0 @@
-/**
- * @file Permission System Example
- * @package @jmruthers/pace-core
- * @module Components/Examples
- * @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 '../../providers/UnifiedAuthProvider';
-import { useAppConfig } from '../../hooks/useAppConfig';
-import { usePermissions, useAccessLevel } from '../../rbac/hooks';
-import { AccessLevel } from '../../types/unified';
-
-export function PermissionExample() {
-  const { 
-    user, 
-    isAuthenticated,
-    selectedEvent,
-    selectedOrganisation
-  } = useUnifiedAuth();
-  
-  const { hasPermission } = usePermissions(user?.id || '', { 
-    organisationId: selectedOrganisation?.id || '', 
-    appId: undefined 
-  });
-  const { accessLevel } = useAccessLevel(user?.id || '', { 
-    organisationId: selectedOrganisation?.id || '', 
-    appId: undefined 
-  });
-  
-  // Helper function to check if user has required access level
-  const hasAccessLevel = (requiredLevel: AccessLevel): boolean => {
-    const levelOrder = {
-      [AccessLevel.NONE]: 0,
-      [AccessLevel.VIEWER]: 1,
-      [AccessLevel.PARTICIPANT]: 2,
-      [AccessLevel.EDITOR]: 3,
-      [AccessLevel.PLANNER]: 4,
-      [AccessLevel.ADMIN]: 5,
-      [AccessLevel.SUPER_ADMIN]: 6,
-      [AccessLevel.SUPER]: 7
-    };
-    
-    return levelOrder[accessLevel] >= levelOrder[requiredLevel];
-  };
-  
-  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: {selectedEvent?.event_id || 'None'}</div>
-            <div className="space-x-2">
-              <button 
-                onClick={() => {/* Event selection logic would go here */}}
-                className="px-3 py-1 bg-main-500 text-main-50 rounded"
-              >
-                Select Event 123
-              </button>
-              <button 
-                onClick={() => {/* Clear event logic would go here */}}
-                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('read:app') ? '✅' : '❌'}</div>
-              <div>Can Write: {hasPermission('create:app') ? '✅' : '❌'}</div>
-              <div>Can Delete: {hasPermission('delete:app') ? '✅' : '❌'}</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('read:app') && (
-              <div className="p-2 bg-main-100 text-main-800 rounded">
-                ✅ You can see this because you have read permission
-              </div>
-            )}
-            
-            {hasPermission('create:app') && (
-              <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('delete:app') && (
-              <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: {selectedEvent?.event_id || 'Direct Access'}</div>
-            <div>
-              Permission Model: {
-                selectedEvent?.event_id ? 'Event-based' : 
-                supportsDirectAccess ? 'Direct Access' : 
-                'No Access (requires event)'
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}