@jmruthers/pace-core 0.5.140 → 0.5.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.140",
+  "version": "0.5.142",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -199,6 +199,7 @@
     "@radix-ui/react-progress": "^1.0.0",
     "@radix-ui/react-slot": "^1.0.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.0.0",
     "@radix-ui/react-toast": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
     "@tanstack/react-table": "^8.0.0",
@@ -206,6 +207,7 @@
     "lucide-react": "^0.400.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-day-picker": "^9.0.0",
     "react-hook-form": "^7.0.0",
     "react-router-dom": "^6.0.0",
     "tailwind-merge": "^2.0.0",

package/src/components/Calendar/Calendar.test.tsx

@@ -0,0 +1,338 @@
+/**
+ * @file Calendar Component Tests
+ * @description Comprehensive tests for Calendar component
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Calendar } from './Calendar';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock react-day-picker to avoid complex date rendering issues in tests
+vi.mock('react-day-picker', () => {
+  const React = require('react');
+  return {
+    DayPicker: ({ selected, onSelect, disabled, mode, className, classNames, ...props }: any) => {
+      const handleDateClick = (date: Date) => {
+        if (disabled && typeof disabled === 'function' && disabled(date)) {
+          return;
+        }
+        if (onSelect) {
+          if (mode === 'multiple') {
+            const current = Array.isArray(selected) ? selected : [];
+            const dateStr = date.toISOString();
+            if (current.some((d: Date) => d.toISOString() === dateStr)) {
+              onSelect(current.filter((d: Date) => d.toISOString() !== dateStr));
+            } else {
+              onSelect([...current, date]);
+            }
+          } else if (mode === 'range') {
+            // Simplified range logic for testing
+            onSelect({ from: date, to: date });
+          } else {
+            onSelect(date);
+          }
+        }
+      };
+
+      const today = new Date();
+      const dates = Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(today);
+        date.setDate(today.getDate() + i - 3);
+        return date;
+      });
+
+      return (
+        <div data-testid="calendar" className={className} {...props}>
+          <div className="calendar-header">Calendar</div>
+          <div className="calendar-grid">
+            {dates.map((date, idx) => {
+              const isDisabled = disabled && typeof disabled === 'function' && disabled(date);
+              const isSelected = 
+                (mode === 'single' && selected && date.toDateString() === selected.toDateString()) ||
+                (mode === 'multiple' && Array.isArray(selected) && selected.some((d: Date) => d.toDateString() === date.toDateString())) ||
+                (mode === 'range' && selected?.from && date.toDateString() === selected.from.toDateString());
+              
+              return (
+                <button
+                  key={idx}
+                  data-testid={`date-${date.toISOString().split('T')[0]}`}
+                  onClick={() => !isDisabled && handleDateClick(date)}
+                  disabled={isDisabled}
+                  className={isSelected ? 'selected' : ''}
+                  aria-selected={isSelected}
+                >
+                  {date.getDate()}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      );
+    },
+  };
+});
+
+describe('Calendar Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders calendar with default props', () => {
+      renderWithProviders(<Calendar />);
+      const calendar = screen.getByTestId('calendar');
+      expect(calendar).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Calendar className="custom-calendar" />);
+      const calendar = screen.getByTestId('calendar');
+      // className is applied to the wrapper div, check parent element
+      const wrapper = calendar.parentElement;
+      expect(wrapper).toHaveClass('custom-calendar');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      renderWithProviders(<Calendar ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+
+  // Single date selection tests
+  describe('Single Date Selection', () => {
+    it('handles single date selection', async () => {
+      const handleSelect = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Calendar mode="single" selected={undefined} onSelect={handleSelect} />
+      );
+      
+      const today = new Date();
+      const dateStr = today.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      
+      await user.click(dateButton);
+      
+      expect(handleSelect).toHaveBeenCalled();
+      expect(handleSelect.mock.calls[0][0]).toBeInstanceOf(Date);
+    });
+
+    it('displays selected date', () => {
+      const selectedDate = new Date();
+      renderWithProviders(
+        <Calendar mode="single" selected={selectedDate} />
+      );
+      
+      const dateStr = selectedDate.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      expect(dateButton).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  // Multiple date selection tests
+  describe('Multiple Date Selection', () => {
+    it('handles multiple date selection', async () => {
+      const handleSelect = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Calendar mode="multiple" selected={[]} onSelect={handleSelect} />
+      );
+      
+      const today = new Date();
+      const dateStr = today.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      
+      await user.click(dateButton);
+      
+      expect(handleSelect).toHaveBeenCalled();
+      expect(Array.isArray(handleSelect.mock.calls[0][0])).toBe(true);
+    });
+
+    it('toggles date selection in multiple mode', async () => {
+      const TestComponent = () => {
+        const today = new Date();
+        const [selected, setSelected] = React.useState<Date[]>([today]);
+        const handleSelect = vi.fn((dates) => {
+          setSelected(dates);
+          return dates;
+        });
+        
+        return (
+          <Calendar mode="multiple" selected={selected} onSelect={handleSelect} />
+        );
+      };
+      
+      const user = userEvent.setup();
+      renderWithProviders(<TestComponent />);
+      
+      const today = new Date();
+      const dateStr = today.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      
+      expect(dateButton).toHaveAttribute('aria-selected', 'true');
+      
+      await user.click(dateButton);
+      
+      // After clicking, the date should be deselected (toggled off)
+      // Note: The mock handles the toggle logic
+      expect(dateButton).toBeInTheDocument();
+    });
+  });
+
+  // Range date selection tests
+  describe('Range Date Selection', () => {
+    it('handles range date selection', async () => {
+      const handleSelect = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Calendar mode="range" selected={undefined} onSelect={handleSelect} />
+      );
+      
+      const today = new Date();
+      const dateStr = today.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      
+      await user.click(dateButton);
+      
+      expect(handleSelect).toHaveBeenCalled();
+      const selected = handleSelect.mock.calls[0][0];
+      expect(selected).toHaveProperty('from');
+    });
+  });
+
+  // Disabled dates tests
+  describe('Disabled Dates', () => {
+    it('disables dates based on function', () => {
+      const disabledDate = new Date();
+      disabledDate.setDate(disabledDate.getDate() + 1);
+      
+      renderWithProviders(
+        <Calendar
+          mode="single"
+          disabled={(date) => date > new Date()}
+        />
+      );
+      
+      const dateStr = disabledDate.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      expect(dateButton).toBeDisabled();
+    });
+
+    it('prevents selection of disabled dates', async () => {
+      const handleSelect = vi.fn();
+      const user = userEvent.setup();
+      
+      const tomorrow = new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      
+      renderWithProviders(
+        <Calendar
+          mode="single"
+          selected={undefined}
+          onSelect={handleSelect}
+          disabled={(date) => date > new Date()}
+        />
+      );
+      
+      const dateStr = tomorrow.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      
+      await user.click(dateButton);
+      
+      expect(handleSelect).not.toHaveBeenCalled();
+    });
+
+    it('disables past dates', () => {
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      
+      renderWithProviders(
+        <Calendar
+          mode="single"
+          disabled={(date) => date < new Date()}
+        />
+      );
+      
+      const dateStr = yesterday.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      expect(dateButton).toBeDisabled();
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<Calendar mode="single" />);
+      const calendar = screen.getByTestId('calendar');
+      expect(calendar).toBeInTheDocument();
+    });
+
+    it('marks selected dates with aria-selected', () => {
+      const selectedDate = new Date();
+      renderWithProviders(
+        <Calendar mode="single" selected={selectedDate} />
+      );
+      
+      const dateStr = selectedDate.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      expect(dateButton).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('marks unselected dates with aria-selected="false"', () => {
+      const selectedDate = new Date();
+      const unselectedDate = new Date();
+      unselectedDate.setDate(selectedDate.getDate() + 1);
+      
+      renderWithProviders(
+        <Calendar mode="single" selected={selectedDate} />
+      );
+      
+      const dateStr = unselectedDate.toISOString().split('T')[0];
+      const dateButton = screen.getByTestId(`date-${dateStr}`);
+      expect(dateButton).toHaveAttribute('aria-selected', 'false');
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('works with controlled state', () => {
+      const TestComponent = () => {
+        const [date, setDate] = React.useState<Date | undefined>(undefined);
+        return (
+          <div>
+            <Calendar mode="single" selected={date} onSelect={setDate} />
+            <div data-testid="selected-date">
+              {date ? date.toISOString().split('T')[0] : 'No date selected'}
+            </div>
+          </div>
+        );
+      };
+      
+      renderWithProviders(<TestComponent />);
+      
+      expect(screen.getByTestId('selected-date')).toHaveTextContent('No date selected');
+    });
+
+    it('handles undefined selected prop gracefully', () => {
+      renderWithProviders(<Calendar mode="single" selected={undefined} />);
+      const calendar = screen.getByTestId('calendar');
+      expect(calendar).toBeInTheDocument();
+    });
+
+    it('handles null selected prop gracefully', () => {
+      renderWithProviders(<Calendar mode="single" selected={null as any} />);
+      const calendar = screen.getByTestId('calendar');
+      expect(calendar).toBeInTheDocument();
+    });
+  });
+});
+

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,192 @@
+/**
+ * @file Calendar Component
+ * @package @jmruthers/pace-core
+ * @module Components/Calendar
+ * @since 0.5.141
+ *
+ * A date picker calendar component built on react-day-picker.
+ * Provides accessible date selection with keyboard navigation and ARIA support.
+ *
+ * Features:
+ * - Single, range, and multiple date selection modes
+ * - Date disabling (past dates, weekends, etc.)
+ * - Localization support
+ * - Keyboard navigation
+ * - Accessible date selection
+ * - Customizable styling
+ *
+ * @example
+ * ```tsx
+ * // Single date selection
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ * />
+ * 
+ * // Date range selection
+ * <Calendar
+ *   mode="range"
+ *   selected={dateRange}
+ *   onSelect={setDateRange}
+ * />
+ * 
+ * // Multiple date selection
+ * <Calendar
+ *   mode="multiple"
+ *   selected={dates}
+ *   onSelect={setDates}
+ * />
+ * 
+ * // With disabled dates
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   disabled={(date) => date < new Date()}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Keyboard navigation (Arrow keys, Page Up/Down, Home, End)
+ * - Screen reader support with proper ARIA attributes
+ * - Focus management
+ * - Date announcements
+ */
+
+import * as React from 'react';
+import { DayPicker, type DayPickerProps } from 'react-day-picker';
+import { cn } from '../../utils/core/cn';
+
+// ============================================================================
+// CALENDAR COMPONENT
+// ============================================================================
+
+export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'classNames' | 'styles'> {
+  /**
+   * Additional CSS classes to apply to the calendar wrapper
+   */
+  className?: string;
+  /**
+   * Custom classNames for DayPicker sub-components
+   */
+  classNames?: DayPickerProps['classNames'];
+}
+
+/**
+ * Calendar component
+ * A flexible, accessible calendar component for date selection.
+ * Built on react-day-picker with pace-core styling.
+ * 
+ * @param props - Calendar configuration and styling
+ * @param ref - Forwarded ref (not used directly, but maintained for API consistency)
+ * @returns JSX.Element - The rendered calendar element
+ * 
+ * @example
+ * ```tsx
+ * // Single date selection
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ * />
+ * 
+ * // With disabled dates
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   disabled={(date) => date < new Date()}
+ * />
+ * ```
+ */
+const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
+  ({ className, classNames, mode, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('p-3', className)}>
+        <DayPicker
+          mode={mode}
+          className="rounded-md border border-sec-200 bg-background"
+          classNames={{
+            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+            month: 'space-y-4',
+            caption: 'flex justify-center pt-1 relative items-center',
+            caption_label: 'text-sm font-medium',
+            nav: 'space-x-1 flex items-center',
+            nav_button: cn(
+              'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+              'border border-input hover:bg-acc-100',
+              'inline-flex items-center justify-center rounded-md',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2'
+            ),
+            nav_button_previous: 'absolute left-1',
+            nav_button_next: 'absolute right-1',
+            table: 'w-full border-collapse space-y-1',
+            head_row: 'flex',
+            head_cell: 'text-sec-600 rounded-md w-9 font-normal text-[0.8rem]',
+            row: 'flex w-full mt-2',
+            cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-acc-50/50 [&:has([aria-selected])]:bg-acc-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+            day: cn(
+              'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+              'hover:bg-acc-100 hover:text-main-600',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
+              'inline-flex items-center justify-center rounded-md'
+            ),
+            day_range_end: 'day-range-end',
+            day_selected: 'bg-main-600 text-main-50 hover:bg-main-600 hover:text-main-50 focus:bg-main-600 focus:text-main-50',
+            day_today: 'bg-sec-100 text-main-600 font-semibold',
+            day_outside: 'day-outside text-sec-400 opacity-50 aria-selected:bg-acc-50/50 aria-selected:text-sec-400 aria-selected:opacity-30',
+            day_disabled: 'text-sec-400 opacity-50 cursor-not-allowed',
+            day_range_middle: 'aria-selected:bg-acc-100 aria-selected:text-main-600',
+            day_hidden: 'invisible',
+            ...classNames,
+          }}
+          components={{
+            IconLeft: ({ ...props }) => (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+                {...props}
+              >
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            ),
+            IconRight: ({ ...props }) => (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+                {...props}
+              >
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            ),
+            ...props.components,
+          }}
+          {...(props as any)}
+        />
+      </div>
+    );
+  }
+);
+
+Calendar.displayName = 'Calendar';
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export { Calendar };
+

package/src/components/Calendar/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file Calendar component exports
+ * @package @jmruthers/pace-core
+ * @module Calendar
+ * @since 0.5.141
+ */
+
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+