@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/calendar/createCalendarCell.ts

@@ -0,0 +1,187 @@
+/**
+ * createCalendarCell hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a calendar cell.
+ * Based on @react-aria/calendar useCalendarCell
+ */
+
+import { createSignal, createMemo, onMount } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import type { CalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
+import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaCalendarCellProps {
+  /** The date represented by the cell. */
+  date: DateValue;
+  /** Whether the cell is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface CalendarCellAria {
+  /** Props for the cell element (td or gridcell). */
+  cellProps: Record<string, unknown>;
+  /** Props for the button inside the cell. */
+  buttonProps: Record<string, unknown>;
+  /** Whether the cell is selected. */
+  isSelected: boolean;
+  /** Whether the cell is focused. */
+  isFocused: boolean;
+  /** Whether the cell is disabled. */
+  isDisabled: boolean;
+  /** Whether the cell is unavailable (e.g., booked date). */
+  isUnavailable: boolean;
+  /** Whether the cell is outside the visible month. */
+  isOutsideMonth: boolean;
+  /** Whether the cell represents today. */
+  isToday: boolean;
+  /** Whether the cell is pressed. */
+  isPressed: boolean;
+  /** The formatted date string. */
+  formattedDate: string;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a calendar cell.
+ */
+export function createCalendarCell<T extends CalendarState>(
+  props: MaybeAccessor<AriaCalendarCellProps>,
+  state: T,
+  ref?: () => HTMLElement | null
+): CalendarCellAria {
+  const getProps = () => access(props);
+  const [isPressed, setIsPressed] = createSignal(false);
+  const timeZone = getLocalTimeZone();
+
+  // Get the date from props
+  const date = createMemo(() => getProps().date as CalendarDate);
+
+  // Check states
+  const isSelected = createMemo(() => state.isSelected(date()));
+  const isFocused = createMemo(() => state.isCellFocused(date()));
+  const isDisabled = createMemo(() => {
+    return getProps().isDisabled || state.isCellDisabled(date());
+  });
+  const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
+  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
+  const isToday = createMemo(() => isTodayUtil(date(), timeZone));
+
+  // Format the date for display
+  const formattedDate = createMemo(() => {
+    return date().day.toString();
+  });
+
+  // Handle pointer down - this is where selection happens
+  // Using pointerdown instead of click ensures selection happens immediately
+  // before focus changes can interfere with the event
+  const handlePointerDown = (e: PointerEvent) => {
+    if (!isDisabled() && !isUnavailable()) {
+      setIsPressed(true);
+      // Select the date on pointer down for immediate response
+      // This matches React Aria's behavior of using onPressStart
+      state.selectDate(date());
+      // Prevent default to avoid double-triggering with onClick
+      e.preventDefault();
+    }
+  };
+
+  // Handle click - kept for accessibility (keyboard Enter/Space)
+  const handleClick = () => {
+    // Only select on click if not already selected via pointerdown
+    // This handles keyboard activation (Enter/Space)
+    if (!isDisabled() && !isUnavailable()) {
+      state.selectDate(date());
+    }
+  };
+
+  const handlePointerUp = () => {
+    setIsPressed(false);
+  };
+
+  // Focus the button when it becomes focused in state
+  onMount(() => {
+    const element = ref?.();
+    if (element && isFocused()) {
+      element.focus();
+    }
+  });
+
+  // Cell props (for the td element)
+  const cellProps = createMemo(() => ({
+    role: 'gridcell',
+    'aria-disabled': isDisabled() || undefined,
+    'aria-selected': isSelected() || undefined,
+  }));
+
+  // Button props (for the interactive element inside)
+  const buttonProps = createMemo(() => {
+    const d = date();
+    const formatter = new DateFormatter('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+
+    return {
+      role: 'button',
+      tabIndex: isFocused() ? 0 : -1,
+      'aria-label': formatter.format(d.toDate(timeZone)),
+      'aria-disabled': isDisabled() || undefined,
+      'aria-pressed': isPressed() || undefined,
+      disabled: isDisabled(),
+      onClick: handleClick,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerUp,
+      onFocus: () => {
+        // Only update if this cell isn't already the focused date
+        // This prevents infinite loops when focus is programmatically set
+        if (!state.isCellFocused(d)) {
+          state.setFocusedDate(d);
+        }
+        state.setFocused(true);
+      },
+    };
+  });
+
+  return {
+    get cellProps() {
+      return cellProps();
+    },
+    get buttonProps() {
+      return buttonProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isUnavailable() {
+      return isUnavailable();
+    },
+    get isOutsideMonth() {
+      return isOutsideMonth();
+    },
+    get isToday() {
+      return isToday();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+    get formattedDate() {
+      return formattedDate();
+    },
+  };
+}

package/src/calendar/createCalendarGrid.ts

@@ -0,0 +1,140 @@
+/**
+ * createCalendarGrid hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a calendar grid.
+ * Based on @react-aria/calendar useCalendarGrid
+ */
+
+import { createMemo, onMount, onCleanup } from 'solid-js';
+import { type MaybeAccessor } from '../utils/reactivity';
+import type { CalendarState, CalendarDate } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaCalendarGridProps {
+  /** The start date of the grid (defaults to start of focused month). */
+  startDate?: CalendarDate;
+  /** The end date of the grid (defaults to end of focused month). */
+  endDate?: CalendarDate;
+  /** The number of weeks to display. */
+  weekdayStyle?: 'narrow' | 'short' | 'long';
+}
+
+export interface CalendarGridAria {
+  /** Props for the grid element (table or grid role). */
+  gridProps: Record<string, unknown>;
+  /** Props for the header row. */
+  headerProps: Record<string, unknown>;
+  /** Week day labels for the header. */
+  weekDays: string[];
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a calendar grid.
+ */
+export function createCalendarGrid<T extends CalendarState>(
+  _props: MaybeAccessor<AriaCalendarGridProps>,
+  state: T,
+  ref?: () => HTMLElement | null
+): CalendarGridAria {
+  // Week days for headers
+  const weekDays = createMemo(() => state.weekDays());
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (state.isDisabled()) return;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        state.focusPreviousDay();
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        state.focusNextDay();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        state.focusPreviousWeek();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        state.focusNextWeek();
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        if (e.shiftKey) {
+          state.focusPreviousSection(); // Previous year
+        } else {
+          state.focusPreviousPage(); // Previous month
+        }
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        if (e.shiftKey) {
+          state.focusNextSection(); // Next year
+        } else {
+          state.focusNextPage(); // Next month
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        state.focusPageStart();
+        break;
+      case 'End':
+        e.preventDefault();
+        state.focusPageEnd();
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        state.selectFocusedDate();
+        break;
+    }
+  };
+
+  // Register keyboard listener
+  onMount(() => {
+    const element = ref?.();
+    if (element) {
+      element.addEventListener('keydown', handleKeyDown);
+      onCleanup(() => {
+        element.removeEventListener('keydown', handleKeyDown);
+      });
+    }
+  });
+
+  // Grid props
+  const gridProps = createMemo(() => ({
+    role: 'grid',
+    'aria-readonly': state.isReadOnly() || undefined,
+    'aria-disabled': state.isDisabled() || undefined,
+    tabIndex: state.isFocused() ? 0 : -1,
+    onFocus: () => state.setFocused(true),
+    onBlur: () => state.setFocused(false),
+    onKeyDown: handleKeyDown,
+  }));
+
+  // Header props
+  const headerProps = createMemo(() => ({
+    role: 'row',
+  }));
+
+  return {
+    get gridProps() {
+      return gridProps();
+    },
+    get headerProps() {
+      return headerProps();
+    },
+    get weekDays() {
+      return weekDays();
+    },
+  };
+}

package/src/calendar/createRangeCalendar.ts

@@ -0,0 +1,136 @@
+/**
+ * createRangeCalendar hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a range calendar component.
+ * Based on @react-aria/calendar useRangeCalendar
+ */
+
+import { createMemo } from 'solid-js';
+import { createId } from '../ssr';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import { mergeProps } from '../utils/mergeProps';
+import type { RangeCalendarState } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaRangeCalendarProps {
+  /** An ID for the calendar. */
+  id?: string;
+  /** Whether the calendar is disabled. */
+  isDisabled?: boolean;
+  /** Whether the calendar is read-only. */
+  isReadOnly?: boolean;
+  /** An accessible label for the calendar. */
+  'aria-label'?: string;
+  /** The ID of an element that labels the calendar. */
+  'aria-labelledby'?: string;
+  /** The ID of an element that describes the calendar. */
+  'aria-describedby'?: string;
+}
+
+export interface RangeCalendarAria {
+  /** Props for the calendar container element. */
+  calendarProps: Record<string, unknown>;
+  /** Props for the previous button. */
+  prevButtonProps: Record<string, unknown>;
+  /** Props for the next button. */
+  nextButtonProps: Record<string, unknown>;
+  /** Props for the title/heading element. */
+  titleProps: Record<string, unknown>;
+  /** An accessible label for the title. */
+  title: string;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a range calendar component.
+ */
+export function createRangeCalendar<T extends RangeCalendarState>(
+  props: MaybeAccessor<AriaRangeCalendarProps>,
+  state: T
+): RangeCalendarAria {
+  const getProps = () => access(props);
+  const id = createId(getProps().id);
+  const titleId = createId();
+
+  // Title (e.g., "December 2024")
+  const title = createMemo(() => state.title());
+
+  // Previous button props
+  const prevButtonProps = createMemo(() => {
+    const p = getProps();
+    const isDisabled = p.isDisabled || state.isDisabled();
+
+    return {
+      'aria-label': 'Previous month',
+      onClick: () => {
+        if (!isDisabled) {
+          state.focusPreviousPage();
+        }
+      },
+      disabled: isDisabled,
+      tabIndex: -1,
+    };
+  });
+
+  // Next button props
+  const nextButtonProps = createMemo(() => {
+    const p = getProps();
+    const isDisabled = p.isDisabled || state.isDisabled();
+
+    return {
+      'aria-label': 'Next month',
+      onClick: () => {
+        if (!isDisabled) {
+          state.focusNextPage();
+        }
+      },
+      disabled: isDisabled,
+      tabIndex: -1,
+    };
+  });
+
+  // Title props
+  const titleProps = createMemo(() => ({
+    id: titleId,
+    'aria-live': 'polite' as const,
+  }));
+
+  // Calendar container props
+  const calendarProps = createMemo(() => {
+    const p = getProps();
+
+    return mergeProps(
+      {
+        id,
+        role: 'group',
+        'aria-labelledby': p['aria-labelledby'] ?? titleId,
+        'aria-label': p['aria-label'],
+        'aria-describedby': p['aria-describedby'],
+      }
+    );
+  });
+
+  return {
+    get calendarProps() {
+      return calendarProps();
+    },
+    get prevButtonProps() {
+      return prevButtonProps();
+    },
+    get nextButtonProps() {
+      return nextButtonProps();
+    },
+    get titleProps() {
+      return titleProps();
+    },
+    get title() {
+      return title();
+    },
+  };
+}

package/src/calendar/createRangeCalendarCell.ts

@@ -0,0 +1,186 @@
+/**
+ * createRangeCalendarCell hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a range calendar cell.
+ * Based on @react-aria/calendar useCalendarCell (with range support)
+ */
+
+import { createSignal, createMemo } from 'solid-js';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import type { RangeCalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
+import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaRangeCalendarCellProps {
+  /** The date represented by the cell. */
+  date: DateValue;
+  /** Whether the cell is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface RangeCalendarCellAria {
+  /** Props for the cell element (td or gridcell). */
+  cellProps: Record<string, unknown>;
+  /** Props for the button inside the cell. */
+  buttonProps: Record<string, unknown>;
+  /** Whether the cell is within the selected range. */
+  isSelected: boolean;
+  /** Whether the cell is the start of the selection. */
+  isSelectionStart: boolean;
+  /** Whether the cell is the end of the selection. */
+  isSelectionEnd: boolean;
+  /** Whether the cell is focused. */
+  isFocused: boolean;
+  /** Whether the cell is disabled. */
+  isDisabled: boolean;
+  /** Whether the cell is unavailable (e.g., booked date). */
+  isUnavailable: boolean;
+  /** Whether the cell is outside the visible month. */
+  isOutsideMonth: boolean;
+  /** Whether the cell represents today. */
+  isToday: boolean;
+  /** Whether the cell is pressed. */
+  isPressed: boolean;
+  /** The formatted date string. */
+  formattedDate: string;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a range calendar cell.
+ */
+export function createRangeCalendarCell<T extends RangeCalendarState>(
+  props: MaybeAccessor<AriaRangeCalendarCellProps>,
+  state: T,
+  _ref?: () => HTMLElement | null
+): RangeCalendarCellAria {
+  const getProps = () => access(props);
+  const [isPressed, setIsPressed] = createSignal(false);
+  const timeZone = getLocalTimeZone();
+
+  // Get the date from props
+  const date = createMemo(() => getProps().date as CalendarDate);
+
+  // Check states
+  const isSelected = createMemo(() => state.isSelected(date()));
+  const isSelectionStart = createMemo(() => state.isSelectionStart(date()));
+  const isSelectionEnd = createMemo(() => state.isSelectionEnd(date()));
+  const isFocused = createMemo(() => state.isCellFocused(date()));
+  const isDisabled = createMemo(() => {
+    return getProps().isDisabled || state.isCellDisabled(date());
+  });
+  const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
+  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
+  const isToday = createMemo(() => isTodayUtil(date(), timeZone));
+
+  // Format the date for display
+  const formattedDate = createMemo(() => {
+    return date().day.toString();
+  });
+
+  // Handle click
+  const handleClick = () => {
+    if (!isDisabled() && !isUnavailable()) {
+      state.selectDate(date());
+    }
+  };
+
+  // Handle pointer events for pressed state
+  const handlePointerDown = () => {
+    if (!isDisabled() && !isUnavailable()) {
+      setIsPressed(true);
+    }
+  };
+
+  const handlePointerUp = () => {
+    setIsPressed(false);
+  };
+
+  // Handle hover during range selection
+  const handlePointerEnter = () => {
+    if (state.isDragging() && !isDisabled() && !isUnavailable()) {
+      state.setFocusedDate(date());
+    }
+  };
+
+  // Cell props (for the td element)
+  const cellProps = createMemo(() => ({
+    role: 'gridcell',
+    'aria-disabled': isDisabled() || undefined,
+    'aria-selected': isSelected() || undefined,
+  }));
+
+  // Button props (for the interactive element inside)
+  const buttonProps = createMemo(() => {
+    const d = date();
+    const formatter = new DateFormatter('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+
+    return {
+      role: 'button',
+      tabIndex: isFocused() ? 0 : -1,
+      'aria-label': formatter.format(d.toDate(timeZone)),
+      'aria-disabled': isDisabled() || undefined,
+      'aria-pressed': isPressed() || undefined,
+      disabled: isDisabled(),
+      onClick: handleClick,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerUp,
+      onPointerEnter: handlePointerEnter,
+      onFocus: () => {
+        state.setFocusedDate(d);
+        state.setFocused(true);
+      },
+    };
+  });
+
+  return {
+    get cellProps() {
+      return cellProps();
+    },
+    get buttonProps() {
+      return buttonProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isSelectionStart() {
+      return isSelectionStart();
+    },
+    get isSelectionEnd() {
+      return isSelectionEnd();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isUnavailable() {
+      return isUnavailable();
+    },
+    get isOutsideMonth() {
+      return isOutsideMonth();
+    },
+    get isToday() {
+      return isToday();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+    get formattedDate() {
+      return formattedDate();
+    },
+  };
+}

package/src/calendar/index.ts

@@ -0,0 +1,34 @@
+// Calendar
+export {
+  createCalendar,
+  type AriaCalendarProps,
+  type CalendarAria,
+} from './createCalendar';
+
+// Calendar Grid
+export {
+  createCalendarGrid,
+  type AriaCalendarGridProps,
+  type CalendarGridAria,
+} from './createCalendarGrid';
+
+// Calendar Cell
+export {
+  createCalendarCell,
+  type AriaCalendarCellProps,
+  type CalendarCellAria,
+} from './createCalendarCell';
+
+// Range Calendar
+export {
+  createRangeCalendar,
+  type AriaRangeCalendarProps,
+  type RangeCalendarAria,
+} from './createRangeCalendar';
+
+// Range Calendar Cell
+export {
+  createRangeCalendarCell,
+  type AriaRangeCalendarCellProps,
+  type RangeCalendarCellAria,
+} from './createRangeCalendarCell';