@buoy-gg/react-query 1.7.8 → 2.1.2

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

@@ -74,13 +74,11 @@ export function DataEditorMode({
         paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
       }],
       children: /*#__PURE__*/_jsx(View, {
-        style: styles.actionsGrid,
+        style: styles.actionsRow,
         children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })
@@ -108,13 +106,11 @@ export function DataEditorActionsFooter({
       paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
     }],
     children: /*#__PURE__*/_jsx(View, {
-      style: styles.actionsGrid,
+      style: styles.actionsRow,
       children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": `ignore action button ${action.label}`,
         onClick: action.onPress,
         text: action.label,
-        bgColorClass: action.bgColorClass,
-        _textColorClass: action.textColorClass,
+        variant: action.variant,
         disabled: action.disabled
       }, index))
     })
@@ -224,23 +220,20 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     maxWidth: 280
   },
-  // Action footer matching main dev tools exactly
+  // Action footer - compact single row layout
   actionFooter: {
     borderTopWidth: 1,
     borderTopColor: buoyColors.border,
-    paddingTop: 4,
+    paddingTop: 8,
     paddingHorizontal: 12,
     backgroundColor: buoyColors.base,
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
-  actionsGrid: {
+  actionsRow: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    // Reduced from 8
-    justifyContent: "space-between",
-    paddingBottom: 2
+    alignItems: "center",
+    gap: 8
   },
   // Query Explorer styled container matching QueryDetails
   queryExplorerContainer: {

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

@@ -68,11 +68,9 @@ export function MutationEditorMode({
       children: /*#__PURE__*/_jsx(View, {
         style: styles.actionsGrid,
         children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })

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

@@ -1,7 +1,9 @@
 "use strict";
 
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import { ReactQueryModal } from "./modals/ReactQueryModal";
+import { reactQueryEventStore } from "../stores/reactQueryEventStore";
 
 /** Configuration options for the high-level React Query dev tools modal wrapper. */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,6 +17,16 @@ export function ReactQueryDevToolsModal({
   onMinimize,
   enableSharedModalDimensions = true
 }) {
+  // Get QueryClient and connect to event store for unified Events DevTools
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    // Connect the QueryClient to the event store so events flow to unified Events DevTools
+    // Only connect if not already connected (to preserve connection across modal open/close)
+    if (!reactQueryEventStore.isConnected()) {
+      reactQueryEventStore.setQueryClient(queryClient);
+    }
+    // Don't disconnect on unmount - keep the connection for unified Events DevTools
+  }, [queryClient]);
   const [selectedQueryKey, setSelectedQueryKey] = useState(undefined);
   const [selectedMutationId, setSelectedMutationId] = useState(undefined);
   const [activeFilter, setActiveFilter] = useState(null);

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

@@ -37,7 +37,8 @@ export function MutationBrowserModal({
   // Clear mutation cache handler
   const handleClearCache = useCallback(() => {
     queryClient.getMutationCache().clear();
-  }, [queryClient]);
+    onMutationSelect(undefined);
+  }, [queryClient, onMutationSelect]);
 
   // Track modal mode for conditional styling
   // Initialize with bottomSheet but it will be updated from persisted state if available

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

@@ -9,7 +9,7 @@ import { QueryBrowserFooter } from "./QueryBrowserFooter";
 import { QueryFilterViewV3 } from "../QueryFilterViewV3";
 import { useState, useCallback, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
-import { devToolsStorageKeys, useSafeAsyncStorage, buoyColors } from "@buoy-gg/shared-ui";
+import { devToolsStorageKeys, persistentStorage, buoyColors } from "@buoy-gg/shared-ui";
 import useAllQueries from "../../hooks/useAllQueries";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -48,17 +48,11 @@ export function QueryBrowserModal({
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
   const [includedPatterns, setIncludedPatterns] = useState(new Set());
 
-  // AsyncStorage for persisting ignored patterns
-  const {
-    getItem: safeGetItem,
-    setItem: safeSetItem
-  } = useSafeAsyncStorage();
-
   // Load ignored patterns from storage on mount
   useEffect(() => {
     const loadFilters = async () => {
       try {
-        const stored = await safeGetItem(devToolsStorageKeys.reactQuery.ignoredPatterns());
+        const stored = await persistentStorage.getItem(devToolsStorageKeys.reactQuery.ignoredPatterns());
         if (stored) {
           const patterns = JSON.parse(stored);
           if (Array.isArray(patterns)) {
@@ -70,13 +64,13 @@ export function QueryBrowserModal({
       }
     };
     loadFilters();
-  }, [safeGetItem]);
+  }, []);
 
   // Load included patterns from storage on mount
   useEffect(() => {
     const loadFilters = async () => {
       try {
-        const stored = await safeGetItem(devToolsStorageKeys.reactQuery.includedPatterns());
+        const stored = await persistentStorage.getItem(devToolsStorageKeys.reactQuery.includedPatterns());
         if (stored) {
           const patterns = JSON.parse(stored);
           if (Array.isArray(patterns)) {
@@ -88,33 +82,33 @@ export function QueryBrowserModal({
       }
     };
     loadFilters();
-  }, [safeGetItem]);
+  }, []);
 
   // Save ignored patterns to storage when they change
   useEffect(() => {
     const saveFilters = async () => {
       try {
         const patterns = Array.from(ignoredPatterns);
-        await safeSetItem(devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
+        await persistentStorage.setItem(devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
       } catch (error) {
         console.error("Failed to save ignored patterns:", error);
       }
     };
     saveFilters();
-  }, [ignoredPatterns, safeSetItem]);
+  }, [ignoredPatterns]);
 
   // Save included patterns to storage when they change
   useEffect(() => {
     const saveFilters = async () => {
       try {
         const patterns = Array.from(includedPatterns);
-        await safeSetItem(devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
+        await persistentStorage.setItem(devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
       } catch (error) {
         console.error("Failed to save included patterns:", error);
       }
     };
     saveFilters();
-  }, [includedPatterns, safeSetItem]);
+  }, [includedPatterns]);
 
   // Toggle pattern in ignored set
   const handlePatternToggle = useCallback(pattern => {

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

@@ -2,65 +2,55 @@
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
 import { buoyColors } from "@buoy-gg/shared-ui";
-
-// Define the color mappings using Buoy theme colors
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Clean, minimal color config matching React Query DevTools style
 const buttonConfigs = {
-  btnRefetch: {
-    color: buoyColors.success,
-    backgroundColor: buoyColors.success + "15",
-    borderColor: buoyColors.success + "40",
-    textColor: buoyColors.success
+  refetch: {
+    dotColor: buoyColors.success,
+    textColor: buoyColors.text,
+    borderColor: buoyColors.border
   },
-  btnInvalidate: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
+  invalidate: {
+    dotColor: buoyColors.warning,
+    textColor: buoyColors.text,
+    borderColor: buoyColors.border
   },
-  btnReset: {
-    color: buoyColors.textSecondary,
-    backgroundColor: buoyColors.textSecondary + "26",
-    borderColor: buoyColors.textSecondary + "59",
-    textColor: buoyColors.textSecondary
+  reset: {
+    dotColor: buoyColors.textSecondary,
+    textColor: buoyColors.text,
+    borderColor: buoyColors.border
   },
-  btnRemove: {
-    color: buoyColors.error,
-    backgroundColor: buoyColors.error + "15",
-    borderColor: buoyColors.error + "40",
-    textColor: buoyColors.error
+  remove: {
+    dotColor: buoyColors.error,
+    textColor: buoyColors.error,
+    borderColor: buoyColors.error + "40"
   },
-  btnTriggerLoading: {
-    color: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40",
-    textColor: buoyColors.primary
+  triggerLoading: {
+    dotColor: buoyColors.info,
+    textColor: buoyColors.info,
+    borderColor: buoyColors.info + "40"
   },
-  btnTriggerLoadiError: {
-    color: buoyColors.textMuted,
-    backgroundColor: buoyColors.textMuted + "26",
-    borderColor: buoyColors.textMuted + "59",
-    textColor: buoyColors.textMuted
+  triggerError: {
+    dotColor: buoyColors.error,
+    textColor: buoyColors.error,
+    borderColor: buoyColors.error + "40"
   }
 };
-/** Generic rectangular action button used throughout the query modal footers. */
+/** Clean, minimal action button matching React Query DevTools style. */
 export default function ActionButton({
   onClick,
   text,
-  _textColorClass,
-  bgColorClass,
+  variant,
   disabled
 }) {
-  // Get the button configuration
-  const config = buttonConfigs[bgColorClass];
+  const config = buttonConfigs[variant];
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     "sentry-label": "ignore devtools action button",
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {
-      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
-      opacity: disabled ? 0.5 : 1
+      borderColor: disabled ? buoyColors.border : config.borderColor,
+      opacity: disabled ? 0.4 : 1
     }],
     activeOpacity: 0.7,
     accessibilityRole: "button",
@@ -70,7 +60,7 @@ export default function ActionButton({
     },
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? buoyColors.textMuted : config.color
+        backgroundColor: disabled ? buoyColors.textMuted : config.dotColor
       }]
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.text, {
@@ -85,40 +75,20 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: 6,
-    // rectangular button shape
+    borderRadius: 4,
     borderWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    height: 25,
-    minWidth: 80,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: "transparent"
   },
   dot: {
-    width: 5,
-    height: 5,
+    width: 6,
+    height: 6,
     borderRadius: 3,
-    marginRight: 6,
-    shadowColor: buoyColors.text,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 2
+    marginRight: 6
   },
   text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: "monospace",
-    height: 12
+    fontSize: 12,
+    fontWeight: "500"
   }
 });

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

@@ -24,108 +24,94 @@ export default function QueryActions({
     return null;
   }
   const queryStatus = query.state.status;
+  const isFetching = getQueryStatusLabel(query) === "fetching";
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.headerText,
-      children: "Actions"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.buttonsContainer,
-      children: [/*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query refetch action",
-        disabled: getQueryStatusLabel(query) === "fetching",
-        onClick: () => {
-          refetch({
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionLabel,
+        children: "Actions"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/_jsx(ActionButton, {
+          disabled: isFetching,
+          onClick: () => refetch({
             query
-          });
-        },
-        bgColorClass: "btnRefetch",
-        text: "Refetch",
-        _textColorClass: "btnRefetch"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query invalidate action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          invalidate({
+          }),
+          variant: "refetch",
+          text: "Refetch"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: queryStatus === "pending",
+          onClick: () => invalidate({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnInvalidate",
-        text: "Invalidate",
-        _textColorClass: "btnInvalidate"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query reset action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          reset({
-            queryClient,
-            query
-          });
-        },
-        bgColorClass: "btnReset",
-        text: "Reset",
-        _textColorClass: "btnReset"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query remove action",
-        disabled: getQueryStatusLabel(query) === "fetching",
-        onClick: () => {
-          remove({
+          }),
+          variant: "invalidate",
+          text: "Invalidate"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: queryStatus === "pending",
+          onClick: () => reset({
             queryClient,
             query
-          });
-          setSelectedQuery(undefined);
-        },
-        bgColorClass: "btnRemove",
-        text: "Remove",
-        _textColorClass: "btnRemove"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query trigger loading action",
-        disabled: false,
-        onClick: () => {
-          triggerLoading({
+          }),
+          variant: "reset",
+          text: "Reset"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: isFetching,
+          onClick: () => {
+            remove({
+              queryClient,
+              query
+            });
+            setSelectedQuery(undefined);
+          },
+          variant: "remove",
+          text: "Remove"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionLabel,
+        children: "Triggers"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/_jsx(ActionButton, {
+          disabled: false,
+          onClick: () => triggerLoading({
             query
-          });
-        },
-        bgColorClass: "btnTriggerLoading",
-        text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
-        _textColorClass: "btnTriggerLoading"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query trigger error action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          triggerError({
+          }),
+          variant: "triggerLoading",
+          text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: queryStatus === "pending",
+          onClick: () => triggerError({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnTriggerLoadiError",
-        text: queryStatus === "error" ? "Restore Error" : "Trigger Error",
-        _textColorClass: "btnTriggerLoadiError"
+          }),
+          variant: "triggerError",
+          text: queryStatus === "error" ? "Restore Error" : "Trigger Error"
+        })]
       })]
     })]
   });
 }
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    padding: 16,
-    gap: 12
+    gap: 16
+  },
+  section: {
+    gap: 8
   },
-  headerText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: buoyColors.primary,
-    marginBottom: 8,
-    textAlign: "left",
-    fontFamily: "monospace",
-    letterSpacing: 1,
-    textTransform: "uppercase"
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
   },
-  buttonsContainer: {
+  buttonsRow: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 8

package/lib/module/react-query/hooks/useActionButtons.js

@@ -6,14 +6,12 @@ import refetch from "../utils/actions/refetch";
 import triggerError from "../utils/actions/triggerError";
 import { getQueryStatusLabel } from "../utils/getQueryStatusLabel";
 /**
- * Derives the default action button configuration for an inspected query. Encapsulates business
- * rules around when to show refetch, loading, or error simulation actions.
+ * Derives compact action button configuration for the footer. Returns 3 essential buttons
+ * (Refetch, Loading, Error) optimized for small device footprints.
  *
  * @param selectedQuery - The query to derive actions for
  * @param queryClient - The query client for executing actions
  * @param queryVersion - Optional version number that increments on query state changes.
- *                       React Query mutates Query objects in place, so this version ensures
- *                       the useMemo recomputes when state changes.
  */
 export function useActionButtons(selectedQuery, queryClient, queryVersion) {
   const actionButtons = useMemo(() => {
@@ -21,24 +19,21 @@ export function useActionButtons(selectedQuery, queryClient, queryVersion) {
     const isFetching = getQueryStatusLabel(selectedQuery) === "fetching";
     const buttons = [{
       label: "Refetch",
-      bgColorClass: "btnRefetch",
-      textColorClass: "btnRefetch",
+      variant: "refetch",
       disabled: isFetching,
       onPress: () => refetch({
         query: selectedQuery
       })
     }, {
-      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore" : "Loading",
-      bgColorClass: "btnTriggerLoading",
-      textColorClass: "btnTriggerLoading",
+      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
+      variant: "triggerLoading",
       disabled: false,
       onPress: () => triggerLoading({
         query: selectedQuery
       })
     }, {
-      label: queryStatus === "error" ? "Restore" : "Error",
-      bgColorClass: "btnTriggerLoadiError",
-      textColorClass: "btnTriggerLoadiError",
+      label: queryStatus === "error" ? "Restore Error" : "Trigger Error",
+      variant: "triggerError",
       disabled: queryStatus === "pending",
       onPress: () => triggerError({
         query: selectedQuery,
@@ -46,9 +41,6 @@ export function useActionButtons(selectedQuery, queryClient, queryVersion) {
       })
     }];
     return buttons;
-    // queryVersion is the key dependency that ensures this recomputes when query state changes.
-    // React Query mutates Query objects in place, so comparing selectedQuery.state.* values
-    // doesn't work reliably (the "previous" and "current" values read from the same mutated object).
   }, [selectedQuery, queryClient, queryVersion]);
   return actionButtons;
 }