@ramesesinc/platform-core 0.1.5 → 0.1.8

package/dist/components/input/DateField.tsx

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

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

package/dist/components/input/HtmlCode.tsx

@@ -1,203 +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 HtmlCodeProps = UIInputProps & {
-  height?: number | string;
-  width?: number | string;
-  showCopy?: boolean;
-};
-
-const HtmlCode = (props: HtmlCodeProps) => {
-  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 validateHtml = (code: string) => {
-    if (!code.trim()) {
-      setError("");
-      return;
-    }
-
-    const errors: string[] = [];
-    const lines = code.split("\n");
-    const tagStack: { tagName: string; line: number }[] = [];
-    const tagRegex = /<\/?([a-zA-Z0-9-]+)(\s[^>]*)?>/g;
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const matches = [...line.matchAll(tagRegex)];
-
-      for (const match of matches) {
-        const tagName = match[1].toLowerCase();
-        const isClosing = match[0].startsWith("</");
-        const selfClosing = /\/>$/.test(match[0]) || ["br", "hr", "img", "input", "meta", "link"].includes(tagName);
-
-        if (!isClosing && !selfClosing) {
-          tagStack.push({ tagName, line: i + 1 });
-        } else if (isClosing) {
-          const lastTag = tagStack.pop();
-          if (!lastTag || lastTag.tagName !== tagName) {
-            errors.push(`Line ${i + 1}: Unmatched closing tag </${tagName}>`);
-          }
-        }
-      }
-
-      if (i === 0 && !line.toLowerCase().includes("<!doctype")) {
-        if (code.includes("<html")) {
-          errors.push("Missing <!DOCTYPE html> declaration at the top");
-        }
-      }
-
-      if (i === lines.length - 1 && code.includes("<html")) {
-        if (!code.includes("<head")) errors.push("Missing <head> tag");
-        if (!code.includes("<body")) errors.push("Missing <body> tag");
-      }
-    }
-
-    if (tagStack.length > 0) {
-      const unclosed = tagStack.map((t) => `<${t.tagName}> (opened on line ${t.line})`).join(", ");
-      errors.push(`Unclosed tag(s): ${unclosed}`);
-    }
-
-    setError(errors.length > 0 ? errors.join("\n• ") : "");
-  };
-
-  const handleEditorChange = (value?: string) => {
-    if (readOnly) return;
-    const safeValue = value ?? "";
-    setEditorValue(safeValue);
-    setValue(safeValue); // write through immediately — HTML is always a string
-    validateHtml(safeValue);
-  };
-
-  const handleEditorDidMount = (editor: any, monaco: any) => {
-    editorRef.current = editor;
-
-    editor.updateOptions({
-      minimap: { enabled: false },
-      fontSize,
-      lineNumbers: "on",
-      renderWhitespace: "selection",
-      folding: true,
-      bracketPairColorization: { enabled: true },
-      formatOnPaste: true,
-      formatOnType: true,
-      wordWrap: "on",
-      autoClosingBrackets: "always",
-      autoClosingQuotes: "always",
-      suggestOnTriggerCharacters: 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="html-code-editor"
-          height={height}
-          width={width}
-          language="html"
-          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: "on",
-            lineNumbers: "on",
-            folding: true,
-            bracketPairColorization: { enabled: true },
-            formatOnPaste: true,
-            formatOnType: true,
-            scrollBeyondLastLine: false,
-            smoothScrolling: true,
-            cursorBlinking: "smooth",
-            renderLineHighlight: "all",
-            autoClosingBrackets: "always",
-            autoClosingQuotes: "always",
-            suggestOnTriggerCharacters: true,
-            scrollbar: { vertical: "visible", horizontal: "visible" },
-          }}
-        />
-        {error && !readOnly && <p className="text-red-500 text-xs mt-1 px-1 whitespace-pre-line">{error}</p>}
-      </div>
-    </UIComponent>
-  );
-};
-
-export default HtmlCode;

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;