@ramesesinc/platform-core 0.1.0

package/dist/components/common/UIComponent.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+
+export type UIComponentProps = {
+  name?: string;
+  title?: string;
+  depends?: string;
+  visibleWhen?: string;
+  children?: React.ReactNode;
+  labelPosition?: "top" | "left";
+  style?: string;
+};
+
+const UIComponent = (props: UIComponentProps) => {
+  const { name, title, depends, children, visibleWhen, labelPosition = "top", style } = props ?? {};
+  const pageContext = usePageContext();
+
+  const evaluateVisible = (): boolean => {
+    if (!visibleWhen) return true;
+    try {
+      const context = pageContext?.getAllData() ?? {};
+      const stripped = visibleWhen.replace(/^\s*\{([\s\S]*)\}\s*$/, "$1").trim();
+      const jsExpr = stripped.replace(/\{\{([\s\S]+?)\}\}/g, (_, path) => {
+        const val = path
+          .trim()
+          .split(".")
+          .reduce((obj: any, key: string) => obj?.[key], context);
+        return JSON.stringify(val ?? null);
+      });
+      // eslint-disable-next-line no-new-func
+      return Boolean(new Function(`return (${jsExpr})`)());
+    } catch (e) {
+      console.warn("visibleWhen eval error:", e);
+      return true;
+    }
+  };
+
+  const [visible, setVisible] = useState(() => evaluateVisible());
+
+  const dependHandler = (val: any) => {
+    // for visibleWhen
+    setVisible(evaluateVisible());
+  };
+
+  useEffect(() => {
+    const unsubscribe = pageContext?.dependsTo(depends || "", dependHandler);
+    return unsubscribe;
+  }, [depends]);
+
+  // Re-evaluate when binding changes (same pattern as Label)
+  useEffect(() => {
+    setVisible(evaluateVisible());
+  }, [pageContext?.binding?.raw, visibleWhen]);
+
+  if (!visible) return null;
+
+  // Top layout (default)
+  if (labelPosition === "top") {
+    return (
+      <div className="flex flex-col gap-1 mb-4">
+        {title && (
+          <label htmlFor={name} className="text-sm font-medium text-gray-700">
+            {title}
+          </label>
+        )}
+        {children}
+      </div>
+    );
+  }
+
+  // Left layout
+  return (
+    <div className="flex items-center gap-2 mb-4">
+      {title && (
+        <label htmlFor={name} className="text-sm font-medium text-gray-700 min-w-[50px]">
+          {title}
+        </label>
+      )}
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+};
+
+export default UIComponent;

package/dist/components/common/UIInput.d.ts

@@ -0,0 +1,12 @@
+export type UIInputProps = {
+    name: string;
+    depends?: string;
+    onRefresh: () => void;
+};
+declare const useUIInput: (props: UIInputProps) => {
+    initialValue: any;
+    setValue: (value: any) => void;
+    getValue: () => any;
+    binding: import("@ramesesinc/client").BindingModel;
+};
+export default useUIInput;

package/dist/components/common/UIInput.js

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { usePageContext } from "../../core/PageContext";
+const useUIInput = (props) => {
+    var _a;
+    const { name, depends, onRefresh } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    // console.log("useIUInput re-render", name, depends, onRefresh);
+    const binding = pageContext === null || pageContext === void 0 ? void 0 : pageContext.binding;
+    const getValue = () => {
+        var _a;
+        const val = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.get(name)) !== null && _a !== void 0 ? _a : "";
+        // console.log("ui input, get value", name, val, pageContext.getData());
+        return val;
+    };
+    const setValue = (value) => {
+        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, value);
+        // console.log("after set value", name, pageContext?.get(name));
+    };
+    const initialValue = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.get(name)) !== null && _a !== void 0 ? _a : "";
+    // console.log("ui input init", name, initialValue);
+    useEffect(() => {
+        if (onRefresh) {
+            onRefresh();
+        }
+    }, [binding === null || binding === void 0 ? void 0 : binding.raw, initialValue]);
+    const dependHandler = (val) => {
+        if (onRefresh) {
+            onRefresh();
+        }
+    };
+    useEffect(() => {
+        const unsubscribe = pageContext === null || pageContext === void 0 ? void 0 : pageContext.dependsTo(depends || "", dependHandler);
+        return unsubscribe;
+    }, [depends]);
+    return { initialValue, setValue, getValue, binding };
+};
+export default useUIInput;

package/dist/components/common/UIInput.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import { usePageContext } from "../../core/PageContext";
+
+export type UIInputProps = {
+  name: string;
+  depends?: string;
+  onRefresh: () => void;
+};
+
+const useUIInput = (props: UIInputProps) => {
+  const { name, depends, onRefresh } = props ?? {};
+  const pageContext = usePageContext();
+  // console.log("useIUInput re-render", name, depends, onRefresh);
+  const binding = pageContext?.binding;
+
+  const getValue = () => {
+    const val = pageContext?.get(name) ?? "";
+    // console.log("ui input, get value", name, val, pageContext.getData());
+    return val;
+  };
+
+  const setValue = (value: any) => {
+    pageContext?.set(name, value);
+    // console.log("after set value", name, pageContext?.get(name));
+  };
+
+  const initialValue = pageContext?.get(name) ?? "";
+  // console.log("ui input init", name, initialValue);
+  useEffect(() => {
+    if (onRefresh) {
+      onRefresh();
+    }
+  }, [binding?.raw, initialValue]);
+
+  const dependHandler = (val: any) => {
+    if (onRefresh) {
+      onRefresh();
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = pageContext?.dependsTo(depends || "", dependHandler);
+    return unsubscribe;
+  }, [depends]);
+
+  return { initialValue, setValue, getValue, binding };
+};
+
+export default useUIInput;

package/dist/components/common/UIMenu.d.ts

@@ -0,0 +1,23 @@
+export type MenuItem = {
+    title: string;
+    page?: string;
+    icon?: React.ReactNode | string;
+    mode?: string;
+};
+export type MenuGroup = {
+    title: string;
+    icon?: React.ReactNode | string;
+    items: MenuItem[];
+};
+export type UIMenuProps = {
+    items?: Record<string, any>[];
+    data?: Record<string, any>;
+    menugroup?: string;
+    opt?: Record<string, any>;
+};
+declare const useUIMenu: (props: UIMenuProps) => {
+    items: MenuGroup[];
+    loading: boolean;
+    error: string | null;
+};
+export default useUIMenu;

package/dist/components/common/UIMenu.js

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+const useUIMenu = (props) => {
+    const { items: itemMenus, data, menugroup, opt = {} } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const [menus, setMenus] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // 1️⃣ Static items
+        if (Array.isArray(itemMenus) && itemMenus.length > 0) {
+            // Check if already grouped (has items array) or flat
+            const isGrouped = itemMenus.every((item) => Array.isArray(item.items));
+            if (isGrouped) {
+                setMenus(itemMenus);
+            }
+            else {
+                setMenus([{ title: "", items: itemMenus }]); // ✅ wrap in single group
+            }
+            return;
+        }
+        const fetchMenus = async () => {
+            var _a, _b;
+            setLoading(true);
+            setError(null);
+            try {
+                // 2️⃣ Custom API
+                if (data === null || data === void 0 ? void 0 : data.api) {
+                    const res = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(data.api, (_a = data.params) !== null && _a !== void 0 ? _a : {}));
+                    setMenus(Array.isArray(res) ? res : []);
+                    return;
+                }
+                // 3️⃣ Menugroup — fetch categories + items, map to MenuGroup[]
+                if (menugroup != null) {
+                    const menuGroup = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.getMgmt("menugroups", menugroup));
+                    const { categories = [] } = menuGroup || {};
+                    const menusRes = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.postMgmt("menus", "list", {
+                        filter: { menugroup },
+                        sort: { sortorder: 1 },
+                    }));
+                    const sorted = Array.isArray(menusRes) ? [...menusRes].sort((a, b) => { var _a, _b; return ((_a = a.sortorder) !== null && _a !== void 0 ? _a : 0) - ((_b = b.sortorder) !== null && _b !== void 0 ? _b : 0); }) : [];
+                    const mappedItems = categories.map((cat) => ({
+                        title: cat.title,
+                        icon: cat.icon,
+                        items: sorted.filter((m) => m.category === cat.id),
+                    }));
+                    setMenus(mappedItems);
+                }
+            }
+            catch (err) {
+                setError((_b = err === null || err === void 0 ? void 0 : err.message) !== null && _b !== void 0 ? _b : "Failed to load menus");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchMenus();
+    }, [itemMenus, data, menugroup]);
+    return { items: menus, loading, error };
+};
+export default useUIMenu;

package/dist/components/common/UIMenu.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+
+export type MenuItem = {
+  title: string;
+  page?: string;
+  icon?: React.ReactNode | string;
+  mode?: string;
+};
+
+export type MenuGroup = {
+  title: string;
+  icon?: React.ReactNode | string;
+  items: MenuItem[];
+};
+
+export type UIMenuProps = {
+  items?: Record<string, any>[];
+  data?: Record<string, any>;
+  menugroup?: string;
+  opt?: Record<string, any>;
+};
+
+const useUIMenu = (props: UIMenuProps) => {
+  const { items: itemMenus, data, menugroup, opt = {} } = props ?? {};
+
+  const pageContext = usePageContext();
+
+  const [menus, setMenus] = useState<MenuGroup[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // 1️⃣ Static items
+    if (Array.isArray(itemMenus) && itemMenus.length > 0) {
+      // Check if already grouped (has items array) or flat
+      const isGrouped = itemMenus.every((item) => Array.isArray(item.items));
+      if (isGrouped) {
+        setMenus(itemMenus as MenuGroup[]);
+      } else {
+        setMenus([{ title: "", items: itemMenus as MenuItem[] }]); // ✅ wrap in single group
+      }
+      return;
+    }
+
+    const fetchMenus = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // 2️⃣ Custom API
+        if (data?.api) {
+          const res = await pageContext?.execService(data.api, data.params ?? {});
+          setMenus(Array.isArray(res) ? (res as MenuGroup[]) : []);
+          return;
+        }
+
+        // 3️⃣ Menugroup — fetch categories + items, map to MenuGroup[]
+        if (menugroup != null) {
+          const menuGroup = await pageContext?.getMgmt("menugroups", menugroup);
+          const { categories = [] } = menuGroup || {};
+
+          const menusRes = await pageContext?.postMgmt("menus", "list", {
+            filter: { menugroup },
+            sort: { sortorder: 1 },
+          });
+
+          const sorted = Array.isArray(menusRes) ? [...menusRes].sort((a, b) => (a.sortorder ?? 0) - (b.sortorder ?? 0)) : [];
+
+          const mappedItems: MenuGroup[] = categories.map((cat: any) => ({
+            title: cat.title,
+            icon: cat.icon,
+            items: sorted.filter((m: any) => m.category === cat.id),
+          }));
+
+          setMenus(mappedItems);
+        }
+      } catch (err: any) {
+        setError(err?.message ?? "Failed to load menus");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMenus();
+  }, [itemMenus, data, menugroup]);
+
+  return { items: menus, loading, error };
+};
+
+export default useUIMenu;

package/dist/components/index.d.ts

@@ -0,0 +1,37 @@
+export { default as Button } from "./action/Button";
+export { default as DateField } from "./input/DateField";
+export { default as DayPicker } from "./input/DayPicker";
+export { default as MonthPicker } from "./input/MonthPicker";
+export { default as Select } from "./input/Select";
+export { default as Text } from "./input/Text";
+export { default as YearPicker } from "./input/YearPicker";
+export { default as HtmlCode } from "./input/HtmlCode";
+export { default as JsonCode } from "./input/JsonCode";
+export { default as ScriptCode } from "./input/ScriptCode";
+export { default as SqlCode } from "./input/SqlCode";
+export { default as StringDecision } from "./input/StringDecision";
+export { default as TabMenu } from "./list/TabMenu";
+export { default as TreeMenu } from "./list/TreeMenu";
+export { default as Label } from "./output/Label";
+export { default as DataList } from "./table/DataList";
+export { default as ComponentView } from "./view/ComponentView";
+export { default as FilterView } from "./view/FilterView";
+export { default as HtmlForm } from "./view/HtmlForm";
+export { default as HtmlView } from "./view/HtmlView";
+export { default as IFrameView } from "./view/IFrameView";
+export { default as RootView } from "./view/RootView";
+export { default as WizardView } from "./view/WizardView";
+export { default as AlertMessage } from "./action/AlertMessage";
+export { default as DeleteData } from "./action/DeleteData";
+export { default as Edit } from "./action/Edit";
+export { default as ProcessRunner } from "./action/ProcessRunner";
+export { default as Refresh } from "./action/Refresh";
+export { default as SaveData } from "./action/SaveData";
+export { default as SelectData } from "./action/SelectData";
+export { default as LookupPage } from "./action/LookupPage";
+export { default as UpdateContext } from "./action/UpdateContext";
+export { default as ViewBackPage } from "./action/ViewBackPage";
+export { default as ViewPage } from "./action/ViewPage";
+export { default as PageView } from "./view/PageView";
+export { default as IconMenu } from "./list/IconMenu";
+export { default as TxnTaskList } from "./list/TxnTaskList";

package/dist/components/index.js

@@ -0,0 +1,44 @@
+export { default as Button } from "./action/Button";
+//inputs
+export { default as DateField } from "./input/DateField";
+export { default as DayPicker } from "./input/DayPicker";
+export { default as MonthPicker } from "./input/MonthPicker";
+export { default as Select } from "./input/Select";
+export { default as Text } from "./input/Text";
+export { default as YearPicker } from "./input/YearPicker";
+//codes
+export { default as HtmlCode } from "./input/HtmlCode";
+export { default as JsonCode } from "./input/JsonCode";
+export { default as ScriptCode } from "./input/ScriptCode";
+export { default as SqlCode } from "./input/SqlCode";
+//conditions
+export { default as StringDecision } from "./input/StringDecision";
+//export { default as YearPicker } from "./input/YearPicker";
+export { default as TabMenu } from "./list/TabMenu";
+export { default as TreeMenu } from "./list/TreeMenu";
+export { default as Label } from "./output/Label";
+export { default as DataList } from "./table/DataList";
+//views
+export { default as ComponentView } from "./view/ComponentView";
+export { default as FilterView } from "./view/FilterView";
+export { default as HtmlForm } from "./view/HtmlForm";
+export { default as HtmlView } from "./view/HtmlView";
+export { default as IFrameView } from "./view/IFrameView";
+export { default as RootView } from "./view/RootView";
+export { default as WizardView } from "./view/WizardView";
+//actions
+export { default as AlertMessage } from "./action/AlertMessage";
+export { default as DeleteData } from "./action/DeleteData";
+export { default as Edit } from "./action/Edit";
+export { default as ProcessRunner } from "./action/ProcessRunner";
+export { default as Refresh } from "./action/Refresh";
+export { default as SaveData } from "./action/SaveData";
+export { default as SelectData } from "./action/SelectData";
+export { default as LookupPage } from "./action/LookupPage";
+export { default as UpdateContext } from "./action/UpdateContext";
+export { default as ViewBackPage } from "./action/ViewBackPage";
+export { default as ViewPage } from "./action/ViewPage";
+export { default as PageView } from "./view/PageView";
+//lists
+export { default as IconMenu } from "./list/IconMenu";
+export { default as TxnTaskList } from "./list/TxnTaskList";

package/dist/components/index.ts

@@ -0,0 +1,51 @@
+export { default as Button } from "./action/Button";
+//inputs
+export { default as DateField } from "./input/DateField";
+export { default as DayPicker } from "./input/DayPicker";
+
+export { default as MonthPicker } from "./input/MonthPicker";
+export { default as Select } from "./input/Select";
+export { default as Text } from "./input/Text";
+export { default as YearPicker } from "./input/YearPicker";
+
+//codes
+export { default as HtmlCode } from "./input/HtmlCode";
+export { default as JsonCode } from "./input/JsonCode";
+export { default as ScriptCode } from "./input/ScriptCode";
+export { default as SqlCode } from "./input/SqlCode";
+
+//conditions
+export { default as StringDecision } from "./input/StringDecision";
+
+//export { default as YearPicker } from "./input/YearPicker";
+export { default as TabMenu } from "./list/TabMenu";
+export { default as TreeMenu } from "./list/TreeMenu";
+export { default as Label } from "./output/Label";
+export { default as DataList } from "./table/DataList";
+
+//views
+export { default as ComponentView } from "./view/ComponentView";
+export { default as FilterView } from "./view/FilterView";
+export { default as HtmlForm } from "./view/HtmlForm";
+export { default as HtmlView } from "./view/HtmlView";
+export { default as IFrameView } from "./view/IFrameView";
+export { default as RootView } from "./view/RootView";
+export { default as WizardView } from "./view/WizardView";
+//actions
+export { default as AlertMessage } from "./action/AlertMessage";
+export { default as DeleteData } from "./action/DeleteData";
+export { default as Edit } from "./action/Edit";
+export { default as ProcessRunner } from "./action/ProcessRunner";
+export { default as Refresh } from "./action/Refresh";
+export { default as SaveData } from "./action/SaveData";
+export { default as SelectData } from "./action/SelectData";
+
+export { default as LookupPage } from "./action/LookupPage";
+export { default as UpdateContext } from "./action/UpdateContext";
+export { default as ViewBackPage } from "./action/ViewBackPage";
+export { default as ViewPage } from "./action/ViewPage";
+export { default as PageView } from "./view/PageView";
+
+//lists
+export { default as IconMenu } from "./list/IconMenu";
+export { default as TxnTaskList } from "./list/TxnTaskList";

package/dist/components/input/CodeEditor.d.ts

@@ -0,0 +1,12 @@
+import { UIInputProps } from "../common/UIInput";
+type CodeEditorType = "sql" | "json" | "java" | "javascript" | "html" | "css" | "typescript" | "xml" | "yaml" | "markdown" | "plaintext";
+type CodeEditorProps = UIInputProps & {
+    type?: CodeEditorType;
+    height?: number | string;
+    width?: number | string;
+    readOnly?: boolean;
+    immediate?: boolean;
+    showCopy?: boolean;
+};
+declare const CodeEditor: (props: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeEditor;

package/dist/components/input/CodeEditor.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import Editor from "@monaco-editor/react";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const languageMap = {
+    sql: "sql",
+    json: "json",
+    java: "groovy",
+    javascript: "javascript",
+    html: "html",
+    css: "css",
+    typescript: "typescript",
+    xml: "xml",
+    yaml: "yaml",
+    markdown: "markdown",
+    plaintext: "plaintext",
+};
+const CodeEditor = (props) => {
+    var _a;
+    const { type = "plaintext", height = 300, width = "100%", readOnly = false, immediate = true, showCopy = true, } = props !== null && props !== void 0 ? props : {};
+    const editorRef = useRef(null);
+    const valueRef = useRef("");
+    const [fontSize, setFontSize] = useState(14);
+    const [error, setError] = useState("");
+    const language = (_a = languageMap[type]) !== null && _a !== void 0 ? _a : type;
+    const onRefresh = () => {
+        setEditorValue(getValue());
+    };
+    const { initialValue, getValue, setValue } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    valueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : "";
+    const [editorValue, setEditorValue] = useState(valueRef.current);
+    // Font size keyboard shortcuts
+    const handleKeyDown = useCallback((e) => {
+        if (e.ctrlKey && e.key === "=") {
+            e.preventDefault();
+            setFontSize((prev) => Math.min(prev + 1, 40));
+        }
+        if (e.ctrlKey && e.key === "-") {
+            e.preventDefault();
+            setFontSize((prev) => Math.max(prev - 1, 8));
+        }
+        if (e.ctrlKey && e.key === "0") {
+            e.preventDefault();
+            setFontSize(14);
+        }
+    }, []);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    // JSON-specific validation
+    const validateJson = (value) => {
+        if (!value.trim()) {
+            setError("");
+            return;
+        }
+        try {
+            JSON.parse(value);
+            setError("");
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    };
+    const handleEditorChange = (value) => {
+        const safeValue = value !== null && value !== void 0 ? value : "";
+        setEditorValue(safeValue);
+        if (type === "json") {
+            validateJson(safeValue);
+        }
+        if (immediate) {
+            setValue(safeValue);
+        }
+    };
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        if (type === "json") {
+            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                validate: true,
+                allowComments: false,
+                schemas: [],
+                enableSchemaRequest: true,
+            });
+        }
+        editor.updateOptions({
+            minimap: { enabled: false },
+            fontSize,
+            lineNumbers: "on",
+            renderWhitespace: "selection",
+            folding: true,
+            bracketPairColorization: { enabled: true },
+            formatOnPaste: true,
+            formatOnType: true,
+        });
+    };
+    // Sync font size if editor already mounted
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ fontSize });
+    }, [fontSize]);
+    /*
+      //<CopyButton
+      //  item={editorValue}
+      //  copySize={15}
+      //  copiedSize={10}
+      //  classNameCopied="!px-[15px] !py-[10px]"
+      ///>
+    */
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative w-full bg-white", children: [showCopy && (_jsx("div", { className: "absolute top-2 right-4 z-50" })), _jsx(Editor, { height: height, width: width, language: language, value: editorValue, onChange: handleEditorChange, onMount: handleEditorDidMount, theme: "vs-dark", options: {
+                        readOnly,
+                        domReadOnly: readOnly,
+                        padding: { top: 10 },
+                        selectOnLineNumbers: true,
+                        automaticLayout: true,
+                        minimap: { enabled: false },
+                        fontSize,
+                        wordWrap: "off",
+                        lineNumbers: "on",
+                        renderWhitespace: "selection",
+                        folding: true,
+                        bracketPairColorization: { enabled: true },
+                        formatOnPaste: true,
+                        formatOnType: true,
+                        scrollBeyondLastLine: false,
+                        smoothScrolling: true,
+                        cursorBlinking: "smooth",
+                        renderLineHighlight: "all",
+                        scrollbar: { vertical: "visible", horizontal: "visible" },
+                    } }), error && type === "json" && (_jsx("p", { className: "text-red-500 text-xs mt-1 px-1", children: error }))] }) })));
+};
+export default CodeEditor;