@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/Card/Card.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file Integration Tests for Card Component Suite
  * @package @jmruthers/pace-core
- * @module Components/Card/__tests__
+ * @module Components/Card
  * @since 1.0.0
  * 
  * Integration tests for Card component suite focusing on observable behavior,
@@ -24,6 +24,8 @@ import {
   HoverCardTrigger,
   HoverCardContent
 } from './Card';
+import { Button } from '../Button';
+import { Input } from '../Input';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 // Following testing standards: use timeout parameter to prevent hanging
@@ -60,15 +62,15 @@ describe('[integration] Card Component Suite', () => {
         const { rerender } = renderWithProviders(<Card variant="default" size="default">Default card</Card>);
         let card = screen.getByRole('article');
         expect(card).toHaveClass('shadow-xl');
-        expect(card).not.toHaveClass('text-sm', 'text-lg');
+        expect(card).not.toHaveClass('card--sm', 'card--lg');
 
         rerender(<Card variant="outline" size="sm">Outline small card</Card>);
         card = screen.getByRole('article');
-        expect(card).toHaveClass('border-2', 'text-sm');
+        expect(card).toHaveClass('border-2', 'card--sm');
 
         rerender(<Card variant="ghost" size="lg">Ghost large card</Card>);
         card = screen.getByRole('article');
-        expect(card).toHaveClass('border-0', 'shadow-none', 'text-lg');
+        expect(card).toHaveClass('border-0', 'shadow-none', 'card--lg');
       }, TEST_TIMEOUT);
 
       it('renders all variant and size combinations', () => {
@@ -346,8 +348,7 @@ describe('[integration] Card Component Suite', () => {
         );
         const trigger = screen.getByText('Click me');
         expect(trigger.tagName).toBe('SPAN');
-        const wrapper = trigger.parentElement;
-        expect(wrapper).toHaveClass('cursor-pointer');
+        expect(trigger).toHaveClass('cursor-pointer');
       });
     });
 
@@ -391,7 +392,7 @@ describe('[integration] Card Component Suite', () => {
         const content = screen.getByRole('tooltip');
         expect(content).toBeInTheDocument();
         expect(content).toHaveTextContent('Hover content');
-        expect(content).toHaveClass('custom-content', 'absolute', 'z-50', 'min-w-[8rem]');
+        expect(content).toHaveClass('custom-content', 'absolute', 'z-50', 'min-w-32');
         expect(content).toHaveAttribute('role', 'tooltip');
         expect(ref.current).toBeInstanceOf(HTMLElement);
       });
@@ -412,8 +413,8 @@ describe('[integration] Card Component Suite', () => {
           </CardContent>
           <CardFooter>
             <CardActions>
-              <button>Primary Action</button>
-              <button>Secondary Action</button>
+              <Button>Primary Action</Button>
+              <Button variant="outline">Secondary Action</Button>
             </CardActions>
           </CardFooter>
         </Card>
@@ -490,9 +491,11 @@ describe('[integration] Card Component Suite', () => {
     it('handles array of children', () => {
       renderWithProviders(
         <Card>
-          {['First', 'Second', 'Third'].map((item, i) => (
-            <div key={i}>{item}</div>
-          ))}
+          <ul>
+            {['First', 'Second', 'Third'].map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
         </Card>
       );
       expect(screen.getByText('First')).toBeInTheDocument();
@@ -501,14 +504,132 @@ describe('[integration] Card Component Suite', () => {
     }, TEST_TIMEOUT);
   });
 
+  describe('Navigation', () => {
+    it('renders as link when link prop is provided', () => {
+      renderWithProviders(
+        <Card link="/test-path">Clickable card</Card>
+      );
+      
+      const card = screen.getByRole('link');
+      expect(card).toBeInTheDocument();
+      expect(card).toHaveClass('cursor-pointer', 'hover:bg-acc-200');
+      expect(card).toHaveAttribute('tabIndex', '0');
+    }, TEST_TIMEOUT);
+
+    it('handles external URLs with http:// prefix', () => {
+      renderWithProviders(
+        <Card link="http://example.com">External link card</Card>
+      );
+      
+      const card = screen.getByRole('link');
+      expect(card).toBeInTheDocument();
+      expect(card).toHaveClass('cursor-pointer', 'hover:bg-acc-200');
+    }, TEST_TIMEOUT);
+
+    it('handles external URLs with https:// prefix', () => {
+      renderWithProviders(
+        <Card link="https://example.com">External link card</Card>
+      );
+      
+      const card = screen.getByRole('link');
+      expect(card).toBeInTheDocument();
+      expect(card).toHaveClass('cursor-pointer', 'hover:bg-acc-200');
+    }, TEST_TIMEOUT);
+
+    it('calls onClick handler when card is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      
+      renderWithProviders(
+        <Card link="/test-path" onClick={handleClick}>
+          Clickable card
+        </Card>
+      );
+      
+      const card = screen.getByRole('link');
+      await user.click(card);
+      
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    }, TEST_TIMEOUT);
+
+    it('does not navigate if onClick prevents default', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn((e) => e.preventDefault());
+      
+      renderWithProviders(
+        <Card link="/test-path" onClick={handleClick}>
+          Clickable card
+        </Card>
+      );
+      
+      const card = screen.getByRole('link');
+      await user.click(card);
+      
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    }, TEST_TIMEOUT);
+
+    it('supports keyboard navigation with Enter key on link card', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      
+      renderWithProviders(
+        <Card link="/test-path" onClick={handleClick}>
+          Clickable card
+        </Card>
+      );
+      
+      const card = screen.getByRole('link');
+      card.focus();
+      await user.keyboard('{Enter}');
+      
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    }, TEST_TIMEOUT);
+
+    it('supports keyboard navigation with Space key on link card', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      
+      renderWithProviders(
+        <Card link="/test-path" onClick={handleClick}>
+          Clickable card
+        </Card>
+      );
+      
+      const card = screen.getByRole('link');
+      card.focus();
+      await user.keyboard(' ');
+      
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    }, TEST_TIMEOUT);
+
+    it('automatically enables link styles when link prop is provided', () => {
+      renderWithProviders(
+        <Card link="/test-path">Link card</Card>
+      );
+      
+      const card = screen.getByRole('link');
+      expect(card).toHaveClass('cursor-pointer', 'hover:bg-acc-200');
+    }, TEST_TIMEOUT);
+
+    it('does not render as link when link prop is not provided', () => {
+      renderWithProviders(
+        <Card>Regular card</Card>
+      );
+      
+      const card = screen.getByRole('article');
+      expect(card).not.toHaveAttribute('role', 'link');
+      expect(card).not.toHaveAttribute('tabIndex', '0');
+    }, TEST_TIMEOUT);
+  });
+
   describe('Integration', () => {
     it('works with multiple cards', () => {
       renderWithProviders(
-        <div>
+        <section>
           <Card>First card</Card>
           <Card>Second card</Card>
           <Card>Third card</Card>
-        </div>
+        </section>
       );
       
       expect(screen.getAllByRole('article')).toHaveLength(3);
@@ -522,11 +643,11 @@ describe('[integration] Card Component Suite', () => {
         <form onSubmit={handleSubmit}>
           <Card>
             <CardContent>
-              <input type="text" placeholder="Enter text" />
+              <Input type="text" placeholder="Enter text" />
             </CardContent>
             <CardFooter>
               <CardActions>
-                <button type="submit">Submit</button>
+                <Button type="submit">Submit</Button>
               </CardActions>
             </CardFooter>
           </Card>
@@ -545,7 +666,7 @@ describe('[integration] Card Component Suite', () => {
       renderWithProviders(
         <Card onClick={handleCardClick}>
           <CardContent>
-            <button onClick={handleButtonClick}>Action Button</button>
+            <Button onClick={handleButtonClick}>Action Button</Button>
           </CardContent>
         </Card>
       );
@@ -559,5 +680,39 @@ describe('[integration] Card Component Suite', () => {
       await user.click(screen.getByRole('article'));
       expect(handleCardClick).toHaveBeenCalledTimes(1);
     });
+
+    it('works with link card and nested interactive elements', async () => {
+      const handleButtonClick = vi.fn((e) => e.stopPropagation());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Card link="/test-path">
+          <CardContent>
+            <Button onClick={handleButtonClick}>Action Button</Button>
+          </CardContent>
+        </Card>
+      );
+      
+      // Click the button should not trigger navigation
+      await user.click(screen.getByRole('button', { name: 'Action Button' }));
+      expect(handleButtonClick).toHaveBeenCalledTimes(1);
+    }, TEST_TIMEOUT);
+
+    it('handles multiple cards with different variants and links', () => {
+      renderWithProviders(
+        <section>
+          <Card variant="default" link="/path1">Card 1</Card>
+          <Card variant="outline" link="/path2">Card 2</Card>
+          <Card variant="ghost" isLink>Card 3</Card>
+        </section>
+      );
+      
+      // Cards with link prop render as 'link' role, cards without render as 'article'
+      const linkCards = screen.getAllByRole('link');
+      const articleCards = screen.getAllByRole('article');
+      
+      expect(linkCards.length + articleCards.length).toBe(3);
+      expect(linkCards.length).toBeGreaterThan(0);
+    }, TEST_TIMEOUT);
   });
 });

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/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>
+  );
+}

package/src/components/ContextSelector/{__tests__/ContextSelector.test.tsx → ContextSelector.test.tsx}

@@ -1,7 +1,7 @@
 /**
  * @file ContextSelector Component Tests
  * @package @jmruthers/pace-core
- * @module Components/ContextSelector/__tests__
+ * @module Components/ContextSelector
  * @since 0.6.4
  *
  * Comprehensive tests for ContextSelector component.
@@ -12,19 +12,19 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { ContextSelector } from '../ContextSelector';
-import { renderWithProviders } from '../../../__tests__/helpers/test-utils';
-import type { Organisation } from '../../../types/organisation';
-import type { Event } from '../../../types/event';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import type { Organisation } from '../../types/organisation';
+import type { Event } from '../../types/event';
 
 // Mock hooks
 const mockUseOrganisations = vi.fn();
 const mockUseEvents = vi.fn();
 
-vi.mock('../../../hooks/useOrganisations', () => ({
+vi.mock('../../hooks/useOrganisations', () => ({
   useOrganisations: () => mockUseOrganisations(),
 }));
 
-vi.mock('../../../hooks/useEvents', () => ({
+vi.mock('../../hooks/useEvents', () => ({
   useEvents: () => mockUseEvents(),
 }));