@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MutationButton;
+var _reactNative = require("react-native");
+var _svgs = require("./svgs");
+var _formatRelativeTime = require("../../utils/formatRelativeTime");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("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.
+ */
+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 (0, _formatRelativeTime.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 (0, _formatRelativeTime.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: _sharedUi.buoyColors.textMuted,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.PauseCircle, {})
+      };
+    }
+    switch (mutation.state.status) {
+      case "success":
+        return {
+          status: "Success",
+          color: _sharedUi.buoyColors.success,
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.CheckCircle, {})
+        };
+      case "error":
+        return {
+          status: "Error",
+          color: _sharedUi.buoyColors.error,
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.XCircle, {})
+        };
+      case "pending":
+        return {
+          status: "Loading",
+          color: _sharedUi.buoyColors.primary,
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.LoadingCircle, {})
+        };
+      default:
+        return {
+          status: "Idle",
+          color: _sharedUi.buoyColors.textMuted,
+          icon: null
+        };
+    }
+  };
+  const statusInfo = getStatusInfo();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    "sentry-label": "ignore devtools mutation button",
+    onPress: () => setSelectedMutation(mutation === selected ? undefined : mutation),
+    style: [styles.button, selected?.mutationId === mutation.mutationId && styles.selected],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.rowContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statusSection,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.statusDot, {
+            backgroundColor: statusInfo.color
+          }]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statusInfo,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.statusLabel, {
+              color: statusInfo.color
+            }],
+            children: statusInfo.status
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.submittedText,
+            children: submittedAt
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.mutationSection,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.mutationKey,
+          children: getMutationText(mutation)
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.bottomRightContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.bottomRightText,
+        children: lastUpdated
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    marginHorizontal: 8,
+    marginVertical: 3,
+    padding: 12
+  },
+  selected: {
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderColor: _sharedUi.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: _sharedUi.buoyColors.textMuted,
+    marginTop: 1
+  },
+  mutationSection: {
+    flex: 2,
+    paddingHorizontal: 12
+  },
+  mutationKey: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    lineHeight: 16
+  },
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  }
+});

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

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MutationDetails;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _MutationDetailsChips = _interopRequireDefault(require("./MutationDetailsChips"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Displays high-level mutation metadata such as status, retries, and timestamps.
+ */
+function MutationDetails({
+  selectedMutation
+}) {
+  if (selectedMutation === undefined) {
+    return null;
+  }
+  const submittedAt = new Date(selectedMutation.state.submittedAt).toLocaleTimeString();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.minWidth,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.headerText,
+      children: "Mutation Details"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        "sentry-label": "ignore devtools mutation details scroll",
+        horizontal: true,
+        style: styles.flex1,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.flexWrap,
+          children: `${selectedMutation.options.mutationKey ? (0, _sharedUi.displayValue)(selectedMutation.options.mutationKey, true) : "No mutationKey found"}`
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationDetailsChips.default, {
+        status: selectedMutation.state.status
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.labelText,
+        children: "Submitted At:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.valueText,
+        children: submittedAt
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  minWidth: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "4D",
+    overflow: "hidden",
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  headerText: {
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.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: _sharedUi.buoyColors.textMuted + "66"
+  },
+  flex1: {
+    flex: 1,
+    marginRight: 8
+  },
+  flexWrap: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    lineHeight: 18,
+    flexShrink: 1,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "4D"
+  },
+  labelText: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  valueText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontWeight: "500",
+    fontVariant: ["tabular-nums"],
+    fontFamily: "monospace"
+  }
+});

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryDetailsChip;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+const backgroundColors = {
+  success: _sharedUi.buoyColors.success + "15",
+  error: _sharedUi.buoyColors.error + "15",
+  pending: _sharedUi.buoyColors.primary + "15",
+  idle: _sharedUi.buoyColors.textMuted + "1A"
+};
+const borderColors = {
+  success: _sharedUi.buoyColors.success + "33",
+  error: _sharedUi.buoyColors.error + "33",
+  pending: _sharedUi.buoyColors.primary + "33",
+  idle: _sharedUi.buoyColors.textMuted + "33"
+};
+const textColors = {
+  success: _sharedUi.buoyColors.success,
+  error: _sharedUi.buoyColors.error,
+  pending: _sharedUi.buoyColors.primary,
+  idle: _sharedUi.buoyColors.textMuted
+};
+/**
+ * Small status chip used in mutation detail views that adapts styling to the mutation status.
+ */
+function QueryDetailsChip({
+  status
+}) {
+  const statusToColor = status;
+  const backgroundColor = backgroundColors[statusToColor];
+  const borderColor = borderColors[statusToColor];
+  const textColor = textColors[statusToColor];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor,
+      borderColor
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, {
+        color: textColor
+      }],
+      children: status
+    })
+  });
+}
+const styles = _reactNative.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/commonjs/react-query/components/query-browser/MutationInformation.js

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

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

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
+var _useQueryStatusCounts = require("../../hooks/useQueryStatusCounts");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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
+  } = (0, _useQueryStatusCounts.useMutationStatusCounts)();
+  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
+  const touchStartX = (0, _react.useRef)(0);
+  const touchStartY = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.mutationStatusContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Pending",
+        color: "blue",
+        count: pending,
+        isActive: activeFilter === "pending",
+        onPress: event => handleFilterClick("pending", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Success",
+        color: "green",
+        count: success,
+        isActive: activeFilter === "success",
+        onPress: event => handleFilterClick("success", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Error",
+        color: "red",
+        count: error,
+        isActive: activeFilter === "error",
+        onPress: event => handleFilterClick("error", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: "Paused",
+        color: "purple",
+        count: paused,
+        isActive: activeFilter === "paused",
+        onPress: event => handleFilterClick("paused", event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      })]
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  mutationStatusContainer: {
+    flex: 1,
+    minWidth: 0
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    flexGrow: 1
+  }
+});
+var _default = exports.default = MutationStatusCount;