@skalfa/skalfa-component 1.0.6 → 1.0.8

package/src/input/InputNumber.component.tsx

@@ -0,0 +1,194 @@
+"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="input-container">
+        <label
+          htmlFor={randomId}
+          className={cn(
+            "input-label",
+            props.disabled && "input-label-disabled",
+            inputHandler.focus && "input-label-focus",
+            !!invalidMessage && "input-label-error",
+            pcn<CT>(className, "label"),
+            props.disabled && pcn<CT>(className, "label", "disabled"),
+            inputHandler.focus && pcn<CT>(className, "label", "focus"),
+            !!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",
+              props.disabled && "input-tip-disabled",
+              pcn<CT>(className, "tip"),
+              props.disabled && pcn<CT>(className, "tip", "disabled"),
+            )}
+          >{tip}</small>
+        )}
+
+        <div className="relative">
+          <input
+            {...props}
+            id={randomId}
+            className={cn(
+              "input",
+              leftIcon && "input-with-left-icon",
+              rightIcon && "input-with-right-icon",
+              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(
+                "input-icon",
+                "input-icon-left",
+                props.disabled && "input-icon-disabled",
+                inputHandler.focus && "input-icon-focus",
+                pcn<CT>(className, "icon"),
+                props.disabled && pcn<CT>(className, "icon", "disabled"),
+                inputHandler.focus && pcn<CT>(className, "icon", "focus"),
+              )}
+              icon={leftIcon}
+            />
+          )}
+
+          <label
+            htmlFor={randomId}
+            className={cn(
+              "input-icon",
+              "input-icon-right",
+              props.disabled && "input-icon-disabled",
+              inputHandler.focus && "input-icon-focus",
+              pcn<CT>(className, "icon"),
+              props.disabled && pcn<CT>(className, "icon", "disabled"),
+              inputHandler.focus && pcn<CT>(className, "icon", "focus"),
+            )}
+          >
+            <div className="input-number-sort-container">
+              <FontAwesomeIcon
+                className="input-number-sort-up"
+                icon={faSortUp}
+                onClick={() => inputHandler.setValue(String(Number(inputHandler.value) + 1))}
+              />
+              <FontAwesomeIcon
+                className="input-number-sort-down"
+                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/src/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="input-container">
+        <label
+          className={cn(
+            "input-label",
+            disabled && "input-label-disabled",
+            isFocus && "input-label-focus",
+            !!invalid && "input-label-error",
+            pcn<CT>(className, "label"),
+            disabled && pcn<CT>(className, "label", "disabled"),
+            isFocus && pcn<CT>(className, "label", "focus"),
+            !!invalid && pcn<CT>(className, "label", "error"),
+          )}
+        >
+          {label}
+        </label>
+
+        {tip && (
+          <small
+            className={cn(
+              "input-tip",
+              disabled && "input-tip-disabled",
+              pcn<CT>(className, "tip"),
+              disabled && pcn<CT>(className, "tip", "disabled"),
+            )}
+          >{tip}</small>
+        )}
+        <div className={cn(
+          "input input-otp-box", 
+          isFocus && "input-otp-box-focus",
+          !!invalid && "input-error"
+          )}
+        >
+          <div className="input-otp-digits-container">
+            {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="input-otp-cell"
+                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>
+    </>
+  );
+};

package/src/input/InputPassword.component.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import { InputHTMLAttributes, ReactNode, useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
+
+
+
+type CT = "label" | "tip" | "error" | "base" | "icon";
+
+export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label      ?:  string;
+  tip        ?:  string | ReactNode;
+  leftIcon   ?:  any;
+  rightIcon  ?:  any;
+
+  value        ?:  string;
+  invalid      ?:  string;
+  validations  ?:  ValidationRules;
+
+  onChange  ?:  (value: string, confirm?: string) => any;
+  register    ?:  (name: string, validations?: ValidationRules) => void;
+  unregister  ?:  (name: string) => void;
+
+  /** Use custom class with: "label::", "tip::", "error::", "icon::". */
+  className  ?:  string;
+}
+
+
+
+export function InputPasswordComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+
+  value,
+  invalid,
+  validations,
+
+  register,
+  unregister,
+  onChange,
+
+  className = "",
+  ...props
+}: InputPasswordProps) {
+  const [password, setPassword]                =  useState("");
+  const [confirmPassword, setConfirmPassword]  =  useState("");
+  const [strength, setStrength]                =  useState<"weak" | "strong" | "excellent" | "">("");
+
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const inputHandler     =  useInputHandler(props.name, value, validations, register, unregister, false)
+  const randomId         =  useInputRandomId()
+  const randomConfirmId  =  useInputRandomId()
+
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const [invalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
+
+
+  // =========================>
+  // ## Password strength handler
+  // =========================>
+  useEffect(() => {
+    if (!password) return setStrength("");
+
+    const hasLetter = /[A-Za-z]/.test(password);
+    const hasNumber = /\d/.test(password);
+    const hasSymbol = /[^A-Za-z0-9]/.test(password);
+
+    if (hasLetter && !hasNumber && !hasSymbol) setStrength("weak");
+    else if (hasLetter && hasNumber && !hasSymbol) setStrength("strong");
+    else if (hasLetter && hasNumber && hasSymbol) setStrength("excellent");
+    else setStrength("weak");
+  }, [password]);
+
+
+  // =========================>
+  // ## Check match confirm password
+  // =========================>
+  const isConfirmMismatch = confirmPassword && password !== confirmPassword;
+
+
+  return (
+    <div className="input-container">
+      {label && (
+        <label
+          htmlFor={randomId}
+          className={cn(
+            "input-label",
+            props.disabled && "input-label-disabled",
+            inputHandler.focus && "input-label-focus",
+            !!invalidMessage && "input-label-error",
+            pcn<CT>(className, "label"),
+          )}
+        >
+          {label}
+          {validations && validation.hasRules(validations, "required") && <span className="text-danger ml-1">*</span>}
+        </label>
+      )}
+
+      {tip && (
+        <small
+          className={cn(
+            "input-tip",
+            props.disabled && "input-tip-disabled",
+            pcn<CT>(className, "tip"),
+          )}
+        >{tip}</small>
+      )}
+
+      <div className="relative">
+        <input
+          {...props}
+          type="password"
+          id={randomId}
+          className={cn(
+            "input",
+            leftIcon && "input-with-left-icon",
+            rightIcon && "input-with-right-icon",
+            !!invalidMessage && "input-error",
+            pcn<CT>(className, "base"),
+          )}
+          value={password}
+          onChange={(e) => {
+            setPassword(e.target.value);
+            inputHandler.setIdle(false);
+            onChange?.(e.target.value, confirmPassword);
+          }}
+          onFocus={(e) => {
+            props.onFocus?.(e);
+            inputHandler.setFocus(true);
+          }}
+          onBlur={(e) => {
+            props.onBlur?.(e);
+            setTimeout(() => inputHandler.setFocus(false), 100);
+          }}
+          autoComplete="off"
+        />
+
+        {leftIcon && (
+          <FontAwesomeIcon
+            className={cn(
+              "input-icon",
+              "input-icon-left",
+              pcn<CT>(className, "icon")
+            )}
+            icon={leftIcon}
+          />
+        )}
+        {rightIcon && (
+          <FontAwesomeIcon
+            className={cn(
+              "input-icon",
+              "input-icon-right",
+              pcn<CT>(className, "icon")
+            )}
+            icon={rightIcon}
+          />
+        )}
+      </div>
+
+      {invalidMessage && (
+        <small className="input-error-message">
+          {invalidMessage}
+        </small>
+      )}
+
+      {strength && (
+        <div className="flex items-center gap-2 mt-1">
+          <div
+            className={cn(
+              "password-strength-bar",
+              strength === "weak" && "password-strength-bar-weak",
+              strength === "strong" && "password-strength-bar-strong",
+              strength === "excellent" && "password-strength-bar-excellent",
+            )}
+          />
+          <div
+            className={cn(
+              "password-strength-bar",
+              strength === "weak" && "password-strength-bar-empty",
+              strength === "strong" && "password-strength-bar-strong",
+              strength === "excellent" && "password-strength-bar-excellent",
+            )}
+          />
+          <div
+            className={cn(
+              "password-strength-bar",
+              (strength === "weak" || strength === "strong") && "password-strength-bar-empty",
+              strength === "excellent" && "password-strength-bar-excellent",
+            )}
+          />
+          <span
+            className={cn(
+              "password-strength-text",
+              strength === "weak" && "password-strength-text-weak",
+              strength === "strong" && "password-strength-text-strong",
+              strength === "excellent" && "password-strength-text-excellent",
+            )}
+          >
+            {strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent"}
+          </span>
+        </div>
+      )}
+
+      <div className="input-password-confirm-wrapper">
+        <label
+          htmlFor={randomConfirmId}
+          className={cn("input-label", pcn<CT>(className, "label"))}
+        >Password Confirm</label>
+        <div className="relative">
+          <input
+            {...props}
+            id={randomConfirmId}
+            type="password"
+            className={cn(
+              "input",
+              leftIcon && "input-with-left-icon",
+              rightIcon && "input-with-right-icon",
+              pcn<CT>(className, "base"),
+              isConfirmMismatch && "input-error",
+            )}
+            value={confirmPassword}
+            onChange={(e) => {
+              setConfirmPassword(e.target.value);
+              onChange?.(password, e.target.value);
+            }}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+
+      {isConfirmMismatch && (
+        <small className="input-error-message">Password confirmation not match</small>
+      )}
+    </div>
+  );
+}