@jmruthers/pace-core 0.2.7 → 0.4.1

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

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