@ramesesinc/platform-core 0.1.6 → 0.1.8

package/dist/components/input/JsonCode.tsx

@@ -1,205 +0,0 @@
-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.tsx

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

package/dist/components/input/ScriptCode.tsx

@@ -1,195 +0,0 @@
-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.tsx

@@ -1,78 +0,0 @@
-import { useRef, useState } from "react";
-import UIComponent from "../common/UIComponent";
-import useUIInput, { 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;
-};
-
-const SelectField = (props: SelectFieldProps) => {
-  const { immediate = true, options = [], placeholder } = props ?? {};
-  const [focused, setFocused] = useState(false);
-  const selectRef = useRef<HTMLSelectElement | null>(null);
-  const valueRef = useRef<string>("");
-
-  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({ ...props, onRefresh });
-  valueRef.current = initialValue ?? "";
-  const [selectValue, setSelectValue] = useState(valueRef.current);
-
-  const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const text = e.target.value ?? "";
-
-    if (text !== selectValue) {
-      valueRef.current = text;
-      setSelectValue(valueRef.current);
-    }
-
-    if (immediate) {
-      setValue(text);
-    }
-
-    props.onChange?.(text);
-  };
-
-  return (
-    <UIComponent {...(props ?? {})}>
-      <select ref={selectRef} onChange={onChange} value={selectValue} onFocus={handleFocus} onBlur={handleBlur} className={className}>
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-    </UIComponent>
-  );
-};
-
-export default SelectField;

package/dist/components/input/SqlCode.tsx

@@ -1,162 +0,0 @@
-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 SqlCodeProps = UIInputProps & {
-  height?: number | string;
-  width?: number | string;
-  showCopy?: boolean;
-};
-
-const SqlCode = (props: SqlCodeProps) => {
-  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 validateSql = (value: string) => {
-    if (!value.trim()) {
-      setError("");
-      return;
-    }
-    const forbidden = /drop\s+table|delete\s+from/gi;
-    if (forbidden.test(value)) {
-      setError("Dangerous SQL statement detected.");
-    } else {
-      setError("");
-    }
-  };
-
-  const handleEditorChange = (value?: string) => {
-    if (readOnly) return;
-    const safeValue = value ?? "";
-    setEditorValue(safeValue);
-    setValue(safeValue); // SQL is always a string, write through immediately
-    validateSql(safeValue);
-  };
-
-  const handleEditorDidMount = (editor: any, monaco: any) => {
-    editorRef.current = editor;
-
-    monaco.languages.register({ id: "sql" });
-
-    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="sql-code-editor"
-          height={height}
-          width={width}
-          language="sql"
-          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 && !readOnly && <p className="text-red-500 text-xs mt-1 px-1">{error}</p>}
-      </div>
-    </UIComponent>
-  );
-};
-
-export default SqlCode;