@skalfa/skalfa-app-core 1.0.0

package/dist/form.util.js

@@ -0,0 +1,294 @@
+"use client";
+import { useReducer, useEffect, useState } from "react";
+import { registry } from "./registry";
+import { validation } from "./validation.util";
+import { api } from "./api.util";
+const initialState = {
+    formRegisters: [],
+    formValues: [],
+    formErrors: [],
+    loading: false,
+    showConfirm: false,
+};
+// ==============================>
+// ## Form state handler
+// ==============================>
+const formReducer = (state, action) => {
+    switch (action.type) {
+        // ==============================>
+        // ## Register handler
+        // ==============================>
+        case "SET_REGISTER": return {
+            ...state,
+            formRegisters: [
+                ...state.formRegisters.filter((reg) => reg.name !== action.payload.name),
+                action.payload,
+            ],
+        };
+        // ==============================>
+        // ## Unregister single field — removes register, value, and error
+        // ==============================>
+        case "UNREGISTER": return {
+            ...state,
+            formRegisters: state.formRegisters.filter((reg) => reg.name !== action.payload),
+            formValues: state.formValues.filter((val) => val.name !== action.payload),
+            formErrors: state.formErrors.filter((err) => err.name !== action.payload),
+        };
+        // ==============================>
+        // ## Unregister all fields matching prefix — for cluster group removal
+        // ==============================>
+        case "UNREGISTER_PREFIX": return {
+            ...state,
+            formRegisters: state.formRegisters.filter((reg) => !reg.name.startsWith(action.payload)),
+            formValues: state.formValues.filter((val) => !val.name.startsWith(action.payload)),
+            formErrors: state.formErrors.filter((err) => !err.name.startsWith(action.payload)),
+        };
+        // ==============================>
+        // ## Multiple values handler
+        // ==============================>
+        case "SET_VALUES": return {
+            ...state,
+            formValues: action.payload,
+        };
+        // ==============================>
+        // ## Single value handler
+        // ==============================>
+        case "SET_VALUE": return {
+            ...state,
+            formValues: [
+                ...state.formValues.filter((val) => val.name !== action.payload.name),
+                { name: action.payload.name, value: action.payload.value },
+            ],
+        };
+        // ==============================>
+        // ## Errors handler
+        // ==============================>
+        case "SET_ERRORS": return { ...state, formErrors: action.payload };
+        // ==============================>
+        // ## Loading handler
+        // ==============================>
+        case "SET_LOADING": return { ...state, loading: action.payload };
+        // ==============================>
+        // ## Confirm handler
+        // ==============================>
+        case "SET_CONFIRM": return { ...state, showConfirm: action.payload };
+        // ==============================>
+        // ## Reset handler
+        // ==============================>
+        case "RESET": return { ...initialState };
+        // ==============================>
+        // ## Return state
+        // ==============================>
+        default: return state;
+    }
+};
+// ==============================>
+// ## Hook form
+// ==============================>
+export const useForm = (submitControl) => {
+    const isApiSubmit = !!submitControl?.path || !!submitControl?.url;
+    const isIdbSubmit = !!submitControl?.idb;
+    const [state, dispatch] = useReducer(formReducer, initialState);
+    const { payload, confirmation, onSuccess, onFailed } = submitControl;
+    // ==============================>
+    // ## Reset when first load
+    // ==============================>
+    useEffect(() => dispatch({ type: "RESET" }), [submitControl?.path, submitControl?.url, submitControl?.idb]);
+    // ==============================>
+    // ## Set value from changes
+    // ==============================>
+    const onChange = (name, value) => dispatch({ type: "SET_VALUE", payload: { name, value: value ?? "" } });
+    // ==============================>
+    // ## FormControl handler
+    // ==============================>
+    const formControl = (name) => ({
+        register: (_, regValidations) => dispatch({
+            type: "SET_REGISTER",
+            payload: { name, validations: regValidations },
+        }),
+        unregister: () => dispatch({ type: "UNREGISTER", payload: name }),
+        onChange: (e) => onChange(name, e),
+        value: state.formValues.find((val) => val.name === name)?.value || undefined,
+        invalid: state.formErrors.find((err) => err.name === name)?.error || undefined,
+    });
+    const getObjectValues = () => {
+        const registeredNames = new Set(state.formRegisters.map(r => r.name));
+        return state.formValues.reduce((acc, val) => {
+            if (registeredNames.has(val.name))
+                acc[val.name] = val.value;
+            return acc;
+        }, {});
+    };
+    const submitIdb = async () => {
+        const values = payload ? await payload(getObjectValues()) : getObjectValues();
+        const idb = registry.get("idb");
+        if (!idb) {
+            throw new Error("IndexedDB (IDB) extension is not installed or registered.");
+        }
+        const client = submitControl?.idb?.schema ? idb.useSchema(submitControl?.idb?.schema) : idb;
+        await client.put(submitControl?.idb?.store || "", values);
+        return { status: 200, data: values };
+    };
+    const submitApi = async () => {
+        const formData = new FormData();
+        const values = payload ? await payload(getObjectValues()) : getObjectValues();
+        Object.entries(values).forEach(([k, v]) => {
+            formData.append(k, v ?? "");
+        });
+        return api({
+            url: submitControl.url,
+            path: submitControl.path,
+            method: submitControl.method || "POST",
+            bearer: submitControl.bearer,
+            headers: submitControl.headers,
+            payload: formData,
+        });
+    };
+    // ==============================>
+    // ## Fetch to api
+    // ==============================>
+    const fetch = async () => {
+        dispatch({ type: "SET_LOADING", payload: true });
+        let execute;
+        if (isApiSubmit) {
+            execute = await submitApi();
+        }
+        else if (isIdbSubmit) {
+            execute = await submitIdb();
+        }
+        else {
+            throw new Error("Invalid submitControl");
+        }
+        if (execute?.status === 200 || execute?.status === 201) {
+            // ==============================>
+            // ## When success
+            // ==============================>
+            dispatch({ type: "SET_LOADING", payload: false });
+            onSuccess?.(execute.data);
+            dispatch({ type: "RESET" });
+        }
+        else if (isApiSubmit && execute?.status === 422) {
+            // ==============================>
+            // ## When error invalid
+            // ==============================>
+            const errors = Object.keys(execute.data.errors).map((key) => ({
+                name: key,
+                error: execute.data.errors[key][0],
+            }));
+            onFailed?.(execute?.status || 500);
+            dispatch({ type: "SET_ERRORS", payload: errors });
+            dispatch({ type: "SET_LOADING", payload: false });
+            dispatch({ type: "SET_CONFIRM", payload: false });
+        }
+        else {
+            // ==============================>
+            // ## When error server
+            // ==============================>
+            onFailed?.(execute?.status || 500);
+            dispatch({ type: "SET_CONFIRM", payload: false });
+            dispatch({ type: "SET_LOADING", payload: false });
+        }
+    };
+    // ==============================>
+    // ## Submit handler
+    // ==============================>
+    const submit = async (e) => {
+        e?.preventDefault();
+        dispatch({ type: "SET_ERRORS", payload: [] });
+        const newErrors = [];
+        // ==============================>
+        // ## Check register validation
+        // ==============================>
+        state.formRegisters.forEach((form) => {
+            const { valid, message } = validation.check({
+                value: state.formValues.find((val) => val.name === form.name)?.value,
+                rules: form.validations,
+            });
+            if (!valid) {
+                newErrors.push({ name: form.name, error: message });
+            }
+        });
+        if (newErrors.length) {
+            dispatch({ type: "SET_ERRORS", payload: newErrors });
+            return;
+        }
+        // ==============================>
+        // ## Execute handler
+        // ==============================>
+        if (confirmation) {
+            dispatch({ type: "SET_CONFIRM", payload: true });
+        }
+        else {
+            fetch();
+        }
+    };
+    // ==============================>
+    // ## Confirmation handler
+    // ==============================>
+    const onConfirm = () => fetch();
+    // ==============================>
+    // ## Set default value
+    // ==============================>
+    const setDefaultValues = (values) => {
+        const newValues = values ? Object.keys(values).map((keyName) => ({
+            name: keyName,
+            value: values[keyName],
+        })) : [];
+        dispatch({ type: "SET_VALUES", payload: newValues });
+    };
+    // ==============================>
+    // ## Return hook handler
+    // ==============================>
+    return {
+        submit,
+        formControl,
+        setDefaultValues,
+        values: state.formValues,
+        setValues: (values) => dispatch({ type: "SET_VALUES", payload: values || [] }),
+        errors: state.formErrors,
+        setErrors: (errors) => dispatch({ type: "SET_ERRORS", payload: errors }),
+        setRegister: (inputs) => dispatch({ type: "SET_REGISTER", payload: inputs }),
+        unregister: (name) => dispatch({ type: "UNREGISTER", payload: name }),
+        unregisterPrefix: (prefix) => dispatch({ type: "UNREGISTER_PREFIX", payload: prefix }),
+        loading: state.loading,
+        confirm: {
+            onConfirm,
+            show: state.showConfirm,
+            onClose: () => dispatch({ type: "SET_CONFIRM", payload: false }),
+        },
+    };
+};
+// ==============================>
+// ## Generate random id
+// ==============================>
+export const useInputRandomId = () => {
+    const [randomId, setRandomId] = useState("");
+    useEffect(() => {
+        setRandomId(Math.random().toString(36).substring(7));
+    }, []);
+    return randomId;
+};
+// ==============================>
+// ## Input handle
+// ==============================>
+export const useInputHandler = (name, value, validations, register, unregister, isFile) => {
+    const [inputValue, setInputValue] = useState("");
+    const [focus, setFocus] = useState(false);
+    const [idle, setIdle] = useState(true);
+    useEffect(() => {
+        name && register?.(name || "", validations);
+        return () => { name && unregister?.(name); };
+    }, [name, validations]);
+    useEffect(() => {
+        setInputValue(value && (!isFile || value instanceof File) ? value : "");
+        value && setIdle(false);
+    }, [value]);
+    return {
+        value: inputValue,
+        setValue: setInputValue,
+        idle,
+        setIdle,
+        focus,
+        setFocus
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export * from "./api.util";
+export * from "./auth.util";
+export * from "./cavity.util";
+export * from "./encryption.util";
+export * from "./cn.util";
+export * from "./form.util";
+export * from "./resource.util";
+export * from "./table.util";
+export * from "./validation.util";
+export * from "./conversion.util";
+export * from "./shortcut.util";
+export * from "./commands/logger";
+export * from "./registry";
+export declare const useResponsive: () => {
+    isXs: boolean;
+    isSm: boolean;
+    isMd: boolean;
+    isLg: boolean;
+    isXl: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    width: number;
+    height: number;
+};
+export declare function useKeyboardOpen(): boolean;
+export declare const useLazySearch: (keyword: string) => string[];

package/dist/index.js

@@ -0,0 +1,79 @@
+"use client";
+import { useEffect, useState } from "react";
+// ==============================>
+// ## Export all from core utils
+// ==============================>
+export * from "./api.util";
+export * from "./auth.util";
+export * from "./cavity.util";
+export * from "./encryption.util";
+export * from "./cn.util";
+export * from "./form.util";
+export * from "./resource.util";
+export * from "./table.util";
+export * from "./validation.util";
+export * from "./conversion.util";
+export * from "./shortcut.util";
+export * from "./commands/logger";
+export * from "./registry";
+// ==============================>
+// ## Detect device size
+// ==============================>
+export const useResponsive = () => {
+    const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleResize = () => {
+            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return {
+        isXs: windowSize.width < 640,
+        isSm: windowSize.width < 768,
+        isMd: windowSize.width < 1024,
+        isLg: windowSize.width < 1280,
+        isXl: windowSize.width >= 1280,
+        isMobile: windowSize.width < 768,
+        isTablet: windowSize.width >= 768 && windowSize.width < 1024,
+        isDesktop: windowSize.width >= 1024,
+        width: windowSize.width,
+        height: windowSize.height,
+    };
+};
+// ==============================>
+// ## Detect keyboard open
+// ==============================>
+export function useKeyboardOpen() {
+    const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.visualViewport) {
+                const viewportHeight = window.visualViewport.height;
+                const windowHeight = window.innerHeight;
+                setIsKeyboardOpen(viewportHeight < windowHeight);
+            }
+        };
+        window.visualViewport?.addEventListener("resize", handleResize);
+        return () => window.visualViewport?.removeEventListener("resize", handleResize);
+    }, []);
+    return isKeyboardOpen;
+}
+// ==============================>
+// ## Search with typing reference
+// ==============================>
+export const useLazySearch = (keyword) => {
+    const [keywordSearch, setKeywordSearch] = useState("");
+    const [doSearch, setDoSearch] = useState(false);
+    useEffect(() => {
+        if (keyword != undefined) {
+            const delaySearch = setTimeout(() => setDoSearch(!doSearch), 500);
+            return () => clearTimeout(delaySearch);
+        }
+    }, [keyword]);
+    useEffect(() => setKeywordSearch(keyword), [doSearch]);
+    return [keywordSearch];
+};

package/dist/langs/index.d.ts

@@ -0,0 +1 @@
+export * from "./validation.langs";

package/dist/langs/index.js

@@ -0,0 +1 @@
+export * from "./validation.langs";

package/dist/langs/validation.langs.d.ts

@@ -0,0 +1,17 @@
+export declare const validationLangs: {
+    required: string;
+    min: string;
+    max: string;
+    min_max: string;
+    phone: string;
+    url: string;
+    uppercase: string;
+    lowercase: string;
+    numeric: string;
+    email: string;
+    in: string;
+    not_in: string;
+    regex: string;
+    invalid_file_type: string;
+    max_file_size: string;
+};

package/dist/langs/validation.langs.js

@@ -0,0 +1,17 @@
+export const validationLangs = {
+    required: "Please fill in this field!",
+    min: "Field must contain more than @min Character!",
+    max: "Field must be less than @max Character!",
+    min_max: "Field must be @min - @max Character!",
+    phone: "Please enter valid mobile number!",
+    url: "Please enter valid url!",
+    uppercase: "Field must be at least 1 uppercase!",
+    lowercase: "Field must be at least 1 lowercase!",
+    numeric: "Field must be at least 1 numeric!",
+    email: "Please enter valid email!",
+    in: "Field must be one of @keywords",
+    not_in: "Field can't one of @keywords",
+    regex: "Please enter valid format",
+    invalid_file_type: "Only allow extensions @extension",
+    max_file_size: "Max file size @maxFileSize Mb",
+};

package/dist/registry/index.d.ts

@@ -0,0 +1,19 @@
+export interface Registry {
+    idb?: any;
+    socket?: any;
+    ExportExcel?: any;
+    ImportExcel?: any;
+    [key: string]: any;
+}
+export type DBSchema = {
+    name: string;
+    version: number;
+    stores: Record<string, any>;
+};
+declare class ServiceRegistry {
+    private services;
+    register<K extends keyof Registry>(name: K, service: Registry[K]): void;
+    get<K extends keyof Registry>(name: K): Registry[K];
+}
+export declare const registry: ServiceRegistry;
+export {};

package/dist/registry/index.js

@@ -0,0 +1,10 @@
+class ServiceRegistry {
+    services = {};
+    register(name, service) {
+        this.services[name] = service;
+    }
+    get(name) {
+        return this.services[name];
+    }
+}
+export const registry = new ServiceRegistry();

package/dist/resource.util.d.ts

@@ -0,0 +1,36 @@
+import { ApiType } from "./api.util";
+export type ResourceParams = {
+    page?: number;
+    paginate?: number;
+    search?: string;
+    sort?: string[];
+    expand?: string[];
+    filter?: any[];
+};
+export type UseResourceApi = ApiType & {
+    method?: "GET";
+};
+export type UseResourceIdb = {
+    store: string;
+    schema?: any;
+};
+export type UseResourceProps = ({
+    path?: string;
+    url?: string;
+} & UseResourceApi) | ({
+    idb: UseResourceIdb;
+});
+export declare function useResource(props: UseResourceProps & {
+    params?: ResourceParams;
+}): {
+    loading: boolean;
+    data: any;
+    reset: () => Promise<"" | undefined>;
+} | {
+    loading: boolean;
+    data: {
+        data: any[];
+        total_row: number;
+    } | null;
+    reset: () => Promise<void>;
+};

package/dist/resource.util.js

@@ -0,0 +1,81 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useGetApi } from "./api.util";
+import { registry } from "./registry";
+export function useResource(props) {
+    const isApi = "path" in props || "url" in props;
+    const apiResult = useGetApi(isApi ? props : {}, !isApi);
+    // =====================
+    // IDB MODE
+    // =====================
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState(null);
+    const idbParams = props.params || {};
+    const fetchIdb = async () => {
+        if (!("idb" in props))
+            return;
+        setLoading(true);
+        try {
+            const idb = registry.get("idb");
+            if (!idb) {
+                throw new Error("IndexedDB (IDB) extension is not installed or registered.");
+            }
+            const idbClient = props.idb.schema
+                ? idb.useSchema(props.idb.schema)
+                : idb;
+            let q = await idbClient.query(props.idb.store);
+            if (idbParams.search) {
+                const keyword = idbParams.search.toLowerCase();
+                q = q.where((row) => Object.values(row).some((v) => String(v).toLowerCase().includes(keyword)));
+            }
+            if (Array.isArray(idbParams.filter)) {
+                for (const f of idbParams.filter) {
+                    if (f?.field && f?.value !== undefined) {
+                        q = q.where((row) => row[f.field] === f.value);
+                    }
+                }
+            }
+            if (Array.isArray(idbParams.sort) && idbParams.sort.length) {
+                q = q.usingIndex(idbParams.sort[0]?.split(" ")?.at(0) || "created_at").order(idbParams.sort[0]?.split(" ")?.at(1) == "asc" ? "asc" : "desc");
+            }
+            if (idbParams.paginate) {
+                q = q.paginate(idbParams.page || 0, idbParams.paginate);
+            }
+            const [rows, total] = await Promise.all([
+                q.get(),
+                q.count(),
+            ]);
+            // const rows = await q.get()
+            setData({ data: rows, total_row: total });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (!isApi && "idb" in props)
+            fetchIdb();
+    }, [
+        isApi,
+        idbParams.search,
+        JSON.stringify(idbParams.filter),
+        JSON.stringify(idbParams.sort),
+        idbParams.paginate,
+        idbParams.page,
+    ]);
+    // =====================
+    // Unified return
+    // =====================
+    if (isApi) {
+        return {
+            loading: apiResult.loading,
+            data: apiResult.data,
+            reset: apiResult.reset,
+        };
+    }
+    return {
+        loading,
+        data: data,
+        reset: fetchIdb,
+    };
+}

package/dist/shortcut.util.d.ts

@@ -0,0 +1,12 @@
+export type ShortcutHandler = (e: KeyboardEvent) => void;
+export type ShortcutType = {
+    key: string;
+    description?: string;
+    handler: ShortcutHandler;
+};
+export declare const shortcut: {
+    register: (key: string, handler: ShortcutHandler, description?: string) => void;
+    unregister: (key: string) => boolean;
+    list: () => ShortcutType[];
+    init: () => void;
+};

package/dist/shortcut.util.js

@@ -0,0 +1,22 @@
+const handlers = new Map();
+export const shortcut = {
+    register: (key, handler, description) => {
+        handlers.set(key, { key, handler, description });
+    },
+    unregister: (key) => handlers.delete(key),
+    list: () => Array.from(handlers.values()),
+    init: () => {
+        window.addEventListener("keydown", (e) => {
+            const target = e.target;
+            if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA" || target?.isContentEditable)
+                return;
+            const combo = [e.ctrlKey && "ctrl", e.shiftKey && "shift", e.altKey && "alt", e.key.toLowerCase()].filter(Boolean).join("+");
+            const meta = handlers.get(combo);
+            if (meta) {
+                e.preventDefault();
+                e.stopPropagation();
+                meta.handler(e);
+            }
+        }, true);
+    }
+};

package/dist/table.util.d.ts

@@ -0,0 +1,51 @@
+import { ApiFilterType, ApiParamsType } from "./api.util";
+import { ResourceParams, UseResourceProps } from "./resource.util";
+export type TableStateType = {
+    params?: ApiParamsType;
+    data?: Record<string, any>[];
+    selected?: Record<string, any> | null;
+    checks?: (string | number)[] | null;
+    focus?: number | null;
+};
+export type FetchControlType = {
+    path?: string;
+    url?: string;
+    headers?: Record<string, any>;
+    params?: ApiParamsType;
+    includeParams?: object;
+    bearer?: string;
+};
+export declare const useTable: (fetchControl: UseResourceProps & {
+    params?: ResourceParams;
+}, id: string | undefined, title: string | undefined, urlParam: boolean | {
+    compressed?: boolean;
+}) => {
+    tableKey: string;
+    data: any;
+    reset: (() => Promise<"" | undefined>) | (() => Promise<void>);
+    loading: boolean;
+    params: ApiParamsType | undefined;
+    setParam: <K extends keyof ApiParamsType>(key: K, value: ApiParamsType[K]) => void;
+    focus: number | null | undefined;
+    setFocus: (focus: number | null) => void;
+    selected: Record<string, any> | null | undefined;
+    setSelected: (selected: Record<string, any> | null) => void;
+    checks: (string | number)[] | null | undefined;
+    setChecks: (checks: (string | number)[] | null) => void;
+    tableControl: {
+        loading: boolean;
+        sortBy: string[] | undefined;
+        onChangeSortBy: (e: string[]) => void;
+        search: string | undefined;
+        onChangeSearch: (e: string) => void;
+        filter: ApiFilterType[] | undefined;
+        onChangeFilter: (e: ApiFilterType[]) => void;
+        onRefresh: () => Promise<void> | Promise<"" | undefined>;
+        pagination: {
+            totalRow: any;
+            page: number;
+            paginate: number;
+            onChange: (_: number, paginate: number, page: number) => void;
+        };
+    };
+};