@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/dataViewer/DataViewer.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataViewer = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _VirtualizedDataExplorer = require("./VirtualizedDataExplorer.js");
+var _types = require("../types/types.js");
+var _TypeLegend = require("./TypeLegend.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * DataViewer component that combines VirtualizedDataExplorer with TypeLegend
+ * Provides type filtering functionality like in Sentry event details
+ *
+ * Applied principles [[rule3]]:
+ * - Decompose by Responsibility: Combines data viewing with type filtering
+ * - Prefer Composition over Configuration: Uses existing components
+ * - Extract Reusable Logic: Shared between storage and Sentry views
+ */
+const DataViewer = ({
+  title,
+  data,
+  maxDepth = 10,
+  rawMode = true,
+  showTypeFilter = true,
+  initialExpanded = false,
+  disableCopy = false
+}) => {
+  const [activeFilter, setActiveFilter] = (0, _react.useState)(null);
+
+  // Calculate visible types in the data
+  const visibleTypes = (0, _react.useMemo)(() => {
+    if (!data || !showTypeFilter) return [];
+    const types = [];
+    const processValue = (value, depth = 0) => {
+      if (depth > 3) return; // Limit depth for performance
+
+      const type = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
+      types.push(type);
+      if (type === "object" && (0, _types.isPlainObject)(value)) {
+        Object.values(value).forEach(v => processValue(v, depth + 1));
+      } else if (Array.isArray(value)) {
+        value.forEach(v => processValue(v, depth + 1));
+      }
+    };
+    processValue(data);
+    return Array.from(new Set(types)).slice(0, 8); // Unique types, limit to 8
+  }, [data, showTypeFilter]);
+
+  // Get filtered data based on active filter
+  const getFilteredData = (0, _react.useMemo)(() => {
+    if (!activeFilter || !data) return null;
+    const filteredObject = {};
+    let itemCount = 0;
+    const flattenByType = (obj, targetType, path = "", depth = 0) => {
+      if (depth > 10 || itemCount > 100) return;
+      if (Array.isArray(obj)) {
+        obj.forEach((item, index) => {
+          const currentPath = path ? `${path}[${index}]` : `[${index}]`;
+          const itemType = item === null ? "null" : typeof item;
+          if (itemType === targetType) {
+            filteredObject[currentPath] = item;
+            itemCount++;
+          }
+
+          // Recurse into nested structures
+          if (itemType === "object" && item !== null || Array.isArray(item)) {
+            flattenByType(item, targetType, currentPath, depth + 1);
+          }
+        });
+      } else if (obj && typeof obj === "object") {
+        Object.entries(obj).forEach(([key, value]) => {
+          const currentPath = path ? `${path}.${key}` : key;
+          const valueType = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
+          if (valueType === targetType) {
+            filteredObject[currentPath] = value;
+            itemCount++;
+          }
+
+          // Recurse into nested structures
+          if (valueType === "object" && value !== null || valueType === "array") {
+            flattenByType(value, targetType, currentPath, depth + 1);
+          }
+        });
+      }
+    };
+    flattenByType(data, activeFilter);
+    return {
+      filteredObject,
+      itemCount
+    };
+  }, [activeFilter, data]);
+
+  // Render content based on filter state
+  const renderContent = () => {
+    // Show filtered results if filter is active
+    if (activeFilter && getFilteredData) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedDataExplorer.VirtualizedDataExplorer, {
+        title: `${activeFilter} values`,
+        data: getFilteredData.filteredObject,
+        maxDepth: maxDepth,
+        rawMode: rawMode,
+        initialExpanded: initialExpanded,
+        disableCopy: disableCopy
+      });
+    }
+
+    // Default: show all data
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedDataExplorer.VirtualizedDataExplorer, {
+      title: title,
+      data: data,
+      maxDepth: maxDepth,
+      rawMode: rawMode,
+      initialExpanded: initialExpanded,
+      disableCopy: disableCopy
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [showTypeFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.header,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TypeLegend.TypeLegend, {
+        types: visibleTypes,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter
+      })
+    }), renderContent()]
+  });
+};
+exports.DataViewer = DataViewer;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }
+});

package/lib/commonjs/dataViewer/DiffSummary.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DiffSummary = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+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); }
+/**
+ * DiffSummary
+ *
+ * Displays a summary bar showing counts of added, removed, and modified lines.
+ * Used by SplitDiffViewer to show diff statistics.
+ */
+
+/**
+ * DiffSummary displays a summary bar showing diff statistics.
+ */
+const DiffSummary = exports.DiffSummary = /*#__PURE__*/(0, _react.memo)(function DiffSummary({
+  added,
+  removed,
+  modified,
+  theme,
+  style
+}) {
+  const hasChanges = added > 0 || removed > 0 || modified > 0;
+  if (!hasChanges) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }, style],
+    children: [added > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: theme.addedBackground
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.icon, {
+          color: theme.summaryAddedText
+        }],
+        children: "+"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.count, {
+          color: theme.summaryAddedText
+        }],
+        children: added
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.summaryAddedText
+        }],
+        children: "new"
+      })]
+    }), removed > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: theme.removedBackground
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.icon, {
+          color: theme.summaryRemovedText
+        }],
+        children: "\u2212"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.count, {
+          color: theme.summaryRemovedText
+        }],
+        children: removed
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.summaryRemovedText
+        }],
+        children: "gone"
+      })]
+    }), modified > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, {
+        backgroundColor: theme.modifiedBackground
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.icon, {
+          color: theme.summaryModifiedText
+        }],
+        children: "\u2248"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.count, {
+          color: theme.summaryModifiedText
+        }],
+        children: modified
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: theme.summaryModifiedText
+        }],
+        children: "modified"
+      })]
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderTopWidth: 1
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  icon: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "700"
+  },
+  count: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  label: {
+    fontSize: 9,
+    fontFamily: "monospace",
+    opacity: 0.9
+  }
+});

package/lib/commonjs/dataViewer/IndentGuides.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndentGuides = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../ui/gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const INDENT_WIDTH = 10; // Width per indent level
+const LINE_COLOR = _index.gameUIColors.primary + "40"; // More visible line color (25% opacity)
+const ACTIVE_LINE_COLOR = _index.gameUIColors.primary + "66"; // Highlighted line color (40% opacity)
+
+/**
+ * IndentGuides component that renders VS Code-style indent guide lines
+ * Shows vertical lines for each indent level and horizontal connectors
+ */
+const IndentGuides = exports.IndentGuides = /*#__PURE__*/(0, _react.memo)(({
+  depth,
+  isLastChild,
+  isExpanded,
+  hasChildren,
+  parentHasMoreSiblings = [],
+  activeDepth = -1,
+  itemHeight
+}) => {
+  const guides = (0, _react.useMemo)(() => {
+    const elements = [];
+
+    // Render vertical guides for parent levels that continue through this item
+    for (let level = 1; level < depth; level++) {
+      const isActive = level === activeDepth;
+      // Show line if parent at this level has more siblings
+      const shouldShowLine = parentHasMoreSiblings[level - 1];
+      if (shouldShowLine) {
+        // Vertical line that passes through this item from parent levels
+        elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.verticalLine, {
+            left: (level - 1) * INDENT_WIDTH - 0.5,
+            backgroundColor: isActive ? ACTIVE_LINE_COLOR : LINE_COLOR,
+            height: itemHeight
+          }]
+        }, `v-${level}`));
+      }
+    }
+
+    // Vertical line for the current item's level
+    if (depth > 0) {
+      // For last child without expansion, line goes to the middle
+      // For expanded items or items with siblings below, line goes through entire height
+      const lineHeight = isLastChild && !isExpanded ? itemHeight / 2 - 1 : itemHeight;
+      elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.verticalLine, {
+          left: (depth - 1) * INDENT_WIDTH - 0.5,
+          backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR,
+          height: lineHeight
+        }]
+      }, `v-current`));
+
+      // Add a subtle L-shaped corner for last children that aren't expanded
+      if (isLastChild && !isExpanded) {
+        elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.horizontalLine, {
+            left: (depth - 1) * INDENT_WIDTH,
+            top: itemHeight / 2 - 1,
+            width: INDENT_WIDTH / 2,
+            backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR
+          }]
+        }, "h-corner"));
+      }
+
+      // For expanded items, add a small horizontal connector
+      if (isExpanded && hasChildren) {
+        elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.horizontalLine, {
+            left: (depth - 1) * INDENT_WIDTH,
+            top: itemHeight / 2 - 1,
+            width: INDENT_WIDTH / 2,
+            backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR
+          }]
+        }, "h-expand-connector"));
+      }
+    }
+
+    // Vertical line extending down for expanded items with children
+    if (hasChildren && isExpanded) {
+      elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.verticalLine, {
+          left: depth * INDENT_WIDTH - 0.5,
+          top: itemHeight / 2,
+          height: itemHeight / 2 + 1,
+          // Extend slightly to connect better
+          backgroundColor: activeDepth === depth ? ACTIVE_LINE_COLOR : LINE_COLOR
+        }]
+      }, "v-children"));
+    }
+    return elements;
+  }, [depth, isLastChild, isExpanded, hasChildren, parentHasMoreSiblings, activeDepth, itemHeight]);
+  if (depth === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    pointerEvents: "none",
+    children: guides
+  });
+});
+IndentGuides.displayName = "IndentGuides";
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  verticalLine: {
+    position: "absolute",
+    width: 1.5,
+    // Slightly thicker for better visibility
+    top: 0
+  },
+  horizontalLine: {
+    position: "absolute",
+    height: 1.5 // Slightly thicker for better visibility
+  }
+});

package/lib/commonjs/dataViewer/IndentGuidesOverlay.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndentGuidesOverlay = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../ui/index.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); }
+const NORMAL_ALPHA = "4D"; // ~30%
+const ACTIVE_ALPHA = "80"; // ~50%
+const IndentGuidesOverlay = exports.IndentGuidesOverlay = /*#__PURE__*/(0, _react.memo)(({
+  items,
+  visibleRange,
+  itemHeight,
+  indentWidth,
+  activeDepth = -1
+}) => {
+  const columns = (0, _react.useMemo)(() => {
+    const start = Math.max(0, visibleRange.start);
+    const end = Math.min(items.length - 1, visibleRange.end);
+    if (start > end || items.length === 0) return [];
+
+    // Find max depth in visible range
+    let maxDepth = 0;
+    for (let i = start; i <= end; i++) {
+      const d = items[i]?.depth ?? 0;
+      if (d > maxDepth) maxDepth = d;
+    }
+    const results = [];
+    for (let depth = 1; depth <= maxDepth; depth++) {
+      const leftTarget = (depth - 0.5) * indentWidth; // center of indent column
+      const left = Math.round(leftTarget) + 0.5; // snap for crisp 1px
+      const segments = [];
+      let segStart = -1;
+      let segEnd = -1;
+      for (let i = start; i <= end; i++) {
+        const item = items[i];
+        // Draw a column for any row that reaches this depth
+        // i.e. all rows with depth >= current column depth
+        const showAtThisDepth = (item?.depth ?? 0) >= depth;
+        if (showAtThisDepth) {
+          if (segStart === -1) segStart = i;
+          segEnd = i;
+        } else if (segStart !== -1) {
+          segments.push({
+            startIndex: segStart,
+            endIndex: segEnd
+          });
+          segStart = -1;
+          segEnd = -1;
+        }
+      }
+      if (segStart !== -1) {
+        segments.push({
+          startIndex: segStart,
+          endIndex: segEnd
+        });
+      }
+      if (segments.length > 0) {
+        results.push({
+          depth,
+          left,
+          segments
+        });
+      }
+    }
+    return results;
+  }, [items, visibleRange, itemHeight, indentWidth]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    style: styles.overlay,
+    children: columns.map(col => col.segments.map((seg, idx) => {
+      const top = (seg.startIndex - visibleRange.start) * itemHeight;
+      const height = (seg.endIndex - seg.startIndex + 1) * itemHeight;
+      const isActive = col.depth === activeDepth;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.line, {
+          left: col.left,
+          top,
+          height,
+          backgroundColor: `${_index.gameUIColors.primary}${isActive ? ACTIVE_ALPHA : NORMAL_ALPHA}`
+        }]
+      }, `${col.depth}-${idx}`);
+    }))
+  });
+});
+IndentGuidesOverlay.displayName = "IndentGuidesOverlay";
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  line: {
+    position: "absolute",
+    width: 1
+  }
+});