@skalfa/skalfa-app 1.0.2 → 1.0.5

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

@@ -1,318 +0,0 @@
-"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

@@ -1,192 +0,0 @@
-"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

@@ -1,169 +0,0 @@
-"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>
-    </>
-  );
-};