@zenify-omni/chat-ui-react-js 0.1.0

package/components/custom/date-time-picker/components/date-time-group.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useContext, useRef } from "react";
+const DateTimeGroupContext = React.createContext({});
+const useDateTimeGroup = () => useContext(DateTimeGroupContext);
+function DateTimeGroup({ children }) {
+  const elementsRef = useRef([]);
+  const registerElement = (elementId, element) => {
+    elementsRef.current.push({ id: elementId, element });
+  };
+  const unregisterElement = (elementId) => {
+    elementsRef.current = elementsRef.current.filter(
+      ({ id }) => id !== elementId
+    );
+  };
+  const moveFocus = (elementId, direction) => {
+    const totalElement = elementsRef.current.length;
+    const elementIndex = elementsRef.current.findIndex(
+      ({ id }) => id === elementId
+    );
+    let newIndex;
+    if (direction === 1) {
+      newIndex = elementIndex + direction >= totalElement ? 0 : elementIndex + 1;
+    } else if (direction === -1) {
+      newIndex = elementIndex + direction < 0 ? totalElement - 1 : elementIndex - 1;
+    }
+    elementsRef.current[newIndex].element.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    DateTimeGroupContext.Provider,
+    {
+      value: {
+        registerElement,
+        unregisterElement,
+        moveFocus
+      },
+      children
+    }
+  );
+}
+export {
+  DateTimeGroupContext,
+  DateTimeGroup as default,
+  useDateTimeGroup
+};

package/components/custom/date-time-picker/components/date-time-input.js

@@ -0,0 +1,383 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { v4 as uuid } from "uuid";
+import { format, getDaysInMonth, isValid, parse } from "date-fns";
+import DateTimeUnitInput from "./date-time-unit-input.js";
+import { cn } from "../../../../lib/utils.js";
+const safeFormat = (date, fmt) => {
+  if (!date) return "";
+  const d = date instanceof Date ? date : new Date(date);
+  return isValid(d) ? format(d, fmt) : "";
+};
+const DateTimeInput = React.forwardRef(({ date, onChange, ...props }, ref) => {
+  const [day, setDay] = useState(safeFormat(date, "dd"));
+  const [month, setMonth] = useState(safeFormat(date, "MM"));
+  const [year, setYear] = useState(safeFormat(date, "yyyy"));
+  const [hour, setHour] = useState(safeFormat(date, "HH"));
+  const [minute, setMinute] = useState(safeFormat(date, "mm"));
+  const componentIdRef = useRef(uuid());
+  const unitRefs = useRef([]);
+  useEffect(() => {
+    setDay(safeFormat(date, "dd"));
+    setMonth(safeFormat(date, "MM"));
+    setYear(safeFormat(date, "yyyy"));
+    setHour(safeFormat(date, "HH"));
+    setMinute(safeFormat(date, "mm"));
+  }, [date]);
+  function getUnits() {
+    return !props.showTimeComponent ? ["day", "month", "year"] : ["day", "month", "year", "hour", "minute"];
+  }
+  const units = getUnits();
+  function getUnitValue(unit) {
+    switch (unit) {
+      case "day":
+        return day;
+      case "month":
+        return month;
+      case "year":
+        return year;
+      case "hour":
+        return hour;
+      case "minute":
+        return minute;
+    }
+  }
+  function getUnitMeta(unit) {
+    if (unit === "day") {
+      const yInt = parseInt(year);
+      const mInt = parseInt(month);
+      if (isNaN(yInt) || isNaN(mInt)) {
+        return {
+          minValue: 1,
+          maxValue: 31,
+          maxLength: 2,
+          placeholder: "DD",
+          label: "Day"
+        };
+      }
+      return {
+        minValue: 1,
+        maxValue: getDaysInMonth(new Date(yInt, mInt - 1, 1)),
+        maxLength: 2,
+        placeholder: "DD",
+        label: "Day"
+      };
+    } else if (unit === "month") {
+      return {
+        minValue: 1,
+        maxValue: 12,
+        maxLength: 2,
+        placeholder: "MM",
+        label: "Month"
+      };
+    } else if (unit === "year") {
+      const fromYear = !isNaN(props?.dateConfig?.fromYear) ? Number(props?.dateConfig?.fromYear) : (/* @__PURE__ */ new Date()).getFullYear() - 100;
+      const toYear = !isNaN(props?.dateConfig?.toYear) ? Number(props?.dateConfig?.toYear) : (/* @__PURE__ */ new Date()).getFullYear() + 50;
+      return {
+        minValue: fromYear,
+        maxValue: toYear,
+        maxLength: 4,
+        placeholder: "YYYY",
+        label: "Year"
+      };
+    } else if (unit === "hour") {
+      return {
+        minValue: 0,
+        maxValue: 23,
+        maxLength: 2,
+        placeholder: "HH",
+        label: "Hour"
+      };
+    } else {
+      return {
+        minValue: 0,
+        maxValue: 60,
+        maxLength: 2,
+        placeholder: "mm",
+        label: "Minute"
+      };
+    }
+  }
+  function getSeparator(unit) {
+    if (unit === "day" || unit === "month") {
+      return props?.dateConfig?.separator ?? "/";
+    }
+    if (unit === "year") {
+      return " ";
+    }
+    if (unit === "hour") {
+      return props?.timeConfig?.separator ?? ":";
+    }
+    return "";
+  }
+  function adjustDay(unitValue, date2) {
+    const dayInt = parseInt(unitValue, 10);
+    const yearInt = parseInt(date2.year, 10);
+    let monthInt = parseInt(date2.month, 10);
+    const dayUnitMeta = getUnitMeta("day");
+    const yearUnitMeta = getUnitMeta("year");
+    if (!isNaN(yearInt) && !isNaN(monthInt)) {
+      if (dayInt < dayUnitMeta.minValue) {
+        if (monthInt === 1) {
+          if (yearInt - 1 > yearUnitMeta.minValue) {
+            date2.year = (yearInt - 1).toString();
+            date2.month = "12";
+            date2.day = "31";
+          }
+        } else {
+          const dayInMonth = getDaysInMonth(new Date(yearInt, monthInt - 2, 1));
+          date2.month = (monthInt - 1).toString();
+          date2.day = dayInMonth.toString();
+        }
+      } else if (dayInt > dayUnitMeta.maxValue) {
+        if (monthInt === 12) {
+          if (yearInt + 1 < yearUnitMeta.maxValue) {
+            date2.year = (yearInt + 1).toString();
+            date2.month = "1";
+            date2.day = "1";
+          }
+        } else {
+          date2.month = (monthInt + 1).toString();
+          date2.day = "1";
+        }
+      } else {
+        date2.day = dayInt.toString();
+      }
+    } else {
+      if (dayInt < dayUnitMeta.minValue) {
+        date2.day = dayUnitMeta.minValue.toString();
+      } else if (dayInt > dayUnitMeta.maxValue) {
+        date2.day = dayUnitMeta.maxValue.toString();
+      } else {
+        date2.day = dayInt.toString();
+      }
+    }
+  }
+  function adjustMonth(unitValue, date2) {
+    const monthInt = parseInt(unitValue, 10);
+    const yearInt = parseInt(date2.year, 10);
+    const dayInt = parseInt(date2.day, 10);
+    const yearUnitMeta = getUnitMeta("year");
+    if (!isNaN(yearInt) && !isNaN(dayInt)) {
+      if (monthInt > 12) {
+        if (yearInt + 1 < yearUnitMeta.maxValue) {
+          date2.month = "1";
+          date2.year = (yearInt + 1).toString();
+          date2.day = "1";
+        }
+      } else if (monthInt < 1) {
+        if (yearInt - 1 > yearUnitMeta.minValue) {
+          date2.month = "12";
+          date2.year = (yearInt - 1).toString();
+          date2.day = "31";
+        }
+      } else {
+        const dayInMonth = getDaysInMonth(new Date(yearInt, monthInt - 1, 1));
+        date2.day = (dayInt > dayInMonth ? dayInMonth : dayInt).toString();
+        date2.month = monthInt.toString();
+      }
+    } else {
+      if (monthInt > 12) {
+        date2.month = "12";
+      } else if (monthInt < 1) {
+        date2.month = "1";
+      } else {
+        date2.month = monthInt.toString();
+      }
+    }
+  }
+  function adjustYear(unitValue, date2) {
+    const dayInt = parseInt(date2.day, 10);
+    const monthInt = parseInt(date2.month, 10);
+    const yearInt = parseInt(unitValue, 10);
+    date2.year = yearInt.toString();
+    if (!isNaN(monthInt) && !isNaN(dayInt)) {
+      const daysInMonth = getDaysInMonth(new Date(yearInt, monthInt - 1, 1));
+      if (dayInt > daysInMonth) {
+        date2.day = daysInMonth.toString();
+      }
+    }
+  }
+  function adjustHour(unitValue, date2) {
+    let hourInt = parseInt(unitValue, 10);
+    let dayInt = parseInt(date2.day, 10);
+    let monthInt = parseInt(date2.month, 10);
+    let yearInt = parseInt(date2.year, 10);
+    const yearMeta = getUnitMeta("year");
+    const hourMin = 0;
+    const hourMax = 23;
+    if (hourInt < hourMin) {
+      hourInt = hourMax;
+      dayInt -= 1;
+      if (dayInt < 1) {
+        monthInt -= 1;
+        if (monthInt < 1) {
+          monthInt = 12;
+          yearInt -= 1;
+          if (yearInt < yearMeta.minValue) {
+            yearInt = yearMeta.minValue;
+          }
+        }
+        dayInt = getDaysInMonth(new Date(yearInt, monthInt - 1, 1));
+      }
+    } else if (hourInt > hourMax) {
+      hourInt = hourMin;
+      const daysInMonth = getDaysInMonth(new Date(yearInt, monthInt - 1, 1));
+      dayInt += 1;
+      if (dayInt > daysInMonth) {
+        dayInt = 1;
+        monthInt += 1;
+        if (monthInt > 12) {
+          monthInt = 1;
+          yearInt += 1;
+          if (yearInt > yearMeta.maxValue) {
+            yearInt = yearMeta.maxValue;
+          }
+        }
+      }
+    }
+    date2.hour = hourInt.toString();
+    date2.day = dayInt.toString();
+    date2.month = monthInt.toString();
+    date2.year = yearInt.toString();
+  }
+  function adjustMinute(unitValue, date2) {
+    let minuteInt = parseInt(unitValue, 10);
+    let hourInt = parseInt(date2.hour, 10);
+    let dayInt = parseInt(date2.day, 10);
+    let monthInt = parseInt(date2.month, 10);
+    let yearInt = parseInt(date2.year, 10);
+    const yearMeta = getUnitMeta("year");
+    const minuteMin = 0;
+    const minuteMax = 59;
+    const hourMin = 0;
+    const hourMax = 23;
+    if (minuteInt < minuteMin) {
+      minuteInt = minuteMax;
+      hourInt -= 1;
+      if (hourInt < hourMin) {
+        hourInt = hourMax;
+        dayInt -= 1;
+        if (dayInt < 1) {
+          monthInt -= 1;
+          if (monthInt < 1) {
+            monthInt = 12;
+            yearInt -= 1;
+            if (yearInt < yearMeta.minValue) {
+              yearInt = yearMeta.minValue;
+            }
+          }
+          dayInt = getDaysInMonth(new Date(yearInt, monthInt - 1, 1));
+        }
+      }
+    } else if (minuteInt > minuteMax) {
+      minuteInt = minuteMin;
+      hourInt += 1;
+      if (hourInt > hourMax) {
+        hourInt = hourMin;
+        dayInt += 1;
+        const daysInMonth = getDaysInMonth(new Date(yearInt, monthInt - 1, 1));
+        if (dayInt > daysInMonth) {
+          dayInt = 1;
+          monthInt += 1;
+          if (monthInt > 12) {
+            monthInt = 1;
+            yearInt += 1;
+            if (yearInt > yearMeta.maxValue) {
+              yearInt = yearMeta.maxValue;
+            }
+          }
+        }
+      }
+    }
+    date2.minute = minuteInt.toString();
+    date2.hour = hourInt.toString();
+    date2.day = dayInt.toString();
+    date2.month = monthInt.toString();
+    date2.year = yearInt.toString();
+  }
+  function setUnitValue(unit, unitValue) {
+    const date2 = {
+      day,
+      month,
+      year,
+      hour,
+      minute
+    };
+    if (unit === "day") {
+      adjustDay(unitValue, date2);
+    }
+    if (unit === "month") {
+      adjustMonth(unitValue, date2);
+    }
+    if (unit === "year") {
+      adjustYear(unitValue, date2);
+    }
+    if (unit === "hour") {
+      adjustHour(unitValue, date2);
+    }
+    if (unit === "minute") {
+      adjustMinute(unitValue, date2);
+    }
+    const dateStr = `${date2.year.padStart(4, "0")}-${date2.month.padStart(2, "0")}-${date2.day.padStart(2, "0")}`;
+    const timeStr = `${date2.hour.padStart(2, "0")}:${date2.minute.padStart(2, "0")}`;
+    const parsedDate = parse(
+      `${dateStr} ${timeStr}`,
+      "yyyy-MM-dd HH:mm",
+      /* @__PURE__ */ new Date()
+    );
+    setDay(date2.day);
+    setMonth(date2.month);
+    setYear(date2.year);
+    setHour(date2.hour);
+    setMinute(date2.minute);
+    if (isValid(parsedDate)) {
+      onChange(parsedDate);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 select-none items-center truncate text-sm",
+        props.classNames
+      ),
+      ref,
+      children: units.map((unit, index) => {
+        const unitValue = getUnitValue(unit);
+        const unitMeta = getUnitMeta(unit);
+        const separator = getSeparator(unit);
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            DateTimeUnitInput,
+            {
+              id: `${componentIdRef.current}-${unit}`,
+              ref: (el) => unitRefs.current[index] = el,
+              readonly: props?.readonly ?? false,
+              unit,
+              value: unitValue,
+              unitMeta,
+              setUnitValue: (value) => setUnitValue(unit, value),
+              className: `${props?.classNames?.input} ${props.classNames}`
+            }
+          ),
+          separator && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-muted-foreground",
+                separator === " " && "mx-0.5"
+              ),
+              children: separator
+            }
+          )
+        ] }, unit);
+      })
+    }
+  );
+});
+DateTimeInput.displayName = "DateTimeInput";
+var date_time_input_default = DateTimeInput;
+export {
+  date_time_input_default as default
+};

package/components/custom/date-time-picker/components/date-time-unit-input.js

@@ -0,0 +1,138 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { useDateTimeGroup } from "./date-time-group.js";
+import { useMergeRefs } from "../hooks/use-merge-refs.js";
+import { cn } from "../../../../lib/utils.js";
+const DateTimeUnitInput = React.forwardRef(
+  ({ id, unit, readonly, value, unitMeta, setUnitValue, className }, parentRef) => {
+    const elementRef = useRef(null);
+    const dateTimeGroup = useDateTimeGroup();
+    const [isFocused, setIsFocused] = useState(false);
+    const mergedRef = useMergeRefs(elementRef, parentRef);
+    useEffect(() => {
+      const element = elementRef.current;
+      if (dateTimeGroup) {
+        dateTimeGroup.registerElement(id, element);
+        return () => {
+          dateTimeGroup.unregisterElement(id);
+        };
+      }
+    }, [dateTimeGroup, id]);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const focusNextUnit = () => {
+      dateTimeGroup.moveFocus(id, 1);
+    };
+    const focusPreviousUnit = () => {
+      dateTimeGroup.moveFocus(id, -1);
+    };
+    const handleNumberInput = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const digit = e.key;
+      const valueInt = parseInt(value + digit, 10);
+      const valueStr = valueInt.toString();
+      if (valueInt === 0 && valueStr.length === 1) {
+        return;
+      }
+      if (unitMeta.maxLength === 2) {
+        if (digit * 10 > unitMeta.maxValue && valueStr.length === 1) {
+          setUnitValue(digit);
+          return;
+        }
+        if (valueInt > unitMeta.maxValue) {
+          if (digit !== "0") {
+            setUnitValue(digit);
+          }
+          return;
+        }
+        setUnitValue(valueStr);
+        if (valueInt.toString().length === unitMeta.maxLength) {
+          focusNextUnit();
+        }
+      } else {
+        if (valueInt <= unitMeta.maxValue) {
+          setUnitValue(valueStr);
+          if (valueInt.toString().length === unitMeta.maxLength) {
+            focusNextUnit();
+          }
+        } else {
+          if (digit === "0" || parseInt(digit) > parseInt(unitMeta.maxValue[0])) {
+            return;
+          }
+          setUnitValue(digit);
+        }
+      }
+    };
+    const handleKeydown = (e) => {
+      if (readonly) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (/^\d$/.test(e.key)) {
+        handleNumberInput(e);
+        return;
+      }
+      const valueInt = parseInt(value);
+      if (e.key === "ArrowUp") {
+        const nextVal = (valueInt || 0) + 1;
+        setUnitValue(nextVal.toString());
+      }
+      if (e.key === "ArrowDown") {
+        const nextVal = (valueInt || 0) - 1;
+        setUnitValue(nextVal.toString());
+      }
+      if (e.key === "ArrowLeft") {
+        focusPreviousUnit();
+      }
+      if (e.key === "ArrowRight") {
+        focusNextUnit();
+      }
+      if (e.key === "Tab") {
+        focusNextUnit();
+      }
+    };
+    const handleBeforeInput = (e) => {
+      if (!/^\d+$/.test(e.data || "")) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    const paddedValue = (unit.includes("year") && value ? value.padStart(4, "0") : value ? value.padStart(2, "0") : unitMeta.placeholder) || unitMeta.placeholder;
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergedRef,
+        role: "spinbutton",
+        className: cn(
+          `relative cursor-text select-none rounded-md text-center text-sm tabular-nums caret-transparent outline-none`,
+          isFocused ? "bg-primary/20" : "hover:bg-accent",
+          !value && "text-muted-foreground",
+          readonly && "pointer-events-none",
+          className
+        ),
+        id: unit,
+        "aria-label": unitMeta.label,
+        contentEditable: !readonly,
+        suppressContentEditableWarning: true,
+        inputMode: "numeric",
+        spellCheck: "false",
+        autoCorrect: "off",
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeydown,
+        onBeforeInput: handleBeforeInput,
+        onClick: (e) => e.stopPropagation(),
+        children: paddedValue
+      }
+    ) });
+  }
+);
+DateTimeUnitInput.displayName = "DateTimeUnitInput";
+var date_time_unit_input_default = DateTimeUnitInput;
+export {
+  date_time_unit_input_default as default
+};