@jmruthers/pace-core 0.2.6 → 0.4.1

package/src/components/RBAC/PagePermissionGuard.tsx

@@ -1,287 +0,0 @@
-/**
- * @file Page Permission Guard Component
- * @package @jmruthers/pace-core
- * @module Components/RBAC
- * @since 0.3.0
- *
- * A unified component for page-level permission checks that provides:
- * - Single source of truth for page permissions
- * - Intelligent caching and performance optimization
- * - Consistent permission checking across all pages
- * - Type-safe permission management
- * - Centralized logging and debugging
- *
- * @example
- * ```tsx
- * import { PagePermissionGuard } from '@jmruthers/pace-core';
- * 
- * function MealsPage() {
- *   return (
- *     <PagePermissionGuard pageId="meals">
- *       {(permissions) => (
- *         <div>
- *           {permissions.canRead && <MealsList />}
- *           {permissions.canCreate && <AddMealButton />}
- *           {permissions.canUpdate && <MealEditButtons />}
- *           {permissions.canDelete && <MealDeleteButtons />}
- *         </div>
- *       )}
- *     </PagePermissionGuard>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - Supports screen reader friendly conditional content
- * - Maintains focus management in conditional renders
- * - Provides accessible fallback content
- *
- * @security
- * - Centralized permission validation
- * - Database-backed permission checks
- * - Organisation context enforcement
- *
- * @performance
- * - Intelligent caching with TTL
- * - Batch permission loading
- * - Minimal re-renders
- * - Memory-efficient storage
- *
- * @dependencies
- * - React 18+ - Components and hooks
- * - usePermissionCache hook - Permission caching
- * - RBAC types - Type definitions
- */
-
-import React, { useState, useEffect, useMemo } from 'react';
-import { usePermissionCache } from '../../hooks/usePermissionCache';
-import type { Operation } from '../../rbac/types';
-
-// Page permissions interface
-interface PagePermissions {
-  canRead: boolean;
-  canCreate: boolean;
-  canUpdate: boolean;
-  canDelete: boolean;
-  isLoading: boolean;
-  error: Error | null;
-  debugInfo?: {
-    cacheHits: number;
-    cacheMisses: number;
-    averageResponseTime: number;
-  };
-}
-
-// Component props
-interface PagePermissionGuardProps {
-  pageId: string;
-  children: (permissions: PagePermissions) => React.ReactNode;
-  fallback?: React.ReactNode;
-  enableDebug?: boolean;
-  cacheTTL?: number;
-}
-
-// Standard page IDs for consistency
-export const PAGE_IDS = {
-  // Core pages
-  DASHBOARD: 'dashboard',
-  ANALYTICS: 'analytics',
-  SETTINGS: 'settings',
-  
-  // User management
-  USER_MANAGEMENT: 'user-management',
-  USER_ROLES: 'user-roles',
-  USER_PROFILES: 'user-profiles',
-  
-  // Event management
-  EVENT_MANAGEMENT: 'event-management',
-  EVENT_SETTINGS: 'event-settings',
-  EVENT_PLANNING: 'event-planning',
-  
-  // Content management
-  MEALS: 'meals',
-  DISHES: 'dishes',
-  MENUS: 'menus',
-  INGREDIENTS: 'ingredients',
-  
-  // Administrative
-  ORGANISATION_SETTINGS: 'organisation-settings',
-  SYSTEM_ADMIN: 'system-admin',
-  AUDIT_LOGS: 'audit-logs',
-  
-  // Custom pages (apps can extend)
-  CUSTOM: 'custom'
-} as const;
-
-export type PageId = typeof PAGE_IDS[keyof typeof PAGE_IDS] | string;
-
-export function PagePermissionGuard({ 
-  pageId, 
-  children, 
-  fallback = null,
-  enableDebug = false,
-  cacheTTL
-}: PagePermissionGuardProps) {
-  const { 
-    checkMultiplePermissions, 
-    getDebugInfo 
-  } = usePermissionCache({
-    enableLogging: enableDebug,
-    enableAuditTrail: true
-  });
-
-  // State
-  const [permissions, setPermissions] = useState<PagePermissions>({
-    canRead: false,
-    canCreate: false,
-    canUpdate: false,
-    canDelete: false,
-    isLoading: true,
-    error: null
-  });
-
-  // Load permissions for the page
-  useEffect(() => {
-    let isMounted = true;
-
-    const loadPermissions = async () => {
-      try {
-        if (!isMounted) return;
-        
-        setPermissions(prev => ({ ...prev, isLoading: true, error: null }));
-
-        const permissionChecks: Array<[Operation, string]> = [
-          ['read', pageId],
-          ['create', pageId],
-          ['update', pageId],
-          ['delete', pageId]
-        ];
-
-        const results = await checkMultiplePermissions(permissionChecks, cacheTTL);
-
-        if (!isMounted) return;
-
-        const newPermissions: PagePermissions = {
-          canRead: results.find(r => r.operation === 'read')?.hasPermission || false,
-          canCreate: results.find(r => r.operation === 'create')?.hasPermission || false,
-          canUpdate: results.find(r => r.operation === 'update')?.hasPermission || false,
-          canDelete: results.find(r => r.operation === 'delete')?.hasPermission || false,
-          isLoading: false,
-          error: null
-        };
-
-        // Add debug info if enabled
-        if (enableDebug) {
-          const debugInfo = getDebugInfo();
-          newPermissions.debugInfo = {
-            cacheHits: debugInfo.cacheHits,
-            cacheMisses: debugInfo.cacheMisses,
-            averageResponseTime: debugInfo.averageResponseTime
-          };
-        }
-
-        setPermissions(newPermissions);
-      } catch (error) {
-        if (!isMounted) return;
-        
-        console.error(`[PagePermissionGuard] Error loading permissions for ${pageId}:`, error);
-        setPermissions({
-          canRead: false,
-          canCreate: false,
-          canUpdate: false,
-          canDelete: false,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error('Unknown error loading permissions')
-        });
-      }
-    };
-
-    loadPermissions();
-
-    // Cleanup function
-    return () => {
-      isMounted = false;
-    };
-  }, [pageId, checkMultiplePermissions, getDebugInfo, enableDebug, cacheTTL]);
-
-  // Show loading state
-  if (permissions.isLoading) {
-    return (
-      <div className="page-permission-loading" role="status" aria-live="polite">
-        <span className="sr-only">Loading permissions...</span>
-        {fallback}
-      </div>
-    );
-  }
-
-  // Show error state
-  if (permissions.error) {
-    return (
-      <div className="page-permission-error" role="alert">
-        <span className="sr-only">Permission check error</span>
-        {fallback}
-      </div>
-    );
-  }
-
-  // Show fallback if no permissions
-  if (!permissions.canRead && !permissions.canCreate && !permissions.canUpdate && !permissions.canDelete) {
-    return <>{fallback}</>;
-  }
-
-  // Render children with permissions
-  return <>{children(permissions)}</>;
-}
-
-// Convenience components for specific permission types
-export function ReadPermissionGuard({ 
-  pageId, 
-  children, 
-  fallback = null,
-  ...props 
-}: Omit<PagePermissionGuardProps, 'children'> & { children: React.ReactNode }) {
-  return (
-    <PagePermissionGuard pageId={pageId} fallback={fallback} {...props}>
-      {(permissions) => permissions.canRead ? <>{children}</> : <>{fallback}</>}
-    </PagePermissionGuard>
-  );
-}
-
-export function CreatePermissionGuard({ 
-  pageId, 
-  children, 
-  fallback = null,
-  ...props 
-}: Omit<PagePermissionGuardProps, 'children'> & { children: React.ReactNode }) {
-  return (
-    <PagePermissionGuard pageId={pageId} fallback={fallback} {...props}>
-      {(permissions) => permissions.canCreate ? <>{children}</> : <>{fallback}</>}
-    </PagePermissionGuard>
-  );
-}
-
-export function UpdatePermissionGuard({ 
-  pageId, 
-  children, 
-  fallback = null,
-  ...props 
-}: Omit<PagePermissionGuardProps, 'children'> & { children: React.ReactNode }) {
-  return (
-    <PagePermissionGuard pageId={pageId} fallback={fallback} {...props}>
-      {(permissions) => permissions.canUpdate ? <>{children}</> : <>{fallback}</>}
-    </PagePermissionGuard>
-  );
-}
-
-export function DeletePermissionGuard({ 
-  pageId, 
-  children, 
-  fallback = null,
-  ...props 
-}: Omit<PagePermissionGuardProps, 'children'> & { children: React.ReactNode }) {
-  return (
-    <PagePermissionGuard pageId={pageId} fallback={fallback} {...props}>
-      {(permissions) => permissions.canDelete ? <>{children}</> : <>{fallback}</>}
-    </PagePermissionGuard>
-  );
-} 

package/src/components/RBAC/RBACGuard.tsx

@@ -1,143 +0,0 @@
-/**
- * @file RBAC Guard Component
- * @package @jmruthers/pace-core
- * @module Components/RBAC
- * @since 0.3.0
- *
- * A component that conditionally renders children based on user permissions.
- * This component integrates with the new RBAC system to provide secure,
- * permission-based UI rendering.
- *
- * Features:
- * - Permission-based conditional rendering
- * - Database-backed permission validation
- * - Loading states and error handling
- * - Fallback content support
- * - Type-safe permission checking
- * - Automatic context detection
- *
- * @example
- * ```tsx
- * import { RBACGuard } from '@jmruthers/pace-core';
- * 
- * function MyComponent() {
- *   return (
- *     <div>
- *       <h1>Dashboard</h1>
- *       
- *       <RBACGuard operation="read" pageId="dashboard">
- *         <DashboardContent />
- *       </RBACGuard>
- *       
- *       <RBACGuard operation="create" pageId="events">
- *         <CreateEventButton />
- *       </RBACGuard>
- *       
- *       <RBACGuard 
- *         operation="delete" 
- *         pageId="users"
- *         fallback={<p>You don't have permission to delete users.</p>}
- *       >
- *         <DeleteUserButton />
- *       </RBACGuard>
- *     </div>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - Supports screen reader friendly conditional content
- * - Maintains focus management in conditional renders
- * - Provides accessible fallback content
- *
- * @security
- * - Database-backed permission validation
- * - Secure permission checking
- * - Organisation context enforcement
- *
- * @performance
- * - Optimized with React.memo
- * - Minimal re-renders
- * - Efficient permission checking
- *
- * @dependencies
- * - React 18+ - Components and hooks
- * - useRBAC hook - Permission checking
- * - RBAC types - Type definitions
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { useRBAC } from '../../hooks/useRBAC';
-import type { RBACGuardProps, Operation } from '../../rbac/types';
-
-export function RBACGuard({ 
-  children, 
-  operation, 
-  pageId, 
-  fallback = null 
-}: RBACGuardProps) {
-  const { hasPermission, isLoading, error } = useRBAC(pageId);
-  const [hasAccess, setHasAccess] = useState(false);
-  const [isChecking, setIsChecking] = useState(true);
-  const [checkError, setCheckError] = useState<Error | null>(null);
-
-  const checkPermission = useCallback(async () => {
-    if (isLoading) return;
-    
-    setIsChecking(true);
-    setCheckError(null);
-    
-    try {
-      const hasPerm = await hasPermission(operation, pageId);
-      setHasAccess(hasPerm);
-    } catch (err) {
-      console.error('Permission check failed:', err);
-      setHasAccess(false);
-      setCheckError(err instanceof Error ? err : new Error('Permission check failed'));
-    } finally {
-      setIsChecking(false);
-    }
-  }, [hasPermission, operation, pageId, isLoading]);
-
-  useEffect(() => {
-    checkPermission();
-  }, [checkPermission]);
-
-  // Show error state immediately if hook provides an error (bypass permission checking)
-  if (error) {
-    if (fallback) {
-      return (
-        <div className="rbac-error" role="alert">
-          <span className="sr-only">Permission check error</span>
-          {fallback}
-        </div>
-      );
-    }
-    return null;
-  }
-
-  // Show loading state while checking permissions
-  if (isLoading || isChecking) {
-    return (
-      <div className="rbac-loading" role="status" aria-live="polite">
-        <span className="sr-only">Checking permissions...</span>
-      </div>
-    );
-  }
-
-  // Show error state if permission check failed
-  if (checkError) {
-    if (fallback) {
-      return (
-        <div className="rbac-error" role="alert">
-          <span className="sr-only">Permission check error</span>
-          {fallback}
-        </div>
-      );
-    }
-    return null;
-  }
-
-  // Render children if user has permission, otherwise show fallback
-  return hasAccess ? <>{children}</> : <>{fallback}</>;
-} 

package/src/components/RBAC/RBACProvider.tsx

@@ -1,186 +0,0 @@
-/**
- * @file RBAC Provider Component (Legacy)
- * @package @jmruthers/pace-core
- * @module Components/RBAC
- * @since 0.3.0
- * @deprecated Use UnifiedAuthProvider instead for new applications
- *
- * A Role-Based Access Control (RBAC) provider that manages user permissions
- * and access levels throughout the application. This component is maintained
- * for backward compatibility but new applications should use UnifiedAuthProvider
- * which provides integrated authentication and RBAC functionality.
- *
- * Features:
- * - Role-based access control system
- * - Permission-based authorization
- * - Access level hierarchy management
- * - Context-based state management
- * - Supabase integration support
- * - Loading state management
- * - Type-safe permission checking
- * - Flexible permission configuration
- * - Access level validation
- * - Provider pattern implementation
- *
- * @migration
- * For new applications, use UnifiedAuthProvider instead:
- * ```tsx
- * // Old approach (deprecated)
- * <RBACProvider permissions={permissions} accessLevel={accessLevel}>
- *   <App />
- * </RBACProvider>
- * 
- * // New approach (recommended)
- * <UnifiedAuthProvider supabaseClient={supabase} appName="MyApp">
- *   <App />
- * </UnifiedAuthProvider>
- * ```
- *
- * @example
- * ```tsx
- * // Basic RBAC provider setup (legacy)
- * <RBACProvider
- *   permissions={{
- *     'read:events': true,
- *     'write:events': false,
- *     'delete:events': false,
- *     'admin:users': false
- *   }}
- *   accessLevel={AccessLevel.PARTICIPANT}
- * >
- *   <App />
- * </RBACProvider>
- * 
- * // RBAC provider with Supabase integration (legacy)
- * <RBACProvider
- *   supabaseClient={supabase}
- *   permissions={userPermissions}
- *   accessLevel={userAccessLevel}
- * >
- *   <App />
- * </RBACProvider>
- * 
- * // Using RBAC in components (legacy)
- * function EventList() {
- *   const { hasPermission, hasAccessLevel, accessLevel } = useRBAC();
- *   
- *   return (
- *     <div>
- *       <h1>Events</h1>
- *       {hasPermission('read:events') && (
- *         <EventList />
- *       )}
- *       {hasAccessLevel(AccessLevel.EDITOR) && (
- *         <CreateEventButton />
- *       )}
- *       {accessLevel === AccessLevel.ADMIN && (
- *         <AdminPanel />
- *       )}
- *     </div>
- *   );
- * }
- * 
- * // Conditional rendering based on permissions (legacy)
- * function EventActions({ event }) {
- *   const { hasPermission } = useRBAC();
- *   
- *   return (
- *     <div className="flex gap-2">
- *       {hasPermission('read:events') && (
- *         <Button onClick={() => viewEvent(event.id)}>View</Button>
- *       )}
- *       {hasPermission('write:events') && (
- *         <Button onClick={() => editEvent(event.id)}>Edit</Button>
- *       )}
- *       {hasPermission('delete:events') && (
- *         <Button variant="destructive" onClick={() => deleteEvent(event.id)}>
- *           Delete
- *         </Button>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - No direct accessibility concerns (context provider)
- * - Enables accessible permission-based UI rendering
- * - Supports screen reader friendly conditional content
- * - Maintains focus management in conditional renders
- *
- * @security
- * - Permission-based access control
- * - Access level validation
- * - Secure permission checking
- * - Role-based authorization
- * - Context isolation
- * - Note: For enhanced security, use UnifiedAuthProvider
- *
- * @dependencies
- * - React 18+ - Context and hooks
- * - AccessLevel enum - Permission levels
- * - Supabase client (optional) - Database integration
- * - TypeScript - Type safety
- */
-
-import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
-import { AccessLevel } from '../../types/unified';
-
-interface RBACContextType {
-  permissions: Record<string, boolean>;
-  accessLevel: AccessLevel;
-  hasPermission: (permission: string) => boolean;
-  hasAccessLevel: (level: AccessLevel) => boolean;
-  isLoading: boolean;
-}
-
-const RBACContext = createContext<RBACContextType | null>(null);
-
-interface RBACProviderProps {
-  children: ReactNode;
-  supabaseClient?: any;
-  permissions?: Record<string, boolean>;
-  accessLevel?: AccessLevel;
-}
-
-export const RBACProvider: React.FC<RBACProviderProps> = ({
-  children,
-  supabaseClient,
-  permissions = {},
-  accessLevel = AccessLevel.VIEWER
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const hasPermission = (permission: string): boolean => {
-    return permissions[permission] || false;
-  };
-
-  const hasAccessLevel = (level: AccessLevel): boolean => {
-    const levels = [AccessLevel.NONE, AccessLevel.VIEWER, AccessLevel.PARTICIPANT, AccessLevel.EDITOR, AccessLevel.PLANNER, AccessLevel.ADMIN, AccessLevel.SUPER_ADMIN, AccessLevel.SUPER];
-    const userLevelIndex = levels.indexOf(accessLevel);
-    const requiredLevelIndex = levels.indexOf(level);
-    return userLevelIndex >= requiredLevelIndex;
-  };
-
-  const contextValue: RBACContextType = {
-    permissions,
-    accessLevel,
-    hasPermission,
-    hasAccessLevel,
-    isLoading
-  };
-
-  return (
-    <RBACContext.Provider value={contextValue}>
-      {children}
-    </RBACContext.Provider>
-  );
-};
-
-export const useRBAC = (): RBACContextType => {
-  const context = useContext(RBACContext);
-  if (!context) {
-    throw new Error('useRBAC must be used within an RBACProvider');
-  }
-  return context;
-};