@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,72 @@
+"use strict";
+
+import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
+import { Text, View, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+const backgroundColors = {
+  fresh: buoyColors.success + "15",
+  stale: buoyColors.warning + "15",
+  fetching: buoyColors.primary + "15",
+  paused: buoyColors.textMuted + "1A",
+  noObserver: buoyColors.textMuted + "1A",
+  error: buoyColors.error + "15",
+  inactive: buoyColors.textMuted + "1A"
+};
+const borderColors = {
+  fresh: buoyColors.success + "33",
+  stale: buoyColors.warning + "33",
+  fetching: buoyColors.primary + "33",
+  paused: buoyColors.textMuted + "33",
+  noObserver: buoyColors.textMuted + "33",
+  error: buoyColors.error + "33",
+  inactive: buoyColors.textMuted + "33"
+};
+const textColors = {
+  fresh: buoyColors.success,
+  stale: buoyColors.warning,
+  fetching: buoyColors.primary,
+  paused: buoyColors.textMuted,
+  noObserver: buoyColors.textMuted,
+  error: buoyColors.error,
+  inactive: buoyColors.textMuted
+};
+/**
+ * Chip component used to display small query metadata values (status, observers, etc.).
+ */
+export default function QueryDetailsChip({
+  query
+}) {
+  const status = getQueryStatusLabel(query);
+  const backgroundColor = backgroundColors[status];
+  const borderColor = borderColors[status];
+  const textColor = textColors[status];
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, {
+      backgroundColor,
+      borderColor
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: textColor
+      }],
+      children: status
+    })
+  });
+}
+const styles = 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/module/react-query/components/query-browser/QueryInformation.js

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

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

@@ -0,0 +1,89 @@
+"use strict";
+
+import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
+import { formatRelativeTime } from "../../utils/formatRelativeTime";
+import { CompactRow, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "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 buoyColors.textMuted + "80";
+      // More muted for disabled
+      case "fresh":
+        return buoyColors.success;
+      case "stale":
+        return buoyColors.warning;
+      case "inactive":
+        return buoyColors.textMuted;
+      case "fetching":
+        return buoyColors.primary;
+      // teal instead of blue
+      case "paused":
+        return buoyColors.textMuted;
+      // muted instead of purple
+      default:
+        return buoyColors.textSecondary;
+    }
+  };
+  const status = 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 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 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__*/_jsx(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)
+  });
+};
+export default QueryRow;

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

@@ -0,0 +1,121 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "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: buoyColors.success + "15",
+        border: buoyColors.success + "40",
+        dot: buoyColors.success,
+        text: buoyColors.success
+      },
+      yellow: {
+        bg: buoyColors.warning + "15",
+        border: buoyColors.warning + "40",
+        dot: buoyColors.warning,
+        text: buoyColors.warning
+      },
+      blue: {
+        bg: buoyColors.primary + "15",
+        border: buoyColors.primary + "40",
+        dot: buoyColors.primary,
+        text: buoyColors.primary
+      },
+      purple: {
+        bg: buoyColors.textMuted + "26",
+        border: buoyColors.textMuted + "59",
+        dot: buoyColors.textMuted,
+        text: buoyColors.textMuted
+      },
+      red: {
+        bg: buoyColors.error + "15",
+        border: buoyColors.error + "40",
+        dot: buoyColors.error,
+        text: buoyColors.error
+      },
+      gray: {
+        bg: buoyColors.textMuted + "26",
+        border: buoyColors.textMuted + "59",
+        dot: buoyColors.textMuted,
+        text: buoyColors.textMuted
+      }
+    };
+    return colorMap[colorName] || colorMap.gray;
+  };
+  const statusColors = getStatusColors(color);
+  return /*#__PURE__*/_jsxs(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__*/_jsx(View, {
+      style: [styles.dot, {
+        backgroundColor: statusColors.dot
+      }]
+    }), showLabel && /*#__PURE__*/_jsx(Text, {
+      style: [styles.label],
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      children: label
+    }), count > 0 && /*#__PURE__*/_jsx(Text, {
+      style: [styles.count, {
+        color: statusColors.dot
+      }],
+      numberOfLines: 1,
+      children: count
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  queryStatusTag: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    height: 26,
+    gap: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.textMuted + "20"
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "500",
+    color: buoyColors.textSecondary,
+    fontFamily: "system"
+  },
+  count: {
+    fontSize: 11,
+    fontVariant: ["tabular-nums"],
+    fontWeight: "600",
+    marginLeft: "auto",
+    fontFamily: "system"
+  }
+});
+export default QueryStatus;

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

@@ -0,0 +1,125 @@
+"use strict";
+
+import { useRef, useState } from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
+import QueryStatus from "./QueryStatus";
+import useQueryStatusCounts from "../../hooks/useQueryStatusCounts";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Horizontal status filter bar for queries with scroll-aware tap handling to prevent misfires.
+ */
+const QueryStatusCount = ({
+  activeFilter,
+  onFilterChange
+}) => {
+  const {
+    fresh,
+    stale,
+    fetching,
+    paused,
+    inactive
+  } = useQueryStatusCounts();
+
+  // Scroll state management like ChipTabs
+  const [isScrolling, setIsScrolling] = useState(false);
+  const touchStartX = useRef(0);
+  const touchStartY = 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__*/_jsx(View, {
+    style: styles.queryStatusContainer,
+    children: /*#__PURE__*/_jsxs(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__*/_jsx(QueryStatus, {
+        label: "Fresh",
+        color: "green",
+        count: fresh,
+        isActive: activeFilter === "fresh",
+        onPress: event => handleFilterClick("fresh", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Loading",
+        color: "blue",
+        count: fetching,
+        isActive: activeFilter === "fetching",
+        onPress: event => handleFilterClick("fetching", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Paused",
+        color: "purple",
+        count: paused,
+        isActive: activeFilter === "paused",
+        onPress: event => handleFilterClick("paused", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Stale",
+        color: "yellow",
+        count: stale,
+        isActive: activeFilter === "stale",
+        onPress: event => handleFilterClick("stale", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Idle",
+        color: "gray",
+        count: inactive,
+        isActive: activeFilter === "inactive",
+        onPress: event => handleFilterClick("inactive", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true // Always show labels now
+      })]
+    })
+  });
+};
+const styles = 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
+  }
+});
+export default QueryStatusCount;

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

@@ -0,0 +1,101 @@
+"use strict";
+
+import { useRef, useState } from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
+import QueryStatus from "./QueryStatus";
+import { getStorageTypeLabel, getStorageTypeColor } from "../../utils/storageQueryUtils";
+import { jsx as _jsx } from "react/jsx-runtime";
+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] = useState(false);
+  const touchStartX = useRef(0);
+  const touchStartY = 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__*/_jsx(View, {
+    style: styles.storageStatusContainer,
+    children: /*#__PURE__*/_jsx(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__*/_jsx(QueryStatus, {
+          label: getStorageTypeLabel(storageType),
+          color: 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 = 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
+  }
+});
+export default StorageStatusCount;

package/lib/module/react-query/components/query-browser/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+export { default as Explorer } from "./Explorer";
+export { default as QueryBrowser } from "./QueryBrowser";
+export { default as QueryDetails } from "./QueryDetails";
+export { default as QueryInformation } from "./QueryInformation";
+export { default as QueryActions } from "./QueryActions";
+export { default as QueryRow } from "./QueryRow";
+export { default as QueryStatus } from "./QueryStatus";
+export { default as QueryStatusCount } from "./QueryStatusCount";
+export { default as QueryDetailsChip } from "./QueryDetailsChip";
+export { default as MutationsList } from "./MutationsList";
+export { default as MutationDetails } from "./MutationDetails";
+export { default as MutationInformation } from "./MutationInformation";
+export { default as MutationButton } from "./MutationButton";
+export { default as MutationStatusCount } from "./MutationStatusCount";
+export { default as MutationDetailsChips } from "./MutationDetailsChips";
+export { default as ActionButton } from "./ActionButton";
+export { default as ClearCacheButton } from "./ClearCacheButton";
+export { default as NetworkToggleButton } from "./NetworkToggleButton";
+export { default as StorageStatusCount } from "./StorageStatusCount";
+export { TanstackLogo, CheckCircle, LoadingCircle, PauseCircle, XCircle } from "./svgs";

package/lib/module/react-query/components/query-browser/svgs.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { ReactQueryIcon, CheckCircle as SharedCheckCircle, Activity as SharedActivity, Pause as SharedPause, XCircle as SharedXCircle, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** React Query brand mark used across the dev tools UI. */
+export function TanstackLogo({
+  size = 24
+}) {
+  return /*#__PURE__*/_jsx(ReactQueryIcon, {
+    size: size,
+    colorPreset: "red",
+    variant: "circuit"
+  });
+}
+
+/** Status icon representing successful requests. */
+export function CheckCircle({
+  size = 14,
+  color = buoyColors.success,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/_jsx(SharedCheckCircle, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}
+
+/** Status icon representing in-flight queries or mutations. */
+export function LoadingCircle({
+  size = 14,
+  color = buoyColors.warning,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/_jsx(SharedActivity, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}
+
+/** Status icon representing paused queries. */
+export function PauseCircle({
+  size = 14,
+  color = buoyColors.textMuted,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/_jsx(SharedPause, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}
+
+/** Status icon representing errored requests. */
+export function XCircle({
+  size = 14,
+  color = buoyColors.error,
+  strokeWidth = 2
+}) {
+  return /*#__PURE__*/_jsx(SharedXCircle, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth
+  });
+}