@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/dataViewer/SplitDiffViewer.js

@@ -0,0 +1,420 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitDiffViewer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _lineDiff = require("./lineDiff.js");
+var _DiffSummary = require("./DiffSummary.js");
+var _diffThemes = require("./diffThemes.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * SplitDiffViewer
+ *
+ * A line-by-line split diff viewer for comparing two values.
+ * Shows PREV on the left and CUR on the right with word-level highlighting.
+ * This is a dumb component - all state is controlled externally.
+ */
+
+/**
+ * SplitDiffViewer displays a side-by-side diff comparison.
+ */
+const SplitDiffViewer = exports.SplitDiffViewer = /*#__PURE__*/(0, _react.memo)(function SplitDiffViewer({
+  oldValue,
+  newValue,
+  theme = _diffThemes.devToolsDefaultTheme,
+  options = {},
+  showThemeName = false,
+  height = 400
+}) {
+  const {
+    hideLineNumbers = false,
+    disableWordDiff = false,
+    showDiffOnly = false,
+    compareMethod = "words",
+    contextLines = 3
+  } = options;
+
+  // Compute line-by-line diff with options
+  const diffComputeOptions = {
+    compareMethod,
+    disableWordDiff,
+    showDiffOnly,
+    contextLines
+  };
+  const lineDiffs = (0, _react.useMemo)(() => (0, _lineDiff.computeLineDiff)(oldValue, newValue, diffComputeOptions), [oldValue, newValue, compareMethod, disableWordDiff, showDiffOnly, contextLines]);
+
+  // Create dynamic styles based on theme
+  const dynamicStyles = (0, _react.useMemo)(() => createDynamicStyles(theme, height), [theme, height]);
+
+  // Render word diff content
+  const renderWordDiff = wordDiffs => {
+    return wordDiffs.map((word, idx) => {
+      let backgroundColor = "transparent";
+      if (word.type === _lineDiff.DiffType.ADDED) {
+        backgroundColor = theme.addedWordHighlight;
+      } else if (word.type === _lineDiff.DiffType.REMOVED) {
+        backgroundColor = theme.removedWordHighlight;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [dynamicStyles.wordDiff, {
+          backgroundColor
+        }],
+        children: word.value
+      }, idx);
+    });
+  };
+
+  // Get colors for diff type
+  const getDiffColors = (type, isModified = false) => {
+    if (isModified) {
+      return {
+        background: theme.modifiedBackground,
+        text: theme.modifiedText,
+        markerBg: theme.markerModifiedBackground
+      };
+    }
+    switch (type) {
+      case _lineDiff.DiffType.ADDED:
+        return {
+          background: theme.addedBackground,
+          text: theme.addedText,
+          markerBg: theme.markerAddedBackground
+        };
+      case _lineDiff.DiffType.REMOVED:
+        return {
+          background: theme.removedBackground,
+          text: theme.removedText,
+          markerBg: theme.markerRemovedBackground
+        };
+      case _lineDiff.DiffType.DEFAULT:
+        return {
+          background: theme.unchangedBackground,
+          text: theme.unchangedText,
+          markerBg: "transparent"
+        };
+      default:
+        return {
+          background: theme.unchangedBackground,
+          text: theme.unchangedText,
+          markerBg: "transparent"
+        };
+    }
+  };
+
+  // Render a single line side (left or right)
+  const renderLineSide = (lineNumber, content, type, marker, isEmpty = false) => {
+    if (isEmpty) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [!hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [dynamicStyles.gutter, dynamicStyles.emptyGutter],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: dynamicStyles.lineNumber,
+            children: " "
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [dynamicStyles.marker, dynamicStyles.emptyMarker],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: dynamicStyles.markerText,
+            children: " "
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [dynamicStyles.contentCell, dynamicStyles.emptyContent],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: dynamicStyles.content,
+            children: " "
+          })
+        })]
+      });
+    }
+    const colors = getDiffColors(type);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [dynamicStyles.gutter, {
+          backgroundColor: theme.lineNumberBackground
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: dynamicStyles.lineNumber,
+          children: lineNumber || " "
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [dynamicStyles.marker, {
+          backgroundColor: colors.markerBg
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [dynamicStyles.markerText, {
+            color: theme.markerText
+          }],
+          children: marker
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [dynamicStyles.contentCell, {
+          backgroundColor: colors.background
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [dynamicStyles.content, {
+            color: colors.text
+          }],
+          children: Array.isArray(content) ? renderWordDiff(content) : content || " "
+        })
+      })]
+    });
+  };
+
+  // Check if we should show a separator (gap in line numbers)
+  const shouldShowSeparator = (idx, diffs) => {
+    if (!showDiffOnly || idx === 0) return false;
+    const prevDiff = diffs[idx - 1];
+    const currDiff = diffs[idx];
+
+    // Check for gap in line numbers
+    const leftGap = currDiff.leftLineNumber && prevDiff.leftLineNumber && currDiff.leftLineNumber - prevDiff.leftLineNumber > 1;
+    const rightGap = currDiff.rightLineNumber && prevDiff.rightLineNumber && currDiff.rightLineNumber - prevDiff.rightLineNumber > 1;
+    return leftGap || rightGap;
+  };
+
+  // Render a complete row with both left and right sides
+  const renderDiffRow = (diff, idx, diffs) => {
+    const isRemoved = diff.type === _lineDiff.DiffType.REMOVED;
+    const isAdded = diff.type === _lineDiff.DiffType.ADDED;
+    const isModified = diff.type === _lineDiff.DiffType.MODIFIED;
+    const isDefault = diff.type === _lineDiff.DiffType.DEFAULT;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [shouldShowSeparator(idx, diffs) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: dynamicStyles.separator,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: dynamicStyles.separatorText,
+          children: "\u2022 \u2022 \u2022"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: dynamicStyles.row,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: dynamicStyles.leftSide,
+          children: isRemoved || isModified || isDefault ? renderLineSide(diff.leftLineNumber, diff.leftContent, isModified ? _lineDiff.DiffType.REMOVED : diff.type, isRemoved || isModified ? "-" : " ") : renderLineSide(undefined, undefined, _lineDiff.DiffType.DEFAULT, " ", true)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: dynamicStyles.centerDivider
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: dynamicStyles.rightSide,
+          children: isAdded || isModified || isDefault ? renderLineSide(diff.rightLineNumber, diff.rightContent, isModified ? _lineDiff.DiffType.ADDED : diff.type, isAdded || isModified ? "+" : " ") : renderLineSide(undefined, undefined, _lineDiff.DiffType.DEFAULT, " ", true)
+        })]
+      })]
+    }, idx);
+  };
+
+  // Count diff statistics
+  const addedCount = lineDiffs.filter(d => d.type === _lineDiff.DiffType.ADDED).length;
+  const removedCount = lineDiffs.filter(d => d.type === _lineDiff.DiffType.REMOVED).length;
+  const modifiedCount = lineDiffs.filter(d => d.type === _lineDiff.DiffType.MODIFIED).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [dynamicStyles.container, theme.glowColor && {
+      shadowColor: theme.glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: theme.neonIntensity && theme.neonIntensity > 0.7 ? 0.5 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 0.3 : 0.1,
+      shadowRadius: theme.neonIntensity && theme.neonIntensity > 0.7 ? 10 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 5 : 2
+    }],
+    children: [showThemeName && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: dynamicStyles.themeBadge,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: dynamicStyles.themeName,
+        children: theme.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: dynamicStyles.themeDescription,
+        children: theme.description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: dynamicStyles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: dynamicStyles.headerLeft,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: dynamicStyles.headerTitle,
+          children: "PREV"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: dynamicStyles.divider
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: dynamicStyles.headerRight,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: dynamicStyles.headerTitle,
+          children: "CUR"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffSummary.DiffSummary, {
+      added: addedCount,
+      removed: removedCount,
+      modified: modifiedCount,
+      theme: theme
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: dynamicStyles.scrollView,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: dynamicStyles.scrollContent,
+      children: lineDiffs.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: dynamicStyles.emptyState,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: dynamicStyles.emptyText,
+          children: showDiffOnly ? "No differences found" : "No content to display"
+        })
+      }) : lineDiffs.map((diff, idx) => renderDiffRow(diff, idx, lineDiffs))
+    })]
+  });
+});
+
+// Create dynamic styles based on theme
+function createDynamicStyles(theme, height) {
+  return _reactNative.StyleSheet.create({
+    container: {
+      height,
+      backgroundColor: theme.background,
+      borderRadius: 8,
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: theme.borderColor
+    },
+    themeBadge: {
+      backgroundColor: theme.panelBackground,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.borderColor
+    },
+    themeName: {
+      fontSize: 12,
+      fontWeight: "700",
+      color: theme.accentColor || theme.unchangedText,
+      fontFamily: "monospace",
+      letterSpacing: 0.5
+    },
+    themeDescription: {
+      fontSize: 10,
+      color: theme.unchangedText,
+      fontFamily: "monospace",
+      marginTop: 2,
+      opacity: 0.8
+    },
+    header: {
+      flexDirection: "row",
+      backgroundColor: theme.headerBackground,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.borderColor
+    },
+    headerLeft: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    },
+    headerRight: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    },
+    headerTitle: {
+      fontSize: 10,
+      fontWeight: "700",
+      color: theme.accentColor || theme.unchangedText,
+      fontFamily: "monospace",
+      letterSpacing: 0.5,
+      textTransform: "uppercase"
+    },
+    divider: {
+      width: 1,
+      backgroundColor: theme.dividerColor
+    },
+    scrollView: {
+      flex: 1
+    },
+    scrollContent: {
+      paddingBottom: 10
+    },
+    row: {
+      flexDirection: "row",
+      minHeight: 20
+    },
+    leftSide: {
+      flex: 1,
+      flexDirection: "row"
+    },
+    rightSide: {
+      flex: 1,
+      flexDirection: "row"
+    },
+    centerDivider: {
+      width: 1,
+      backgroundColor: theme.dividerColor
+    },
+    gutter: {
+      width: 35,
+      paddingHorizontal: 4,
+      justifyContent: "center",
+      alignItems: "flex-end",
+      backgroundColor: theme.lineNumberBackground,
+      borderRightWidth: 1,
+      borderRightColor: theme.lineNumberBorder
+    },
+    emptyGutter: {
+      backgroundColor: theme.contextBackground
+    },
+    lineNumber: {
+      fontSize: 9,
+      fontFamily: "monospace",
+      color: theme.lineNumberText
+    },
+    marker: {
+      width: 20,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    emptyMarker: {
+      backgroundColor: theme.contextBackground
+    },
+    markerText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      fontWeight: "600"
+    },
+    contentCell: {
+      flex: 1,
+      paddingHorizontal: 8,
+      paddingVertical: 2
+    },
+    emptyContent: {
+      backgroundColor: theme.contextBackground
+    },
+    content: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      lineHeight: 16
+    },
+    wordDiff: {
+      fontSize: 10,
+      fontFamily: "monospace"
+    },
+    separator: {
+      height: 20,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.separatorBackground
+    },
+    separatorText: {
+      fontSize: 8,
+      color: theme.separatorText,
+      fontFamily: "monospace",
+      letterSpacing: 2
+    },
+    emptyState: {
+      padding: 40,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    emptyText: {
+      fontSize: 11,
+      color: theme.emptyStateText,
+      fontStyle: "italic",
+      fontFamily: "monospace"
+    }
+  });
+}

package/lib/commonjs/dataViewer/TypeLegend.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTypeColor = exports.TypeLegend = void 0;
+var _reactNative = require("react-native");
+var _index = require("../ui/gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+// Type color mapping using centralized theme colors
+const getTypeColor = type => {
+  const colors = {
+    string: _index.macOSColors.dataTypes.string,
+    number: _index.macOSColors.dataTypes.number,
+    bigint: _index.macOSColors.semantic.debug,
+    // Purple for bigint
+    boolean: _index.macOSColors.dataTypes.boolean,
+    null: _index.macOSColors.dataTypes.null,
+    undefined: _index.macOSColors.dataTypes.undefined,
+    function: _index.macOSColors.dataTypes.function,
+    symbol: _index.macOSColors.semantic.error,
+    // Pink for symbols
+    date: _index.macOSColors.semantic.error,
+    // Pink for dates
+    error: _index.macOSColors.semantic.error,
+    // Red for errors
+    array: _index.macOSColors.dataTypes.array,
+    object: _index.macOSColors.dataTypes.object
+  };
+  return colors[type] || _index.macOSColors.text.secondary;
+};
+
+/**
+ * TypeLegend component with filter functionality
+ * Shows type badges that can be clicked to filter data by type
+ *
+ * Applied principles [[rule3]]:
+ * - Decompose by Responsibility: Single purpose type filtering UI
+ * - Extract Reusable Logic: Shared between Sentry logs and storage views
+ */
+exports.getTypeColor = getTypeColor;
+const TypeLegend = ({
+  types,
+  activeFilter,
+  onFilterChange
+}) => {
+  if (types.length === 0) return null;
+  const handleTypeFilter = type => {
+    // Toggle filter: if already active, clear it; otherwise set it
+    onFilterChange(activeFilter === type ? null : type);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.typeLegend,
+    children: types.map(type => {
+      const color = getTypeColor(type);
+      const isActive = activeFilter === type;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        "sentry-label": "ignore devtools type legend filter",
+        style: [styles.typeBadge, isActive && styles.typeBadgeActive, {
+          borderColor: isActive ? color : _index.macOSColors.text.primary + "1A"
+        }],
+        onPress: () => handleTypeFilter(type),
+        accessibilityLabel: `Filter by ${type} values`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.typeColor, {
+            backgroundColor: color
+          }]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.typeName, isActive && {
+            color: color
+          }],
+          children: type
+        })]
+      }, type);
+    })
+  });
+};
+exports.TypeLegend = TypeLegend;
+const styles = _reactNative.StyleSheet.create({
+  typeLegend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    paddingVertical: 3,
+    gap: 6,
+    width: "100%",
+    padding: 8
+  },
+  typeBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _index.macOSColors.background.hover,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  typeBadgeActive: {
+    backgroundColor: _index.macOSColors.background.input
+  },
+  typeColor: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6
+  },
+  typeName: {
+    color: _index.macOSColors.text.secondary,
+    fontSize: 11,
+    fontWeight: "500"
+  }
+});