@skalfa/skalfa-app 1.0.0

package/components/base.components/input/InputMap.component.tsx

@@ -0,0 +1,318 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import axios from "axios";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLocationDot, faLocationCrosshairs } from "@fortawesome/free-solid-svg-icons";
+import { GoogleMap, LoadScript } from "@react-google-maps/api";
+import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
+import { BottomSheetComponent, ButtonComponent, OutsideClickComponent } from "@components";
+
+
+
+type CT = "label" | "tip" | "error" | "input" | "icon";
+
+export interface ValueMapProps {
+  lat       :  number | null;
+  lng       :  number | null;
+  address  ?:  string;
+}
+
+export interface InputMapProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label      ?:  string;
+  tip        ?:  string | React.ReactNode;
+  leftIcon   ?:  any;
+  rightIcon  ?:  any;
+
+  value        ?:  any;
+  invalid      ?:  string;
+  validations  ?:  ValidationRules;
+
+  onChange  ?:  (value: any) => any;
+  register    ?:  (name: string, validations?: ValidationRules) => void;
+  unregister  ?:  (name: string) => void;
+
+  className  ?:  string;
+}
+
+
+
+export function InputMapComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+
+  value,
+  invalid,
+  validations,
+  
+  register,
+  unregister,
+  onChange,
+  
+  className = "",
+  ...props
+}: InputMapProps) {
+  const { isSm }  =  useResponsive();
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const randomId      =  useInputRandomId()
+
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const [invalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
+
+
+  return (
+    <>
+    <div className="relative flex flex-col gap-y-0.5">
+      {label && (
+        <label
+          htmlFor={randomId}
+          className={cn(
+            "input-label",
+            pcn<CT>(className, "label"),
+            props.disabled && "opacity-50",
+            inputHandler.focus && "text-primary",
+            !!invalidMessage && "text-danger",
+          )}
+        >
+          {label}
+          {validations && validation.hasRules(validations, "required") && <span className="text-danger ml-1">*</span>}
+        </label>
+      )}
+
+      {tip && (
+        <small
+          className={cn(
+            "input-tip",
+            pcn<CT>(className, "tip"),
+            props.disabled && "opacity-60",
+          )}
+        >{tip}</small>
+      )}
+
+      <OutsideClickComponent onOutsideClick={!isSm ? () => inputHandler.setFocus(false) : undefined}>
+        <div className="relative">
+          <input
+            {...props}
+            id={randomId}
+            className={cn(
+              "input",
+              leftIcon && "pl-12",
+              rightIcon && "pr-12",
+              pcn<CT>(className, "input"),
+              !!invalidMessage && "input-error",
+            )}
+            value={inputHandler.value?.address || ""}
+            readOnly
+            onFocus={(e) => {
+              props.onFocus?.(e);
+              inputHandler.setFocus(true);
+              inputHandler.setIdle(false);
+            }}
+            autoComplete="off"
+          />
+
+          {leftIcon && (
+            <FontAwesomeIcon
+              className={cn(
+                "left-4 input-icon",
+                pcn<CT>(className, "icon"),
+                props.disabled && "opacity-60",
+                inputHandler.focus && "text-primary",
+              )}
+              icon={leftIcon}
+            />
+          )}
+
+          {rightIcon && (
+            <FontAwesomeIcon
+              className={cn(
+                "right-4 input-icon",
+                pcn<CT>(className, "icon"),
+                props.disabled && "opacity-60",
+                inputHandler.focus && "text-primary",
+              )}
+              icon={rightIcon}
+            />
+          )}
+
+          {!isSm && inputHandler.focus && (
+            <div
+              className="absolute top-full left-0 mt-2 w-full z-50 bg-background border border-light-border rounded-md overflow-hidden shadow-lg"
+              style={{ height: 300 }}
+            >
+              <InputMapPickerComponent 
+                value={inputHandler.value}
+                onChange={(e) => {
+                  inputHandler.setValue(e)
+                  onChange?.(e)
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </OutsideClickComponent>
+
+      {invalidMessage && (
+        <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+      )}
+    </div>
+
+    {isSm && (
+      <BottomSheetComponent
+        show={inputHandler.focus}
+        onClose={() => inputHandler.setFocus(false)}
+        size={450}
+        footer={
+          <div className="p-4">
+            <ButtonComponent
+              label="Selesai"
+              variant="outline"
+              onClick={() => inputHandler.setFocus(false)}
+              block
+            />
+          </div>
+        }
+      >
+        <div className="p-4">
+          <InputMapPickerComponent
+            onChange={(e) => {
+              inputHandler.setValue(e);
+              onChange?.(e);
+            }}
+          />
+        </div>
+      </BottomSheetComponent>
+    )}
+    </>
+  );
+}
+
+
+export interface MapPickerProps {
+  value     ?:  any;
+  onChange  ?:  (value: any) => any;
+}
+
+export const InputMapPickerComponent: React.FC<MapPickerProps> = ({
+  onChange,
+  value
+}) => {
+  const mapRef  =  useRef<google.maps.Map | null>(null);
+
+  const [addressLoading, setAddressLoading]  =  useState(false);
+  const [drag, setDrag]                      =  useState(false);
+
+
+  // =========================>
+  // ## Map Events
+  // =========================>
+  const setCurrentPosition = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((pos) => {
+        const newPos = {
+          lat: pos.coords.latitude,
+          lng: pos.coords.longitude,
+          address: "",
+        };
+
+        onChange?.(newPos);
+        mapRef.current?.panTo(new google.maps.LatLng(newPos.lat, newPos.lng));
+      });
+    }
+  };
+
+
+  const handleDragEnd = useCallback(() => {
+    if (mapRef.current) {
+      const center = mapRef.current.getCenter();
+
+      if (center) {
+        onChange?.({
+          lat: center.lat(),
+          lng: center.lng(),
+          address: "",
+        });
+      }
+
+      setDrag(false);
+    }
+  }, []);
+
+
+  // =========================>
+  // ## Reverse Geocode
+  // =========================>
+  useEffect(() => {
+    if (value?.lat && value?.lng) {
+      setAddressLoading(true);
+      onChange?.((prev: any) => ({ ...prev, address: "" }));
+
+      axios.get(`https://api.geoapify.com/v1/geocode/reverse?lat=${value?.lat}&lon=${value?.lng}&apiKey=${process.env.NEXT_PUBLIC_GEOAPIFY_KEY}`)
+        .then((res: any) => {
+          if (res.status === 200 && !res.data.error) {
+            const data = res.data.features?.at(0)?.properties;
+            const address =(data?.address_line1 || "") + " " + (data?.address_line2 || "");
+
+            onChange?.((prev: any) => ({ ...prev, address }));
+            onChange?.({ ...value, address });
+          }
+        })
+        .finally(() => setAddressLoading(false));
+    }
+  }, [value?.lat, value?.lng]);
+
+  return (
+    <div className="relative w-full">
+      <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_MAP_KEY || ""}>
+        <GoogleMap
+          mapContainerStyle={{ width: "100%", height: "100%" }}
+          center={{
+            lat: value?.lat || -6.208,
+            lng: value?.lng || 106.689,
+          }}
+          zoom={18}
+          options={{
+            streetViewControl: false,
+            mapTypeControl: false,
+            fullscreenControl: false,
+          }}
+          onLoad={(map) => {mapRef.current = map}}
+          onDrag={() => setDrag(true)}
+          onDragEnd={handleDragEnd}
+        />
+      </LoadScript>
+
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+        <FontAwesomeIcon
+          icon={faLocationDot}
+          className={cn(
+            "text-3xl text-primary drop-shadow-md transition-transform",
+            drag && "scale-125 -translate-y-2",
+          )}
+        />
+      </div>
+
+      <div className="absolute top-3 left-3 bg-background px-3 py-2 rounded-lg shadow">
+        {addressLoading && !value?.address ? (
+          <div className="py-4 w-[200px]" />
+        ) : (
+          <span className="text-sm">{value?.address}</span>
+        )}
+      </div>
+
+      <div
+        className="absolute top-3 right-3 bg-background p-3 rounded-lg cursor-pointer shadow"
+        onClick={() => setCurrentPosition()}
+      ><FontAwesomeIcon icon={faLocationCrosshairs} className="text-lg" /></div>
+    </div>
+  )
+}

package/components/base.components/input/InputNumber.component.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import React, { InputHTMLAttributes, ReactNode } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
+import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
+
+
+
+type CT = "label" | "tip" | "error" | "input" | "icon";
+
+export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label      ?:  string;
+  tip        ?:  string | ReactNode;
+  leftIcon   ?:  any;
+  rightIcon  ?:  any;
+
+  value        ?:  number;
+  invalid      ?:  string;
+  validations  ?:  ValidationRules;
+  min          ?:  number;
+  max          ?:  number;
+  
+  onChange  ?:  (value: number) => any;
+  register    ?:  (name: string, validations?: ValidationRules) => void;
+  unregister  ?:  (name: string) => void;
+  
+  /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+  className  ?:  string;
+}
+
+
+
+export function InputNumberComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+
+  value,
+  invalid,
+  validations,
+  min,
+  max,
+
+  onChange,
+  register,
+  unregister,
+
+  className = "",
+  ...props
+}: InputNumberProps) {
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const inputHandler  =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const randomId      =  useInputRandomId()
+
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const [invalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
+
+
+  // =========================>
+  // ## Change value handler
+  // =========================>
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    const regex = /^-?\d*\.?\d*$/;
+    if (regex.test(newValue)) {
+      inputHandler.setValue(newValue);
+      inputHandler.setIdle(false);
+      onChange?.(Number(newValue));
+    }
+  };
+
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    props.onBlur?.(e);
+    setTimeout(() => inputHandler.setFocus(false), 100);
+  };
+
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    props.onFocus?.(e);
+    inputHandler.setFocus(true);
+  };
+
+
+  return (
+    <>
+      <div className="relative flex flex-col gap-y-0.5">
+        <label
+          htmlFor={randomId}
+          className={cn(
+            "input-label",
+            pcn<CT>(className, "label"),
+            props.disabled && "opacity-50",
+            props.disabled && pcn<CT>(className, "label", "disabled"),
+            inputHandler.focus && "text-primary",
+            inputHandler.focus && pcn<CT>(className, "label", "focus"),
+            !!invalidMessage && "text-danger",
+            !!invalidMessage && pcn<CT>(className, "label", "focus"),
+          )}
+        >
+          {label}
+          {validations && validation.hasRules(validations, "required") && <span className="text-danger ml-1">*</span>}
+        </label>
+
+        {tip && (
+          <small
+            className={cn(
+              "input-tip",
+              pcn<CT>(className, "tip"),
+              props.disabled && "opacity-60",
+              props.disabled && pcn<CT>(className, "tip", "disabled"),
+            )}
+          >{tip}</small>
+        )}
+
+        <div className="relative">
+          <input
+            {...props}
+            id={randomId}
+            className={cn(
+              "input",
+              leftIcon && "pl-12",
+              rightIcon && "pr-12",
+              pcn<CT>(className, "input"),
+              !!invalidMessage && "input-error",
+              !!invalidMessage && pcn<CT>(className, "input", "error"),
+            )}
+            value={inputHandler.value}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            autoComplete="off"
+            min={min}
+            max={max}
+          />
+
+          {leftIcon && (
+            <FontAwesomeIcon
+              className={cn(
+                "left-4 input-icon ",
+                pcn<CT>(className, "icon"),
+                props.disabled && "opacity-60",
+                props.disabled && pcn<CT>(className, "icon", "disabled"),
+                inputHandler.focus && "text-primary",
+                inputHandler.focus && pcn<CT>(className, "icon", "focus"),
+              )}
+              icon={leftIcon}
+            />
+          )}
+
+          <label
+            htmlFor={randomId}
+            className={cn(
+              "right-4 input-icon",
+              pcn<CT>(className, "icon"),
+              props.disabled && "opacity-60",
+              props.disabled && pcn<CT>(className, "icon", "disabled"),
+              inputHandler.focus && "text-primary",
+              inputHandler.focus && pcn<CT>(className, "icon", "focus"),
+            )}
+          >
+            <div className="flex flex-col">
+              <FontAwesomeIcon
+                className={`text-light-foreground hover:text-primary -mb-1`}
+                icon={faSortUp}
+                onClick={() => inputHandler.setValue(String(Number(inputHandler.value) + 1))}
+              />
+              <FontAwesomeIcon
+                className={`text-light-foreground hover:text-primary -mt-1`}
+                icon={faSortDown}
+                onClick={() => inputHandler.setValue(String(Number(inputHandler.value) - 1))}
+              />
+            </div>
+          </label>
+        </div>
+
+        {invalidMessage && (
+          <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+        )}
+      </div>
+    </>
+  );
+}

package/components/base.components/input/InputOtp.component.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { ClipboardEvent, FC, KeyboardEvent, ReactNode, useEffect, useRef, useState } from "react";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "label" | "tip" | "error" | "base" | "icon";
+
+export interface InputOtpProps {
+  label     ?:  string;
+  tip       ?:  string | ReactNode;
+  name       :  string;
+  disabled  ?:  boolean;
+
+  value    ?:  string;
+  invalid  ?:  string;
+  length   ?:  number;
+
+  onChange  ?:  (value: string) => any;
+
+  /** Use custom class with: "label::", "tip::", "error::". */
+  className  ?:  string;
+}
+
+
+
+export const InputOtpComponent: FC<InputOtpProps> = ({
+  label,
+  tip,
+  name,
+  disabled,
+
+  value,
+  invalid,  
+  length = 6,
+
+  onChange,
+
+  className = "",
+}) => {
+  const [isFocus, setIsFocus]  =  useState(false);
+  const inputsRef              =  useRef<(HTMLInputElement | null)[]>([]);
+  const [otp, setOtp]          =  useState<string[]>((value || "").split("").concat(Array(length).fill("")).slice(0, length));
+
+
+  useEffect(() => {
+    const handleFocusChange = () => {
+      const anyFocused = inputsRef.current.some((input) => input === document.activeElement);
+      setIsFocus(anyFocused);
+    };
+
+    window.addEventListener("focusin", handleFocusChange);
+    window.addEventListener("focusout", handleFocusChange);
+
+    return () => {
+      window.removeEventListener("focusin", handleFocusChange);
+      window.removeEventListener("focusout", handleFocusChange);
+    };
+  }, []);
+
+
+  const emitChange = (newOtp: string[]) => {
+    const val = newOtp.join("");
+    onChange?.(val);
+  };
+
+
+  const handleChange = (val: string, index: number) => {
+    if (!/^[0-9]?$/.test(val)) return;
+    const newOtp   =  [...otp];
+    newOtp[index]  =  val;
+
+    setOtp(newOtp);
+    emitChange(newOtp);
+
+    (val && index < length - 1) && inputsRef.current[index + 1]?.focus();
+  };
+
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === "Backspace") {
+      if (otp[index]) {
+        const newOtp = [...otp];
+        newOtp[index] = "";
+        setOtp(newOtp);
+        emitChange(newOtp);
+      } else if (index > 0) {
+        inputsRef.current[index - 1]?.focus();
+      }
+    }
+  };
+
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const paste = e.clipboardData.getData("text").trim();
+    if (!/^[0-9]+$/.test(paste)) return;
+    const pasted = paste.slice(0, length).split("");
+    const newOtp = [...otp];
+    for (let i = 0; i < pasted.length; i++) newOtp[i] = pasted[i];
+    setOtp(newOtp);
+    emitChange(newOtp);
+    inputsRef.current[Math.min(pasted.length, length - 1)]?.focus();
+  };
+
+
+  return (
+    <>
+      <div className="relative flex flex-col gap-y-0.5">
+        <label
+          className={cn(
+            "input-label",
+            pcn<CT>(className, "label"),
+            disabled && "opacity-50",
+            disabled && pcn<CT>(className, "label", "disabled"),
+            isFocus && "text-primary",
+            isFocus && pcn<CT>(className, "label", "focus"),
+            !!invalid && "text-danger",
+            !!invalid && pcn<CT>(className, "label", "focus"),
+          )}
+        >
+          {label}
+        </label>
+
+        {tip && (
+          <small
+            className={cn(
+              "input-tip",
+              pcn<CT>(className, "tip"),
+              disabled && "opacity-60",
+              disabled && pcn<CT>(className, "tip", "disabled"),
+            )}
+          >{tip}</small>
+        )}
+        <div className={cn(
+          "input pb-1", 
+          isFocus && "!border-primary",
+          !!invalid && "input-error"
+          )}
+        >
+          <div className="flex gap-2 justify-between">
+            {otp.map((digit, index) => (
+              <input
+                key={index}
+                type="text"
+                ref={(el) => {inputsRef.current[index] = el }}
+                inputMode="numeric"
+                maxLength={1}
+                value={digit}
+                onChange={(e) => handleChange(e.target.value, index)}
+                onKeyDown={(e) => handleKeyDown(e, index)}
+                onPaste={handlePaste}
+                className={`w-8 h-full pb-1 text-center border-b outline-none border-foreground focus:!border-primary placeholder:text-light-foreground`}
+                placeholder="-"
+                autoFocus={index === 0}
+              />
+            ))}
+          </div>
+          <input type="hidden" name={name} value={otp.join("")} />
+        </div>
+
+        {invalid && (
+          <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalid}</small>
+        )}
+      </div>
+    </>
+  );
+};