@tcn/ui 0.0.1

package/src/inputs/date_picker/date_picker_input.stories.tsx

@@ -0,0 +1,108 @@
+import { useSignalValue } from '@tcn/state';
+import { VStack } from '../../stacks/v_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { HStack } from '../../stacks/h_stack.js';
+import React, { useState } from 'react';
+import { Button } from '../../actions/index.js';
+import { DatePickerInput } from './date_picker_input.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+
+export default {
+  title: 'Date Picker Input',
+};
+
+function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
+  const value = useSignalValue(presenter.valueBroadcast);
+
+  function showToday() {
+    const date = new Date();
+    presenter.setVisibleYear(date.getFullYear());
+    presenter.setVisibleMonth(date.getMonth());
+  }
+
+  function showSelected() {
+    if (value != null) {
+      presenter.setVisibleYear(value.getFullYear());
+      presenter.setVisibleMonth(value.getMonth());
+    }
+  }
+
+  function clear() {
+    presenter.clear();
+  }
+
+  return (
+    <VStack height="auto">
+      <Spacer height="8px" />
+      <HStack height="auto" width="auto">
+        <Spacer />
+        <Button hierarchy="tertiary" onClick={showToday}>
+          Show Today
+        </Button>
+        <Spacer width="4px" />
+        <Button hierarchy="tertiary" disabled={value == null} onClick={showSelected}>
+          Show Selected
+        </Button>
+        <Spacer />
+      </HStack>
+      <Spacer height="8px" />
+      <Button width="100%" onClick={clear}>
+        Clear
+      </Button>
+    </VStack>
+  );
+}
+
+export function Baseline() {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return <DatePickerInput value={value} onChange={setValue} width="300px" />;
+}
+
+export function WithTime() {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <DatePickerInput
+      value={value}
+      onChange={setValue}
+      showTime
+      width="300px"
+      renderActions={presenter => {
+        return <DatePickerActions presenter={presenter} />;
+      }}
+    />
+  );
+}
+
+export function WithTimeInterval() {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <DatePickerInput
+      value={value}
+      onChange={setValue}
+      showTime
+      timeIntervalInMinutes={5}
+      width="300px"
+      renderActions={presenter => {
+        return <DatePickerActions presenter={presenter} />;
+      }}
+    />
+  );
+}
+
+export function CountryCode() {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <DatePickerInput
+      value={value}
+      onChange={setValue}
+      countryCode="fr-FR"
+      selectDateMessage="Sélectionner la date"
+      showTime
+      width="300px"
+    />
+  );
+}

package/src/inputs/date_picker/date_picker_input.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Hierarchy } from '../../utils/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { Popper } from '../../overlay/popper/popper.js';
+import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
+import { Button } from '../../actions/index.js';
+import { DatePicker } from './date_picker.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+import { FocusRedirect } from '../../utils/index.js';
+import styles from './date_picker_input.module.css';
+
+export interface DatePickerInputProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {
+  value?: Date | null;
+  disabled?: boolean;
+  onChange?: (date: Date | null) => void;
+  onError?: (error: string | null) => void;
+  width?: string;
+  maxWidth?: string;
+  minWidth?: string;
+  showTime?: boolean;
+  timeIntervalInMinutes?: number;
+  disabledDates?: Date[] | undefined;
+  countryCode?: string;
+  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;
+  min?: Date;
+  max?: Date;
+  hierarchy?: Hierarchy;
+  selectDateMessage?: string;
+  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;
+}
+
+export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInputProps>(
+  (
+    {
+      value = new Date(),
+      onChange,
+      onError,
+      min = new Date('01/01/1924'),
+      max = new Date('01/01/2124'),
+      disabled,
+      width = '100%',
+      maxWidth,
+      minWidth,
+      showTime = false,
+      timeIntervalInMinutes = 15,
+      hierarchy = 'secondary',
+      disabledDates,
+      selectDateMessage = 'Select Date',
+      countryCode,
+      renderActions,
+      onTimeSelected,
+      ...props
+    }: DatePickerInputProps,
+    ref: React.Ref<HTMLButtonElement>
+  ) => {
+    const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);
+    const isOpen = anchorElement != null;
+    const pickerRef = useRef<HTMLDivElement | null>(null);
+
+    const isException = useCallback((target: HTMLElement) => {
+      return target.closest('.suggestion-list') != null;
+    }, []);
+
+    const formatter = useMemo(() => {
+      const formatOptions: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      };
+
+      if (showTime) {
+        formatOptions.hour = 'numeric';
+        formatOptions.minute = '2-digit';
+        formatOptions.hour12 = true;
+      }
+
+      return new Intl.DateTimeFormat(countryCode, formatOptions);
+    }, [countryCode, showTime]);
+
+    const formattedDate = value != null ? formatter.format(value) : selectDateMessage;
+
+    function openPicker(e: React.MouseEvent<HTMLButtonElement>) {
+      setAnchorElement(e.currentTarget);
+    }
+
+    function closePicker() {
+      setAnchorElement(null);
+    }
+
+    useLayoutEffect(() => {
+      requestAnimationFrame(() => {
+        if (anchorElement != null) {
+          pickerRef.current && pickerRef.current.focus();
+        }
+      });
+    }, [anchorElement]);
+
+    function processKeyInput(event: React.KeyboardEvent) {
+      if (event.key === 'Escape') {
+        closePicker();
+      }
+    }
+
+    function handleRedirect() {
+      const picker = pickerRef.current;
+
+      if (picker != null) {
+        picker.focus();
+      }
+    }
+
+    function dateSelected(date: Date | null) {
+      onChange?.(date);
+      !showTime && closePicker();
+    }
+
+    function timeSelected(hour: number, minutes: number, seconds: number) {
+      onTimeSelected?.(hour, minutes, seconds);
+      closePicker();
+    }
+
+    return (
+      <>
+        <Button
+          ref={ref}
+          className={classNames(styles.button, 'select')}
+          hAlign="start"
+          disabled={disabled}
+          hierarchy={hierarchy}
+          onClick={openPicker}
+          width={width}
+          maxWidth={maxWidth}
+          {...props}
+        >
+          <span className="ellipsis">{formattedDate}</span>
+        </Button>
+        <Popper
+          anchorElement={anchorElement}
+          disableClickAway
+          veil
+          onVeilClick={closePicker}
+          onClose={closePicker}
+          verticalAnchor="bottom"
+          horizontalAnchor="start"
+          verticalOrigin="top"
+          horizontalOrigin="start"
+          open={isOpen}
+          isClickAwayException={isException}
+          isScrollAwayException={isException}
+          restoreFocus
+        >
+          <ZStack
+            padding="8px"
+            className={classNames(styles.popover, 'date-picker-popover')}
+            onKeyDown={processKeyInput}
+          >
+            <DatePicker
+              ref={pickerRef}
+              value={value}
+              onChange={dateSelected}
+              min={min}
+              max={max}
+              showTime={showTime}
+              onError={onError}
+              disabled={disabled}
+              disabledDates={disabledDates}
+              countryCode={countryCode}
+              renderActions={renderActions}
+              onTimeSelected={timeSelected}
+              timeIntervalInMinutes={timeIntervalInMinutes}
+            />
+            <FocusRedirect onRedirect={handleRedirect} />
+          </ZStack>
+        </Popper>
+      </>
+    );
+  }
+);

package/src/inputs/date_picker/date_picker_presenter.ts

@@ -0,0 +1,426 @@
+import { Signal } from '@tcn/state';
+import type { CalendarDate } from '../../utils/calendar/calendar_date.js';
+import { CalendarDatesGenerator } from '../../utils/calendar/calendar_dates_generator.js';
+
+export interface DatePickerState {
+  error: string | null;
+  visibleYear: number;
+  visibleMonth: number;
+  visibleDates: CalendarDate[];
+  canNavigateToNextMonth: boolean;
+  canNavigateToPreviousMonth: boolean;
+  showTime: boolean;
+  timeIntervalInMinutes: number;
+  minVisibleTimeInMilliseconds: number;
+  maxVisibleTimeInMilliseconds: number;
+  min: Date | null;
+  max: Date | null;
+  disabledDates: Date[];
+}
+
+const defaultMinVisibleTimeInMilliseconds = 0;
+const defaultMaxVisibleTimeInMilliseconds = 24 * 1000 * 60 * 60;
+
+export class DatePickerPresenter {
+  private _value: Signal<Date | null>;
+  private _error: Signal<string | null>;
+  private _state: Signal<DatePickerState>;
+  private _calendarDatesGenerator: CalendarDatesGenerator;
+  private _dateUtility: Date;
+
+  get stateBroadcast() {
+    return this._state.broadcast;
+  }
+
+  get valueBroadcast() {
+    return this._value.broadcast;
+  }
+
+  get errorBroadcast() {
+    return this._error.broadcast;
+  }
+
+  constructor(
+    value: Date | null,
+    visibleYear: number,
+    visibleMonth: number,
+    showTime: boolean,
+    timeIntervalInMinutes = 15
+  ) {
+    const today = new Date();
+    const year = value == null ? today.getFullYear() : value.getFullYear();
+    const month = value == null ? today.getMonth() : value.getMonth();
+
+    this._dateUtility = new Date();
+    this._calendarDatesGenerator = new CalendarDatesGenerator(year, month);
+    this._dateUtility.setFullYear(year);
+    this._dateUtility.setMonth(month);
+
+    this._value = new Signal(value);
+    this._error = new Signal<string | null>(null);
+    const state: DatePickerState = {
+      error: null,
+      visibleYear,
+      visibleMonth,
+      visibleDates: this._calendarDatesGenerator.dates,
+      canNavigateToNextMonth: this._canNavigateToMonth(
+        visibleMonth + 1,
+        visibleYear,
+        null,
+        null
+      ),
+      canNavigateToPreviousMonth: this._canNavigateToMonth(
+        visibleMonth - 1,
+        visibleYear,
+        null,
+        null
+      ),
+      showTime,
+      timeIntervalInMinutes: timeIntervalInMinutes,
+      minVisibleTimeInMilliseconds: defaultMinVisibleTimeInMilliseconds,
+      maxVisibleTimeInMilliseconds: defaultMaxVisibleTimeInMilliseconds,
+      min: null,
+      max: null,
+      disabledDates: [],
+    };
+
+    this._state = new Signal(state);
+  }
+
+  initialize() {
+    this._validate(this._value.get(), this._error.get(), this._state.get());
+  }
+
+  selectDate(date: Date | null) {
+    if (date?.getTime() === this._value.get()?.getTime()) {
+      return;
+    }
+
+    this._value.transform(value => {
+      if (date == null || value == null) {
+        value = date;
+      } else {
+        const clonedDate = new Date(date);
+        clonedDate.setHours(value.getHours(), value.getMinutes(), value.getSeconds());
+
+        value = clonedDate;
+      }
+
+      value && this._keepTimeWithinBounds(value);
+      this._validate(value, this._error.get(), this._state.get());
+
+      return value;
+    });
+  }
+
+  private _keepTimeWithinBounds(date: Date) {
+    const state = this._state.get();
+    const offsetDate = new Date(date);
+    offsetDate.setHours(0, 0, 0, 0);
+
+    const offset = date.getTime() - offsetDate.getTime();
+
+    if (offset < state.minVisibleTimeInMilliseconds) {
+      date.setHours(0, 0, 0, 0);
+      date.setTime(date.getTime() + state.minVisibleTimeInMilliseconds);
+    }
+
+    if (offset > state.maxVisibleTimeInMilliseconds) {
+      date.setHours(0, 0, 0, 0);
+      date.setTime(date.getTime() + state.maxVisibleTimeInMilliseconds);
+    }
+
+    if (state.min && date.getTime() < state.min.getTime()) {
+      date.setTime(state.min.getTime());
+    }
+
+    if (state.max && date.getTime() > state.max.getTime()) {
+      date.setTime(state.max.getTime());
+    }
+  }
+
+  private _validate(date: Date | null, error: string | null, state: DatePickerState) {
+    let validationError: string | null = null;
+
+    if (date != null) {
+      const time = date.getTime();
+      const minTime = state.min == null ? -Infinity : state.min.getTime();
+      const maxTime = state.max == null ? Infinity : state.max.getTime();
+
+      if (time < minTime) {
+        validationError = 'Selected date is outside acceptable range.';
+      } else if (time >= maxTime) {
+        validationError = 'Selected date is outside acceptable range.';
+      }
+
+      const isOnDisabledDate = state.disabledDates.some(
+        d =>
+          d.getDate() === date.getDate() &&
+          d.getMonth() === date.getMonth() &&
+          d.getFullYear() === date.getFullYear()
+      );
+
+      if (isOnDisabledDate) {
+        validationError = 'Selected date is disabled.';
+      }
+    }
+
+    if (validationError !== error) {
+      this._state.transform(s => {
+        s.error = validationError;
+        return s;
+      });
+    }
+  }
+
+  setShowTime(showTime: boolean) {
+    if (this._state.get().showTime === showTime) {
+      return;
+    }
+
+    this._state.transform(s => {
+      s.showTime = showTime;
+      return s;
+    });
+  }
+
+  setVisibleYear(year: number) {
+    if (this._state.get().visibleYear === year) {
+      return;
+    }
+
+    const state = this._state.get();
+
+    this._dateUtility.setFullYear(year);
+    this._dateUtility.setDate(1);
+    this._dateUtility.setMonth(state.visibleMonth);
+
+    year = this._dateUtility.getFullYear();
+    let month = this._dateUtility.getMonth();
+
+    const newDateTime = this._dateUtility.getTime();
+    const minDateTime = state.min?.getTime() ?? -Infinity;
+    const maxDateTime = state.max?.getTime() ?? Infinity;
+
+    if (state.min && newDateTime < minDateTime) {
+      year = state.min.getFullYear();
+      month = state.min.getMonth();
+    }
+
+    if (state.max && newDateTime >= maxDateTime) {
+      const date = new Date(state.max);
+      date.setMilliseconds(date.getMilliseconds() - 1);
+
+      year = date.getFullYear();
+      month = date.getMonth();
+    }
+
+    this._state.transform(s => {
+      s.visibleYear = year;
+      s.visibleMonth = month;
+
+      this._calendarDatesGenerator.updateDates(year, month);
+      this._updateNavigationAvailability(s);
+      return s;
+    });
+  }
+
+  private _updateNavigationAvailability(s: DatePickerState) {
+    s.canNavigateToNextMonth = this._canNavigateToMonth(
+      s.visibleMonth + 1,
+      s.visibleYear,
+      s.min,
+      s.max
+    );
+    s.canNavigateToPreviousMonth = this._canNavigateToMonth(
+      s.visibleMonth - 1,
+      s.visibleYear,
+      s.min,
+      s.max
+    );
+  }
+
+  setVisibleMonth(month: number) {
+    if (this._state.get().visibleMonth === month) {
+      return;
+    }
+
+    const state = this._state.get();
+
+    this._dateUtility.setFullYear(state.visibleYear);
+    this._dateUtility.setDate(1);
+    this._dateUtility.setMonth(month);
+
+    month = this._dateUtility.getMonth();
+    let year = this._dateUtility.getFullYear();
+
+    const newDateTime = this._dateUtility.getTime();
+    const minDateTime = state.min?.getTime() ?? -Infinity;
+    const maxDateTime = state.max?.getTime() ?? Infinity;
+
+    if (state.min && newDateTime < minDateTime) {
+      year = state.min.getFullYear();
+      month = state.min.getMonth();
+    }
+
+    if (state.max && newDateTime >= maxDateTime) {
+      const date = new Date(state.max);
+      date.setMilliseconds(date.getMilliseconds() - 1);
+
+      year = date.getFullYear();
+      month = date.getMonth();
+    }
+
+    this._state.transform(s => {
+      s.visibleMonth = month;
+      s.visibleYear = year;
+
+      this._updateNavigationAvailability(s);
+      this._calendarDatesGenerator.updateDates(year, month);
+      return s;
+    });
+  }
+
+  private _canNavigateToMonth(
+    month: number,
+    year: number,
+    minDate: Date | null,
+    maxDate: Date | null
+  ) {
+    this._dateUtility.setFullYear(year);
+    this._dateUtility.setMonth(month);
+    this._dateUtility.setDate(1);
+    this._dateUtility.setHours(0, 0, 0, 0);
+
+    const startTime = this._dateUtility.getTime();
+
+    this._dateUtility.setFullYear(year);
+    this._dateUtility.setMonth(month + 1);
+    this._dateUtility.setDate(1);
+
+    const endTime = this._dateUtility.getTime();
+
+    const minDateTime = minDate?.getTime() ?? -Infinity;
+    const maxDateTime = maxDate?.getTime() ?? Infinity;
+
+    const start = Math.max(minDateTime, startTime);
+    const end = Math.min(maxDateTime, endTime);
+
+    return start < end;
+  }
+
+  setMinDate(value: Date | null) {
+    const state = this._state.get();
+    if (state.min && state.min.getTime() === value?.getTime()) {
+      return;
+    }
+
+    this._state.transform(s => {
+      if (value == null) {
+        s.min = null;
+      } else {
+        s.min = new Date(value);
+      }
+
+      this._updateNavigationAvailability(s);
+      this._validate(this._value.get(), this._error.get(), s);
+      return s;
+    });
+  }
+
+  setMaxDate(value: Date | null) {
+    const state = this._state.get();
+
+    if (state.max && state.max.getTime() === value?.getTime()) {
+      return;
+    }
+
+    this._state.transform(s => {
+      if (value == null) {
+        s.max = null;
+      } else {
+        s.max = new Date(value);
+      }
+
+      this._updateNavigationAvailability(s);
+      this._validate(this._value.get(), this._error.get(), s);
+      return s;
+    });
+  }
+
+  setMinVisibleTime(timeInMilliseconds: number) {
+    if (this._state.get().minVisibleTimeInMilliseconds === timeInMilliseconds) {
+      return;
+    }
+
+    this._state.transform(s => {
+      s.minVisibleTimeInMilliseconds = Math.max(
+        timeInMilliseconds,
+        defaultMinVisibleTimeInMilliseconds
+      );
+
+      return s;
+    });
+  }
+
+  setMaxVisibleTime(timeInMilliseconds: number) {
+    if (this._state.get().maxVisibleTimeInMilliseconds === timeInMilliseconds) {
+      return;
+    }
+
+    this._state.transform(s => {
+      s.maxVisibleTimeInMilliseconds = Math.min(
+        timeInMilliseconds,
+        defaultMaxVisibleTimeInMilliseconds
+      );
+
+      return s;
+    });
+  }
+
+  setDisabledDates(dates: Date[]) {
+    this._state.transform(s => {
+      s.disabledDates = dates;
+      this._validate(this._value.get(), this._error.get(), s);
+      return s;
+    });
+  }
+
+  clear() {
+    this.selectDate(null);
+  }
+
+  setTime(hours: number, minutes: number, seconds: number) {
+    if (
+      this._value.get() == null ||
+      (this._value.get()?.getHours() === hours &&
+        this._value.get()?.getMinutes() === minutes &&
+        this._value.get()?.getSeconds() === seconds)
+    ) {
+      return;
+    }
+
+    const currentValue = this._value.get();
+    if (currentValue == null) {
+      return;
+    }
+
+    const clonedValue = new Date(currentValue);
+    clonedValue.setHours(hours);
+    clonedValue.setMinutes(minutes);
+    clonedValue.setSeconds(seconds);
+
+    this._value.set(clonedValue);
+  }
+
+  setTimeIntervalInMinutes(intervalInMinutes: number) {
+    if (this._state.get().timeIntervalInMinutes === intervalInMinutes) {
+      return;
+    }
+
+    this._state.transform(s => {
+      s.timeIntervalInMinutes = intervalInMinutes;
+      return s;
+    });
+  }
+}