@nepdatejs/react 0.0.0-stage → 0.1.1

package/src/hooks.ts

@@ -0,0 +1,476 @@
+import { useId, type ChangeEvent, type KeyboardEvent } from 'react';
+import { getLocale, type CalendarSystem } from '@nepdatejs/core';
+import {
+  createCalendar,
+  type CalendarOptions,
+  type CalendarState,
+  type CalendarStore,
+} from '@nepdatejs/calendar';
+import type { PresetState } from '@nepdatejs/datepicker';
+import {
+  createDatePicker,
+  createDateRangePicker,
+  createDateTimePicker,
+  createMultiDatePicker,
+  type DateTimePickerOptions,
+  type DateTimePickerState,
+  type DateTimePickerStore,
+  type DatePickerOptions,
+  type DatePickerState,
+  type DatePickerStore,
+  type DateRangePickerOptions,
+  type DateRangePickerState,
+  type DateRangePickerStore,
+  type MultiDatePickerOptions,
+  type MultiDatePickerState,
+  type MultiDatePickerStore,
+  type RangeField,
+} from '@nepdatejs/datepicker';
+import { useCalendarBindings, type ButtonProps, type CalendarBindings } from './bindings';
+import { useStore } from './use-store';
+
+/** A standalone calendar: state, actions and prop getters. */
+export function useCalendar(
+  options: CalendarOptions = {},
+): CalendarBindings & { store: CalendarStore } {
+  const { store, state } = useStore<CalendarOptions, CalendarState, CalendarStore>(
+    createCalendar,
+    options,
+  );
+  const bindings = useCalendarBindings(state, store.actions, options.locale, {
+    getSnapshot: () => store.getState(),
+  });
+
+  return { ...bindings, store };
+}
+
+export interface InputProps {
+  id: string;
+  /** Left out for an inline picker, whose calendar is always in the page. */
+  role?: 'combobox';
+  type: 'text';
+  inputMode: 'numeric';
+  autoComplete: 'off';
+  value: string;
+  placeholder: string;
+  'aria-haspopup'?: 'dialog';
+  'aria-expanded'?: boolean;
+  'aria-controls': string;
+  'aria-invalid'?: true;
+  'aria-describedby'?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export interface PanelProps {
+  id: string;
+  /** 'group' for an inline picker. */
+  role: 'dialog' | 'group';
+  'aria-label': string;
+}
+
+export interface DatePickerBindings {
+  readonly state: DatePickerState;
+  readonly actions: DatePickerStore['actions'];
+  readonly store: DatePickerStore;
+  /** Prop getters for the panel's calendar. */
+  readonly calendar: CalendarBindings;
+  readonly ids: { input: string; panel: string; hint: string };
+  getInputProps(extra?: { id?: string | undefined }): InputProps;
+  getToggleProps(): ButtonProps & { 'aria-expanded': boolean; 'aria-controls': string };
+  getClearProps(): ButtonProps;
+  /** The BS/AD switch inside the input. */
+  getSwitchProps(): ButtonProps;
+  /** One button of the BS/AD segment in the panel footer. */
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getTodayProps(): ButtonProps;
+  getPanelProps(): PanelProps;
+  /** A shortcut button (see state.presets). */
+  getPresetProps(preset: PresetState): ButtonProps;
+}
+
+/** A BS/AD date picker without markup: wire the getters to your own elements. */
+export function useDatePicker(
+  options: DatePickerOptions & { id?: string | undefined } = {},
+): DatePickerBindings {
+  const { id: givenId, ...storeOptions } = options;
+  const { store, state } = useStore<DatePickerOptions, DatePickerState, DatePickerStore>(
+    createDatePicker,
+    storeOptions,
+  );
+  const generated = useId();
+  const input = givenId ?? `ndp${generated.replace(/:/g, '')}`;
+  const ids = { input, panel: `${input}-panel`, hint: `${input}-hint` };
+  const labels = getLocale(options.locale);
+  const calendar = useCalendarBindings(
+    state.calendarState,
+    store.calendar.actions,
+    options.locale,
+    {
+      getSnapshot: () => store.calendar.getState(),
+      onDayActivate: (date) => {
+        store.actions.select(date);
+      },
+    },
+  );
+  const hasHint = state.error !== null || state.equivalentText !== null;
+
+  return {
+    state,
+    actions: store.actions,
+    store,
+    calendar,
+    ids,
+    getInputProps: () => ({
+      id: ids.input,
+      ...popupProps(state),
+      type: 'text',
+      inputMode: 'numeric',
+      autoComplete: 'off',
+      value: state.text,
+      placeholder: state.placeholder,
+      'aria-controls': ids.panel,
+      ...(state.error ? { 'aria-invalid': true as const } : {}),
+      ...(hasHint ? { 'aria-describedby': ids.hint } : {}),
+      onChange: (event) => {
+        store.actions.type(event.target.value);
+      },
+      onBlur: () => {
+        store.actions.blur();
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'ArrowDown' && (event.altKey || state.text === '')) {
+          event.preventDefault();
+          store.actions.open();
+        }
+      },
+    }),
+    getToggleProps: () => ({
+      type: 'button',
+      'aria-label': labels.labels.openCalendar,
+      'aria-expanded': state.open,
+      'aria-controls': ids.panel,
+      onClick: () => {
+        store.actions.toggle();
+      },
+    }),
+    getClearProps: () => ({
+      type: 'button',
+      'aria-label': labels.labels.clear,
+      onClick: () => {
+        store.actions.clear();
+      },
+    }),
+    getSwitchProps: () => {
+      const other: CalendarSystem = state.calendar === 'BS' ? 'AD' : 'BS';
+
+      return {
+        type: 'button',
+        'aria-label': `${labels.labels.calendar}: ${labels.calendarNames[state.calendar]} → ${labels.calendarNames[other]}`,
+        onClick: () => {
+          store.actions.switchCalendar(other);
+        },
+      };
+    },
+    getCalendarOptionProps: (option) => ({
+      type: 'button',
+      'aria-pressed': state.calendar === option,
+      onClick: () => {
+        store.actions.switchCalendar(option);
+      },
+    }),
+    getTodayProps: () => ({
+      type: 'button',
+      onClick: () => {
+        store.actions.selectToday();
+      },
+    }),
+    getPanelProps: () => ({
+      id: ids.panel,
+      role: state.inline ? 'group' : 'dialog',
+      'aria-label': labels.labels.chooseDate,
+    }),
+    getPresetProps: (preset) =>
+      presetProps(preset, (id) => store.actions.applyPreset(id)),
+  };
+}
+
+/** Combobox ARIA for a popup picker; an inline picker's input is a plain text field. */
+export function popupProps(state: {
+  readonly open: boolean;
+  readonly inline: boolean;
+}): Pick<InputProps, 'role' | 'aria-haspopup' | 'aria-expanded'> {
+  return state.inline
+    ? {}
+    : { role: 'combobox', 'aria-haspopup': 'dialog', 'aria-expanded': state.open };
+}
+
+function presetProps(preset: PresetState, apply: (id: string) => boolean): ButtonProps {
+  return {
+    type: 'button',
+    'aria-pressed': preset.isActive,
+    disabled: preset.isDisabled,
+    onClick: () => {
+      apply(preset.id);
+    },
+  };
+}
+
+export interface DateRangePickerBindings {
+  readonly state: DateRangePickerState;
+  readonly actions: DateRangePickerStore['actions'];
+  readonly store: DateRangePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: { start: string; end: string; panel: string; hint: string };
+  getInputProps(field: RangeField): Omit<InputProps, 'onChange' | 'onBlur'> & {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+  };
+  getToggleProps(): ButtonProps & { 'aria-expanded': boolean; 'aria-controls': string };
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getPanelProps(): PanelProps;
+  getPresetProps(preset: PresetState): ButtonProps;
+}
+
+/** A BS/AD date range picker without markup. */
+export function useDateRangePicker(
+  options: DateRangePickerOptions = {},
+): DateRangePickerBindings {
+  const { store, state } = useStore<
+    DateRangePickerOptions,
+    DateRangePickerState,
+    DateRangePickerStore
+  >(createDateRangePicker, options);
+  const base = `ndp${useId().replace(/:/g, '')}`;
+  const ids = {
+    start: `${base}-start`,
+    end: `${base}-end`,
+    panel: `${base}-panel`,
+    hint: `${base}-hint`,
+  };
+  const labels = getLocale(options.locale);
+  const calendar = useCalendarBindings(
+    state.calendarState,
+    store.calendar.actions,
+    options.locale,
+    {
+      getSnapshot: () => store.calendar.getState(),
+      onDayActivate: (date) => {
+        store.actions.select(date);
+      },
+    },
+  );
+  const texts: Record<RangeField, string> = {
+    start: state.startText,
+    end: state.endText,
+  };
+
+  return {
+    state,
+    actions: store.actions,
+    store,
+    calendar,
+    ids,
+    getInputProps: (field) => {
+      const invalid =
+        state.error !== null &&
+        (state.error.field === field || state.error.field === 'range');
+
+      return {
+        id: ids[field],
+        ...popupProps(state),
+        type: 'text',
+        inputMode: 'numeric',
+        autoComplete: 'off',
+        value: texts[field],
+        placeholder: state.placeholder,
+        'aria-controls': ids.panel,
+        ...(invalid ? { 'aria-invalid': true as const } : {}),
+        ...(state.error ? { 'aria-describedby': ids.hint } : {}),
+        onChange: (event) => {
+          store.actions.type(field, event.target.value);
+        },
+        onBlur: () => {
+          store.actions.blur(field);
+        },
+        onKeyDown: (event) => {
+          if (event.key === 'ArrowDown' && (event.altKey || texts[field] === '')) {
+            event.preventDefault();
+            store.actions.open();
+          }
+        },
+      };
+    },
+    getToggleProps: () => ({
+      type: 'button',
+      'aria-label': labels.labels.openCalendar,
+      'aria-expanded': state.open,
+      'aria-controls': ids.panel,
+      onClick: () => {
+        store.actions.toggle();
+      },
+    }),
+    getCalendarOptionProps: (option) => ({
+      type: 'button',
+      'aria-pressed': state.calendar === option,
+      onClick: () => {
+        store.actions.switchCalendar(option);
+      },
+    }),
+    getPanelProps: () => ({
+      id: ids.panel,
+      role: state.inline ? 'group' : 'dialog',
+      'aria-label': labels.labels.chooseDate,
+    }),
+    getPresetProps: (preset) =>
+      presetProps(preset, (id) => store.actions.applyPreset(id)),
+  };
+}
+
+export interface DateTimePickerBindings {
+  readonly state: DateTimePickerState;
+  readonly actions: DateTimePickerStore['actions'];
+  readonly store: DateTimePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: { date: string; time: string; panel: string; hint: string };
+}
+
+/** A BS/AD date + time picker without markup. The value is a zoned ISO timestamp. */
+export function useDateTimePicker(
+  options: DateTimePickerOptions & { id?: string | undefined } = {},
+): DateTimePickerBindings {
+  const { id: givenId, ...storeOptions } = options;
+  const { store, state } = useStore<
+    DateTimePickerOptions,
+    DateTimePickerState,
+    DateTimePickerStore
+  >(createDateTimePicker, storeOptions);
+  const generated = useId();
+  const base = givenId ?? `ndp${generated.replace(/:/g, '')}`;
+  const calendar = useCalendarBindings(
+    state.calendarState,
+    store.calendar.actions,
+    options.locale,
+    {
+      getSnapshot: () => store.calendar.getState(),
+      onDayActivate: (date) => {
+        store.actions.selectDate(date);
+      },
+    },
+  );
+
+  return {
+    state,
+    actions: store.actions,
+    store,
+    calendar,
+    ids: {
+      date: base,
+      time: `${base}-time`,
+      panel: `${base}-panel`,
+      hint: `${base}-hint`,
+    },
+  };
+}
+
+export interface MultiDatePickerBindings {
+  readonly state: MultiDatePickerState;
+  readonly actions: MultiDatePickerStore['actions'];
+  readonly store: MultiDatePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: { input: string; panel: string; hint: string };
+  getInputProps(): InputProps;
+  getToggleProps(): ButtonProps & { 'aria-expanded': boolean; 'aria-controls': string };
+  getClearProps(): ButtonProps;
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getPanelProps(): PanelProps;
+}
+
+/** A picker for several separate BS/AD days, without markup (PICK-001). */
+export function useMultiDatePicker(
+  options: MultiDatePickerOptions & { id?: string | undefined } = {},
+): MultiDatePickerBindings {
+  const { id: givenId, ...storeOptions } = options;
+  const { store, state } = useStore<
+    MultiDatePickerOptions,
+    MultiDatePickerState,
+    MultiDatePickerStore
+  >(createMultiDatePicker, storeOptions);
+  const generated = useId();
+  const input = givenId ?? `ndp${generated.replace(/:/g, '')}`;
+  const ids = { input, panel: `${input}-panel`, hint: `${input}-hint` };
+  const labels = getLocale(options.locale);
+  const calendar = useCalendarBindings(
+    state.calendarState,
+    store.calendar.actions,
+    options.locale,
+    {
+      getSnapshot: () => store.calendar.getState(),
+      onDayActivate: (date) => {
+        store.actions.select(date);
+      },
+    },
+  );
+
+  return {
+    state,
+    actions: store.actions,
+    store,
+    calendar,
+    ids,
+    getInputProps: () => ({
+      id: ids.input,
+      ...popupProps(state),
+      type: 'text',
+      inputMode: 'numeric',
+      autoComplete: 'off',
+      value: state.text,
+      placeholder: state.placeholder,
+      'aria-controls': ids.panel,
+      ...(state.error
+        ? { 'aria-invalid': true as const, 'aria-describedby': ids.hint }
+        : {}),
+      onChange: (event) => {
+        store.actions.type(event.target.value);
+      },
+      onBlur: () => {
+        store.actions.blur();
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'ArrowDown' && (event.altKey || state.text === '')) {
+          event.preventDefault();
+          store.actions.open();
+        }
+      },
+    }),
+    getToggleProps: () => ({
+      type: 'button',
+      'aria-label': labels.labels.openCalendar,
+      'aria-expanded': state.open,
+      'aria-controls': ids.panel,
+      onClick: () => {
+        store.actions.toggle();
+      },
+    }),
+    getClearProps: () => ({
+      type: 'button',
+      'aria-label': labels.labels.clear,
+      onClick: () => {
+        store.actions.clear();
+      },
+    }),
+    getCalendarOptionProps: (option) => ({
+      type: 'button',
+      'aria-pressed': state.calendar === option,
+      onClick: () => {
+        store.actions.switchCalendar(option);
+      },
+    }),
+    getPanelProps: () => ({
+      id: ids.panel,
+      role: state.inline ? 'group' : 'dialog',
+      'aria-label': labels.labels.chooseDate,
+    }),
+  };
+}

package/src/icons.tsx

@@ -0,0 +1,35 @@
+import type { ReactElement } from 'react';
+
+const PATHS = {
+  'chevron-left': ['M10 3.5 5.5 8l4.5 4.5'],
+  'chevron-right': ['M6 3.5 10.5 8 6 12.5'],
+  calendar: [
+    'M2 6.5h12',
+    'M5.5 1.5v3',
+    'M10.5 1.5v3',
+    'M4 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z',
+  ],
+  close: ['M4 4l8 8', 'M12 4l-8 8'],
+} as const;
+
+export type IconName = keyof typeof PATHS;
+
+/** The Figma icon set, 16px, stroked with currentColor. */
+export function Icon({ name }: { name: IconName }): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {PATHS[name].map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @nepdatejs/react: BS/AD date picker and calendar for React. Headless hooks
+ * (useCalendar, useDatePicker, useDateRangePicker, …) and styled components that
+ * use the @nepdatejs/styles classes (import '@nepdatejs/styles' once).
+ */
+export { Calendar, type CalendarProps } from './calendar';
+export { DatePicker, type DatePickerProps } from './date-picker';
+export { DateRangePicker, type DateRangePickerProps } from './date-range-picker';
+export { DateTimePicker, type DateTimePickerProps } from './date-time-picker';
+export { MultiDatePicker, type MultiDatePickerProps } from './multi-date-picker';
+export { TimeColumns } from './time-columns';
+export {
+  bothDates,
+  DateText,
+  shortDate,
+  ShortDate,
+  type DateTextProps,
+} from './date-text';
+export { CalendarBody } from './calendar-body';
+export { Icon, type IconName } from './icons';
+export * from './headless';