@skalfa/skalfa-component 1.0.6 → 1.0.8

package/src/modal/BottomSheet.component.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+import { MouseEvent, ReactNode, TouchEvent, useEffect, useRef, useState } from "react";
+import dynamic from 'next/dynamic';
+import { cn, pcn } from "@utils";
+
+type CT = "base" | "backdrop" | "footer";
+
+export type BottomSheetProps = {
+  show       :  boolean;
+  children   :  ReactNode;
+  onClose    :  () => void;
+  size      ?:  string | number;
+  maxSize   ?:  string | number;
+  footer    ?:  ReactNode;
+
+   /** Use custom class with: "backdrop::", "footer::". */
+  className ?:  string;
+};
+
+function sizeToPx(value: string | number | undefined): number {
+  if (typeof window === "undefined") return 0;
+  if (value === undefined || value === null) return 0;
+
+  if (typeof value === "number") return value;
+
+  const v = value.trim();
+
+  if (v.endsWith("vh")) {
+    const n = parseFloat(v.replace("vh", ""));
+    return (n / 100) * window.innerHeight;
+  }
+  if (v.endsWith("px")) {
+    return parseFloat(v.replace("px", ""));
+  }
+  return parseFloat(v) || 0;
+}
+
+const BottomSheet = ({
+  show,
+  children,
+  onClose,
+  size = 500,
+  maxSize,
+  footer,
+  className = "",
+}: BottomSheetProps) => {
+  const scrollRef  =  useRef<HTMLDivElement | null>(null);
+  const sheetRef   =  useRef<HTMLDivElement | null>(null);
+
+  const startY    =  useRef(0);
+  const lastY     =  useRef(0);
+  const dragging  =  useRef(false);
+
+  const [offset, setOffset]                        =  useState(0);
+  const [isExpanded, setIsExpanded]                =  useState(false);
+  const [scrollLocked, setScrollLocked]            =  useState(false);
+  const [contentScrollable, setContentScrollable]  =  useState(false);
+
+  const realMaxSize = maxSize ?? size;
+
+  const clamp = (v: number) => {
+    const max = window.innerHeight;
+    return Math.max(-200, Math.min(v, max));
+  };
+
+  const animateTo = (target: number, onFinish?: () => void) => {
+    lastY.current = target;
+    setOffset(clamp(target));
+    onFinish?.();
+  };
+
+  useEffect(() => {
+    if (show) {
+      lastY.current = 0;
+      setOffset(0);
+      setIsExpanded(false);
+    } else {
+      const t = setTimeout(() => {
+        lastY.current = 0;
+        setOffset(0);
+        setIsExpanded(false);
+      }, 250);
+      return () => clearTimeout(t);
+    }
+  }, [show]);
+
+  const onStart = (clientY: number) => {
+    const sc  =  scrollRef.current;
+
+    if (sc && sc.scrollTop < 0) {
+      setScrollLocked(true);
+      return;
+    }
+
+    setScrollLocked(false);
+
+    dragging.current  =  true;
+    startY.current    =  clientY;
+    lastY.current     =  offset;
+  };
+
+  const onMove = (clientY: number) => {
+    if (scrollLocked) return;
+    if (!dragging.current) return;
+
+    const diff = clientY - startY.current;
+    setOffset(clamp(lastY.current + diff));
+  };
+
+  const onEnd = () => {
+    if (scrollLocked) {
+      setScrollLocked(false);
+      return;
+    }
+
+    if (!dragging.current) return;
+    dragging.current = false;
+
+    const current = offset;
+
+    const thresholdDown = 120;
+    const thresholdUp = -40;
+
+    if (!isExpanded && current < thresholdUp && maxSize !== undefined) {
+      setIsExpanded(true);
+      animateTo(0);
+      return;
+    }
+
+    if (isExpanded && current > thresholdDown) {
+      setIsExpanded(false);
+      animateTo(0);
+      return;
+    }
+
+    if (!isExpanded && current > thresholdDown) {
+      animateTo(window.innerHeight, () => {
+        onClose();
+        lastY.current = 0;
+        setOffset(0);
+      });
+      return;
+    }
+
+    animateTo(0);
+  };
+
+  const collapsedPx = sizeToPx(size);
+  const expandedPx = sizeToPx(realMaxSize);
+
+  const topPx = isExpanded ? window.innerHeight - expandedPx : window.innerHeight - collapsedPx;
+
+  const bindTouch = {
+    onTouchStart : (e: TouchEvent) => onStart(e.touches[0].clientY),
+    onTouchMove  : (e: TouchEvent) => onMove(e.touches[0].clientY),
+    onTouchEnd   :  () => onEnd(),
+  };
+
+  const bindMouse = {
+    onMouseDown   :  (e: MouseEvent) => onStart(e.clientY),
+    onMouseMove   :  (e: MouseEvent) => dragging.current && onMove(e.clientY),
+    onMouseUp     :  () => onEnd(),
+    onMouseLeave  :  () => onEnd(),
+  };
+
+  useEffect(() => {
+    const sc = scrollRef.current;
+    if (!sc) return;
+
+    const canScroll = sc.scrollHeight > sc.clientHeight;
+    setContentScrollable(canScroll);
+  }, [show, size, maxSize]);
+
+  useEffect(() => {
+    if (show) {
+      history.pushState({ bottomsheet: true }, "");
+    }
+  }, [show]);
+
+  useEffect(() => {
+    const onPopState = (event: PopStateEvent) => {
+      if (show) {
+        event.preventDefault();
+
+        onClose();
+        history.pushState({}, "");
+      }
+    };
+
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [show, onClose]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "modal-backdrop",
+          !show && "translate-y-full",
+          pcn<CT>(className, "backdrop"),
+        )}
+        onClick={onClose}
+      />
+
+      <div
+        ref={sheetRef}
+        className="bottom-sheet"
+        style={{
+          top: show ? `${topPx}px` : "150vh",
+          transform: `translateY(${offset}px)`,
+          touchAction: "none",
+        }}
+        {...bindTouch}
+        {...bindMouse}
+      >
+        <div className="bottom-sheet-container">
+          <div className="bottom-sheet-handle-wrapper">
+            <div className="bottom-sheet-handle" />
+          </div>
+
+          <div
+            ref={scrollRef}
+            className="overflow-y-auto"
+            style={{
+              height: isExpanded ? realMaxSize : size,
+              touchAction: contentScrollable ? "auto" : "none",
+              overscrollBehaviorY: "contain",
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+
+      {show && footer && (
+        <div className="bottom-sheet-footer">
+          {footer}
+        </div>
+      )}
+    </>
+  );
+}
+
+
+export const BottomSheetComponent = dynamic(() => Promise.resolve(BottomSheet), { ssr: false })

package/src/modal/FloatingPage.component.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import { ReactNode, useEffect } from "react";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { ButtonComponent } from "../button/Button.component";
+import { cn, pcn, shortcut } from "@utils";
+
+
+
+type CT = "base" | "backdrop" | "header" | "footer";
+
+export interface FloatingPageProps {
+  show       :  boolean;
+  onClose    :  () => void;
+  title     ?:  string | ReactNode;
+  children  ?:  any;
+  tip       ?:  string | ReactNode;
+  footer    ?:  string | ReactNode;
+
+  /** Use custom class with: "backdrop::", "header::", "footer::". */
+  className  ?:  string;
+};
+
+
+
+export function FloatingPageComponent({
+  show,
+  onClose,
+  title,
+  children,
+  tip,
+  footer,
+  className = "",
+}: FloatingPageProps) {
+
+  useEffect(() => {
+    if (show) {
+      document.getElementsByTagName("body")[0].style.overflow = "hidden";
+
+      shortcut.register("escape", () => {
+        onClose?.()
+      }, "Kembali")
+
+    } else {
+      document.getElementsByTagName("body")[0].style.removeProperty("overflow");
+    }
+
+    return () => {
+      shortcut.unregister("escape")
+    }
+  }, [show]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "modal-backdrop",
+          !show && "opacity-0 scale-0 -translate-y-full",
+          pcn<CT>(className, "backdrop"),
+        )}
+        onClick={() => onClose()}
+      ></div>
+
+      <div
+        className={cn(
+          "floating-page",
+          !show && "top-[200vh] md:top-0 md:-right-[200vw]",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        <div className={cn("modal-header", pcn<CT>(className, "header"))}>
+          {title && (
+            <div>
+              <h6 className="modal-title">{title}</h6>
+              {tip && <p className="modal-tip">{tip}</p>}
+            </div>
+          )}
+
+          <ButtonComponent
+            icon={faTimes}
+            variant="simple"
+            paint="danger"
+            onClick={() => onClose()}
+          />
+        </div>
+        
+
+        {show && children}
+
+        {footer && (
+          <div
+            className={cn(
+              "modal-footer absolute bottom-0 w-full",
+              pcn<CT>(className, "footer"),
+            )}
+          >
+            {show && footer}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/modal/Modal.component.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { ReactNode, useEffect } from "react";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { cn, pcn, shortcut } from "@utils";
+import { ButtonComponent } from "../button/Button.component";
+
+
+
+type CT = "base" | "backdrop" | "header" | "footer";
+
+export interface ModalProps {
+  show       :  boolean;
+  onClose    :  () => void;
+  title     ?:  string | ReactNode;
+  children  ?:  any;
+  tip       ?:  string | ReactNode;
+  footer    ?:  string | ReactNode;
+
+  /** Use custom class with: "backdrop::", "header::", "footer::". */
+  className  ?:  string;
+};
+
+
+
+export function ModalComponent({
+  show,
+  onClose,
+  title,
+  children,
+  tip,
+  footer,
+  className = "",
+}: ModalProps) {
+  useEffect(() => {
+    if (show) {
+      document.getElementsByTagName("body")[0].style.overflow = "hidden";
+
+      shortcut.register("escape", () => {
+        onClose?.()
+      }, "Kembali")
+    } else {
+      document.getElementsByTagName("body")[0].style.removeProperty("overflow");
+    }
+
+    return () => {
+      shortcut.unregister("escape")
+    }
+  }, [show]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "modal-backdrop",
+          !show && "opacity-0 scale-0 -translate-y-full",
+          pcn<CT>(className, "backdrop"),
+        )}
+        onClick={() => onClose()}
+      ></div>
+
+      <div
+        className={cn(
+          "modal",
+          !show && "-translate-y-full opacity-0 scale-y-0",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        {title && (
+          <div className={cn("modal-header", pcn<CT>(className, "header"))}>
+            <div>
+              <h6 className="modal-title">{title}</h6>
+              {tip && <p className="modal-tip">{tip}</p>}
+            </div>
+
+            <ButtonComponent
+              icon={faTimes}
+              variant="simple"
+              paint="danger"
+              onClick={() => onClose()}
+            />
+          </div>
+        )}
+
+        {show && children}
+
+        {footer && (
+          <div className={cn("modal-footer", pcn<CT>(className, "footer"))}>
+            {show && footer}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/modal/ModalConfirm.component.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { ReactNode, useEffect, useMemo, useState } from "react";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { api, ApiType, cn, pcn, registry, shortcut, useResponsive } from "@utils";
+import { ToastComponent } from "./Toast.component";
+import { ButtonComponent, ButtonProps } from "../button/Button.component";
+import { BottomSheetComponent } from "./BottomSheet.component";
+
+
+
+type CT = "base" | "backdrop" | "header" | "footer";
+
+type SubmitIDB = { idb: { store: string , id: string | number}}
+
+export interface ModalConfirmProps {
+  show            :  boolean;
+  onClose         :  () => void;
+  title          ?:  string | ReactNode;
+  children       ?:  any;
+  icon           ?:  any;
+  footer         ?:  string | ReactNode;
+  submitControl  ?:  ButtonProps & {
+    onSubmit     ?:  ApiType | SubmitIDB | (() => void);
+    onSuccess    ?:  () => void;
+    onError      ?:  () => void;
+  };
+
+  /** Use custom class with: "backdrop::", "header::", "footer::". */
+  className  ?:  string;
+};
+
+
+
+export function ModalConfirmComponent({
+  show,
+  title,
+  children,
+  icon,
+  footer,
+
+  submitControl,
+  onClose,
+
+  className = "",
+}: ModalConfirmProps) {
+  const { isSm }               =  useResponsive();
+  const [toast, setToast]      =  useState<boolean | "success" | "failed">(false);
+  const [loading, setLoading]  =  useState(false);
+
+  useEffect(() => {
+    if (show) {
+      document.getElementsByTagName("body")[0].style.overflow = "hidden";
+
+      shortcut.register("escape", () => {
+        onClose?.()
+      }, "Kembali")
+    } else {
+      document.getElementsByTagName("body")[0].style.removeProperty("overflow");
+    }
+
+    return () => {
+      shortcut.unregister("escape")
+    }
+  }, [show]);
+  
+
+  const renderChildren = useMemo(() => {
+    return (
+      <>
+        {title && (
+          <div
+            className={cn(
+              "flex flex-col gap-2 items-center text-primary",
+              pcn<CT>(className, "header")
+            )}
+          >
+            <div className="mt-6">
+              <FontAwesomeIcon
+                icon={icon || faQuestion}
+                className={`text-xl`}
+              />
+            </div>
+
+            <h6 className="font-semibold text-lg">{title}</h6>
+          </div>
+        )}
+
+        {children}
+
+        {footer && (
+          <div className={cn("modal-footer", pcn<CT>(className, "footer"))}>
+            {footer}
+          </div>
+        )}
+      </>
+    )
+  }, [title, footer, children])
+
+
+  const renderAction = (size: ButtonProps["size"] = 'md') => {
+    return (
+      <div className="flex justify-center pt-6">
+        <ButtonComponent
+          label="Batal"
+          variant="simple"
+          onClick={() => onClose()}
+          className="text-foreground bg-background rounded-none"
+          block
+          size={size}
+        />
+        <ButtonComponent
+          label={"Konfirmasi"}
+          loading={loading}
+          onClick={async () => {
+            if(!submitControl?.onSubmit) return;
+
+            setLoading(true);
+            if (typeof submitControl?.onSubmit == "function") {
+              submitControl?.onSubmit?.();
+            } else {
+              let response: any = null;
+
+              if ("path" in submitControl?.onSubmit || "url" in submitControl?.onSubmit) {
+                response = await api(submitControl?.onSubmit as ApiType)
+              }
+
+              if ("idb" in submitControl?.onSubmit) {
+                const idb = registry.get("idb");
+                if (!idb) {
+                  throw new Error("IndexedDB (IDB) extension is not installed.");
+                }
+                await idb.delete((submitControl?.onSubmit as SubmitIDB).idb.store, (submitControl?.onSubmit as SubmitIDB).idb.id)
+                
+                response = { status: 200 }
+              }
+
+              if (response?.status == 200 || response?.status == 201) {
+                setToast("success");
+                submitControl?.onSuccess?.();
+                setLoading(false);
+              } else {
+                setToast("failed");
+                submitControl?.onError?.();
+                setLoading(false);
+              }
+            }
+          }}
+          className="rounded-none"
+          block
+          size={size}
+          {...submitControl}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {!isSm  ? (
+        <>
+          <div
+            className={cn(
+              "modal-backdrop",
+              !show && "opacity-0 scale-0 -translate-y-full",
+              pcn<CT>(className, "backdrop")
+            )}
+            onClick={() => onClose()}
+          ></div>
+
+          <div
+            className={cn(
+              "modal modal-confirm",
+              !show && "-translate-y-full opacity-0 scale-y-0",
+              pcn<CT>(className, "base")
+            )}
+          >
+            {renderChildren}
+
+            {renderAction()}
+          </div>
+        </>
+      ) : (
+        <>
+          <BottomSheetComponent 
+            show={show}
+            onClose={onClose}
+            size={220}
+            footer={renderAction('lg')}
+          >
+            {renderChildren}
+          </BottomSheetComponent>
+        </>
+      )}
+      
+
+      <ToastComponent
+        show={toast == "failed"}
+        onClose={() => setToast(false)}
+        title="Gagal"
+        className="!border-danger header::text-danger"
+      >
+        <p className="px-3 pb-2 text-sm">
+          Gagal {title || ""}! cek data dan koneksi internet dan coba kembali!
+        </p>
+      </ToastComponent>
+
+      <ToastComponent
+        show={toast == "success"}
+        onClose={() => setToast(false)}
+        title="Berhasil"
+        className="!border-success header::text-success"
+      >
+        <p className="px-3 pb-2 text-sm">Berhasil {title || ""}!</p>
+      </ToastComponent>
+    </>
+  );
+}