@skalfa/skalfa-app-core 1.0.0

package/dist/table.util.js

@@ -0,0 +1,140 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import LZString from "lz-string";
+import { conversion } from "./conversion.util";
+import { useResource } from "./resource.util";
+export const useTable = (fetchControl, id = "", title = "", urlParam) => {
+    const [state, setState] = useState({});
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    // ======================
+    // ## Table state key
+    // ======================
+    const getTableKey = () => id || (title ? conversion.strSlug(title) : null) || fetchControl.path || fetchControl.store || "";
+    const tableKey = getTableKey();
+    // ======================
+    // ## Parse state url
+    // ======================
+    const getParamsFromUrl = () => {
+        if (typeof urlParam == "object" && urlParam?.compressed) {
+            const t = searchParams.get(tableKey ? `${tableKey}.t` : "t");
+            if (!t)
+                return {};
+            const decoded = LZString.decompressFromEncodedURIComponent(t);
+            return decoded ? JSON.parse(decoded) : {};
+        }
+        const params = {};
+        const prefix = tableKey ? `${tableKey}.` : "";
+        searchParams.forEach((value, key) => {
+            if (!key.startsWith(prefix))
+                return;
+            const shortKey = key.slice(prefix.length);
+            try {
+                params[shortKey] = JSON.parse(value);
+            }
+            catch {
+                params[shortKey] = value;
+            }
+        });
+        return params;
+    };
+    // =======================
+    // ## Update url state
+    // =======================
+    const updateUrlParams = (params) => {
+        const url = new URL(window.location.href);
+        if (typeof urlParam == "object" && urlParam?.compressed) {
+            const encoded = LZString.compressToEncodedURIComponent(JSON.stringify(params));
+            url.searchParams.set(tableKey ? `${tableKey}.t` : "t", encoded);
+        }
+        else {
+            const prefix = tableKey ? `${tableKey}.` : "";
+            for (const key of Array.from(url.searchParams.keys())) {
+                if (key.startsWith(prefix))
+                    url.searchParams.delete(key);
+            }
+            Object.entries(params || {}).forEach(([key, value]) => {
+                const paramKey = `${prefix}${key}`;
+                if (value === undefined || value === null || value === "") {
+                    url.searchParams.delete(paramKey);
+                }
+                else if (typeof value === "object") {
+                    url.searchParams.set(paramKey, JSON.stringify(value));
+                }
+                else {
+                    url.searchParams.set(paramKey, String(value));
+                }
+            });
+        }
+        router.replace(url.pathname + "?" + url.searchParams.toString(), { scroll: false });
+    };
+    useEffect(() => {
+        if (state.params && urlParam)
+            updateUrlParams(state.params);
+    }, [state.params]);
+    // ===========================
+    // ## get url state
+    // ===========================
+    useEffect(() => {
+        if (urlParam) {
+            const params = getParamsFromUrl();
+            setState((prev) => ({ ...prev, params }));
+        }
+    }, []);
+    // ==========================
+    // ## Fetch api
+    // ==========================
+    const { loading, data, reset } = useResource({
+        ...fetchControl,
+        method: "GET",
+        params: {
+            ...state.params,
+            ...fetchControl.params
+        },
+    });
+    // ==========================
+    // ## Setter helper
+    // ==========================
+    const setParam = (key, value) => setState((prev) => ({ ...prev, params: { ...prev.params, [key]: value } }));
+    const setSelected = (selected) => setState((prev) => ({ ...prev, selected }));
+    const setChecks = (checks) => setState((prev) => ({ ...prev, checks }));
+    const setFocus = (focus) => setState((prev) => ({ ...prev, focus }));
+    // ==========================
+    // ## Table Control
+    // ==========================
+    const tableControl = {
+        loading: loading,
+        sortBy: state?.params?.sort,
+        onChangeSortBy: (e) => setParam('sort', e),
+        search: state?.params?.search,
+        onChangeSearch: (e) => setParam('search', e),
+        filter: state?.params?.filter,
+        onChangeFilter: (e) => setParam('filter', e),
+        onRefresh: () => reset(),
+        pagination: {
+            totalRow: data?.total_row,
+            page: state?.params?.page || 1,
+            paginate: state?.params?.paginate || 10,
+            onChange: (_, paginate, page) => {
+                setParam('paginate', paginate);
+                setParam('page', page);
+            },
+        },
+    };
+    return {
+        tableKey,
+        data,
+        reset,
+        loading,
+        params: state.params,
+        setParam,
+        focus: state.focus,
+        setFocus,
+        selected: state.selected,
+        setSelected: setSelected,
+        checks: state.checks,
+        setChecks: setChecks,
+        tableControl,
+    };
+};

package/dist/validation.util.d.ts

@@ -0,0 +1,18 @@
+type Rule = "required" | "string" | "numeric" | "boolean" | "email" | "url" | "date" | "confirmed" | `min:` | `min:${number}` | `max:` | `max:${number}` | `between:` | `between:${number},${number}` | `in:` | `in:${string}` | `not_in:` | `not_in:${string}` | `same:` | `same:${string}` | `different:` | `different:${string}` | `regex:` | `regex:${string}` | `unique:` | `unique:${string},${string}` | `exists:` | `exists:${string},${string}`;
+export type ValidationRules = Rule[] | string;
+export type ValidationHelperPropsType = {
+    value: string | string[] | number | number[] | Date | Date[] | File | File[] | null | object | boolean | (string | number)[];
+    rules?: ValidationRules;
+};
+export type ValidationHelperResults = {
+    valid: boolean;
+    message: string;
+};
+export declare const validation: {
+    normalizeRules: (rules?: Rule[] | string) => Rule[];
+    check: ({ value, rules }: ValidationHelperPropsType) => ValidationHelperResults;
+    hasRules: (rules?: Rule[] | string, ruleName?: string | string[]) => boolean;
+    getRules: (rules: Rule[] | string, ruleName: string) => string | undefined;
+};
+export declare const useValidation: (value?: any, rules?: Rule[] | string, includes?: string, sleep?: boolean) => [string, (message: string) => void];
+export {};

package/dist/validation.util.js

@@ -0,0 +1,150 @@
+"use client";
+import { useEffect, useState } from "react";
+import validator from "validator";
+import { validationLangs } from "./langs";
+// ==========================>
+// ## Validation core
+// ==========================>
+export const validation = {
+    // =========================>
+    // ## Normalize rules (string | array)
+    // =========================>
+    normalizeRules: (rules) => {
+        if (!rules)
+            return [];
+        if (Array.isArray(rules))
+            return rules;
+        return rules.split("|");
+    },
+    // =========================>
+    // ## Check value match of rules
+    // =========================>
+    check: ({ value, rules }) => {
+        const parsedRules = validation.normalizeRules(rules);
+        const strValue = String(value ?? "").trim();
+        for (const rule of parsedRules) {
+            const [name, param] = rule.split(":");
+            switch (name) {
+                // === BASIC ===
+                case "required":
+                    if (!value || (Array.isArray(value) && value.length === 0)) {
+                        return { valid: false, message: validationLangs.required };
+                    }
+                    break;
+                case "numeric":
+                    if (!validator.isNumeric(strValue)) {
+                        return { valid: false, message: validationLangs.numeric || "Harus berupa angka" };
+                    }
+                    break;
+                case "email":
+                    if (!validator.isEmail(strValue)) {
+                        return { valid: false, message: validationLangs.email };
+                    }
+                    break;
+                case "url":
+                    if (!validator.isURL(strValue)) {
+                        return { valid: false, message: validationLangs.url || "Harus berupa URL yang valid" };
+                    }
+                    break;
+                case "date":
+                    if (!validator.isDate(strValue)) {
+                        return { valid: false, message: "Tanggal tidak valid" };
+                    }
+                    break;
+                // === LENGTH ===
+                case "min": {
+                    const min = parseInt(param || "0");
+                    if (!validator.isLength(strValue, { min })) {
+                        return { valid: false, message: validationLangs.min.replace(/@min/g, String(min)) };
+                    }
+                    break;
+                }
+                case "max": {
+                    const max = parseInt(param || "0");
+                    if (!validator.isLength(strValue, { max })) {
+                        return { valid: false, message: validationLangs.max.replace(/@max/g, String(max)) };
+                    }
+                    break;
+                }
+                case "between": {
+                    const [minVal, maxVal] = (param || "0,0").split(",").map(Number);
+                    if (!validator.isLength(strValue, { min: minVal, max: maxVal })) {
+                        return {
+                            valid: false,
+                            message: validationLangs.min_max
+                                .replace(/@min/g, String(minVal))
+                                .replace(/@max/g, String(maxVal)),
+                        };
+                    }
+                    break;
+                }
+                // === IN / NOT IN ===
+                case "in": {
+                    const allowed = (param || "").split(",");
+                    if (!allowed.includes(strValue)) {
+                        return { valid: false, message: `${validationLangs.in} ${allowed.join(", ")}` };
+                    }
+                    break;
+                }
+                case "not_in": {
+                    const notAllowed = (param || "").split(",");
+                    if (notAllowed.includes(strValue)) {
+                        return { valid: false, message: `${validationLangs.not_in} ${notAllowed.join(", ")}` };
+                    }
+                    break;
+                }
+                // === REGEX ===
+                case "regex":
+                    try {
+                        const pattern = new RegExp(param || "");
+                        if (!pattern.test(strValue)) {
+                            return { valid: false, message: validationLangs.regex || "Format tidak sesuai" };
+                        }
+                    }
+                    catch {
+                        return { valid: false, message: "Regex rule tidak valid" };
+                    }
+                    break;
+            }
+        }
+        return { valid: true, message: "" };
+    },
+    // =========================>
+    // ## Check has rules
+    // =========================>
+    hasRules: (rules, ruleName) => {
+        if (!rules || !ruleName)
+            return false;
+        const parsed = validation.normalizeRules(rules).map(r => r.split(":")[0]);
+        if (Array.isArray(ruleName))
+            return ruleName.every(r => parsed.includes(r));
+        return parsed.includes(ruleName);
+    },
+    // =========================>
+    // ## get rule param
+    // =========================>
+    getRules: (rules, ruleName) => {
+        const found = validation.normalizeRules(rules).find(r => r.startsWith(ruleName + ":"));
+        return found ? found.split(":")[1] : undefined;
+    }
+};
+// =========================>
+// ## Check validation Hook
+// =========================>
+export const useValidation = (value = "", rules = "", includes = "", sleep = false) => {
+    const [message, setMessage] = useState("");
+    useEffect(() => {
+        if (rules && !sleep) {
+            const { valid, message } = validation.check({ value, rules });
+            setMessage(valid ? "" : message);
+        }
+        else {
+            setMessage("");
+        }
+    }, [value, rules, sleep]);
+    useEffect(() => {
+        if (includes)
+            setMessage(includes);
+    }, [includes]);
+    return [message, setMessage];
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@skalfa/skalfa-app-core",
+  "version": "1.0.0",
+  "description": "Core utility functions for the Skalfa Next.js frontend framework.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "keywords": [
+    "skalfa",
+    "frontend",
+    "core"
+  ],
+  "author": "",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "axios": "^1.12.0",
+    "clsx": "^2.1.1",
+    "crypto-js": "^4.2.0",
+    "js-cookie": "^3.0.5",
+    "lz-string": "^1.5.0",
+    "moment": "^2.30.1",
+    "tailwind-merge": "^3.0.2",
+    "validator": "^13.15.22"
+  },
+  "peerDependencies": {
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/validator": "^13.15.4",
+    "next": "16.1.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "^5.0.0"
+  }
+}