@ramesesinc/platform-core 0.1.0

package/dist/components/input/JsonCode.tsx

@@ -0,0 +1,205 @@
+import Editor from "@monaco-editor/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import CopyButton from "../../lib/components/CopyButton";
+import UIComponent from "../common/UIComponent";
+import useUIInput, { UIInputProps } from "../common/UIInput";
+
+type JsonCodeProps = UIInputProps & {
+  height?: number | string;
+  width?: number | string;
+  showCopy?: boolean;
+  onParsed?: (value: any) => void;
+};
+
+const JsonCode = (props: JsonCodeProps) => {
+  const { height = 300, width = "100%", showCopy = true, onParsed } = props ?? {};
+
+  const pageContext = usePageContext();
+  const editorRef = useRef<any>(null);
+  const [fontSize, setFontSize] = useState(14);
+  const [error, setError] = useState("");
+  const [readOnly, setReadOnly] = useState(true);
+
+  const stringify = (val: any): string => {
+    if (val == null) return "";
+
+    try {
+      return typeof val === "string" ? val : JSON.stringify(val, null, 2);
+    } catch (error) {
+      console.error("Error stringifying value:", error);
+      return "";
+    }
+  };
+
+  const onRefresh = () => {
+    const val = getValue();
+    updateValue(val);
+  };
+
+  // Initialize once from pageContext — no buffering
+  const { initialValue, getValue, setValue } = useUIInput({ ...props, onRefresh });
+
+  const [editorValue, setEditorValue] = useState<string | null>(stringify(initialValue));
+
+  const updateValue = (value: any) => {
+    if (error != null && error !== "") {
+      // no updating of editor value if there's an error
+      return;
+    }
+
+    const strValue = stringify(value);
+    let strEditorValue = "";
+    try {
+      const parsedEditorValue = JSON.parse(editorValue ?? "");
+      strEditorValue = stringify(parsedEditorValue);
+    } catch (e) {}
+
+    const matched = strValue === strEditorValue;
+    // console.log("updateValue ", { value, strValue, strEditorValue, matched });
+
+    if (!matched) {
+      setEditorValue(strValue);
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = pageContext?.dependsTo("editable", (val: any) => {
+      const isEditable = val === true || val === "true";
+      setReadOnly(!isEditable);
+      setError("");
+
+      if (!isEditable) {
+        const val = getValue();
+        updateValue(val);
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      // console.log("unmount");
+      editorRef.current = null;
+    };
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    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]);
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ fontSize });
+  }, [fontSize]);
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ readOnly, domReadOnly: readOnly });
+  }, [readOnly]);
+
+  const handleEditorChange = (value?: string) => {
+    if (readOnly) return;
+    const safeValue = value ?? "";
+    setEditorValue(safeValue);
+
+    try {
+      const parsed = JSON.parse(safeValue);
+      setValue(parsed); // write through to pageContext immediately
+      setError("");
+      onParsed?.(parsed);
+    } catch (e: any) {
+      setError(e.message);
+    }
+  };
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor;
+
+    try {
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        allowComments: false,
+        schemas: [],
+        enableSchemaRequest: true,
+      });
+    } catch (e) {
+      console.warn("Monaco JSON diagnostics setup failed:", e);
+    }
+
+    editor.updateOptions({
+      minimap: { enabled: false },
+      fontSize,
+      lineNumbers: "on",
+      renderWhitespace: "selection",
+      folding: false,
+      bracketPairColorization: { enabled: true },
+      formatOnPaste: false,
+      formatOnType: false,
+    });
+  };
+
+  // useEffect(() => {
+  //   console.log("editor value changed", editorValue, getValue());
+  // }, [editorValue]);
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="relative w-full bg-white">
+        {showCopy && (
+          <div className="absolute top-2 right-4 z-50">
+            <CopyButton item={editorValue ?? ""} copySize={15} copiedSize={10} classNameCopied="!px-[15px] !py-[10px]" />
+          </div>
+        )}
+        <Editor
+          key="json-code-viewer"
+          height={height}
+          width={width}
+          language="json"
+          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: false,
+            bracketPairColorization: { enabled: true },
+            formatOnType: false,
+            formatOnPaste: false,
+            scrollBeyondLastLine: false,
+            smoothScrolling: true,
+            cursorBlinking: "smooth",
+            renderLineHighlight: "all",
+            scrollbar: { vertical: "visible", horizontal: "visible" },
+          }}
+        />
+        {error && !readOnly && <p className="text-red-500 text-xs mt-1 px-1">{error}</p>}
+      </div>
+    </UIComponent>
+  );
+};
+
+export default JsonCode;

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

@@ -0,0 +1,2 @@
+declare const MonthPicker: () => import("react/jsx-runtime").JSX.Element;
+export default MonthPicker;

package/dist/components/input/MonthPicker.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const MonthPicker = () => {
+    return _jsx("div", { children: "MonthPicker" });
+};
+export default MonthPicker;

package/dist/components/input/MonthPicker.tsx

@@ -0,0 +1,5 @@
+const MonthPicker = () => {
+  return <div>MonthPicker</div>;
+};
+
+export default MonthPicker;

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

@@ -0,0 +1,8 @@
+import { UIInputProps } from "../common/UIInput";
+type ScriptCodeProps = UIInputProps & {
+    height?: number | string;
+    width?: number | string;
+    showCopy?: boolean;
+};
+declare const ScriptCode: (props: ScriptCodeProps) => import("react/jsx-runtime").JSX.Element;
+export default ScriptCode;

package/dist/components/input/ScriptCode.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import CopyButton from "../../lib/components/CopyButton";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const ScriptCode = (props) => {
+    const { height = 300, width = "100%", showCopy = true } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const editorRef = useRef(null);
+    const [fontSize, setFontSize] = useState(14);
+    const [error, setError] = useState("");
+    const [readOnly, setReadOnly] = useState(true);
+    const onRefresh = () => {
+        const val = getValue();
+        setEditorValue(val !== null && val !== void 0 ? val : "");
+    };
+    const { initialValue, getValue, setValue } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    const [editorValue, setEditorValue] = useState(() => initialValue !== null && initialValue !== void 0 ? initialValue : "");
+    useEffect(() => {
+        const unsubscribe = pageContext === null || pageContext === void 0 ? void 0 : pageContext.dependsTo("editable", (val) => {
+            var _a;
+            const isEditable = val === true || val === "true";
+            setReadOnly(!isEditable);
+            if (!isEditable) {
+                setEditorValue((_a = getValue()) !== null && _a !== void 0 ? _a : "");
+                setError("");
+            }
+        });
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        return () => {
+            editorRef.current = null;
+        };
+    }, []);
+    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]);
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ fontSize });
+    }, [fontSize]);
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ readOnly, domReadOnly: readOnly });
+    }, [readOnly]);
+    const validateScript = (code) => {
+        if (!code.trim()) {
+            setError("");
+            return;
+        }
+        const errors = [];
+        const lines = code.split("\n");
+        let braceCount = 0;
+        let parenCount = 0;
+        let bracketCount = 0;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const lineNum = i + 1;
+            for (const char of line) {
+                if (char === "{")
+                    braceCount++;
+                if (char === "}")
+                    braceCount--;
+                if (char === "(")
+                    parenCount++;
+                if (char === ")")
+                    parenCount--;
+                if (char === "[")
+                    bracketCount++;
+                if (char === "]")
+                    bracketCount--;
+            }
+            if (line.trim().match(/^(let|const|var)\s+\w+\s*=.*[^;{}\s]$/)) {
+                errors.push(`Line ${lineNum}: Possible missing semicolon`);
+            }
+            if (line.includes("console.log") && !line.trim().endsWith(";") && !line.trim().endsWith("{")) {
+                errors.push(`Line ${lineNum}: Missing semicolon after console.log`);
+            }
+        }
+        if (braceCount !== 0)
+            errors.push(`Unmatched braces: ${braceCount > 0 ? "missing closing" : "missing opening"} brace(s)`);
+        if (parenCount !== 0)
+            errors.push(`Unmatched parentheses: ${parenCount > 0 ? "missing closing" : "missing opening"}`);
+        if (bracketCount !== 0)
+            errors.push(`Unmatched brackets: ${bracketCount > 0 ? "missing closing" : "missing opening"}`);
+        setError(errors.length > 0 ? errors.join("\n• ") : "");
+    };
+    const handleEditorChange = (value) => {
+        if (readOnly)
+            return;
+        const safeValue = value !== null && value !== void 0 ? value : "";
+        setEditorValue(safeValue);
+        setValue(safeValue); // JavaScript is always a string, write through immediately
+        validateScript(safeValue);
+    };
+    const handleEditorDidMount = (editor) => {
+        editorRef.current = editor;
+        editor.updateOptions({
+            minimap: { enabled: false },
+            fontSize,
+            lineNumbers: "on",
+            renderWhitespace: "selection",
+            folding: true,
+            bracketPairColorization: { enabled: true },
+            formatOnPaste: true,
+            formatOnType: true,
+        });
+    };
+    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", children: _jsx(CopyButton, { item: editorValue, copySize: 15, copiedSize: 10, classNameCopied: "!px-[15px] !py-[10px]" }) })), _jsx(Editor, { height: height, width: width, language: "javascript", 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",
+                        autoIndent: "full",
+                        suggestOnTriggerCharacters: true,
+                        quickSuggestions: true,
+                        parameterHints: { enabled: true },
+                        scrollbar: { vertical: "visible", horizontal: "visible" },
+                    } }, "script-code-editor"), error && !readOnly && _jsxs("div", { className: "mt-2 text-sm text-red-500 whitespace-pre-wrap", children: ["\u2022 ", error] })] }) })));
+};
+export default ScriptCode;

package/dist/components/input/ScriptCode.tsx

@@ -0,0 +1,195 @@
+import Editor from "@monaco-editor/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import CopyButton from "../../lib/components/CopyButton";
+import UIComponent from "../common/UIComponent";
+import useUIInput, { UIInputProps } from "../common/UIInput";
+
+type ScriptCodeProps = UIInputProps & {
+  height?: number | string;
+  width?: number | string;
+  showCopy?: boolean;
+};
+
+const ScriptCode = (props: ScriptCodeProps) => {
+  const { height = 300, width = "100%", showCopy = true } = props ?? {};
+
+  const pageContext = usePageContext();
+  const editorRef = useRef<any>(null);
+  const [fontSize, setFontSize] = useState(14);
+  const [error, setError] = useState("");
+  const [readOnly, setReadOnly] = useState(true);
+
+  const onRefresh = () => {
+    const val = getValue();
+    setEditorValue(val ?? "");
+  };
+
+  const { initialValue, getValue, setValue } = useUIInput({ ...props, onRefresh });
+
+  const [editorValue, setEditorValue] = useState(() => initialValue ?? "");
+
+  useEffect(() => {
+    const unsubscribe = pageContext?.dependsTo("editable", (val: any) => {
+      const isEditable = val === true || val === "true";
+      setReadOnly(!isEditable);
+
+      if (!isEditable) {
+        setEditorValue(getValue() ?? "");
+        setError("");
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      editorRef.current = null;
+    };
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    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]);
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ fontSize });
+  }, [fontSize]);
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ readOnly, domReadOnly: readOnly });
+  }, [readOnly]);
+
+  const validateScript = (code: string) => {
+    if (!code.trim()) {
+      setError("");
+      return;
+    }
+
+    const errors: string[] = [];
+    const lines = code.split("\n");
+
+    let braceCount = 0;
+    let parenCount = 0;
+    let bracketCount = 0;
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const lineNum = i + 1;
+
+      for (const char of line) {
+        if (char === "{") braceCount++;
+        if (char === "}") braceCount--;
+        if (char === "(") parenCount++;
+        if (char === ")") parenCount--;
+        if (char === "[") bracketCount++;
+        if (char === "]") bracketCount--;
+      }
+
+      if (line.trim().match(/^(let|const|var)\s+\w+\s*=.*[^;{}\s]$/)) {
+        errors.push(`Line ${lineNum}: Possible missing semicolon`);
+      }
+
+      if (line.includes("console.log") && !line.trim().endsWith(";") && !line.trim().endsWith("{")) {
+        errors.push(`Line ${lineNum}: Missing semicolon after console.log`);
+      }
+    }
+
+    if (braceCount !== 0) errors.push(`Unmatched braces: ${braceCount > 0 ? "missing closing" : "missing opening"} brace(s)`);
+
+    if (parenCount !== 0) errors.push(`Unmatched parentheses: ${parenCount > 0 ? "missing closing" : "missing opening"}`);
+
+    if (bracketCount !== 0) errors.push(`Unmatched brackets: ${bracketCount > 0 ? "missing closing" : "missing opening"}`);
+
+    setError(errors.length > 0 ? errors.join("\n• ") : "");
+  };
+
+  const handleEditorChange = (value?: string) => {
+    if (readOnly) return;
+    const safeValue = value ?? "";
+    setEditorValue(safeValue);
+    setValue(safeValue); // JavaScript is always a string, write through immediately
+    validateScript(safeValue);
+  };
+
+  const handleEditorDidMount = (editor: any) => {
+    editorRef.current = editor;
+
+    editor.updateOptions({
+      minimap: { enabled: false },
+      fontSize,
+      lineNumbers: "on",
+      renderWhitespace: "selection",
+      folding: true,
+      bracketPairColorization: { enabled: true },
+      formatOnPaste: true,
+      formatOnType: true,
+    });
+  };
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="relative w-full bg-white">
+        {showCopy && (
+          <div className="absolute top-2 right-4 z-50">
+            <CopyButton item={editorValue} copySize={15} copiedSize={10} classNameCopied="!px-[15px] !py-[10px]" />
+          </div>
+        )}
+        <Editor
+          key="script-code-editor"
+          height={height}
+          width={width}
+          language="javascript"
+          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",
+            autoIndent: "full",
+            suggestOnTriggerCharacters: true,
+            quickSuggestions: true,
+            parameterHints: { enabled: true },
+            scrollbar: { vertical: "visible", horizontal: "visible" },
+          }}
+        />
+        {error && !readOnly && <div className="mt-2 text-sm text-red-500 whitespace-pre-wrap">• {error}</div>}
+      </div>
+    </UIComponent>
+  );
+};
+
+export default ScriptCode;

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

@@ -0,0 +1,14 @@
+import { UIInputProps } from "../common/UIInput";
+type SelectOption = {
+    label: string;
+    value: string;
+};
+type SelectFieldProps = UIInputProps & {
+    required?: boolean;
+    immediate?: boolean;
+    options?: SelectOption[];
+    placeholder?: string;
+    onChange?: (value: string) => void;
+};
+declare const SelectField: (props: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectField;

package/dist/components/input/Select.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const SelectField = (props) => {
+    const { immediate = true, options = [], placeholder } = props !== null && props !== void 0 ? props : {};
+    const [focused, setFocused] = useState(false);
+    const selectRef = useRef(null);
+    const valueRef = useRef("");
+    const className = "border rounded px-2 py-1 w-full";
+    const handleFocus = () => {
+        setFocused(true);
+    };
+    const handleBlur = () => {
+        if (!immediate) {
+            setValue(selectValue);
+        }
+        setFocused(false);
+    };
+    const onRefresh = () => {
+        setSelectValue(getValue());
+    };
+    const { initialValue, getValue, setValue, binding } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    valueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : "";
+    const [selectValue, setSelectValue] = useState(valueRef.current);
+    const onChange = (e) => {
+        var _a, _b;
+        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        if (text !== selectValue) {
+            valueRef.current = text;
+            setSelectValue(valueRef.current);
+        }
+        if (immediate) {
+            setValue(text);
+        }
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, text);
+    };
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("select", { ref: selectRef, onChange: onChange, value: selectValue, onFocus: handleFocus, onBlur: handleBlur, className: className, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }) })));
+};
+export default SelectField;