json-renderers 1.12.3 → 1.13.2

package/src/v8/table/index.js

@@ -1,82 +0,0 @@
-import buildTableDataAsJson from "./buildTableDataAsJson.js";
-import buildTableStructureSpec from "./buildTableStructureSpec.js";
-import buildTableDomElement from "./buildTableDomElement.js";
-import resolveTargetContainer from "./resolveTargetContainer.js";
-import attachTableClickEventListener from "./attachTableClickEventListener.js";
-import deriveColumnsFromData from "../common/deriveColumnsFromData.js";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-import fragmentsJson from './fragments.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    targetHtmlId,
-    inTargetHtmlId,
-    inColumns,
-    inData,
-    inColGroup,
-    inFooterData = [],
-    inConfig = {},
-    inSkeletonType = "default",
-    inShowLog = false
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns ?? deriveColumnsFromData({ inData: localData });
-    const localColGroup = inColGroup;
-    const localFooterData = inFooterData;
-    const localConfig = inConfig;
-    const localSkeletonType = inSkeletonType;
-    const localShowLog = inShowLog;
-
-    try {
-        // Story 1: Prepare table data payload as JSON
-        const tableDataAsJson = buildTableDataAsJson({
-            inColumns: localColumns,
-            inData: localData,
-            inColGroup: localColGroup,
-            inFooterData: localFooterData,
-            inConfig: localConfig
-        });
-
-        // Story 2: Build table structure specification from skeleton and fragments
-        const tableStructureSpec = buildTableStructureSpec({
-            inSkeletonType: localSkeletonType,
-            inSkeletonJson: skeletonJson,
-            inFragmentsJson: fragmentsJson,
-            inShowLog: localShowLog
-        });
-
-        // Story 3: Generate table DOM element from structure and data
-        const renderedTableElement = buildTableDomElement({
-            inStructureJson: tableStructureSpec,
-            inDataAsJson: tableDataAsJson,
-            inShowLog: localShowLog
-        });
-
-        // Story 4: Resolve target HTML container
-        const targetContainer = resolveTargetContainer({
-            inTargetHtmlId: localTargetHtmlId
-        });
-        if (!targetContainer) return;
-
-        targetContainer.innerHTML = "";
-
-        // Story 5: Attach click event listener for child table rendering
-        attachTableClickEventListener({
-            inTargetContainer: targetContainer,
-            inData: localData,
-            inColumns: localColumns,
-            inRenderFunc: startFunc,
-            inTargetHtmlId: localTargetHtmlId
-        });
-
-        // Story 6: Append rendered table into target container
-        targetContainer.append(renderedTableElement);
-
-    } catch (error) {
-        console.log("error : ", error);
-    }
-};
-
-export default startFunc;

package/src/v8/table/resolveTargetContainer.js

@@ -1,11 +0,0 @@
-// Story 4: Resolve target HTML container element
-const startFunc = ({ inTargetHtmlId } = {}) => {
-    const localTargetHtmlId = inTargetHtmlId;
-
-    if (typeof localTargetHtmlId === "string") {
-        return document.getElementById(localTargetHtmlId);
-    }
-    return localTargetHtmlId ?? null;
-};
-
-export default startFunc;

package/src/v8/table/skeleton.json

@@ -1,371 +0,0 @@
-{
-    "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/v9/common/deriveColumnsFromData.js

@@ -1,20 +0,0 @@
-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/v9/dataLists/fragments.json

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

package/src/v9/dataLists/index.js

@@ -1,32 +0,0 @@
-// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
-import jsonToTag from "@keshavsoft/json-to-tag";
-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/v9/dataLists/skeleton.json

@@ -1,38 +0,0 @@
-{
-    "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/v9/form/attachFormClickEventListener.js

@@ -1,27 +0,0 @@
-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/v9/form/clickFunc/extractFormData.js

@@ -1,27 +0,0 @@
-/**
- * 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/v9/form/clickFunc/handleNew.js

@@ -1,24 +0,0 @@
-/**
- * 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/v9/form/clickFunc/handleSave.js

@@ -1,33 +0,0 @@
-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;