@ramesesinc/platform-core 0.1.0

package/dist/components/input/CodeEditor.tsx

@@ -0,0 +1,188 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import Editor from "@monaco-editor/react";
+import UIComponent from "../common/UIComponent";
+import useUIInput, { UIInputProps } from "../common/UIInput";
+//import CopyButton from "../ui/CopyButton";
+
+type CodeEditorType = "sql" | "json" | "java" | "javascript" | "html" | "css" | "typescript" | "xml" | "yaml" | "markdown" | "plaintext";
+
+const languageMap: Record<CodeEditorType, string> = {
+  sql: "sql",
+  json: "json",
+  java: "groovy",
+  javascript: "javascript",
+  html: "html",
+  css: "css",
+  typescript: "typescript",
+  xml: "xml",
+  yaml: "yaml",
+  markdown: "markdown",
+  plaintext: "plaintext",
+};
+
+type CodeEditorProps = UIInputProps & {
+  type?: CodeEditorType;
+  height?: number | string;
+  width?: number | string;
+  readOnly?: boolean;
+  immediate?: boolean;
+  showCopy?: boolean;
+};
+
+const CodeEditor = (props: CodeEditorProps) => {
+  const {
+    type = "plaintext",
+    height = 300,
+    width = "100%",
+    readOnly = false,
+    immediate = true,
+    showCopy = true,
+  } = props ?? {};
+
+  const editorRef = useRef<any>(null);
+  const valueRef = useRef<string>("");
+  const [fontSize, setFontSize] = useState(14);
+  const [error, setError] = useState("");
+
+  const language = languageMap[type] ?? type;
+
+  const onRefresh = () => {
+    setEditorValue(getValue());
+  };
+
+  const { initialValue, getValue, setValue } = useUIInput({ ...props, onRefresh });
+  valueRef.current = initialValue ?? "";
+  const [editorValue, setEditorValue] = useState(valueRef.current);
+
+  // Font size keyboard shortcuts
+  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]);
+
+  // JSON-specific validation
+  const validateJson = (value: string) => {
+    if (!value.trim()) {
+      setError("");
+      return;
+    }
+    try {
+      JSON.parse(value);
+      setError("");
+    } catch (e: any) {
+      setError(e.message);
+    }
+  };
+
+  const handleEditorChange = (value?: string) => {
+    const safeValue = value ?? "";
+    setEditorValue(safeValue);
+
+    if (type === "json") {
+      validateJson(safeValue);
+    }
+
+    if (immediate) {
+      setValue(safeValue);
+    }
+  };
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    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(() => {
+    editorRef.current?.updateOptions({ fontSize });
+  }, [fontSize]);
+
+  /*
+    //<CopyButton
+    //  item={editorValue}
+    //  copySize={15}
+    //  copiedSize={10}
+    //  classNameCopied="!px-[15px] !py-[10px]"
+    ///>
+  */
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="relative w-full bg-white">
+        {showCopy && (
+          <div className="absolute top-2 right-4 z-50">
+          </div>
+        )}
+        <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" && (
+          <p className="text-red-500 text-xs mt-1 px-1">{error}</p>
+        )}
+      </div>
+    </UIComponent>
+  );
+};
+
+export default CodeEditor;

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

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

package/dist/components/input/DateField.js

@@ -0,0 +1,140 @@
+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 DateField = (props) => {
+    const { name, immediate = true, min, max } = props !== null && props !== void 0 ? props : {};
+    const [focused, setFocused] = useState(false);
+    const [showCalendar, setShowCalendar] = useState(false);
+    const inputRef = useRef(null);
+    const calendarRef = 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);
+    // Get current date for calendar navigation - use useMemo or direct calculation
+    const getCurrentDate = () => {
+        if (inputValue && inputValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            // Parse ISO date string as local date to avoid timezone issues
+            const parts = inputValue.split('-');
+            const year = parseInt(parts[0], 10);
+            const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
+            const day = parseInt(parts[2], 10);
+            return new globalThis.Date(year, month, day);
+        }
+        return new globalThis.Date();
+    };
+    const [calendarDate, setCalendarDate] = useState(() => getCurrentDate());
+    const onChange = (e) => {
+        var _a;
+        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        if (text !== inputValue) {
+            valueRef.current = text;
+            setInputValue(text);
+            // Update calendar date when user types a valid date
+            if (text && text.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                const parts = text.split('-');
+                const year = parseInt(parts[0], 10);
+                const month = parseInt(parts[1], 10) - 1;
+                const day = parseInt(parts[2], 10);
+                setCalendarDate(new globalThis.Date(year, month, day));
+            }
+        }
+        if (immediate) {
+            setValue(text);
+        }
+    };
+    const toggleCalendar = () => {
+        setShowCalendar(!showCalendar);
+        if (!showCalendar) {
+            setCalendarDate(getCurrentDate());
+        }
+    };
+    const selectDate = (date) => {
+        const dateString = date.toISOString().split("T")[0];
+        valueRef.current = dateString;
+        setInputValue(dateString);
+        setValue(dateString);
+        setShowCalendar(false);
+    };
+    const previousMonth = () => {
+        const newDate = new globalThis.Date(calendarDate);
+        newDate.setMonth(newDate.getMonth() - 1);
+        setCalendarDate(newDate);
+    };
+    const nextMonth = () => {
+        const newDate = new globalThis.Date(calendarDate);
+        newDate.setMonth(newDate.getMonth() + 1);
+        setCalendarDate(newDate);
+    };
+    // Generate calendar days
+    const generateCalendarDays = () => {
+        const year = calendarDate.getFullYear();
+        const month = calendarDate.getMonth();
+        const firstDay = new globalThis.Date(year, month, 1);
+        const lastDay = new globalThis.Date(year, month + 1, 0);
+        const startingDayOfWeek = firstDay.getDay();
+        const daysInMonth = lastDay.getDate();
+        const days = [];
+        // Add empty cells for days before month starts
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            days.push(null);
+        }
+        // Add days of month
+        for (let day = 1; day <= daysInMonth; day++) {
+            days.push(new globalThis.Date(year, month, day));
+        }
+        return days;
+    };
+    const isSelectedDate = (date) => {
+        if (!inputValue || !inputValue.match(/^\d{4}-\d{2}-\d{2}$/))
+            return false;
+        // Parse ISO date string as local date
+        const parts = inputValue.split('-');
+        const selectedYear = parseInt(parts[0], 10);
+        const selectedMonth = parseInt(parts[1], 10) - 1;
+        const selectedDay = parseInt(parts[2], 10);
+        return (date.getDate() === selectedDay &&
+            date.getMonth() === selectedMonth &&
+            date.getFullYear() === selectedYear);
+    };
+    const isToday = (date) => {
+        const today = new globalThis.Date();
+        return (date.getDate() === today.getDate() &&
+            date.getMonth() === today.getMonth() &&
+            date.getFullYear() === today.getFullYear());
+    };
+    const monthNames = [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ];
+    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const calendarDays = generateCalendarDays();
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "date", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className, min: min, max: max }), _jsx("button", { type: "button", onClick: toggleCalendar, className: "border rounded px-3 py-1 bg-white hover:bg-gray-50", children: "\uD83D\uDCC5" })] }), showCalendar && (_jsxs("div", { ref: calendarRef, className: "absolute z-10 mt-1 bg-white border rounded shadow-lg p-4", style: { minWidth: "280px" }, children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("button", { type: "button", onClick: previousMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25C0" }), _jsxs("div", { className: "font-semibold", children: [monthNames[calendarDate.getMonth()], " ", calendarDate.getFullYear()] }), _jsx("button", { type: "button", onClick: nextMonth, className: "px-2 py-1 hover:bg-gray-100 rounded", children: "\u25B6" })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => (_jsx("div", { className: "text-center text-xs font-medium text-gray-600 py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+                                if (!date) {
+                                    return _jsx("div", { className: "aspect-square" }, index);
+                                }
+                                const selected = isSelectedDate(date);
+                                const today = isToday(date);
+                                return (_jsx("button", { type: "button", onClick: () => selectDate(date), className: `
+                      aspect-square flex items-center justify-center rounded text-sm
+                      ${selected ? "bg-blue-500 text-white font-semibold" : ""}
+                      ${today && !selected ? "border-2 border-blue-500" : ""}
+                      ${!selected && !today ? "hover:bg-gray-100" : ""}
+                    `, children: date.getDate() }, index));
+                            }) }), _jsx("div", { className: "mt-4 flex justify-end", children: _jsx("button", { type: "button", onClick: () => setShowCalendar(false), className: "px-3 py-1 text-sm border rounded hover:bg-gray-50", children: "Close" }) })] }))] }) })));
+};
+export default DateField;

package/dist/components/input/DateField.tsx

@@ -0,0 +1,274 @@
+import { useRef, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import useUIInput, { UIInputProps } from "../common/UIInput";
+
+type DateProps = UIInputProps & {
+  required?: boolean;
+  immediate?: boolean;
+  min?: string; // ISO date string
+  max?: string; // ISO date string
+};
+
+const DateField = (props: DateProps) => {
+  const { name, immediate = true, min, max } = props ?? {};
+  const [focused, setFocused] = useState(false);
+  const [showCalendar, setShowCalendar] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const calendarRef = useRef<HTMLDivElement | 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);
+
+  // Get current date for calendar navigation - use useMemo or direct calculation
+  const getCurrentDate = () => {
+    if (inputValue && inputValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
+      // Parse ISO date string as local date to avoid timezone issues
+      const parts = inputValue.split('-');
+      const year = parseInt(parts[0], 10);
+      const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
+      const day = parseInt(parts[2], 10);
+      return new globalThis.Date(year, month, day);
+    }
+    return new globalThis.Date();
+  };
+
+  const [calendarDate, setCalendarDate] = useState(() => getCurrentDate());
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value ?? "";
+    
+    if (text !== inputValue) {
+      valueRef.current = text;
+      setInputValue(text);
+      
+      // Update calendar date when user types a valid date
+      if (text && text.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        const parts = text.split('-');
+        const year = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10) - 1;
+        const day = parseInt(parts[2], 10);
+        setCalendarDate(new globalThis.Date(year, month, day));
+      }
+    }
+
+    if (immediate) {
+      setValue(text);
+    }
+  };
+
+  const toggleCalendar = () => {
+    setShowCalendar(!showCalendar);
+    if (!showCalendar) {
+      setCalendarDate(getCurrentDate());
+    }
+  };
+
+  const selectDate = (date: globalThis.Date) => {
+    const dateString = date.toISOString().split("T")[0];
+    valueRef.current = dateString;
+    setInputValue(dateString);
+    setValue(dateString);
+    setShowCalendar(false);
+  };
+
+  const previousMonth = () => {
+    const newDate = new globalThis.Date(calendarDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    setCalendarDate(newDate);
+  };
+
+  const nextMonth = () => {
+    const newDate = new globalThis.Date(calendarDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    setCalendarDate(newDate);
+  };
+
+  // Generate calendar days
+  const generateCalendarDays = () => {
+    const year = calendarDate.getFullYear();
+    const month = calendarDate.getMonth();
+    
+    const firstDay = new globalThis.Date(year, month, 1);
+    const lastDay = new globalThis.Date(year, month + 1, 0);
+    const startingDayOfWeek = firstDay.getDay();
+    const daysInMonth = lastDay.getDate();
+
+    const days: (globalThis.Date | null)[] = [];
+    
+    // Add empty cells for days before month starts
+    for (let i = 0; i < startingDayOfWeek; i++) {
+      days.push(null);
+    }
+    
+    // Add days of month
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push(new globalThis.Date(year, month, day));
+    }
+
+    return days;
+  };
+
+  const isSelectedDate = (date: globalThis.Date) => {
+    if (!inputValue || !inputValue.match(/^\d{4}-\d{2}-\d{2}$/)) return false;
+    // Parse ISO date string as local date
+    const parts = inputValue.split('-');
+    const selectedYear = parseInt(parts[0], 10);
+    const selectedMonth = parseInt(parts[1], 10) - 1;
+    const selectedDay = parseInt(parts[2], 10);
+    
+    return (
+      date.getDate() === selectedDay &&
+      date.getMonth() === selectedMonth &&
+      date.getFullYear() === selectedYear
+    );
+  };
+
+  const isToday = (date: globalThis.Date) => {
+    const today = new globalThis.Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
+
+  const monthNames = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ];
+
+  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+  const calendarDays = generateCalendarDays();
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="relative">
+        <div className="flex gap-1">
+          <input
+            type="date"
+            ref={inputRef}
+            onChange={onChange}
+            value={inputValue}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            className={className}
+            min={min}
+            max={max}
+          />
+          <button
+            type="button"
+            onClick={toggleCalendar}
+            className="border rounded px-3 py-1 bg-white hover:bg-gray-50"
+          >
+            📅
+          </button>
+        </div>
+
+        {showCalendar && (
+          <div
+            ref={calendarRef}
+            className="absolute z-10 mt-1 bg-white border rounded shadow-lg p-4"
+            style={{ minWidth: "280px" }}
+          >
+            {/* Calendar Header */}
+            <div className="flex justify-between items-center mb-4">
+              <button
+                type="button"
+                onClick={previousMonth}
+                className="px-2 py-1 hover:bg-gray-100 rounded"
+              >
+                ◀
+              </button>
+              <div className="font-semibold">
+                {monthNames[calendarDate.getMonth()]} {calendarDate.getFullYear()}
+              </div>
+              <button
+                type="button"
+                onClick={nextMonth}
+                className="px-2 py-1 hover:bg-gray-100 rounded"
+              >
+                ▶
+              </button>
+            </div>
+
+            {/* Day Names */}
+            <div className="grid grid-cols-7 gap-1 mb-2">
+              {dayNames.map((day) => (
+                <div
+                  key={day}
+                  className="text-center text-xs font-medium text-gray-600 py-1"
+                >
+                  {day}
+                </div>
+              ))}
+            </div>
+
+            {/* Calendar Days */}
+            <div className="grid grid-cols-7 gap-1">
+              {calendarDays.map((date, index) => {
+                if (!date) {
+                  return <div key={index} className="aspect-square" />;
+                }
+
+                const selected = isSelectedDate(date);
+                const today = isToday(date);
+
+                return (
+                  <button
+                    key={index}
+                    type="button"
+                    onClick={() => selectDate(date)}
+                    className={`
+                      aspect-square flex items-center justify-center rounded text-sm
+                      ${selected ? "bg-blue-500 text-white font-semibold" : ""}
+                      ${today && !selected ? "border-2 border-blue-500" : ""}
+                      ${!selected && !today ? "hover:bg-gray-100" : ""}
+                    `}
+                  >
+                    {date.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Close Button */}
+            <div className="mt-4 flex justify-end">
+              <button
+                type="button"
+                onClick={() => setShowCalendar(false)}
+                className="px-3 py-1 text-sm border rounded hover:bg-gray-50"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </UIComponent>
+  );
+};
+
+export default DateField;

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

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

package/dist/components/input/DayPicker.js

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

package/dist/components/input/DayPicker.tsx

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

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

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