@skalfa/skalfa-component 1.0.7 → 1.0.8

package/src/input/InputCheckbox.component.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react";
+import { api, ApiType, cn, pcn, useInputHandler, useValidation, validation, ValidationRules } from "@utils";
+import { CheckboxComponent } from "./Checkbox.component";
+
+
+
+type CT = "label" | "tip" | "error" | "input" | "icon";
+
+export interface InputCheckboxOptionProps {
+  value: string | number;
+  label: string;
+};
+
+export interface InputCheckboxProps {
+  name       :  string;
+  label     ?:  string;
+  tip       ?:  string | ReactNode;
+  vertical  ?:  boolean;
+
+  value     ?:  string[] | number[];
+  disabled  ?:  boolean;
+  invalid   ?:  string;
+
+  options              ?:  InputCheckboxOptionProps[];
+  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::". */
+  className            ?: string;
+  
+  /** Use custom class with: "label::", "checked::", "error::". */
+  classNameCheckbox    ?: string;
+};
+
+
+
+export function InputCheckboxComponent({
+  name,
+  label,
+  tip,
+  vertical,
+  className="",
+  classNameCheckbox="",
+
+  value,
+  disabled,
+  invalid,
+
+  options,
+  serverOptionControl,
+  customOptions,
+  validations,
+
+  register,
+  unregister,
+  onChange,
+}: InputCheckboxProps) {
+
+  const [dataOptions, setDataOptions]  =  useState<InputCheckboxOptionProps[]>([]);
+  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="input-container w-full">
+        <label
+          className={cn(
+            "input-label",
+            disabled && "input-label-disabled",
+            invalidMessage && "input-label-error",
+            pcn<CT>(className, "label"),
+            disabled && pcn<CT>(className, "label", "disabled"),
+            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",
+              disabled && "input-tip-disabled",
+              pcn<CT>(className, "tip"),
+              disabled && pcn<CT>(className, "tip", "disabled"),
+            )}
+          >{tip}</small>
+        )}
+
+        <div
+          className={cn(
+            "input input-checkbox-list",
+            vertical && "input-checkbox-list-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) => {
+            const checked = Array().concat(inputHandler.value).find((val) => val == option.value);
+
+            return (
+              <CheckboxComponent
+                key={key}
+                label={option.label}
+                name={`option[${option.value}]#${name}`}
+                checked={!!checked}
+                disabled={disabled}
+                className={classNameCheckbox}
+                onChange={() => {
+                  const newVal = (Array.isArray(inputHandler.value) ? inputHandler.value : [])
+                    .filter((val) => val !== option.value)
+                    .concat(checked ? [] : [option.value]);
+
+                  inputHandler.setValue(newVal);
+                  onChange?.(newVal);
+                }}
+              />
+            );
+          })}
+        </div>
+
+        {invalidMessage && (
+          <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+        )}
+      </div>
+    </>
+  );
+}

package/src/input/InputCurrency.component.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import { InputHTMLAttributes, ReactNode } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, conversion, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
+
+
+
+type CT = "label" | "tip" | "error" | "input" | "icon";
+
+export interface InputCurrencyProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label      ?:  string;
+  tip        ?:  string | ReactNode;
+  leftIcon   ?:  any;
+  rightIcon  ?:  any;
+
+  value        ?:  number;
+  invalid      ?:  string;
+  validations  ?: ValidationRules;
+  format       ?:  {
+    locale     ?:  string;
+    currency   ?:  string;
+  };
+
+  onChange  ?:  (value: number) => any;
+  register    ?:  (name: string, validations?: ValidationRules) => void;
+  unregister  ?:  (name: string) => void;
+
+  /** Use custom class with: "label::", "tip::", "error::", "icon::". */
+  className  ?:  string;
+}
+
+
+
+export function InputCurrencyComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+
+  value,
+  invalid,
+  
+  validations,
+  format,
+
+  register,
+  unregister,
+  onChange,
+  
+  className = "",
+  ...props
+}: InputCurrencyProps) {
+
+  // =========================>
+  // ## 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="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 ? conversion.currency(inputHandler.value, format?.locale, format?.currency) : ""}
+          onChange={(e) => {
+            const val = Number(e.target.value.replace(/[^0-9]/g,""));
+
+            inputHandler.setValue(val);
+            inputHandler.setIdle(false);
+            
+            onChange?.(val);
+          }}
+          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",
+              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}
+          />
+        )}
+        {rightIcon && (
+          <FontAwesomeIcon
+            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"),
+            )}
+            icon={rightIcon}
+          />
+        )}
+      </div>
+
+      {invalidMessage && (
+        <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+      )}
+    </div>
+  );
+}

package/src/input/InputDate.component.tsx

@@ -0,0 +1,356 @@
+"use client"
+
+import { InputHTMLAttributes, ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import moment from "moment";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
+import { BottomSheetComponent } from "../modal/BottomSheet.component";
+import { ButtonComponent } from "../button/Button.component";
+import { OutsideClickComponent } from "../wrap/OutsideClick.component";
+
+
+
+type CT = "label" | "tip" | "error" | "input" | "icon";
+
+export interface InputDateProps 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 InputDateComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+  
+  value,
+  invalid,
+  validations,
+
+  register,
+  unregister,
+  onChange,
+  
+  className = "",
+  ...props
+}: InputDateProps) {
+  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="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", "error")
+          )}
+        >
+          {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>
+        )}
+
+        <OutsideClickComponent onOutsideClick={!isSm ? () => inputHandler.setFocus(false) : undefined}>
+          <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={(e) => {
+                inputHandler.setValue(e.target.value);
+                inputHandler.setValue(false);
+                onChange?.(e.target.value);
+              }}
+              onFocus={(e) => {
+                props.onFocus?.(e);
+                inputHandler.setFocus(true);
+              }}
+              onBlur={(e) => {
+                props.onBlur?.(e);
+              }}
+              autoComplete="off"
+              inputMode={isSm ? "none" : undefined}
+            />
+
+            {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}
+              />
+            )}
+
+            {rightIcon && (
+              <FontAwesomeIcon
+                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")
+                )}
+                icon={rightIcon}
+              />
+            )}
+
+            {!isSm && inputHandler.focus && (
+              <div className="input-date-picker-popover">
+                <InputDatePickerComponent
+                  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={380}
+          footer={
+            <div className="p-4">
+              <ButtonComponent 
+                label="Selesai"
+                variant="outline"
+                onClick={() => inputHandler.setFocus(false)}
+                block
+              />
+            </div>
+          }
+        >
+          <div className="p-4">
+            <InputDatePickerComponent
+              onChange={(e) => {
+                inputHandler.setValue(e);
+                onChange?.(e);
+              }}
+            />
+          </div>
+        </BottomSheetComponent>
+      )}
+    </>
+  );
+}
+
+
+
+export interface InputDatePickerProps {
+  onChange      ?:  (date: string) => void;
+  minDate       ?:  string;
+  maxDate       ?:  string;
+  rightElement  ?:  ReactNode;
+};
+
+
+
+export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
+  onChange,
+  minDate,
+  maxDate,
+  rightElement,
+}) => {
+  const activeYearRef     =  useRef<HTMLDivElement | null>(null);
+  const containerYearRef  =  useRef<HTMLDivElement | null>(null);
+
+  const [currentDate, setCurrentDate]    =  useState(moment());
+  const [selectedDate, setSelectedDate]  =  useState(moment());
+
+  const startDate  =  moment(currentDate).startOf("month").startOf("week");
+  const endDate    =  moment(currentDate).endOf("month").endOf("week");
+
+  const handlePrevMonth = () => setCurrentDate(moment(currentDate).subtract(1, "month"));
+  const handleNextMonth = () => setCurrentDate(moment(currentDate).add(1, "month"));
+
+  const handleDateClick = (date: moment.Moment) => {
+    if ((minDate && date.isBefore(moment(minDate))) || (maxDate && date.isAfter(moment(maxDate)))) { return; }
+
+    setSelectedDate(date);
+    onChange?.(date.format("YYYY-MM-DD"));
+  };
+
+  const renderDays = () => {
+    const days = [];
+    const startDay = moment(startDate);
+
+    for (let i = 0; i < 7; i++) {
+      days.push(
+        <div key={i} className="text-center font-bold">
+          {startDay.add(i, "days").format("dd")}
+        </div>
+      );
+    }
+
+    return days;
+  };
+
+  const renderCells = () => {
+    const rows  =  [];
+    let   days  =  [];
+    const day   =  moment(startDate);
+
+    while (day.isBefore(endDate) || day.isSame(endDate, "day")) {
+      for (let i = 0; i < 7; i++) {
+        const cloneDay = moment(day);
+
+        days.push(
+          <div
+            key={day.toString()}
+            className={`w-8 aspect-square flex items-center justify-center text-center rounded-lg transition-all 
+              ${day.isSame(currentDate, "month") ? "text-foreground" : "text-light-foreground"} 
+              ${day.isSame(selectedDate, "day") ? "bg-primary text-background" : "hover:bg-light-primary"}
+              ${day.isSame(moment(), "day") ? "border !border-primary" : "hover:bg-light-primary"} 
+              ${(minDate && day.isBefore(moment(minDate))) || (maxDate && day.isAfter(moment(maxDate))) ? "opacity-10 cursor-not-allowed" : "cursor-pointer"}`}
+            onClick={() => handleDateClick(cloneDay)}
+          >{day.format("D")}</div>
+        );
+
+        day.add(1, "day");
+      }
+
+      rows.push(<div key={day.toString()} className="grid grid-cols-7 gap-1">{days}</div>);
+
+      days = [];
+    }
+
+    return rows;
+  };
+
+  const years = useMemo(() => {
+    const dumpYears = [];
+
+    for (let i = 1945; i <= moment().year(); i++) {
+      dumpYears.push(i);
+    }
+
+    return dumpYears;
+  }, []);
+
+  useEffect(() => {
+    if (activeYearRef.current && containerYearRef.current) {
+      containerYearRef.current.scrollTo({
+        top: activeYearRef.current.offsetTop - containerYearRef.current.offsetTop,
+      });
+    }
+  }, []);
+
+  return (
+    <div className="w-full flex gap-2 max-h-[260]">
+      <div
+        className="w-1/5 overflow-y-auto input-scroll pr-1"
+        ref={containerYearRef}
+      >
+        <div className="flex flex-col">
+          {years?.map((item) => {
+            const isActive = currentDate?.year() === item;
+
+            return (
+              <>
+                <div
+                  key={item}
+                  ref={isActive ? activeYearRef : null}
+                  className={`py-1 px-2 font-semibold rounded-[6px] cursor-pointer ${isActive && "bg-light-primary"}`}
+                  onClick={() => setCurrentDate(moment().set("year", item))}
+                >
+                  {item}
+                </div>
+              </>
+            );
+          })}
+        </div>
+      </div>
+      <div className="w-4/5">
+        <div className="flex justify-between items-center mb-2">
+          <button
+            onClick={handlePrevMonth}
+            className="w-8 text-sm aspect-square rounded-full cursor-pointer"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </button>
+          <h2 className="font-semibold">{currentDate.format("MMMM")}</h2>
+          <button
+            onClick={handleNextMonth}
+            className="w-8 text-sm aspect-square rounded-full cursor-pointer"
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        </div>
+        <div className="grid grid-cols-7 gap-1 mb-2">{renderDays()}</div>
+        <div>{renderCells()}</div>
+      </div>
+
+      {rightElement && <div>{rightElement}</div>}
+    </div>
+  );
+};