@skalfa/skalfa-app 1.0.0 → 1.0.2

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

@@ -1,57 +1,57 @@
-"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>
-    </>
-  )
-}
+"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 +1,93 @@
-"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>
-  )
-}
+"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/index.ts

@@ -1,3 +1,3 @@
-export * from './base.components'
-export * from './construct.components'
+export * from './base.components'
+export * from './construct.components'
 export * from './structure.components'

package/contexts/AppProvider.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react'
-import { AuthContextProvider } from './Auth.context'
-import { ToggleContextProvider } from './Toggle.context'
-
-const registerProviders = [
-  AuthContextProvider,
-  ToggleContextProvider,
-]
-
-export function ContextAppProvider({ children }: { children: ReactNode }) {
-  return registerProviders.reduceRight((acc, Provider) => <Provider>{acc}</Provider>, children)
+import { ReactNode } from 'react'
+import { AuthContextProvider } from './Auth.context'
+import { ToggleContextProvider } from './Toggle.context'
+
+const registerProviders = [
+  AuthContextProvider,
+  ToggleContextProvider,
+]
+
+export function ContextAppProvider({ children }: { children: ReactNode }) {
+  return registerProviders.reduceRight((acc, Provider) => <Provider>{acc}</Provider>, children)
 }

package/contexts/Auth.context.tsx

@@ -1,64 +1,64 @@
-"use client";
-
-import { api, auth } from "@utils";
-import { createContext, FC, ReactNode, useContext, useEffect, useState } from "react";
-
-interface AuthContextInterface {
-  registerToken     :  string | null;
-  setRegisterToken  :  (token: string | null) => void;
-  accessToken       :  string | null;
-  setAccessToken    :  (token: string | null) => void;
-  user              :  Record<string, any> | null;
-  setUser           :  (user: Record<string, any> | null) => void;
-}
-
-const AuthContext = createContext<AuthContextInterface | undefined>(undefined);
-
-export const AuthContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
-  const [accessToken, setAccessToken]      =  useState<string | null>(null);
-  const [registerToken, setRegisterToken]  =  useState<string | null>(null);
-  const [user, setUser]                    =  useState<Record<string, any> | null>(null);
-
-  const set_access_token =  (token: string | null) => {
-    setAccessToken(token);
-
-    if(token) {
-      auth.setAccessToken(token)
-    } else {
-      auth.deleteAccessToken()
-    }
-  }
-
-  const fetchUser = async () => {
-    const fetch = await api({path: "me"});
-    
-    setUser(fetch?.data?.data)
-  }
-
-  useEffect(() => {
-    const token = auth.getAccessToken() || null;
-    
-    setAccessToken(token)
-
-    fetchUser()
-  }, []);
-
-  return (
-    <AuthContext.Provider value={{
-      registerToken,
-      setRegisterToken,
-      accessToken,
-      setAccessToken: (token) => set_access_token(token),
-      user,
-      setUser,
-    }}>{children}</AuthContext.Provider>
-  );
-};
-
-export const useAuthContext = (): AuthContextInterface => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuthContext must be used within a AuthContext.Provider");
-  }
-  return context;
-};
+"use client";
+
+import { api, auth } from "@utils";
+import { createContext, FC, ReactNode, useContext, useEffect, useState } from "react";
+
+interface AuthContextInterface {
+  registerToken     :  string | null;
+  setRegisterToken  :  (token: string | null) => void;
+  accessToken       :  string | null;
+  setAccessToken    :  (token: string | null) => void;
+  user              :  Record<string, any> | null;
+  setUser           :  (user: Record<string, any> | null) => void;
+}
+
+const AuthContext = createContext<AuthContextInterface | undefined>(undefined);
+
+export const AuthContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [accessToken, setAccessToken]      =  useState<string | null>(null);
+  const [registerToken, setRegisterToken]  =  useState<string | null>(null);
+  const [user, setUser]                    =  useState<Record<string, any> | null>(null);
+
+  const set_access_token =  (token: string | null) => {
+    setAccessToken(token);
+
+    if(token) {
+      auth.setAccessToken(token)
+    } else {
+      auth.deleteAccessToken()
+    }
+  }
+
+  const fetchUser = async () => {
+    const fetch = await api({path: "me"});
+    
+    setUser(fetch?.data?.data)
+  }
+
+  useEffect(() => {
+    const token = auth.getAccessToken() || null;
+    
+    setAccessToken(token)
+
+    fetchUser()
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{
+      registerToken,
+      setRegisterToken,
+      accessToken,
+      setAccessToken: (token) => set_access_token(token),
+      user,
+      setUser,
+    }}>{children}</AuthContext.Provider>
+  );
+};
+
+export const useAuthContext = (): AuthContextInterface => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuthContext must be used within a AuthContext.Provider");
+  }
+  return context;
+};

package/contexts/Toggle.context.tsx

@@ -1,44 +1,44 @@
-"use client";
-
-import { createContext, useContext, useState, useCallback } from "react";
-
-interface ToggleContextInterface {
-  toggle: Record<string, ToggleValue>;
-  setToggle: (key: string, value?: ToggleValue) => void;
-}
-
-const ToggleContext = createContext<ToggleContextInterface | null>(null);
-
-type ToggleValue = string | number | boolean | object;
-
-const toggleState: Record<string, ToggleValue> = {};
-
-
-export const ToggleContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [, forceRender] = useState(0);
-
-  const setToggle = useCallback((key: string, value?: ToggleValue) => {
-    const next = value !== undefined ? value : !toggleState[key];
-    if (toggleState[key] === next) return;
-
-    toggleState[key] = next;
-    forceRender(v => v + 1);
-  }, []);
-
-  return (
-    <ToggleContext.Provider
-      value={{
-        toggle: toggleState,
-        setToggle
-      }}
-    >
-      {children}
-    </ToggleContext.Provider>
-  );
-};
-
-export const useToggleContext = () => {
-  const ctx = useContext(ToggleContext);
-  if (!ctx) throw new Error("useToggleContext must be used inside provider");
-  return ctx;
-};
+"use client";
+
+import { createContext, useContext, useState, useCallback } from "react";
+
+interface ToggleContextInterface {
+  toggle: Record<string, ToggleValue>;
+  setToggle: (key: string, value?: ToggleValue) => void;
+}
+
+const ToggleContext = createContext<ToggleContextInterface | null>(null);
+
+type ToggleValue = string | number | boolean | object;
+
+const toggleState: Record<string, ToggleValue> = {};
+
+
+export const ToggleContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [, forceRender] = useState(0);
+
+  const setToggle = useCallback((key: string, value?: ToggleValue) => {
+    const next = value !== undefined ? value : !toggleState[key];
+    if (toggleState[key] === next) return;
+
+    toggleState[key] = next;
+    forceRender(v => v + 1);
+  }, []);
+
+  return (
+    <ToggleContext.Provider
+      value={{
+        toggle: toggleState,
+        setToggle
+      }}
+    >
+      {children}
+    </ToggleContext.Provider>
+  );
+};
+
+export const useToggleContext = () => {
+  const ctx = useContext(ToggleContext);
+  if (!ctx) throw new Error("useToggleContext must be used inside provider");
+  return ctx;
+};

package/next.config.ts

@@ -1,6 +1,8 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
+const isTauri = process.env.IS_TAURI === "true";
+
+let nextConfig: NextConfig = {
   reactStrictMode: true,
   images: {
     remotePatterns: [
@@ -14,4 +16,16 @@ const nextConfig: NextConfig = {
   },
 };
 
+if (isTauri) {
+  nextConfig = {
+    ...nextConfig,
+    output: "export",
+    images: {
+      ...nextConfig.images,
+      unoptimized: true,
+    },
+  };
+}
+
 export default nextConfig;
+

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@skalfa/skalfa-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "scripts": {
-    "dev"      :  "concurrently --raw \"bun run barrels\" \"next dev\"",
-    "build"    :  "next build",
-    "start"    :  "next start",
-    "test"     :  "bun tsc --noEmit",
-    "lint"     :  "npx eslint app/* components/* utils/* contexts/* schema/*",
-    "light"    :  "bun utils/commands/light.ts",
-    "barrels"  :  "bun run utils/commands/barrels.ts"
+    "dev": "concurrently --raw \"bun run barrels\" \"next dev\"",
+    "build": "next build",
+    "start": "next start",
+    "test": "bun tsc --noEmit",
+    "lint": "npx eslint app/* components/* utils/* contexts/* schema/*",
+    "light": "bun utils/commands/light.ts",
+    "barrels": "bun run utils/commands/barrels.ts"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -30,14 +30,15 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "barrelsby": "^2.8.1",
     "commander": "^14.0.2",
     "concurrently": "^9.2.1",
     "eslint": "^9.19.0",
     "eslint-config-next": "^15.1.6",
     "eslint-config-prettier": "^10.0.1",
-    "typescript": "^5"
-  }
-}
+    "typescript": "^6.0.3"
+  },
+  "description": "Modern frontend starter template built with Next.js, pre-configured with PWA, Tauri, and modular extensions."
+}