@skalfa/skalfa-app 1.0.0

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

@@ -0,0 +1,236 @@
+"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="relative flex flex-col gap-y-1">
+      {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>
+      )}
+
+      <div className="relative">
+        <input
+          {...props}
+          type="password"
+          id={randomId}
+          className={cn(
+            "input",
+            leftIcon && "pl-12",
+            rightIcon && "pr-12",
+            pcn<CT>(className, "base"),
+            !!invalidMessage && "input-error",
+          )}
+          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("left-4 input-icon", pcn<CT>(className, "icon"))}
+            icon={leftIcon}
+          />
+        )}
+        {rightIcon && (
+          <FontAwesomeIcon
+            className={cn("right-4 input-icon", pcn<CT>(className, "icon"))}
+            icon={rightIcon}
+          />
+        )}
+      </div>
+
+      {invalidMessage && (
+        <small className={cn("input-error-message", "text-danger mt-1")}>
+          {invalidMessage}
+        </small>
+      )}
+
+      {strength && (
+        <div className="flex items-center gap-2 mt-1">
+          <div
+            className={cn(
+              "h-1 rounded transition-all duration-300 w-1/3",
+              strength === "weak" && "bg-danger",
+              strength === "strong" && "bg-warning",
+              strength === "excellent" && "bg-success",
+            )}
+          />
+          <div
+            className={cn(
+              "h-1 rounded transition-all duration-300 w-1/3",
+              strength === "weak" && "bg-background",
+              strength === "strong" && "bg-warning",
+              strength === "excellent" && "bg-success",
+            )}
+          />
+          <div
+            className={cn(
+              "h-1 rounded transition-all duration-300 w-1/3",
+              strength === "weak" && "bg-background ",
+              strength === "strong" && "bg-background",
+              strength === "excellent" && "bg-success",
+            )}
+          />
+          <span
+            className={cn(
+              "text-[10px] font-medium",
+              strength === "weak" && "text-danger",
+              strength === "strong" && "text-warning",
+              strength === "excellent" && "text-success",
+            )}
+          >{strength === "weak" ? "Weak" : strength === "strong" ? "Strong" : "Excellent"}</span>
+        </div>
+      )}
+
+      <div className="mt-4">
+        <label
+          htmlFor={randomConfirmId}
+          className={cn("input-label text-sm", pcn<CT>(className, "label"))}
+        >Password Confirm</label>
+        <div className="relative">
+          <input
+            {...props}
+            id={randomConfirmId}
+            type="password"
+            className={cn(
+              "input",
+              leftIcon && "pl-12",
+              rightIcon && "pr-12",
+              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={cn("input-error-message", "text-danger mt-1")}>Password confirmation not match</small>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,175 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react";
+import { api, ApiType, cn, pcn, useInputHandler, useValidation, validation, ValidationRules } from "@utils";
+import { RadioComponent } from "@components";
+
+
+
+type CT = "label" | "tip" | "error" | "input" | "icon";
+
+export type InputRadioOptionProps = {
+  value: string | number;
+  label: string;
+};
+
+export type InputRadioProps = {
+  name                  :  string;
+  label                ?:  string;
+  tip                  ?:  string | ReactNode;
+  vertical             ?:  boolean;
+
+  value                ?:  string | number;
+  disabled             ?:  boolean;
+  invalid              ?:  string;
+  options              ?:  InputRadioOptionProps[];
+  serverOptionControl  ?:  ApiType;
+  customOptions        ?:  any;
+  validations          ?:  ValidationRules;
+
+  onChange  ?:  (value: string | 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;
+  /** Use custom class with: "label::", "checked::", "error::". */
+  classNameCheckbox    ?: string;
+};
+
+
+
+export function InputRadioComponent({
+  name,
+  label,
+  tip,
+  vertical,
+
+  value,
+  disabled,
+  invalid,
+
+  options,
+  serverOptionControl,
+  customOptions,
+  validations,
+
+  onChange,
+  register,
+  unregister,
+
+  className = "",
+  classNameCheckbox = "",
+}: InputRadioProps) {
+  const [dataOptions, setDataOptions]  =  useState<InputRadioOptionProps[]>([]);
+  const [loading, setLoading]          =  useState(false);
+
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const inputHandler  =  useInputHandler(name, value, validations, register, unregister, false)
+
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const [invalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
+
+
+  // =========================>
+  // ## Fetch option
+  // =========================>
+  useEffect(() => {
+    const fetchOptions = async () => {
+      setLoading(true);
+      const mutateOptions = await api(serverOptionControl || {});
+      if (mutateOptions?.status == 200) {
+        customOptions
+          ? setDataOptions([customOptions, ...mutateOptions.data])
+          : setDataOptions(mutateOptions.data);
+        setLoading(false);
+      }
+    };
+
+    if (serverOptionControl?.path || serverOptionControl?.url) {
+      fetchOptions();
+    } else {
+      !options && setDataOptions([]);
+    }
+  }, [serverOptionControl?.path, serverOptionControl?.url]);
+
+
+  return (
+    <>
+      <div className="w-full 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"),
+            !!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"),
+              disabled && "opacity-60",
+              disabled && pcn<CT>(className, "tip", "disabled"),
+            )}
+          >{tip}</small>
+        )}
+
+        <div
+          className={cn(
+            `input overflow-auto input-scroll w-full flex flex-nowrap gap-y-2 gap-4 ${
+              vertical && `flex-col flex-wrap ${vertical}`
+            }`,
+            pcn<CT>(className, "input"),
+            !!invalidMessage && "input-error",
+            !!invalidMessage && pcn<CT>(className, "input", "error"),
+          )}
+        >
+          {loading && (vertical ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3]).map((_, key) => {
+            return <div key={key} className="w-1/3 h-6 rounded-lg"></div>;
+          })}
+
+          {(options || dataOptions) &&
+            (options || dataOptions)?.map((option, key) => {
+              return (
+                <RadioComponent
+                  key={key}
+                  label={option.label}
+                  name={`option[${option.value}]#${name}`}
+                  checked={inputHandler.value == option.value}
+                  disabled={disabled}
+                  className={classNameCheckbox}
+                  onChange={() => {
+                    if (inputHandler.value == option.value) {
+                      inputHandler.setValue("");
+                      onChange?.("");
+                    } else {
+                      inputHandler.setValue(option.value || "");
+                      onChange?.(option.value || "");
+                    }
+                  }}
+                />
+              );
+            })}
+        </div>
+
+        {invalidMessage && (
+          <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,276 @@
+"use client"
+
+import { FC, InputHTMLAttributes, ReactNode, useEffect, useMemo, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+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 InputTimeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label      ?:  string;
+  tip        ?:  string | ReactNode;
+  leftIcon   ?:  any;
+  rightIcon  ?:  any;
+
+  value        ?:  string;
+  invalid      ?:  string;
+  validations  ?:  ValidationRules;
+
+  onChange  ?:  (value: string) => any;
+  register    ?:  (name: string, validations?: ValidationRules) => void;
+  unregister  ?:  (name: string) => void;
+
+  /** Use custom class with: "label::", "tip::", "error::", "icon::". */
+  className  ?:  string;
+}
+
+
+
+export function InputTimeComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+  
+  value,
+  invalid,
+  validations,
+
+  register,
+  unregister,
+  onChange,
+  
+  className = "",
+  ...props
+}: InputTimeProps) {
+  const { isSm }  =  useResponsive();
+
+  // =========================>
+  // ## 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);
+
+
+  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",
+            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}
+              onChange={(e) => {
+                inputHandler.setValue(e.target.value);
+                inputHandler.setIdle(false);
+                onChange?.(e.target.value);
+              }}
+              onFocus={(e) => {
+                props.onFocus?.(e);
+                inputHandler.setFocus(true);
+              }}
+              autoComplete="off"
+              inputMode={isSm ? "none" : undefined}
+            />
+
+            {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 z-50 top-full right-0 mt-1 w-max bg-background border rounded-[6px] p-2 shadow min-w-[300]">
+                <InputTimePickerComponent
+                  onChange={(time) => {
+                    inputHandler.setValue(time);
+                    onChange?.(time);
+                  }}
+                />
+              </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={380}
+          footer={
+            <div className="p-4">
+              <ButtonComponent
+                label="Selesai"
+                variant="outline"
+                onClick={() => inputHandler.setFocus(false)}
+                block
+              />
+            </div>
+          }
+        >
+          <div className="p-4">
+            <InputTimePickerComponent
+              onChange={(time) => {
+                inputHandler.setValue(time);
+                onChange?.(time);
+              }}
+            />
+          </div>
+        </BottomSheetComponent>
+      )}
+    </>
+  );
+}
+
+
+
+interface InputTimePickerProps {
+  onChange      ?:  (time: string) => void;
+  rightElement  ?:  ReactNode;
+};
+
+
+
+
+export const InputTimePickerComponent: FC<InputTimePickerProps> = ({
+  onChange,
+  rightElement,
+}) => {
+  const [hour, setHour]      =  useState(0);
+  const [minute, setMinute]  =  useState(0);
+  const [second, setSecond]  =  useState(0);
+
+  const hours    =  Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+  const minutes  =  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
+  const seconds  =  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
+
+  const handleSelect = (type: "h" | "m" | "s", val: string) => {
+    if (type === "h") setHour(Number(val));
+    if (type === "m") setMinute(Number(val));
+    if (type === "s") setSecond(Number(val));
+  };
+
+  useEffect(() => {
+    const formatted = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`;
+    onChange?.(formatted);
+  }, [hour, minute, second]);
+
+  const renderColumn = (items: string[], type: "h" | "m" | "s", activeValue: number) => (
+    <div className="flex-1 overflow-y-auto text-center input-scroll">
+      {items.map((item) => {
+        const active = Number(item) === activeValue;
+
+        return (
+          <div
+            key={item}
+            onClick={() => handleSelect(type, item)}
+            className={cn(
+              "p-2 cursor-pointer rounded text-sm",
+              active ? "bg-primary text-background font-semibold" : "hover:bg-light-primary"
+            )}
+          >{item}</div>
+        );
+      })}
+    </div>
+  );
+
+  const timeSlots = useMemo(() => {
+    const newTimeSlots = [];
+
+    for (let i = 0; i <= 24 * 60; i += 30) {
+      const hours    =  Math.floor(i / 60);
+      const minutes  =  i % 60;
+      const label    =  `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+
+      newTimeSlots.push(label);
+    }
+
+    return newTimeSlots;
+  }, [])
+
+  return (
+    <div className="w-full max-h-[260] flex gap-2">
+      <div className="w-1/3 overflow-y-auto bg-background rounded-[6px] input-scroll">
+        {timeSlots.map((time) => (
+          <div
+            key={time}
+            className="p-2 text-sm rounded cursor-pointer hover:bg-light-primary text-center"
+            onClick={() => onChange?.(time)}
+          >{time}</div>
+        ))}
+      </div>
+
+      <div className="w-2/3 flex gap-2">
+        {renderColumn(hours, "h", hour)}
+        {renderColumn(minutes, "m", minute)}
+        {renderColumn(seconds, "s", second)}
+      </div>
+
+      {rightElement && <div>{rightElement}</div>}
+    </div>
+  );
+};