@tcn/ui 0.0.1

package/src/inputs/date_picker/date_picker.tsx

@@ -0,0 +1,170 @@
+import { useSignalValue, useSignalValueEffect } from '@tcn/state';
+import { useResizeObserver } from '../../utils/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { DatePickerBody } from './date_picker_body.js';
+import { DatePickerHeader } from './date_picker_header.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+import { DatePickerTimeSelector } from './date_picker_time_selector.js';
+import styles from './date_picker.module.css';
+
+export interface DatePickerProps {
+  value: Date | null;
+  disabled?: boolean;
+  onChange?: (value: Date | null) => void;
+  onError?: (error: string | null) => void;
+  showTime?: boolean;
+  min?: Date | null;
+  max?: Date | null;
+  minVisibleTimeInMilliseconds?: number;
+  maxVisibleTimeInMilliseconds?: number;
+  disabledDates?: Date[];
+  countryCode?: string;
+  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;
+  timeIntervalInMinutes?: number;
+  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;
+}
+
+export const DatePicker = React.forwardRef(function DatePicker(
+  {
+    value,
+    disabled,
+    onChange,
+    onError,
+    showTime = false,
+    min: minDate = null,
+    max: maxDate = null,
+    minVisibleTimeInMilliseconds,
+    maxVisibleTimeInMilliseconds,
+    disabledDates,
+    countryCode = 'en-US',
+    renderActions,
+    onTimeSelected,
+    timeIntervalInMinutes,
+  }: DatePickerProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [calendarHeight, setCalendarHeight] = useState(0);
+  const isMountedRef = useRef(false);
+  const calendarRef = useResizeObserver((_, height) => {
+    setCalendarHeight(height);
+  });
+  const [presenter] = useState(() => {
+    const today = new Date();
+
+    const year = value == null ? today.getFullYear() : value.getFullYear();
+    const month = value == null ? today.getMonth() : value.getMonth();
+
+    return new DatePickerPresenter(value, year, month, showTime);
+  });
+
+  const state = useSignalValue(presenter.stateBroadcast);
+  const innerValue = useSignalValue(presenter.valueBroadcast);
+  const error = state.error;
+
+  useSignalValueEffect<string | null>(innerError => {
+    error !== innerError && onError && onError(innerError);
+  }, presenter.errorBroadcast);
+
+  useSignalValueEffect<Date | null>(value => {
+    if (isMountedRef.current) {
+      onChange && onChange(value);
+    } else {
+      isMountedRef.current = true;
+    }
+  }, presenter.valueBroadcast);
+
+  useLayoutEffect(() => {
+    presenter.initialize();
+  }, [presenter]);
+
+  useLayoutEffect(() => {
+    presenter.setShowTime(showTime);
+  }, [presenter, showTime]);
+
+  useLayoutEffect(() => {
+    presenter.setMinDate(minDate);
+  }, [presenter, minDate]);
+
+  useLayoutEffect(() => {
+    presenter.setMaxDate(maxDate);
+  }, [presenter, maxDate]);
+
+  useLayoutEffect(() => {
+    if (disabledDates == null) {
+      presenter.setDisabledDates([]);
+    } else {
+      presenter.setDisabledDates(disabledDates);
+    }
+  }, [presenter, disabledDates]);
+
+  useLayoutEffect(() => {
+    if (typeof minVisibleTimeInMilliseconds === 'number') {
+      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);
+    }
+  }, [presenter, minVisibleTimeInMilliseconds]);
+
+  useLayoutEffect(() => {
+    if (typeof maxVisibleTimeInMilliseconds === 'number') {
+      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);
+    }
+  }, [presenter, maxVisibleTimeInMilliseconds]);
+
+  useLayoutEffect(() => {
+    if (typeof timeIntervalInMinutes === 'number') {
+      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);
+    }
+  }, [presenter, timeIntervalInMinutes]);
+
+  useLayoutEffect(() => {
+    presenter.selectDate(value);
+  }, [presenter, value]);
+
+  return (
+    <HStack
+      ref={ref}
+      width="auto"
+      height="auto"
+      className={classNames(styles['date-picker'], 'date-picker')}
+      tabIndex={0}
+    >
+      <VStack
+        ref={calendarRef}
+        inline
+        height="auto"
+        width="auto"
+        className={classNames(styles['date-picker-box'], 'date-picker-box')}
+        data-is-disabled={disabled}
+      >
+        <VStack height="auto">
+          <DatePickerHeader countryCode={countryCode} presenter={presenter} />
+          <DatePickerBody countryCode={countryCode} presenter={presenter} />
+        </VStack>
+        {renderActions && <VStack paddingInline="8px">{renderActions(presenter)}</VStack>}
+        <Spacer height="8px" />
+      </VStack>
+      {showTime && (
+        <>
+          <Spacer width="8px" />
+          <DatePickerTimeSelector
+            height={`${calendarHeight}px`}
+            origin={innerValue}
+            max={state.max}
+            min={state.min}
+            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}
+            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}
+            intervalInMinutes={state.timeIntervalInMinutes}
+            disabled={disabled}
+            onSelect={(hour, minutes, seconds) => {
+              presenter.setTime(hour, minutes, seconds);
+              onTimeSelected && onTimeSelected(hour, minutes, seconds);
+            }}
+          />
+        </>
+      )}
+    </HStack>
+  );
+});

package/src/inputs/date_picker/date_picker_body.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useSignalValue } from '@tcn/state';
+import { Box } from '../../stacks/box/box.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import type { CalendarDate } from '../../utils/calendar/calendar_date.js';
+import { DatePickerDate } from './date_picker_date.js';
+import { DatePickerDay } from './date_picker_day.js';
+import type { DatePickerPresenter } from './date_picker_presenter.js';
+
+export interface DatePickerBodyProps {
+  presenter: DatePickerPresenter;
+  countryCode: string;
+}
+
+export function DatePickerBody({ presenter, countryCode }: DatePickerBodyProps) {
+  const { visibleDates } = useSignalValue(presenter.stateBroadcast);
+  const rows: CalendarDate[][] = [];
+
+  for (let i = 0; i < visibleDates.length; i += 7) {
+    rows.push(visibleDates.slice(i, i + 7));
+  }
+
+  return (
+    <VStack height="auto" width="auto" className="date-picker-body">
+      <HStack height="auto" width="auto">
+        {new Array(7).fill(0).map((_, index) => {
+          return (
+            <DatePickerDay key={index} countryCode={countryCode} dayOfTheWeek={index} />
+          );
+        })}
+      </HStack>
+      <Spacer height="2px" />
+      {rows.map((dates, index) => {
+        return (
+          <React.Fragment key={index}>
+            <HStack key={index} height="auto" width="auto">
+              {dates.map((date, index) => {
+                return (
+                  <Box width="flex" key={index} height="auto">
+                    <DatePickerDate date={date} presenter={presenter} />
+                  </Box>
+                );
+              })}
+            </HStack>
+            <Spacer height="1px" />
+          </React.Fragment>
+        );
+      })}
+    </VStack>
+  );
+}

package/src/inputs/date_picker/date_picker_date.module.css

@@ -0,0 +1,78 @@
+.date-picker-date {
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--font-color);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+}
+
+.date-picker-date:hover,
+.date-picker-date:focus,
+.date-picker-date[data-is-today]:hover,
+.date-picker-date[data-is-today]:focus {
+  border: 2px dotted var(--accent-color);
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.date-picker-date[data-is-within-month="false"],
+.date-picker-date[data-is-within-month="false"]:hover,
+.date-picker-date[data-is-within-range="false"],
+.date-picker-date[data-is-disabled="true"],
+.date-picker-date[data-is-disabled="true"]:hover {
+  border: 2px dotted transparent;
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.date-picker-date[data-is-selected="true"],
+.date-picker-date[data-is-today="true"][data-is-selected="true"] {
+  border: 2px solid var(--accent-color);
+  background-color: var(--accent-color);
+  color: #fff;
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.date-picker-date[data-is-selected="true"][data-is-disabled="true"],
+.date-picker-date[data-is-selected="true"][data-is-within-range="false"] {
+  border: 2px solid var(--error-color, var(--default-error-color));
+  background-color: var(--error-color, var(--default-error-color));
+  color: rgba(255, 255, 255, 0.5);
+  opacity: 1;
+}
+
+.date-picker-date[data-is-disabled="true"] * {
+  text-decoration: line-through;
+}
+
+.date-picker-today {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid #dcdcdc;
+}
+
+.date-picker-today[data-is-selected="true"] {
+  border: 2px solid rgb(255, 255, 255, 0.5);
+}
+
+.date-picker-date {
+  height: calc(32px * var(--scalar, 1));
+  width: calc(32px * var(--scalar, 1));
+}

package/src/inputs/date_picker/date_picker_date.tsx

@@ -0,0 +1,99 @@
+import { useSignalValue } from '@tcn/state';
+import { BodyText } from '../../typography/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import type { CalendarDate } from '../../utils/calendar/calendar_date.js';
+import type { DatePickerPresenter } from './date_picker_presenter.js';
+import styles from './date_picker_date.module.css';
+import classNames from 'classnames';
+
+export interface DatePickerDateProps {
+  date: CalendarDate;
+  presenter: DatePickerPresenter;
+}
+
+export function DatePickerDate({ presenter, date: calendarDate }: DatePickerDateProps) {
+  const {
+    visibleMonth,
+    disabledDates,
+    min: minDate,
+    max: maxDate,
+  } = useSignalValue(presenter.stateBroadcast);
+  const selectedDate = useSignalValue(presenter.valueBroadcast);
+
+  let minTime = -Infinity;
+  let maxTime = Infinity;
+
+  if (minDate != null) {
+    let normalizedMinDate = new Date(minDate);
+    normalizedMinDate.setHours(0, 0, 0, 0);
+    minTime = normalizedMinDate.getTime();
+  }
+
+  if (maxDate != null) {
+    let normalizedMaxDate = new Date(maxDate);
+    normalizedMaxDate.setHours(23, 59, 59, 999);
+    maxTime = normalizedMaxDate.getTime();
+  }
+
+  const date = new Date();
+
+  const time = new Date(
+    calendarDate.year,
+    calendarDate.month,
+    calendarDate.date
+  ).getTime();
+
+  const isWithinMonth = visibleMonth === calendarDate.month;
+
+  const isSelected =
+    selectedDate?.getMonth() === calendarDate.month &&
+    selectedDate.getFullYear() === calendarDate.year &&
+    selectedDate.getDate() === calendarDate.date;
+
+  const isDisabled = disabledDates.some(
+    d =>
+      d.getMonth() === calendarDate.month &&
+      d.getFullYear() === calendarDate.year &&
+      d.getDate() === calendarDate.date
+  );
+
+  const isWithinRange = time >= minTime && time < maxTime;
+  const isToday =
+    date.getMonth() === calendarDate.month &&
+    date.getFullYear() === calendarDate.year &&
+    date.getDate() === calendarDate.date;
+
+  function select() {
+    const date = new Date(calendarDate.year, calendarDate.month, calendarDate.date);
+
+    if (isSelected && presenter.stateBroadcast.get().showTime) {
+      presenter.clear();
+      return;
+    }
+
+    presenter.selectDate(date);
+  }
+
+  return (
+    <button
+      disabled={!isWithinMonth || isDisabled || !isWithinRange}
+      className={classNames(styles['date-picker-date'], 'date-picker-date')}
+      onClick={select}
+      data-is-within-month={String(isWithinMonth)}
+      data-is-selected={String(isSelected)}
+      data-is-disabled={String(isDisabled)}
+      data-is-within-range={String(isWithinRange)}
+      data-is-today={String(isToday)}
+    >
+      <ZStack height="100%">
+        <BodyText>{String(calendarDate.date)}</BodyText>
+        {isToday && (
+          <div
+            className={classNames(styles['date-picker-today'], 'date-picker-today')}
+            data-is-selected={String(isSelected)}
+          ></div>
+        )}
+      </ZStack>
+    </button>
+  );
+}

package/src/inputs/date_picker/date_picker_day.module.css

@@ -0,0 +1,4 @@
+.date-picker-day {
+  height: calc(32px * var(--scalar, 1)) !important;
+  width: calc(32px * var(--scalar, 1)) !important;
+}

package/src/inputs/date_picker/date_picker_day.tsx

@@ -0,0 +1,29 @@
+import { Headline } from '../../typography/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { useMemo } from 'react';
+import styles from './date_picker_day.module.css';
+
+export interface DatePickerDayProps {
+  dayOfTheWeek: number;
+  countryCode: string;
+}
+
+export function DatePickerDay({ dayOfTheWeek, countryCode }: DatePickerDayProps) {
+  const date = new Date();
+  date.setDate(date.getDate() - date.getDay() + dayOfTheWeek);
+  const weekdayName = useMemo(
+    () =>
+      new Intl.DateTimeFormat(countryCode, { weekday: 'short' })
+        .format(date)
+        .toLocaleUpperCase(),
+    [countryCode, date]
+  );
+
+  return (
+    <ZStack className={styles['date-picker-day']}>
+      <Headline size="sm" emphasis="faint" className={styles['date-picker-day-text']}>
+        {weekdayName[0]}
+      </Headline>
+    </ZStack>
+  );
+}

package/src/inputs/date_picker/date_picker_header.module.css

@@ -0,0 +1,3 @@
+.date-picker-header {
+  height: 35px;
+}

package/src/inputs/date_picker/date_picker_header.tsx

@@ -0,0 +1,98 @@
+import { useSignalValue, useSignalValueEffect } from '@tcn/state';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import React, { useMemo, useRef } from 'react';
+import { SlimButton } from '../../actions/index.js';
+import { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+import { Select } from '../select/select.js';
+import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
+import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
+import { Option, OptionProps } from '../options/option.js';
+import { DatePickerState } from './date_picker_presenter.js';
+import styles from './date_picker_header.module.css';
+import classNames from 'classnames';
+import { DatePickerYearInput } from './date_picker_year_input.js';
+
+function makeMonthsOptions(countryCode: string): React.ReactElement<OptionProps>[] {
+  const shortMonths = getMonthsOfYear(countryCode, 'short');
+  const longMonths = getMonthsOfYear(countryCode, 'long');
+
+  return shortMonths.map((m, index) => {
+    return (
+      <Option key={index} value={String(index)} label={m} keywords={[m]}>
+        {longMonths[index]}
+      </Option>
+    );
+  });
+}
+
+export interface DatePickerHeaderProps {
+  presenter: DatePickerPresenter;
+  countryCode: string;
+}
+
+export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderProps) {
+  const state = useSignalValue(presenter.stateBroadcast);
+  const yearInputRef = useRef<HTMLInputElement>(null);
+
+  function selectMonth(value: string) {
+    presenter.setVisibleMonth(Number(value));
+  }
+
+  function previous() {
+    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth - 1);
+  }
+
+  function next() {
+    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth + 1);
+  }
+
+  const monthsOptions = useMemo(() => {
+    return makeMonthsOptions(countryCode);
+  }, [countryCode]);
+
+  useSignalValueEffect((state: DatePickerState) => {
+    const input = yearInputRef.current;
+    if (input && input.value !== String(state.visibleYear)) {
+      input.value = String(state.visibleYear);
+    }
+  }, presenter.stateBroadcast);
+
+  return (
+    <HStack
+      className={classNames(styles['date-picker-header'], 'date-picker-header')}
+      minWidth="35px"
+      width="100%"
+    >
+      <SlimButton
+        disabled={!state.canNavigateToPreviousMonth}
+        hierarchy="tertiary"
+        onClick={previous}
+      >
+        <ChevronLeftIcon flipOnRtl size="md" />
+      </SlimButton>
+      <Spacer />
+      <HStack hAlign="center" gap="4px" width="auto">
+        <Select
+          hierarchy="tertiary"
+          width="auto"
+          maxWidth="150px"
+          value={String(state.visibleMonth)}
+          onChange={selectMonth}
+        >
+          {monthsOptions}
+        </Select>
+        <DatePickerYearInput presenter={presenter} />
+      </HStack>
+      <Spacer />
+      <SlimButton
+        disabled={!state.canNavigateToNextMonth}
+        hierarchy="tertiary"
+        onClick={next}
+      >
+        <ChevronRightIcon flipOnRtl size="md" />
+      </SlimButton>
+    </HStack>
+  );
+}

package/src/inputs/date_picker/date_picker_input.module.css

@@ -0,0 +1,61 @@
+.button {
+  padding-inline-end: calc(24px * var(--scalar, 1));
+}
+
+.button:focus {
+  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+.button[data-hierarchy="secondary"] {
+  border: 1px solid #aaa;
+  color: var(--font-color);
+}
+
+.button:dir(ltr)::after {
+  content: "";
+  position: absolute;
+  right: calc(4px * var(--scalar, 1));
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(18px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  background-color: #808080;
+  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+}
+
+.button:dir(rtl)::after {
+  content: "";
+  position: absolute;
+  left: calc(4px * var(--scalar, 1));
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(18px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  background-color: #808080;
+  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+}
+
+.button:hover::after {
+  background-color: var(--accent-color);
+}
+
+.button[data-hierarchy="secondary"]:hover {
+  color: var(--accent-color);
+  border-color: var(--accent-color);
+  background-color: transparent;
+}
+
+.popover {
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  background-color: rgb(241, 241, 241);
+  height: auto;
+}