@skalfa/skalfa-app 1.0.3 → 1.0.5

package/components/base.components/wrap/Draggable.component.tsx

@@ -1,303 +0,0 @@
-"use client"
-
-import { useRef, useEffect, useState, ReactNode, forwardRef, useImperativeHandle, CSSProperties } from 'react';
-
-
-
-type SpringConfig = {
-  stiffness      ?:  number;
-  damping        ?:  number;
-  mass           ?:  number;
-  stopThreshold  ?:  number;
-};
-
-type Bounds = {
-  left    ?:  number;
-  top     ?:  number;
-  right   ?:  number;
-  bottom  ?:  number;
-};
-
-type DragState = {
-  x   :  number;
-  y   :  number;
-  vx  :  number;
-  vy  :  number;
-};
-
-type DraggableProps = {
-  children        ?:  ReactNode;
-  className       ?:  string;
-  style           ?:  CSSProperties;
-  initial         ?:  { x?: number; y?: number };
-  bounds          ?:  Bounds;
-  spring          ?:  SpringConfig;
-  onDrag          ?:  (state: { x: number; y: number; vx: number; vy: number; dragging: boolean }) => void;
-  useTranslate3d  ?:  boolean;
-};
-
-// -----------------------------------------------------
-// DraggableComponent
-// -----------------------------------------------------
-export const DraggableComponent = forwardRef(function DraggableComponent(
-  {
-    children,
-    className,
-    style,
-    initial = { x: 0, y: 0 },
-    bounds,
-    spring,
-    onDrag,
-    useTranslate3d = true,
-  }: DraggableProps,
-  ref
-) {
-  const elRef         =  useRef<HTMLDivElement | null>(null);
-  const frameRef      =  useRef<number | null>(null);
-  const draggingRef   =  useRef(false);
-  const pointerIdRef  =  useRef<number | null>(null);
-  const stateRef      =  useRef<DragState>({ x: initial.x || 0, y: initial.y || 0, vx: 0, vy: 0 });
-  const targetRef     =  useRef<{ x: number; y: number }>({ x: initial.x || 0, y: initial.y || 0 });
-
-  const historyRef    =  useRef<Array<{ t: number; x: number; y: number }>>([]);
-
-  const cfg: Required<SpringConfig> = {
-    stiffness      :  spring?.stiffness ?? 180,
-    damping        :  spring?.damping ?? 24,
-    mass           :  spring?.mass ?? 1,
-    stopThreshold  :  spring?.stopThreshold ?? 0.02,
-  };
-
-  const [, setTick] = useState(0);
-
-  const now = () => performance.now();
-
-  function applyStyle(x: number, y: number) {
-    const el = elRef.current;
-    if (!el) return;
-    const transform = useTranslate3d ? `translate3d(${x}px, ${y}px, 0)` : `translate(${x}px, ${y}px)`;
-    el.style.transform = transform;
-  }
-
-  function clampToBounds(x: number, y: number) {
-    if (!bounds) return { x, y };
-    return {
-      x: Math.max(bounds.left ?? -Infinity, Math.min(x, bounds.right ?? Infinity)),
-      y: Math.max(bounds.top ?? -Infinity, Math.min(y, bounds.bottom ?? Infinity)),
-    };
-  }
-
-  function estimateVelocity() {
-    const h = historyRef.current;
-    if (h.length < 2) return { vx: 0, vy: 0 };
-    const last = h[h.length - 1];
-    const threshold = 50;
-    let idx = h.length - 2;
-    while (idx > 0 && last.t - h[idx].t < threshold) idx--;
-    const prev = h[idx];
-    const dt = Math.max(1, last.t - prev.t);
-    return {
-      vx: (last.x - prev.x) / (dt / 1000),
-      vy: (last.y - prev.y) / (dt / 1000),
-    };
-  }
-
-  function cancelFrame() {
-    if (frameRef.current != null) {
-      cancelAnimationFrame(frameRef.current);
-      frameRef.current = null;
-    }
-  }
-
-  function startSpringAnimation(initVX = 0, initVY = 0) {
-    cancelFrame();
-
-    const mass  =  cfg.mass;
-    const k     =  cfg.stiffness;
-    const c     =  cfg.damping;
-
-    stateRef.current.vx = initVX;
-    stateRef.current.vy = initVY;
-
-    let lastTime = now();
-
-    function step() {
-      const t = now();
-      const dt = Math.min(32, t - lastTime) / 1000;
-      lastTime = t;
-
-      const sx = stateRef.current.x;
-      const sy = stateRef.current.y;
-      const vx = stateRef.current.vx;
-      const vy = stateRef.current.vy;
-      const tx = targetRef.current.x;
-      const ty = targetRef.current.y;
-
-      const ax = (-c * vx - k * (sx - tx)) / mass;
-      const ay = (-c * vy - k * (sy - ty)) / mass;
-
-      const nvx = vx + ax * dt;
-      const nvy = vy + ay * dt;
-      const nx = sx + nvx * dt;
-      const ny = sy + nvy * dt;
-
-      stateRef.current.x = nx;
-      stateRef.current.y = ny;
-      stateRef.current.vx = nvx;
-      stateRef.current.vy = nvy;
-
-      applyStyle(nx, ny);
-      onDrag?.({ x: nx, y: ny, vx: nvx, vy: nvy, dragging: false });
-
-      const disp = Math.hypot(nx - tx, ny - ty);
-      const vel = Math.hypot(nvx, nvy);
-
-      if (disp < cfg.stopThreshold && vel < cfg.stopThreshold) {
-        stateRef.current.x = tx;
-        stateRef.current.y = ty;
-        stateRef.current.vx = 0;
-        stateRef.current.vy = 0;
-        applyStyle(tx, ty);
-        onDrag?.({ x: tx, y: ty, vx: 0, vy: 0, dragging: false });
-        frameRef.current = null;
-        return;
-      }
-
-      frameRef.current = requestAnimationFrame(step);
-    }
-
-    frameRef.current = requestAnimationFrame(step);
-  }
-
-  // -------------------------------------------------------------------
-  // Expose API ke parent: setTarget & setPositionImmediate
-  // -------------------------------------------------------------------
-  useImperativeHandle(ref, () => ({
-    setTarget(pos: { x: number; y: number }) {
-      targetRef.current.x = pos.x;
-      targetRef.current.y = pos.y;
-      startSpringAnimation(0, 0);
-    },
-
-    setPosition(pos: { x: number; y: number }) {
-      stateRef.current.x = pos.x;
-      stateRef.current.y = pos.y;
-      targetRef.current.x = pos.x;
-      targetRef.current.y = pos.y;
-      applyStyle(pos.x, pos.y);
-    },
-  }));
-
-  useEffect(() => {
-    const el = elRef.current;
-    if (!el) return;
-
-    function onDown(e: PointerEvent) {
-      if (e.pointerType === 'mouse' && e.button !== 0) return;
-
-      (e.target as Element).setPointerCapture?.(e.pointerId);
-      pointerIdRef.current = e.pointerId;
-      draggingRef.current = true;
-      cancelFrame();
-
-      historyRef.current = [{ t: now(), x: stateRef.current.x, y: stateRef.current.y }];
-
-      (el as any).__dragBase = {
-        px: e.clientX,
-        py: e.clientY,
-        startX: stateRef.current.x,
-        startY: stateRef.current.y,
-      };
-
-      onDrag?.({
-        x: stateRef.current.x,
-        y: stateRef.current.y,
-        vx: 0,
-        vy: 0,
-        dragging: true,
-      });
-    }
-
-    function onMove(e: PointerEvent) {
-      if (!draggingRef.current) return;
-      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
-
-      const base = (el as any).__dragBase;
-      if (!base) return;
-
-      let nx = base.startX + (e.clientX - base.px);
-      let ny = base.startY + (e.clientY - base.py);
-
-      ({ x: nx, y: ny } = clampToBounds(nx, ny));
-
-      historyRef.current.push({ t: now(), x: nx, y: ny });
-      if (historyRef.current.length > 8) historyRef.current.shift();
-
-      stateRef.current.x = nx;
-      stateRef.current.y = ny;
-      stateRef.current.vx = 0;
-      stateRef.current.vy = 0;
-
-      applyStyle(nx, ny);
-      onDrag?.({ x: nx, y: ny, vx: 0, vy: 0, dragging: true });
-
-      setTick(t => t + 1);
-    }
-
-    function onUp(e: PointerEvent) {
-      if (!draggingRef.current) return;
-      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
-
-      (e.target as Element).releasePointerCapture?.(e.pointerId);
-      draggingRef.current = false;
-      pointerIdRef.current = null;
-
-      const { vx, vy } = estimateVelocity();
-
-      let tx = stateRef.current.x;
-      let ty = stateRef.current.y;
-      ({ x: tx, y: ty } = clampToBounds(tx, ty));
-
-      targetRef.current.x = tx;
-      targetRef.current.y = ty;
-
-      startSpringAnimation(vx, vy);
-    }
-
-    el.addEventListener('pointerdown', onDown as EventListener);
-    window.addEventListener('pointermove', onMove as EventListener);
-    window.addEventListener('pointerup', onUp as EventListener);
-    window.addEventListener('pointercancel', onUp as EventListener);
-
-    return () => {
-      el.removeEventListener('pointerdown', onDown as EventListener);
-      window.removeEventListener('pointermove', onMove as EventListener);
-      window.removeEventListener('pointerup', onUp as EventListener);
-      window.removeEventListener('pointercancel', onUp as EventListener);
-      cancelFrame();
-    };
-  }, [bounds]);
-
-  // initial pos
-  useEffect(() => {
-    stateRef.current.x = initial.x || 0;
-    stateRef.current.y = initial.y || 0;
-    applyStyle(initial.x || 0, initial.y || 0);
-  }, []);
-
-  return (
-    <div
-      ref={elRef}
-      className={className}
-      style={{
-        touchAction: 'none',
-        cursor: 'grab',
-        display: 'inline-block',
-        ...style,
-      }}
-      onMouseDown={(e) => e.preventDefault()}
-    >
-      {children}
-    </div>
-  );
-});

package/components/base.components/wrap/IDBProvider.tsx

@@ -1,12 +0,0 @@
-"use client"
-
-import { useEffect } from "react"
-import { idb } from "@skalfa/skalfa-idb"
-import { AppSchema } from "@schema"
-
-
-export function IDBProvider({ children }: { children: React.ReactNode }) {
-  useEffect(() => idb.setDefaultSchema(AppSchema), [])
-
-  return <>{children}</>
-}

package/components/base.components/wrap/Image.component.tsx

@@ -1,10 +0,0 @@
-/* eslint-disable jsx-a11y/alt-text */
-
-
-import Image, { ImageProps } from "next/image";
-
-export function ImageComponent(props: ImageProps) {
-  const isProd = process.env.NODE_ENV === "production";
-
-  return <Image {...props} unoptimized={!isProd} />;
-}

package/components/base.components/wrap/OutsideClick.component.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import { FC, ReactNode, useEffect, useRef } from "react";
-
-
-
-export interface OutsideClickHandlerProps {
-  children: ReactNode;
-  onOutsideClick?: () => void;
-}
-
-
-
-export const OutsideClickComponent: FC<OutsideClickHandlerProps> = ({
-  children,
-  onOutsideClick,
-}) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const handlerRef = useRef(onOutsideClick);
-
-  useEffect(() => {
-    handlerRef.current = onOutsideClick;
-  }, [onOutsideClick]);
-
-  useEffect(() => {
-    const handlePointerDown = (event: PointerEvent) => {
-      const el = ref.current;
-      if (!el || !(event.target instanceof Node)) return;
-
-      const isOutside = !el.contains(event.target);
-
-      if (isOutside) {
-        queueMicrotask(() => {
-          if (ref.current && !ref.current.contains(event.target as Node)) {
-            handlerRef.current?.();
-          }
-        });
-      }
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown, true);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown, true);
-    };
-  }, []);
-
-  return <div ref={ref}>{children}</div>;
-};

package/components/base.components/wrap/ScrollContainer.component.tsx

@@ -1,104 +0,0 @@
-"use client"
-
-import { cn, pcn } from "@utils";
-import { useRef, useState, useEffect, ReactNode } from "react";
-
-
-
-type CT = "base" | "container" | "floating-scroll";
-
-export interface ScrollContainerProps {
-  children         :  ReactNode;
-  footer          ?:  ReactNode;
-  scrollFloating  ?:  boolean;
-  onScroll        ?:  (e: any) => void;
-
-  /** Use custom class with: "container::", "floating-scroll::"". */
-  className?: string;
-}
-
-
-
-export function ScrollContainerComponent({
-  children,
-  footer,
-  className = "",
-  scrollFloating = false,
-  onScroll,
-}: ScrollContainerProps) {
-  const containerRef                         =  useRef<HTMLDivElement | null>(null);
-  const floatingScrollbarRef                 =  useRef<HTMLDivElement | null>(null);
-  const floatingScrollbarContainerRef        =  useRef<HTMLDivElement | null>(null);
-  const [containerWidth, setContainerWidth]  =  useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!containerRef.current) return;
-      onScroll?.(containerRef.current);
-    };
-
-    const container = containerRef.current;
-    if (container) {
-      handleScroll();
-      container.addEventListener("scroll", handleScroll);
-    }
-
-    return () => container?.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  useEffect(() => {
-    const scrollContainer    =  containerRef.current;
-    const floatingScrollbar  =  floatingScrollbarRef.current;
-
-    if (!scrollContainer || !floatingScrollbar) return;
-
-    const syncScroll         =  () => floatingScrollbar.scrollLeft  =  scrollContainer.scrollLeft;
-    const syncScrollReverse  =  () => scrollContainer.scrollLeft    =  floatingScrollbar.scrollLeft;
-
-    scrollContainer.addEventListener("scroll", syncScroll);
-    floatingScrollbar.addEventListener("scroll", syncScrollReverse);
-
-    return () => {
-      scrollContainer.removeEventListener("scroll", syncScroll);
-      floatingScrollbar.removeEventListener("scroll", syncScrollReverse);
-    };
-  }, []);
-
-  const handleResize = () => {
-    if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
-  };
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  useEffect(() => {
-    if (floatingScrollbarContainerRef.current) floatingScrollbarContainerRef.current.style.width = `${containerWidth}px`;
-  }, [containerWidth]);
-
-  return (
-    <div className={cn("relative", pcn<CT>(className, "base"))}>
-      <div
-        ref={containerRef}
-        className={cn(
-          "w-full overflow-x-auto scroll",
-          scrollFloating && "scroll-none",
-          pcn<CT>(className, "container"),
-        )}
-      >
-        {children}
-      </div>
-
-      <div className="fixed bottom-0 py-1 bg-background w-full" ref={floatingScrollbarContainerRef}>
-        <div ref={floatingScrollbarRef} className={cn(scrollFloating ? "scroll overflow-x-auto overflow-y-hidden" : "")}>
-          <div className="h-0.5 opacity-0">{children}</div>
-        </div>
-        
-        {footer}
-      </div>
-    </div>
-  );
-}

package/components/base.components/wrap/ShortcutProvider.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import { useEffect } from "react"
-import { shortcut } from "@utils"
-import { useToggleContext } from "@contexts"
-import { ModalComponent } from "@components";
-
-export function ShortcutProvider() {
-  const { setToggle, toggle } = useToggleContext();
-  const shortcuts = shortcut.list()
-
-  useEffect(() => {
-    shortcut.init()
-  }, [])
-
-  useEffect(() => {
-    shortcut.register("ctrl+/", () => {
-      setToggle("MODAL_SHORTCUT_HELP")
-    }, "List Shortcut")
-  }, [])
-
-  function formatShortcutKey(key: string) {
-    return key
-      .split("+")
-      .map(k => {
-        if (k === "ctrl") return "Ctrl"
-        if (k === "shift") return "Shift"
-        if (k === "alt") return "Alt"
-        if (k === "arrowup") return "↑"
-        if (k === "arrowdown") return "↓"
-        if (k === " ") return "SPACE"
-        return k.toUpperCase()
-      })
-      .join(" + ")
-  }
-
-  return (
-    <>
-      <ModalComponent 
-        show={!!toggle["MODAL_SHORTCUT_HELP"]}
-        onClose={() => setToggle("MODAL_SHORTCUT_HELP")}
-        title="Shortcut"
-      >
-        <div className="p-4 grid grid-cols-2 gap-4">
-          {shortcuts.map(({ key, description }) => (
-            <>
-              <kbd className="px-2 py-1 border rounded bg-gray-100 w-max">
-                {formatShortcutKey(key)}
-              </kbd>
-              <span>: {description}</span>
-            </>
-          ))}
-        </div>
-      </ModalComponent>
-    </>
-  )
-}

package/components/base.components/wrap/Swipe.component.tsx

@@ -1,93 +0,0 @@
-"use client"
-
-import { ReactNode, useRef, useState } from 'react'
-import { cn } from '@/utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-
-export type SwipeActionType = {
-  label      ?:  string,
-  icon       ?:  any,
-  onAction   ?:  () => void;
-  className  ?:  string;
-}
-
-export type SwipeProps = {
-  leftActionControl   ?:  SwipeActionType;
-  rightActionControl  ?:  SwipeActionType;
-  children            ?:  ReactNode;
-  className           ?:  string;
-};
-
-export function SwipeComponent({
-  leftActionControl,
-  rightActionControl,
-  children,
-  className,
-} : SwipeProps) {
-
-  const startX = useRef(0);
-  const [offset, setOffset] = useState(0);
-  const [dragging, setDragging] = useState(false);
-
-  function onTouchStart(e: React.TouchEvent) {
-    setDragging(true);
-    startX.current = e.touches[0].clientX;
-  }
-
-  function onTouchMove(e: React.TouchEvent) {
-    if (!dragging) return;
-
-    const currentX = e.touches[0].clientX;
-    const delta = currentX - startX.current;
-
-    let allowed = delta;
-
-    // Jika tidak ada aksi kiri → larang geser ke kanan
-    if (!leftActionControl && delta > 0) allowed = 0;
-
-    // Jika tidak ada aksi kanan → larang geser ke kiri
-    if (!rightActionControl && delta < 0) allowed = 0;
-
-    // Batasi maksimal ±100px
-    allowed = Math.max(Math.min(allowed, 100), -100);
-
-    setOffset(allowed);
-    e.preventDefault();
-  }
-
-  function onTouchEnd() {
-    if (!dragging) return;
-    setDragging(false);
-
-    if (offset > 60 && leftActionControl) leftActionControl.onAction?.();
-    if (offset < -60 && rightActionControl) rightActionControl.onAction?.();
-
-    setOffset(0);
-  }
-  
-  return (
-    <div className="relative w-full overflow-hidden select-none">
-      <div className={cn("absolute h-full left-0 w-1/2 flex items-center px-5 gap-2 bg-light-warning text-warning", leftActionControl?.className)}>
-        <FontAwesomeIcon icon={leftActionControl?.icon} /> {leftActionControl?.label}
-      </div>
-
-      <div className={cn("absolute h-full right-0 w-1/2 flex justify-end items-center px-5 gap-2 bg-light-danger text-danger", rightActionControl?.className)}>
-        <FontAwesomeIcon icon={rightActionControl?.icon} /> {rightActionControl?.label}
-      </div>
-
-      <div
-        className={cn("relative z-10 bg-background", className)}
-        style={{
-          transform: `translateX(${offset}px)`,
-          transition: dragging ? "none" : "transform 0.2s ease",
-        }}
-        onTouchStart={onTouchStart}
-        onTouchMove={onTouchMove}
-        onTouchEnd={onTouchEnd}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}

package/components/construct.components/example.tsx

@@ -1 +0,0 @@
-export const construct = () => ("");

package/components/construct.components/index.ts

@@ -1,5 +0,0 @@
-/**
- * @file Automatically generated by barrelsby.
- */
-
-export * from "./example";

package/components/structure.components/example.tsx

@@ -1 +0,0 @@
-export const structure = () => ("");

package/components/structure.components/index.ts

@@ -1,5 +0,0 @@
-/**
- * @file Automatically generated by barrelsby.
- */
-
-export * from "./example";

package/schema/idb/app.schema.ts

@@ -1,9 +0,0 @@
-import { DBSchema } from "@skalfa/skalfa-idb"
-
-const name  =  String(process.env.NEXT_PUBLIC_APP_NAME || "").toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "") + ".idb-app";
-
-export const AppSchema: DBSchema = {
-  name: name,
-  version: 1,
-  stores: {}
-}

package/schema/index.ts

@@ -1,5 +0,0 @@
-/**
- * @file Automatically generated by barrelsby.
- */
-
-export * from "./idb/app.schema";