@jmruthers/pace-core 0.5.184 → 0.5.185

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.test.tsx

@@ -0,0 +1,314 @@
+/**
+ * @file DatePickerWithTimezone Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DatePickerWithTimezone/__tests__
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for DatePickerWithTimezone component.
+ * Tests cover all major functionality, edge cases, and accessibility.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DatePickerWithTimezone } from './DatePickerWithTimezone';
+import { Calendar } from '../Calendar';
+
+// Mock timezone utilities
+vi.mock('../../utils/timezone', () => ({
+  getUserTimeZone: vi.fn(() => 'America/New_York')
+}));
+
+// Mock Calendar component
+vi.mock('../Calendar', () => ({
+  Calendar: vi.fn(({ selected, onSelect, ...props }) => (
+    <div data-testid="calendar" {...props}>
+      <button
+        data-testid="calendar-day"
+        onClick={() => onSelect?.(new Date('2024-01-15'))}
+      >
+        Day 15
+      </button>
+      {selected && <span data-testid="selected-date">{selected.toISOString()}</span>}
+    </div>
+  ))
+}));
+
+// Mock Button component
+vi.mock('../Button', () => ({
+  Button: vi.fn(({ children, onClick, ...props }) => (
+    <button data-testid="done-button" onClick={onClick} {...props}>
+      {children}
+    </button>
+  ))
+}));
+
+// Mock lucide-react Clock icon
+vi.mock('lucide-react', () => ({
+  Clock: ({ className, 'aria-hidden': ariaHidden, ...props }: any) => (
+    <svg
+      data-testid="clock-icon"
+      className={className}
+      aria-hidden={ariaHidden}
+      {...props}
+    >
+      <path d="M12 2v10l4 4" />
+    </svg>
+  )
+}));
+
+describe('DatePickerWithTimezone Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+      expect(screen.getByText(/Timezone:/)).toBeInTheDocument();
+    });
+
+    it('renders with selected date', () => {
+      const onSelect = vi.fn();
+      const selected = new Date('2024-01-15');
+      render(<DatePickerWithTimezone selected={selected} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('selected-date')).toBeInTheDocument();
+    });
+
+    it('renders with custom timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="America/Los_Angeles"
+        />
+      );
+
+      expect(screen.getByText('America/Los_Angeles')).toBeInTheDocument();
+    });
+
+    it('displays "Local" when timezone matches user timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="America/New_York"
+        />
+      );
+
+      expect(screen.getByText('Local')).toBeInTheDocument();
+    });
+
+    it('renders with Done button when onDone is provided', () => {
+      const onSelect = vi.fn();
+      const onDone = vi.fn();
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} onDone={onDone} />
+      );
+
+      expect(screen.getByTestId('done-button')).toBeInTheDocument();
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('does not render Done button when onDone is not provided', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.queryByTestId('done-button')).not.toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const onSelect = vi.fn();
+      const { container } = render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          className="custom-class"
+        />
+      );
+
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Date Selection', () => {
+    it('calls onSelect when date is selected', async () => {
+      const onSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      const dayButton = screen.getByTestId('calendar-day');
+      await user.click(dayButton);
+
+      expect(onSelect).toHaveBeenCalled();
+      expect(onSelect).toHaveBeenCalledWith(expect.any(Date));
+    });
+
+    it('handles date selection with existing selected date', async () => {
+      const onSelect = vi.fn();
+      const user = userEvent.setup();
+      const selected = new Date('2024-01-10');
+
+      render(<DatePickerWithTimezone selected={selected} onSelect={onSelect} />);
+
+      const dayButton = screen.getByTestId('calendar-day');
+      await user.click(dayButton);
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+
+  describe('Done Button', () => {
+    it('calls onDone when Done button is clicked', async () => {
+      const onSelect = vi.fn();
+      const onDone = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} onDone={onDone} />
+      );
+
+      const doneButton = screen.getByTestId('done-button');
+      await user.click(doneButton);
+
+      expect(onDone).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onSelect when Done button is clicked', async () => {
+      const onSelect = vi.fn();
+      const onDone = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} onDone={onDone} />
+      );
+
+      const doneButton = screen.getByTestId('done-button');
+      await user.click(doneButton);
+
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Timezone Display', () => {
+    it('displays user timezone as "Local" when no timezone provided', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.getByText('Local')).toBeInTheDocument();
+    });
+
+    it('displays timezone name when different from user timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="Europe/London"
+        />
+      );
+
+      expect(screen.getByText('Europe/London')).toBeInTheDocument();
+    });
+
+    it('displays Clock icon', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} />
+      );
+
+      expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined selected date', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+      expect(screen.queryByTestId('selected-date')).not.toBeInTheDocument();
+    });
+
+    it('handles null selected date', () => {
+      const onSelect = vi.fn();
+      // @ts-expect-error - Testing edge case
+      render(<DatePickerWithTimezone selected={null} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA labels for timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="America/Los_Angeles"
+        />
+      );
+
+      const timezoneLabel = screen.getByLabelText('Timezone America/Los_Angeles');
+      expect(timezoneLabel).toBeInTheDocument();
+    });
+
+    it('marks Clock icon as decorative', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} />
+      );
+
+      const clockIcon = screen.getByTestId('clock-icon');
+      expect(clockIcon).toBeInTheDocument();
+      expect(clockIcon).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('supports keyboard navigation', async () => {
+      const onSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      const dayButton = screen.getByTestId('calendar-day');
+      await user.tab();
+
+      // Calendar should be keyboard accessible
+      expect(dayButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Calendar Integration', () => {
+    it('passes correct props to Calendar component', () => {
+      const onSelect = vi.fn();
+      const selected = new Date('2024-01-15');
+      const MockedCalendar = vi.mocked(Calendar);
+
+      render(<DatePickerWithTimezone selected={selected} onSelect={onSelect} />);
+
+      expect(MockedCalendar).toHaveBeenCalledWith(
+        expect.objectContaining({
+          mode: 'single',
+          selected: selected,
+          onSelect: onSelect,
+          initialFocus: true,
+          captionLayout: 'dropdown-buttons',
+          fromYear: 1900,
+          toYear: 2100,
+          className: 'p-0'
+        }),
+        expect.anything()
+      );
+    });
+  });
+});
+

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.tsx

@@ -0,0 +1,126 @@
+/**
+ * @file DatePickerWithTimezone Component
+ * @package @jmruthers/pace-core
+ * @module Components/DatePickerWithTimezone
+ * @since 0.1.0
+ *
+ * Date picker component that displays timezone information alongside the calendar.
+ * Provides a calendar interface with timezone context for date selection.
+ *
+ * Features:
+ * - Calendar date selection
+ * - Timezone display (shows "Local" when matches user timezone)
+ * - Optional "Done" button
+ * - Accessible date selection
+ * - Keyboard navigation support
+ *
+ * @example
+ * ```tsx
+ * import { DatePickerWithTimezone } from '@jmruthers/pace-core/components';
+ * import { useState } from 'react';
+ *
+ * function DateSelector() {
+ *   const [date, setDate] = useState<Date>();
+ *
+ *   return (
+ *     <DatePickerWithTimezone
+ *       selected={date}
+ *       onSelect={setDate}
+ *       timezone="America/New_York"
+ *       onDone={() => console.log('Date selected')}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Focus management
+ * - Proper ARIA attributes
+ */
+
+import * as React from 'react';
+import { Calendar } from '../Calendar';
+import { Button } from '../Button';
+import { Clock } from 'lucide-react';
+import { getUserTimeZone } from '../../utils/timezone';
+import { cn } from '../../utils/core/cn';
+
+/**
+ * Props for the DatePickerWithTimezone component
+ */
+export interface DatePickerWithTimezoneProps {
+  /**
+   * Currently selected date
+   */
+  selected?: Date;
+  /**
+   * Date selection handler
+   */
+  onSelect: (date: Date | undefined) => void;
+  /**
+   * Optional callback when "Done" button is clicked
+   */
+  onDone?: () => void;
+  /**
+   * Timezone to display (defaults to user's timezone)
+   */
+  timezone?: string;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * DatePickerWithTimezone component
+ * Date picker with timezone information display
+ *
+ * @param props - DatePickerWithTimezone configuration
+ * @returns JSX.Element - The rendered date picker with timezone
+ */
+export function DatePickerWithTimezone({
+  selected,
+  onSelect,
+  onDone,
+  timezone,
+  className
+}: DatePickerWithTimezoneProps) {
+  const userTimezone = getUserTimeZone();
+  const displayTimezone = timezone || userTimezone;
+  const timezoneDisplay = displayTimezone === userTimezone ? 'Local' : displayTimezone;
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="p-3">
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={onSelect}
+          initialFocus
+          captionLayout="dropdown-buttons"
+          fromYear={1900}
+          toYear={2100}
+          className="p-0"
+        />
+      </div>
+
+      <div className="flex items-center justify-between border-t border-border px-3 py-2">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Clock className="h-4 w-4" aria-hidden="true" />
+          <span>
+            Timezone: <span aria-label={`Timezone ${timezoneDisplay}`}>{timezoneDisplay}</span>
+          </span>
+        </div>
+        {onDone && (
+          <Button onClick={onDone} size="sm" className="h-8">
+            Done
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/src/components/DatePickerWithTimezone/README.md

@@ -0,0 +1,135 @@
+# DatePickerWithTimezone Component
+
+Date picker component that displays timezone information alongside the calendar.
+
+## Overview
+
+The `DatePickerWithTimezone` component provides a calendar interface for date selection with timezone context. It displays the timezone information below the calendar and optionally includes a "Done" button.
+
+## Features
+
+- Calendar date selection
+- Timezone display (shows "Local" when matches user timezone)
+- Optional "Done" button
+- Accessible date selection
+- Keyboard navigation support
+- Integration with pace-core Calendar component
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { DatePickerWithTimezone } from '@jmruthers/pace-core/components';
+import { useState } from 'react';
+
+function DateSelector() {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <DatePickerWithTimezone
+      selected={date}
+      onSelect={setDate}
+      timezone="America/New_York"
+    />
+  );
+}
+```
+
+### With Done Button
+
+```tsx
+<DatePickerWithTimezone
+  selected={date}
+  onSelect={setDate}
+  timezone="America/New_York"
+  onDone={() => {
+    console.log('Date selected:', date);
+    // Close dialog or perform other actions
+  }}
+/>
+```
+
+### Using User's Timezone
+
+```tsx
+// When timezone is not provided, uses user's browser timezone
+<DatePickerWithTimezone
+  selected={date}
+  onSelect={setDate}
+/>
+```
+
+## API
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `selected` | `Date \| undefined` | - | Currently selected date |
+| `onSelect` | `(date: Date \| undefined) => void` | **required** | Date selection handler |
+| `onDone` | `() => void` | - | Optional callback when "Done" button is clicked |
+| `timezone` | `string` | User's timezone | Timezone to display (IANA timezone string) |
+| `className` | `string` | - | Additional CSS classes |
+
+## Behavior
+
+### Timezone Display
+
+- When `timezone` is not provided: Uses the user's browser timezone
+- When `timezone` matches user's timezone: Shows "Local"
+- When `timezone` is different: Shows the timezone name (e.g., "America/New_York")
+
+### Date Selection
+
+The component uses the pace-core `Calendar` component for date selection. Selected dates are passed directly to `onSelect` without timezone conversion (dates are timezone-agnostic).
+
+### Done Button
+
+When `onDone` is provided, a "Done" button appears in the footer. Clicking it calls the `onDone` callback without affecting the selected date.
+
+## Accessibility
+
+- WCAG 2.1 AA compliant
+- Keyboard navigation support (via Calendar component)
+- Screen reader friendly
+- Proper ARIA labels for timezone information
+- Focus management
+
+## Integration
+
+### With Dialog
+
+```tsx
+import { Dialog, DatePickerWithTimezone } from '@jmruthers/pace-core/components';
+
+function DatePickerDialog() {
+  const [date, setDate] = useState<Date>();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DatePickerWithTimezone
+          selected={date}
+          onSelect={setDate}
+          onDone={() => setOpen(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+## Edge Cases
+
+- **Undefined selected date**: Calendar displays with no date selected
+- **Null selected date**: Treated as undefined
+
+## Dependencies
+
+- `@jmruthers/pace-core/components/Calendar` - Calendar component
+- `@jmruthers/pace-core/components/Button` - Button component
+- `lucide-react` - Clock icon
+- `@jmruthers/pace-core/utils/timezone` - Timezone utilities
+

package/src/components/DatePickerWithTimezone/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file DatePickerWithTimezone Component Exports
+ * @package @jmruthers/pace-core
+ * @module Components/DatePickerWithTimezone
+ * @since 0.1.0
+ */
+
+export { DatePickerWithTimezone } from './DatePickerWithTimezone';
+export type { DatePickerWithTimezoneProps } from './DatePickerWithTimezone';
+