@buoy-gg/shared-ui 1.7.2

package/lib/module/dataViewer/SplitDiffViewer.js

@@ -0,0 +1,415 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import React, { Fragment, useMemo, memo } from "react";
+import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { computeLineDiff, DiffType } from "./lineDiff.js";
+import { DiffSummary } from "./DiffSummary.js";
+import { devToolsDefaultTheme } from "./diffThemes.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SplitDiffViewer displays a side-by-side diff comparison.
+ */
+export const SplitDiffViewer = /*#__PURE__*/memo(function SplitDiffViewer({
+  oldValue,
+  newValue,
+  theme = 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 = useMemo(() => computeLineDiff(oldValue, newValue, diffComputeOptions), [oldValue, newValue, compareMethod, disableWordDiff, showDiffOnly, contextLines]);
+
+  // Create dynamic styles based on theme
+  const dynamicStyles = useMemo(() => createDynamicStyles(theme, height), [theme, height]);
+
+  // Render word diff content
+  const renderWordDiff = wordDiffs => {
+    return wordDiffs.map((word, idx) => {
+      let backgroundColor = "transparent";
+      if (word.type === DiffType.ADDED) {
+        backgroundColor = theme.addedWordHighlight;
+      } else if (word.type === DiffType.REMOVED) {
+        backgroundColor = theme.removedWordHighlight;
+      }
+      return /*#__PURE__*/_jsx(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 DiffType.ADDED:
+        return {
+          background: theme.addedBackground,
+          text: theme.addedText,
+          markerBg: theme.markerAddedBackground
+        };
+      case DiffType.REMOVED:
+        return {
+          background: theme.removedBackground,
+          text: theme.removedText,
+          markerBg: theme.markerRemovedBackground
+        };
+      case 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__*/_jsxs(_Fragment, {
+        children: [!hideLineNumbers && /*#__PURE__*/_jsx(View, {
+          style: [dynamicStyles.gutter, dynamicStyles.emptyGutter],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: dynamicStyles.lineNumber,
+            children: " "
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [dynamicStyles.marker, dynamicStyles.emptyMarker],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: dynamicStyles.markerText,
+            children: " "
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [dynamicStyles.contentCell, dynamicStyles.emptyContent],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: dynamicStyles.content,
+            children: " "
+          })
+        })]
+      });
+    }
+    const colors = getDiffColors(type);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!hideLineNumbers && /*#__PURE__*/_jsx(View, {
+        style: [dynamicStyles.gutter, {
+          backgroundColor: theme.lineNumberBackground
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.lineNumber,
+          children: lineNumber || " "
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [dynamicStyles.marker, {
+          backgroundColor: colors.markerBg
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [dynamicStyles.markerText, {
+            color: theme.markerText
+          }],
+          children: marker
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [dynamicStyles.contentCell, {
+          backgroundColor: colors.background
+        }],
+        children: /*#__PURE__*/_jsx(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 === DiffType.REMOVED;
+    const isAdded = diff.type === DiffType.ADDED;
+    const isModified = diff.type === DiffType.MODIFIED;
+    const isDefault = diff.type === DiffType.DEFAULT;
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [shouldShowSeparator(idx, diffs) && /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.separator,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.separatorText,
+          children: "\u2022 \u2022 \u2022"
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: dynamicStyles.row,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: dynamicStyles.leftSide,
+          children: isRemoved || isModified || isDefault ? renderLineSide(diff.leftLineNumber, diff.leftContent, isModified ? DiffType.REMOVED : diff.type, isRemoved || isModified ? "-" : " ") : renderLineSide(undefined, undefined, DiffType.DEFAULT, " ", true)
+        }), /*#__PURE__*/_jsx(View, {
+          style: dynamicStyles.centerDivider
+        }), /*#__PURE__*/_jsx(View, {
+          style: dynamicStyles.rightSide,
+          children: isAdded || isModified || isDefault ? renderLineSide(diff.rightLineNumber, diff.rightContent, isModified ? DiffType.ADDED : diff.type, isAdded || isModified ? "+" : " ") : renderLineSide(undefined, undefined, DiffType.DEFAULT, " ", true)
+        })]
+      })]
+    }, idx);
+  };
+
+  // Count diff statistics
+  const addedCount = lineDiffs.filter(d => d.type === DiffType.ADDED).length;
+  const removedCount = lineDiffs.filter(d => d.type === DiffType.REMOVED).length;
+  const modifiedCount = lineDiffs.filter(d => d.type === DiffType.MODIFIED).length;
+  return /*#__PURE__*/_jsxs(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__*/_jsxs(View, {
+      style: dynamicStyles.themeBadge,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.themeName,
+        children: theme.name
+      }), /*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.themeDescription,
+        children: theme.description
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: dynamicStyles.header,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.headerLeft,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.headerTitle,
+          children: "PREV"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.divider
+      }), /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.headerRight,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.headerTitle,
+          children: "CUR"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(DiffSummary, {
+      added: addedCount,
+      removed: removedCount,
+      modified: modifiedCount,
+      theme: theme
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: dynamicStyles.scrollView,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: dynamicStyles.scrollContent,
+      children: lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.emptyState,
+        children: /*#__PURE__*/_jsx(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 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/module/dataViewer/TypeLegend.js

@@ -0,0 +1,105 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { macOSColors } from "../ui/gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Type color mapping using centralized theme colors
+export const getTypeColor = type => {
+  const colors = {
+    string: macOSColors.dataTypes.string,
+    number: macOSColors.dataTypes.number,
+    bigint: macOSColors.semantic.debug,
+    // Purple for bigint
+    boolean: macOSColors.dataTypes.boolean,
+    null: macOSColors.dataTypes.null,
+    undefined: macOSColors.dataTypes.undefined,
+    function: macOSColors.dataTypes.function,
+    symbol: macOSColors.semantic.error,
+    // Pink for symbols
+    date: macOSColors.semantic.error,
+    // Pink for dates
+    error: macOSColors.semantic.error,
+    // Red for errors
+    array: macOSColors.dataTypes.array,
+    object: macOSColors.dataTypes.object
+  };
+  return colors[type] || 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
+ */
+export 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__*/_jsx(View, {
+    style: styles.typeLegend,
+    children: types.map(type => {
+      const color = getTypeColor(type);
+      const isActive = activeFilter === type;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        "sentry-label": "ignore devtools type legend filter",
+        style: [styles.typeBadge, isActive && styles.typeBadgeActive, {
+          borderColor: isActive ? color : macOSColors.text.primary + "1A"
+        }],
+        onPress: () => handleTypeFilter(type),
+        accessibilityLabel: `Filter by ${type} values`,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.typeColor, {
+            backgroundColor: color
+          }]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.typeName, isActive && {
+            color: color
+          }],
+          children: type
+        })]
+      }, type);
+    })
+  });
+};
+const styles = StyleSheet.create({
+  typeLegend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    paddingVertical: 3,
+    gap: 6,
+    width: "100%",
+    padding: 8
+  },
+  typeBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: macOSColors.background.hover,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  typeBadgeActive: {
+    backgroundColor: macOSColors.background.input
+  },
+  typeColor: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6
+  },
+  typeName: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    fontWeight: "500"
+  }
+});