@jmruthers/pace-core 0.6.1 → 0.6.3

package/src/components/Footer/Footer.tsx

@@ -47,28 +47,28 @@
  * 
  * // Footer with custom content
  * <Footer companyName="My Company">
- *   <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
- *     <div>
+ *   <section className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+ *     <section>
  *       <h3 className="font-semibold mb-2">About Us</h3>
  *       <p className="text-sm text-muted-foreground">
  *         We provide innovative solutions for modern businesses.
  *       </p>
- *     </div>
- *     <div>
+ *     </section>
+ *     <section>
  *       <h3 className="font-semibold mb-2">Contact</h3>
  *       <p className="text-sm text-muted-foreground">
  *         Email: info@mycompany.com<br />
  *         Phone: (555) 123-4567
  *       </p>
- *     </div>
- *     <div>
+ *     </section>
+ *     <section>
  *       <h3 className="font-semibold mb-2">Follow Us</h3>
- *       <div className="flex gap-2">
+ *       <nav className="flex gap-2">
  *         <a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
  *         <a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
- *       </div>
- *     </div>
- *   </div>
+ *       </nav>
+ *     </section>
+ *   </section>
  * </Footer>
  * ```
  *
@@ -87,6 +87,9 @@
 import React from 'react';
 import { cn } from '../../utils/core/cn';
 
+/**
+ * Props for the Footer component.
+ */
 export interface FooterProps {
   /**
    * Company or organization name
@@ -138,7 +141,7 @@ export interface FooterProps {
  * 
  * // With children
  * <Footer>
- *   <div>Custom footer content</div>
+ *   <section>Custom footer content</section>
  * </Footer>
  * 
  * // With logo and copyright

package/src/components/Form/Form.tsx

@@ -359,6 +359,7 @@ export function FormField<
                 type={type}
                 placeholder={placeholder}
                 data-testid={testId}
+                aria-label={label || placeholder || name}
                 className={cn(
                   "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                   fieldError && "border-destructive focus-visible:ring-destructive"

package/src/components/Header/Header.test.tsx

@@ -52,20 +52,24 @@ vi.mock('../UserMenu', () => ({
   ),
 }));
 
-vi.mock('../EventSelector', () => ({
-  EventSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      <button>{placeholder}</button>
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'context-selector'} className={className}>
+      <button>{placeholder || 'Select organisation or event'}</button>
     </div>
   ),
 }));
 
-vi.mock('../OrganisationSelector', () => ({
-  OrganisationSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'org-selector'} className={className}>
-      <button>{placeholder}</button>
-    </div>
-  ),
+// Mock useEventService to prevent provider requirement
+vi.mock('../../hooks/services/useEventService', () => ({
+  useEventService: vi.fn(() => ({
+    getEvents: vi.fn(() => []),
+    getSelectedEvent: vi.fn(() => null),
+    isLoading: vi.fn(() => false),
+    getError: vi.fn(() => null),
+    setSelectedEvent: vi.fn(),
+    refreshEvents: vi.fn()
+  }))
 }));
 
 // Mock useOrganisations hook
@@ -90,7 +94,7 @@ vi.mock('../../hooks/useOrganisations', () => ({
     isContextReady: true,
     isLoading: false,
     error: null,
-    selectOrganisation: vi.fn(),
+    switchOrganisation: vi.fn(),
     refreshOrganisations: vi.fn(),
     userMemberships: []
   }))
@@ -314,44 +318,44 @@ describe('Header Component', () => {
     });
   });
 
-  // Event selector tests
-  describe('Event Selector', () => {
-    it('renders event selector when showEventSelector is true', () => {
-      renderWithProviders(<Header showEventSelector={true} />);
+  // Context selector tests
+  describe('Context Selector', () => {
+    it('renders context selector by default', () => {
+      renderWithProviders(<Header />);
       
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
     });
 
-    it('does not render event selector when showEventSelector is false', () => {
-      renderWithProviders(<Header showEventSelector={false} />);
+    it('does not render context selector when showContextSelector is false', () => {
+      renderWithProviders(<Header showContextSelector={false} />);
       
-      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
     });
 
-    it('renders event selector by default', () => {
-      renderWithProviders(<Header />);
+    it('renders context selector when showContextSelector is explicitly true', () => {
+      renderWithProviders(<Header showContextSelector={true} />);
       
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
     });
 
-    it('applies correct className to event selector', () => {
-      renderWithProviders(<Header showEventSelector={true} />);
+    it('applies correct className to context selector', () => {
+      renderWithProviders(<Header showContextSelector={true} />);
       
-      const eventSelector = screen.getByTestId('event-selector');
-      expect(eventSelector).toBeInTheDocument();
-      expect(eventSelector).toBeVisible();
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toBeInTheDocument();
+      expect(contextSelector).toBeVisible();
     });
 
     it('shows correct placeholder text', () => {
-      renderWithProviders(<Header showEventSelector={true} />);
+      renderWithProviders(<Header showContextSelector={true} />);
       
-      expect(screen.getByRole('button', { name: 'Select event' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Select organisation or event' })).toBeInTheDocument();
     });
 
-    it('preserves layout when event selector is hidden', () => {
+    it('preserves layout when context selector is hidden', () => {
       renderWithProviders(
         <Header 
-          showEventSelector={false}
+          showContextSelector={false}
           user={mockUser}
           showUserMenu={true}
         />
@@ -361,47 +365,14 @@ describe('Header Component', () => {
       expect(nav).toBeInTheDocument();
       expect(nav).toBeVisible();
       
-      // Event selector should not be rendered
-      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      // Context selector should not be rendered
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
       
       // User menu should still be present and positioned correctly
       expect(screen.getByTestId('user-menu')).toBeInTheDocument();
     });
   });
 
-  // Organisation Selector tests
-  describe('Organisation Selector', () => {
-    it('does not render organisation selector by default', () => {
-      renderWithProviders(<Header />);
-      
-      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
-    });
-
-    it('renders organisation selector when showOrgSelector is true', () => {
-      renderWithProviders(<Header showOrgSelector={true} />);
-      
-      expect(screen.getByTestId('org-selector')).toBeInTheDocument();
-    });
-
-    it('does not render organisation selector when showOrgSelector is false', () => {
-      renderWithProviders(<Header showOrgSelector={false} />);
-      
-      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
-    });
-
-    it('can render both organisation and event selectors together', () => {
-      renderWithProviders(
-        <Header 
-          showOrgSelector={true}
-          showEventSelector={true}
-        />
-      );
-      
-      expect(screen.getByTestId('org-selector')).toBeInTheDocument();
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
-    });
-  });
-
   // Custom actions tests
   describe('Custom Actions', () => {
     it('renders custom actions when provided', () => {
@@ -598,7 +569,7 @@ describe('Header Component', () => {
           navItems={mockNavItems}
           user={mockUser}
           actions={customActions}
-          showEventSelector={true}
+          showContextSelector={true}
           showUserMenu={true}
         />
       );
@@ -609,8 +580,8 @@ describe('Header Component', () => {
       // Navigation
       expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
       
-      // Event Selector
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      // Context Selector
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
       
       // Custom Actions
       expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
@@ -622,7 +593,7 @@ describe('Header Component', () => {
     it('renders minimal configuration', () => {
       renderWithProviders(
         <Header
-          showEventSelector={false}
+          showContextSelector={false}
           showUserMenu={false}
         />
       );
@@ -631,9 +602,8 @@ describe('Header Component', () => {
       expect(screen.getByRole('banner')).toBeInTheDocument();
       expect(screen.getByRole('img', { name: 'Logo' })).toBeInTheDocument();
       expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
       expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
     });
   });
 
@@ -649,7 +619,7 @@ describe('Header Component', () => {
           navItems={mockNavItems}
           user={mockUser}
           actions={<div>Actions</div>}
-          showEventSelector={true}
+          showContextSelector={true}
           showUserMenu={true}
         />
       );

package/src/components/Header/Header.tsx

@@ -42,20 +42,20 @@
  *   ]}
  *   currentPath="/dashboard"
  *   actions={
- *     <div className="flex gap-2">
+ *     <>
  *       <Button variant="outline">Export</Button>
  *       <Button>New Item</Button>
- *     </div>
+ *     </>
  *   }
  *   user={currentUser}
  *   onSignOut={handleSignOut}
  * />
  * 
- * // Header without event selector
+ * // Header without context selector
  * <Header
  *   logoUrl="/logo.svg"
  *   logoHref="/dashboard"
- *   showEventSelector={false}
+ *   showContextSelector={false}
  *   user={currentUser}
  *   onSignOut={handleSignOut}
  * />
@@ -83,21 +83,21 @@
  * - Tailwind CSS - Styling
  * - NavigationMenu component
  * - UserMenu component
- * - OrganisationSelector component
- * - EventSelector component
+ * - ContextSelector component (unified org/event selector)
  */
 
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { User } from '@supabase/supabase-js';
 import { cn } from '../../utils/core/cn';
-import { EventSelector } from '../EventSelector';
-import { OrganisationSelector } from '../OrganisationSelector';
+import { ContextSelector } from '../ContextSelector';
 import { UserMenu } from '../UserMenu';
 import { NavigationMenu } from '../NavigationMenu';
 import type { NavigationItem } from '../NavigationMenu';
 import type { PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 import { useOrganisations } from '../../hooks/useOrganisations';
+import { useEvents } from '../../hooks/useEvents';
+import type { Event } from '../../types/event';
 
 /**
  * Props for the Header component
@@ -123,10 +123,12 @@ export interface HeaderProps {
   userMenu?: React.ReactNode;
   /** Custom className */
   className?: string;
-  /** Show/hide event selector */
-  showEventSelector?: boolean;
-  /** Show/hide organisation selector */
-  showOrgSelector?: boolean;
+  /** Show/hide context selector (unified org/event selector) - default: true */
+  showContextSelector?: boolean;
+  /** Show organisations in context selector - default: true */
+  showOrganisations?: boolean;
+  /** Show events in context selector - default: true */
+  showEvents?: boolean;
   /** Show/hide user menu */
   showUserMenu?: boolean;
   /** Current path for navigation highlighting */
@@ -199,10 +201,10 @@ export interface HeaderProps {
  * 
  * function HeaderWithActions() {
  *   const customActions = (
- *     <div className="flex items-center gap-2">
+ *     <>
  *       <Button variant="outline" size="sm">Export</Button>
  *       <Button size="sm">New Item</Button>
- *     </div>
+ *     </>
  *   );
  * 
  *   return (
@@ -225,7 +227,7 @@ export interface HeaderProps {
  *     <Header
  *       logoUrl="/simple-logo.svg"
  *       logoAlt="Simple App"
- *       showEventSelector={false}
+ *       showContextSelector={false}
  *       user={currentUser}
  *       onSignOut={handleSignOut}
  *     />
@@ -238,6 +240,13 @@ export interface HeaderProps {
  * 
  * @since 0.1.0
  */
+/**
+ * Header component for application layouts.
+ * Provides navigation, user menu, organisation/event selectors, and customizable branding.
+ * 
+ * @param props - Header configuration
+ * @returns The rendered header
+ */
 export function Header({
   logoUrl,
   logoAlt = 'Logo',
@@ -249,36 +258,27 @@ export function Header({
   actions,
   userMenu,
   className,
-  showEventSelector = true,
-  showOrgSelector = false,
+  showContextSelector = true,
+  showOrganisations = true,
+  showEvents = true,
   showUserMenu = true,
   currentPath,
   onNavigate,
   logoHref
 }: HeaderProps) {
-  // Conditional wrapper for organisation selector - only show if user has organisations
-  const OrganisationSelectorConditional = () => {
-    const { organisations, isContextReady } = useOrganisations();
-    // Only show selector if user has organisations and context is ready
-    if (!isContextReady || !organisations || organisations.length === 0) {
-      return null;
-    }
-    return (
-      <OrganisationSelector 
-        placeholder="Select organisation" 
-        className="w-64" 
-        data-testid="org-selector"
-        compact={true}
-      />
-    );
-  };
+  // Determine if context selector should be shown
+  const shouldShowContextSelector = showContextSelector !== false;
+  
+  // Get hooks for context selector
+  const { switchOrganisation } = useOrganisations();
+  const { events, setSelectedEvent } = useEvents();
 
   return (
     <header className={cn(
       "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
       className
     )} role="banner">
-      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto flex items-center gap-4 h-full">
+      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto grid grid-cols-[auto_1fr_auto_auto_auto_auto] items-center gap-4 h-full">
           {/* Logo */}
           {logo ? (
             logoHref ? (
@@ -333,21 +333,32 @@ export function Header({
               itemsPreFiltered={true}
             />
           )}
-        
-
-        {/* Right side: Organisation Selector, Event Selector, Actions, and User Menu */}
-        <div className="flex items-center gap-4 ml-auto">
-          {/* Organisation Selector - Only show if user has organisations */}
-          {showOrgSelector ? (
-            <OrganisationSelectorConditional />
-          ) : null}
 
-          {/* Event Selector */}
-          {showEventSelector ? (
-            <EventSelector 
-              placeholder="Select event" 
-              className="w-96" 
-              data-testid="event-selector" 
+          {/* Unified Context Selector - Shows all accessible orgs and events */}
+          {shouldShowContextSelector ? (
+            <ContextSelector
+              placeholder="Select organisation or event"
+              className={cn(
+                "w-96",
+                // Adjust width based on whether actions exist
+                actions ? "col-span-1" : "col-span-2"
+              )}
+              showOrganisations={showOrganisations}
+              showEvents={showEvents}
+              onOrganisationSelect={async (org) => {
+                // When switching to an organisation, clear event selection FIRST
+                // This ensures the userClearedEventRef flag is set before any event refresh
+                // This prevents auto-selection from re-selecting the event
+                setSelectedEvent(null);
+                // Then switch organisation (this may trigger event refresh, but flag is already set)
+                await switchOrganisation(org.id);
+              }}
+              onEventSelect={(event) => {
+                // Find the full event object from the events list
+                const fullEvent = events.find((e: Event) => (e.event_id || e.id) === (event.event_id || event.id));
+                setSelectedEvent(fullEvent || event);
+              }}
+              compact={true}
             />
           ) : null}
           
@@ -367,7 +378,6 @@ export function Header({
               />
             )
           )}
-        </div>
 
       </nav>
     </header>

package/src/components/Input/Input.test.tsx

@@ -420,14 +420,14 @@ describe('InputGroup Component', () => {
   // Accessibility tests
   describe('Accessibility', () => {
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLDivElement>();
+      const ref = React.createRef<HTMLFieldSetElement>();
       renderWithProviders(
         <InputGroup ref={ref}>
           <Input placeholder="Input 1" />
         </InputGroup>
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBeInstanceOf(HTMLFieldSetElement);
     });
 
     it('maintains proper focus order', async () => {

package/src/components/Input/Input.tsx

@@ -55,6 +55,10 @@ import { cn } from '../../utils/core/cn';
 // BASE INPUT COMPONENT
 // ============================================================================
 
+/**
+ * Props for the Input component.
+ * Extends standard input HTML attributes.
+ */
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
@@ -136,7 +140,7 @@ Input.displayName = 'Input';
 // INPUT GROUP COMPONENT
 // ============================================================================
 
-export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface InputGroupProps extends React.HTMLAttributes<HTMLFieldSetElement> {
   /** Child elements to be rendered in the group */
   children: React.ReactNode;
   /** Layout orientation of the input group */
@@ -165,7 +169,7 @@ export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  * </InputGroup>
  * ```
  */
-export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+export const InputGroup = React.forwardRef<HTMLFieldSetElement, InputGroupProps>(
   ({ className, children, orientation = 'vertical', spacing = 'md', ...props }, ref) => {
     const spacingClasses = {
       sm: orientation === 'horizontal' ? 'space-x-2' : 'space-y-2',
@@ -174,7 +178,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     };
 
     return (
-      <div
+      <fieldset
         ref={ref}
         className={cn(
           'flex',
@@ -185,7 +189,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
         {...props}
       >
         {children}
-      </div>
+      </fieldset>
     );
   }
 );

package/src/components/LoadingSpinner/LoadingSpinner.test.tsx

@@ -382,10 +382,10 @@ describe('LoadingSpinner Component', () => {
 
     it('works within a card or container', () => {
       renderWithProviders(
-        <div className="card">
+        <section className="card">
           <h2>Loading Content</h2>
           <LoadingSpinner size="lg" />
-        </div>
+        </section>
       );
       
       const spinner = screen.getByRole('status');
@@ -397,11 +397,11 @@ describe('LoadingSpinner Component', () => {
 
     it('works with multiple instances', () => {
       renderWithProviders(
-        <div>
+        <>
           <LoadingSpinner size="sm" />
           <LoadingSpinner size="md" />
           <LoadingSpinner size="lg" />
-        </div>
+        </>
       );
       
       const spinners = screen.getAllByRole('status');

package/src/components/LoginForm/LoginForm.tsx

@@ -106,6 +106,10 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Alert, AlertDescription } from '../Alert/Alert';
 import { cn } from '../../utils/core/cn';
 
+/**
+ * Props for the LoginForm component.
+ * Configures login form behavior, validation, and callbacks.
+ */
 export interface LoginFormProps {
   /** Callback invoked when the form is submitted */
   onSignIn: (data: { email: string; password: string }) => Promise<void>;