@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/components/MutationBrowserMode.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MutationBrowserMode = MutationBrowserMode;
+var _reactNative = require("react-native");
+var _MutationsList = _interopRequireDefault(require("./query-browser/MutationsList"));
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Layout wrapper that renders the mutation list alongside selection handling glue logic used by
+ * the React Query modal.
+ */
+function MutationBrowserMode({
+  selectedMutation,
+  onMutationSelect,
+  activeFilter,
+  searchText = ""
+}) {
+  // Convert function to Dispatch compatible format
+  const handleMutationSelect = action => {
+    if (typeof action === "function") {
+      onMutationSelect(action(selectedMutation));
+    } else {
+      onMutationSelect(action);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.mutationListContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationsList.default, {
+      selectedMutation: selectedMutation,
+      setSelectedMutation: handleMutationSelect,
+      activeFilter: activeFilter,
+      searchText: searchText,
+      hideInfoPanel: true,
+      contentContainerStyle: styles.mutationListContent
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  mutationListContainer: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  mutationListContent: {
+    padding: 8,
+    backgroundColor: _sharedUi.buoyColors.base
+  }
+});

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

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MutationEditorMode = MutationEditorMode;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _Explorer = _interopRequireDefault(require("./query-browser/Explorer"));
+var _MutationDetails = _interopRequireDefault(require("./query-browser/MutationDetails"));
+var _ActionButton = _interopRequireDefault(require("./query-browser/ActionButton"));
+var _useMutationActionButtons = require("../hooks/useMutationActionButtons");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Mutation-focused editing experience mirroring the query editor layout. Provides mutation detail
+ * panels, data inspector, and action buttons for the selected mutation entry.
+ */
+function MutationEditorMode({
+  selectedMutation,
+  isFloatingMode
+}) {
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const actionButtons = (0, _useMutationActionButtons.useMutationActionButtons)(selectedMutation);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      accessibilityLabel: "Mutation editor mode",
+      accessibilityHint: "View mutation editor mode",
+      "sentry-label": "ignore mutation editor mode",
+      style: styles.explorerScrollContainer,
+      contentContainerStyle: styles.explorerScrollContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataExplorer, {
+          visible: !!selectedMutation.state.data,
+          selectedMutation: selectedMutation
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataEmptyState, {
+          visible: !selectedMutation.state.data,
+          selectedMutation: selectedMutation
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationDetails.default, {
+          selectedMutation: selectedMutation
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.mutationExplorerContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.mutationExplorerHeader,
+            children: "Mutation Explorer"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.mutationExplorerContent,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+              title: "",
+              data: selectedMutation,
+              maxDepth: 10,
+              rawMode: true,
+              showTypeFilter: true,
+              initialExpanded: false
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.actionFooter, {
+        paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.actionsGrid,
+        children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          "sentry-label": `ignore action button ${action.label}`,
+          onClick: action.onPress,
+          text: action.label,
+          bgColorClass: action.bgColorClass,
+          _textColorClass: action.textColorClass,
+          disabled: action.disabled
+        }, index))
+      })
+    })]
+  });
+}
+function DataExplorer({
+  visible,
+  selectedMutation
+}) {
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.dataContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.dataHeader,
+      children: "Data Editor"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.dataContent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Explorer.default, {
+        editable: true,
+        label: "Data",
+        value: selectedMutation.state.data,
+        defaultExpanded: ["Data"]
+      }, selectedMutation.mutationId)
+    })]
+  });
+}
+function DataEmptyState({
+  visible,
+  selectedMutation
+}) {
+  if (!visible) return null;
+  const getEmptyStateContent = () => {
+    if (selectedMutation.state.status === "pending") {
+      return {
+        title: "Pending...",
+        description: "The mutation is in progress."
+      };
+    }
+    if (selectedMutation.state.status === "error") {
+      return {
+        title: "Mutation Error",
+        description: selectedMutation.state.error?.message || "An error occurred."
+      };
+    }
+    return {
+      title: "No Data Available",
+      description: "This mutation has no data."
+    };
+  };
+  const {
+    title,
+    description
+  } = getEmptyStateContent();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyDescription,
+      children: description
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  explorerScrollContainer: {
+    flex: 1
+  },
+  explorerScrollContent: {
+    paddingBottom: 16,
+    paddingHorizontal: 8,
+    flexGrow: 1
+  },
+  section: {
+    marginBottom: 16
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  emptyTitle: {
+    color: _sharedUi.buoyColors.text,
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  emptyDescription: {
+    color: _sharedUi.buoyColors.textSecondary,
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20,
+    maxWidth: 280
+  },
+  actionFooter: {
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14
+  },
+  actionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    justifyContent: "space-between"
+  },
+  // Mutation Explorer styled container matching QueryDetails
+  mutationExplorerContainer: {
+    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
+  },
+  mutationExplorerHeader: {
+    backgroundColor: _sharedUi.buoyColors.primary + "1A",
+    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"
+  },
+  mutationExplorerContent: {
+    padding: 8
+  },
+  // Data section matching query editor theme for consistency
+  dataContainer: {
+    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
+  },
+  dataHeader: {
+    backgroundColor: _sharedUi.buoyColors.primary + "1A",
+    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"
+  },
+  dataContent: {
+    padding: 8
+  }
+});

package/lib/commonjs/react-query/components/QueryBrowserMode.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryBrowserMode = QueryBrowserMode;
+var _reactNative = require("react-native");
+var _react = require("react");
+var _index = require("./query-browser/index");
+var _FilterStatusBadge = require("./FilterStatusBadge");
+var _useAllQueries = _interopRequireDefault(require("../hooks/useAllQueries"));
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Wrapper around the query list experience used inside the modal view. */
+function QueryBrowserMode({
+  selectedQuery,
+  onQuerySelect,
+  activeFilter,
+  searchText = "",
+  ignoredPatterns = new Set(),
+  includedPatterns = new Set(),
+  onFilterPress
+}) {
+  const hasIncludeFilters = includedPatterns.size > 0;
+  const hasExcludeFilters = ignoredPatterns.size > 0;
+  const allQueries = (0, _useAllQueries.default)();
+
+  // Calculate filtered count for the badge
+  const filteredCount = (0, _react.useMemo)(() => {
+    let filtered = allQueries;
+
+    // Apply included patterns filter
+    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 Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Apply ignored patterns filter
+    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 !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+    return filtered.length;
+  }, [allQueries, includedPatterns, ignoredPatterns]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.queryListContainer,
+    children: [(hasIncludeFilters || hasExcludeFilters) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterStatusBadge.FilterStatusBadge, {
+      totalCount: allQueries.length,
+      filteredCount: filteredCount,
+      onPress: onFilterPress
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.QueryBrowser, {
+      selectedQuery: selectedQuery,
+      onQuerySelect: onQuerySelect,
+      activeFilter: activeFilter,
+      searchText: searchText,
+      ignoredPatterns: ignoredPatterns,
+      includedPatterns: includedPatterns,
+      emptyStateMessage: searchText ? `No queries found matching "${searchText}"` : activeFilter ? `No ${activeFilter} queries found` : hasIncludeFilters ? `No queries match your "include only" filters. ${includedPatterns.size} pattern(s) active.` : hasExcludeFilters ? `No queries match the current filters. ${ignoredPatterns.size} pattern(s) excluded.` : "No React Query queries are currently active.\n\nTo see queries here:\n• Make API calls using useQuery\n• Ensure queries are within QueryClientProvider\n• Check console for debugging info",
+      contentContainerStyle: styles.queryListContent
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  queryListContainer: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  queryListContent: {
+    padding: 8,
+    backgroundColor: _sharedUi.buoyColors.base,
+    flexGrow: 1
+  }
+});

package/lib/commonjs/react-query/components/QueryDebugInfo.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryDebugInfo = QueryDebugInfo;
+var _reactNative = require("react-native");
+var _reactQuery = require("@tanstack/react-query");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Lightweight debug panel that surfaces high-level QueryClient information and recently seen
+ * query keys. Intended primarily for the React Query dev tools modal.
+ */
+function QueryDebugInfo() {
+  try {
+    const queryClient = (0, _reactQuery.useQueryClient)();
+    const queries = queryClient.getQueryCache().getAll();
+    const mutations = queryClient.getMutationCache().getAll();
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.container,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.title,
+        children: "Debug Info"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.info,
+        children: "QueryClient: \u2705 Available"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.info,
+        children: ["Queries: ", queries.length]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.info,
+        children: ["Mutations: ", mutations.length]
+      }), queries.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.queriesList,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.subtitle,
+          children: "Query Keys:"
+        }), queries.slice(0, 3).map((query, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.queryKey,
+          children: ["\u2022", " ", Array.isArray(query.queryKey) ? query.queryKey.join(" - ") : String(query.queryKey)]
+        }, index)), queries.length > 3 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.more,
+          children: ["... and ", queries.length - 3, " more"]
+        })]
+      })]
+    });
+  } catch (error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.container,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.title,
+        children: "Debug Info"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.error,
+        children: ["\u274C QueryClient Error: ", String(error)]
+      })]
+    });
+  }
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    borderRadius: 8,
+    margin: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)"
+  },
+  title: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 8
+  },
+  subtitle: {
+    color: "#E5E7EB",
+    fontSize: 12,
+    fontWeight: "500",
+    marginTop: 8,
+    marginBottom: 4
+  },
+  info: {
+    color: "#9CA3AF",
+    fontSize: 12,
+    marginBottom: 4
+  },
+  error: {
+    color: "#EF4444",
+    fontSize: 12,
+    marginBottom: 4
+  },
+  queriesList: {
+    marginTop: 4
+  },
+  queryKey: {
+    color: "#60A5FA",
+    fontSize: 11,
+    marginLeft: 8,
+    marginBottom: 2
+  },
+  more: {
+    color: "#9CA3AF",
+    fontSize: 11,
+    fontStyle: "italic",
+    marginLeft: 8
+  }
+});