@jmruthers/pace-core 0.6.5 → 0.6.7

package/docs/api-reference/components.md

@@ -71,13 +71,15 @@ import { Settings } from 'lucide-react'; // for icon example
 
 ### Accessibility
 
-- **Keyboard Navigation**: Fully keyboard accessible. Use `Enter` or `Space` to activate.
+- **Keyboard Navigation**: Fully keyboard accessible via native HTML `<button>` element behavior. The `Enter` and `Space` keys automatically trigger button activation without requiring custom keyboard handlers. This is standard browser behavior for native button elements.
 - **ARIA Attributes**: Supports all standard ARIA attributes via `React.ButtonHTMLAttributes`.
 - **Disabled State**: When disabled, button is not focusable and has `aria-disabled="true"`.
 - **Icon Buttons**: Always provide `aria-label` for icon-only buttons for screen readers.
 - **Focus Management**: Visible focus indicators via `focus-visible` styles.
 - **Screen Readers**: Button text is automatically announced. Use descriptive labels.
 
+**Note**: The Button component renders a native HTML `<button>` element, which provides built-in keyboard accessibility. No additional keyboard event handlers are required - the browser handles `Enter` and `Space` key activation automatically.
+
 ### Edge Cases
 
 - **asChild Prop**: When using `asChild`, the button renders as the child element (e.g., `<Link>`). The `type` attribute is not applied in this case.
@@ -282,8 +284,6 @@ interface HierarchicalConfig {
   defaultExpanded?: boolean | string[];
   /** Callback when expansion state changes */
   onExpandedChange?: (expandedIds: string[]) => void;
-  /** Custom expand/collapse button component */
-  expandButton?: React.ComponentType<ExpandButtonProps>;
   /** Indentation for child rows in pixels */
   indentSize?: number;
   /** CSS classes for parent rows */
@@ -1160,10 +1160,10 @@ function MyComponent() {
   };
 
   return (
-    <div>
+    <section>
       <Button onClick={handleSuccess}>Save Changes</Button>
       <Button onClick={handleError}>Trigger Error</Button>
-    </div>
+    </section>
   );
 }
 
@@ -1238,10 +1238,10 @@ import {
       <Button>Advanced Tooltip</Button>
     </TooltipTrigger>
     <TooltipContent side="top" className="bg-main-500 text-main-50">
-      <div className="space-y-1">
+      <section className="space-y-1">
         <p className="font-semibold">Advanced Tooltip</p>
         <p className="text-xs">With custom styling</p>
-      </div>
+      </section>
     </TooltipContent>
   </TooltipRoot>
 </TooltipProvider>
@@ -1287,7 +1287,7 @@ A complete application layout with header, navigation, and content area.
 import { PaceAppLayout } from '@jmruthers/pace-core';
 
 <PaceAppLayout>
-  <div>Your app content</div>
+  <main>Your app content</main>
 </PaceAppLayout>
 ```
 
@@ -1573,10 +1573,10 @@ function App() {
     loginPath="/login"
     loadingFallback={<CustomLoader />}
     noEventsFallback={
-      <div>
+      <section>
         <h2>No Events Available</h2>
         <p>Contact your administrator for access.</p>
-      </div>
+      </section>
     }
   />
 }>
@@ -1787,7 +1787,7 @@ function PublicEventPage() {
   }
   
   if (error || !event) {
-    return <div>Event not found</div>;
+    return <p>Event not found</p>;
   }
   
   return (
@@ -1883,9 +1883,9 @@ function MyFileUpload() {
         console.log('URL:', result.file_url);
       }}
     >
-      <div className="border-2 border-dashed border-main-300 rounded-lg p-8 text-center">
+      <section className="border-2 border-dashed border-main-300 rounded-lg p-8 text-center">
         <p>Drag and drop files here or click to browse</p>
-      </div>
+      </section>
     </FileUpload>
   );
 }
@@ -1925,7 +1925,7 @@ function MyApp() {
   });
 
   return (
-    <div>
+    <main>
       <h1>My App</h1>
       
       <InactivityWarningModal
@@ -1936,7 +1936,7 @@ function MyApp() {
         title="Session Timeout Warning"
         message="You will be signed out due to inactivity."
       />
-    </div>
+    </main>
   );
 }
 ```
@@ -1967,14 +1967,14 @@ import { EventLogo } from '@jmruthers/pace-core';
 
 function EventHeader({ eventId }: { eventId: string }) {
   return (
-    <div className="text-center">
+    <section className="text-center">
       <EventLogo 
         eventId={eventId} 
         size="large"
         className="mx-auto mb-4"
       />
       <h1>Event Name</h1>
-    </div>
+    </section>
   );
 }
 ```
@@ -2238,10 +2238,10 @@ import {
 - **[Component Styling](../styles/component-styling.md)** - How components are styled
 - **[Custom Themes](../styles/custom-themes.md)** - Creating custom themes
 
-### Best Practices
-- **[Component Best Practices](../best-practices/README.md#component-usage)** - Component usage guidelines
-- **[Performance Best Practices](../best-practices/performance.md)** - Performance optimization
-- **[Accessibility Guidelines](../best-practices/README.md#accessibility)** - Accessibility best practices
+### Standards & Best Practices
+- **[Architecture Standards](../standards/3-architecture-standards.md)** - Component design principles
+- **[Performance Optimization](../standards/9-operations-standards.md#performance-optimization)** - Performance optimization
+- **[Accessibility Requirements](../standards/4-code-quality-standards.md#accessibility-requirements)** - Accessibility requirements
 
 ### Troubleshooting
 - **[Common Issues](../troubleshooting/common-issues.md)** - Component-related problems

package/docs/api-reference/deprecated.md

@@ -276,28 +276,53 @@ const { data: roleId } = await supabase.rpc('rbac_role_grant', { ... });
 
 ### Legacy Event RPCs
 
-**Status**: Deprecated  
+**Status**: Removed  
 **Since**: v0.5.x  
-**Removal**: v0.7.x
+**Removed**: v0.6.x
 
-**Deprecated Functions**:
-- `get_pace_user_events` → Use `data_user_events_get`
+**Removed Functions**:
+- `get_pace_user_events` → Use `data_user_events_get` or `useEvents()` hook
+- `get_public_event_by_code` → Use direct table queries or `usePublicEvent()` hook
+- `get_public_event_logo` → Use direct table queries or `usePublicEventLogo()` hook
 
 **Migration**:
 ```typescript
-// Old
+// Old - get_pace_user_events
 const { data } = await supabase.rpc('get_pace_user_events', {
   user_uuid: userId,
   app_name: appName,
   p_organisation_id: orgId
 });
 
-// New
+// New - Modern RPC
 const { data, error } = await supabase.rpc('data_user_events_get', {
   p_user_id: userId,
   p_app_id: appId, // Use app ID instead of app name
   p_organisation_id: orgId
 });
+
+// Better - Use pace-core hook
+import { useEvents } from '@jmruthers/pace-core';
+const { events } = useEvents();
+
+// Old - get_public_event_by_code
+const { data } = await supabase.rpc('get_public_event_by_code', {
+  event_code_param: eventCode
+});
+
+// New - Direct table query (pace-core handles this internally)
+import { usePublicEvent } from '@jmruthers/pace-core';
+const { event, isLoading, error } = usePublicEvent(eventCode);
+
+// Old - get_public_event_logo
+const { data } = await supabase.rpc('get_public_event_logo', {
+  event_id_param: eventId,
+  organisation_id_param: organisationId
+});
+
+// New - Direct table query (pace-core handles this internally)
+import { usePublicEventLogo } from '@jmruthers/pace-core';
+const { logoUrl, loading, error } = usePublicEventLogo(eventId, eventName, organisationId);
 ```
 
 ### Legacy Data Access RPCs

package/docs/api-reference/hooks.md

@@ -111,11 +111,11 @@ function App() {
     handleSignOutNow,
   } = useUnifiedAuth();
 
-  if (isLoading) return <div>Loading...</div>;
-  if (authError) return <div>Error: {authError.message}</div>;
+  if (isLoading) return <p>Loading...</p>;
+  if (authError) return <p>Error: {authError.message}</p>;
 
   return (
-    <div>
+    <main>
       {user ? (
         <>
           <p>Welcome, {user.email}</p>
@@ -129,7 +129,7 @@ function App() {
       ) : (
         <LoginForm onSignIn={signIn} />
       )}
-    </div>
+    </main>
   );
 }
 ```
@@ -220,22 +220,22 @@ function EventManager() {
     hasAccess,
   } = useEvents();
 
-  if (loading) return <div>Loading events...</div>;
+  if (loading) return <p>Loading events...</p>;
 
   return (
-    <div>
+    <section>
       <h2>Available Events</h2>
       {events.map(event => (
-        <div key={event.id}>
+        <section key={event.id}>
           <span>{event.name}</span>
           {hasAccess(event.id) && (
             <button onClick={() => setSelectedEvent(event)}>
               Select
             </button>
           )}
-        </div>
+        </section>
       ))}
-    </div>
+    </section>
   );
 }
 ```
@@ -281,9 +281,9 @@ function UserActions({ userId, scope }) {
   }, [hasPermission, isLoading, userId, scope]);
 
   return (
-    <div>
+    <section>
       {canEdit && <EditButton />}
-    </div>
+    </section>
   );
 }
 ```
@@ -312,18 +312,18 @@ function PermissionDisplay({ userId, scope }) {
     scope
   });
 
-  if (isLoading) return <div>Loading permissions...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (isLoading) return <p>Loading permissions...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div>
+    <section>
       <h3>User Permissions</h3>
       {Object.entries(permissions).map(([pageId, operations]) => (
-        <div key={pageId}>
+        <p key={pageId}>
           <strong>{pageId}:</strong> {operations.join(', ')}
-        </div>
+        </p>
       ))}
-    </div>
+    </section>
   );
 }
 ```
@@ -352,13 +352,13 @@ function AccessLevelDisplay({ userId, scope }) {
     scope
   });
 
-  if (isLoading) return <div>Loading access level...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (isLoading) return <p>Loading access level...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div>
+    <section>
       <p>Access Level: {accessLevel || 'None'}</p>
-    </div>
+    </section>
   );
 }
 ```
@@ -406,10 +406,10 @@ function NotificationExample() {
   };
 
   return (
-    <div>
+    <section>
       <button onClick={handleSuccess}>Show Success</button>
       <button onClick={handleError}>Show Error</button>
-    </div>
+    </section>
   );
 }
 ```
@@ -460,23 +460,23 @@ function UserForm() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div>
+      <section>
         <label>Name</label>
         <input {...register('name')} />
         {errors.name && <span>{errors.name.message}</span>}
-      </div>
+      </section>
       
-      <div>
+      <section>
         <label>Email</label>
         <input type="email" {...register('email')} />
         {errors.email && <span>{errors.email.message}</span>}
-      </div>
+      </section>
       
-      <div>
+      <section>
         <label>Age</label>
         <input type="number" {...register('age')} />
         {errors.age && <span>{errors.age.message}</span>}
-      </div>
+      </section>
       
       <button type="submit" disabled={isSubmitting}>
         {isSubmitting ? 'Submitting...' : 'Submit'}
@@ -654,18 +654,18 @@ function Dropdown() {
   useClickOutside(dropdownRef, () => setIsOpen(false));
 
   return (
-    <div ref={dropdownRef}>
+    <nav ref={dropdownRef}>
       <button onClick={() => setIsOpen(!isOpen)}>
         Toggle Dropdown
       </button>
       {isOpen && (
-        <div className="dropdown-content">
-          <div>Option 1</div>
-          <div>Option 2</div>
-          <div>Option 3</div>
-        </div>
+        <section className="dropdown-content">
+          <button>Option 1</button>
+          <button>Option 2</button>
+          <button>Option 3</button>
+        </section>
       )}
-    </div>
+    </nav>
   );
 }
 ```
@@ -696,11 +696,11 @@ function PerformanceDashboard() {
   const metrics = usePerformanceMonitor();
   
   return (
-    <div>
+    <section>
       <p>Render time: {metrics.renderTime}ms</p>
       <p>Memory usage: {metrics.memoryUsage}MB</p>
       <p>Components: {metrics.componentCount}</p>
-    </div>
+    </section>
   );
 }
 ```
@@ -829,7 +829,7 @@ function PublicEventPage() {
   console.log('Event Code:', eventCode);
   console.log('Report ID:', reportId);
   
-  return <div>Event: {eventCode}</div>;
+  return <p>Event: {eventCode}</p>;
 }
 ```
 
@@ -856,11 +856,11 @@ function PublicEventPage() {
   const { eventCode } = usePublicRouteParams({ fetchEventData: false });
   const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
   
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!event) return <div>Event not found</div>;
-  
-  return <div>Event: {event.event_name}</div>;
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!event) return <p>Event not found</p>;
+
+  return <p>Event: {event.event_name}</p>;
 }
 ```
 
@@ -880,10 +880,10 @@ function MyComponent() {
   const isPublicPage = useIsPublicPage();
   
   if (isPublicPage) {
-    return <div>This is a public page</div>;
+    return <section>This is a public page</section>;
   }
   
-  return <div>This is an authenticated page</div>;
+  return <section>This is an authenticated page</section>;
 }
 ```
 
@@ -912,7 +912,7 @@ function PublicComponent() {
   
   console.log('Supabase URL:', environment.supabaseUrl);
   
-  return <div>Public component</div>;
+  return <section>Public component</section>;
 }
 ```
 
@@ -973,16 +973,16 @@ function MyComponent() {
   });
 
   return (
-    <div>
+    <section>
       <p>Idle: {isIdle ? 'Yes' : 'No'}</p>
       <p>Time remaining: {Math.floor(timeRemaining / 1000)}s</p>
       {showWarning && (
-        <div>
+        <section>
           <p>You will be signed out soon due to inactivity.</p>
           <button onClick={resetActivity}>Stay Active</button>
-        </div>
+        </section>
       )}
-    </div>
+    </section>
   );
 }
 ```
@@ -1050,10 +1050,10 @@ function SecureComponent() {
   };
 
   return (
-    <div>
+    <section>
       <p>Super Admin: {superAdminContext.isSuperAdmin ? 'Yes' : 'No'}</p>
       <button onClick={handleSecureAction}>Perform Secure Action</button>
-    </div>
+    </section>
   );
 }
 ```
@@ -1105,15 +1105,15 @@ function FileUpload() {
   };
 
   return (
-    <div>
+    <section>
       <input 
         type="file" 
         onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0])}
         disabled={isLoading}
       />
-      {isLoading && <div>Uploading...</div>}
-      {error && <div>Error: {error.message}</div>}
-    </div>
+      {isLoading && <p>Uploading...</p>}
+      {error && <p>Error: {error.message}</p>}
+    </section>
   );
 }
 ```
@@ -1160,30 +1160,30 @@ function FileUploadWithProgress() {
   };
 
   return (
-    <div>
+    <section>
       <input 
         type="file" 
         onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0])}
         disabled={isUploading}
       />
       {isUploading && (
-        <div>
-          <div>Uploading... {uploadProgress}%</div>
-          <div className="w-full bg-sec-200 rounded-full h-2">
-            <div 
+        <section>
+          <p>Uploading... {uploadProgress}%</p>
+          <section className="w-full bg-sec-200 rounded-full h-2" role="progressbar" aria-valuenow={uploadProgress} aria-valuemin={0} aria-valuemax={100}>
+            <section 
               className="bg-main-600 h-2 rounded-full transition-all duration-300"
               style={{ width: `${uploadProgress}%` }}
             />
-          </div>
-        </div>
+          </section>
+        </section>
       )}
       {error && (
-        <div>
-          <div>Error: {error.message}</div>
+        <section>
+          <p>Error: {error.message}</p>
           <button onClick={reset}>Try Again</button>
-        </div>
+        </section>
       )}
-    </div>
+    </section>
   );
 }
 ```
@@ -1235,12 +1235,12 @@ function AppSettings() {
     });
   };
 
-  if (isLoading) return <div>Loading configuration...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!config) return <div>No configuration available</div>;
+  if (isLoading) return <p>Loading configuration...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!config) return <p>No configuration available</p>;
 
   return (
-    <div>
+    <section>
       <h2>App Configuration</h2>
       <p>App Name: {config.appName}</p>
       <p>Version: {config.version}</p>
@@ -1257,7 +1257,7 @@ function AppSettings() {
           {name}
         </label>
       ))}
-    </div>
+    </section>
   );
 }
 ```
@@ -1295,9 +1295,9 @@ function Modal({ children, onClose }) {
   });
 
   return (
-    <div ref={containerRef}>
+    <section ref={containerRef}>
       {children}
-    </div>
+    </section>
   );
 }
 ```
@@ -1333,9 +1333,9 @@ function Dialog({ isOpen, children, onClose }) {
   if (!isOpen) return null;
 
   return (
-    <div ref={containerRef}>
+    <section ref={containerRef}>
       {children}
-    </div>
+    </section>
   );
 }
 ```
@@ -1391,9 +1391,9 @@ function ResponsiveLayout({ children }) {
   const isMobile = useIsMobile();
 
   return (
-    <div className={isMobile ? 'mobile' : 'desktop'}>
+    <section className={isMobile ? 'mobile' : 'desktop'}>
       {children}
-    </div>
+    </section>
   );
 }
 ```
@@ -1491,7 +1491,7 @@ import { usePerformanceMonitor } from '@jmruthers/pace-core';
 function PerformanceDashboard() {
   const metrics = usePerformanceMonitor();
   
-  return <div>Render time: {metrics.renderTime}ms</div>;
+  return <p>Render time: {metrics.renderTime}ms</p>;
 }
 ```