@jmruthers/pace-core 0.4.1 → 0.5.1

package/docs/implementation-guides/app-layout.md

@@ -18,22 +18,34 @@ PACE Core provides comprehensive layout components that include:
 ### 1. Simple App Layout
 
 ```tsx
-import { PaceAppLayout, Header, Footer } from '@jmruthers/pace-core';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { PaceAppLayout } from '@jmruthers/pace-core';
 
 function App() {
   return (
-    <PaceAppLayout
-      title="My Application"
-      user={user}
-      onLogout={handleLogout}
-      navigation={navigationItems}
-      footer={<Footer>© 2024 My App. All rights reserved.</Footer>}
-    >
-      <div className="p-6">
-        <h1>Welcome to My App</h1>
-        <p>Your application content goes here.</p>
-      </div>
-    </PaceAppLayout>
+    <Router>
+      <Routes>
+        <Route path="/" element={
+          <PaceAppLayout
+            appName="My Application"
+            navItems={navigationItems}
+          />
+        }>
+          <Route index element={<HomePage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="settings" element={<SettingsPage />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+}
+
+function HomePage() {
+  return (
+    <div className="p-6">
+      <h1>Welcome to My App</h1>
+      <p>Your application content goes here.</p>
+    </div>
   );
 }
 ```
@@ -41,45 +53,43 @@ function App() {
 ### 2. Layout with Custom Header
 
 ```tsx
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { 
   PaceAppLayout, 
-  Header, 
-  UserMenu, 
-  NavigationMenu,
   Button 
 } from '@jmruthers/pace-core';
 
 function App() {
-  const customHeader = (
-    <Header
-      title="My Application"
-      user={user}
-      onLogout={handleLogout}
-      actions={
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm">
-            Help
-          </Button>
-          <UserMenu
-            user={user}
-            onLogout={handleLogout}
-            onProfile={handleProfile}
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={
+          <PaceAppLayout
+            appName="My Application"
+            navItems={navigationItems}
+            headerActions={
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm">
+                  Help
+                </Button>
+              </div>
+            }
           />
-        </div>
-      }
-    />
+        }>
+          <Route index element={<HomePage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+        </Route>
+      </Routes>
+    </Router>
   );
+}
 
+function HomePage() {
   return (
-    <PaceAppLayout
-      header={customHeader}
-      navigation={navigationItems}
-    >
-      <div className="p-6">
-        <h1>Welcome to My App</h1>
-        <p>Your application content goes here.</p>
-      </div>
-    </PaceAppLayout>
+    <div className="p-6">
+      <h1>Welcome to My App</h1>
+      <p>Your application content goes here.</p>
+    </div>
   );
 }
 ```
@@ -89,38 +99,47 @@ function App() {
 ### 1. Role-Based Layouts
 
 ```tsx
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { PaceAppLayout, useRBAC } from '@jmruthers/pace-core';
 
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<RoleBasedLayout />}>
+          <Route index element={<HomePage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="system-admin/*" element={<SystemAdminRoutes />} />
+          <Route path="org-admin/*" element={<OrgAdminRoutes />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+}
+
 function RoleBasedLayout() {
   const { globalRole, organisationRole } = useRBAC();
   
   const getNavigationItems = () => {
     const baseItems = [
-      { label: 'Dashboard', href: '/dashboard', icon: 'Home' }
+      { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'Home' }
     ];
 
     if (globalRole === 'super_admin') {
       baseItems.push({
+        id: 'system-admin',
         label: 'System Admin',
         href: '/system-admin',
-        icon: 'Shield',
-        children: [
-          { label: 'Organisations', href: '/system-admin/organisations' },
-          { label: 'Users', href: '/system-admin/users' },
-          { label: 'Settings', href: '/system-admin/settings' }
-        ]
+        icon: 'Shield'
       });
     }
 
     if (organisationRole === 'admin' || organisationRole === 'owner') {
       baseItems.push({
+        id: 'org-admin',
         label: 'Organisation Admin',
         href: '/org-admin',
-        icon: 'Settings',
-        children: [
-          { label: 'Members', href: '/org-admin/members' },
-          { label: 'Settings', href: '/org-admin/settings' }
-        ]
+        icon: 'Settings'
       });
     }
 
@@ -129,21 +148,9 @@ function RoleBasedLayout() {
 
   return (
     <PaceAppLayout
-      title="My Application"
-      user={user}
-      onLogout={handleLogout}
-      navigation={getNavigationItems()}
-      sidebar={
-        globalRole === 'super_admin' ? (
-          <SuperAdminSidebar />
-        ) : null
-      }
-    >
-      <div className="p-6">
-        <h1>Welcome to My App</h1>
-        <p>Your application content goes here.</p>
-      </div>
-    </PaceAppLayout>
+      appName="My Application"
+      navItems={getNavigationItems()}
+    />
   );
 }
 ```
@@ -151,57 +158,75 @@ function RoleBasedLayout() {
 ### 2. Event-Aware Layout
 
 ```tsx
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { 
   PaceAppLayout, 
   EventSelector,
   useEvents 
 } from '@jmruthers/pace-core';
 
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<EventAwareLayout />}>
+          <Route index element={<EventDashboard />} />
+          <Route path="participants" element={<ParticipantsPage />} />
+          <Route path="schedule" element={<SchedulePage />} />
+          <Route path="settings" element={<EventSettingsPage />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+}
+
 function EventAwareLayout() {
   const { selectedEvent, events } = useEvents();
   
   const eventNavigation = [
     {
+      id: 'dashboard',
       label: 'Event Dashboard',
-      href: `/events/${selectedEvent?.id}/dashboard`,
+      href: '/',
       icon: 'Home'
     },
     {
+      id: 'participants',
       label: 'Participants',
-      href: `/events/${selectedEvent?.id}/participants`,
+      href: '/participants',
       icon: 'Users'
     },
     {
+      id: 'schedule',
       label: 'Schedule',
-      href: `/events/${selectedEvent?.id}/schedule`,
+      href: '/schedule',
       icon: 'Calendar'
     },
     {
+      id: 'settings',
       label: 'Settings',
-      href: `/events/${selectedEvent?.id}/settings`,
+      href: '/settings',
       icon: 'Settings'
     }
   ];
 
   return (
     <PaceAppLayout
-      title="Event Management"
-      user={user}
-      onLogout={handleLogout}
-      navigation={eventNavigation}
-      headerActions={
-        <EventSelector
-          events={events}
-          selectedEvent={selectedEvent}
-          onEventChange={setSelectedEvent}
-        />
-      }
-    >
-      <div className="p-6">
-        <h1>Event: {selectedEvent?.name}</h1>
-        <p>Event management content goes here.</p>
-      </div>
-    </PaceAppLayout>
+      appName="Event Management"
+      navItems={eventNavigation}
+      showEventSelector={true}
+    />
+  );
+}
+
+function EventDashboard() {
+  const { selectedEvent } = useEvents();
+  
+  return (
+    <div className="p-6">
+      <h1>Event: {selectedEvent?.name}</h1>
+      <p>Event management content goes here.</p>
+    </div>
   );
 }
 ```
@@ -336,7 +361,7 @@ import { PaceAppLayout, Card } from '@jmruthers/pace-core';
 function SidebarLayout() {
   return (
     <div className="flex h-screen">
-      <aside className="w-64 bg-gray-50 border-r">
+      <aside className="w-64 bg-sec-50 border-r">
         <Card className="h-full rounded-none border-0">
           <div className="p-4">
             <h2 className="text-lg font-semibold mb-4">Navigation</h2>
@@ -380,7 +405,7 @@ function CollapsibleSidebarLayout() {
 
   return (
     <div className="flex h-screen">
-      <aside className={`transition-all duration-300 ${isCollapsed ? 'w-16' : 'w-64'} bg-gray-50 border-r`}>
+      <aside className={`transition-all duration-300 ${isCollapsed ? 'w-16' : 'w-64'} bg-sec-50 border-r`}>
         <Card className="h-full rounded-none border-0">
           <div className="p-4">
             <div className="flex items-center justify-between mb-4">
@@ -627,7 +652,7 @@ function StatefulLayout() {
 
   return (
     <div className="flex h-screen">
-      <aside className={`transition-all duration-300 ${isSidebarOpen ? 'w-64' : 'w-16'} bg-gray-50 border-r`}>
+      <aside className={`transition-all duration-300 ${isSidebarOpen ? 'w-64' : 'w-16'} bg-sec-50 border-r`}>
         <Card className="h-full rounded-none border-0">
           <div className="p-4">
             <div className="flex items-center justify-between mb-4">
@@ -685,10 +710,10 @@ function CustomStyledLayout() {
       user={user}
       onLogout={handleLogout}
       navigation={navigationItems}
-      className="bg-gray-50"
-      headerClassName="bg-white shadow-sm"
-      navigationClassName="bg-gray-100"
-      contentClassName="bg-white"
+      className="bg-sec-50"
+      headerClassName="bg-main-50 shadow-sm"
+      navigationClassName="bg-sec-100"
+      contentClassName="bg-main-50"
     >
       <div className="p-6">
         <h1>Welcome to My App</h1>
@@ -710,20 +735,20 @@ function CustomHeaderLayout() {
       title="My Application"
       user={user}
       onLogout={handleLogout}
-      className="bg-gradient-to-r from-blue-600 to-purple-600 text-white"
+      className="bg-gradient-to-r from-main-600 to-sec-600 text-main-50"
       actions={
         <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
+          <Button variant="ghost" size="sm" className="text-main-50 hover:bg-main-50/20">
             Help
           </Button>
-          <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
+          <Button variant="ghost" size="sm" className="text-main-50 hover:bg-main-50/20">
             Support
           </Button>
           <UserMenu
             user={user}
             onLogout={handleLogout}
             onProfile={handleProfile}
-            className="text-white"
+            className="text-main-50"
           />
         </div>
       }
@@ -751,20 +776,20 @@ import { PaceAppLayout, Footer, Button } from '@jmruthers/pace-core';
 
 function CustomFooterLayout() {
   const customFooter = (
-    <Footer className="bg-gray-900 text-white">
+    <Footer className="bg-sec-900 text-main-50">
       <div className="container mx-auto px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
             <p>&copy; 2024 My App. All rights reserved.</p>
           </div>
           <div className="flex items-center gap-4">
-            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
+            <Button variant="ghost" size="sm" className="text-main-50 hover:bg-main-50/20">
               Privacy Policy
             </Button>
-            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
+            <Button variant="ghost" size="sm" className="text-main-50 hover:bg-main-50/20">
               Terms of Service
             </Button>
-            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
+            <Button variant="ghost" size="sm" className="text-main-50 hover:bg-main-50/20">
               Contact
             </Button>
           </div>
@@ -806,13 +831,13 @@ function AccessibleLayout() {
       navigation={navigationItems}
       skipLinks={
         <div className="sr-only focus:not-sr-only">
-          <a href="#main" className="block p-2 bg-blue-600 text-white">
+          <a href="#main" className="block p-2 bg-main-600 text-main-50">
             Skip to main content
           </a>
-          <a href="#navigation" className="block p-2 bg-blue-600 text-white">
+          <a href="#navigation" className="block p-2 bg-main-600 text-main-50">
             Skip to navigation
           </a>
-          <a href="#footer" className="block p-2 bg-blue-600 text-white">
+          <a href="#footer" className="block p-2 bg-main-600 text-main-50">
             Skip to footer
           </a>
         </div>