@ramesesinc/platform-core 0.1.0

package/dist/components/input/Select.tsx

@@ -0,0 +1,78 @@
+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.d.ts

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

package/dist/components/input/SqlCode.js

@@ -0,0 +1,121 @@
+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 SqlCode = (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 validateSql = (value) => {
+        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) => {
+        if (readOnly)
+            return;
+        const safeValue = value !== null && value !== void 0 ? value : "";
+        setEditorValue(safeValue);
+        setValue(safeValue); // SQL is always a string, write through immediately
+        validateSql(safeValue);
+    };
+    const handleEditorDidMount = (editor, monaco) => {
+        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 (_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: "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" },
+                    } }, "sql-code-editor"), error && !readOnly && _jsx("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })] }) })));
+};
+export default SqlCode;

package/dist/components/input/SqlCode.tsx

@@ -0,0 +1,162 @@
+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.d.ts

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

package/dist/components/input/StringDecision.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => {
+    const { name } = props !== null && props !== void 0 ? props : {};
+    const [inputOp, setInputOp] = useState("");
+    const [inputValue, setInputValue] = useState("");
+    const pageContext = usePageContext();
+    const binding = pageContext === null || pageContext === void 0 ? void 0 : 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) => {
+        setInputOp(e.target.value);
+    };
+    const handleChangeValue = (e) => {
+        setInputValue(e.target.value);
+    };
+    useEffect(() => {
+        if (name && inputOp && inputValue) {
+            pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, { [inputOp]: inputValue });
+        }
+        else if (name && (!inputOp || !inputValue)) {
+            pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, null);
+        }
+    }, [name, inputOp, inputValue, pageContext, binding]);
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "flex gap-4 items-center justify-center", children: [_jsxs("select", { value: inputOp, onChange: handleChangeOperator, className: selectClassName, children: [_jsx("option", { value: "", children: "Select operator" }), operators.map((op) => (_jsx("option", { value: op.value, children: op.label }, op.value)))] }), _jsx("input", { type: "text", value: inputValue, onChange: handleChangeValue, className: inputClassName, placeholder: "Enter value" })] }) })));
+};
+export default StringDecision;

package/dist/components/input/StringDecision.tsx

@@ -0,0 +1,64 @@
+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.d.ts

@@ -0,0 +1,7 @@
+import { UIInputProps } from "../common/UIInput";
+type TextFieldProps = UIInputProps & {
+    required?: boolean;
+    immediate?: boolean;
+};
+declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/components/input/Text.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const TextField = (props) => {
+    const { name, immediate = true } = props !== null && props !== void 0 ? props : {};
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+    const valueRef = useRef("");
+    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(Object.assign(Object.assign({}, props), { onRefresh }));
+    valueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : "";
+    const [inputValue, setInputValue] = useState(valueRef.current);
+    const onChange = (e) => {
+        var _a;
+        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        if (text !== inputValue) {
+            valueRef.current = text;
+            setInputValue(valueRef.current);
+        }
+        if (immediate) {
+            setValue(text);
+        }
+    };
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("input", { type: "text", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className }) })));
+};
+export default TextField;

package/dist/components/input/Text.tsx

@@ -0,0 +1,57 @@
+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.d.ts

@@ -0,0 +1,8 @@
+import { UIInputProps } from "../common/UIInput";
+type YearPickerProps = UIInputProps & {
+    min?: number;
+    max?: number;
+    immediate?: boolean;
+};
+declare const YearPicker: (props: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default YearPicker;

package/dist/components/input/YearPicker.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const YearPicker = (props) => {
+    const { min = 1900, max, immediate = true } = props !== null && props !== void 0 ? props : {};
+    const valueRef = useRef("");
+    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(Object.assign(Object.assign({}, props), { onRefresh }));
+    valueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : "";
+    const [inputValue, setInputValue] = useState(valueRef.current);
+    const handleChange = (e) => {
+        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 (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("div", { className: "flex flex-col gap-1", children: _jsxs("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", children: [_jsx("option", { value: "", children: "Select year" }), years.map((year) => (_jsx("option", { value: year, children: year }, year)))] }) }) })));
+};
+export default YearPicker;