@skalfa/skalfa-app 1.0.2 → 1.0.5

package/components/base.components/modal/BottomSheet.component.tsx

@@ -1,246 +0,0 @@
-"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="fixed left-0 right-0 w-full h-full z-50 transition-[top] duration-75"
-        style={{
-          top: show ? `${topPx}px` : "150vh",
-          transform: `translateY(${offset}px)`,
-          touchAction: "none",
-        }}
-        {...bindTouch}
-        {...bindMouse}
-      >
-        <div className="w-full h-full bg-white rounded-t shadow-xl overflow-hidden">
-          <div className="py-2 flex justify-center cursor-grab">
-            <div className="w-14 h-[2.5px] bg-slate-200 rounded-full" />
-          </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="fixed bottom-0 left-0 right-0 z-50">
-          {footer}
-        </div>
-      )}
-    </>
-  );
-}
-
-
-export const BottomSheetComponent = dynamic(() => Promise.resolve(BottomSheet), { ssr: false })

package/components/base.components/modal/FloatingPage.component.tsx

@@ -1,104 +0,0 @@
-"use client"
-
-import { ReactNode, useEffect } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { IconButtonComponent } from "@components";
-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",
-          "w-[100vw] md:w-[50vw] max-w-[700px]",
-          !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="text-lg font-semibold text-foreground">{title}</h6>
-              <p className="text-sm text-light-foreground leading-4 mt-1">{tip}</p>
-            </div>
-          )}
-
-          <IconButtonComponent
-            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/components/base.components/modal/Modal.component.tsx

@@ -1,96 +0,0 @@
-"use client"
-
-import { ReactNode, useEffect } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { cn, pcn, shortcut } from "@utils";
-import { IconButtonComponent } from "@components";
-
-
-
-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",
-          "w-[calc(100vw-2rem)] md:w-[50vw] max-w-[500px]",
-          !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="text-lg font-semibold text-foreground">{title}</h6>
-              <p className="text-sm text-light-foreground leading-4 mt-1">{tip}</p>
-            </div>
-
-            <IconButtonComponent
-              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/components/base.components/modal/ModalConfirm.component.tsx

@@ -1,218 +0,0 @@
-"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, ButtonComponent, ButtonProps, BottomSheetComponent } from "@components";
-
-
-
-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 rounded-[4px] border-t-4 !border-primary",
-              "w-[calc(100vw-2rem)] md:w-[50vw] max-w-[300px]",
-              !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>
-    </>
-  );
-}