@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,207 @@
+"use strict";
+
+import { useState, useRef, useMemo, useCallback } from "react";
+import { View, Text, StyleSheet, PanResponder, Animated, Dimensions, FlatList } from "react-native";
+import MutationButton from "./MutationButton";
+import MutationInformation from "./MutationInformation";
+import useAllMutations from "../../hooks/useAllMutations";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Virtualized list of mutations with filtering and selection support for the mutation browser.
+ */
+export default function MutationsList({
+  selectedMutation,
+  setSelectedMutation,
+  activeFilter,
+  hideInfoPanel = false,
+  contentContainerStyle,
+  searchText = ""
+}) {
+  const {
+    mutations: allmutations
+  } = useAllMutations();
+
+  // Helper function to get mutation status for filtering
+  const getMutationStatus = mutation => {
+    if (mutation.state.isPaused) return "paused";
+    const status = mutation.state.status;
+    return status; // 'idle', 'pending', 'success', 'error'
+  };
+
+  // Filter mutations based on active filter and search text
+  const filteredMutations = useMemo(() => {
+    let filtered = allmutations;
+
+    // Apply status filter
+    if (activeFilter) {
+      filtered = filtered.filter(mutation => {
+        const status = getMutationStatus(mutation);
+        return status === activeFilter;
+      });
+    }
+
+    // Apply search filter on mutation keys
+    if (searchText) {
+      const searchLower = searchText.toLowerCase();
+      filtered = filtered.filter(mutation => {
+        const mutationKey = mutation.options.mutationKey;
+        if (!mutationKey) return false;
+        const keys = Array.isArray(mutationKey) ? mutationKey : [mutationKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return keyString.includes(searchLower);
+      });
+    }
+    return filtered;
+  }, [allmutations, activeFilter, searchText]);
+
+  // Height management for resizable mutation information panel
+  const screenHeight = Dimensions.get("window").height;
+  const defaultInfoHeight = screenHeight * 0.4; // 40% of screen height
+  const minInfoHeight = 150;
+  const maxInfoHeight = screenHeight * 0.7; // 70% of screen height
+
+  const infoHeightAnim = useRef(new Animated.Value(defaultInfoHeight)).current;
+  const [, setCurrentInfoHeight] = useState(defaultInfoHeight);
+  const currentInfoHeightRef = useRef(defaultInfoHeight);
+
+  // Pan responder for dragging the mutation information panel
+  const infoPanResponder = useRef(PanResponder.create({
+    onMoveShouldSetPanResponder: (evt, gestureState) => {
+      return Math.abs(gestureState.dy) > Math.abs(gestureState.dx) && Math.abs(gestureState.dy) > 10;
+    },
+    onPanResponderGrant: () => {
+      infoHeightAnim.stopAnimation(value => {
+        setCurrentInfoHeight(value);
+        currentInfoHeightRef.current = value;
+        infoHeightAnim.setValue(value);
+      });
+    },
+    onPanResponderMove: (evt, gestureState) => {
+      // Use the ref value which is always current
+      const newHeight = currentInfoHeightRef.current - gestureState.dy;
+      const clampedHeight = Math.max(minInfoHeight, Math.min(maxInfoHeight, newHeight));
+      infoHeightAnim.setValue(clampedHeight);
+    },
+    onPanResponderRelease: (evt, gestureState) => {
+      const finalHeight = Math.max(minInfoHeight, Math.min(maxInfoHeight, currentInfoHeightRef.current - gestureState.dy));
+      setCurrentInfoHeight(finalHeight);
+      currentInfoHeightRef.current = finalHeight;
+      Animated.timing(infoHeightAnim, {
+        toValue: finalHeight,
+        duration: 200,
+        useNativeDriver: false
+      }).start(() => {
+        // Ensure the animated value and state are perfectly synced after animation
+        infoHeightAnim.setValue(finalHeight);
+        setCurrentInfoHeight(finalHeight);
+        currentInfoHeightRef.current = finalHeight;
+      });
+    }
+  })).current;
+
+  // Optimize FlatList performance - memoize renderItem to prevent re-renders
+  const renderMutation = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(MutationButton, {
+    selected: selectedMutation,
+    setSelectedMutation: setSelectedMutation,
+    mutation: item
+  }), [selectedMutation, setSelectedMutation]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [filteredMutations.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: styles.listWrapper,
+      children: /*#__PURE__*/_jsx(FlatList, {
+        "sentry-label": "ignore devtools mutations list",
+        data: filteredMutations,
+        renderItem: renderMutation,
+        keyExtractor: (item, index) => `${item.mutationId}-${item.state.submittedAt}-${item.state.status}-${index}`,
+        showsVerticalScrollIndicator: true,
+        removeClippedSubviews: true,
+        contentContainerStyle: contentContainerStyle || styles.listContent,
+        initialNumToRender: 10,
+        maxToRenderPerBatch: 10,
+        windowSize: 10,
+        scrollEnabled: false
+      })
+    }) : /*#__PURE__*/_jsx(View, {
+      style: styles.emptyContainer,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: activeFilter ? `No ${activeFilter} mutations found` : "No mutations found"
+      })
+    }), selectedMutation && !hideInfoPanel && /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.mutationInfo, {
+        height: infoHeightAnim
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.dragHandle,
+        ...infoPanResponder.panHandlers,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.dragIndicator
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.mutationInfoContent,
+        children: /*#__PURE__*/_jsx(MutationInformation, {
+          selectedMutation: selectedMutation
+        })
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  listWrapper: {
+    flex: 1
+  },
+  listContent: {
+    backgroundColor: buoyColors.base,
+    paddingHorizontal: 8,
+    paddingTop: 8
+  },
+  mutationInfo: {
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    backgroundColor: buoyColors.base
+  },
+  dragHandle: {
+    height: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border
+  },
+  dragIndicator: {
+    width: 40,
+    height: 4,
+    backgroundColor: buoyColors.border,
+    borderRadius: 2
+  },
+  mutationInfoContent: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32,
+    backgroundColor: buoyColors.card,
+    margin: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  }
+});

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

@@ -0,0 +1,50 @@
+"use strict";
+
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Wifi, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Small toggle used in the query browser to mock offline/online behavior.
+ */
+const NetworkToggleButton = ({
+  isOffline,
+  onToggle
+}) => {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    "sentry-label": "ignore devtools network toggle button",
+    style: [styles.button, isOffline && styles.offlineButton],
+    onPress: onToggle,
+    activeOpacity: 0.7,
+    accessibilityLabel: isOffline ? "Unset offline mocking behavior" : "Mock offline behavior",
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: isOffline
+    },
+    children: isOffline ? /*#__PURE__*/_jsx(Wifi, {
+      size: 16,
+      color: buoyColors.error,
+      strokeWidth: 2
+    }) : /*#__PURE__*/_jsx(Wifi, {
+      size: 16,
+      color: buoyColors.success,
+      strokeWidth: 2
+    })
+  });
+};
+const styles = StyleSheet.create({
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: "rgba(16, 185, 129, 0.1)",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(16, 185, 129, 0.2)"
+  },
+  offlineButton: {
+    backgroundColor: "rgba(239, 68, 68, 0.1)",
+    borderColor: "rgba(239, 68, 68, 0.2)"
+  }
+});
+export default NetworkToggleButton;

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

@@ -0,0 +1,133 @@
+"use strict";
+
+import { useQueryClient } from "@tanstack/react-query";
+import ActionButton from "./ActionButton";
+import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
+import triggerLoading from "../../utils/actions/triggerLoading";
+import refetch from "../../utils/actions/refetch";
+import reset from "../../utils/actions/reset";
+import remove from "../../utils/actions/remove";
+import invalidate from "../../utils/actions/invalidate";
+import triggerError from "../../utils/actions/triggerError";
+import { View, Text, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Action panel rendered in query detail views providing mutation simulation and removal controls.
+ */
+export default function QueryActions({
+  query,
+  setSelectedQuery
+}) {
+  const queryClient = useQueryClient();
+  if (query === undefined) {
+    return null;
+  }
+  const queryStatus = query.state.status;
+  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({
+            query
+          });
+        },
+        bgColorClass: "btnRefetch",
+        text: "Refetch",
+        _textColorClass: "btnRefetch"
+      }), /*#__PURE__*/_jsx(ActionButton, {
+        "sentry-label": "ignore devtools query invalidate action",
+        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({
+            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({
+            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({
+            query,
+            queryClient
+          });
+        },
+        bgColorClass: "btnTriggerLoadiError",
+        text: queryStatus === "error" ? "Restore Error" : "Trigger Error",
+        _textColorClass: "btnTriggerLoadiError"
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 16,
+    gap: 12
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    marginBottom: 8,
+    textAlign: "left",
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    textTransform: "uppercase"
+  },
+  buttonsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  }
+});

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

@@ -0,0 +1,141 @@
+"use strict";
+
+import { useMemo, useCallback } from "react";
+import { View, StyleSheet, Text, ScrollView } from "react-native";
+import QueryRow from "./QueryRow";
+import useAllQueries from "../../hooks/useAllQueries";
+import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
+import { buoyColors } 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.
+ */
+export default function QueryBrowser({
+  selectedQuery,
+  onQuerySelect,
+  activeFilter,
+  emptyStateMessage,
+  contentContainerStyle,
+  queries: externalQueries,
+  searchText = "",
+  ignoredPatterns = new Set(),
+  includedPatterns = new Set()
+}) {
+  // Holds all queries using the working hook, or use external queries if provided
+  const internalQueries = useAllQueries();
+  const allQueries = externalQueries ?? internalQueries;
+
+  // Filter queries based on active filter, search text, and ignored patterns
+  const filteredQueries = useMemo(() => {
+    let filtered = allQueries;
+
+    // Apply status filter
+    if (activeFilter) {
+      filtered = filtered.filter(query => {
+        const status = getQueryStatusLabel(query);
+        return status === activeFilter;
+      });
+    }
+
+    // Apply search filter on query keys
+    if (searchText) {
+      const searchLower = searchText.toLowerCase();
+      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 keyString.includes(searchLower);
+      });
+    }
+
+    // Apply included patterns filter (show ONLY queries matching any pattern)
+    // This acts as a whitelist - if any include patterns exist, query must match at least one
+    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 true if query matches ANY included pattern
+        return Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Apply ignored patterns filter (hide queries matching any pattern)
+    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 true if NO patterns match (i.e., keep the query)
+        return !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Sort by most recently updated (dataUpdatedAt descending)
+    filtered.sort((a, b) => {
+      const aTime = a.state.dataUpdatedAt || 0;
+      const bTime = b.state.dataUpdatedAt || 0;
+      return bTime - aTime; // Most recent first
+    });
+    return filtered;
+  }, [allQueries, activeFilter, searchText, includedPatterns, ignoredPatterns]);
+
+  // Function to handle query selection with stable comparison
+  const handleQuerySelect = useCallback(query => {
+    // Compare queries by their queryKey and queryHash for stable selection
+    const isCurrentlySelected = selectedQuery?.queryHash === query.queryHash;
+    if (isCurrentlySelected) {
+      onQuerySelect(undefined); // Deselect
+      return;
+    }
+    onQuerySelect(query);
+  }, [selectedQuery?.queryHash, onQuerySelect]);
+  if (filteredQueries.length === 0) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.emptyContainer,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    style: styles.listWrapper,
+    contentContainerStyle: contentContainerStyle || styles.listContent,
+    showsVerticalScrollIndicator: true,
+    children: filteredQueries.map(query => /*#__PURE__*/_jsx(QueryRow, {
+      query: query,
+      isSelected: selectedQuery?.queryHash === query.queryHash,
+      onSelect: handleQuerySelect
+    }, `${query.queryHash}-${query.state.dataUpdatedAt}-${query.state.fetchStatus}`))
+  });
+}
+const styles = StyleSheet.create({
+  listWrapper: {
+    flexGrow: 1
+  },
+  listContent: {
+    paddingBottom: 16,
+    backgroundColor: buoyColors.base
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32,
+    backgroundColor: buoyColors.card,
+    margin: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  }
+});

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

@@ -0,0 +1,132 @@
+"use strict";
+
+import QueryDetailsChip from "./QueryDetailsChip";
+import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Renders the primary metadata summary for a selected query, including fetch status and timings.
+ */
+export default function QueryDetails({
+  query
+}) {
+  if (query === undefined) {
+    return null;
+  }
+  // Convert the timestamp to a Date object and format it
+  const lastUpdated = new Date(query.state.dataUpdatedAt).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.minWidth,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.headerText,
+      children: "Query Details"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        "sentry-label": "ignore devtools query details scroll",
+        horizontal: true,
+        style: styles.flexOne,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.queryKeyText,
+          children: displayValue(query.queryKey, true)
+        })
+      }), /*#__PURE__*/_jsx(QueryDetailsChip, {
+        query: query
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.labelText,
+        children: "Observers:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.valueText,
+        children: `${query.getObserversCount()}`
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.labelText,
+        children: "Last Updated:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.valueText,
+        children: `${lastUpdated}`
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  minWidth: {
+    minWidth: 200,
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "4D",
+    overflow: "hidden",
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  headerText: {
+    backgroundColor: buoyColors.primary + "15",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.primary + "33",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.textMuted + "66"
+  },
+  flexOne: {
+    flex: 1,
+    marginRight: 8
+  },
+  queryKeyText: {
+    fontSize: 12,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    lineHeight: 18,
+    flexShrink: 1,
+    backgroundColor: buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "4D"
+  },
+  labelText: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  valueText: {
+    fontSize: 12,
+    color: buoyColors.text,
+    fontWeight: "500",
+    fontVariant: ["tabular-nums"],
+    fontFamily: "monospace"
+  }
+});