@dashforge/tw 0.9.0-beta → 0.9.1-beta

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import {
+  formatLongDate,
+  resolveCalendarKey,
+  useCalendar,
+} from '@dashforge/calendar-core';
+import type { ISODate } from '@dashforge/calendar-core';
+import { cn } from '../../utils/cn.js';
+import { calendarDayVariants, calendarVariants } from './calendar.variants.js';
+import type { CalendarProps } from './calendar.types.js';
+
+// Inline 16×16 stroke chevrons — no icon dependency (tw convention).
+function ChevronLeftIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M10 4 6 8l4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="m6 4 4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * `<Calendar>` — a standalone, inline month-grid date picker.
+ *
+ * The Tailwind presentation layer over the headless `useCalendar` engine
+ * from `@dashforge/calendar-core` (the same engine the MUI `@dashforge/ui`
+ * calendar consumes — only the skin differs). Implements the WCAG grid
+ * pattern with roving tab-index focus.
+ *
+ * It is a primitive: no form-bridge / RBAC integration — use `<DatePicker>`
+ * for a form-bound date field.
+ */
+export function Calendar(props: CalendarProps) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    month,
+    year,
+    defaultMonth,
+    defaultYear,
+    onMonthChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    isDateDisabled,
+    weekStartDay,
+    locale,
+    today,
+    disabled = false,
+    autoFocus = false,
+    sx,
+    slotProps,
+    testId,
+    'aria-label': ariaLabel = 'Calendar',
+  } = props;
+
+  const isValueControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState<ISODate | null>(
+    defaultValue ?? null,
+  );
+  const selectedValue: ISODate | null = isValueControlled
+    ? value
+    : internalValue;
+
+  const handleSelect = useCallback(
+    (iso: ISODate) => {
+      if (!isValueControlled) {
+        setInternalValue(iso);
+      }
+      onChange?.(iso);
+    },
+    [isValueControlled, onChange],
+  );
+
+  const calendar = useCalendar({
+    selected: selectedValue,
+    month,
+    year,
+    defaultMonth,
+    defaultYear,
+    onMonthChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    isDateDisabled,
+    weekStartDay,
+    locale,
+    today,
+    onSelect: handleSelect,
+  });
+
+  // Roving focus: the active day cell holds DOM focus; it is moved only
+  // after a keyboard interaction (or on mount when `autoFocus`). `focus`
+  // uses `preventScroll` so opening the calendar inside a popup never
+  // scroll-jumps the page before the popup is positioned.
+  const focusedCellRef = useRef<HTMLButtonElement | null>(null);
+  const shouldFocusRef = useRef(autoFocus);
+
+  useEffect(() => {
+    if (shouldFocusRef.current && focusedCellRef.current) {
+      focusedCellRef.current.focus({ preventScroll: true });
+      shouldFocusRef.current = false;
+    }
+  }, [calendar.focusedDate]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) {
+        return;
+      }
+      const action = resolveCalendarKey(event.key);
+      if (action === null) {
+        return;
+      }
+      event.preventDefault();
+      shouldFocusRef.current = true;
+      switch (action) {
+        case 'select':
+          calendar.selectDate(calendar.focusedDate);
+          break;
+        case 'monthForward':
+          calendar.goToNextMonth();
+          break;
+        case 'monthBackward':
+          calendar.goToPreviousMonth();
+          break;
+        default:
+          calendar.navigate(action);
+      }
+    },
+    [disabled, calendar],
+  );
+
+  const resolvedLocale = locale ?? 'en-US';
+  const v = calendarVariants({ disabled });
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn(v.root(), sx, slotProps?.root?.className)}
+    >
+      {/* Header: month navigation + label */}
+      <div className={cn(v.header(), slotProps?.header?.className)}>
+        <button
+          type="button"
+          className={v.navButton()}
+          disabled={disabled}
+          aria-label="Previous month"
+          onClick={() => {
+            calendar.goToPreviousMonth();
+          }}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <span aria-live="polite" className={v.monthLabel()}>
+          {calendar.monthLabel}
+        </span>
+        <button
+          type="button"
+          className={v.navButton()}
+          disabled={disabled}
+          aria-label="Next month"
+          onClick={() => {
+            calendar.goToNextMonth();
+          }}
+        >
+          <ChevronRightIcon />
+        </button>
+      </div>
+
+      {/* Grid */}
+      <div
+        role="grid"
+        aria-label={ariaLabel}
+        onKeyDown={handleKeyDown}
+        className={cn(v.grid(), slotProps?.grid?.className)}
+      >
+        <div role="row" className={v.weekdayRow()}>
+          {calendar.weekdayNames.map((dayName, index) => (
+            <span
+              key={`weekday-${String(index)}`}
+              role="columnheader"
+              className={v.weekday()}
+            >
+              {dayName}
+            </span>
+          ))}
+        </div>
+
+        {calendar.weeks.map((week) => (
+          <div key={week.key} role="row" className={v.weekRow()}>
+            {week.days.map((day) => {
+              const isActiveCell = day.iso === calendar.focusedDate;
+              return (
+                <span key={day.iso} role="gridcell" className="flex">
+                  <button
+                    type="button"
+                    ref={isActiveCell ? focusedCellRef : null}
+                    tabIndex={isActiveCell ? 0 : -1}
+                    disabled={disabled}
+                    aria-label={formatLongDate(
+                      { year: day.year, month: day.month, day: day.day },
+                      resolvedLocale,
+                    )}
+                    aria-current={day.isToday ? 'date' : undefined}
+                    aria-pressed={day.isSelected}
+                    aria-disabled={day.isDisabled}
+                    onClick={() => {
+                      calendar.selectDate(day.iso);
+                    }}
+                    className={cn(
+                      calendarDayVariants({
+                        siblingMonth: day.isSiblingMonth,
+                        today: day.isToday,
+                        selected: day.isSelected,
+                        disabled: day.isDisabled,
+                      }),
+                      slotProps?.day?.className,
+                    )}
+                  >
+                    {day.day}
+                  </button>
+                </span>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/Calendar/calendar.types.ts

@@ -0,0 +1,65 @@
+import type { ISODate, WeekDay } from '@dashforge/calendar-core';
+
+/** Per-slot `className` overrides for `<Calendar>`. */
+export interface CalendarSlotProps {
+  root?: { className?: string };
+  header?: { className?: string };
+  grid?: { className?: string };
+  /** Applied to every day-cell button. */
+  day?: { className?: string };
+}
+
+/**
+ * Props for the `<Calendar>` primitive — a standalone, inline month grid.
+ *
+ * `Calendar` is NOT a form field (no bridge / RBAC integration). It is the
+ * low-level building block used inside `<DatePicker>`. For a form-bound date
+ * input use `<DatePicker>`.
+ *
+ * Dates are ISO `YYYY-MM-DD` strings throughout. The headless date engine is
+ * `@dashforge/calendar-core` — shared with the MUI `@dashforge/ui` calendar.
+ */
+export interface CalendarProps {
+  /** Selected date (controlled). */
+  value?: ISODate | null;
+  /** Initial selected date (uncontrolled). */
+  defaultValue?: ISODate | null;
+  /** Fired when a day is chosen. */
+  onChange?: (value: ISODate) => void;
+  /** Controlled displayed month (1-indexed). Pair with `year`. */
+  month?: number;
+  /** Controlled displayed year. Pair with `month`. */
+  year?: number;
+  /** Initial displayed month (1-indexed, uncontrolled). */
+  defaultMonth?: number;
+  /** Initial displayed year (uncontrolled). */
+  defaultYear?: number;
+  /** Fired when the displayed month changes. */
+  onMonthChange?: (month: number, year: number) => void;
+  /** Earliest selectable date (inclusive). */
+  minDate?: ISODate;
+  /** Latest selectable date (inclusive). */
+  maxDate?: ISODate;
+  /** Explicit list of disabled dates. */
+  disabledDates?: readonly ISODate[];
+  /** Predicate marking arbitrary dates disabled. */
+  isDateDisabled?: (date: ISODate) => boolean;
+  /** Weekday of the grid's first column (`0` = Sunday). Default `0`. */
+  weekStartDay?: WeekDay;
+  /** BCP-47 locale for month/weekday names. Default `"en-US"`. */
+  locale?: string;
+  /** Overrides "today" (ISO `YYYY-MM-DD`), mainly for testing. */
+  today?: ISODate;
+  /** Disables the whole calendar. */
+  disabled?: boolean;
+  /** Moves DOM focus to the active day cell on mount. */
+  autoFocus?: boolean;
+  /** Accessible label for the grid. Default `"Calendar"`. */
+  'aria-label'?: string;
+  /** Root-level Tailwind class override. */
+  sx?: string;
+  /** Per-slot `className` overrides. */
+  slotProps?: CalendarSlotProps;
+  /** Test id applied to the root element. */
+  testId?: string;
+}

package/src/components/Calendar/calendar.variants.ts

@@ -0,0 +1,64 @@
+import { tv } from 'tailwind-variants';
+
+/**
+ * Structural slots for `<Calendar>`.
+ *
+ * Theme identity: every class is a bare neutral / brand token-backed
+ * Tailwind class. The `dashforgePreset()` CSS-variable swap auto-inverts
+ * the neutral palette, so there are NO `dark:` variants here (a `dark:` on
+ * a neutral class would double-invert — see `_shared/themeIdentity.test.ts`).
+ */
+export const calendarVariants = tv({
+  slots: {
+    root: 'inline-flex w-fit flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 select-none',
+    header: 'flex items-center justify-between gap-1',
+    navButton:
+      'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[1rem] text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-40',
+    monthLabel: 'flex-1 text-center text-sm font-semibold text-neutral-900',
+    grid: 'flex flex-col gap-1 focus:outline-none',
+    weekdayRow: 'grid grid-cols-7 gap-1',
+    weekday:
+      'flex h-8 items-center justify-center text-xs font-semibold text-neutral-500',
+    weekRow: 'grid grid-cols-7 gap-1',
+  },
+  variants: {
+    disabled: {
+      true: { root: 'opacity-60' },
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+  },
+});
+
+/**
+ * Per-day-cell recipe. Each of the 42 grid cells is rendered with its own
+ * state (`siblingMonth` / `today` / `selected` / `disabled`).
+ */
+export const calendarDayVariants = tv({
+  base: 'flex h-9 w-9 items-center justify-center rounded-md text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+  variants: {
+    siblingMonth: {
+      true: 'text-neutral-400',
+    },
+    today: {
+      true: 'font-bold ring-1 ring-inset ring-primary-400',
+    },
+    selected: {
+      true: 'bg-primary-600 text-white hover:bg-primary-600',
+    },
+    disabled: {
+      true: 'cursor-default text-neutral-300 opacity-60 hover:bg-transparent',
+    },
+  },
+  compoundVariants: [
+    // A selected cell drops the "today" ring — the solid fill is enough.
+    { selected: true, today: true, class: 'ring-0' },
+  ],
+  defaultVariants: {
+    siblingMonth: false,
+    today: false,
+    selected: false,
+    disabled: false,
+  },
+});

package/src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { DatePicker } from './DatePicker.js';
+
+beforeAll(() => {
+  // Radix Popover (Floating UI) needs ResizeObserver — jsdom lacks it.
+  if (!('ResizeObserver' in globalThis)) {
+    class ResizeObserverStub {
+      observe(): void {
+        /* no-op */
+      }
+      unobserve(): void {
+        /* no-op */
+      }
+      disconnect(): void {
+        /* no-op */
+      }
+    }
+    (globalThis as { ResizeObserver?: unknown }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+describe('DatePicker', () => {
+  it('renders a labelled trigger with the placeholder', () => {
+    render(
+      <DatePicker name="birthday" label="Birthday" placeholder="Pick one" />,
+    );
+    expect(screen.queryByText('Birthday')).not.toBeNull();
+    expect(screen.getByRole('button').textContent).toContain('Pick one');
+  });
+
+  it('shows a localized controlled value', () => {
+    render(<DatePicker name="d" value="2026-05-20" />);
+    expect(screen.getByRole('button').textContent).toContain('May 20, 2026');
+  });
+
+  it('opens and toggles the calendar popover from the trigger', () => {
+    render(<DatePicker name="d" defaultValue="2026-05-20" />);
+    const trigger = screen.getByRole('button');
+    expect(screen.queryByRole('dialog')).toBeNull();
+    fireEvent.click(trigger);
+    expect(screen.queryByRole('dialog')).not.toBeNull();
+    fireEvent.click(trigger);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('selects a date from the popover, updates the trigger and closes', () => {
+    const onChange = vi.fn();
+    render(
+      <DatePicker name="d" defaultValue="2026-05-20" onChange={onChange} />,
+    );
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('button', { name: /May 15, 2026/ }));
+    expect(onChange).toHaveBeenCalledWith('2026-05-15');
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(screen.getByRole('button').textContent).toContain('May 15, 2026');
+  });
+
+  it('keeps a controlled value fixed but still reports the change', () => {
+    const onChange = vi.fn();
+    render(<DatePicker name="d" value="2026-05-20" onChange={onChange} />);
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('button', { name: /May 15, 2026/ }));
+    expect(onChange).toHaveBeenCalledWith('2026-05-15');
+    expect(screen.getByRole('button').textContent).toContain('May 20, 2026');
+  });
+
+  it('does not open the popover when disabled', () => {
+    render(<DatePicker name="d" disabled />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+});