@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/widgets/JSONViewer.js

@@ -1,143 +1,289 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { ThemedActivityIndicator } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import { ThemedActivityIndicator, useTheme } from "../theme/index.js";
 import { fontFamilies } from "../theme/typography.js";
-import { useEffect, useMemo, useState } from "react";
+import { Typography } from "../Typography/index.js";
+import React, { useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
-const parseDeepJson = (value) => {
-    if (typeof value === "string") {
-        try {
-            const parsed = JSON.parse(value);
-            return parseDeepJson(parsed);
-        }
-        catch {
-            return value;
-        }
-    }
-    if (Array.isArray(value)) {
-        return value.map(parseDeepJson);
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const parseDeepJson = value => {
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      return parseDeepJson(parsed);
+    } catch {
+      return value;
     }
-    if (value && typeof value === "object") {
-        const result = {};
-        for (const key in value) {
-            result[key] = parseDeepJson(value[key]);
-        }
-        return result;
+  }
+  if (Array.isArray(value)) {
+    return value.map(parseDeepJson);
+  }
+  if (value && typeof value === "object") {
+    const result = {};
+    for (const key in value) {
+      result[key] = parseDeepJson(value[key]);
     }
-    return value;
-};
-const JSON_COLORS = {
-    key: "#0066CC",
-    string: "#008000",
-    number: "#FF8C00",
-    boolean: "#9966CC",
-    null: "#999999",
-    punctuation: "#666666",
+    return result;
+  }
+  return value;
 };
+
+/** What each fragment is; the theme decides its color, so the viewer reads in dark mode. */
+
+function jsonPalette(theme) {
+  return {
+    key: theme.info,
+    string: theme.success,
+    number: theme.warning,
+    boolean: theme.accent,
+    null: theme.text.tertiary,
+    punctuation: theme.text.secondary,
+    warning: theme.warning,
+    text: theme.text.primary
+  };
+}
 const MAX_JSON_SIZE = 500_000; // 500KB límite
 const MAX_LINES = 500; // Máximo 500 líneas con colores
+
 function parseJsonToColoredLines(jsonString) {
-    // Guard 1: check size
-    if (jsonString.length > MAX_JSON_SIZE) {
-        return [
-            {
-                text: `⚠️ JSON muy grande (${(jsonString.length / 1024).toFixed(1)}KB)\n\n`,
-                color: "#FF6600",
-            },
-            { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
-            { text: jsonString, color: "#333333" },
-        ];
-    }
-    const lines = jsonString.split("\n");
-    // Guard 2: check line count
-    if (lines.length > MAX_LINES) {
-        return [
-            {
-                text: `⚠️ JSON muy largo (${lines.length} líneas)\n\n`,
-                color: "#FF6600",
-            },
-            { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
-            { text: jsonString, color: "#333333" },
-        ];
+  // Guard 1: check size
+  if (jsonString.length > MAX_JSON_SIZE) {
+    return [{
+      text: `⚠️ JSON muy grande (${(jsonString.length / 1024).toFixed(1)}KB)\n\n`,
+      role: "warning"
+    }, {
+      text: "Mostrando como texto plano por performance...\n\n",
+      role: "punctuation"
+    }, {
+      text: jsonString,
+      role: "text"
+    }];
+  }
+  const lines = jsonString.split("\n");
+
+  // Guard 2: check line count
+  if (lines.length > MAX_LINES) {
+    return [{
+      text: `⚠️ JSON muy largo (${lines.length} líneas)\n\n`,
+      role: "warning"
+    }, {
+      text: "Mostrando como texto plano por performance...\n\n",
+      role: "punctuation"
+    }, {
+      text: jsonString,
+      role: "text"
+    }];
+  }
+  const coloredLines = [];
+  lines.forEach(line => {
+    // Every `"key": value` line is colored, including the last one of an object (no comma).
+    const keyMatch = line.match(/^(\s*)"([^"]+)":\s*(.+)$/);
+    if (keyMatch) {
+      const indent = keyMatch[1];
+      const key = keyMatch[2];
+      const valueStr = keyMatch[3];
+      coloredLines.push({
+        text: indent,
+        role: "punctuation"
+      }, {
+        text: `"${key}"`,
+        role: "key"
+      }, {
+        text: ": ",
+        role: "punctuation"
+      });
+      if (valueStr.startsWith('"')) {
+        coloredLines.push({
+          text: valueStr + "\n",
+          role: "string"
+        });
+      } else if (!isNaN(Number(valueStr.replace(",", "")))) {
+        coloredLines.push({
+          text: valueStr + "\n",
+          role: "number"
+        });
+      } else if (valueStr.startsWith("true") || valueStr.startsWith("false")) {
+        coloredLines.push({
+          text: valueStr + "\n",
+          role: "boolean"
+        });
+      } else if (valueStr.startsWith("null")) {
+        coloredLines.push({
+          text: valueStr + "\n",
+          role: "null"
+        });
+      } else {
+        coloredLines.push({
+          text: valueStr + "\n",
+          role: "punctuation"
+        });
+      }
+      return;
     }
-    const coloredLines = [];
-    lines.forEach((line) => {
-        const trimmed = line.trim();
-        if (!trimmed ||
-            trimmed === "{" ||
-            trimmed === "}" ||
-            trimmed === "[" ||
-            trimmed === "]" ||
-            trimmed === "," ||
-            trimmed.endsWith(",")) {
-            const keyMatch = line.match(/^(\s*)"([^"]+)":\s*(.+)$/);
-            if (keyMatch) {
-                const indent = keyMatch[1];
-                const key = keyMatch[2];
-                const valueStr = keyMatch[3];
-                coloredLines.push({ text: indent, color: JSON_COLORS.punctuation }, { text: `"${key}"`, color: JSON_COLORS.key }, { text: ": ", color: JSON_COLORS.punctuation });
-                if (valueStr.startsWith('"')) {
-                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.string });
-                }
-                else if (!isNaN(Number(valueStr.replace(",", "")))) {
-                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.number });
-                }
-                else if (valueStr.startsWith("true") || valueStr.startsWith("false")) {
-                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.boolean });
-                }
-                else if (valueStr.startsWith("null")) {
-                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.null });
-                }
-                else {
-                    coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.punctuation });
-                }
-                return;
-            }
-        }
-        coloredLines.push({ text: line + "\n", color: JSON_COLORS.punctuation });
+    coloredLines.push({
+      text: line + "\n",
+      role: "punctuation"
     });
-    return coloredLines;
+  });
+  return coloredLines;
 }
-const JsonPreview = ({ selectedJson }) => {
-    const [isProcessing, setIsProcessing] = useState(false);
-    // Guard 3: format with a robust try-catch
-    const formattedJson = useMemo(() => {
-        if (!selectedJson || selectedJson.trim() === "") {
-            return "{}";
-        }
-        try {
-            const parsed = JSON.parse(selectedJson);
-            const cleaned = parseDeepJson(parsed);
-            return JSON.stringify(cleaned, null, 2);
-        }
-        catch (error) {
-            console.warn("[JSONViewer] Error parsing JSON:", error);
-            return selectedJson; // Mostrar original si falla
-        }
-    }, [selectedJson]);
-    // Guard 4: colorize with processing control
-    const coloredLines = useMemo(() => {
-        try {
-            return parseJsonToColoredLines(formattedJson);
-        }
-        catch (error) {
-            console.warn("[JSONViewer] Error coloring JSON:", error);
-            return [{ text: formattedJson, color: "#333333" }];
-        }
-    }, [formattedJson]);
-    useEffect(() => {
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setIsProcessing(true);
-        const t = setTimeout(() => setIsProcessing(false), 50);
-        return () => clearTimeout(t);
-    }, [formattedJson]);
-    // Guard 5: show loading while processing large JSON
-    if (isProcessing && formattedJson.length > 50_000) {
-        return (_jsxs(View, { className: "p-4 items-center justify-center min-h-[200px]", children: [_jsx(ThemedActivityIndicator, { size: "large" }), _jsx(Text, { className: "mt-2 text-text-secondary text-sm", children: "Procesando JSON..." })] }));
+const JsonPreview = t0 => {
+  const $ = _c(20);
+  const {
+    selectedJson
+  } = t0;
+  const t1 = useTheme();
+  let t2;
+  if ($[0] !== t1) {
+    t2 = jsonPalette(t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const palette = t2;
+  const [isProcessing, setIsProcessing] = useState(false);
+  let t3;
+  bb0: {
+    if (!selectedJson || selectedJson.trim() === "") {
+      t3 = "{}";
+      break bb0;
     }
-    return (_jsx(View, { className: "p-4", children: _jsx(Text, { selectable: true, style: {
-                fontFamily: fontFamilies.mono,
-                fontSize: 13,
-                lineHeight: 18,
-            }, children: coloredLines.map((line, index) => (_jsx(Text, { style: { color: line.color }, children: line.text }, index))) }) }));
+    ;
+    try {
+      let t5;
+      if ($[2] !== selectedJson) {
+        const parsed = JSON.parse(selectedJson);
+        const cleaned = parseDeepJson(parsed);
+        t5 = JSON.stringify(cleaned, null, 2);
+        $[2] = selectedJson;
+        $[3] = t5;
+      } else {
+        t5 = $[3];
+      }
+      t3 = t5;
+    } catch (t4) {
+      const error = t4;
+      console.warn("[JSONViewer] Error parsing JSON:", error);
+      t3 = selectedJson;
+    }
+  }
+  const formattedJson = t3;
+  let t4;
+  ;
+  try {
+    let t6;
+    if ($[4] !== formattedJson) {
+      t6 = parseJsonToColoredLines(formattedJson);
+      $[4] = formattedJson;
+      $[5] = t6;
+    } else {
+      t6 = $[5];
+    }
+    t4 = t6;
+  } catch (t5) {
+    const error_0 = t5;
+    console.warn("[JSONViewer] Error coloring JSON:", error_0);
+    let t6;
+    if ($[6] !== formattedJson) {
+      t6 = [{
+        text: formattedJson,
+        role: "text"
+      }];
+      $[6] = formattedJson;
+      $[7] = t6;
+    } else {
+      t6 = $[7];
+    }
+    t4 = t6;
+  }
+  const coloredLines = t4;
+  let t6;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => {
+      setIsProcessing(true);
+      const t = setTimeout(() => setIsProcessing(false), 50);
+      return () => clearTimeout(t);
+    };
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== formattedJson) {
+    t7 = [formattedJson];
+    $[9] = formattedJson;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  useEffect(t6, t7);
+  if (isProcessing && formattedJson.length > 50000) {
+    let t8;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = _jsxs(View, {
+        className: "p-4 items-center justify-center min-h-[200px]",
+        children: [_jsx(ThemedActivityIndicator, {
+          size: "large"
+        }), _jsx(Typography.Text, {
+          className: "mt-2 text-text-secondary",
+          variant: "bodySmall",
+          children: "Procesando JSON..."
+        })]
+      });
+      $[11] = t8;
+    } else {
+      t8 = $[11];
+    }
+    return t8;
+  }
+  let t8;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      fontFamily: fontFamilies.mono,
+      fontSize: 13,
+      lineHeight: 18
+    };
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== coloredLines || $[14] !== palette) {
+    let t10;
+    if ($[16] !== palette) {
+      t10 = (line, index) => _jsx(Text, {
+        style: {
+          color: palette[line.role]
+        },
+        children: line.text
+      }, index);
+      $[16] = palette;
+      $[17] = t10;
+    } else {
+      t10 = $[17];
+    }
+    t9 = coloredLines.map(t10);
+    $[13] = coloredLines;
+    $[14] = palette;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[18] !== t9) {
+    t10 = _jsx(View, {
+      className: "p-4",
+      children: _jsx(Text, {
+        selectable: true,
+        style: t8,
+        children: t9
+      })
+    });
+    $[18] = t9;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  return t10;
 };
 export default JsonPreview;