@agilant/toga-blox 1.0.98 → 1.0.100

package/dist/utils/formaTableData.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { CellProps } from "react-table";
+/** The shape your library expects for each column's config */
+export interface SharedColumnConfig {
+    key: string;
+    type?: string;
+    linkClasses?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    leftImage?: string;
+    rightImage?: string;
+    transform?: (value: any) => any;
+}
+/** The shape of the columns you return to React Table */
+export interface TableColumn {
+    Header: string | (() => JSX.Element);
+    accessor: string;
+    Cell: (props: CellProps<{
+        [key: string]: string | React.ReactElement;
+    }, string | React.ReactElement>) => JSX.Element;
+    sticky?: "left" | "right";
+}
+/**
+ * The "renderers" your app provides for icons, images, statuses, currencies, etc.
+ */
+export interface Renderers {
+    renderIcon?: (iconName: string, style?: "solid" | "regular") => JSX.Element;
+    renderImage?: (props: {
+        imageUrl: string;
+        altText: string;
+        className?: string;
+        width?: number;
+        height?: number;
+    }) => JSX.Element;
+    renderStatus?: (value: string, extra?: any) => JSX.Element;
+    renderCurrency?: (value: string) => string;
+}
+/**
+ * The main function that shapes columns for React Table.
+ *  - `columnTitles`: array of column headers
+ *  - `accessors`: array of "col1", "col2", ...
+ *  - `columnConfigs`: array of raw backend configs (with booleans)
+ *  - `renderers`: your app's icon/image/status/currency callbacks
+ */
+declare function formatTableData(columnTitles: string[], accessors: string[], columnConfigs: any[], renderers?: Renderers): TableColumn[];
+/**
+ * Helper to generate "col1", "col2", "col3", etc.
+ */
+declare function generateAccessors(columnTitles: string[]): string[];
+export { formatTableData, generateAccessors };
+declare const _default: {
+    formatTableData: typeof formatTableData;
+    generateAccessors: typeof generateAccessors;
+};
+export default _default;

package/dist/utils/formaTableData.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Convert your backend booleans (e.g. `hasStatus`, `hasCurrency`)
+ * into the library's expected fields (`type: "STATUS"`, `type: "CURRENCY"`, etc.).
+ */
+function transformBackendConfig(backendConfig) {
+    console.log("[LIB] transformBackendConfig input:", backendConfig);
+    const finalConfig = {
+        key: backendConfig.key,
+        type: backendConfig.type ?? "DEFAULT",
+        linkClasses: backendConfig.linkClasses ?? "",
+        transform: backendConfig.transform,
+    };
+    if (backendConfig.hasStatus) {
+        finalConfig.type = "STATUS";
+    }
+    if (backendConfig.hasCurrency) {
+        finalConfig.type = "CURRENCY";
+    }
+    if (backendConfig.hasLeftIcon) {
+        finalConfig.leftIcon = "check"; // Or any icon name
+    }
+    if (backendConfig.hasRightIcon) {
+        finalConfig.rightIcon = "arrowRight"; // Or any icon name
+    }
+    if (backendConfig.hasLeftImage) {
+        finalConfig.leftImage = "https://example.com/placeholder.png";
+    }
+    if (backendConfig.hasRightImage) {
+        finalConfig.rightImage = "https://example.com/placeholder.png";
+    }
+    console.log("[LIB] transformBackendConfig output:", finalConfig);
+    return finalConfig;
+}
+/**
+ * The main function that shapes columns for React Table.
+ *  - `columnTitles`: array of column headers
+ *  - `accessors`: array of "col1", "col2", ...
+ *  - `columnConfigs`: array of raw backend configs (with booleans)
+ *  - `renderers`: your app's icon/image/status/currency callbacks
+ */
+function formatTableData(columnTitles, accessors, columnConfigs, renderers = {}) {
+    /**
+     * Creates the "Cell" renderer for each column,
+     * checking icons/images or type fields,
+     * then calling the relevant `renderers` method.
+     */
+    function renderCellContent(config) {
+        return ({ value }) => {
+            // Log to see which type we ended up with, and what the cell value is
+            console.log("[LIB] renderCellContent -> config.type:", config.type, "value:", value);
+            // 1. Check icons/images
+            if (config.leftIcon && renderers.renderIcon) {
+                console.log("[LIB] using leftIcon:", config.leftIcon);
+                const icon = (_jsx("div", { className: "pr-2", children: renderers.renderIcon(config.leftIcon, "solid") }));
+                return renderContent(config, value, icon, "left");
+            }
+            if (config.rightIcon && renderers.renderIcon) {
+                console.log("[LIB] using rightIcon:", config.rightIcon);
+                const icon = (_jsx("div", { className: "pl-2", children: renderers.renderIcon(config.rightIcon, "solid") }));
+                return renderContent(config, value, icon, "right");
+            }
+            if (config.leftImage && renderers.renderImage) {
+                console.log("[LIB] using leftImage:", config.leftImage);
+                const image = (_jsx("div", { className: "pr-2", children: renderers.renderImage({
+                        imageUrl: config.leftImage,
+                        altText: "Image",
+                        width: 30,
+                        height: 30,
+                    }) }));
+                return renderContent(config, value, image, "left");
+            }
+            if (config.rightImage && renderers.renderImage) {
+                console.log("[LIB] using rightImage:", config.rightImage);
+                const image = (_jsx("div", { className: "pl-2", children: renderers.renderImage({
+                        imageUrl: config.rightImage,
+                        altText: "Image",
+                        width: 30,
+                        height: 30,
+                    }) }));
+                return renderContent(config, value, image, "right");
+            }
+            // 2. Check type
+            switch (config.type) {
+                case "STATUS":
+                    console.log("[LIB] checking STATUS case, value:", value);
+                    if (renderers.renderStatus && typeof value === "string") {
+                        console.log("[LIB] calling renderers.renderStatus!");
+                        return renderContent(config, value, renderers.renderStatus(value));
+                    }
+                    break;
+                case "CURRENCY":
+                    console.log("[LIB] checking CURRENCY case, value:", value);
+                    if (renderers.renderCurrency && typeof value === "string") {
+                        console.log("[LIB] calling renderers.renderCurrency!");
+                        const formatted = renderers.renderCurrency(value);
+                        return renderContent(config, formatted);
+                    }
+                    break;
+                // Add other types if needed
+                default:
+                    console.log("[LIB] type is:", config.type, "falling back to raw text");
+            }
+            // 3. Otherwise, raw text
+            return (_jsx("div", { style: { display: "flex", alignItems: "center" }, children: typeof value === "string" ? _jsx("p", { children: value }) : value }));
+        };
+    }
+    /**
+     * Helper that wraps the cell in <div> or <a>,
+     * optionally placing icons left/right.
+     */
+    function renderContent(config, value, content, position) {
+        return (_jsx("div", { style: { display: "flex", alignItems: "center" }, className: "flex w-full", children: config.linkClasses ? (_jsxs("a", { href: "#", className: `flex ${config.linkClasses}`, onClick: (e) => e.stopPropagation(), children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) : (_jsxs(_Fragment, { children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) }));
+    }
+    // Build columns, mapping each "raw config" through `transformBackendConfig`
+    const columns = columnTitles.map((title, i) => {
+        const accessor = accessors[i];
+        const key = `col${i + 1}`;
+        // 1) Find the raw config from your backend array
+        const rawBackendConfig = columnConfigs.find((c) => c.key === key) || {
+            key,
+            type: "DEFAULT",
+        };
+        console.log("[LIB] rawBackendConfig for", key, ":", rawBackendConfig);
+        // 2) Convert booleans => library fields
+        const config = transformBackendConfig(rawBackendConfig);
+        console.log("[LIB] final config for", key, ":", config);
+        return {
+            Header: title,
+            accessor,
+            Cell: ({ value }) => renderCellContent(config)({ value }),
+        };
+    });
+    console.log("[LIB] final columns:", columns);
+    return columns;
+}
+/**
+ * Helper to generate "col1", "col2", "col3", etc.
+ */
+function generateAccessors(columnTitles) {
+    return columnTitles.map((_, index) => `col${index + 1}`);
+}
+// Named exports
+export { formatTableData, generateAccessors };
+// Default export object (so you can import the entire thing as default if you want)
+export default {
+    formatTableData,
+    generateAccessors,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.98",
+	"version": "1.0.100",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",