@mbao01/common 0.0.42 → 0.0.44

package/src/components/DatetimePicker/DatetimePicker.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+import { useTimescape } from "timescape/react";
+import type { DatetimePickerProps } from "./types";
+import { DEFAULTS, INPUT_PLACEHOLDERS } from "./constants";
+import { DatetimeGrid } from "./DatetimeGrid";
+
+export const DatetimePicker = forwardRef<HTMLDivElement, DatetimePickerProps>(
+  (
+    {
+      format = DEFAULTS,
+      placeholders,
+      onChange,
+      className,
+      date,
+      minDate,
+      maxDate,
+      hour12 = true,
+      digits,
+      wrapAround,
+      snapToStep,
+      ...props
+    },
+    ref
+  ) => {
+    const handleDateChange = useCallback(
+      (date: Date | undefined) => {
+        if (onChange) {
+          onChange(date);
+        }
+      },
+      [onChange]
+    );
+    const timescape = useTimescape({
+      date,
+      onChangeDate: handleDateChange,
+      minDate,
+      maxDate,
+      hour12,
+      digits,
+      wrapAround,
+      snapToStep,
+    });
+
+    return (
+      <DatetimeGrid
+        format={format}
+        className={className}
+        timescape={timescape}
+        placeholders={placeholders ?? INPUT_PLACEHOLDERS}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+DatetimePicker.displayName = "DatetimePicker";

package/src/components/DatetimePicker/constants.ts

@@ -0,0 +1,102 @@
+import type { DateFormat, DatetimeFormatDefaults, InputPlaceholders, TimeFormat } from "./types";
+import { cva } from "../../libs";
+
+export const DEFAULTS = [
+  ["days", "months", "years"],
+  ["hours", "minutes", "am/pm"],
+] as DatetimeFormatDefaults;
+
+export const INPUT_PLACEHOLDERS: InputPlaceholders = {
+  months: "MM",
+  days: "DD",
+  years: "YYYY",
+  hours: "HH",
+  minutes: "MM",
+  seconds: "SS",
+  "am/pm": "AM/PM",
+};
+
+export const getDatetimeGridClasses = cva(
+  `flex items-center w-fit p-1 rounded-md transition-all duration-100 gap-1 selection:bg-transparent selection:text-base-content
+   [&:has(input:focus)]:duration-100 [&:has(input:focus)]:outline [&:has(input:focus)]:outline-2 [&:has(input:focus)]:outline-offset-2 [&:has(input:focus)]:outline-base-content/20
+   [&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2 [&:has(input:focus-within)]:outline-base-content/20
+  `,
+  {
+    variants: {
+      variant: {
+        default: "border-0",
+        accent: "border border-accent",
+        error: "border border-error",
+        ghost: "border border-ghost",
+        info: "border border-info",
+        primary: "border border-primary",
+        secondary: "border border-secondary",
+        success: "border border-success",
+        warning: "border border-warning",
+      },
+      outline: {
+        true: "border",
+      },
+      disabled: {
+        true: "border-base-300",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "h-6 leading-relaxed px-2 text-xs",
+        sm: "h-8 leading-8 px-3 text-sm",
+        md: "h-12 leading-loose px-4 text-sm",
+        lg: "h-16 leading-loose px-5 text-lg",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+      {
+        variant: undefined,
+        outline: true,
+        className: "border-neutral-content",
+      },
+      {
+        variant: "default",
+        outline: true,
+        className: "border-base-content",
+      },
+    ],
+  }
+);
+
+export const getDatetimeSeparatorClasses = cva("text-xs text-gray-400");
+
+export const getDatetimeInputClasses = cva(
+  "min-w-8 p-1 inline tabular-nums h-fit border-none outline-none select-none content-box caret-transparent rounded-sm min-w-8 text-center focus:outline-none focus:bg-base-content/20 focus-visible:ring-0 focus-visible:outline-none",
+  {
+    variants: {
+      size: {
+        xs: "max-h-4",
+        sm: "max-h-6",
+        md: "",
+        lg: "min-w-8",
+      },
+      unit: {
+        years: "min-w-12",
+        "am/pm": "bg-base-content/15",
+      } as Record<DateFormat | TimeFormat, string>,
+    },
+    compoundVariants: [
+      {
+        size: "lg",
+        unit: "years",
+        className: "min-w-14",
+      },
+      {
+        size: "lg",
+        unit: "am/pm",
+        className: "min-w-10",
+      },
+    ],
+  }
+);

package/src/components/DatetimePicker/index.ts

@@ -0,0 +1 @@
+export { DatetimePicker } from "./DatetimePicker";

package/src/components/DatetimePicker/types.ts

@@ -0,0 +1,36 @@
+import type { Options } from "timescape/react";
+import { useTimescape } from "timescape/react";
+import { type VariantProps } from "../../libs";
+import { getDatetimeGridClasses } from "./constants";
+
+export type DateFormat = "days" | "months" | "years";
+
+export type TimeFormat = "hours" | "minutes" | "seconds" | "am/pm";
+
+type TimescapeReturn = ReturnType<typeof useTimescape>;
+type DatetimeArray<T extends DateFormat | TimeFormat> = T[];
+
+export type DatetimeFormatDefaults =
+  | [DatetimeArray<DateFormat>]
+  | [DatetimeArray<TimeFormat>]
+  | [DatetimeArray<DateFormat>, DatetimeArray<TimeFormat>]
+  | [DatetimeArray<TimeFormat>, DatetimeArray<DateFormat>];
+
+export type InputPlaceholders = Record<DateFormat | TimeFormat, string>;
+
+type DatetimeGridVariantProps = VariantProps<typeof getDatetimeGridClasses>;
+export type DatetimeGridProps = {
+  format: DatetimeFormatDefaults;
+  disabled?: boolean;
+  className?: string;
+  timescape: Pick<TimescapeReturn, "getRootProps" | "getInputProps">;
+  placeholders: InputPlaceholders;
+} & DatetimeGridVariantProps;
+
+export type DatetimePickerProps = Omit<Options, "onChangeDate"> & {
+  format?: DatetimeFormatDefaults;
+  disabled?: boolean;
+  placeholders?: InputPlaceholders;
+  onChange?: Options["onChangeDate"];
+  className?: string;
+} & DatetimeGridVariantProps;

package/src/components/Description/Description.tsx

@@ -2,11 +2,11 @@ import type { DescriptionDetailProps, DescriptionProps, DescriptionTermProps } f
 import { cn } from "../../utilities";
 
 const Description = (props: DescriptionProps) => {
-  return <dl role="list" {...props} />;
+  return <dl {...props} />;
 };
 
 const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
-  return <dt role="listitem" className={cn("py-2 text-sm font-semibold", className)} {...props} />;
+  return <dt className={cn("py-2 text-sm font-semibold", className)} {...props} />;
 };
 
 const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {

package/src/components/Form/DatetimeInput/DatetimeCalendar.tsx

@@ -0,0 +1,68 @@
+import { useCallback } from "react";
+import { CalendarIcon } from "@radix-ui/react-icons";
+import { cn } from "../../../utilities";
+import { Button } from "../../Button";
+import { Calendar } from "../../Calendar";
+import { Popover } from "../../Popover";
+import {
+  getDatetimeCalendarClasses,
+  getDatetimeCalendarIconClasses,
+  getDatetimeCalendarTriggerClasses,
+} from "./constants";
+import { parseDateTime } from "./helpers";
+import { useDateInput } from "./hooks";
+import { TimePicker } from "./TimePicker";
+import { type DatetimeCalendarProps } from "./types";
+
+export const DatetimeCalendar = ({
+  size,
+  disabled,
+  className,
+  ...props
+}: DatetimeCalendarProps) => {
+  const { value, onDateChange, time } = useDateInput();
+
+  const handleSelect = useCallback(
+    (_: Date | undefined, triggerDate: Date) => {
+      const parsedDateTime = parseDateTime(triggerDate);
+
+      if (parsedDateTime) {
+        const [hours, minutes] = time.split(":");
+        parsedDateTime.setHours(parseInt(hours) || 0, parseInt(minutes) || 0);
+        onDateChange(parsedDateTime);
+      }
+    },
+    [time, onDateChange]
+  );
+
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button
+          variant="default"
+          disabled={disabled}
+          className={cn(getDatetimeCalendarTriggerClasses({ size }))}
+        >
+          <CalendarIcon className={getDatetimeCalendarIconClasses({ size })} />
+          <span className="sr-only">calendar</span>
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="w-auto p-0" sideOffset={8}>
+        <div className="flex gap-1">
+          <Calendar
+            {...props}
+            autoFocus
+            disabled={disabled}
+            className={cn(getDatetimeCalendarClasses(), className)}
+            mode="single"
+            selected={value}
+            onSelect={handleSelect}
+          />
+          <TimePicker />
+        </div>
+      </Popover.Content>
+    </Popover>
+  );
+};
+
+DatetimeCalendar.displayName = "DatetimeCalendar";

package/src/components/Form/DatetimeInput/DatetimeInput.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import type { DatetimeInputProps, TimeString } from "./types";
+import { cn } from "../../../utilities";
+import { getDatetimeInputContainerClasses } from "./constants";
+import { DatetimeCalendar } from "./DatetimeCalendar";
+import { DatetimeInputContext } from "./DatetimeInputContext";
+import { getParsedTime, parseDateTime } from "./helpers";
+import { NaturalLanguageInput } from "./NaturalLanguageInput";
+
+export const DatetimeInput = forwardRef<HTMLInputElement, DatetimeInputProps>(
+  (
+    {
+      calendar,
+      className,
+      date,
+      defaultDate,
+      locale,
+      onDateChange,
+      placeholder,
+      outline,
+      disabled,
+      size,
+      variant,
+      wide,
+      ...props
+    },
+    ref
+  ) => {
+    const [_date, setDate] = useState<Date | undefined>(
+      defaultDate ? parseDateTime(defaultDate) : undefined
+    );
+    const [time, setTime] = useState<TimeString>(defaultDate ? getParsedTime(defaultDate) : "");
+    const isControlled = date !== undefined;
+
+    useEffect(() => {
+      // sync internal state with controlled value if provided
+      if (isControlled) {
+        setDate(date);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [date]);
+
+    const handleDateChange = useCallback((d: Date | undefined) => {
+      if (!isControlled) {
+        setDate(d);
+      }
+
+      onDateChange?.(d);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const onTimeChange = useCallback((time: TimeString) => {
+      setTime(time);
+    }, []);
+
+    return (
+      <DatetimeInputContext.Provider
+        value={{
+          value: isControlled ? date : _date,
+          onDateChange: handleDateChange,
+          time,
+          onTimeChange,
+        }}
+      >
+        <div className="flex items-center justify-center flex-nowrap">
+          <div
+            className={cn(
+              getDatetimeInputContainerClasses({ outline, disabled, size, variant, wide }),
+              className
+            )}
+          >
+            <DatetimeCalendar size={size} disabled={disabled} defaultMonth={_date} {...calendar} />
+            <NaturalLanguageInput
+              ref={ref}
+              size={size}
+              locale={locale}
+              disabled={disabled}
+              placeholder={placeholder}
+              {...props}
+            />
+          </div>
+        </div>
+      </DatetimeInputContext.Provider>
+    );
+  }
+);
+
+DatetimeInput.displayName = "DatetimeInput";

package/src/components/Form/DatetimeInput/DatetimeInputContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { type DatetimeInputContextProps } from "./types";
+
+export const DatetimeInputContext = createContext<DatetimeInputContextProps | null>(null);

package/src/components/Form/DatetimeInput/NaturalLanguageInput.tsx

@@ -0,0 +1,73 @@
+import type { ChangeEvent, KeyboardEvent } from "react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Input } from "../Input";
+import { getNaturalLanguageInputClasses } from "./constants";
+import { formatDateTime, getParsedTime, parseDateTime, setDateTime } from "./helpers";
+import { useDateInput } from "./hooks";
+import { type NaturalLanguageInputProps } from "./types";
+
+export const NaturalLanguageInput = forwardRef<HTMLInputElement, NaturalLanguageInputProps>(
+  ({ placeholder = 'e.g. "tomorrow at 5pm" or "in 2 hours"', size, locale, ...props }, ref) => {
+    const { value, onDateChange, time, onTimeChange } = useDateInput();
+    const [inputValue, setInputValue] = useState<string>("");
+
+    useEffect(() => {
+      const timeVal = time || getParsedTime(new Date());
+      setInputValue(value ? formatDateTime(setDateTime(value, timeVal), locale) : "");
+      onTimeChange(timeVal);
+    }, [value, time, locale, onTimeChange]);
+
+    const handleParse = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        const input = e.currentTarget.value;
+        if (!input) {
+          onDateChange(undefined);
+          onTimeChange("");
+          return;
+        }
+
+        // parse the date string when the input field loses focus
+        const parsedDateTime = parseDateTime(input);
+        if (parsedDateTime) {
+          onDateChange(parsedDateTime);
+          setInputValue(formatDateTime(parsedDateTime, locale));
+          onTimeChange(getParsedTime(parsedDateTime));
+        }
+      },
+      [locale, onDateChange, onTimeChange]
+    );
+
+    const handleKeydown = useCallback(
+      (e: KeyboardEvent<HTMLInputElement>) => {
+        const parsedDateTime = parseDateTime(e.currentTarget.value);
+        switch (e.key) {
+          case "Enter":
+            if (parsedDateTime) {
+              onDateChange(parsedDateTime);
+              setInputValue(formatDateTime(parsedDateTime, locale));
+              onTimeChange(getParsedTime(parsedDateTime));
+            }
+            break;
+        }
+      },
+      [locale, onDateChange, onTimeChange]
+    );
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        size={size}
+        placeholder={placeholder}
+        value={inputValue}
+        onChange={(e) => setInputValue(e.currentTarget.value)}
+        onKeyDown={handleKeydown}
+        onBlur={handleParse}
+        className={getNaturalLanguageInputClasses({ size })}
+        {...props}
+      />
+    );
+  }
+);
+
+NaturalLanguageInput.displayName = "NaturalLanguageInput";

package/src/components/Form/DatetimeInput/TimePicker.tsx

@@ -0,0 +1,202 @@
+import type { KeyboardEvent } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { cn } from "../../../utilities";
+import { ScrollArea } from "../../ScrollArea";
+import {
+  DEFAULT_SIZE,
+  getTimePickerClasses,
+  getTimePickerListClasses,
+  getTimePickerScrollAreaClasses,
+} from "./constants";
+import { parseDateTime, setDateTime } from "./helpers";
+import { useDateInput } from "./hooks";
+import { type TimeString } from "./types";
+
+export const TimePicker = () => {
+  const { value, onDateChange, time, onTimeChange } = useDateInput();
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const timestamp = 15;
+
+  const formateSelectedTime = useCallback(
+    (time: TimeString) => {
+      onTimeChange(time);
+
+      const newVal = parseDateTime(value ?? new Date());
+
+      if (!newVal) return;
+
+      onDateChange(setDateTime(newVal, time));
+    },
+    [value, onDateChange, onTimeChange]
+  );
+
+  const handleKeydown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+
+      if (!document) return;
+
+      const moveNext = () => {
+        const nextIndex = activeIndex + 1 > DEFAULT_SIZE - 1 ? 0 : activeIndex + 1;
+
+        const currentElm = document.getElementById(`time-${nextIndex}`);
+
+        currentElm?.focus();
+
+        setActiveIndex(nextIndex);
+      };
+
+      const movePrev = () => {
+        const prevIndex = activeIndex - 1 < 0 ? DEFAULT_SIZE - 1 : activeIndex - 1;
+
+        const currentElm = document.getElementById(`time-${prevIndex}`);
+
+        currentElm?.focus();
+
+        setActiveIndex(prevIndex);
+      };
+
+      const setElement = () => {
+        const currentElm = document.getElementById(`time-${activeIndex}`);
+
+        if (!currentElm) return;
+
+        currentElm.focus();
+
+        formateSelectedTime((currentElm.textContent ?? "") as TimeString);
+      };
+
+      const reset = () => {
+        const currentElm = document.getElementById(`time-${activeIndex}`);
+        currentElm?.blur();
+        setActiveIndex(-1);
+      };
+
+      switch (e.key) {
+        case "ArrowUp":
+          movePrev();
+          break;
+
+        case "ArrowDown":
+          moveNext();
+          break;
+
+        case "Escape":
+          reset();
+          break;
+
+        case "Enter":
+          setElement();
+          break;
+      }
+    },
+    [activeIndex, formateSelectedTime]
+  );
+
+  const handleClick = useCallback(
+    (time: TimeString, currentIndex: number) => {
+      formateSelectedTime(time);
+      setActiveIndex(currentIndex);
+    },
+    [formateSelectedTime]
+  );
+
+  const currentTime = useMemo(() => {
+    const timeVal = time.split(" ")[0];
+    return {
+      hours: parseInt(timeVal.split(":")[0]),
+      minutes: parseInt(timeVal.split(":")[1]),
+    };
+  }, [time]);
+
+  useEffect(() => {
+    const getCurrentElementTime = () => {
+      const timeVal = time.split(" ")[0];
+      const hours = parseInt(timeVal.split(":")[0]);
+      const minutes = parseInt(timeVal.split(":")[1]);
+      const PM_AM = time.split(" ")[1];
+
+      const formatIndex = PM_AM === "AM" ? hours : hours === 12 ? hours : hours + 12;
+      const formattedHours = formatIndex;
+
+      for (let j = 0; j <= 3; j++) {
+        const diff = Math.abs(j * timestamp - minutes);
+        const selected =
+          PM_AM === (formattedHours >= 12 ? "PM" : "AM") &&
+          (minutes <= 53 ? diff < Math.ceil(timestamp / 2) : diff < timestamp);
+
+        if (selected) {
+          const trueIndex = activeIndex === -1 ? formattedHours * 4 + j : activeIndex;
+
+          setActiveIndex(trueIndex);
+
+          const currentElm = document.getElementById(`time-${trueIndex}`);
+          currentElm?.scrollIntoView({
+            block: "center",
+            behavior: "smooth",
+          });
+        }
+      }
+    };
+
+    getCurrentElementTime();
+  }, [time, activeIndex]);
+
+  const height = useMemo(() => {
+    if (!document) return;
+    const calendarElm = document.getElementById("calendar");
+    if (!calendarElm) return;
+    return calendarElm.style.height;
+  }, []);
+
+  return (
+    <div className="space-y-2 pr-3 py-3 relative ">
+      <h3 className="text-sm font-medium ">Time</h3>
+      <ScrollArea
+        onKeyDown={handleKeydown}
+        className={cn(getTimePickerScrollAreaClasses())}
+        style={{ height }}
+      >
+        <ul className={cn(getTimePickerListClasses())}>
+          {Array.from({ length: 24 }).map((_, i) => {
+            const PM_AM = i >= 12 ? "PM" : "AM";
+            const formatIndex = i > 12 ? i % 12 : i === 0 || i === 12 ? 12 : i;
+            return Array.from({ length: 4 }).map((_, part) => {
+              const diff = Math.abs(part * timestamp - currentTime.minutes);
+
+              const trueIndex = i * 4 + part;
+
+              // ? refactor : add the select of the default time on the current device (H:MM)
+              const isSelected =
+                (currentTime.hours === i || currentTime.hours === formatIndex) &&
+                time.split(" ")[1] === PM_AM &&
+                (currentTime.minutes <= 53 ? diff < Math.ceil(timestamp / 2) : diff < timestamp);
+
+              const isSuggested = !value && isSelected;
+
+              const currentValue = `${formatIndex}:${
+                part === 0 ? "00" : timestamp * part
+              } ${PM_AM}` as TimeString;
+
+              return (
+                <li
+                  tabIndex={isSelected ? 0 : -1}
+                  id={`time-${trueIndex}`}
+                  key={`time-${trueIndex}`}
+                  aria-label={currentValue}
+                  className={cn(
+                    getTimePickerClasses({ selected: isSelected, suggested: isSuggested })
+                  )}
+                  onClick={() => handleClick(currentValue, trueIndex)}
+                  onFocus={() => isSuggested && setActiveIndex(trueIndex)}
+                >
+                  {currentValue}
+                </li>
+              );
+            });
+          })}
+        </ul>
+      </ScrollArea>
+    </div>
+  );
+};