json-renderers-build 1.9.2 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers-build",
-  "version": "1.9.2",
+  "version": "1.10.2",
   "description": "Headless component specification builder for json-renderers, compiling UI skeletons and data into JSON-to-DOM specs using json-to-spec",
   "type": "module",
   "main": "src/index.js",
@@ -41,7 +41,7 @@
     "vite": "^5.4.2"
   },
   "dependencies": {
-    "@keshavsoft/json-transformer": "^1.14.0",
+    "@keshavsoft/json-transformer": "^1.15.2",
     "json-to-spec": "^32.1.3"
   }
 }

package/src/index.js

@@ -1,2 +1,2 @@
-export * from "./v9/index.js";
-export { default } from "./v9/index.js";
+export * from "./v10/index.js";
+export { default } from "./v10/index.js";

package/src/v10/index.js

@@ -0,0 +1,42 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable from "./table/index.js";
+import renderSelect, { renderSelectOptions } from "./select/index.js";
+import tableFromSpec from "./tableFromSpec/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable,
+    select: renderSelect,
+    selectOptionsOnly: renderSelectOptions,
+    tableFromSpec
+};
+
+const render = ({
+    type = "table",
+    data,
+    columns,
+    options
+}) => {
+    const rawType = type;
+    const renderer = RENDERER_MAP[rawType];
+    // console.log("rawType : ", rawType, renderer);
+    const localData = data;
+    const localColumns = columns;
+
+    const createdRenderer = renderer({
+        inColumns: localColumns,
+        inData: localData,
+        options
+    });
+
+    return createdRenderer;
+};
+
+registerGlobal(render);
+
+export {
+    renderTable,
+    renderSelect,
+    renderSelectOptions
+};
+export default render;

package/src/{v2 → v10}/meta.js

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

package/src/v10/select/index.js

@@ -0,0 +1,21 @@
+import renderSelectOptions from "./options/index.js";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+
+    let localChildren = renderSelectOptions({
+        inData: localData
+    });
+
+    const select = structuredClone(skeletonJson);
+    select.children = localChildren;
+
+    return select;
+};
+
+export { renderSelectOptions };
+export default startFunc;

package/src/{v6/selectOptionsOnly → v10/select/options}/index.js

@@ -2,16 +2,14 @@ import jsonTransform from "@keshavsoft/json-transformer";
 
 import skeletonJson from './skeleton.json' with { type: 'json' };
 
-// --- Story of Table Render ---
 const startFunc = ({
     inData,
-} = {}) => {
-    const localData = inData ?? [];
+}) => {
+    const localData = inData;
 
     let specAsJsonToDom = jsonTransform({
         children: localData
     }, skeletonJson);
-    // console.log("specAsJsonToDom: ", specAsJsonToDom);
 
     return specAsJsonToDom?.children;
 };

package/src/{v4/selectOptionsOnly → v10/select/options}/skeleton.json

@@ -14,4 +14,4 @@
             }
         }
     }
-}
+}

package/src/v10/table/footer/empty/cell/index.js

@@ -0,0 +1,5 @@
+import tagJson from "./tag.json" with { type: "json" };
+
+const renderCell = () => structuredClone(tagJson);
+
+export default renderCell;

package/src/v10/table/footer/empty/cell/tag.json

@@ -0,0 +1,6 @@
+{
+  "tagName": "td",
+  "attributes": {
+    "class": "align-middle py-2"
+  }
+}

package/src/v10/table/footer/empty/index.js

@@ -0,0 +1,6 @@
+import renderRow from "./row/index.js";
+
+const renderEmpty = ({ inColumns = [] } = {}) =>
+    renderRow({ inColumns });
+
+export default renderEmpty;

package/src/v10/table/footer/empty/row/index.js

@@ -0,0 +1,10 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderCell from "../cell/index.js";
+
+const renderRow = ({ inColumns = [] } = {}) => {
+    const row = structuredClone(tagJson);
+    row.children = inColumns.map(() => renderCell());
+    return row;
+};
+
+export default renderRow;

package/src/v10/table/footer/empty/row/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "tr",
+  "attributes": {
+    "class": "align-middle"
+  },
+  "children": []
+}

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

@@ -0,0 +1,28 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderInputs from "./inputs/index.js";
+import renderInputsWithSave from "./inputsWithSave/index.js";
+import renderTotals from "./totals/index.js";
+import renderEmpty from "./empty/index.js";
+
+const footerBuilders = {
+    inputs: renderInputs,
+    inputsWithSave: renderInputsWithSave,
+    totals: renderTotals,
+    empty: renderEmpty
+};
+
+const renderTableFooter = ({ inFooter = [], inColumns = [], inData = [] } = {}) => {
+    const tfoot = structuredClone(tagJson);
+
+    tfoot.children = inFooter.map(footerName => {
+        if (!Object.hasOwn(footerBuilders, footerName)) {
+            throw new Error(`Unknown footer "${footerName}".`);
+        }
+
+        return footerBuilders[footerName]({ inColumns, inData });
+    });
+
+    return tfoot;
+};
+
+export default renderTableFooter;

package/src/v10/table/footer/inputs/cell/index.js

@@ -0,0 +1,15 @@
+import cellJson from "./tag.json" with { type: "json" };
+import inputJson from "../input/tag.json" with { type: "json" };
+
+const renderCell = ({ inColumn } = {}) => {
+    const cell = structuredClone(cellJson);
+    const input = structuredClone(inputJson);
+
+    input.attributes.name = inColumn;
+    input.attributes.placeholder = inColumn;
+    cell.children.push(input);
+
+    return cell;
+};
+
+export default renderCell;

package/src/v10/table/footer/inputs/cell/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "td",
+  "attributes": {
+    "class": "align-middle py-2"
+  },
+  "children": []
+}

package/src/v10/table/footer/inputs/index.js

@@ -0,0 +1,6 @@
+import renderRow from "./row/index.js";
+
+const renderInputs = ({ inColumns = [] } = {}) =>
+    renderRow({ inColumns });
+
+export default renderInputs;

package/src/v10/table/footer/inputs/input/tag.json

@@ -0,0 +1,9 @@
+{
+  "tagName": "input",
+  "attributes": {
+    "type": "text",
+    "name": "",
+    "placeholder": "",
+    "class": "form-control form-control-sm"
+  }
+}

package/src/v10/table/footer/inputs/row/index.js

@@ -0,0 +1,10 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderCell from "../cell/index.js";
+
+const renderRow = ({ inColumns = [] } = {}) => {
+    const row = structuredClone(tagJson);
+    row.children = inColumns.map(inColumn => renderCell({ inColumn }));
+    return row;
+};
+
+export default renderRow;

package/src/v10/table/footer/inputs/row/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "tr",
+  "attributes": {
+    "class": "align-middle"
+  },
+  "children": []
+}

package/src/v10/table/footer/inputsWithSave/button/tag.json

@@ -0,0 +1,8 @@
+{
+  "tagName": "button",
+  "attributes": {
+    "type": "button",
+    "class": "btn btn-primary btn-sm ms-2"
+  },
+  "textContent": "Save"
+}

package/src/v10/table/footer/inputsWithSave/cell/index.js

@@ -0,0 +1,20 @@
+import cellJson from "./tag.json" with { type: "json" };
+import inputJson from "../input/tag.json" with { type: "json" };
+import buttonJson from "../button/tag.json" with { type: "json" };
+
+const renderCell = ({ inColumn, inSave = false } = {}) => {
+    const cell = structuredClone(cellJson);
+    const input = structuredClone(inputJson);
+
+    input.attributes.name = inColumn;
+    input.attributes.placeholder = inColumn;
+    cell.children.push(input);
+
+    if (inSave) {
+        cell.children.push(structuredClone(buttonJson));
+    }
+
+    return cell;
+};
+
+export default renderCell;

package/src/v10/table/footer/inputsWithSave/cell/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "td",
+  "attributes": {
+    "class": "align-middle py-2"
+  },
+  "children": []
+}

package/src/v10/table/footer/inputsWithSave/index.js

@@ -0,0 +1,6 @@
+import renderRow from "./row/index.js";
+
+const renderInputsWithSave = ({ inColumns = [] } = {}) =>
+    renderRow({ inColumns });
+
+export default renderInputsWithSave;

package/src/v10/table/footer/inputsWithSave/input/tag.json

@@ -0,0 +1,9 @@
+{
+  "tagName": "input",
+  "attributes": {
+    "type": "text",
+    "name": "",
+    "placeholder": "",
+    "class": "form-control form-control-sm"
+  }
+}

package/src/v10/table/footer/inputsWithSave/row/index.js

@@ -0,0 +1,13 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderCell from "../cell/index.js";
+
+const renderRow = ({ inColumns = [] } = {}) => {
+    const row = structuredClone(tagJson);
+    row.children = inColumns.map((inColumn, index) => renderCell({
+        inColumn,
+        inSave: index === inColumns.length - 1
+    }));
+    return row;
+};
+
+export default renderRow;

package/src/v10/table/footer/inputsWithSave/row/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "tr",
+  "attributes": {
+    "class": "align-middle"
+  },
+  "children": []
+}

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

@@ -0,0 +1,7 @@
+{
+  "tagName": "tfoot",
+  "attributes": {
+    "class": "table-light"
+  },
+  "children": []
+}

package/src/v10/table/footer/totals/cell/index.js

@@ -0,0 +1,21 @@
+import tagJson from "./tag.json" with { type: "json" };
+
+const getValue = (row, column) =>
+    Array.isArray(row) ? row[column] : row?.[column];
+
+const renderCell = ({ inColumn, inIndex, inData = [] } = {}) => {
+    const cell = structuredClone(tagJson);
+    const values = inData
+        .map(row => getValue(row, inColumn))
+        .filter(value => value !== null && value !== undefined && String(value).trim() !== "")
+        .map(Number)
+        .filter(Number.isFinite);
+
+    cell.textContent = values.length
+        ? String(values.reduce((sum, value) => sum + value, 0))
+        : inIndex === 0 ? "Total" : "";
+
+    return cell;
+};
+
+export default renderCell;

package/src/v10/table/footer/totals/cell/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "td",
+  "attributes": {
+    "class": "align-middle py-2"
+  },
+  "textContent": ""
+}

package/src/v10/table/footer/totals/index.js

@@ -0,0 +1,6 @@
+import renderRow from "./row/index.js";
+
+const renderTotals = ({ inColumns = [], inData = [] } = {}) =>
+    renderRow({ inColumns, inData });
+
+export default renderTotals;

package/src/v10/table/footer/totals/row/index.js

@@ -0,0 +1,12 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderCell from "../cell/index.js";
+
+const renderRow = ({ inColumns = [], inData = [] } = {}) => {
+    const row = structuredClone(tagJson);
+    row.children = inColumns.map((inColumn, inIndex) =>
+        renderCell({ inColumn, inIndex, inData })
+    );
+    return row;
+};
+
+export default renderRow;

package/src/v10/table/footer/totals/row/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "tr",
+  "attributes": {
+    "class": "fw-semibold align-middle"
+  },
+  "children": []
+}

package/src/v10/table/index.js

@@ -0,0 +1,33 @@
+import renderTable from "./table/index.js";
+
+import applyOptions from "./options/index.js";
+import renderRequests from "./render-requests.json" with { type: "json" };
+
+const render = ({
+    type = "table",
+    inData,
+    inColumns,
+    footer = [],
+    options = {}
+} = {}) => {
+    if (type === "table") {
+        const spec = renderTable({
+            inColumns,
+            inData,
+            inFooter: footer
+        });
+
+        return applyOptions(spec, options);
+    };
+
+    throw new Error(`Unknown table renderer type "${type}".`);
+};
+
+render.requests = renderRequests;
+
+export {
+    render,
+    renderRequests
+};
+
+export default render;

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

@@ -0,0 +1,16 @@
+import applyShowSerial from "./showSerial/index.js";
+import applyShowOptions from "./showOptions/index.js";
+
+const applyOptions = (inSpec, inOptions = {}) => {
+    if (inOptions.showSerial) {
+        applyShowSerial(inSpec);
+    }
+
+    if (inOptions.showOptions) {
+        applyShowOptions(inSpec, inOptions.showOptions);
+    }
+
+    return inSpec;
+};
+
+export default applyOptions;

package/src/v10/table/options/showOptions/index.js

@@ -0,0 +1,39 @@
+const resolveButtons = (inShowOptions) => {
+    if (inShowOptions === true) {
+        return [{ label: "Apply", type: "button" }];
+    }
+
+    if (Array.isArray(inShowOptions)) {
+        return inShowOptions;
+    }
+
+    return [];
+};
+
+const applyShowOptions = (inSpec, inShowOptions) => {
+    const buttons = resolveButtons(inShowOptions);
+
+    if (buttons.length === 0) return;
+
+    const [thead, tbody] = inSpec.children;
+
+    // append <th>Actions</th> to head row
+    thead.children[0].children.push({
+        tagName: "th",
+        textContent: "Actions"
+    });
+
+    // append <td> with buttons to each body row
+    tbody.children.forEach(tr => {
+        tr.children.push({
+            tagName: "td",
+            children: buttons.map(btn => ({
+                tagName: "button",
+                attributes: { type: btn.type || "button" },
+                textContent: btn.label
+            }))
+        });
+    });
+};
+
+export default applyShowOptions;

package/src/v10/table/options/showSerial/index.js

@@ -0,0 +1,19 @@
+const applyShowSerial = (inSpec) => {
+    const [thead, tbody] = inSpec.children;
+
+    // prepend <th>#</th> to head row
+    thead.children[0].children.unshift({
+        tagName: "th",
+        textContent: "#"
+    });
+
+    // prepend <td>{rowIndex}</td> to each body row
+    tbody.children.forEach((tr, index) => {
+        tr.children.unshift({
+            tagName: "td",
+            textContent: String(index + 1)
+        });
+    });
+};
+
+export default applyShowSerial;

package/src/v10/table/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/table/table/body/cell/index.js

@@ -0,0 +1,12 @@
+import tagJson from "./tag.json" with { type: "json" };
+
+const buildBodyCell = ({ inValue } = {}) => {
+    const td = structuredClone(tagJson);
+
+    td.attributes.value = inValue;
+    td.textContent = inValue;
+
+    return td;
+};
+
+export default buildBodyCell;

package/src/v10/table/table/body/cell/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "td",
+  "attributes": {
+    "value": ""
+  },
+  "textContent": ""
+}