json-renderers-build 1.9.2 → 1.10.3

package/src/v10/tableFromSpec/render-requests.json

@@ -0,0 +1,107 @@
+{
+  "table": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {}
+  },
+  "tableWithSerial": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showSerial": true
+    }
+  },
+  "tableWithDefaultAction": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showOptions": true
+    }
+  },
+  "tableWithCustomActions": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showOptions": [
+        { "label": "Show", "type": "button" },
+        { "label": "Edit", "type": "button" }
+      ]
+    }
+  },
+  "tableWithSerialAndActions": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showSerial": true,
+      "showOptions": [
+        { "label": "Show", "type": "button" }
+      ]
+    }
+  },
+  "tableWithFooter": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "footer": ["inputs"],
+    "options": {}
+  },
+  "tableWithFooterSave": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "footer": ["inputsWithSave"],
+    "options": {}
+  },
+  "tableWithTotals": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "2" },
+      { "itemName": "0.11-25", "baseUnit": "3" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "footer": ["totals"],
+    "options": {}
+  },
+  "tableWithMultipleFooters": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "2" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "footer": ["inputs", "totals", "inputsWithSave", "empty"],
+    "options": {}
+  },
+  "tableHead": {
+    "type": "tableHead",
+    "data": [],
+    "columns": ["itemName", "baseUnit"],
+    "options": {}
+  },
+  "tableBody": {
+    "type": "tableBody",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {}
+  }
+}

package/src/v10/tableFromSpec/table/body/index.js

@@ -0,0 +1,16 @@
+import jsonTransformer from "@keshavsoft/json-transformer";
+import spec from "./spec.json" with { type: "json" };
+
+const renderTableBody = ({ inColumns = [], inData } = {}) => {
+    const columns = inColumns.map(element => {
+        return {
+            columnName: element
+        };
+    });
+
+    const row = jsonTransformer({ columns, rows: inData }, spec);
+
+    return row;
+};
+
+export default renderTableBody;

package/src/v10/tableFromSpec/table/body/spec.json

@@ -0,0 +1,16 @@
+{
+    "buildBody": {
+        "rows": {
+            "body": {
+                "tagName": "tbody"
+            },
+            "row": {
+                "tagName": "tr"
+            },
+            "cell": {
+                "tagName": "td",
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v10/tableFromSpec/table/findKey.js

@@ -0,0 +1,17 @@
+const startFunc = (structure, key) => {
+    const findkey = key;
+
+    const result = findkey
+        .split(".")
+        .reduce((obj, key) => {
+            return key.split("[").reduce((value, part) => {
+                return part.endsWith("]")
+                    ? value[part.slice(0, -1)]
+                    : value[part];
+            }, obj);
+        }, structure);
+
+    return result;
+};
+
+export default startFunc;

package/src/v10/tableFromSpec/table/head/index.js

@@ -0,0 +1,16 @@
+import jsonTransformer from "@keshavsoft/json-transformer";
+import spec from "./spec.json" with { type: "json" };
+
+const renderTableHead = ({ inColumns = [] } = {}) => {
+    const input = inColumns.map(element => {
+        return {
+            columnName: element
+        };
+    });
+
+    const row = jsonTransformer({ Rows: input }, spec);
+
+    return row?.Rows;
+};
+
+export default renderTableHead;

package/src/v10/tableFromSpec/table/head/spec.json

@@ -0,0 +1,13 @@
+{
+    "buildArray": {
+        "Rows": {
+            "row": {
+                "tagName": "tr"
+            },
+            "cell": {
+                "tagName": "th",
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v10/tableFromSpec/table/index.js

@@ -0,0 +1,24 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderTableHead from "./head/index.js";
+import renderTableBody from "./body/index.js";
+import renderTableFooter from "../footer/index.js";
+
+const renderTable = ({
+    inColumns = [],
+    inData = [],
+    inFooter = []
+} = {}) => {
+    const table = structuredClone(tagJson);
+
+    const header = renderTableHead({ inColumns });
+    const body = renderTableBody({ inColumns, inData });
+    // console.log("header : ", header);
+
+    table.children[0].children = [header];
+    table.children[1] = body;
+
+    return table;
+};
+
+export { renderTableHead, renderTableBody };
+export default renderTable;

package/src/v10/tableFromSpec/table/tag.json

@@ -0,0 +1,24 @@
+{
+  "tagName": "table",
+  "attributes": {
+    "class": "table table-hover table-striped align-middle border mb-0"
+  },
+  "children": [
+    {
+      "tagName": "thead",
+      "attributes": {
+        "class": "table-dark"
+      },
+      "children": [
+        {
+          "tagName": "tr",
+          "children": []
+        }
+      ]
+    },
+    {
+      "tagName": "tbody",
+      "children": []
+    }
+  ]
+}

package/src/v1/index.js

@@ -1,62 +0,0 @@
-import registerGlobal from "./registerGlobal.js";
-
-import renderTable from "./table/index.js";
-
-const RENDERER_MAP = {
-    table: renderTable
-};
-
-const render = ({
-    type = "table",
-    targetHtmlId,
-    data,
-    classToApply,
-    inTargetHtmlId,
-    inData,
-    columns,
-    inColumns,
-    colGroup,
-    inColGroup,
-    footerData,
-    inFooterData,
-    config,
-    inConfig,
-    variant,
-    skeletonType,
-    inSkeletonType,
-    showLog = false,
-    inShowLog
-} = {}) => {
-    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 localSkeletonType = inSkeletonType ?? skeletonType ?? variant ?? "default";
-    const localShowLog = inShowLog ?? showLog ?? false;
-
-    // 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/v1/meta.js

@@ -1,6 +0,0 @@
-export const meta = {
-    version: "v12.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;

package/src/v1/registerGlobal.js

@@ -1,14 +0,0 @@
-import meta from "./meta.js";
-
-export const registerGlobal = (inFuncDefinition) => {
-    if (typeof globalThis === "undefined" || !inFuncDefinition) return;
-
-    globalThis.ks ??= {};
-
-    globalThis.ks.jsonRenderers ??= {
-        meta,
-        renderToDom: inFuncDefinition
-    };
-};
-
-export default registerGlobal;

package/src/v1/select/index.js

@@ -1,32 +0,0 @@
-import jsonToSpec from "json-to-spec";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    inTargetHtmlId,
-    inData
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    let specAsJsonToDom = jsonToSpec(skeletonJson, {
-        arrayOfStrings: localData
-    });
-
-    if (!("tagName" in specAsJsonToDom)) {
-        specAsJsonToDom = specAsJsonToDom.children;
-    };
-
-    const container = document.getElementById(localTargetHtmlId);
-
-    if (container) container.innerHTML = "";
-
-    const content = jsonToTag(specAsJsonToDom);
-
-    container.append(content);
-};
-
-export default startFunc;

package/src/v1/select/skeleton.json

@@ -1,18 +0,0 @@
-{
-    "tagName": "select",
-    "attributes": {
-        "id": "arrayOfStrings"
-    },
-    "jsonToSpec": {
-        "operation": "loopArray",
-        "source": "arrayOfStrings",
-        "template": {
-            "tagName": "option",
-            "attributes": {
-                "value": "${}"
-            },
-            "textContent": "${}"
-        }
-    },
-    "children": []
-}

package/src/v1/table/index.js

@@ -1,36 +0,0 @@
-import jsonToSpec from "json-to-spec";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    targetHtmlId,
-    inTargetHtmlId,
-    inColumns,
-    inData,
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    let specAsJsonToDom = jsonToSpec(skeletonJson.default, {
-        columns: localColumns, data: localData
-    });
-
-    // console.log("specAsJsonToDom : ", specAsJsonToDom);
-
-    if (!("tagName" in specAsJsonToDom)) {
-        specAsJsonToDom = specAsJsonToDom.children;
-    };
-
-    const container = document.getElementById(localTargetHtmlId);
-
-    if (container) container.innerHTML = "";
-
-    const content = jsonToTag(specAsJsonToDom);
-    
-    container.append(content);
-};
-
-export default startFunc;

package/src/v1/table/skeleton.json

@@ -1,47 +0,0 @@
-{
-    "default": {
-        "tagName": "table",
-        "attributes": {
-            "class": "table table-hover table-striped mb-0"
-        },
-        "children": [
-            {
-                "tagName": "thead",
-                "children": [
-                    {
-                        "tagName": "tr",
-                        "jsonToSpec": {
-                            "operation": "loopCollection",
-                            "source": "columns",
-                            "template": {
-                                "tagName": "th",
-                                "textContent": "${title}"
-                            }
-                        },
-                        "children": []
-                    }
-                ]
-            },
-            {
-                "tagName": "tbody",
-                "jsonToSpec": {
-                    "operation": "loopCollection",
-                    "source": "data",
-                    "template": {
-                        "tagName": "tr",
-                        "jsonToSpec": {
-                            "operation": "loopObject",
-                            "source": "data",
-                            "template": {
-                                "tagName": "td",
-                                "textContent": "${value}"
-                            }
-                        },
-                        "children": []
-                    }
-                },
-                "children": []
-            }
-        ]
-    }
-}

package/src/v2/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/v2/index.js

@@ -1,62 +0,0 @@
-import registerGlobal from "./registerGlobal.js";
-
-import renderTable from "./table/index.js";
-
-const RENDERER_MAP = {
-    table: renderTable
-};
-
-const render = ({
-    type = "table",
-    targetHtmlId,
-    data,
-    classToApply,
-    inTargetHtmlId,
-    inData,
-    columns,
-    inColumns,
-    colGroup,
-    inColGroup,
-    footerData,
-    inFooterData,
-    config,
-    inConfig,
-    variant,
-    skeletonType,
-    inSkeletonType,
-    showLog = false,
-    inShowLog
-} = {}) => {
-    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 localSkeletonType = inSkeletonType ?? skeletonType ?? variant ?? "default";
-    const localShowLog = inShowLog ?? showLog ?? false;
-
-    // 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/v2/select/index.js

@@ -1,32 +0,0 @@
-import jsonToSpec from "json-to-spec";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    inTargetHtmlId,
-    inData
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    let specAsJsonToDom = jsonToSpec(skeletonJson, {
-        arrayOfStrings: localData
-    });
-
-    if (!("tagName" in specAsJsonToDom)) {
-        specAsJsonToDom = specAsJsonToDom.children;
-    };
-
-    const container = document.getElementById(localTargetHtmlId);
-
-    if (container) container.innerHTML = "";
-
-    const content = jsonToTag(specAsJsonToDom);
-
-    container.append(content);
-};
-
-export default startFunc;

package/src/v2/select/skeleton.json

@@ -1,18 +0,0 @@
-{
-    "tagName": "select",
-    "attributes": {
-        "id": "arrayOfStrings"
-    },
-    "jsonToSpec": {
-        "operation": "loopArray",
-        "source": "arrayOfStrings",
-        "template": {
-            "tagName": "option",
-            "attributes": {
-                "value": "${}"
-            },
-            "textContent": "${}"
-        }
-    },
-    "children": []
-}

package/src/v2/table/index.js

@@ -1,23 +0,0 @@
-import jsonToSpec from "json-to-spec";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    targetHtmlId,
-    inTargetHtmlId,
-    inColumns,
-    inData,
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    let specAsJsonToDom = jsonToSpec(skeletonJson.default, {
-        columns: localColumns, data: localData
-    });
-
-    return specAsJsonToDom;
-};
-
-export default startFunc;

package/src/v2/table/skeleton.json

@@ -1,47 +0,0 @@
-{
-    "default": {
-        "tagName": "table",
-        "attributes": {
-            "class": "table table-hover table-striped mb-0"
-        },
-        "children": [
-            {
-                "tagName": "thead",
-                "children": [
-                    {
-                        "tagName": "tr",
-                        "jsonToSpec": {
-                            "operation": "loopCollection",
-                            "source": "columns",
-                            "template": {
-                                "tagName": "th",
-                                "textContent": "${title}"
-                            }
-                        },
-                        "children": []
-                    }
-                ]
-            },
-            {
-                "tagName": "tbody",
-                "jsonToSpec": {
-                    "operation": "loopCollection",
-                    "source": "data",
-                    "template": {
-                        "tagName": "tr",
-                        "jsonToSpec": {
-                            "operation": "loopObject",
-                            "source": "data",
-                            "template": {
-                                "tagName": "td",
-                                "textContent": "${value}"
-                            }
-                        },
-                        "children": []
-                    }
-                },
-                "children": []
-            }
-        ]
-    }
-}