@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/Card/Card.tsx

@@ -64,6 +64,7 @@
 import * as React from "react"
 import { useNavigate } from "react-router-dom"
 import { cn } from "../../utils/core/cn"
+import { mergeRefs } from "../../utils/core/mergeRefs"
 
 /**
  * Props for the Card component.
@@ -84,7 +85,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLElement> {
  * Get card classes based on variant and size
  */
 function getCardClasses(variant: CardProps['variant'] = 'default', size: CardProps['size'] = 'default'): string {
-  const baseClasses = "rounded-lg border bg-card text-card-foreground shadow-sm";
+  const baseClasses = "rounded-lg border bg-card text-card-foreground shadow-sm print:shadow-none print:bg-transparent";
   
   const variantClasses = {
     default: "shadow-xl",
@@ -94,8 +95,8 @@ function getCardClasses(variant: CardProps['variant'] = 'default', size: CardPro
   
   const sizeClasses = {
     default: "",
-    sm: "text-sm",
-    lg: "text-lg"
+    sm: "card--sm",
+    lg: "card--lg"
   };
   
   return `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`;
@@ -284,14 +285,22 @@ const HoverCardTrigger = React.forwardRef<
   HTMLButtonElement,
   React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
 >(({ className, asChild, children, ...props }, ref) => {
+  if (asChild && React.Children.count(children) === 1) {
+    const child = React.Children.only(children);
+    if (React.isValidElement(child)) {
+      const childEl = child as React.ReactElement<{ className?: string }> & { ref?: React.Ref<unknown> };
+      const mergedRef = mergeRefs(ref, childEl.ref);
+      return React.cloneElement(childEl, {
+        ...props,
+        className: cn("cursor-pointer", className, childEl.props?.className),
+        ref: mergedRef
+      } as React.Attributes & { className?: string; ref?: React.Ref<unknown> });
+    }
+  }
   if (asChild) {
-    return (
-      <span className={cn("cursor-pointer", className)}>
-        {children}
-      </span>
-    );
+    return <span className={cn("cursor-pointer", className)}>{children}</span>;
   }
-  
+
   return (
     <button
       ref={ref}
@@ -315,7 +324,7 @@ const HoverCardContent = React.forwardRef<
   <aside
     ref={ref}
     className={cn(
-      "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-4 text-popover-foreground shadow-md",
+      "absolute z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-4 text-popover-foreground shadow-md",
       className
     )}
     role="tooltip"

package/src/components/Checkbox/Checkbox.test.tsx

@@ -22,126 +22,85 @@ describe('Checkbox Component', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(<Checkbox className="custom-checkbox" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveClass('custom-checkbox');
-    });
-
-    it('renders with custom id', () => {
-      renderWithProviders(<Checkbox id="test-checkbox" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
-    });
-
-    it('renders with custom name (Radix UI handles this internally)', () => {
-      renderWithProviders(<Checkbox name="test-name" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-      // Note: Radix UI Checkbox doesn't expose name attribute directly
-    });
-
-    it('renders with value prop', () => {
-      renderWithProviders(<Checkbox value="test-value" />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('value', 'test-value');
-    });
-
-    it('forwards ref correctly', () => {
+    it('renders with default props, custom className, id, value, and HTML attributes', () => {
       const ref = React.createRef<HTMLButtonElement>();
-      renderWithProviders(<Checkbox ref={ref} />);
-      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    });
-
-    it('applies all HTML attributes', () => {
       renderWithProviders(
         <Checkbox 
+          ref={ref}
+          className="custom-checkbox"
+          id="test-checkbox"
+          value="test-value"
+          name="test-name"
           data-testid="test-checkbox" 
           aria-label="Test checkbox"
           title="Test title"
         />
       );
       const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).not.toBeChecked();
+      expect(checkbox).toHaveClass('custom-checkbox');
+      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
+      expect(checkbox).toHaveAttribute('value', 'test-value');
       expect(checkbox).toHaveAttribute('data-testid', 'test-checkbox');
       expect(checkbox).toHaveAttribute('aria-label', 'Test checkbox');
       expect(checkbox).toHaveAttribute('title', 'Test title');
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     });
   });
 
   describe('State Management', () => {
-    it('renders as unchecked by default', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
+    it('renders as unchecked by default and handles checked states', () => {
+      const { rerender } = renderWithProviders(<Checkbox />);
+      let checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeChecked();
-    });
 
-    it('renders as checked when checked prop is true', () => {
-      renderWithProviders(<Checkbox checked={true} />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox checked={true} />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).toBeChecked();
-    });
 
-    it('renders as unchecked when checked prop is false', () => {
-      renderWithProviders(<Checkbox checked={false} />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox checked={false} />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeChecked();
     });
 
-    it('handles controlled state changes', () => {
+    it('handles controlled state changes and indeterminate state', () => {
       const handleCheckedChange = vi.fn();
-      renderWithProviders(
+      const { rerender } = renderWithProviders(
         <Checkbox 
           checked={false} 
           onCheckedChange={handleCheckedChange} 
         />
       );
-      const checkbox = screen.getByRole('checkbox');
+      let checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeChecked();
-    });
 
-    it('handles indeterminate state', () => {
-      renderWithProviders(<Checkbox checked="indeterminate" />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox checked="indeterminate" />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
     });
   });
 
   describe('Disabled State', () => {
-    it('renders as disabled when disabled prop is true', () => {
-      renderWithProviders(<Checkbox disabled={true} />);
-      const checkbox = screen.getByRole('checkbox');
+    it('renders as disabled when disabled prop is true and applies disabled styling', () => {
+      const { rerender } = renderWithProviders(<Checkbox disabled={true} />);
+      let checkbox = screen.getByRole('checkbox');
       expect(checkbox).toBeDisabled();
-    });
+      expect(checkbox).toHaveAttribute('disabled');
 
-    it('renders as enabled when disabled prop is false', () => {
-      renderWithProviders(<Checkbox disabled={false} />);
-      const checkbox = screen.getByRole('checkbox');
+      rerender(<Checkbox disabled={false} />);
+      checkbox = screen.getByRole('checkbox');
       expect(checkbox).not.toBeDisabled();
     });
-
-    it('applies disabled styling', () => {
-      renderWithProviders(<Checkbox disabled={true} />);
-      const checkbox = screen.getByRole('checkbox');
-      // Verify disabled state is visually indicated
-      expect(checkbox).toBeDisabled();
-      expect(checkbox).toHaveAttribute('disabled');
-    });
   });
 
   describe('Event Handling', () => {
-    it('handles click events', async () => {
+    it('handles click events and toggles state', async () => {
       const handleCheckedChange = vi.fn();
       const user = userEvent.setup();
       
-      renderWithProviders(
-        <Checkbox onCheckedChange={handleCheckedChange} />
+      const { rerender } = renderWithProviders(
+        <Checkbox checked={false} onCheckedChange={handleCheckedChange} />
       );
       
       const checkbox = screen.getByRole('checkbox');
@@ -149,6 +108,14 @@ describe('Checkbox Component', () => {
       
       expect(handleCheckedChange).toHaveBeenCalledTimes(1);
       expect(handleCheckedChange).toHaveBeenCalledWith(true);
+      
+      // Simulate state change
+      rerender(<Checkbox checked={true} onCheckedChange={handleCheckedChange} />);
+      expect(checkbox).toBeChecked();
+      
+      await user.click(checkbox);
+      expect(handleCheckedChange).toHaveBeenCalledTimes(2);
+      expect(handleCheckedChange).toHaveBeenCalledWith(false);
     });
 
     it('handles keyboard events (Space)', async () => {
@@ -167,44 +134,6 @@ describe('Checkbox Component', () => {
       expect(handleCheckedChange).toHaveBeenCalledWith(true);
     });
 
-    it('handles keyboard events (Enter - Radix UI uses Space)', async () => {
-      const handleCheckedChange = vi.fn();
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <Checkbox onCheckedChange={handleCheckedChange} />
-      );
-      
-      const checkbox = screen.getByRole('checkbox');
-      checkbox.focus();
-      await user.keyboard('{Enter}');
-      
-      // Note: Radix UI Checkbox primarily uses Space key, Enter may not trigger
-      // This test documents the expected behavior
-      expect(handleCheckedChange).toHaveBeenCalledTimes(0);
-    });
-
-    it('toggles state on click', async () => {
-      const handleCheckedChange = vi.fn();
-      const user = userEvent.setup();
-      
-      const { rerender } = renderWithProviders(
-        <Checkbox checked={false} onCheckedChange={handleCheckedChange} />
-      );
-      
-      const checkbox = screen.getByRole('checkbox');
-      await user.click(checkbox);
-      
-      expect(handleCheckedChange).toHaveBeenCalledWith(true);
-      
-      // Simulate state change
-      rerender(<Checkbox checked={true} onCheckedChange={handleCheckedChange} />);
-      expect(checkbox).toBeChecked();
-      
-      await user.click(checkbox);
-      expect(handleCheckedChange).toHaveBeenCalledWith(false);
-    });
-
     it('does not trigger events when disabled', async () => {
       const handleCheckedChange = vi.fn();
       const user = userEvent.setup();
@@ -221,96 +150,51 @@ describe('Checkbox Component', () => {
   });
 
   describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('type', 'button');
-    });
-
-    it('supports aria-label', () => {
-      renderWithProviders(<Checkbox aria-label="Accept terms" />);
-      const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('supports aria-labelledby', () => {
+    it('has proper ARIA attributes and supports aria-label, aria-labelledby, and aria-describedby', () => {
       renderWithProviders(
         <>
           <label id="terms-label">Accept terms and conditions</label>
-          <Checkbox aria-labelledby="terms-label" />
+          <Checkbox 
+            aria-label="Accept terms"
+            aria-labelledby="terms-label"
+            aria-describedby="terms-help"
+          />
+          <span id="terms-help">Please read the terms carefully</span>
         </>
       );
       const checkbox = screen.getByRole('checkbox', { name: 'Accept terms and conditions' });
       expect(checkbox).toBeInTheDocument();
-    });
-
-    it('supports aria-describedby', () => {
-      renderWithProviders(
-        <>
-          <Checkbox aria-describedby="terms-help" />
-          <span id="terms-help">Please read the terms carefully</span>
-        </>
-      );
-      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('type', 'button');
       expect(checkbox).toHaveAttribute('aria-describedby', 'terms-help');
+      expect(checkbox).not.toHaveAttribute('tabindex', '-1');
     });
 
-    it('announces state changes to screen readers', () => {
+    it('announces state changes to screen readers and has focus visible styles', async () => {
+      const user = userEvent.setup();
       const { rerender } = renderWithProviders(<Checkbox checked={false} />);
       let checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-checked', 'false');
       
+      checkbox.focus();
+      expect(checkbox).toHaveFocus();
+      
       rerender(<Checkbox checked={true} />);
       checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-checked', 'true');
     });
-
-    it('is keyboard accessible', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).not.toHaveAttribute('tabindex', '-1');
-    });
-
-    it('has focus visible styles', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      
-      // Verify focus is visible when keyboard navigating
-      checkbox.focus();
-      expect(checkbox).toHaveFocus();
-    });
   });
 
   describe('Visual States', () => {
-    it('applies checked state styling', () => {
+    it('applies checked state styling and shows check icon when checked', () => {
       renderWithProviders(<Checkbox checked={true} />);
       const checkbox = screen.getByRole('checkbox');
-      // Verify checked state is visually indicated
       expect(checkbox).toBeChecked();
       expect(checkbox).toHaveAttribute('aria-checked', 'true');
     });
 
-    it('shows check icon when checked', () => {
-      renderWithProviders(<Checkbox checked={true} />);
-      const checkbox = screen.getByRole('checkbox');
-      // The check icon is rendered by Radix UI internally
-      // We verify the checkbox is checked, which indicates the icon is visible
-      expect(checkbox).toBeChecked();
-    });
-
-    it('has proper sizing', () => {
-      renderWithProviders(<Checkbox />);
-      const checkbox = screen.getByRole('checkbox');
-      // Verify checkbox is rendered and has expected dimensions
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).toBeVisible();
-    });
-
-    it('has proper border and background styling', () => {
+    it('has proper sizing and visual structure', () => {
       renderWithProviders(<Checkbox />);
       const checkbox = screen.getByRole('checkbox');
-      // Verify checkbox is rendered with proper visual structure
       expect(checkbox).toBeInTheDocument();
       expect(checkbox).toBeVisible();
     });
@@ -370,7 +254,7 @@ describe('Checkbox Component', () => {
     });
 
     it('handles unknown props gracefully', () => {
-      // Radix UI Checkbox forwards unknown props, so component should still render
+      // @ts-expect-error Testing unknown props
       renderWithProviders(
         <Checkbox {...({ 'data-custom': 'value' } as any)} />
       );

package/src/components/ContextSelector/ContextSelector.internals.tsx

@@ -0,0 +1,204 @@
+/**
+ * @file Context Selector Internal View Components
+ * @package @jmruthers/pace-core
+ * @module Components/ContextSelector
+ * @since 0.6.4
+ *
+ * Presentational components for loading, error, empty, and ready states.
+ * Exported for use only by ContextSelector; not part of public API.
+ */
+
+import React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+} from '../Select';
+import { Alert, AlertDescription } from '../Alert/Alert';
+import { Button } from '../Button/Button';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
+import { RefreshCw, AlertCircle, Building2, Calendar } from 'lucide-react';
+import type { Organisation } from '../../types/organisation';
+import type { Event } from '../../types/event';
+
+export interface ContextSelectorLoadingProps {
+  message: string;
+  className?: string;
+}
+
+export function ContextSelectorLoading({
+  message,
+  className,
+}: ContextSelectorLoadingProps) {
+  return (
+    <section className={`grid place-items-center gap-2 text-center ${className ?? ''}`}>
+      <LoadingSpinner size="sm" />
+      <p>{message}</p>
+    </section>
+  );
+}
+
+export interface ContextSelectorErrorProps {
+  messages: string[];
+  onRetry: () => Promise<void>;
+  isLoading: boolean;
+  showRetryButton: boolean;
+  className?: string;
+}
+
+export function ContextSelectorError({
+  messages,
+  onRetry,
+  isLoading,
+  showRetryButton,
+  className,
+}: ContextSelectorErrorProps) {
+  return (
+    <Alert variant="destructive" className={`space-y-2 ${className ?? ''}`}>
+      <AlertCircle className="size-4" />
+      <AlertDescription>{messages.join(' ')}</AlertDescription>
+      {showRetryButton && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRetry}
+          disabled={isLoading}
+          className="w-full"
+        >
+          <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+          Retry
+        </Button>
+      )}
+    </Alert>
+  );
+}
+
+export interface ContextSelectorEmptyProps {
+  message: string;
+  onRetry: () => Promise<void>;
+  isLoading: boolean;
+  showRetryButton: boolean;
+  className?: string;
+}
+
+export function ContextSelectorEmpty({
+  message,
+  onRetry,
+  isLoading,
+  showRetryButton,
+  className,
+}: ContextSelectorEmptyProps) {
+  return (
+    <Alert className={`space-y-2 ${className ?? ''}`}>
+      <AlertCircle className="size-4" />
+      <AlertDescription>{message}</AlertDescription>
+      {showRetryButton && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRetry}
+          disabled={isLoading}
+          className="w-full"
+        >
+          <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+          Check Again
+        </Button>
+      )}
+    </Alert>
+  );
+}
+
+export interface ContextSelectorSelectProps {
+  currentValue: string;
+  displayValue: React.ReactNode;
+  effectivePlaceholder: string;
+  disabled: boolean;
+  onValueChange: (value: string) => void;
+  organisations: Organisation[] | undefined;
+  events: Event[] | undefined;
+  showOrganisations: boolean;
+  showEvents: boolean;
+  compact: boolean;
+  className?: string;
+}
+
+export function ContextSelectorSelect({
+  currentValue,
+  displayValue,
+  effectivePlaceholder,
+  disabled,
+  onValueChange,
+  organisations,
+  events,
+  showOrganisations,
+  showEvents,
+  compact,
+  className,
+}: ContextSelectorSelectProps) {
+  return (
+    <Select
+      value={currentValue}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      className={className}
+      data-testid="context-selector"
+    >
+      <SelectTrigger className="text-left" variant="outline">
+        <SelectValue placeholder={effectivePlaceholder}>
+          {displayValue}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {showOrganisations && organisations && organisations.length > 0 && (
+          <>
+            <SelectGroup>
+              <SelectLabel>Organisations</SelectLabel>
+              {organisations.map((org) => (
+                <SelectItem key={org.id} value={`org:${org.id}`}>
+                  <span className="flex items-start gap-2">
+                    <Building2 className="inline-block size-4 shrink-0 mt-0.5" />
+                    <span className="flex flex-col gap-0.5">
+                      <span className="font-medium">{org.display_name}</span>
+                      {!compact && org.description && (
+                        <small>{org.description}</small>
+                      )}
+                    </span>
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+            {showEvents && events && events.length > 0 && <SelectSeparator />}
+          </>
+        )}
+        {showEvents && events && events.length > 0 && (
+          <SelectGroup>
+            <SelectLabel>Events</SelectLabel>
+            {events.map((event) => (
+              <SelectItem
+                key={event.event_id || event.id}
+                value={`event:${event.event_id || event.id}`}
+              >
+                <span className="flex items-start gap-2">
+                  <Calendar className="inline-block size-4 shrink-0 mt-0.5" />
+                  <span className="flex flex-col gap-0.5">
+                    <span className="font-medium">{event.event_name}</span>
+                    {!compact && event.event_date && (
+                      <small>
+                        {new Date(event.event_date).toLocaleDateString()}
+                      </small>
+                    )}
+                  </span>
+                </span>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}