@skalfa/skalfa-component 1.0.2 → 1.0.3

package/dist/src/nav/Navbar.component.js

@@ -1,26 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarComponent = NavbarComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _components_1 = require("@components");
-const _utils_1 = require("@utils");
-const defaultItems = [
-    { label: "Tentang", path: "" },
-    { label: "Artikel", path: "" },
-    { label: "Bantuan", path: "" },
-];
-const defaultSpecialLink = {
-    label: "Special Link",
-    path: "",
-    icon: free_solid_svg_icons_1.faStore,
-};
-function NavbarComponent({ logoTitle = "Next Light v.3", logoSubtitle = "The Magic Starter Template", logoPath = "/", specialLink = defaultSpecialLink, items = defaultItems, isLoggedIn = false, onLogin, onRegister, onProfile, className = "", }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("navbar-topbar", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-container", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-base", children: ["Ini untuk", (0, jsx_runtime_1.jsxs)(link_1.default, { href: specialLink.path, className: "navbar-special-link", children: [specialLink.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: specialLink.icon, className: "mr-1" }), specialLink.label] })] }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-sm", children: item.label }) }, key))) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-main", children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-main-container", children: [(0, jsx_runtime_1.jsx)(link_1.default, { href: logoPath, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-max", children: [(0, jsx_runtime_1.jsx)("h1", { className: "navbar-logo-title", children: logoTitle }), logoSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "navbar-logo-subtitle", children: logoSubtitle }))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-12 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-base", children: item.label }) }, key))) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center gap-8", children: !isLoggedIn ? ((0, jsx_runtime_1.jsxs)("div", { className: "navbar-auth-buttons", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Masuk", size: "sm", onClick: onLogin }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Daftar", size: "sm", variant: "light", onClick: onRegister })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 w-max items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-[1px] bg-foreground mx-2.5" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 cursor-pointer -ml-2 text-light-foreground hover:text-foreground", onClick: onProfile, children: (0, jsx_runtime_1.jsx)("div", { className: "h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser }) }) })] })) })] })] }) })] }));
-}

package/dist/src/nav/Sidebar.component.d.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from "react";
-export interface SidebarItemProps {
-    label: string;
-    key?: number;
-    leftContent?: any;
-    rightContent?: any;
-    path?: string;
-    items?: SidebarItemProps[];
-    className?: string;
-}
-export interface SidebarHeadItemProps {
-    label: string;
-    collapse?: boolean;
-    items?: SidebarItemProps[];
-    className?: string;
-}
-export interface sidebarProps {
-    head?: any;
-    items?: SidebarHeadItemProps[];
-    basePath?: string;
-    show?: boolean;
-    toggle?: boolean;
-    onToggleChange?: () => void;
-    children?: any;
-    hasAccess?: number[];
-    onChange?: () => void;
-    /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
-    className?: string;
-}
-export declare function SidebarComponent({ head, items, basePath, toggle, onToggleChange, className, }: sidebarProps): import("react").JSX.Element;
-export declare function SidebarContentComponent({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;

package/dist/src/nav/Sidebar.component.js

@@ -1,87 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarComponent = SidebarComponent;
-exports.SidebarContentComponent = SidebarContentComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const navigation_1 = require("next/navigation");
-const link_1 = __importDefault(require("next/link"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-;
-;
-;
-function SidebarWrapper({ path, children, onClick, }) {
-    if (path) {
-        return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, children: children });
-    }
-    else {
-        return (0, jsx_runtime_1.jsx)("div", { onClick: () => onClick?.(), children: children });
-    }
-}
-function SidebarComponent({ head, items, basePath, toggle, onToggleChange, 
-// onChange,
-// hasAccess,
-className = "", }) {
-    const pathName = (0, navigation_1.usePathname)();
-    const [shows, setShows] = (0, react_1.useState)([]);
-    const setShow = (key) => {
-        setShows((prevShows) => prevShows?.find((pk) => pk === key)
-            ? prevShows.filter((pk) => pk !== key)
-            : [...prevShows, key]);
-    };
-    const checkShow = (key) => {
-        if (shows?.includes(key)) {
-            return true;
-        }
-        return false;
-    };
-    const cekActive = (path) => {
-        const activePath = pathName?.split("?")[0]?.replace(`${basePath || ""}`, "") || "/";
-        const currentPath = `${path ? `${path}` : ""}`;
-        const isPrefix = (longer, shorter) => {
-            return (longer.startsWith(shorter) &&
-                (longer === shorter || longer[shorter.length] === "/"));
-        };
-        return (isPrefix(activePath, currentPath) || isPrefix(currentPath, activePath));
-    };
-    (0, react_1.useEffect)(() => {
-        items?.map((head, head_key) => {
-            head?.items?.map((menu, key) => {
-                if (menu?.path && cekActive(menu?.path || "")) {
-                    setShow(`${head_key}`);
-                }
-                menu?.items?.map((child) => {
-                    if (child?.path && cekActive(child?.path || "")) {
-                        setShow(`${head_key}`);
-                        setShow(`${head_key}.${key}`);
-                    }
-                });
-            });
-        });
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle ? "scale-100 md:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onToggleChange?.() }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle ? "scale-x-100 md:scale-x-0" : "scale-x-0 md:scale-x-100", (0, _utils_1.pcn)(className, "base")), children: [head, (0, jsx_runtime_1.jsx)("nav", { className: "flex flex-col flex-1 mt-3", children: items?.map((menu_head, menu_head_key) => {
-                            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "px-2 pt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown, className: (0, _utils_1.cn)("text-xs", checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
-                                            menu_head?.items?.map((menu, menu_key) => {
-                                                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path &&
-                                                                    cekActive(menu?.path || "") &&
-                                                                    "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronUp, className: `text-sm ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
-                                                                    checkShow(`${menu_head_key}.${menu_key}`) &&
-                                                                    menu?.items?.map((child, menu_child_key) => {
-                                                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SidebarWrapper, { path: child?.path
-                                                                                    ? `${basePath || ""}${child?.path}`
-                                                                                    : "", onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
-                                                                                        cekActive(child?.path || "") &&
-                                                                                        "sidebar-child-item-active", (0, _utils_1.pcn)(className, "child-item"), child?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: child?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.rightContent, child?.items?.length && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronUp, className: `block text-sm ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
-                                                                    }) }) })] }, `${menu_head_key}.${menu_key}`));
-                                            })] }) }, menu_head_key));
-                        }) })] })] }));
-}
-function SidebarContentComponent({ children }) {
-    return ((0, jsx_runtime_1.jsx)("main", { className: "sidebar-main-content", children: children }));
-}

package/dist/src/nav/Tabbar.component.d.ts

@@ -1,13 +0,0 @@
-export interface TabbarItemProps {
-    label: string;
-    value: string | number;
-}
-export interface TabbarProps {
-    items: string[] | TabbarItemProps[];
-    onChange?: (item: string | number) => void;
-    active?: string | number;
-    className?: string;
-}
-export declare function TabbarComponent({ items, onChange, active, 
-/** Use custom class with: "item::", "active::". */
-className, }: TabbarProps): import("react").JSX.Element;

package/dist/src/nav/Tabbar.component.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabbarComponent = TabbarComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _utils_1 = require("@utils");
-;
-;
-function TabbarComponent({ items, onChange, active, 
-/** Use custom class with: "item::", "active::". */
-className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-base", (0, _utils_1.pcn)(className, "base")), children: items?.map((item, i) => {
-                const isItemActive = active == (typeof item != "string" ? item?.value : item);
-                return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-item", isItemActive
-                        ? "tabbar-item-active"
-                        : "tabbar-item-inactive", (0, _utils_1.pcn)(className, "item"), (0, _utils_1.pcn)(className, "active")), onClick: () => onChange?.(typeof item != "string" ? item?.value : item), children: typeof item != "string" ? item?.label : item }, i));
-            }) }) }));
-}

package/dist/src/nav/Wizard.component.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-export interface WizardProps {
-    items: {
-        label: string;
-        circle_content: ReactNode;
-    }[];
-    active: number;
-}
-export declare function WizardComponent({ items, active }: WizardProps): import("react").JSX.Element;

package/dist/src/nav/Wizard.component.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardComponent = WizardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _utils_1 = require("@utils");
-;
-function WizardComponent({ items, active }) {
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-full py-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex", children: items.map((item, key) => {
-                    const isStepActive = key <= active;
-                    const isLineActive = key <= active + 1;
-                    const isLineGradient = key == active + 1;
-                    return ((0, jsx_runtime_1.jsxs)("div", { style: { width: `calc(100% * 1 / ${items.length})` }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "wizard-step-header", children: [key > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "wizard-progress-bar-wrapper", style: {
-                                            width: "calc(100% - 2.5rem - 1rem)",
-                                            top: "50%",
-                                            transform: "translate(-50%, -50%)",
-                                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "wizard-progress-bar-bg", children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("wizard-progress-bar-fill", isLineGradient
-                                                    ? "wizard-progress-bar-fill-gradient"
-                                                    : isLineActive
-                                                        ? "wizard-progress-bar-fill-active"
-                                                        : "") }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("wizard-circle", isStepActive
-                                            ? "wizard-circle-active"
-                                            : "wizard-circle-inactive"), children: (0, jsx_runtime_1.jsx)("span", { className: "text-center w-full", children: item.circle_content }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "wizard-label", children: item.label })] }, key));
-                }) }) }) }));
-}

package/dist/src/supervision/FormSupervision.component.d.ts

@@ -1,93 +0,0 @@
-import React, { ReactNode } from "react";
-import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
-import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps, InputMapProps } from "@components";
-type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
-    formControl: (name: string) => {
-        register: (regName: string, regValidations?: ValidationRules | undefined) => void;
-        unregister: (regName: string) => void;
-        onChange: (e: any) => void;
-        value: any;
-        invalid: any;
-    };
-    values: {
-        name: string;
-        value?: any;
-    }[];
-    setValues: (values: FormValueType[]) => void;
-    errors: FormErrorType[];
-    setErrors: (errors: FormErrorType[]) => void;
-    setRegister: (registers: FormRegisterType) => void;
-    prefixName?: string;
-}) => ReactNode;
-type ClusterConstruction = {
-    name: string;
-    label: string;
-    tip: string;
-    fields: FormType[];
-    wrap: boolean;
-    min?: number;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-    className: string;
-};
-type ConstructionMap = {
-    default: InputProps;
-    check: InputCheckboxProps;
-    currency: InputCurrencyProps;
-    date: InputDateProps;
-    datetime: InputDateTimeProps;
-    time: InputTimeProps;
-    image: InputImageProps;
-    cluster: ClusterConstruction;
-    number: InputNumberProps;
-    radio: InputRadioProps;
-    select: SelectProps;
-    "enter-password": InputPasswordProps;
-    otp: InputOtpProps;
-    map: InputMapProps;
-    custom: formCustomConstructionProps;
-};
-type TypeKeys = keyof ConstructionMap;
-export type WatchContext = {
-    values: Record<string, any>;
-    self: string;
-    prev: WatchAction;
-};
-export type WatchAction = {
-    disabled?: boolean;
-    hidden?: boolean;
-    value?: any;
-    required?: boolean;
-    readonly?: boolean;
-    reset?: boolean;
-};
-export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
-    col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
-    className?: string;
-    construction?: ConstructionMap[T];
-    type?: T;
-    onHide?: (values: any) => boolean;
-    watch?: (ctx: WatchContext) => WatchAction | undefined;
-}
-export interface formSupervisionProps {
-    title?: string;
-    fields: FormType[];
-    confirmation?: boolean;
-    defaultValue?: object | null;
-    payload?: (values: any) => Promise<object> | object;
-    submitControl: (ApiType & {
-        idb?: never;
-    }) | {
-        idb: {
-            store: string;
-            schema?: DBSchema;
-        };
-    };
-    footerControl?: ({ loading }: {
-        loading: boolean;
-    }) => ReactNode;
-    onSuccess?: (data: any) => void;
-    onError?: (code: number) => void;
-    className?: string;
-}
-export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): React.JSX.Element;
-export {};

package/dist/src/supervision/FormSupervision.component.js

@@ -1,168 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormSupervisionComponent = FormSupervisionComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", }) {
-    const [modal, setModal] = (0, react_1.useState)(false);
-    const [fresh, setFresh] = (0, react_1.useState)(true);
-    const [mapGroups, setMapGroups] = (0, react_1.useState)({});
-    const [watchState, setWatchState] = (0, react_1.useState)({});
-    const watchRef = (0, react_1.useRef)({});
-    const { formControl, setRegister, unregister, unregisterPrefix, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm } = (0, _utils_1.useForm)({
-        ...submitControl,
-        payload,
-        confirmation,
-        onSuccess: (data) => {
-            onSuccess?.(data);
-            setModal("success");
-            resetFresh();
-        },
-        onFailed: (code) => {
-            onError?.(code);
-            if (code == 422)
-                confirm.onClose();
-            else
-                setModal("failed");
-        },
-    });
-    const resetFresh = () => {
-        setFresh(false);
-        setTimeout(() => setFresh(true), 300);
-    };
-    (0, react_1.useEffect)(() => {
-        resetFresh();
-    }, [fields]);
-    (0, react_1.useEffect)(() => {
-        if (defaultValue)
-            setDefaultValues(defaultValue);
-        else {
-            setDefaultValues(null);
-            resetFresh();
-        }
-    }, [defaultValue]);
-    // ==============================>
-    // ## Watch: collect watchers from fields
-    // ==============================>
-    const collectWatchers = (fieldList, prefix) => {
-        const result = [];
-        for (const f of fieldList) {
-            const inputType = f.type || "default";
-            const name = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
-            if (inputType === "cluster") {
-                const cluster = f.construction;
-                const groupKey = prefix ? `${prefix}.${cluster.name}` : cluster.name;
-                const group = mapGroups[groupKey] || [0];
-                for (const gIndex of group) {
-                    result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
-                }
-            }
-            else if (f.watch) {
-                result.push({ name, watch: f.watch, construction: f.construction });
-            }
-        }
-        return result;
-    };
-    // ==============================>
-    // ## Watch: execute watchers on value change
-    // ==============================>
-    (0, react_1.useEffect)(() => {
-        const watchers = collectWatchers(fields);
-        if (watchers.length === 0) {
-            if (Object.keys(watchRef.current).length > 0) {
-                watchRef.current = {};
-                setWatchState({});
-            }
-            return;
-        }
-        const valMap = values.reduce((acc, v) => { acc[v.name] = v.value; return acc; }, {});
-        const nextState = {};
-        const valueUpdates = [];
-        for (const { name, watch, construction } of watchers) {
-            const prev = watchRef.current[name] || {};
-            const action = watch({ values: valMap, self: name, prev });
-            if (!action)
-                continue;
-            nextState[name] = action;
-            if (action.hidden && !prev.hidden)
-                unregister(name);
-            if (action.required !== prev.required) {
-                const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
-                const newValidations = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v) => v !== "required");
-                setRegister({ name, validations: newValidations });
-            }
-            if (action.reset) {
-                const cur = valMap[name];
-                if (cur != null && cur !== "")
-                    valueUpdates.push({ name, value: "" });
-            }
-            else if (action.value !== undefined && action.value !== valMap[name]) {
-                valueUpdates.push({ name, value: action.value });
-            }
-        }
-        if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
-            watchRef.current = nextState;
-            setWatchState(nextState);
-        }
-        if (valueUpdates.length > 0) {
-            const merged = [...values];
-            for (const upd of valueUpdates) {
-                const idx = merged.findIndex(v => v.name === upd.name);
-                if (idx >= 0)
-                    merged[idx] = upd;
-                else
-                    merged.push(upd);
-            }
-            setValues(merged);
-        }
-    }, [values, fields, mapGroups]);
-    const generateColClass = (col) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
-    const inputMap = {
-        default: _components_1.InputComponent,
-        check: _components_1.InputCheckboxComponent,
-        currency: _components_1.InputCurrencyComponent,
-        date: _components_1.InputDateComponent,
-        datetime: _components_1.InputDatetimeComponent,
-        time: _components_1.InputTimeComponent,
-        number: _components_1.InputNumberComponent,
-        radio: _components_1.InputRadioComponent,
-        select: _components_1.SelectComponent,
-        "enter-password": _components_1.InputPasswordComponent,
-        otp: _components_1.InputOtpComponent,
-        image: _components_1.InputImageComponent,
-        map: _components_1.InputMapComponent,
-        cluster: () => null,
-        custom: () => null,
-    };
-    const renderInput = (form, key, prefix) => {
-        const inputType = form.type || "default";
-        const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
-        if (form?.onHide?.(values))
-            return null;
-        const ws = watchState[name];
-        if (ws?.hidden)
-            return null;
-        if (inputType === "cluster") {
-            const { name: mapName, fields: innerForms, label, tip, wrap, className, min = 0 } = form.construction;
-            const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
-            const group = mapGroups[groupKey] || Array.from({ length: Math.max(min, 1) }, (_, i) => i);
-            const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length > 0 ? Math.max(...group) + 1 : 0] }));
-            const removeGroup = (gIndex) => {
-                setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
-                unregisterPrefix(`${groupKey}[${gIndex}]`);
-            };
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
-        }
-        if (inputType === "custom") {
-            const customRender = form.construction;
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix }) }, key));
-        }
-        const Component = inputMap[inputType] || _components_1.InputComponent;
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name), disabled: ws?.disabled, readOnly: ws?.readonly }) }, key));
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { type: "submit", label: "Simpan", icon: free_solid_svg_icons_1.faSave, loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) })) })] }), (0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), icon: free_solid_svg_icons_1.faQuestionCircle, title: "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-confirm-text", children: "Yakin semua data sudah benar?" }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: modal == "failed", onClose: () => setModal(false), title: "Gagal", className: "form-supervision-toast-error header::text-danger", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!" }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: modal == "success", onClose: () => setModal(false), title: "Berhasil", className: "form-supervision-toast-success header::text-success", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data berhasil disimpan!" }) })] }));
-}

package/dist/src/supervision/TableSupervision.component.d.ts

@@ -1,78 +0,0 @@
-import { ReactNode } from "react";
-import { conversion, FetchControlType, ShortcutHandler, UseResourceProps } from "@utils";
-import { FloatingPageProps, FormType, ButtonProps, ModalConfirmProps, TableProps, ControlBarOptionType } from "@components";
-export interface TableSupervisionColumnProps {
-    selector: string;
-    label?: string;
-    width?: string;
-    sortable?: boolean;
-    searchable?: boolean;
-    filterable?: boolean | {
-        type: "text" | "number" | "currency" | "date";
-    } | {
-        type: "select";
-        options: {
-            label: string;
-            value: any;
-        }[];
-    };
-    accessCode?: string;
-    item?: (data: any) => string | ReactNode;
-    tip?: string | ((data: any) => string);
-    exportable?: boolean | "default" | "optional" | "hidden";
-    importable?: boolean;
-}
-export interface TableSupervisionFormProps {
-    fields: string[] | (FormType & {
-        visibility?: "*" | "create" | "update";
-    })[];
-    defaultValue?: (item: Record<string, any> | null) => Promise<Record<string, any>> | Record<string, any>;
-    payload?: (values: any) => Promise<Record<string, any>> | object;
-    modalControl?: Omit<FloatingPageProps, "show" | "onClose" | "children">;
-    contentType?: "application/json" | "multipart/form-data";
-}
-export type TableSupervisionDetailProps = boolean | (string | {
-    label: string;
-    item: string | ((data: Record<string, any>) => ReactNode);
-    conversion?: keyof typeof conversion;
-} | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => void) | {
-    modal?: Omit<FloatingPageProps, "show" | "onClose" | "children">;
-    content?: boolean | (string | {
-        label: string;
-        item: string | ((data: Record<string, any>) => ReactNode);
-        conversion?: keyof typeof conversion;
-    } | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => ReactNode);
-    action?: (data: Record<string, any>) => void;
-};
-export type TableSupervisionProps = {
-    fetchControl: UseResourceProps;
-    title?: string;
-    id?: string;
-    accessCode?: number;
-    urlParam?: boolean | {
-        compressed?: boolean;
-    };
-    columnControl?: string[] | TableSupervisionColumnProps[];
-    formControl?: TableSupervisionFormProps;
-    detailControl?: TableSupervisionDetailProps;
-    actionControl?: boolean | ('EDIT' | 'DELETE' | {
-        label: string;
-        modal?: Omit<ModalConfirmProps, "show" | "onClose">;
-        button?: ButtonProps;
-        shortcut?: {
-            key: string;
-            description: string;
-        };
-    } | ((row: Record<string, any>, setModal: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, setShortcut?: (key: string, handler: ShortcutHandler, description?: string) => void) => ReactNode))[];
-    block?: boolean;
-    noIndex?: boolean;
-    actionBulkingControl?: TableProps["actionBulking"];
-    controlBar?: (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
-    responsiveControl?: {
-        mobile?: TableProps["responsiveControl"] extends {
-            mobile?: infer M;
-        } ? M | boolean : boolean;
-    };
-    importControl?: FetchControlType;
-};
-export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }: TableSupervisionProps): import("react").JSX.Element;