@skalfa/skalfa-component 1.0.6 → 1.0.8

package/src/carousel/Carousel.component.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "item" | "prev-button" | "next-button" | "navigation" | "base";
+
+interface CarouselItem {
+  background   :  string;
+  content     ?:  string;
+}
+
+interface CarouselProps {
+  items          :  CarouselItem[];
+  noButton      ?:  boolean;
+  noNavigation  ?:  boolean;
+
+  /** Use custom class with: "item::", "prev-button::", "next-button::", "navigation::". */
+  className  ?:  string;
+}
+
+
+
+export function CarouselComponent({
+  items,
+  className = "",
+  noButton,
+  noNavigation,
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex]  =  useState<number>(0);
+  const touchStartX                      =  useRef<number | null>(null);
+  const touchEndX                        =  useRef<number | null>(null);
+  const intervalRef                      =  useRef<NodeJS.Timeout | null>(null);
+
+  const handlePrev = (): void => setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
+
+  const handleNext = (): void => setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>): void => {
+    touchStartX.current = e.touches[0].clientX;
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent<HTMLDivElement>): void => {
+    touchEndX.current = e.changedTouches[0].clientX;
+    if (touchStartX.current !== null && touchEndX.current !== null) {
+      if (touchStartX.current - touchEndX.current > 50) handleNext();
+      if (touchEndX.current - touchStartX.current > 50) handlePrev();
+    }
+  };
+
+  useEffect(() => {
+    intervalRef.current = setInterval(handleNext, 10000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  return (
+    <div className={cn("carousel", pcn<CT>(className, "base"))}>
+      <div
+        className="carousel-inner"
+        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+      >
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={cn("carousel-item", pcn<CT>(className, "item"))}
+            style={{ backgroundImage: `url(${item.background})` }}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+
+      {!noNavigation && (
+        <div className={cn("carousel-navigation", pcn<CT>(className, "navigation"))}>
+          {items.map((_, index) => (
+            <button
+              key={index}
+              className={`carousel-indicator ${currentIndex === index ? "carousel-indicator-active" : ""}`}
+              onClick={() => setCurrentIndex(index)}
+            ></button>
+          ))}
+        </div>
+      )}
+
+      {!noButton && (
+        <>
+          <button
+            className={cn("carousel-btn carousel-prev-btn", pcn<CT>(className, "prev-button"))}
+            onClick={handlePrev}
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </button>
+          <button
+            className={cn("carousel-btn carousel-next-btn", pcn<CT>(className, "next-button"))}
+            onClick={handleNext}
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/src/chip/Chip.component.tsx

@@ -0,0 +1,39 @@
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn } from "@utils";
+
+export function ChipComponent({ 
+  items, 
+  onClick,
+  onDelete, 
+  className, 
+} : { 
+  items      :  Record<string, any>,
+  onClick    ?:  (item: any, index: number) => void,
+  onDelete   ?:  (item: any, index: number) => void,
+  className  ?:  string,
+}) {
+  return (
+    <div className={cn("chip-group", className)}>
+      {items?.map((item: any, key: number) => {
+        return (
+          <div 
+            key={key} 
+            className="chip" 
+            onClick={() => onClick?.(item, key)}
+          >
+            <span>{item}</span>
+            
+            {onDelete && (
+              <FontAwesomeIcon
+                icon={faTimes}
+                className="chip-delete"
+                onClick={() =>  onDelete?.(item, key)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,70 @@
+export * from "./accordion/Accordion.component";
+export * from "./breadcrumb/Breadcrumb.component";
+export * from "./button/Button.component";
+export * from "./card/AlertCard.component";
+export * from "./card/Card.component";
+export * from "./card/DashboardCard.component";
+export * from "./card/GalleryCard.component";
+export * from "./card/ProductCard.component";
+export * from "./card/ProfileCard.component";
+export * from "./carousel/Carousel.component";
+export * from "./chip/Chip.component";
+export * from "./input/Checkbox.component";
+export * from "./input/Input.component";
+export * from "./input/InputCheckbox.component";
+export * from "./input/InputCurrency.component";
+export * from "./input/InputDate.component";
+export * from "./input/InputDatetime.component";
+export * from "./input/InputDocument.component";
+export * from "./input/InputImage.component";
+export * from "./input/InputNumber.component";
+export * from "./input/InputOtp.component";
+export * from "./input/InputPassword.component";
+export * from "./input/InputRadio.component";
+export * from "./input/InputTime.component";
+export * from "./input/InputValues.component";
+export * from "./input/Radio.component";
+export * from "./input/Select.component";
+export * from "./modal/BottomSheet.component";
+export * from "./modal/FloatingPage.component";
+export * from "./modal/Modal.component";
+export * from "./modal/ModalConfirm.component";
+export * from "./modal/Toast.component";
+export * from "./nav/Bottombar.component";
+export * from "./nav/Footer.component";
+export * from "./nav/Headbar.component";
+export * from "./nav/Navbar.component";
+export * from "./nav/Sidebar.component";
+export * from "./nav/Tabbar.component";
+export * from "./nav/Wizard.component";
+export * from "./supervision/FormSupervision.component";
+export * from "./supervision/TableSupervision.component";
+export * from "./table/ControlBar.component";
+export * from "./table/FilterComponent";
+export * from "./table/Pagination.component";
+export * from "./table/Table.component";
+export * from "./typography/TypographyArticle.component";
+export * from "./typography/TypographyColumn.component";
+export * from "./typography/TypographyContent.component";
+export * from "./typography/TypographyTips.component";
+export * from "./wrap/Draggable.component";
+export * from "./wrap/Image.component";
+export * from "./wrap/OutsideClick.component";
+export * from "./wrap/ScrollContainer.component";
+export * from "./wrap/ShortcutProvider";
+export * from "./wrap/Swipe.component";
+
+import { registry } from "@utils";
+import { TableComponent } from "./table/Table.component";
+import { ButtonComponent } from "./button/Button.component";
+import { SelectComponent } from "./input/Select.component";
+import { ModalComponent } from "./modal/Modal.component";
+import { FilterComponent } from "./table/FilterComponent";
+import { useToggleContext } from "@contexts";
+
+registry.register("TableComponent", TableComponent);
+registry.register("ButtonComponent", ButtonComponent);
+registry.register("SelectComponent", SelectComponent);
+registry.register("ModalComponent", ModalComponent);
+registry.register("FilterComponent", FilterComponent);
+registry.register("useToggleContext", useToggleContext);

package/src/input/Checkbox.component.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { cn, pcn, useInputRandomId } from "@utils";
+
+type CT  =  "label" | "checked" | "error" | "base";
+
+export type CheckboxProps = {
+  name    :  string;
+  label  ?:  string | ReactNode;
+  
+  value     ?:  string;
+  disabled  ?:  boolean;
+  checked   ?:  boolean;
+  invalid   ?:  string;
+  
+  onChange  ?:  () => void;
+
+  /** Use custom class with: "label::", "checked::", "error::". */
+  className  ?:  string;
+};
+
+export function CheckboxComponent({
+  name,
+  label,
+
+  value,
+  disabled = false,
+  checked = false,
+  invalid,
+
+  onChange,
+
+  className = "",
+}: CheckboxProps) {
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const randomId                             =  useInputRandomId()
+  const [invalidMessage, setInvalidMessage]  =  useState("");
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  useEffect(() => {
+    setInvalidMessage(invalid || "");
+  }, [invalid]);
+
+  return (
+    <div className="checkbox-container">
+      <input
+        type="checkbox"
+        className="hidden"
+        id={randomId}
+        name={name}
+        onChange={onChange}
+        defaultChecked={checked}
+        value={value}
+        disabled={disabled}
+      />
+
+      <label
+        htmlFor={randomId}
+        className={cn(
+          "checkbox-wrapper",
+          disabled && "checkbox-wrapper-disabled"
+        )}
+      >
+        <div>
+          <div
+            className={cn(
+              "checkbox-input",
+              checked && "checkbox-input-checked",
+              checked && pcn<CT>(className, "checked"),
+              pcn<CT>(className, "base"),
+            )}
+          >
+            {checked && <FontAwesomeIcon icon={faCheck} className="text-sm" />}
+          </div>
+        </div>
+        <span
+          className={cn(
+            "checkbox-label",
+            checked && "checkbox-label-checked",
+            pcn<CT>(className, "label"),
+            checked && pcn<CT>(className, "label", "checked"),
+            disabled && pcn<CT>(className, "label", "disabled"),
+          )}
+        >
+          {label}
+        </span>
+      </label>
+
+      {invalidMessage && (
+        <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+      )}
+    </div>
+  );
+}

package/src/input/Input.component.tsx

@@ -0,0 +1,334 @@
+"use client"
+
+import { InputHTMLAttributes, ReactNode, Ref, useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
+import { InputValues } from "./InputValues.component";
+
+
+
+type CT = "label" | "tip" | "error" | "base" | "icon" | "suggest" | "suggest-item";
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label      ?:  string;
+  tip        ?:  string | ReactNode;
+  leftIcon   ?:  any;
+  rightIcon  ?:  any;
+
+  value        ?:  any;
+  invalid      ?:  string;
+  suggestions  ?:  string[];
+
+  validations   ?:  ValidationRules;
+  onlyAlphabet  ?:  boolean;
+  uppercase     ?:  boolean;
+  lowercase     ?:  boolean;
+  multiple      ?:  boolean;
+
+  onChange  ?:  (value: any) => any;
+  register    ?:  (name: string, validations?: ValidationRules) => void;
+  unregister  ?:  (name: string) => void;
+
+  ref       ?:  Ref<HTMLInputElement>,
+
+  /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+  className  ?:  string;
+}
+
+
+
+export function InputComponent({
+  label,
+  tip,
+  leftIcon,
+  rightIcon,
+  className = "",
+
+  value,
+  invalid,
+  suggestions,
+
+  validations,
+  onlyAlphabet,
+  uppercase,
+  lowercase,
+  multiple,
+
+  register,
+  unregister,
+  onChange,
+
+  ref,
+  ...props
+}: InputProps) {
+
+
+  const [activeSuggestion, setActiveSuggestion]        =  useState(0);
+  const [showSuggestions, setShowSuggestions]          =  useState(false);
+  const [dataSuggestions, setDataSuggestions]          =  useState<string[] | undefined>([]);
+  const [filteredSuggestions, setFilteredSuggestions]  =  useState<string[] | undefined>([]);
+
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const inputHandler      =  useInputHandler(props.name, value, validations, register, unregister, props.type == "file")
+  const randomId          =  useInputRandomId()
+
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  const [invalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
+
+
+  // =========================>
+  // ## Change value handler
+  // =========================>
+  useEffect(() => {
+    if (inputHandler.value && typeof inputHandler.value === "string") {
+      let newVal = onlyAlphabet ? inputHandler.value.replace(/[^A-Za-z ]+/g, "") : inputHandler.value;
+
+      if (uppercase) newVal = newVal.toUpperCase();
+      if (lowercase) newVal = newVal.toLowerCase();
+
+      if (validations && validation.hasRules(validations, "max")) newVal = newVal.slice(0, parseInt(validation.getRules(validations, "max") || "0"));
+
+      inputHandler.setValue(newVal);
+    }
+  }, [inputHandler.value, onlyAlphabet, uppercase, lowercase, validations]);
+
+
+  // =========================>
+  // ## suggestions handler
+  // =========================>
+  useEffect(() => {
+    setDataSuggestions(suggestions);
+  }, [suggestions]);
+
+  const filterSuggestion = (e: any) => {
+    if (dataSuggestions?.length) {
+      let filteredSuggestion = [];
+
+      if (e.target.value) {
+        filteredSuggestion = dataSuggestions
+          .filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)
+          .slice(0, 10);
+      } else {
+        filteredSuggestion = dataSuggestions.slice(0, 10);
+      }
+
+      setActiveSuggestion(-1);
+      setFilteredSuggestions(filteredSuggestion);
+      setShowSuggestions(true);
+    }
+  };
+
+
+  const onKeyDownSuggestion = (e: any) => {
+    if (dataSuggestions?.length) {
+      if (e.keyCode === 13) {
+        const resultValue = filteredSuggestions?.at(activeSuggestion);
+        setActiveSuggestion(-1);
+        setFilteredSuggestions([]);
+        setShowSuggestions(false);
+        inputHandler.setValue(resultValue ? resultValue : inputHandler.value);
+        if (onChange) {
+          onChange(resultValue ? resultValue : inputHandler.value);
+        }
+        e.preventDefault();
+      } else if (e.keyCode === 38) {
+        if (activeSuggestion === 0) {
+          return;
+        }
+
+        setActiveSuggestion(activeSuggestion - 1);
+      } else if (e.keyCode === 40) {
+        if (activeSuggestion + 1 >= (filteredSuggestions?.length || 0)) {
+          return;
+        }
+
+        setActiveSuggestion(activeSuggestion + 1);
+      }
+    }
+  };
+  
+  return (
+    <>
+      <div className="relative flex flex-col gap-y-0.5">
+        <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>
+        )}
+
+        <div className="relative">
+          <input
+            {...props}
+            ref={ref}
+            id={randomId}
+            placeholder={!multiple || (multiple && !inputHandler.value?.length) ? props.placeholder : ""}
+            className={cn(
+              "input",
+              props.type == "file" && "input-file",
+              leftIcon && "input-with-left-icon",
+              rightIcon && "input-with-right-icon",
+              !!invalidMessage && "input-error",
+              pcn<CT>(className, "base"),
+              !!invalidMessage && pcn<CT>(className, "base", "error"),
+            )}
+            value={!multiple ? inputHandler.value: undefined}
+            onChange={(e) => {
+              if(!multiple) {
+                inputHandler.setValue(e.target.value);
+                inputHandler.setIdle(false);
+                onChange?.(props.type == "file" ? e.target?.files && e.target?.files[0] : e.target.value);
+                dataSuggestions?.length && filterSuggestion(e);
+              }
+            }}
+            onFocus={(e) => {
+              props.onFocus?.(e);
+              inputHandler.setFocus(true);
+              dataSuggestions?.length && filterSuggestion(e);
+            }}
+            onBlur={(e) => {
+              props.onBlur?.(e);
+              setTimeout(() => inputHandler.setFocus(false), 100);
+            }}
+            onKeyDown={(e) => {
+              dataSuggestions?.length && onKeyDownSuggestion(e);
+
+              if (multiple && e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                const currentValue = e.currentTarget.value.trim();
+                if (!currentValue) return;
+                
+                const currentValues = Array.isArray(inputHandler.value) ? [...inputHandler.value] : [];
+                if (!currentValues.includes(currentValue)) {
+                  const newValues = [...currentValues, currentValue];
+                  onChange?.(newValues);
+                  inputHandler.setValue(newValues);
+                  e.currentTarget.value = "";
+                }
+              }
+            }}
+            autoComplete={props.autoComplete || dataSuggestions?.length ? "off" : ""}
+          />
+
+
+          {(multiple) && (
+            <InputValues 
+              value={inputHandler.value || []} 
+              isFocus={inputHandler.focus} 
+              onFocus={() => setTimeout(() => inputHandler.setFocus(true), 110)}
+              onDelete={(_, index) => {
+                const values = Array().concat(inputHandler.value);
+                const newValues = values.filter((_, val) => val != index);
+
+                inputHandler.setValue(newValues);
+                onChange?.(newValues);
+              }}
+              className={`${!inputHandler.focus && (leftIcon ? "ml-[2.5rem]" : "ml-[1rem]")}`} 
+              style={{ maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` }}
+            />
+          )}
+
+          {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>
+
+        {!!dataSuggestions?.length && showSuggestions && !!filteredSuggestions?.length && (
+            <div>
+              <ul
+                className={cn(
+                  "input-suggest-container",
+                  inputHandler.focus && "input-suggest-container-active",
+                  pcn<CT>(className, "suggest"),
+                )}
+              >
+                {filteredSuggestions.map((suggestion, key) => {
+                  return (
+                    <li
+                      className={cn(
+                        "input-suggest",
+                        inputHandler.value == suggestion && "input-suggest-active",
+                        pcn<CT>(className, "suggest-item"),
+                        inputHandler.value == suggestion && pcn<CT>(className, "suggest-item", "active"),
+                      )}
+                      key={suggestion}
+                      onMouseDown={() => {
+                        setTimeout(() => inputHandler.setFocus(true), 110);
+                      }}
+                      onMouseUp={() => {
+                        setActiveSuggestion(key);
+                        setFilteredSuggestions([]);
+                        setShowSuggestions(false);
+                        inputHandler.setValue(filteredSuggestions[key] || inputHandler.value);
+                        onChange?.(filteredSuggestions[key] || inputHandler.value);
+                        setTimeout(() => inputHandler.setFocus(false), 120);
+                      }}
+                    >
+                      {suggestion}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+
+        {invalidMessage && (
+          <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+        )}
+      </div>
+    </>
+  );
+}