@mbao01/common 0.0.43 → 0.0.45

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>
+  );
+};

package/src/components/Form/DatetimeInput/constants.ts

@@ -0,0 +1,135 @@
+import { cva } from "../../../libs";
+
+export const DEFAULT_SIZE = 96;
+
+export const getDatetimeInputContainerClasses = cva(
+  `h-10 flex items-center justify-between w-fit px-2 rounded-md transition-all gap-1
+  [&: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 text-xs px-1",
+        sm: "h-8 leading-8 text-sm px-1",
+        md: "h-12 leading-loose text-sm px-2",
+        lg: "h-16 leading-loose text-lg px-3",
+      },
+    },
+    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 getDatetimeCalendarTriggerClasses = cva(
+  `size-8 rounded-md p-1 flex items-center justify-center font-normal
+  outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset
+  `,
+  {
+    variants: {
+      size: {
+        xs: "size-4 p-0 rounded-sm",
+        sm: "size-6",
+        md: "size-9",
+        lg: "size-10",
+      },
+    },
+  }
+);
+
+export const getDatetimeCalendarIconClasses = cva("", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-3",
+      md: "size-5",
+      lg: "size-6",
+    },
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "size-4",
+    },
+  ],
+});
+
+export const getTimePickerClasses = cva(
+  "border border-neutral-content bg-base-100 shadow-sm cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
+  {
+    variants: {
+      selected: {
+        true: "bg-primary border-primary text-primary-content hover:border-neutral-content hover:text-base-content",
+      },
+      suggested: {
+        true: "bg-info border-info text-info-content hover:border-neutral-content hover:text-base-content",
+      },
+    },
+  }
+);
+
+export const getTimePickerListClasses = cva(
+  "flex items-center flex-col gap-1 h-full max-h-56 w-28 px-1 py-0.5"
+);
+
+export const getTimePickerScrollAreaClasses = cva(
+  "h-[90%] w-full focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 py-0.5"
+);
+
+export const getNaturalLanguageInputClasses = cva(
+  "flex-1 border-none rounded bg-transparent outline-none ring-0 focus:outline-none focus:ring-0 focus-within:outline-none focus-within:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "h-4 px-1",
+        sm: "h-6 px-1",
+        md: "h-9 px-2",
+        lg: "h-11 px-3",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "h-8 px-2",
+      },
+    ],
+  }
+);
+
+export const getDatetimeCalendarClasses = cva(
+  "peer flex justify-end bg-transparent focus:outline-none focus:ring-0 focus-within:outline-none focus-within:ring-0 sm:text-sm disabled:cursor-not-allowed disabled:opacity-50"
+);

package/src/components/Form/DatetimeInput/helpers.ts

@@ -0,0 +1,93 @@
+import { parseDate } from "chrono-node";
+import { type TimeString } from "./types";
+
+/**
+ * Utility function that parses dates.
+ * Parses a given date string using the `chrono-node` library.
+ *
+ * @param str - A string representation of a date and time.
+ * @returns A `Date` object representing the parsed date and time, or `null` if the string could not be parsed.
+ */
+export const parseDateTime = (str: Date | string) => {
+  if (str instanceof Date) {
+    return str;
+  }
+
+  return parseDate(str) ?? undefined;
+};
+
+/**
+ * Converts a given timestamp or the current date and time to a string representation in the local time zone.
+ * format: `HH:mm`, adjusted for the local time zone.
+ *
+ * @param timestamp {Date | string}
+ * @returns A string representation of the timestamp
+ */
+export const getDateTimeLocal = (timestamp?: Date): string => {
+  const d = timestamp ? new Date(timestamp) : new Date();
+  if (d.toString() === "Invalid Date") return "";
+  return new Date(d.getTime() - d.getTimezoneOffset() * 60000)
+    .toISOString()
+    .split(":")
+    .slice(0, 2)
+    .join(":");
+};
+
+/**
+ * Formats a given date and time object or string into a human-readable string representation.
+ * "MMM D, YYYY h:mm A" (e.g. "Jan 1, 2023 12:00 PM").
+ *
+ * @param date - {Date | string}
+ * @returns A string representation of the date and time
+ */
+export const formatDateTime = (date: Date | string, locale?: Intl.LocalesArgument) => {
+  return new Date(date).toLocaleTimeString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+};
+
+export const getParsedTime = (date: Date): TimeString => {
+  if (date) {
+    const PM_AM = date.getHours() >= 12 ? "PM" : "AM";
+    //fix the time format for this value
+
+    const PM_AM_hour = date.getHours();
+    const minute = date.getMinutes();
+
+    const hour =
+      PM_AM_hour > 12 ? PM_AM_hour % 12 : PM_AM_hour === 0 || PM_AM_hour === 12 ? 12 : PM_AM_hour;
+
+    return `${hour}:${minute ? minute : "00"} ${PM_AM}` as TimeString;
+  }
+
+  return "";
+};
+
+export const setDateTime = (date: Date, time: TimeString) => {
+  if (!time) {
+    return date;
+  }
+
+  const [HHMM, PM_AM] = time.split(" ");
+  const [HH, MM] = HHMM.split(":").map((v) => parseInt(v) || 0);
+
+  let hour = HH;
+  if (HH === 12) {
+    if (PM_AM === "AM") {
+      hour = 0;
+    }
+  } else if (HH < 12) {
+    if (PM_AM === "PM") {
+      hour += 12;
+    }
+  }
+  const newDate = new Date(date);
+  newDate.setHours(hour, MM);
+
+  return newDate;
+};

package/src/components/Form/DatetimeInput/hooks/index.ts

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

package/src/components/Form/DatetimeInput/hooks/useDateInput/index.ts

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

package/src/components/Form/DatetimeInput/hooks/useDateInput/useDateInput.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { DatetimeInputContext } from "../../DatetimeInputContext";
+
+export const useDateInput = () => {
+  const context = useContext(DatetimeInputContext);
+  if (!context) {
+    throw new Error("useDateInput must be used within SmartDateInputProvider");
+  }
+  return context;
+};

package/src/components/Form/DatetimeInput/index.ts

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