@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,180 @@
+"use strict";
+
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { CheckCircle, LoadingCircle, PauseCircle, XCircle } from "./svgs";
+import { formatRelativeTime } from "../../utils/formatRelativeTime";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getMutationText = mutation => {
+  if (!mutation.options.mutationKey) return "Anonymous Mutation";
+  const keys = Array.isArray(mutation.options.mutationKey) ? mutation.options.mutationKey : [mutation.options.mutationKey];
+  return keys.filter(k => k != null).map(k => String(k)).join(" › ") || "Anonymous Mutation";
+};
+/**
+ * List-row button for displaying mutation metadata and selecting it for detail inspection.
+ */
+export default function MutationButton({
+  mutation,
+  setSelectedMutation,
+  selected
+}) {
+  const submittedAt = new Date(mutation.state.submittedAt).toLocaleTimeString();
+
+  // Get last updated timestamp - always show something for debugging
+  const getTimestamp = () => {
+    if (mutation.state.submittedAt && mutation.state.submittedAt > 0) {
+      return formatRelativeTime(mutation.state.submittedAt);
+    }
+
+    // @ts-ignore - exploring state fields for debugging
+    const stateAny = mutation.state;
+
+    // Try other timestamp fields
+    if (stateAny.updatedAt && stateAny.updatedAt > 0) {
+      return formatRelativeTime(stateAny.updatedAt);
+    }
+
+    // Debug fallback
+    return `N/A (${mutation.state.submittedAt || 0})`;
+  };
+  const lastUpdated = getTimestamp();
+  const getStatusInfo = () => {
+    if (mutation.state.isPaused) {
+      return {
+        status: "Paused",
+        color: buoyColors.textMuted,
+        icon: /*#__PURE__*/_jsx(PauseCircle, {})
+      };
+    }
+    switch (mutation.state.status) {
+      case "success":
+        return {
+          status: "Success",
+          color: buoyColors.success,
+          icon: /*#__PURE__*/_jsx(CheckCircle, {})
+        };
+      case "error":
+        return {
+          status: "Error",
+          color: buoyColors.error,
+          icon: /*#__PURE__*/_jsx(XCircle, {})
+        };
+      case "pending":
+        return {
+          status: "Loading",
+          color: buoyColors.primary,
+          icon: /*#__PURE__*/_jsx(LoadingCircle, {})
+        };
+      default:
+        return {
+          status: "Idle",
+          color: buoyColors.textMuted,
+          icon: null
+        };
+    }
+  };
+  const statusInfo = getStatusInfo();
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    "sentry-label": "ignore devtools mutation button",
+    onPress: () => setSelectedMutation(mutation === selected ? undefined : mutation),
+    style: [styles.button, selected?.mutationId === mutation.mutationId && styles.selected],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.rowContent,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.statusSection,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.statusDot, {
+            backgroundColor: statusInfo.color
+          }]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.statusInfo,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.statusLabel, {
+              color: statusInfo.color
+            }],
+            children: statusInfo.status
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.submittedText,
+            children: submittedAt
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.mutationSection,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.mutationKey,
+          children: getMutationText(mutation)
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.bottomRightContainer,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.bottomRightText,
+        children: lastUpdated
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    marginHorizontal: 8,
+    marginVertical: 3,
+    padding: 12
+  },
+  selected: {
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "50"
+  },
+  rowContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  statusSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  statusInfo: {
+    flex: 1
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 14
+  },
+  submittedText: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 1
+  },
+  mutationSection: {
+    flex: 2,
+    paddingHorizontal: 12
+  },
+  mutationKey: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: buoyColors.text,
+    lineHeight: 16
+  },
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace"
+  }
+});

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

@@ -0,0 +1,117 @@
+"use strict";
+
+import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import MutationDetailsChips from "./MutationDetailsChips";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Displays high-level mutation metadata such as status, retries, and timestamps.
+ */
+export default function MutationDetails({
+  selectedMutation
+}) {
+  if (selectedMutation === undefined) {
+    return null;
+  }
+  const submittedAt = new Date(selectedMutation.state.submittedAt).toLocaleTimeString();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.minWidth,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.headerText,
+      children: "Mutation Details"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        "sentry-label": "ignore devtools mutation details scroll",
+        horizontal: true,
+        style: styles.flex1,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.flexWrap,
+          children: `${selectedMutation.options.mutationKey ? displayValue(selectedMutation.options.mutationKey, true) : "No mutationKey found"}`
+        })
+      }), /*#__PURE__*/_jsx(MutationDetailsChips, {
+        status: selectedMutation.state.status
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.labelText,
+        children: "Submitted At:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.valueText,
+        children: submittedAt
+      })]
+    })]
+  });
+}
+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"
+  },
+  flex1: {
+    flex: 1,
+    marginRight: 8
+  },
+  flexWrap: {
+    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"
+  }
+});

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

@@ -0,0 +1,62 @@
+"use strict";
+
+import { Text, View, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+const backgroundColors = {
+  success: buoyColors.success + "15",
+  error: buoyColors.error + "15",
+  pending: buoyColors.primary + "15",
+  idle: buoyColors.textMuted + "1A"
+};
+const borderColors = {
+  success: buoyColors.success + "33",
+  error: buoyColors.error + "33",
+  pending: buoyColors.primary + "33",
+  idle: buoyColors.textMuted + "33"
+};
+const textColors = {
+  success: buoyColors.success,
+  error: buoyColors.error,
+  pending: buoyColors.primary,
+  idle: buoyColors.textMuted
+};
+/**
+ * Small status chip used in mutation detail views that adapts styling to the mutation status.
+ */
+export default function QueryDetailsChip({
+  status
+}) {
+  const statusToColor = status;
+  const backgroundColor = backgroundColors[statusToColor];
+  const borderColor = borderColors[statusToColor];
+  const textColor = textColors[statusToColor];
+  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/MutationInformation.js

@@ -0,0 +1,112 @@
+"use strict";
+
+import DataExplorer from "./Explorer";
+import { ScrollView, Text, View, StyleSheet } from "react-native";
+import MutationDetails from "./MutationDetails";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Detailed information block for a selected mutation within the modal experience. */
+export default function MutationInformation({
+  selectedMutation
+}) {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    "sentry-label": "ignore devtools mutation information scroll",
+    style: styles.flex1,
+    contentContainerStyle: styles.scrollContent,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsx(MutationDetails, {
+        selectedMutation: selectedMutation
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.textHeader,
+        children: "Variables Details"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.padding,
+        children: /*#__PURE__*/_jsx(DataExplorer, {
+          label: "Variables",
+          value: selectedMutation?.state.variables,
+          defaultExpanded: ["Variables"]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.textHeader,
+        children: "Context Details"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.padding,
+        children: /*#__PURE__*/_jsx(DataExplorer, {
+          label: "Context",
+          value: selectedMutation?.state.context,
+          defaultExpanded: ["Context"]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.textHeader,
+        children: "Data Explorer"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.padding,
+        children: /*#__PURE__*/_jsx(DataExplorer, {
+          label: "Data",
+          defaultExpanded: ["Data"],
+          value: selectedMutation?.state.data
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.textHeader,
+        children: "Mutations Explorer"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.padding,
+        children: /*#__PURE__*/_jsx(DataExplorer, {
+          label: "Mutation",
+          defaultExpanded: ["Mutation"],
+          value: selectedMutation
+        })
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  scrollContent: {
+    paddingBottom: 16,
+    paddingHorizontal: 8
+  },
+  section: {
+    marginBottom: 16
+  },
+  textHeader: {
+    textAlign: "left",
+    backgroundColor: buoyColors.primary + "15",
+    padding: 12,
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.primary,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.primary + "33",
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    textTransform: "uppercase"
+  },
+  padding: {
+    padding: 12,
+    backgroundColor: buoyColors.card,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    borderTopWidth: 0
+  }
+});

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

@@ -0,0 +1,106 @@
+"use strict";
+
+import { View, StyleSheet, ScrollView } from "react-native";
+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
+ * accidental filter toggles while panning.
+ */
+const MutationStatusCount = ({
+  activeFilter,
+  onFilterChange
+}) => {
+  const {
+    pending,
+    success,
+    error,
+    paused
+  } = useMutationStatusCounts();
+  const [isScrolling, setIsScrolling] = useState(false);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
+  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 (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,
+        showLabel: true
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Success",
+        color: "green",
+        count: success,
+        isActive: activeFilter === "success",
+        onPress: event => handleFilterClick("success", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Error",
+        color: "red",
+        count: error,
+        isActive: activeFilter === "error",
+        onPress: event => handleFilterClick("error", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }), /*#__PURE__*/_jsx(QueryStatus, {
+        label: "Paused",
+        color: "purple",
+        count: paused,
+        isActive: activeFilter === "paused",
+        onPress: event => handleFilterClick("paused", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      })]
+    })
+  });
+};
+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;