@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/components/QueryFilterViewV3.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryFilterViewV3 = QueryFilterViewV3;
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _getQueryStatusLabel = require("../utils/getQueryStatusLabel");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Comprehensive filter control panel for React Query DevTools matching the Network DevTools
+ * filter UI pattern. Provides status filtering and query key pattern-based filtering.
+ */
+function QueryFilterViewV3({
+  queries,
+  activeFilter,
+  onFilterChange,
+  ignoredPatterns,
+  onPatternToggle,
+  includedPatterns,
+  onIncludedPatternToggle
+}) {
+  // Calculate status counts
+  const statusCounts = (0, _react.useMemo)(() => {
+    const counts = {
+      all: queries.length,
+      disabled: 0,
+      fresh: 0,
+      stale: 0,
+      fetching: 0,
+      paused: 0,
+      inactive: 0,
+      error: 0
+    };
+    queries.forEach(query => {
+      const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
+      if (status === "disabled") counts.disabled++;else if (status === "fresh") counts.fresh++;else if (status === "stale") counts.stale++;else if (status === "fetching") counts.fetching++;else if (status === "paused") counts.paused++;else if (status === "inactive") counts.inactive++;
+      if (query.state.error) counts.error++;
+    });
+    return counts;
+  }, [queries]);
+
+  // Extract available query keys (excluding numeric-only keys)
+  const availableQueryKeys = (0, _react.useMemo)(() => {
+    const keys = new Set();
+    queries.forEach(query => {
+      if (!query?.queryKey) return;
+      const queryKeys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+      queryKeys.forEach(key => {
+        if (key != null) {
+          const keyStr = String(key);
+          // Skip if key is purely numeric (likely a dynamic ID)
+          if (!/^\d+$/.test(keyStr)) {
+            keys.add(keyStr);
+          }
+        }
+      });
+    });
+    return Array.from(keys).sort().slice(0, 50); // Limit to 50
+  }, [queries]);
+
+  // Convert available query keys to suggestion items (just strings)
+  const suggestionItems = (0, _react.useMemo)(() => {
+    return availableQueryKeys;
+  }, [availableQueryKeys]);
+
+  // Calculate filtered query count based on active patterns
+  const filteredCount = (0, _react.useMemo)(() => {
+    let filtered = queries;
+
+    // Apply included patterns filter
+    if (includedPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return false;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Apply ignored patterns filter
+    if (ignoredPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return true;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+    return filtered.length;
+  }, [queries, includedPatterns, ignoredPatterns]);
+
+  // Build the filter configuration
+  const filterConfig = (0, _react.useMemo)(() => {
+    return {
+      filterSummarySection: {
+        enabled: true,
+        totalCount: queries.length,
+        filteredCount: filteredCount,
+        includePatterns: includedPatterns,
+        excludePatterns: ignoredPatterns
+      },
+      sections: [
+      // Status section - radio button style
+      {
+        id: "status",
+        title: "Status",
+        type: "status",
+        data: [{
+          id: "status::all",
+          label: "All",
+          count: statusCounts.all,
+          icon: _sharedUi.Globe,
+          color: _sharedUi.buoyColors.primary,
+          isActive: !activeFilter || activeFilter === "all"
+        }, {
+          id: "status::disabled",
+          label: "Disabled",
+          count: statusCounts.disabled,
+          icon: _sharedUi.XCircle,
+          color: _sharedUi.buoyColors.textMuted,
+          isActive: activeFilter === "disabled"
+        }, {
+          id: "status::fresh",
+          label: "Fresh",
+          count: statusCounts.fresh,
+          icon: _sharedUi.Zap,
+          color: _sharedUi.buoyColors.success,
+          isActive: activeFilter === "fresh"
+        }, {
+          id: "status::stale",
+          label: "Stale",
+          count: statusCounts.stale,
+          icon: _sharedUi.Clock,
+          color: _sharedUi.buoyColors.warning,
+          isActive: activeFilter === "stale"
+        }, {
+          id: "status::fetching",
+          label: "Fetching",
+          count: statusCounts.fetching,
+          icon: _sharedUi.RefreshCw,
+          color: _sharedUi.buoyColors.primary,
+          isActive: activeFilter === "fetching"
+        }, {
+          id: "status::paused",
+          label: "Paused",
+          count: statusCounts.paused,
+          icon: _sharedUi.Clock,
+          color: _sharedUi.buoyColors.textMuted,
+          isActive: activeFilter === "paused"
+        }, {
+          id: "status::inactive",
+          label: "Inactive",
+          count: statusCounts.inactive,
+          icon: _sharedUi.Clock,
+          color: _sharedUi.buoyColors.textSecondary,
+          isActive: activeFilter === "inactive"
+        }, {
+          id: "status::error",
+          label: "Error",
+          count: statusCounts.error,
+          icon: _sharedUi.XCircle,
+          color: _sharedUi.buoyColors.error,
+          isActive: activeFilter === "error"
+        }]
+      }],
+      addFilterSection: {
+        enabled: true,
+        placeholder: "Enter pattern to exclude...",
+        title: "EXCLUDE FILTERS",
+        icon: _sharedUi.Filter
+      },
+      includeOnlySection: {
+        enabled: true,
+        title: "INCLUDE ONLY FILTERS",
+        description: "Show ONLY queries matching these patterns. All non-matching queries will be hidden.",
+        placeholder: "Enter pattern to include...",
+        icon: _sharedUi.Eye,
+        patterns: includedPatterns,
+        onPatternToggle: onIncludedPatternToggle,
+        onPatternAdd: onIncludedPatternToggle
+      },
+      availableItemsSection: {
+        enabled: true,
+        title: "AVAILABLE QUERY KEYS",
+        emptyMessage: "No queries found. Query keys will appear here once queries are active.",
+        items: suggestionItems
+      },
+      howItWorksSection: {
+        enabled: true,
+        title: "HOW QUERY FILTERS WORK",
+        description: "There are two types of query key filters:",
+        examples: ["", "INCLUDE ONLY (green):", "• Shows ONLY queries matching the pattern", "• Example: 'rewards' → shows only reward queries", "• When active, non-matching queries are hidden", "", "EXCLUDE (blue):", "• Hides queries matching the pattern", "• Example: 'analytics' → hides analytics queries", "", "Filters are case-insensitive and match partial keys."]
+      },
+      activePatterns: ignoredPatterns
+    };
+  }, [statusCounts, activeFilter, ignoredPatterns, includedPatterns, suggestionItems, onIncludedPatternToggle, queries.length, filteredCount]);
+
+  // Handle filter item clicks
+  const handleFilterSelect = itemId => {
+    const [section, value] = itemId.split("::");
+    if (section === "status") {
+      // Status filters are mutually exclusive
+      if (value === "all" || activeFilter === value) {
+        onFilterChange(null);
+      } else {
+        onFilterChange(value);
+      }
+    } else if (section === "suggestion") {
+      // Toggle pattern
+      onPatternToggle(value);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DynamicFilterView, {
+    ...filterConfig,
+    onFilterChange: handleFilterSelect,
+    onPatternToggle: onPatternToggle,
+    onPatternAdd: onPatternToggle
+  });
+}

package/lib/commonjs/react-query/components/QuerySelector.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuerySelector = QuerySelector;
+var _reactNative = require("react-native");
+var _getQueryStatusColor = require("../utils/getQueryStatusColor");
+var _QueryDebugInfo = require("./QueryDebugInfo");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Modal selector that lists all known queries, highlighting status and enabling the user to focus
+ * a specific query within the dev tools experience.
+ */
+function QuerySelector({
+  queries,
+  selectedQuery,
+  isOpen,
+  onClose,
+  onSelect
+}) {
+  const getQueryDisplayName = query => {
+    return Array.isArray(query.queryKey) ? query.queryKey.join(" - ") : String(query.queryKey);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    accessibilityLabel: "Query selector",
+    accessibilityHint: "View query selector",
+    "sentry-label": "ignore query selector",
+    visible: isOpen,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      accessibilityLabel: "Query selector overlay",
+      accessibilityHint: "View query selector overlay",
+      "sentry-label": "ignore query selector overlay",
+      style: styles.modalOverlay,
+      onPress: onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        accessibilityLabel: "Query selector content",
+        accessibilityHint: "View query selector content",
+        "sentry-label": "ignore query selector content",
+        style: styles.modalContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.modalHeader,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.modalTitle,
+            children: "Select Query"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.modalSubtitle,
+            children: [queries.length, " ", queries.length === 1 ? "query" : "queries", " ", "available"]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          accessibilityLabel: "Query selector scroll view",
+          accessibilityHint: "View query selector scroll view",
+          "sentry-label": "ignore query selector scroll view",
+          style: styles.scrollView,
+          contentContainerStyle: styles.scrollViewContent,
+          showsVerticalScrollIndicator: true,
+          children: queries.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.emptyState,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.emptyTitle,
+              children: "No Queries Found"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.emptyDescription,
+              children: ["No React Query queries are currently active.", "\n\n", "To see queries here:", "\n", "\u2022 Make API calls using useQuery", "\n", "\u2022 Ensure queries are within QueryClientProvider", "\n", "\u2022 Check console for debugging info"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDebugInfo.QueryDebugInfo, {})]
+          }) : queries.map((query, index) => {
+            const displayName = getQueryDisplayName(query);
+            const statusColorName = (0, _getQueryStatusColor.getQueryStatusColor)({
+              queryState: query.state,
+              observerCount: query.getObserversCount(),
+              isStale: query.isStale()
+            });
+
+            // Convert color names to hex colors
+            const colorMap = {
+              blue: "#3B82F6",
+              gray: "#6B7280",
+              purple: "#8B5CF6",
+              yellow: "#F59E0B",
+              green: "#10B981"
+            };
+            const statusColor = colorMap[statusColorName] || "#6B7280";
+            const isSelected = query === selectedQuery;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              accessibilityLabel: `Query ${displayName}`,
+              accessibilityHint: `View query ${displayName}`,
+              "sentry-label": `ignore query ${displayName}`,
+              style: [styles.queryItem, isSelected && styles.selectedQueryItem],
+              onPress: () => onSelect(query),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.statusDot, {
+                  backgroundColor: statusColor
+                }]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.queryText, isSelected && styles.selectedQueryText],
+                numberOfLines: 1,
+                children: displayName
+              })]
+            }, `${query.queryHash}-${index}`);
+          })
+        })]
+      })
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  modalContent: {
+    backgroundColor: "#1F1F1F",
+    borderRadius: 8,
+    width: "80%",
+    maxHeight: "80%",
+    minHeight: "50%",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    flex: 0
+  },
+  modalHeader: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.1)"
+  },
+  modalTitle: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 4
+  },
+  modalSubtitle: {
+    color: "#9CA3AF",
+    fontSize: 12
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollViewContent: {
+    padding: 8,
+    flexGrow: 1
+  },
+  emptyState: {
+    padding: 32,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  emptyTitle: {
+    color: "#E5E7EB",
+    fontSize: 16,
+    fontWeight: "500",
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  emptyDescription: {
+    color: "#9CA3AF",
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20
+  },
+  queryItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    borderRadius: 4
+  },
+  selectedQueryItem: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 8
+  },
+  queryText: {
+    color: "#E5E7EB",
+    fontSize: 14,
+    flex: 1
+  },
+  selectedQueryText: {
+    color: "#FFFFFF",
+    fontWeight: "500"
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    minWidth: 120,
+    maxWidth: 200
+  },
+  triggerText: {
+    color: "#E5E7EB",
+    fontSize: 12,
+    flex: 1,
+    marginHorizontal: 6
+  }
+});

package/lib/commonjs/react-query/components/ReactQueryDevToolsModal.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactQueryDevToolsModal = ReactQueryDevToolsModal;
+var _react = require("react");
+var _ReactQueryModal = require("./modals/ReactQueryModal");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Configuration options for the high-level React Query dev tools modal wrapper. */
+
+/**
+ * Opinionated wrapper around `ReactQueryModal` that manages selection state and filters so
+ * consumers can drop in the full dev tools experience with a single component.
+ */
+function ReactQueryDevToolsModal({
+  visible,
+  onClose,
+  onMinimize,
+  enableSharedModalDimensions = true
+}) {
+  const [selectedQueryKey, setSelectedQueryKey] = (0, _react.useState)(undefined);
+  const [selectedMutationId, setSelectedMutationId] = (0, _react.useState)(undefined);
+  const [activeFilter, setActiveFilter] = (0, _react.useState)(null);
+  const [activeTab, setActiveTab] = (0, _react.useState)("queries");
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const resetState = (0, _react.useCallback)(() => {
+    setSelectedQueryKey(undefined);
+    setSelectedMutationId(undefined);
+    setActiveFilter(null);
+    setActiveTab("queries");
+    setSearchText("");
+  }, []);
+  const handleClose = (0, _react.useCallback)(() => {
+    resetState();
+    onClose();
+  }, [onClose, resetState]);
+  const handleQuerySelect = (0, _react.useCallback)(query => {
+    setSelectedQueryKey(query?.queryKey);
+  }, []);
+  const handleMutationSelect = (0, _react.useCallback)(mutation => {
+    setSelectedMutationId(mutation?.mutationId);
+  }, []);
+  const handleFilterChange = (0, _react.useCallback)(filter => {
+    setActiveFilter(filter);
+  }, []);
+  const handleTabChange = (0, _react.useCallback)(tab => {
+    setActiveTab(tab);
+    setActiveFilter(null);
+    setSelectedQueryKey(undefined);
+    setSelectedMutationId(undefined);
+    setSearchText("");
+  }, []);
+  const handleSearchChange = (0, _react.useCallback)(text => {
+    setSearchText(text);
+  }, []);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactQueryModal.ReactQueryModal, {
+    visible: visible,
+    selectedQueryKey: selectedQueryKey,
+    selectedMutationId: selectedMutationId,
+    onQuerySelect: handleQuerySelect,
+    onMutationSelect: handleMutationSelect,
+    onClose: handleClose,
+    onMinimize: onMinimize,
+    activeFilter: activeFilter,
+    onFilterChange: handleFilterChange,
+    activeTab: activeTab,
+    onTabChange: handleTabChange,
+    searchText: searchText,
+    onSearchChange: handleSearchChange,
+    enableSharedModalDimensions: enableSharedModalDimensions
+  });
+}

package/lib/commonjs/react-query/components/ReactQuerySection.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactQuerySection = ReactQuerySection;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _svgs = require("./query-browser/svgs");
+var _jsxRuntime = require("react/jsx-runtime");
+// Component definition moved outside render to prevent recreation on every render
+const TanstackIcon = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    width: 24,
+    height: 24
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.TanstackLogo, {})
+});
+
+/**
+ * React Query section component following composition principles.
+ * Encapsulates React Query specific business logic and UI.
+ */
+function ReactQuerySection({
+  onPress,
+  getReactBuoySubtitle
+}) {
+  // Format subtitle to be shorter: "45 queries • 10 mutations" → "45Q • 10M"
+  const formatSubtitle = () => {
+    const full = getReactBuoySubtitle();
+    const match = full.match(/(\d+) queries • (\d+) mutations/);
+    if (match) {
+      return `${match[1]}Q • ${match[2]}M`;
+    }
+    return "No data";
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CyberpunkSectionButton, {
+    id: "react-buoy-dev-tools",
+    title: "QUERY",
+    subtitle: formatSubtitle(),
+    icon: TanstackIcon,
+    iconColor: _sharedUi.buoyColors.error,
+    iconBackgroundColor: _sharedUi.buoyColors.error + "1A",
+    onPress: onPress,
+    index: 1
+  });
+}

package/lib/commonjs/react-query/components/WifiToggle.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WifiToggle = WifiToggle;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _useWifiState = require("../hooks/useWifiState");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Small icon button that toggles React Query’s online manager, allowing developers to simulate
+ * offline scenarios directly from the modal header.
+ */
+function WifiToggle({
+  size = 16
+}) {
+  const {
+    isOnline,
+    handleWifiToggle
+  } = (0, _useWifiState.useWifiState)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    "sentry-label": `ignore toggle WiFi ${isOnline ? "On" : "Off"}`,
+    accessibilityRole: "button",
+    accessibilityLabel: `WiFi ${isOnline ? "On" : "Off"}`,
+    accessibilityHint: `Tap to turn WiFi ${isOnline ? "off" : "on"} for React Query`,
+    onPress: handleWifiToggle,
+    hitSlop: {
+      top: 10,
+      bottom: 10,
+      left: 10,
+      right: 10
+    },
+    activeOpacity: 0.7,
+    style: {
+      alignItems: "center",
+      justifyContent: "center",
+      width: 14,
+      flexShrink: 0
+    },
+    children: isOnline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
+      size: size,
+      color: "#10B981"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
+      size: size,
+      color: "#DC2626"
+    })
+  });
+}