@skalfa/skalfa-app 1.0.3 → 1.0.6

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

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

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

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