@jmruthers/pace-core 0.5.180 → 0.5.182

package/examples/components 2/Dialog/SmartDialogExample.tsx

@@ -1,322 +0,0 @@
-/**
- * @file Smart Dialog Example
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Examples
- * @since 0.1.0
- */
-
-import React, { useState } from 'react';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  Button,
-  Input,
-  Label,
-} from '../../../index';
-
-/**
- * Example demonstrating the enhanced Dialog component with all advanced features
- */
-export function SmartDialogExample() {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    message: ''
-  });
-
-  // Generate long content for scrolling demo
-  const longContent = Array.from({ length: 50 }, (_, i) => (
-    <div key={i} className="p-4 border rounded-lg mb-4">
-      <h4>Content Section {i + 1}</h4>
-      <p className="text-sm text-muted-foreground">
-        This is content section {i + 1}. In a real application, this could be form fields,
-        data displays, or any other content that might make the dialog tall.
-      </p>
-    </div>
-  ));
-
-  return (
-    <div className="p-6 space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold">Enhanced Dialog Examples</h2>
-        <p className="text-muted-foreground">
-          Demonstrating all the advanced features of the Dialog component including smart height management, 
-          scrolling, responsive behavior, and accessibility features.
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {/* Basic Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Basic Dialog</Button>
-          </DialogTrigger>
-          <DialogContent size="md">
-            <DialogHeader>
-              <DialogTitle>Basic Dialog</DialogTitle>
-              <DialogDescription>
-                This is a standard dialog without scrolling enabled.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="py-4">
-                <p>Simple content that fits nicely in the dialog.</p>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button variant="outline">Cancel</Button>
-              <Button>Save</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Scrollable Dialog with Sticky Elements */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Scrollable Dialog</Button>
-          </DialogTrigger>
-          <DialogContent 
-            size="lg" 
-            enableScrolling={true}
-            maxHeightPercent={80}
-          >
-            <DialogHeader sticky={true}>
-              <DialogTitle>Scrollable Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog has lots of content and will scroll if needed.
-                The header stays sticky at the top.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div className="space-y-4">
-                {longContent.slice(0, 30)}
-              </div>
-            </DialogBody>
-            <DialogFooter sticky={true}>
-              <Button variant="outline">Cancel</Button>
-              <Button>Save Changes</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Custom Height Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Custom Height</Button>
-          </DialogTrigger>
-          <DialogContent 
-            size="xl" 
-            enableScrolling={true}
-            maxHeight="400px"
-          >
-            <DialogHeader>
-              <DialogTitle>Custom Height Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog has a fixed maximum height of 400px.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div className="space-y-4">
-                {longContent.slice(0, 20)}
-              </div>
-            </DialogBody>
-            <DialogFooter>
-              <Button>Done</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Auto-Sizing Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Auto Size</Button>
-          </DialogTrigger>
-          <DialogContent size="auto">
-            <DialogHeader>
-              <DialogTitle>Auto-Sized Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog automatically adjusts its width to fit the content.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="space-y-4">
-                <p>Content that determines the dialog width...</p>
-                <div className="p-4 bg-muted rounded-lg">
-                  <p className="text-sm">This dialog will size itself based on this content.</p>
-                </div>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button>Close</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Form Dialog with Custom Dimensions */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Form Dialog</Button>
-          </DialogTrigger>
-          <DialogContent 
-            maxWidth="600px"
-            maxHeight="500px"
-            enableScrolling={true}
-          >
-            <DialogHeader>
-              <DialogTitle>Contact Form</DialogTitle>
-              <DialogDescription>
-                Fill out the form below to get in touch with us.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Name</Label>
-                  <Input 
-                    id="name"
-                    value={formData.name}
-                    onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
-                    placeholder="Enter your name"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input 
-                    id="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
-                    placeholder="Enter your email"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="message">Message</Label>
-                  <textarea
-                    id="message"
-                    value={formData.message}
-                    onChange={(e) => setFormData(prev => ({ ...prev, message: e.target.value }))}
-                    placeholder="Enter your message"
-                    className="w-full min-h-[100px] p-2 border rounded-md resize-none"
-                  />
-                </div>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button variant="outline">Cancel</Button>
-              <Button>Send Message</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Dialog with Prevented Close Actions */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Important Dialog</Button>
-          </DialogTrigger>
-          <DialogContent 
-            size="lg"
-            preventCloseOnEscape={true}
-            preventCloseOnOutsideClick={true}
-            showCloseButton={false}
-          >
-            <DialogHeader>
-              <DialogTitle>Important Action Required</DialogTitle>
-              <DialogDescription>
-                This dialog cannot be closed accidentally. You must complete the action below.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="space-y-4">
-                <p>Please confirm that you want to proceed with this important action.</p>
-                <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
-                  <p className="text-sm text-destructive font-medium">
-                    ⚠️ This action cannot be undone.
-                  </p>
-                </div>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button 
-                variant="destructive"
-                onClick={() => {
-                  alert('Action completed!');
-                  // In a real app, you'd close the dialog here
-                }}
-              >
-                Confirm Action
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Full Screen Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Full Screen</Button>
-          </DialogTrigger>
-          <DialogContent size="full" enableScrolling={true}>
-            <DialogHeader sticky={true}>
-              <DialogTitle>Full Screen Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog takes up the full screen on mobile and large size on desktop.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div className="space-y-6">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <div className="space-y-4">
-                    <h3 className="text-lg font-semibold">Left Column</h3>
-                    {longContent.slice(0, 15)}
-                  </div>
-                  <div className="space-y-4">
-                    <h3 className="text-lg font-semibold">Right Column</h3>
-                    {longContent.slice(15, 30)}
-                  </div>
-                </div>
-              </div>
-            </DialogBody>
-            <DialogFooter sticky={true}>
-              <Button variant="outline">Cancel</Button>
-              <Button>Save All Changes</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-
-      <div className="mt-8 p-6 bg-muted rounded-lg">
-        <h3 className="text-lg font-semibold mb-4">Key Features Demonstrated:</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <h4 className="font-medium mb-2">Core Features</h4>
-            <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
-              <li><strong>Semantic HTML Structure:</strong> Native dialog element with proper landmarks</li>
-              <li><strong>Accessibility First:</strong> WCAG 2.1 AA compliant with screen reader support</li>
-              <li><strong>Focus Management:</strong> Automatic focus trapping and restoration</li>
-              <li><strong>Keyboard Navigation:</strong> Escape to close, Tab for focus management</li>
-              <li><strong>Responsive Design:</strong> Adapts to all screen sizes</li>
-            </ul>
-          </div>
-          <div>
-            <h4 className="font-medium mb-2">Advanced Features</h4>
-            <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
-              <li><strong>Smart Height Management:</strong> Automatic viewport-based constraints</li>
-              <li><strong>Scrollable Content:</strong> Long content scrolls while keeping headers/footers visible</li>
-              <li><strong>Sticky Headers/Footers:</strong> Important UI elements remain accessible</li>
-              <li><strong>Custom Dimensions:</strong> Fine-grained control over width and height</li>
-              <li><strong>Configurable Close Behavior:</strong> Control escape key and outside click</li>
-              <li><strong>Multiple Size Variants:</strong> sm, md, lg, xl, full, auto sizing options</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default SmartDialogExample; 

package/examples/components 2/index.ts

@@ -1,11 +0,0 @@
-/**
- * @file Component Examples
- * @package @jmruthers/pace-core
- * @module Examples/Components
- * @since 1.0.0
- *
- * Component-specific examples organized by component.
- */
-
-export * from './DataTable';
-export * from './Dialog';

package/examples/features/index.ts

@@ -1,12 +0,0 @@
-/**
- * @file Feature Examples
- * @package @jmruthers/pace-core
- * @module Examples/Features
- * @since 1.0.0
- *
- * Feature-based examples that demonstrate cross-component workflows.
- */
-
-export * from './rbac';
-export * from './public-pages';
-

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';
-