json-renderers-build 1.7.1 → 1.9.1

package/src/v8/select/options/index.js

@@ -0,0 +1,17 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+
+    let specAsJsonToDom = jsonTransform({
+        children: localData
+    }, skeletonJson);
+
+    return specAsJsonToDom?.children;
+};
+
+export default startFunc;

package/src/v8/select/options/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "option",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v8/select/skeleton.json

@@ -0,0 +1,7 @@
+{
+    "tagName": "select",
+    "attributes": {
+        "id": "LedgerName"
+    },
+    "children": []
+}

package/src/v8/table/body/cells/index.js

@@ -0,0 +1,17 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+
+    let tdAsArray = jsonTransform({
+        children: localData
+    }, skeletonJson);
+
+    return tdAsArray?.children;
+};
+
+export default startFunc;

package/src/v8/table/body/cells/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "td",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v8/table/body/index.js

@@ -0,0 +1,20 @@
+import bodyRows from "./rows/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+    inColumns
+}) => {
+    const localData = inData;
+    const localColumns = inColumns;
+    const tbody = structuredClone(skeletonJson);
+
+    tbody.children = bodyRows({
+        inData: localData,
+        inColumns: localColumns
+    });
+
+    return tbody;
+};
+
+export default startFunc;

package/src/v8/table/body/rows/index.js

@@ -0,0 +1,23 @@
+import bodyCells from "../cells/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+    inColumns
+}) => {
+    const localData = inData;
+    const localColumns = inColumns;
+
+    return localData.map(row => {
+        const cellValues = Array.isArray(row)
+            ? row
+            : localColumns.map(col => row[col]);
+
+        const tr = structuredClone(skeletonJson);
+        tr.children = bodyCells({ inData: cellValues });
+
+        return tr;
+    });
+};
+
+export default startFunc;

package/src/v8/table/body/rows/skeleton.json

@@ -0,0 +1,4 @@
+{
+    "tagName": "tr",
+    "children": []
+}

package/src/v8/table/body/skeleton.json

@@ -0,0 +1,4 @@
+{
+    "tagName": "tbody",
+    "children": []
+}

package/src/v8/table/head/cells/index.js

@@ -0,0 +1,17 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+
+    let thAsArray = jsonTransform({
+        children: localData
+    }, skeletonJson);
+
+    return thAsArray?.children;
+};
+
+export default startFunc;

package/src/v8/table/head/cells/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "th",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v8/table/head/index.js

@@ -0,0 +1,15 @@
+import headRow from "./row/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+    const thead = structuredClone(skeletonJson);
+
+    thead.children = [headRow({ inData: localData })];
+
+    return thead;
+};
+
+export default startFunc;

package/src/v8/table/head/row/index.js

@@ -0,0 +1,15 @@
+import headCells from "../cells/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+    const row = structuredClone(skeletonJson);
+
+    row.children = headCells({ inData: localData });
+
+    return row;
+};
+
+export default startFunc;

package/src/v8/table/head/row/skeleton.json

@@ -0,0 +1,4 @@
+{
+    "tagName": "tr",
+    "children": []
+}

package/src/v8/table/head/skeleton.json

@@ -0,0 +1,4 @@
+{
+    "tagName": "thead",
+    "children": []
+}

package/src/v8/table/index.js

@@ -0,0 +1,26 @@
+import renderTableHead from "./head/index.js";
+import renderTableBody from "./body/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inColumns,
+    inData
+}) => {
+    const localColumns = inColumns;
+    const localData = inData;
+
+    const table = structuredClone(skeletonJson);
+
+    table.children = [
+        renderTableHead({ inData: localColumns }),
+        renderTableBody({ inData: localData, inColumns: localColumns })
+    ];
+
+    return table;
+};
+
+export {
+    renderTableHead,
+    renderTableBody
+};
+export default startFunc;

package/src/v8/table/skeleton.json

@@ -0,0 +1,7 @@
+{
+    "tagName": "table",
+    "attributes": {
+        "class": "table table-hover table-striped mb-0"
+    },
+    "children": []
+}

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

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

package/src/v9/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "v9.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/v9/registerGlobal.js

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

package/src/v9/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/v9/select/options/index.js

@@ -0,0 +1,17 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+
+    let specAsJsonToDom = jsonTransform({
+        children: localData
+    }, skeletonJson);
+
+    return specAsJsonToDom?.children;
+};
+
+export default startFunc;

package/src/v9/select/options/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "option",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v9/select/skeleton.json

@@ -0,0 +1,7 @@
+{
+    "tagName": "select",
+    "attributes": {
+        "id": "LedgerName"
+    },
+    "children": []
+}

package/src/v9/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/v9/table/footer/empty/cell/tag.json

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

package/src/v9/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/v9/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/v9/table/footer/empty/row/tag.json

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

package/src/v9/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/v9/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/v9/table/footer/inputs/cell/tag.json

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

package/src/v9/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/v9/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/v9/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/v9/table/footer/inputs/row/tag.json

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

package/src/v9/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/v9/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/v9/table/footer/inputsWithSave/cell/tag.json

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

package/src/v9/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/v9/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/v9/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/v9/table/footer/inputsWithSave/row/tag.json

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

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

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

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