@ramesesinc/platform-core 0.1.5 → 0.1.8

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;

package/dist/components/input/StringDecision.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from "react";
-import { usePageContext } from "../../core/PageContext";
-import UIComponent from "../common/UIComponent";
-
-const operators = [
-  { label: "Matches", value: "matches" },
-  { label: "Equals", value: "equals" },
-  { label: "Not Equals", value: "neq" },
-];
-
-const StringDecision = (props: Record<string, any>) => {
-  const { name } = props ?? {};
-  const [inputOp, setInputOp] = useState("");
-  const [inputValue, setInputValue] = useState("");
-  const pageContext = usePageContext();
-  const binding = pageContext?.binding;
-
-  const inputClassName = "border rounded px-2 py-1 w-full";
-  const selectClassName =
-    "px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed";
-
-  const handleChangeOperator = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setInputOp(e.target.value);
-  };
-
-  const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  useEffect(() => {
-    if (name && inputOp && inputValue) {
-      pageContext?.set(name, { [inputOp]: inputValue });
-    } else if (name && (!inputOp || !inputValue)) {
-      pageContext?.set(name, null);
-    }
-  }, [name, inputOp, inputValue, pageContext, binding]);
-
-  return (
-    <UIComponent {...(props ?? {})}>
-      <div className="flex gap-4 items-center justify-center">
-        <select value={inputOp} onChange={handleChangeOperator} className={selectClassName}>
-          <option value="">Select operator</option>
-          {operators.map((op) => (
-            <option key={op.value} value={op.value}>
-              {op.label}
-            </option>
-          ))}
-        </select>
-        {/* <Select
-          options={operators}
-          placeholder="Select operator"
-          onChange={(value: string) => setInputOp(value)}
-          name={""}
-          onRefresh={function (): void {
-            throw new Error("Function not implemented.");
-          }}
-        /> */}
-        <input type="text" value={inputValue} onChange={handleChangeValue} className={inputClassName} placeholder="Enter value" />
-      </div>
-    </UIComponent>
-  );
-};
-
-export default StringDecision;

package/dist/components/input/Text.tsx

@@ -1,57 +0,0 @@
-import { useRef, useState } from "react";
-import UIComponent from "../common/UIComponent";
-import useUIInput, { UIInputProps } from "../common/UIInput";
-
-type TextFieldProps = UIInputProps & {
-  required?: boolean;
-  immediate?: boolean;
-};
-
-const TextField = (props: TextFieldProps) => {
-  const { name, immediate = true } = props ?? {};
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef<HTMLInputElement | 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(inputValue);
-    }
-    setFocused(false);
-  };
-
-  const onRefresh = () => {
-    setInputValue(getValue());
-  };
-
-  const { initialValue, getValue, setValue, binding } = useUIInput({ ...props, onRefresh });
-  valueRef.current = initialValue ?? "";
-  const [inputValue, setInputValue] = useState(valueRef.current);
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value ?? "";
-
-    if (text !== inputValue) {
-      valueRef.current = text;
-      setInputValue(valueRef.current);
-    }
-
-    if (immediate) {
-      setValue(text);
-    }
-  };
-
-  return (
-    <UIComponent {...(props ?? {})}>
-      <input type="text" ref={inputRef} onChange={onChange} value={inputValue} onFocus={handleFocus} onBlur={handleBlur} className={className} />
-    </UIComponent>
-  );
-};
-
-export default TextField;

package/dist/components/input/YearPicker.tsx

@@ -1,81 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import UIComponent from "../common/UIComponent";
-import useUIInput, { UIInputProps } from "../common/UIInput";
-
-type YearPickerProps = UIInputProps & {
-  min?: number;
-  max?: number;
-  immediate?: boolean;
-};
-
-const YearPicker = (props: YearPickerProps) => {
-  const { min = 1900, max, immediate = true } = props ?? {};
-  const valueRef = useRef<string>("");
-  const [focused, setFocused] = useState(false);
-
-  // Set default max to current year if not provided
-  const currentYear = new Date().getFullYear();
-  const maxYear = max || currentYear;
-
-  // Generate array of years (descending order)
-  const years = Array.from({ length: maxYear - min + 1 }, (_, i) => maxYear - i);
-
-  const onRefresh = () => {
-    setInputValue(getValue());
-  };
-
-  const { initialValue, getValue, setValue } = useUIInput({ ...props, onRefresh });
-  valueRef.current = initialValue ?? "";
-  const [inputValue, setInputValue] = useState(valueRef.current);
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const year = e.target.value;
-
-    if (year !== inputValue) {
-      valueRef.current = year;
-      setInputValue(valueRef.current);
-    }
-
-    if (immediate) {
-      setValue(year);
-    }
-  };
-
-  const handleFocus = () => {
-    setFocused(true);
-  };
-
-  const handleBlur = () => {
-    if (!immediate) {
-      setValue(inputValue);
-    }
-    setFocused(false);
-  };
-
-  useEffect(() => {
-    // console.log("inputValue", inputValue);
-  }, [inputValue]);
-
-  return (
-    <UIComponent {...(props ?? {})}>
-      <div className="flex flex-col gap-1">
-        <select
-          value={inputValue}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
-        >
-          <option value="">Select year</option>
-          {years.map((year) => (
-            <option key={year} value={year}>
-              {year}
-            </option>
-          ))}
-        </select>
-      </div>
-    </UIComponent>
-  );
-};
-
-export default YearPicker;