json-renderers 1.9.1

package/src/v7/form/index.js

@@ -0,0 +1,87 @@
+import jsonToSpec from "../../../jsonToSpec/v2/index.js";
+import jsonToTag from "../../../jsonToTag/v2/index.js";
+import attachFormClickEventListener from "./attachFormClickEventListener.js";
+
+import structureJson from './structure.json' with {type: 'json'};
+
+const startFunc = ({
+    targetHtmlId,
+    inTargetHtmlId,
+    inFields = [],
+    inData = {},
+    inColumns = [],
+    inVariant = "stacked",
+    inSkeletonType,
+    inShowLog = false,
+    onSave,
+    afterSave,
+    onNew,
+    onClear
+} = {}) => {
+    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
+    const localVariant = inSkeletonType ?? inVariant;
+    const localShowLog = inShowLog;
+
+    try {
+        let fieldsArray = [];
+
+        if (Array.isArray(inFields) && inFields.length > 0) {
+            fieldsArray = inFields;
+        } else if (Array.isArray(inColumns) && inColumns.length > 0) {
+            fieldsArray = inColumns.map((col) => ({
+                key: col.field ?? col.name ?? col.key,
+                label: col.title ?? col.label ?? col.field ?? col.name,
+                type: col.type ?? "text",
+                value: inData?.[col.field ?? col.name ?? col.key] ?? col.value ?? "",
+                readonly: col.readonly ? "true" : "",
+                disabled: col.disabled ? "true" : ""
+            }));
+        } else if (typeof inData === "object" && inData !== null && !Array.isArray(inData)) {
+            fieldsArray = Object.entries(inData).map(([key, value]) => ({
+                key,
+                label: key,
+                type: "text",
+                value: value ?? "",
+                readonly: "",
+                disabled: ""
+            }));
+        }
+
+        const dataAsJson = { fields: fieldsArray };
+
+        const rawStructure = structureJson[localVariant] ?? structureJson.stacked ?? structureJson;
+        const targetStructure = structuredClone(rawStructure);
+
+        if (localShowLog) console.log("form targetStructure : ", targetStructure);
+
+        const specAsJsonToDom = jsonToSpec({ specJson: targetStructure, dataJson: dataAsJson, showLog: false });
+        if (localShowLog) console.log("form specAsJsonToDom : ", specAsJsonToDom);
+
+        const fromRenderer = jsonToTag(specAsJsonToDom);
+
+        const html = (typeof localTargetHtmlId === "string")
+            ? document.getElementById(localTargetHtmlId)
+            : localTargetHtmlId;
+
+        const containerToAttach = html || fromRenderer;
+
+        // Attach modular click event listener for Save and New actions
+        attachFormClickEventListener({
+            inTargetContainer: containerToAttach,
+            onSave,
+            afterSave,
+            onNew,
+            onClear
+        });
+
+        if (!html) return fromRenderer;
+
+        html.append(fromRenderer);
+        return fromRenderer;
+    } catch (error) {
+        console.log("error : ", error);
+    }
+};
+
+export { startFunc };
+export default startFunc;

package/src/v7/form/structure.json

@@ -0,0 +1,410 @@
+{
+    "stacked": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header fw-semibold"
+                },
+                "children": [
+                    {
+                        "tagName": "span",
+                        "textContent": "Ledger Details"
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-body"
+                },
+                "jsonToSpec": {
+                    "operation": "loopArray",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "div",
+                        "attributes": {
+                            "class": "mb-3"
+                        },
+                        "children": [
+                            {
+                                "tagName": "label",
+                                "attributes": {
+                                    "class": "form-label"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "input",
+                                "attributes": {
+                                    "type": "${type}",
+                                    "class": "form-control",
+                                    "value": "${value}",
+                                    "name": "${key}",
+                                    "readonly": "${readonly}",
+                                    "disabled": "${disabled}"
+                                }
+                            }
+                        ]
+                    }
+                },
+                "jsonToSpec1": {
+                    "operation": "iterate",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "div",
+                        "attributes": {
+                            "class": "mb-3"
+                        },
+                        "children": [
+                            {
+                                "tagName": "label",
+                                "attributes": {
+                                    "class": "form-label"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "input",
+                                "attributes": {
+                                    "type": "text",
+                                    "class": "form-control",
+                                    "value": "${value}",
+                                    "readonly": "true"
+                                }
+                            }
+                        ]
+                    }
+                },
+                "children": []
+            }
+        ]
+    },
+    "stackedWithButtons": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header fw-semibold"
+                },
+                "children": [
+                    {
+                        "tagName": "span",
+                        "textContent": "Ledger Details"
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-body"
+                },
+                "jsonToSpec": {
+                    "operation": "loopArray",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "div",
+                        "attributes": {
+                            "class": "mb-3"
+                        },
+                        "children": [
+                            {
+                                "tagName": "label",
+                                "attributes": {
+                                    "class": "form-label"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "input",
+                                "attributes": {
+                                    "type": "${type}",
+                                    "class": "form-control",
+                                    "value": "${value}",
+                                    "name": "${key}",
+                                    "readonly": "${readonly}",
+                                    "disabled": "${disabled}"
+                                }
+                            }
+                        ]
+                    }
+                },
+                "children": []
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-footer bg-white border-top-0 d-flex justify-content-end gap-2 pt-0 pb-3"
+                },
+                "children": [
+                    {
+                        "tagName": "button",
+                        "attributes": {
+                            "type": "button",
+                            "class": "btn btn-outline-secondary btn-sm",
+                            "id": "btn-form-new"
+                        },
+                        "textContent": "New"
+                    },
+                    {
+                        "tagName": "button",
+                        "attributes": {
+                            "type": "button",
+                            "class": "btn btn-primary btn-sm",
+                            "id": "btn-form-save"
+                        },
+                        "textContent": "Save"
+                    }
+                ]
+            }
+        ]
+    },
+    "inline": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header fw-semibold"
+                },
+                "children": [
+                    {
+                        "tagName": "span",
+                        "textContent": "Ledger Details"
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-body"
+                },
+                "jsonToSpec": {
+                    "operation": "loopArray",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "div",
+                        "attributes": {
+                            "class": "row mb-2 align-items-center"
+                        },
+                        "children": [
+                            {
+                                "tagName": "label",
+                                "attributes": {
+                                    "class": "col-sm-4 col-form-label text-sm-end mb-0 fw-semibold text-secondary small"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "div",
+                                "attributes": {
+                                    "class": "col-sm-8"
+                                },
+                                "children": [
+                                    {
+                                        "tagName": "input",
+                                        "attributes": {
+                                            "class": "form-control",
+                                            "name": "${key}",
+                                            "value": "${value}",
+                                            "list": "${list}",
+                                            "type": "${type}"
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                },
+                "jsonToSpec1": {
+                    "operation": "iterate",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "div",
+                        "attributes": {
+                            "class": "row mb-2 align-items-center"
+                        },
+                        "children": [
+                            {
+                                "tagName": "label",
+                                "attributes": {
+                                    "class": "col-4 col-form-label fw-medium text-end"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "div",
+                                "attributes": {
+                                    "class": "col-8"
+                                },
+                                "children": [
+                                    {
+                                        "tagName": "input",
+                                        "attributes": {
+                                            "type": "text",
+                                            "class": "form-control form-control-sm",
+                                            "value": "${value}",
+                                            "list": "${list}"
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                },
+                "children": []
+            }
+        ]
+    },
+    "inlineWithButtons": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header fw-semibold"
+                },
+                "children": [
+                    {
+                        "tagName": "span",
+                        "textContent": "Ledger Details"
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-body"
+                },
+                "jsonToSpec": {
+                    "operation": "iterate",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "div",
+                        "attributes": {
+                            "class": "row mb-2 align-items-center"
+                        },
+                        "children": [
+                            {
+                                "tagName": "label",
+                                "attributes": {
+                                    "class": "col-4 col-form-label fw-medium text-end"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "div",
+                                "attributes": {
+                                    "class": "col-6"
+                                },
+                                "children": [
+                                    {
+                                        "tagName": "input",
+                                        "attributes": {
+                                            "type": "text",
+                                            "class": "form-control form-control-sm",
+                                            "value": "${value}",
+                                            "readonly": "true"
+                                        }
+                                    }
+                                ]
+                            },
+                            {
+                                "tagName": "div",
+                                "attributes": {
+                                    "class": "col-2 d-flex gap-1"
+                                },
+                                "children": [
+                                    {
+                                        "tagName": "button",
+                                        "attributes": {
+                                            "type": "button",
+                                            "class": "btn btn-sm btn-outline-primary"
+                                        },
+                                        "textContent": "Edit"
+                                    },
+                                    {
+                                        "tagName": "button",
+                                        "attributes": {
+                                            "type": "button",
+                                            "class": "btn btn-sm btn-outline-secondary"
+                                        },
+                                        "textContent": "Copy"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                },
+                "children": []
+            }
+        ]
+    },
+    "list": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header fw-semibold"
+                },
+                "children": [
+                    {
+                        "tagName": "span",
+                        "textContent": "Ledger Details"
+                    }
+                ]
+            },
+            {
+                "tagName": "ul",
+                "attributes": {
+                    "class": "list-group list-group-flush"
+                },
+                "jsonToSpec": {
+                    "operation": "iterate",
+                    "source": "fields",
+                    "template": {
+                        "tagName": "li",
+                        "attributes": {
+                            "class": "list-group-item d-flex justify-content-between align-items-center"
+                        },
+                        "children": [
+                            {
+                                "tagName": "span",
+                                "attributes": {
+                                    "class": "text-muted"
+                                },
+                                "textContent": "${label}"
+                            },
+                            {
+                                "tagName": "span",
+                                "attributes": {
+                                    "class": "fw-medium"
+                                },
+                                "textContent": "${value}"
+                            }
+                        ]
+                    }
+                },
+                "children": []
+            }
+        ]
+    }
+}

package/src/v7/index.js

@@ -0,0 +1,141 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable from "./table/index.js";
+// import renderNavTabs from "./navTabs/index.js";
+// import renderForm from "./form/index.js";
+
+import renderDataList from "./dataLists/index.js";
+import renderSelect from "./select/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable,
+    datalist: renderDataList,
+    select: renderSelect
+};
+
+
+/**
+ * Unified Renderer
+ * Dispatches to the corresponding renderer strategy (table, navTabs, form)
+ * based on the provided type.
+ */
+
+// render({ type: "select", data, targetHtmlId: "dom-render-container" });
+
+const render = ({
+    type = "table",
+    targetHtmlId,
+    data,
+    classToApply,
+    inTargetHtmlId,
+    inData,
+    columns,
+    inColumns,
+    fields,
+    inFields,
+    tabs,
+    inTabs,
+    options,
+    inOptions,
+    datalistId,
+    inDatalistId,
+    listId,
+    inListId,
+    id,
+    valueField,
+    inValueField,
+    labelField,
+    inLabelField,
+    colGroup,
+    inColGroup,
+    footerData,
+    inFooterData,
+    config,
+    inConfig,
+    variant,
+    skeletonType,
+    inSkeletonType,
+    showLog = false,
+    inShowLog,
+    ...restProps
+} = {}) => {
+    const rawType = type;
+    const resolvedType = typeof rawType === "string" ? rawType.toLowerCase() : "table";
+    const renderer = RENDERER_MAP[resolvedType];
+
+    if (!renderer) {
+        console.error(
+            `[Renderer] Unknown renderer type "${rawType}". Available types: ${Object.keys(RENDERER_MAP).join(", ")}`
+        );
+        return null;
+    }
+
+    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
+    const localData = inData ?? data;
+    const localColumns = inColumns ?? columns;
+    const localFields = inFields ?? fields;
+    const localTabs = inTabs ?? tabs;
+    const localOptions = inOptions ?? options ?? localData;
+    const localSkeletonType = inSkeletonType ?? skeletonType ?? variant ?? "default";
+    const localShowLog = inShowLog ?? showLog ?? false;
+
+    if (resolvedType === "form") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inFields: localFields,
+            inData: localData,
+            inColumns: localColumns,
+            inVariant: localSkeletonType,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog,
+            onSave: restProps?.onSave,
+            afterSave: restProps?.afterSave,
+            onNew: restProps?.onNew
+        });
+    }
+
+    if (resolvedType === "navtabs" || resolvedType === "nav" || resolvedType === "tabs") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inTabs: localTabs,
+            inData: localData,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog
+        });
+    }
+
+    if (resolvedType === "datalist" || resolvedType === "data-list") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inData: localData,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog
+        });
+    }
+
+    if (resolvedType === "select") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inData: localData,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog,
+            inClassToApply: classToApply
+        });
+    };
+
+    // Default to table renderer
+    return renderer({
+        targetHtmlId: localTargetHtmlId,
+        inColumns: localColumns,
+        inData: localData,
+        inColGroup: inColGroup ?? colGroup,
+        inFooterData: inFooterData ?? footerData ?? [],
+        inConfig: inConfig ?? config ?? {},
+        inSkeletonType: localSkeletonType,
+        inShowLog: localShowLog
+    });
+};
+
+registerGlobal(render);
+
+export default render;

package/src/v7/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "v4.0.0",
+    description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
+};
+
+export default meta;