json-renderers 1.9.1

package/src/v6/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/v7/common/deriveColumnsFromData.js

@@ -0,0 +1,20 @@
+const deriveColumnsFromData = ({ inData = [] } = {}) => {
+    const localData = inData;
+
+    if (!Array.isArray(localData) || localData.length === 0) {
+        return [];
+    }
+
+    const firstRow = localData[0];
+    if (!firstRow || typeof firstRow !== "object") {
+        return [];
+    }
+
+    return Object.keys(firstRow).map(key => ({
+        key,
+        label: key
+    }));
+};
+
+export { deriveColumnsFromData };
+export default deriveColumnsFromData;

package/src/v7/dataLists/fragments.json

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

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