next-helios-fe 1.5.3 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/index.tsx

@@ -8,6 +8,7 @@ import { Checkbox, type CheckboxProps } from "./input/checkbox";
 import { Radio, type RadioProps } from "./input/radio";
 import { Range, type RangeProps } from "./input/range";
 import { Time, type TimeProps } from "./input/time";
+import { Date, type DateProps } from "./input/date";
 import { File, type FileProps } from "./input/file";
 import { Color, type ColorProps } from "./input/color";
 import { Password, type PasswordProps } from "./input/password";
@@ -36,6 +37,7 @@ interface FormComponent extends React.FC<FormProps> {
   Radio: React.FC<RadioProps>;
   Range: React.FC<RangeProps>;
   Time: React.FC<TimeProps>;
+  Date: React.FC<DateProps>;
   File: React.FC<FileProps>;
   Color: React.FC<ColorProps>;
   Password: React.FC<PasswordProps>;
@@ -71,6 +73,7 @@ Form.Checkbox = Checkbox;
 Form.Radio = Radio;
 Form.Range = Range;
 Form.Time = Time;
+Form.Date = Date;
 Form.File = File;
 Form.Color = Color;
 Form.Password = Password;

package/src/components/form/input/date.tsx

@@ -0,0 +1,191 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Dropdown, Calendar } from "../../../components";
+import { Icon } from "@iconify/react";
+import dayjs from "dayjs";
+
+export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
+  const [tempValue, setTempValue] = useState<any>([dayjs(), dayjs()]);
+  const [selectedRange, setSelectedRange] = useState<string | any[]>("Today");
+  const [manualDate, setManualDate] = useState<any>("");
+  const dropdownRef = useRef<HTMLButtonElement>(null);
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as any);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as any);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    rest.onChange &&
+      rest.onChange({
+        target: {
+          value: tempValue,
+        } as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, [tempValue]);
+
+  return (
+    <div className="flex items-end">
+      <label className={`grid gap-2 ${width}`}>
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        <div className="relative flex items-center">
+          <input
+            type="text"
+            className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            value={
+              selectedRange === "Manual Input"
+                ? manualDate
+                : selectedRange === "Custom"
+                ? `${
+                    dayjs(tempValue[0]).format("MMM YYYY") ===
+                    dayjs(tempValue[1]).format("MMM YYYY")
+                      ? dayjs(tempValue[0]).format("DD")
+                      : dayjs(tempValue[0]).format("DD MMM YYYY")
+                  } - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
+                : selectedRange
+            }
+            onChange={(e) => {
+              setManualDate(e.target.value);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Backspace" && selectedRange !== "Manual Input") {
+                setSelectedRange("Manual Input");
+              }
+            }}
+            {...rest}
+          />
+          <button
+            type="button"
+            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            tabIndex={-1}
+            disabled={rest.disabled}
+            onClick={(e) => {
+              e.preventDefault();
+              dropdownRef.current?.click();
+            }}
+          >
+            <Icon icon="akar-icons:calendar" />
+          </button>
+        </div>
+      </label>
+      <div className="w-0 overflow-hidden">
+        <Dropdown
+          dismissOnClick={false}
+          trigger={
+            <button
+              type="button"
+              ref={dropdownRef}
+              className={`w-0 my-0.5 ${height}`}
+            >
+              1
+            </button>
+          }
+        >
+          <div className="flex gap-2 w-80 md:w-full overflow-auto md:overflow-clip">
+            <div className="w-full">
+              {/* <button
+                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                disabled={tempValue === "Manual Input"}
+                onClick={() => {
+                  setTempValue("Manual Input");
+                }}
+              >
+                Manual Input
+              </button> */}
+              <button
+                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                disabled={selectedRange === "Today"}
+                onClick={() => {
+                  setSelectedRange("Today");
+                  setTempValue([dayjs(), dayjs()]);
+                }}
+              >
+                Today
+              </button>
+              <button
+                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                disabled={selectedRange === "Yesterday"}
+                onClick={() => {
+                  setSelectedRange("Yesterday");
+                  setTempValue([
+                    dayjs().subtract(1, "days"),
+                    dayjs().subtract(1, "days"),
+                  ]);
+                }}
+              >
+                Yesterday
+              </button>
+              <button
+                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                disabled={selectedRange === "Last 7 days"}
+                onClick={() => {
+                  setSelectedRange("Last 7 days");
+                  setTempValue([dayjs().subtract(7, "days"), dayjs()]);
+                }}
+              >
+                Last 7 days
+              </button>
+              <button
+                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                disabled={selectedRange === "Last 30 days"}
+                onClick={() => {
+                  setSelectedRange("Last 30 days");
+                  setTempValue([dayjs().subtract(1, "months"), dayjs()]);
+                }}
+              >
+                Last 30 days
+              </button>
+              <button
+                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                disabled={selectedRange === "Custom"}
+                onClick={() => {
+                  setSelectedRange("Custom");
+                  setTempValue([dayjs(), dayjs()]);
+                }}
+              >
+                Custom
+              </button>
+            </div>
+            <Calendar
+              options={{ enableSelectRange: true }}
+              value={tempValue}
+              onChange={(value) => {
+                setSelectedRange("Custom");
+                setTempValue(value);
+              }}
+            />
+          </div>
+        </Dropdown>
+      </div>
+    </div>
+  );
+};

package/src/components/form/input/time.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
+import { Dropdown } from "../../../components";
+import { Icon } from "@iconify/react";
 import dayjs from "dayjs";
 
 export interface TimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -13,14 +14,7 @@ export interface TimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
   const [tempValue, setTempValue] = useState(dayjs().format("hh:mm a"));
-  const [openDropdown, setOpenDropdown] = useState(false);
-  const [position, setPosition] = useState<{
-    top: number;
-    left: number;
-  } | null>(null);
-  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLButtonElement>(null);
   const hoursRef = useRef<HTMLDivElement>(null);
   const minutesRef = useRef<HTMLDivElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
@@ -108,74 +102,26 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
   ];
   const ampm = ["am", "pm"];
 
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node) &&
-        !triggerRef.current?.contains(e.target as Node)
-      ) {
-        setOpenDropdown(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
-      const windowHeight = window.innerHeight;
-
-      setPosition({
-        top: rect.bottom + window.scrollY + 10,
-        left: rect.left + window.scrollX,
-      });
-
-      setDropdownWidth(rect.width);
-
-      if (rect.bottom + dropdownHeight > windowHeight) {
-        setPosition((prev) =>
-          prev
-            ? { ...prev, top: rect.top + window.scrollY - dropdownHeight - 10 }
-            : null
+  const handleAutoScroll = () => {
+    const scrollToSelected = (
+      ref: React.RefObject<HTMLDivElement>,
+      value: string,
+      delay: number
+    ) => {
+      const timeout = setTimeout(() => {
+        const selectedElement = ref.current?.querySelector(
+          `[data-value='${value}']`
         );
-      }
-    }
-
-    if (openDropdown) {
-      document.getElementById("body")!.style.overflow = "hidden";
-    } else {
-      document.getElementById("body")!.style.overflow = "auto";
-    }
-  }, [openDropdown]);
-
-  useEffect(() => {
-    if (openDropdown) {
-      const scrollToSelected = (
-        ref: React.RefObject<HTMLDivElement>,
-        value: string,
-        delay: number
-      ) => {
-        const timeout = setTimeout(() => {
-          const selectedElement = ref.current?.querySelector(
-            `[data-value='${value}']`
-          );
-          selectedElement?.scrollIntoView({
-            block: "nearest",
-          });
-        }, delay);
-        return () => clearTimeout(timeout);
-      };
+        selectedElement?.scrollIntoView({
+          block: "center",
+        });
+      }, delay);
+      return () => clearTimeout(timeout);
+    };
 
-      scrollToSelected(hoursRef, tempValue.split(":")[0], 0);
-      scrollToSelected(minutesRef, tempValue.split(":")[1].split(" ")[0], 0);
-    }
-  }, [openDropdown, tempValue]);
+    scrollToSelected(hoursRef, tempValue.split(":")[0], 0);
+    scrollToSelected(minutesRef, tempValue.split(":")[1].split(" ")[0], 1);
+  };
 
   useEffect(() => {
     if (rest.value) {
@@ -197,119 +143,132 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
   }, [tempValue]);
 
   return (
-    <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
-      <div className="relative" ref={triggerRef}>
-        <div
-          className="relative flex items-center cursor-pointer"
-          onClick={() => setOpenDropdown(!openDropdown)}
-        >
+    <div className="flex items-end">
+      <label className={`grid gap-2 ${width}`}>
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              rest.required &&
+              "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        <div className="relative flex items-center">
           <input
             type="text"
             className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
             value={tempValue}
             {...rest}
           />
+          <button
+            type="button"
+            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            tabIndex={-1}
+            disabled={rest.disabled}
+            onClick={(e) => {
+              e.preventDefault();
+              dropdownRef.current?.click();
+              handleAutoScroll();
+            }}
+          >
+            <Icon icon="tabler:clock" />
+          </button>
         </div>
-        {openDropdown &&
-          position &&
-          createPortal(
-            <div
+      </label>
+      <div className="w-0 overflow-hidden">
+        <Dropdown
+          dismissOnClick={false}
+          trigger={
+            <button
+              type="button"
               ref={dropdownRef}
-              className={`absolute grid grid-cols-3 gap-2 min-w-40 h-40 p-1 z-50 pointer-events-auto bg-secondary-bg shadow border rounded-md overflow-hidden`}
-              style={{
-                top: position.top,
-                left: position.left,
-                width: dropdownWidth,
-              }}
+              className={`w-0 my-0.5 ${height}`}
+            >
+              1
+            </button>
+          }
+        >
+          <div className="flex gap-2 w-80 md:w-full overflow-auto md:overflow-clip">
+            <div
+              ref={hoursRef}
+              className="w-20 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
+            >
+              {hours.map((item, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                    tempValue.split(":")[0] === item
+                      ? "bg-primary-transparent cursor-default"
+                      : "hover:bg-secondary-light"
+                  }`}
+                  data-value={item}
+                  onMouseDown={() => {
+                    setTempValue(
+                      `${item}:${tempValue.split(":")[1].split(" ")[0]} ${
+                        tempValue.split(" ")[1]
+                      }`
+                    );
+                  }}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+            <div
+              ref={minutesRef}
+              className="w-20 h-80 overflow-auto [&::-webkit-scrollbar]:hidden"
             >
-              <div
-                ref={hoursRef}
-                className="h-full overflow-auto [&::-webkit-scrollbar]:hidden"
-              >
-                {hours.map((item, index) => (
-                  <button
-                    key={index}
-                    type="button"
-                    className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
-                      tempValue.split(":")[0] === item
-                        ? "bg-primary-transparent cursor-default"
-                        : "hover:bg-secondary-light"
-                    }`}
-                    data-value={item}
-                    onMouseDown={() => {
-                      setTempValue(
-                        `${item}:${tempValue.split(":")[1].split(" ")[0]} ${
-                          tempValue.split(" ")[1]
-                        }`
-                      );
-                    }}
-                  >
-                    {item}
-                  </button>
-                ))}
-              </div>
-              <div
-                ref={minutesRef}
-                className="h-full overflow-auto [&::-webkit-scrollbar]:hidden"
-              >
-                {minutes.map((item, index) => (
-                  <button
-                    key={index}
-                    type="button"
-                    className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
-                      tempValue.split(":")[1].split(" ")[0] === item
-                        ? "bg-primary-transparent cursor-default"
-                        : "hover:bg-secondary-light "
-                    }`}
-                    data-value={item}
-                    onMouseDown={() => {
-                      setTempValue(
-                        `${tempValue.split(":")[0]}:${item} ${
-                          tempValue.split(" ")[1]
-                        }`
-                      );
-                    }}
-                  >
-                    {item}
-                  </button>
-                ))}
-              </div>
-              <div className="h-full overflow-auto [&::-webkit-scrollbar]:hidden">
-                {ampm.map((item, index) => (
-                  <button
-                    key={index}
-                    type="button"
-                    className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
-                      tempValue.split(" ")[1] === item
-                        ? "bg-primary-transparent cursor-default"
-                        : "hover:bg-secondary-light "
-                    }`}
-                    data-value={item}
-                    onMouseDown={() => {
-                      setTempValue(
-                        `${tempValue.split(":")[0]}:${
-                          tempValue.split(":")[1].split(" ")[0]
-                        } ${item}`
-                      );
-                    }}
-                  >
-                    {item}
-                  </button>
-                ))}
-              </div>
-            </div>,
-            document.body
-          )}
+              {minutes.map((item, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                    tempValue.split(":")[1].split(" ")[0] === item
+                      ? "bg-primary-transparent cursor-default"
+                      : "hover:bg-secondary-light "
+                  }`}
+                  data-value={item}
+                  onMouseDown={() => {
+                    setTempValue(
+                      `${tempValue.split(":")[0]}:${item} ${
+                        tempValue.split(" ")[1]
+                      }`
+                    );
+                  }}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+            <div className="w-20 h-80 overflow-auto [&::-webkit-scrollbar]:hidden">
+              {ampm.map((item, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  className={`w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                    tempValue.split(" ")[1] === item
+                      ? "bg-primary-transparent cursor-default"
+                      : "hover:bg-secondary-light "
+                  }`}
+                  data-value={item}
+                  onMouseDown={() => {
+                    setTempValue(
+                      `${tempValue.split(":")[0]}:${
+                        tempValue.split(":")[1].split(" ")[0]
+                      } ${item}`
+                    );
+                  }}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Dropdown>
       </div>
-    </label>
+    </div>
   );
 };