@ramesesinc/platform-core 0.1.0

package/dist/components/view/ComponentView.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { DynamicComponent } from "../../core/DynamicComponent";
+import { usePageContext } from "../../core/PageContext";
+import useDependHandler from "../../core/UIDependHandler";
+import UIComponent from "../common/UIComponent";
+const ComponentView = (props) => {
+    const { id, name, depends, component } = props !== null && props !== void 0 ? props : {};
+    const [comp, setComp] = useState(null);
+    const [error, setError] = useState("");
+    const [forceUpdate, setForceUpdate] = useState({});
+    const { getComponentCache } = useApp();
+    const pageContext = usePageContext();
+    const getPreferredName = () => {
+        if (name == null || name.trim() === "") {
+            return depends;
+        }
+        return name;
+    };
+    const loadComponentById = async () => {
+        if (id != null && id.trim() !== "") {
+            const cache = await getComponentCache(id);
+            const template = cache.template;
+            setComp(template);
+            return template;
+        }
+        return null;
+    };
+    const loadComponentByName = () => {
+        const preferredName = getPreferredName();
+        if (preferredName != null && preferredName.trim() !== "") {
+            const info = pageContext === null || pageContext === void 0 ? void 0 : pageContext.get(preferredName);
+            const { component, attr = {} } = info !== null && info !== void 0 ? info : {};
+            if (component == null || component.trim() === "") {
+                return null;
+            }
+            return _jsx(DynamicComponent, { config: { component, attr } });
+        }
+        return null;
+    };
+    const loadStaticComponent = () => {
+        if (typeof component === "string") {
+            return _jsx(DynamicComponent, { config: { component } });
+        }
+        return component;
+    };
+    const onRefresh = () => {
+        setForceUpdate({});
+    };
+    useDependHandler({ name: depends, onRefresh });
+    useEffect(() => {
+        var _a;
+        const prefName = (_a = name !== null && name !== void 0 ? name : depends) !== null && _a !== void 0 ? _a : "";
+        const tmpl = loadStaticComponent();
+        if (tmpl != null) {
+            setComp(tmpl);
+            return;
+        }
+        loadComponentById()
+            .then((template) => {
+            if (template != null) {
+                setComp(template);
+                return;
+            }
+            const tmpl2 = loadComponentByName();
+            if (tmpl2 != null) {
+                setComp(tmpl2);
+            }
+        })
+            .catch((err) => {
+            console.log("error", err);
+            setError(err.message);
+        });
+    }, [forceUpdate]);
+    return _jsx(UIComponent, Object.assign({}, props, { children: error ? _jsx("div", { children: error }) : _jsx("div", { children: comp }) }));
+};
+export default ComponentView;

package/dist/components/view/ComponentView.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { DynamicComponent } from "../../core/DynamicComponent";
+import { usePageContext } from "../../core/PageContext";
+import useDependHandler from "../../core/UIDependHandler";
+import UIComponent, { UIComponentProps } from "../common/UIComponent";
+
+interface ComponentViewProps extends UIComponentProps {
+  // use for dynamic component rendering
+  id?: string;
+
+  // use to get value from page context
+  depends?: string;
+
+  // use to statically set the actual component
+  component?: React.ReactNode;
+}
+
+const ComponentView = (props: ComponentViewProps) => {
+  const { id, name, depends, component } = props ?? {};
+  const [comp, setComp] = useState<React.ReactNode | null>(null);
+  const [error, setError] = useState("");
+  const [forceUpdate, setForceUpdate] = useState({});
+  const { getComponentCache } = useApp();
+  const pageContext = usePageContext();
+
+  const getPreferredName = () => {
+    if (name == null || name.trim() === "") {
+      return depends;
+    }
+    return name;
+  };
+
+  const loadComponentById = async () => {
+    if (id != null && id.trim() !== "") {
+      const cache = await getComponentCache(id);
+      const template: React.ReactNode = cache.template;
+      setComp(template);
+      return template;
+    }
+    return null;
+  };
+
+  const loadComponentByName = () => {
+    const preferredName = getPreferredName();
+    if (preferredName != null && preferredName.trim() !== "") {
+      const info = pageContext?.get(preferredName) as { component: string; attr?: Record<string, any> };
+      const { component, attr = {} } = info ?? {};
+
+      if (component == null || component.trim() === "") {
+        return null;
+      }
+
+      return <DynamicComponent config={{ component, attr }} />;
+    }
+    return null;
+  };
+
+  const loadStaticComponent = () => {
+    if (typeof component === "string") {
+      return <DynamicComponent config={{ component }} />;
+    }
+    return component;
+  };
+
+  const onRefresh = () => {
+    setForceUpdate({});
+  };
+
+  useDependHandler({ name: depends, onRefresh });
+
+  useEffect(() => {
+    const prefName = name ?? depends ?? "";
+
+    const tmpl = loadStaticComponent();
+    if (tmpl != null) {
+      setComp(tmpl);
+      return;
+    }
+
+    loadComponentById()
+      .then((template) => {
+        if (template != null) {
+          setComp(template);
+          return;
+        }
+
+        const tmpl2 = loadComponentByName();
+        if (tmpl2 != null) {
+          setComp(tmpl2);
+        }
+      })
+      .catch((err) => {
+        console.log("error", err);
+        setError(err.message);
+      });
+  }, [forceUpdate]);
+
+  return <UIComponent {...props}>{error ? <div>{error}</div> : <div>{comp}</div>}</UIComponent>;
+};
+
+export default ComponentView;

package/dist/components/view/FilterView.d.ts

@@ -0,0 +1,2 @@
+declare const FilterView: (props: Record<string, any>) => import("react/jsx-runtime").JSX.Element | null;
+export default FilterView;

package/dist/components/view/FilterView.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import VPanel from "../../layouts/VPanel";
+import { renderListDef } from "../../lib/utils/SectionProvider";
+const FilterView = (props) => {
+    const { items = [] } = props !== null && props !== void 0 ? props : {};
+    if (items.length === 0)
+        return null;
+    const buildPanel = () => {
+        const comps = renderListDef(items);
+        return _jsx(VPanel, { gap: 8, children: comps });
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { children: buildPanel() }) }));
+};
+export default FilterView;

package/dist/components/view/FilterView.tsx

@@ -0,0 +1,21 @@
+import VPanel from "../../layouts/VPanel";
+import { renderListDef } from "../../lib/utils/SectionProvider";
+
+const FilterView = (props: Record<string, any>) => {
+  const { items = [] } = props ?? {};
+
+  if (items.length === 0) return null;
+
+  const buildPanel = () => {
+    const comps = renderListDef(items);
+    return <VPanel gap={8}>{comps}</VPanel>;
+  };
+
+  return (
+    <>
+      <div>{buildPanel()}</div>
+    </>
+  );
+};
+
+export default FilterView;

package/dist/components/view/HtmlForm.d.ts

@@ -0,0 +1,7 @@
+type HtmlFormProps = {
+    label?: string;
+    depends?: string;
+    templateid?: string;
+};
+declare const HtmlForm: (props: HtmlFormProps) => import("react/jsx-runtime").JSX.Element;
+export default HtmlForm;

package/dist/components/view/HtmlForm.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicComponent } from "../../core/DynamicComponent";
+import { useApp } from "../../core/AppContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import { useEffect, useMemo, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import React from "react";
+// ─────────────────────────────────────────────────────────────────────────────
+// Attr Parser
+// Handles both strict JSON {"key":"value"} and JS object literals {key: "value"}
+// ─────────────────────────────────────────────────────────────────────────────
+function parseAttr(attrStr) {
+    if (!attrStr)
+        return {};
+    try {
+        return JSON.parse(attrStr);
+    }
+    catch (_a) {
+        try {
+            // eslint-disable-next-line no-new-func
+            return new Function(`"use strict"; return (${attrStr})`)();
+        }
+        catch (_b) {
+            console.warn("HtmlForm: could not parse attr →", attrStr);
+            return {};
+        }
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// DOM Attribute → React Prop mapper
+// ─────────────────────────────────────────────────────────────────────────────
+const ATTR_MAP = {
+    class: "className",
+    colspan: "colSpan",
+    rowspan: "rowSpan",
+    for: "htmlFor",
+    tabindex: "tabIndex",
+    readonly: "readOnly",
+    maxlength: "maxLength",
+    cellpadding: "cellPadding",
+    cellspacing: "cellSpacing",
+};
+function styleStringToObject(styleStr) {
+    const style = {};
+    styleStr.split(";").forEach((rule) => {
+        const [prop, val] = rule.split(":").map((s) => s.trim());
+        if (prop && val) {
+            const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            style[camel] = val;
+        }
+    });
+    return style;
+}
+function domAttrsToProps(el) {
+    var _a;
+    const props = {};
+    for (const attr of Array.from(el.attributes)) {
+        if (["component", "attr"].includes(attr.name))
+            continue;
+        const reactName = (_a = ATTR_MAP[attr.name]) !== null && _a !== void 0 ? _a : attr.name;
+        props[reactName] = attr.name === "style"
+            ? styleStringToObject(attr.value)
+            : attr.value;
+    }
+    return props;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Table structural elements that cannot contain whitespace text nodes
+// ─────────────────────────────────────────────────────────────────────────────
+const TABLE_ELEMENTS = new Set(["table", "thead", "tbody", "tfoot", "tr", "colgroup"]);
+// ─────────────────────────────────────────────────────────────────────────────
+// DOM Walker
+// Turns a DOM tree into a React element tree.
+// Sentinel <span component="X" attr="..."> becomes <DynamicComponent config={...} />
+// Everything else becomes a plain React element.
+// ─────────────────────────────────────────────────────────────────────────────
+let _keyIndex = 0;
+const nextKey = () => `hf_${_keyIndex++}`;
+function walkNode(node, parentTag) {
+    var _a;
+    if (node.nodeType === Node.TEXT_NODE) {
+        // Whitespace-only text nodes are invalid inside table structural elements
+        // and cause React's validateDOMNesting warning.
+        if (parentTag && TABLE_ELEMENTS.has(parentTag) && !((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
+            return null;
+        }
+        return node.textContent || null;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const tag = el.tagName.toLowerCase();
+        const componentName = el.getAttribute("component");
+        // ── Sentinel span → DynamicComponent ──────────────────────────────────
+        if (tag === "span" && componentName) {
+            const attr = parseAttr(el.getAttribute("attr"));
+            const config = { component: componentName, attr };
+            return (_jsx(DynamicComponent, { config: config }, nextKey()));
+        }
+        // ── Regular element → recurse ──────────────────────────────────────────
+        const props = Object.assign(Object.assign({}, domAttrsToProps(el)), { key: nextKey() });
+        const children = Array.from(el.childNodes)
+            .map((child) => walkNode(child, tag)) // pass current tag as parentTag
+            .filter((n) => n !== null && n !== undefined);
+        return children.length > 0
+            ? React.createElement(tag, props, ...children)
+            : React.createElement(tag, props);
+    }
+    return null;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// HtmlForm
+// ─────────────────────────────────────────────────────────────────────────────
+const HtmlForm = (props) => {
+    const { depends, templateid } = props !== null && props !== void 0 ? props : {};
+    const [htmlTemplate, setHtmlTemplate] = useState("");
+    const { tenant, module } = useApp();
+    // ── Load raw HTML from html_forms ──────────────────────────────────────────
+    const loadHtmlContent = async (tempid) => {
+        var _a;
+        try {
+            const record = await localAPI.useMgmt(tenant, module).get("html_templates", tempid);
+            setHtmlTemplate((_a = record === null || record === void 0 ? void 0 : record.htmlCode) !== null && _a !== void 0 ? _a : "");
+        }
+        catch (error) {
+            console.error("HtmlForm: error loading html_forms →", error);
+            setHtmlTemplate("");
+        }
+    };
+    useDependHandler({ name: depends, onRefresh: () => { } });
+    useEffect(() => {
+        if (templateid === null || templateid === void 0 ? void 0 : templateid.trim())
+            loadHtmlContent(templateid);
+    }, [templateid]);
+    // ── Walk DOM → React tree (only re-runs when htmlTemplate changes) ─────────
+    const reactTree = useMemo(() => {
+        if (!htmlTemplate)
+            return null;
+        _keyIndex = 0;
+        const doc = new DOMParser().parseFromString(htmlTemplate, "text/html");
+        return Array.from(doc.body.childNodes).map((child) => walkNode(child));
+    }, [htmlTemplate]);
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("div", { className: "h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto", children: reactTree }) })));
+};
+export default HtmlForm;

package/dist/components/view/HtmlForm.tsx

@@ -0,0 +1,186 @@
+import { DynamicComponent } from "../../core/DynamicComponent";
+import { useApp } from "../../core/AppContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import { useEffect, useMemo, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import React from "react";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+type HtmlFormProps = {
+  label?: string;
+  depends?: string;
+  templateid?: string;
+};
+
+type SentinelConfig = {
+  component: string;
+  attr: any;
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Attr Parser
+// Handles both strict JSON {"key":"value"} and JS object literals {key: "value"}
+// ─────────────────────────────────────────────────────────────────────────────
+
+function parseAttr(attrStr: string | null): any {
+  if (!attrStr) return {};
+  try {
+    return JSON.parse(attrStr);
+  } catch {
+    try {
+      // eslint-disable-next-line no-new-func
+      return new Function(`"use strict"; return (${attrStr})`)();
+    } catch {
+      console.warn("HtmlForm: could not parse attr →", attrStr);
+      return {};
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DOM Attribute → React Prop mapper
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ATTR_MAP: Record<string, string> = {
+  class: "className",
+  colspan: "colSpan",
+  rowspan: "rowSpan",
+  for: "htmlFor",
+  tabindex: "tabIndex",
+  readonly: "readOnly",
+  maxlength: "maxLength",
+  cellpadding: "cellPadding",
+  cellspacing: "cellSpacing",
+};
+
+function styleStringToObject(styleStr: string): Record<string, string> {
+  const style: Record<string, string> = {};
+  styleStr.split(";").forEach((rule) => {
+    const [prop, val] = rule.split(":").map((s) => s.trim());
+    if (prop && val) {
+      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      style[camel] = val;
+    }
+  });
+  return style;
+}
+
+function domAttrsToProps(el: Element): Record<string, any> {
+  const props: Record<string, any> = {};
+  for (const attr of Array.from(el.attributes)) {
+    if (["component", "attr"].includes(attr.name)) continue;
+    const reactName = ATTR_MAP[attr.name] ?? attr.name;
+    props[reactName] = attr.name === "style"
+      ? styleStringToObject(attr.value)
+      : attr.value;
+  }
+  return props;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Table structural elements that cannot contain whitespace text nodes
+// ─────────────────────────────────────────────────────────────────────────────
+
+const TABLE_ELEMENTS = new Set(["table", "thead", "tbody", "tfoot", "tr", "colgroup"]);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DOM Walker
+// Turns a DOM tree into a React element tree.
+// Sentinel <span component="X" attr="..."> becomes <DynamicComponent config={...} />
+// Everything else becomes a plain React element.
+// ─────────────────────────────────────────────────────────────────────────────
+
+let _keyIndex = 0;
+const nextKey = () => `hf_${_keyIndex++}`;
+
+function walkNode(node: ChildNode, parentTag?: string): React.ReactNode {
+  if (node.nodeType === Node.TEXT_NODE) {
+    // Whitespace-only text nodes are invalid inside table structural elements
+    // and cause React's validateDOMNesting warning.
+    if (parentTag && TABLE_ELEMENTS.has(parentTag) && !node.textContent?.trim()) {
+      return null;
+    }
+    return node.textContent || null;
+  }
+
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node as Element;
+    const tag = el.tagName.toLowerCase();
+    const componentName = el.getAttribute("component");
+
+    // ── Sentinel span → DynamicComponent ──────────────────────────────────
+    if (tag === "span" && componentName) {
+      const attr: any = parseAttr(el.getAttribute("attr"));
+      const config: SentinelConfig = { component: componentName, attr };
+      return (
+        <DynamicComponent
+          key={nextKey()}
+          config={config}
+        />
+      );
+    }
+
+    // ── Regular element → recurse ──────────────────────────────────────────
+    const props = { ...domAttrsToProps(el), key: nextKey() };
+    const children: React.ReactNode[] = Array.from(el.childNodes)
+      .map((child) => walkNode(child, tag))  // pass current tag as parentTag
+      .filter((n) => n !== null && n !== undefined);
+
+    return children.length > 0
+      ? React.createElement(tag, props, ...children)
+      : React.createElement(tag, props);
+  }
+
+  return null;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// HtmlForm
+// ─────────────────────────────────────────────────────────────────────────────
+
+const HtmlForm = (props: HtmlFormProps) => {
+  const { depends, templateid } = props ?? {};
+
+  const [htmlTemplate, setHtmlTemplate] = useState("");
+
+  const { tenant, module } = useApp();
+
+  // ── Load raw HTML from html_forms ──────────────────────────────────────────
+  const loadHtmlContent = async (tempid: string) => {
+    try {
+      const record = await localAPI.useMgmt(tenant!, module!).get("html_templates", tempid);
+      setHtmlTemplate(record?.htmlCode ?? "");
+    } catch (error) {
+      console.error("HtmlForm: error loading html_forms →", error);
+      setHtmlTemplate("");
+    }
+  };
+
+  useDependHandler({ name: depends, onRefresh: () => {} });
+
+  useEffect(() => {
+    if (templateid?.trim()) loadHtmlContent(templateid);
+  }, [templateid]);
+
+  // ── Walk DOM → React tree (only re-runs when htmlTemplate changes) ─────────
+  const reactTree = useMemo(() => {
+    if (!htmlTemplate) return null;
+    _keyIndex = 0;
+    const doc = new DOMParser().parseFromString(htmlTemplate, "text/html");
+    return Array.from(doc.body.childNodes).map((child) => walkNode(child));
+  }, [htmlTemplate]);
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto">
+        {reactTree}
+      </div>
+    </UIComponent>
+  );
+};
+
+export default HtmlForm;

package/dist/components/view/HtmlView.d.ts

@@ -0,0 +1,9 @@
+type HtmlLabelProps = {
+    label?: string;
+    depends?: string;
+    expr?: string;
+    templateid?: string;
+    data?: Record<string, any>;
+};
+declare const Html: (props: HtmlLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default Html;

package/dist/components/view/HtmlView.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import { useEffect, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { usePageContext } from "../../core/PageContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { render } from "../../lib/utils/ExprUtil";
+import UIComponent from "../common/UIComponent";
+const Html = (props) => {
+    const { depends, expr, templateid } = props !== null && props !== void 0 ? props : {};
+    const [htmlTemplate, setHtmlTemplate] = useState(""); // Store the raw template
+    const [renderedHtml, setRenderedHtml] = useState(""); // Store the rendered HTML
+    const [resData, setResData] = useState({});
+    const pageContext = usePageContext();
+    const binding = pageContext === null || pageContext === void 0 ? void 0 : pageContext.binding;
+    const { tenant, module } = useApp();
+    const loadHtmlContent = async (tempid) => {
+        var _a;
+        try {
+            const htmlContent = await localAPI.useMgmt(tenant, module).get("html_templates", tempid);
+            if (htmlContent != null) {
+                // Store the raw template
+                setHtmlTemplate(htmlContent.htmlCode);
+                // Fetch data from API
+                const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
+                // Render the template with the data
+                const rendered = render(htmlContent.htmlCode, data);
+                setRenderedHtml(rendered);
+            }
+            else {
+                setHtmlTemplate("");
+                setRenderedHtml("");
+            }
+        }
+        catch (error) {
+            console.error("Error loading HTML template:", error);
+            setHtmlTemplate("");
+            setRenderedHtml("");
+        }
+    };
+    // Render the expression using ExprUtil
+    const renderExpression = (expression) => {
+        var _a;
+        if (!expression)
+            return "";
+        try {
+            const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getData()) !== null && _a !== void 0 ? _a : {};
+            return render(expression, { data });
+        }
+        catch (error) {
+            console.error("Expression render error:", error);
+            return expression;
+        }
+    };
+    const initialValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
+    const [value, setValue] = useState(initialValue);
+    const onRefresh = () => {
+        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
+        setValue(newValue);
+        // Re-render the HTML template if data changes
+        if (htmlTemplate && resData) {
+            const rendered = render(htmlTemplate, resData);
+            setRenderedHtml(rendered);
+        }
+    };
+    useDependHandler({ name: depends, onRefresh });
+    useEffect(() => {
+        if (templateid != null && templateid.trim() !== "") {
+            loadHtmlContent(templateid);
+        }
+    }, [templateid]);
+    useEffect(() => {
+        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
+        setValue(newValue);
+    }, [binding === null || binding === void 0 ? void 0 : binding.raw, expr]);
+    // Re-render template when data changes
+    useEffect(() => {
+        if (htmlTemplate && resData && Object.keys(resData).length > 0) {
+            const rendered = render(htmlTemplate, resData);
+            setRenderedHtml(rendered);
+        }
+    }, [resData, htmlTemplate]);
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("div", { className: "h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto", dangerouslySetInnerHTML: { __html: renderedHtml } }) })));
+};
+export default Html;