@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/components/query-browser/QueryDetailsChip.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryDetailsChip;
+var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+const backgroundColors = {
+  fresh: _sharedUi.buoyColors.success + "15",
+  stale: _sharedUi.buoyColors.warning + "15",
+  fetching: _sharedUi.buoyColors.primary + "15",
+  paused: _sharedUi.buoyColors.textMuted + "1A",
+  noObserver: _sharedUi.buoyColors.textMuted + "1A",
+  error: _sharedUi.buoyColors.error + "15",
+  inactive: _sharedUi.buoyColors.textMuted + "1A"
+};
+const borderColors = {
+  fresh: _sharedUi.buoyColors.success + "33",
+  stale: _sharedUi.buoyColors.warning + "33",
+  fetching: _sharedUi.buoyColors.primary + "33",
+  paused: _sharedUi.buoyColors.textMuted + "33",
+  noObserver: _sharedUi.buoyColors.textMuted + "33",
+  error: _sharedUi.buoyColors.error + "33",
+  inactive: _sharedUi.buoyColors.textMuted + "33"
+};
+const textColors = {
+  fresh: _sharedUi.buoyColors.success,
+  stale: _sharedUi.buoyColors.warning,
+  fetching: _sharedUi.buoyColors.primary,
+  paused: _sharedUi.buoyColors.textMuted,
+  noObserver: _sharedUi.buoyColors.textMuted,
+  error: _sharedUi.buoyColors.error,
+  inactive: _sharedUi.buoyColors.textMuted
+};
+/**
+ * Chip component used to display small query metadata values (status, observers, etc.).
+ */
+function QueryDetailsChip({
+  query
+}) {
+  const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
+  const backgroundColor = backgroundColors[status];
+  const borderColor = borderColors[status];
+  const textColor = textColors[status];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor,
+      borderColor
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, {
+        color: textColor
+      }],
+      children: status
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderRadius: 6,
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontSize: 11,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    fontFamily: "monospace"
+  }
+});

package/lib/commonjs/react-query/components/query-browser/QueryInformation.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryInformation;
+var _QueryDetails = _interopRequireDefault(require("./QueryDetails"));
+var _QueryActions = _interopRequireDefault(require("./QueryActions"));
+var _Explorer = _interopRequireDefault(require("./Explorer"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Stacked detail view combining metadata, actions, and explorers for the selected query.
+ */
+function QueryInformation({
+  selectedQuery,
+  setSelectedQuery
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    "sentry-label": "ignore devtools query info scroll",
+    style: styles.flexOne,
+    contentContainerStyle: styles.scrollContent,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.section,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDetails.default, {
+        query: selectedQuery
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.section,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryActions.default, {
+        query: selectedQuery,
+        setSelectedQuery: setSelectedQuery
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.headerText,
+        children: "Data Explorer"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.contentView,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Explorer.default, {
+          editable: true,
+          label: "Data",
+          value: selectedQuery?.state.data,
+          defaultExpanded: ["Data"],
+          activeQuery: selectedQuery
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.headerText,
+        children: "Query Explorer"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.contentView,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Explorer.default, {
+          label: "Query",
+          value: selectedQuery,
+          defaultExpanded: ["Query", "queryKey"],
+          activeQuery: selectedQuery
+        })
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  flexOne: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  scrollContent: {
+    paddingBottom: 16,
+    paddingHorizontal: 8
+  },
+  section: {
+    marginBottom: 16
+  },
+  headerText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    marginBottom: 8,
+    textAlign: "left"
+  },
+  contentView: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 16
+  }
+});

package/lib/commonjs/react-query/components/query-browser/QueryRow.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
+var _formatRelativeTime = require("../../utils/formatRelativeTime");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+const getQueryText = query => {
+  if (!query?.queryKey) return "Unknown Query";
+  const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+  return keys.filter(k => k != null).map(k => String(k)).join(" › ") || "Unknown Query";
+};
+/**
+ * Single row representation of a query for the list view, showing status and observer count.
+ */
+const QueryRow = ({
+  query,
+  isSelected,
+  onSelect
+}) => {
+  // Buoy theme status color mapping
+  const getStatusHexColor = status => {
+    switch (status) {
+      case "disabled":
+        return _sharedUi.buoyColors.textMuted + "80";
+      // More muted for disabled
+      case "fresh":
+        return _sharedUi.buoyColors.success;
+      case "stale":
+        return _sharedUi.buoyColors.warning;
+      case "inactive":
+        return _sharedUi.buoyColors.textMuted;
+      case "fetching":
+        return _sharedUi.buoyColors.primary;
+      // teal instead of blue
+      case "paused":
+        return _sharedUi.buoyColors.textMuted;
+      // muted instead of purple
+      default:
+        return _sharedUi.buoyColors.textSecondary;
+    }
+  };
+  const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
+  const observerCount = query.getObserversCount();
+  const isDisabled = query.isDisabled();
+  const queryHash = getQueryText(query);
+
+  // Get last updated time - try multiple timestamp fields
+  const getTimestamp = () => {
+    // Special handling for disabled queries
+    if (isDisabled) {
+      return "Disabled";
+    }
+
+    // Primary: dataUpdatedAt (when data was last fetched/updated)
+    if (query.state.dataUpdatedAt && query.state.dataUpdatedAt > 0) {
+      return (0, _formatRelativeTime.formatRelativeTime)(query.state.dataUpdatedAt);
+    }
+
+    // Fallback: Check other potential timestamp fields
+    // @ts-ignore - exploring state fields for debugging
+    const stateAny = query.state;
+
+    // Try fetchedAt or other common timestamp fields
+    if (stateAny.fetchedAt && stateAny.fetchedAt > 0) {
+      return (0, _formatRelativeTime.formatRelativeTime)(stateAny.fetchedAt);
+    }
+
+    // For queries that haven't fetched yet (but aren't disabled)
+    if (query.state.dataUpdatedAt === 0) {
+      return "Not fetched";
+    }
+
+    // Debug fallback - show what we have
+    return `N/A (${query.state.dataUpdatedAt || 0})`;
+  };
+  const lastUpdated = getTimestamp();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
+    statusDotColor: getStatusHexColor(status),
+    statusLabel: status.charAt(0).toUpperCase() + status.slice(1),
+    statusSublabel: `${observerCount} observer${observerCount !== 1 ? "s" : ""}`,
+    primaryText: queryHash,
+    bottomRightText: lastUpdated,
+    badgeText: observerCount,
+    badgeColor: getStatusHexColor(status),
+    isSelected: isSelected,
+    onPress: () => onSelect(query)
+  });
+};
+var _default = exports.default = QueryRow;

package/lib/commonjs/react-query/components/query-browser/QueryStatus.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Pill-like status badge used within status filter rows. Displays label, dot, and count.
+ */
+const QueryStatus = ({
+  label,
+  color,
+  count,
+  showLabel = true,
+  isActive = false,
+  onPress,
+  onTouchStart
+}) => {
+  // Buoy theme color mapping for status indicators
+  const getStatusColors = colorName => {
+    const colorMap = {
+      green: {
+        bg: _sharedUi.buoyColors.success + "15",
+        border: _sharedUi.buoyColors.success + "40",
+        dot: _sharedUi.buoyColors.success,
+        text: _sharedUi.buoyColors.success
+      },
+      yellow: {
+        bg: _sharedUi.buoyColors.warning + "15",
+        border: _sharedUi.buoyColors.warning + "40",
+        dot: _sharedUi.buoyColors.warning,
+        text: _sharedUi.buoyColors.warning
+      },
+      blue: {
+        bg: _sharedUi.buoyColors.primary + "15",
+        border: _sharedUi.buoyColors.primary + "40",
+        dot: _sharedUi.buoyColors.primary,
+        text: _sharedUi.buoyColors.primary
+      },
+      purple: {
+        bg: _sharedUi.buoyColors.textMuted + "26",
+        border: _sharedUi.buoyColors.textMuted + "59",
+        dot: _sharedUi.buoyColors.textMuted,
+        text: _sharedUi.buoyColors.textMuted
+      },
+      red: {
+        bg: _sharedUi.buoyColors.error + "15",
+        border: _sharedUi.buoyColors.error + "40",
+        dot: _sharedUi.buoyColors.error,
+        text: _sharedUi.buoyColors.error
+      },
+      gray: {
+        bg: _sharedUi.buoyColors.textMuted + "26",
+        border: _sharedUi.buoyColors.textMuted + "59",
+        dot: _sharedUi.buoyColors.textMuted,
+        text: _sharedUi.buoyColors.textMuted
+      }
+    };
+    return colorMap[colorName] || colorMap.gray;
+  };
+  const statusColors = getStatusColors(color);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    "sentry-label": "ignore devtools query status",
+    style: [styles.queryStatusTag, isActive && {
+      backgroundColor: statusColors.dot + "15",
+      borderColor: statusColors.dot + "40"
+    }],
+    disabled: !onPress,
+    onPress: onPress,
+    onPressIn: onTouchStart,
+    activeOpacity: 0.7,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.dot, {
+        backgroundColor: statusColors.dot
+      }]
+    }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label],
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      children: label
+    }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.count, {
+        color: statusColors.dot
+      }],
+      numberOfLines: 1,
+      children: count
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  queryStatusTag: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    height: 26,
+    gap: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.textMuted + "20"
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "500",
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "system"
+  },
+  count: {
+    fontSize: 11,
+    fontVariant: ["tabular-nums"],
+    fontWeight: "600",
+    marginLeft: "auto",
+    fontFamily: "system"
+  }
+});
+var _default = exports.default = QueryStatus;

package/lib/commonjs/react-query/components/query-browser/QueryStatusCount.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
+var _useQueryStatusCounts = _interopRequireDefault(require("../../hooks/useQueryStatusCounts"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Horizontal status filter bar for queries with scroll-aware tap handling to prevent misfires.
+ */
+const QueryStatusCount = ({
+  activeFilter,
+  onFilterChange
+}) => {
+  const {
+    fresh,
+    stale,
+    fetching,
+    paused,
+    inactive
+  } = (0, _useQueryStatusCounts.default)();
+
+  // Scroll state management like ChipTabs
+  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
+  const touchStartX = (0, _react.useRef)(0);
+  const touchStartY = (0, _react.useRef)(0);
+  const handleFilterClick = (filter, event) => {
+    if (event) {
+      // Calculate distance moved during touch (like ChipTabs)
+      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
+      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
+
+      // If touch moved more than 5px in any direction, it's a swipe, not a tap
+      if (dx > 5 || dy > 5 || isScrolling) {
+        return; // Don't trigger filter change
+      }
+    }
+    if (onFilterChange) {
+      // Toggle filter: if already active, clear it; otherwise set it
+      onFilterChange(activeFilter === filter ? null : filter);
+    }
+  };
+  const handleTouchStart = event => {
+    touchStartX.current = event.nativeEvent.pageX;
+    touchStartY.current = event.nativeEvent.pageY;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.queryStatusContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      "sentry-label": "ignore devtools query status count scroll",
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: styles.scrollView,
+      contentContainerStyle: styles.scrollContent,
+      onScrollBeginDrag: () => setIsScrolling(true),
+      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
+      onMomentumScrollBegin: () => setIsScrolling(true),
+      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Fresh",
+        color: "green",
+        count: fresh,
+        isActive: activeFilter === "fresh",
+        onPress: event => handleFilterClick("fresh", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Loading",
+        color: "blue",
+        count: fetching,
+        isActive: activeFilter === "fetching",
+        onPress: event => handleFilterClick("fetching", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Paused",
+        color: "purple",
+        count: paused,
+        isActive: activeFilter === "paused",
+        onPress: event => handleFilterClick("paused", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Stale",
+        color: "yellow",
+        count: stale,
+        isActive: activeFilter === "stale",
+        onPress: event => handleFilterClick("stale", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Idle",
+        color: "gray",
+        count: inactive,
+        isActive: activeFilter === "inactive",
+        onPress: event => handleFilterClick("inactive", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      })]
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  queryStatusContainer: {
+    // Container for ScrollView - take full width
+    flex: 1,
+    minWidth: 0
+  },
+  scrollView: {
+    // ScrollView itself styles
+    flex: 1
+  },
+  scrollContent: {
+    // ScrollView content styles
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    // Spacing between chips
+    paddingHorizontal: 4,
+    // Small padding on ends
+    paddingVertical: 4,
+    flexGrow: 1 // Allow content to grow to fill available space
+  }
+});
+var _default = exports.default = QueryStatusCount;

package/lib/commonjs/react-query/components/query-browser/StorageStatusCount.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
+var _storageQueryUtils = require("../../utils/storageQueryUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const allStorageTypes = ["mmkv", "async", "secure"];
+
+/**
+ * Storage type filter component following composition principles
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Dedicated component for storage type filtering
+ * - No unnecessary memoization - simple toggle state management [[memory:4875074]]
+ */
+const StorageStatusCount = ({
+  activeStorageTypes = new Set(allStorageTypes),
+  onStorageTypesChange,
+  counts
+}) => {
+  // Scroll state management like QueryStatusCount
+  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
+  const touchStartX = (0, _react.useRef)(0);
+  const touchStartY = (0, _react.useRef)(0);
+  const handleStorageTypeToggle = (storageType, event) => {
+    if (event) {
+      // Calculate distance moved during touch (like QueryStatusCount)
+      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
+      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
+
+      // If touch moved more than 5px in any direction, it's a swipe, not a tap
+      if (dx > 5 || dy > 5 || isScrolling) {
+        return; // Don't trigger filter change
+      }
+    }
+    if (onStorageTypesChange) {
+      const newStorageTypes = new Set(activeStorageTypes);
+      if (newStorageTypes.has(storageType)) {
+        newStorageTypes.delete(storageType);
+      } else {
+        newStorageTypes.add(storageType);
+      }
+      onStorageTypesChange(newStorageTypes);
+    }
+  };
+  const handleTouchStart = event => {
+    touchStartX.current = event.nativeEvent.pageX;
+    touchStartY.current = event.nativeEvent.pageY;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.storageStatusContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      "sentry-label": "ignore devtools storage status count scroll",
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: styles.scrollView,
+      contentContainerStyle: styles.scrollContent,
+      onScrollBeginDrag: () => setIsScrolling(true),
+      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
+      onMomentumScrollBegin: () => setIsScrolling(true),
+      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
+      children: allStorageTypes.map(storageType => {
+        const count = counts?.[storageType] ?? 0;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+          label: (0, _storageQueryUtils.getStorageTypeLabel)(storageType),
+          color: (0, _storageQueryUtils.getStorageTypeColor)(storageType),
+          count: count // Show actual storage query counts
+          ,
+          isActive: activeStorageTypes.has(storageType),
+          onPress: event => handleStorageTypeToggle(storageType, event),
+          onTouchStart: handleTouchStart,
+          showLabel: true
+        }, storageType);
+      })
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  storageStatusContainer: {
+    // Container for ScrollView - take full width
+    flex: 1,
+    minWidth: 0
+  },
+  scrollView: {
+    // ScrollView itself styles
+    flex: 1
+  },
+  scrollContent: {
+    // ScrollView content styles
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    // Spacing between chips
+    paddingHorizontal: 4,
+    // Small padding on ends
+    paddingVertical: 4,
+    flexGrow: 1 // Allow content to grow to fill available space
+  }
+});
+var _default = exports.default = StorageStatusCount;