@buoy-gg/react-query 7.0.33 → 7.0.34

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

@@ -1,9 +1,8 @@
 "use strict";
 
-import { View, StyleSheet, ScrollView } from "react-native";
+import { ChipStrip, useChipTap } from "@buoy-gg/shared-ui";
 import QueryStatus from "./QueryStatus";
 import { useMutationStatusCounts } from "../../hooks/useQueryStatusCounts";
-import { useRef, useState } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Horizontal status filter bar tailored for mutations. Integrates scroll detection to avoid
@@ -20,96 +19,61 @@ const MutationStatusCount = ({
     error,
     paused
   } = useMutationStatusCounts();
-  const [isScrolling, setIsScrolling] = useState(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = useChipTap();
   const handleFilterClick = (filter, event) => {
-    if (event) {
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return;
-      }
-    }
+    if (!isTap(event)) return;
     if (onFilterChange) {
       onFilterChange(activeFilter === filter ? null : filter);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.mutationStatusContainer,
-    children: /*#__PURE__*/_jsxs(ScrollView, {
-      "sentry-label": "ignore devtools mutation 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: "Pending",
-        color: "blue",
-        count: pending,
-        isActive: activeFilter === "pending",
-        onPress: event => handleFilterClick("pending", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-pending",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Success",
-        color: "green",
-        count: success,
-        isActive: activeFilter === "success",
-        onPress: event => handleFilterClick("success", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-success",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Error",
-        color: "red",
-        count: error,
-        isActive: activeFilter === "error",
-        onPress: event => handleFilterClick("error", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-error",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Paused",
-        color: "purple",
-        count: paused,
-        isActive: activeFilter === "paused",
-        onPress: event => handleFilterClick("paused", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-paused",
-        showLabel: true,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/_jsxs(ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools mutation status count scroll",
+    children: [/*#__PURE__*/_jsx(QueryStatus, {
+      label: "Pending",
+      color: "blue",
+      count: pending,
+      isActive: activeFilter === "pending",
+      onPress: event => handleFilterClick("pending", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-pending",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Success",
+      color: "green",
+      count: success,
+      isActive: activeFilter === "success",
+      onPress: event => handleFilterClick("success", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-success",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Error",
+      color: "red",
+      count: error,
+      isActive: activeFilter === "error",
+      onPress: event => handleFilterClick("error", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-error",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Paused",
+      color: "purple",
+      count: paused,
+      isActive: activeFilter === "paused",
+      onPress: event => handleFilterClick("paused", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-paused",
+      showLabel: true,
+      size: size
+    })]
   });
 };
-const styles = StyleSheet.create({
-  mutationStatusContainer: {
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-    flexGrow: 1
-  }
-});
 export default MutationStatusCount;

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

@@ -5,7 +5,7 @@ import { StyleSheet, FlatList } from "react-native";
 import QueryRow from "./QueryRow";
 import useAllQueries from "../../hooks/useAllQueries";
 import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
-import { night, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { night, ToolEmptyState, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Scrollable list view of cached queries with filtering support and selection handling.
@@ -126,17 +126,8 @@ export default function QueryBrowser({
         isSelected: selectedQuery?.queryHash === query.queryHash,
         onSelect: handleQuerySelect
       }),
-      showsVerticalScrollIndicator: true
-      // Clipped cells fail Detox's hittability check even when they are on
-      // screen, so e2e bundles (Metro with EXPO_PUBLIC_E2E=1) turn clipping
-      // off. Inlined at bundle time; a non-inlining bundler keeps prod
-      // behavior.
-      ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      showsVerticalScrollIndicator: true,
+      ...EVENT_LIST_PRESET
     })
   );
 }

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

@@ -1,7 +1,6 @@
 "use strict";
 
-import { useRef, useState } from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
+import { ChipStrip, useChipTap } from "@buoy-gg/shared-ui";
 import QueryStatus from "./QueryStatus";
 import useQueryStatusCounts from "../../hooks/useQueryStatusCounts";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,122 +19,77 @@ const QueryStatusCount = ({
     paused,
     inactive
   } = useQueryStatusCounts();
-
-  // Scroll state management like ChipTabs
-  const [isScrolling, setIsScrolling] = useState(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = useChipTap();
   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 (!isTap(event)) return;
     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,
-        testID: "buoy-rq-status-fresh",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Loading",
-        color: "blue",
-        count: fetching,
-        isActive: activeFilter === "fetching",
-        onPress: event => handleFilterClick("fetching", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fetching",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Paused",
-        color: "purple",
-        count: paused,
-        isActive: activeFilter === "paused",
-        onPress: event => handleFilterClick("paused", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-paused",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Stale",
-        color: "yellow",
-        count: stale,
-        isActive: activeFilter === "stale",
-        onPress: event => handleFilterClick("stale", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-stale",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Idle",
-        color: "gray",
-        count: inactive,
-        isActive: activeFilter === "inactive",
-        onPress: event => handleFilterClick("inactive", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-inactive",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/_jsxs(ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools query status count scroll",
+    children: [/*#__PURE__*/_jsx(QueryStatus, {
+      label: "Fresh",
+      color: "green",
+      count: fresh,
+      isActive: activeFilter === "fresh",
+      onPress: event => handleFilterClick("fresh", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fresh",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Loading",
+      color: "blue",
+      count: fetching,
+      isActive: activeFilter === "fetching",
+      onPress: event => handleFilterClick("fetching", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fetching",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Paused",
+      color: "purple",
+      count: paused,
+      isActive: activeFilter === "paused",
+      onPress: event => handleFilterClick("paused", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-paused",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Stale",
+      color: "yellow",
+      count: stale,
+      isActive: activeFilter === "stale",
+      onPress: event => handleFilterClick("stale", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-stale",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Idle",
+      color: "gray",
+      count: inactive,
+      isActive: activeFilter === "inactive",
+      onPress: event => handleFilterClick("inactive", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-inactive",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    })]
   });
 };
-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

@@ -1,7 +1,6 @@
 "use strict";
 
-import { useRef, useState } from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
+import { ChipStrip, useChipTap } from "@buoy-gg/shared-ui";
 import QueryStatus from "./QueryStatus";
 import { getStorageTypeLabel, getStorageTypeColor } from "../../utils/storageQueryUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,21 +18,13 @@ const StorageStatusCount = ({
   onStorageTypesChange,
   counts
 }) => {
-  // Scroll state management like QueryStatusCount
-  const [isScrolling, setIsScrolling] = useState(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = useChipTap();
   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 (!isTap(event)) return;
     if (onStorageTypesChange) {
       const newStorageTypes = new Set(activeStorageTypes);
       if (newStorageTypes.has(storageType)) {
@@ -44,58 +35,22 @@ const StorageStatusCount = ({
       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);
-      })
+  return /*#__PURE__*/_jsx(ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools storage status count scroll",
+    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/stores/reactQueryEventStore.js

@@ -12,6 +12,7 @@
  * 3. The Events DevTools subscribes to these events
  */
 
+import { ChangeLog } from "@buoy-gg/shared-ui";
 import { isStorageQuery } from "../utils/storageQueryUtils";
 
 /**
@@ -26,13 +27,15 @@ let eventIdCounter = 0;
 function generateEventId() {
   return `rq-${Date.now()}-${++eventIdCounter}`;
 }
-class ReactQueryEventStore {
-  events = [];
-  listeners = new Set();
+class ReactQueryEventStore extends ChangeLog {
   queryClient = null;
   queryUnsubscribe = null;
   mutationUnsubscribe = null;
-  maxEvents = 200;
+  constructor() {
+    super({
+      max: 200
+    });
+  }
 
   // Track fetch start times for duration calculation
   fetchStartTimes = new Map();
@@ -243,43 +246,31 @@ class ReactQueryEventStore {
    * Add an event to the store
    */
   addEvent(event) {
-    this.events = [event, ...this.events].slice(0, this.maxEvents);
-    this.notifyListeners();
+    this.record(event);
   }
 
   /**
    * Get all events
    */
   getEvents() {
-    return this.events;
+    return this.items;
   }
 
   /**
    * Subscribe to event changes
    */
   subscribe(listener) {
-    this.listeners.add(listener);
+    const unsubscribe = super.subscribe(listener);
     // Immediately call with current events
-    listener(this.events);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Notify all listeners
-   */
-  notifyListeners() {
-    const events = this.events;
-    this.listeners.forEach(listener => listener(events));
+    listener(this.items);
+    return unsubscribe;
   }
 
   /**
    * Clear all events
    */
   clearEvents() {
-    this.events = [];
-    this.notifyListeners();
+    this.clear();
   }
 
   /**