json-renderers 1.9.1

package/src/v5/table/skeleton.json

@@ -0,0 +1,371 @@
+{
+    "tableSimple": {
+        "tagName": "table",
+        "attributes": {
+            "class": "table table-hover table-striped mb-0"
+        },
+        "slots": [
+            "colGroup",
+            "thead",
+            "tbody",
+            "tfoot"
+        ]
+    },
+    "bodyOnly": {
+        "tagName": "table",
+        "attributes": {
+            "class": "table table-hover table-striped mb-0"
+        },
+        "slots": [
+            "tbody"
+        ]
+    },
+    "default": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-hover table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "tableOnly": {
+        "tagName": "table",
+        "attributes": {
+            "class": "table table-hover table-striped mb-0"
+        },
+        "slots": [
+            "colGroup",
+            "thead",
+            "tbody",
+            "tfoot"
+        ]
+    },
+    "tableResponsive": {
+        "tagName": "div",
+        "attributes": {
+            "class": "table-responsive"
+        },
+        "children": [
+            {
+                "tagName": "table",
+                "attributes": {
+                    "class": "table table-hover table-striped mb-0"
+                },
+                "slots": [
+                    "colGroup",
+                    "thead",
+                    "tbody",
+                    "tfoot"
+                ]
+            }
+        ]
+    },
+    "cardWithHeader": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header bg-white py-3"
+                },
+                "slots": [
+                    "cardHeader"
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-hover table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "cardWithFooter": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-hover table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-footer bg-white py-2"
+                },
+                "slots": [
+                    "cardFooter"
+                ]
+            }
+        ]
+    },
+    "cardWithHeaderAndFooter": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header bg-white py-3"
+                },
+                "slots": [
+                    "cardHeader"
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-hover table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-footer bg-white py-2"
+                },
+                "slots": [
+                    "cardFooter"
+                ]
+            }
+        ]
+    },
+    "bordered": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-bordered table-hover mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "borderless": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-borderless table-hover mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "compact": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-sm table-hover table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "dark": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm bg-dark text-white border-secondary"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-dark table-hover mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "striped": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    "flush": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card border-0 shadow-none"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-hover table-striped mb-0"
+                        },
+                        "slots": [
+                            "colGroup",
+                            "thead",
+                            "tbody",
+                            "tfoot"
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}

package/src/v6/dataLists/fragments.json

@@ -0,0 +1 @@
+{}

package/src/v6/dataLists/index.js

@@ -0,0 +1,32 @@
+// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
+import jsonToTag from "../../../node_modules/@keshavsoft/json-to-tag/index.js";
+import jsonTraversal from "../../../node_modules/json-traversal/index.js";
+
+import skeletonJson from "./skeleton.json" with { type: "json" };
+
+const startFunc = ({ targetHtmlId, inData, inSkeletonType = "default" } = {}) => {
+
+    // const specAsJsonToDom = jsonToSpec({
+    //     specJson: skeletonJson[inSkeletonType],
+    //     dataJson: inData
+    // });
+    const skeletonNeeded = skeletonJson[inSkeletonType];
+
+    const specAsJsonToDom = jsonTraversal.transform(inData, skeletonNeeded);
+
+
+    const container = document.getElementById(targetHtmlId);
+
+    if (container) container.innerHTML = "";
+
+    const createdElement = jsonToTag(specAsJsonToDom);
+
+    if (Array.isArray(createdElement)) {
+        // container.appendChild(createdElement)
+        createdElement.forEach(element => container.append(element));
+    } else {
+        container.append(createdElement);
+    };
+};
+
+export default startFunc;

package/src/v6/dataLists/skeleton.json

@@ -0,0 +1,38 @@
+{
+    "old": {
+        "tagName": "datalist",
+        "attributes": {
+            "id": "LedgerName"
+        },
+        "jsonToSpec": {
+            "operation": "loopArray",
+            "source": "LedgerName",
+            "template": {
+                "tagName": "option",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        },
+        "children": []
+    },
+    "default": {
+        "mapping": {
+            "tagName": "$datalist",
+            "attributes": {
+                "id": "$LedgerName"
+            },
+            "children": {
+                "list": "LedgerName",
+                "item": {
+                    "tagName": "$option",
+                    "attributes": {
+                        "value": ""
+                    },
+                    "textContent": ""
+                }
+            }
+        }
+    }
+}

package/src/v6/form/attachFormClickEventListener.js

@@ -0,0 +1,27 @@
+import clickFunc from "./clickFunc/index.js";
+
+/**
+ * Story: Attach click event listener for Form action buttons
+ */
+const startFunc = ({
+    inTargetContainer,
+    onSave,
+    afterSave,
+    onNew,
+    onClear
+} = {}) => {
+    if (!inTargetContainer) return;
+
+    inTargetContainer.addEventListener("click", (event) => {
+        clickFunc({
+            inEvent: event,
+            inFormContainer: inTargetContainer,
+            onSave,
+            afterSave,
+            onNew,
+            onClear
+        });
+    });
+};
+
+export default startFunc;

package/src/v6/form/clickFunc/extractFormData.js

@@ -0,0 +1,27 @@
+/**
+ * Step 1: Convert Form DOM inputs to clean JavaScript Object
+ */
+const extractFormData = ({ inFormContainer } = {}) => {
+    if (!inFormContainer) return {};
+
+    const inputs = inFormContainer.querySelectorAll("input[name], select[name], textarea[name]");
+    const data = {};
+
+    inputs.forEach(input => {
+        const key = input.name || input.getAttribute("name");
+        if (!key) return;
+
+        if (input.type === "checkbox") {
+            data[key] = input.checked;
+        } else if (input.type === "radio") {
+            if (input.checked) data[key] = input.value;
+        } else {
+            data[key] = input.value;
+        }
+    });
+
+    return data;
+};
+
+export { extractFormData };
+export default extractFormData;

package/src/v6/form/clickFunc/handleNew.js

@@ -0,0 +1,24 @@
+/**
+ * Step 3: Handle New / Clear button action - reset inputs and trigger callbacks
+ */
+const handleNew = ({ inEvent, inFormContainer, onNew, onClear } = {}) => {
+    if (inFormContainer) {
+        const inputs = inFormContainer.querySelectorAll("input[name], textarea[name]");
+        inputs.forEach(input => {
+            if (input.type === "checkbox" || input.type === "radio") {
+                input.checked = false;
+            } else {
+                input.value = "";
+            }
+        });
+    }
+
+    if (typeof onNew === "function") {
+        onNew({ inEvent });
+    } else if (typeof onClear === "function") {
+        onClear({ inEvent });
+    }
+};
+
+export { handleNew };
+export default handleNew;

package/src/v6/form/clickFunc/handleSave.js

@@ -0,0 +1,33 @@
+import extractFormData from "./extractFormData.js";
+
+/**
+ * Step 2: Handle Save button action - serialize form DOM and dispatch callbacks
+ */
+const handleSave = ({ inEvent, inFormContainer, onSave, afterSave } = {}) => {
+    const clickedButton = inEvent?.target?.closest("button");
+    const formData = extractFormData({ inFormContainer });
+
+    // Visual button feedback
+    if (clickedButton) {
+        const originalText = clickedButton.textContent;
+        clickedButton.textContent = "Saved!";
+        clickedButton.classList.replace("btn-primary", "btn-success");
+        setTimeout(() => {
+            clickedButton.textContent = originalText;
+            clickedButton.classList.replace("btn-success", "btn-primary");
+        }, 1000);
+    }
+
+    if (typeof onSave === "function") {
+        onSave({ inData: formData, inEvent });
+    }
+
+    if (typeof afterSave === "function") {
+        afterSave({ inData: formData, inEvent });
+    }
+
+    return formData;
+};
+
+export { handleSave };
+export default handleSave;

package/src/v6/form/clickFunc/index.js

@@ -0,0 +1,32 @@
+import handleSave from "./handleSave.js";
+import handleNew from "./handleNew.js";
+
+/**
+ * Main form click router: identifies button action and routes to dedicated handlers
+ */
+const clickFunc = ({
+    inEvent,
+    inFormContainer,
+    onSave,
+    afterSave,
+    onNew,
+    onClear
+} = {}) => {
+    const clickedButton = inEvent?.target?.closest("button");
+    if (!clickedButton) return;
+
+    const buttonId = clickedButton.id || "";
+    const buttonAction = clickedButton.dataset.action || "";
+    const buttonText = clickedButton.textContent.trim().toLowerCase();
+
+    if (buttonId === "btn-form-save" || buttonAction === "save" || buttonText === "save") {
+        return handleSave({ inEvent, inFormContainer, onSave, afterSave });
+    }
+
+    if (buttonId === "btn-form-new" || buttonAction === "new" || buttonText === "new" || buttonText === "clear") {
+        return handleNew({ inEvent, inFormContainer, onNew, onClear });
+    }
+};
+
+export { clickFunc };
+export default clickFunc;

package/src/v6/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;