@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,43 @@
+"use strict";
+
+import { View } from "react-native";
+import { CyberpunkSectionButton, buoyColors } from "@buoy-gg/shared-ui";
+import { TanstackLogo } from "./query-browser/svgs";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Component definition moved outside render to prevent recreation on every render
+const TanstackIcon = () => /*#__PURE__*/_jsx(View, {
+  style: {
+    width: 24,
+    height: 24
+  },
+  children: /*#__PURE__*/_jsx(TanstackLogo, {})
+});
+
+/**
+ * React Query section component following composition principles.
+ * Encapsulates React Query specific business logic and UI.
+ */
+export 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__*/_jsx(CyberpunkSectionButton, {
+    id: "react-buoy-dev-tools",
+    title: "QUERY",
+    subtitle: formatSubtitle(),
+    icon: TanstackIcon,
+    iconColor: buoyColors.error,
+    iconBackgroundColor: buoyColors.error + "1A",
+    onPress: onPress,
+    index: 1
+  });
+}

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

@@ -0,0 +1,46 @@
+"use strict";
+
+import { TouchableOpacity } from "react-native";
+import { Wifi } from "@buoy-gg/shared-ui";
+import { useWifiState } from "../hooks/useWifiState";
+
+/**
+ * Small icon button that toggles React Query’s online manager, allowing developers to simulate
+ * offline scenarios directly from the modal header.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function WifiToggle({
+  size = 16
+}) {
+  const {
+    isOnline,
+    handleWifiToggle
+  } = useWifiState();
+  return /*#__PURE__*/_jsx(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__*/_jsx(Wifi, {
+      size: size,
+      color: "#10B981"
+    }) : /*#__PURE__*/_jsx(Wifi, {
+      size: size,
+      color: "#DC2626"
+    })
+  });
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+
+// Modal components
+export * from "./modals/ReactQueryModal";
+export * from "./modals/ReactQueryModalHeader";
+export * from "./modals/QueryBrowserModal";
+export * from "./modals/MutationBrowserModal";
+export * from "./modals/MutationEditorModal";
+export * from "./modals/DataEditorModal";
+export * from "./modals/QueryBrowserFooter";
+export * from "./modals/MutationBrowserFooter";
+export * from "./modals/SwipeIndicator";
+
+// Query browser components (via barrel that maps defaults to named)
+export * from "./query-browser";
+
+// Shared components
+export { VirtualizedDataExplorer, DataViewer, TypeLegend } from "@buoy-gg/shared-ui/dataViewer";
+
+// Mode components
+export * from "./QueryBrowserMode";
+export * from "./MutationBrowserMode";
+export * from "./MutationEditorMode";
+export * from "./DataEditorMode";
+export * from "./QuerySelector";
+export * from "./QueryDebugInfo";
+export * from "./WifiToggle";
+export * from "./ReactQuerySection";
+export { ReactQueryDevToolsModal } from "./ReactQueryDevToolsModal";

package/lib/module/react-query/components/modals/DataEditorModal.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { useGetQueryByQueryKeyWithVersion } from "../../hooks/useSelectedQuery";
+import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
+import { DataEditorMode, DataEditorActionsFooter } from "../DataEditorMode";
+import { useState, useCallback } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Specialized modal for data editing following "Decompose by Responsibility"
+ * Single purpose: Display data editor when a query is selected
+ */
+export function DataEditorModal({
+  visible,
+  selectedQueryKey,
+  onQuerySelect,
+  onClose,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  onTabChange
+}) {
+  const {
+    query: selectedQuery,
+    version: queryVersion
+  } = useGetQueryByQueryKeyWithVersion(selectedQueryKey);
+  const [modalMode, setModalMode] = useState("bottomSheet");
+  const handleModeChange = useCallback(mode => {
+    setModalMode(mode);
+  }, []);
+  const renderHeaderContent = () => /*#__PURE__*/_jsx(ReactQueryModalHeader, {
+    selectedQuery: selectedQuery,
+    activeTab: "queries",
+    onTabChange: onTabChange,
+    onBack: () => onQuerySelect(undefined)
+  });
+  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.reactQuery.modal() : `${devToolsStorageKeys.reactQuery.modal()}_data_editor`;
+  if (!visible || !selectedQuery) return null;
+  const footerNode = /*#__PURE__*/_jsx(DataEditorActionsFooter, {
+    selectedQuery: selectedQuery,
+    isFloatingMode: modalMode === "floating",
+    queryVersion: queryVersion
+  }, `footer-${queryVersion}`);
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: renderHeaderContent(),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    footer: footerNode,
+    footerHeight: 72,
+    children: /*#__PURE__*/_jsx(DataEditorMode, {
+      selectedQuery: selectedQuery,
+      isFloatingMode: modalMode === "floating",
+      disableInternalFooter: true,
+      queryVersion: queryVersion
+    })
+  });
+}

package/lib/module/react-query/components/modals/MutationBrowserFooter.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import MutationStatusCount from "../query-browser/MutationStatusCount";
+import { useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Footer component for MutationBrowserModal following composition principles
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Dedicated footer component for mutation filter controls
+ * - Prefer Composition over Configuration: Specialized footer matching DataEditorMode pattern
+ * - Extract Reusable Logic: Consistent footer styling across modal types
+ */
+export function MutationBrowserFooter({
+  activeFilter,
+  onFilterChange,
+  modalMode
+}) {
+  const isFloatingMode = modalMode === "floating";
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+
+  // Use useMemo to ensure paddingBottom is recalculated when isFloatingMode changes
+  const paddingBottom = useMemo(() => {
+    return !isFloatingMode ? insets.bottom : 0;
+  }, [isFloatingMode, insets.bottom]);
+  return /*#__PURE__*/_jsx(View, {
+    // Force re-render with key change
+    style: [styles.filterFooter, {
+      paddingBottom
+    },
+    // Remove border radius when docked to bottom
+    !isFloatingMode && styles.dockedFooter],
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.filterContainer,
+      children: /*#__PURE__*/_jsx(MutationStatusCount, {
+        activeFilter: activeFilter,
+        onFilterChange: onFilterChange
+      })
+    })
+  }, `footer-${isFloatingMode ? "floating" : "docked"}`);
+}
+const styles = StyleSheet.create({
+  filterFooter: {
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    backgroundColor: buoyColors.base,
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14
+  },
+  dockedFooter: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  filterContainer: {
+    minHeight: 32,
+    justifyContent: "center"
+  }
+});

package/lib/module/react-query/components/modals/MutationBrowserModal.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import { useCallback, useState, useRef } from "react";
+import { useGetMutationById } from "../../hooks/useSelectedMutation";
+import { MutationBrowserMode } from "../MutationBrowserMode";
+import { MutationBrowserFooter } from "./MutationBrowserFooter";
+import { JsModal } from "@buoy-gg/shared-ui";
+import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
+import { View, Animated, PanResponder } from "react-native";
+import { SwipeIndicator } from "./SwipeIndicator";
+import { devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Specialized modal wrapper for browsing mutations. Handles persistence, swipe gestures, and
+ * filter coordination before delegating to the underlying list view.
+ */
+export function MutationBrowserModal({
+  visible,
+  selectedMutationId,
+  onMutationSelect,
+  onClose,
+  onMinimize,
+  activeFilter: externalActiveFilter,
+  onFilterChange: externalOnFilterChange,
+  onTabChange,
+  enableSharedModalDimensions = false,
+  searchText = "",
+  onSearchChange
+}) {
+  const selectedMutation = useGetMutationById(selectedMutationId);
+  const [internalActiveFilter, setInternalActiveFilter] = useState(null);
+  const activeFilter = externalActiveFilter ?? internalActiveFilter;
+  const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
+
+  // Track modal mode for conditional styling
+  // Initialize with bottomSheet but it will be updated from persisted state if available
+  const [modalMode, setModalMode] = useState("bottomSheet");
+  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.reactQuery.modal() : devToolsStorageKeys.reactQuery.mutationModal();
+
+  // Animated value for gesture tracking [[memory:4875251]]
+  const translationX = useRef(new Animated.Value(0)).current;
+  const handleSwipeNavigation = useCallback(direction => {
+    if (direction === "right") {
+      onTabChange("queries");
+    }
+  }, [onTabChange]);
+  const handleModeChange = useCallback(mode => {
+    setModalMode(mode);
+  }, []);
+
+  // Create PanResponder for swipe navigation
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => false,
+    onMoveShouldSetPanResponder: (evt, gestureState) => {
+      // Only capture horizontal swipes
+      return Math.abs(gestureState.dx) > 5 && Math.abs(gestureState.dy) < 10;
+    },
+    onPanResponderMove: (evt, gestureState) => {
+      // Update translation for visual feedback
+      translationX.setValue(gestureState.dx);
+    },
+    onPanResponderRelease: (evt, gestureState) => {
+      const {
+        dx,
+        vx
+      } = gestureState;
+      const swipeThreshold = 80; // Match EDGE_THRESHOLD from SwipeIndicator
+      const velocityThreshold = 0.5;
+
+      // Reset visual feedback with spring animation
+      Animated.spring(translationX, {
+        toValue: 0,
+        useNativeDriver: true
+      }).start();
+      if (Math.abs(dx) > swipeThreshold || Math.abs(vx) > velocityThreshold) {
+        if (dx > 0 || vx > 0) {
+          handleSwipeNavigation("right");
+        } else {
+          handleSwipeNavigation("left");
+        }
+      }
+    },
+    onPanResponderTerminate: () => {
+      // Reset on termination
+      Animated.spring(translationX, {
+        toValue: 0,
+        useNativeDriver: true
+      }).start();
+    }
+  })).current;
+  if (!visible) return null;
+  const renderHeaderContent = () => /*#__PURE__*/_jsx(ReactQueryModalHeader, {
+    selectedMutation: selectedMutation,
+    activeTab: "mutations",
+    onTabChange: onTabChange,
+    onBack: () => onMutationSelect(undefined),
+    searchText: searchText,
+    onSearchChange: onSearchChange
+  });
+  const footerNode = /*#__PURE__*/_jsx(MutationBrowserFooter, {
+    activeFilter: activeFilter,
+    onFilterChange: setActiveFilter,
+    modalMode: modalMode
+  });
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: renderHeaderContent(),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    footer: footerNode,
+    footerHeight: 56,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/_jsxs(View, {
+        ...panResponder.panHandlers,
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(SwipeIndicator, {
+          translationX: translationX,
+          canSwipeLeft: false,
+          canSwipeRight: true
+        }), /*#__PURE__*/_jsx(MutationBrowserMode, {
+          selectedMutation: selectedMutation,
+          onMutationSelect: onMutationSelect,
+          activeFilter: activeFilter,
+          searchText: searchText
+        })]
+      })
+    })
+  });
+}

package/lib/module/react-query/components/modals/MutationEditorModal.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { useGetMutationById } from "../../hooks/useSelectedMutation";
+import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
+import { MutationEditorMode } from "../MutationEditorMode";
+import { useState, useCallback } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Modal variant dedicated to editing a single mutation entry. Restores persisted positioning and
+ * mirrors the behavior of the query editor.
+ */
+export function MutationEditorModal({
+  visible,
+  selectedMutationId,
+  onMutationSelect,
+  onClose,
+  onMinimize,
+  onTabChange,
+  enableSharedModalDimensions = false
+}) {
+  const selectedMutation = useGetMutationById(selectedMutationId);
+  const [modalMode, setModalMode] = useState("bottomSheet");
+  const handleModeChange = useCallback(mode => {
+    setModalMode(mode);
+  }, []);
+  const renderHeaderContent = () => /*#__PURE__*/_jsx(ReactQueryModalHeader, {
+    selectedMutation: selectedMutation,
+    activeTab: "mutations",
+    onTabChange: onTabChange,
+    onBack: () => onMutationSelect(undefined)
+  });
+  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.reactQuery.modal() : devToolsStorageKeys.reactQuery.mutationModal();
+  if (!visible || !selectedMutation) return null;
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: renderHeaderContent(),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    children: /*#__PURE__*/_jsx(MutationEditorMode, {
+      selectedMutation: selectedMutation,
+      isFloatingMode: modalMode === "floating"
+    })
+  });
+}

package/lib/module/react-query/components/modals/QueryBrowserFooter.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import QueryStatusCount from "../query-browser/QueryStatusCount";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Footer component for QueryBrowserModal following composition principles
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Dedicated footer component for filter controls
+ * - Prefer Composition over Configuration: Specialized footer matching DataEditorMode pattern
+ * - Extract Reusable Logic: Consistent footer styling across modal types
+ */
+export function QueryBrowserFooter({
+  activeFilter,
+  onFilterChange,
+  isFloatingMode = true // Default to floating mode if not specified
+}) {
+  // Use safe area insets with a minimum bottom padding of 16 for docked mode
+  // This ensures proper spacing even on resized simulators or devices without home indicator
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.filterFooter, {
+      paddingBottom: !isFloatingMode ? insets.bottom : 0
+    },
+    // Remove border radius when docked to bottom
+    !isFloatingMode && styles.dockedFooter],
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.filterContainer,
+      children: /*#__PURE__*/_jsx(QueryStatusCount, {
+        activeFilter: activeFilter,
+        onFilterChange: onFilterChange
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  filterFooter: {
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    backgroundColor: buoyColors.base,
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14
+  },
+  dockedFooter: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  filterContainer: {
+    minHeight: 32,
+    justifyContent: "center"
+  }
+});