@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/ReactQueryDevTools.js

@@ -0,0 +1,335 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ReactQueryModal: true,
+  ReactQueryModalHeader: true,
+  QueryBrowserModal: true,
+  MutationBrowserModal: true,
+  MutationEditorModal: true,
+  DataEditorModal: true,
+  QueryBrowserFooter: true,
+  MutationBrowserFooter: true,
+  SwipeIndicator: true,
+  Explorer: true,
+  QueryBrowser: true,
+  QueryDetails: true,
+  QueryInformation: true,
+  QueryActions: true,
+  QueryRow: true,
+  QueryStatus: true,
+  QueryStatusCount: true,
+  QueryDetailsChip: true,
+  MutationsList: true,
+  MutationDetails: true,
+  MutationInformation: true,
+  MutationButton: true,
+  MutationStatusCount: true,
+  MutationDetailsChips: true,
+  ActionButton: true,
+  ClearCacheButton: true,
+  NetworkToggleButton: true,
+  StorageStatusCount: true,
+  VirtualizedDataExplorer: true,
+  DataViewer: true,
+  TypeLegend: true,
+  QueryBrowserMode: true,
+  MutationBrowserMode: true,
+  MutationEditorMode: true,
+  DataEditorMode: true,
+  QuerySelector: true,
+  QueryDebugInfo: true,
+  WifiToggle: true,
+  ReactQuerySection: true
+};
+Object.defineProperty(exports, "ActionButton", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.ActionButton;
+  }
+});
+Object.defineProperty(exports, "ClearCacheButton", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.ClearCacheButton;
+  }
+});
+Object.defineProperty(exports, "DataEditorModal", {
+  enumerable: true,
+  get: function () {
+    return _DataEditorModal.DataEditorModal;
+  }
+});
+Object.defineProperty(exports, "DataEditorMode", {
+  enumerable: true,
+  get: function () {
+    return _DataEditorMode.DataEditorMode;
+  }
+});
+Object.defineProperty(exports, "DataViewer", {
+  enumerable: true,
+  get: function () {
+    return _dataViewer.DataViewer;
+  }
+});
+Object.defineProperty(exports, "Explorer", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.Explorer;
+  }
+});
+Object.defineProperty(exports, "MutationBrowserFooter", {
+  enumerable: true,
+  get: function () {
+    return _MutationBrowserFooter.MutationBrowserFooter;
+  }
+});
+Object.defineProperty(exports, "MutationBrowserModal", {
+  enumerable: true,
+  get: function () {
+    return _MutationBrowserModal.MutationBrowserModal;
+  }
+});
+Object.defineProperty(exports, "MutationBrowserMode", {
+  enumerable: true,
+  get: function () {
+    return _MutationBrowserMode.MutationBrowserMode;
+  }
+});
+Object.defineProperty(exports, "MutationButton", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.MutationButton;
+  }
+});
+Object.defineProperty(exports, "MutationDetails", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.MutationDetails;
+  }
+});
+Object.defineProperty(exports, "MutationDetailsChips", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.MutationDetailsChips;
+  }
+});
+Object.defineProperty(exports, "MutationEditorModal", {
+  enumerable: true,
+  get: function () {
+    return _MutationEditorModal.MutationEditorModal;
+  }
+});
+Object.defineProperty(exports, "MutationEditorMode", {
+  enumerable: true,
+  get: function () {
+    return _MutationEditorMode.MutationEditorMode;
+  }
+});
+Object.defineProperty(exports, "MutationInformation", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.MutationInformation;
+  }
+});
+Object.defineProperty(exports, "MutationStatusCount", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.MutationStatusCount;
+  }
+});
+Object.defineProperty(exports, "MutationsList", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.MutationsList;
+  }
+});
+Object.defineProperty(exports, "NetworkToggleButton", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.NetworkToggleButton;
+  }
+});
+Object.defineProperty(exports, "QueryActions", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryActions;
+  }
+});
+Object.defineProperty(exports, "QueryBrowser", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryBrowser;
+  }
+});
+Object.defineProperty(exports, "QueryBrowserFooter", {
+  enumerable: true,
+  get: function () {
+    return _QueryBrowserFooter.QueryBrowserFooter;
+  }
+});
+Object.defineProperty(exports, "QueryBrowserModal", {
+  enumerable: true,
+  get: function () {
+    return _QueryBrowserModal.QueryBrowserModal;
+  }
+});
+Object.defineProperty(exports, "QueryBrowserMode", {
+  enumerable: true,
+  get: function () {
+    return _QueryBrowserMode.QueryBrowserMode;
+  }
+});
+Object.defineProperty(exports, "QueryDebugInfo", {
+  enumerable: true,
+  get: function () {
+    return _QueryDebugInfo.QueryDebugInfo;
+  }
+});
+Object.defineProperty(exports, "QueryDetails", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryDetails;
+  }
+});
+Object.defineProperty(exports, "QueryDetailsChip", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryDetailsChip;
+  }
+});
+Object.defineProperty(exports, "QueryInformation", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryInformation;
+  }
+});
+Object.defineProperty(exports, "QueryRow", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryRow;
+  }
+});
+Object.defineProperty(exports, "QuerySelector", {
+  enumerable: true,
+  get: function () {
+    return _QuerySelector.QuerySelector;
+  }
+});
+Object.defineProperty(exports, "QueryStatus", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryStatus;
+  }
+});
+Object.defineProperty(exports, "QueryStatusCount", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.QueryStatusCount;
+  }
+});
+Object.defineProperty(exports, "ReactQueryModal", {
+  enumerable: true,
+  get: function () {
+    return _ReactQueryModal.ReactQueryModal;
+  }
+});
+Object.defineProperty(exports, "ReactQueryModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _ReactQueryModalHeader.ReactQueryModalHeader;
+  }
+});
+Object.defineProperty(exports, "ReactQuerySection", {
+  enumerable: true,
+  get: function () {
+    return _ReactQuerySection.ReactQuerySection;
+  }
+});
+Object.defineProperty(exports, "StorageStatusCount", {
+  enumerable: true,
+  get: function () {
+    return _queryBrowser.StorageStatusCount;
+  }
+});
+Object.defineProperty(exports, "SwipeIndicator", {
+  enumerable: true,
+  get: function () {
+    return _SwipeIndicator.SwipeIndicator;
+  }
+});
+Object.defineProperty(exports, "TypeLegend", {
+  enumerable: true,
+  get: function () {
+    return _dataViewer.TypeLegend;
+  }
+});
+Object.defineProperty(exports, "VirtualizedDataExplorer", {
+  enumerable: true,
+  get: function () {
+    return _dataViewer.VirtualizedDataExplorer;
+  }
+});
+Object.defineProperty(exports, "WifiToggle", {
+  enumerable: true,
+  get: function () {
+    return _WifiToggle.WifiToggle;
+  }
+});
+var _ReactQueryModal = require("./components/modals/ReactQueryModal");
+var _ReactQueryModalHeader = require("./components/modals/ReactQueryModalHeader");
+var _QueryBrowserModal = require("./components/modals/QueryBrowserModal");
+var _MutationBrowserModal = require("./components/modals/MutationBrowserModal");
+var _MutationEditorModal = require("./components/modals/MutationEditorModal");
+var _DataEditorModal = require("./components/modals/DataEditorModal");
+var _QueryBrowserFooter = require("./components/modals/QueryBrowserFooter");
+var _MutationBrowserFooter = require("./components/modals/MutationBrowserFooter");
+var _SwipeIndicator = require("./components/modals/SwipeIndicator");
+var _queryBrowser = require("./components/query-browser");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _QueryBrowserMode = require("./components/QueryBrowserMode");
+var _MutationBrowserMode = require("./components/MutationBrowserMode");
+var _MutationEditorMode = require("./components/MutationEditorMode");
+var _DataEditorMode = require("./components/DataEditorMode");
+var _QuerySelector = require("./components/QuerySelector");
+var _QueryDebugInfo = require("./components/QueryDebugInfo");
+var _WifiToggle = require("./components/WifiToggle");
+var _ReactQuerySection = require("./components/ReactQuerySection");
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});

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

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataEditorActionsFooter = DataEditorActionsFooter;
+exports.DataEditorMode = DataEditorMode;
+var _reactNative = require("react-native");
+var _reactQuery = require("@tanstack/react-query");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _Explorer = _interopRequireDefault(require("./query-browser/Explorer"));
+var _QueryDetails = _interopRequireDefault(require("./query-browser/QueryDetails"));
+var _ActionButton = _interopRequireDefault(require("./query-browser/ActionButton"));
+var _getQueryStatusLabel = require("../utils/getQueryStatusLabel");
+var _useActionButtons = require("../hooks/useActionButtons");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Primary data editing surface displayed inside the React Query modal. Couples the editable
+ * explorer, read-only insight panels, and action footer for the selected query.
+ */
+function DataEditorMode({
+  selectedQuery,
+  isFloatingMode,
+  disableInternalFooter = false,
+  queryVersion
+}) {
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const actionButtons = (0, _useActionButtons.useActionButtons)(selectedQuery, queryClient, queryVersion);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      accessibilityLabel: "Data editor mode",
+      accessibilityHint: "View data editor mode",
+      "sentry-label": "ignore data editor mode",
+      style: styles.explorerScrollContainer,
+      contentContainerStyle: [styles.explorerScrollContent, !disableInternalFooter && {
+        paddingBottom: 72
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataExplorer, {
+          visible: !!selectedQuery.state.data,
+          selectedQuery: selectedQuery,
+          queryVersion: queryVersion
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataEmptyState, {
+          visible: !selectedQuery.state.data,
+          selectedQuery: selectedQuery
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDetails.default, {
+          query: selectedQuery
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.queryExplorerContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.queryExplorerHeader,
+            children: "Query Explorer"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.queryExplorerContent,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+              title: "",
+              data: selectedQuery,
+              maxDepth: 10,
+              rawMode: true,
+              showTypeFilter: true,
+              initialExpanded: false
+            })
+          })]
+        })
+      })]
+    }), !disableInternalFooter && /*#__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))
+      })
+    })]
+  });
+}
+
+// External footer component for sticky modal footer usage
+/**
+ * Standalone footer variant that can be composed into sticky modal layouts while reusing the
+ * standard action button arrangement.
+ */
+function DataEditorActionsFooter({
+  selectedQuery,
+  isFloatingMode,
+  queryVersion
+}) {
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const actionButtons = (0, _useActionButtons.useActionButtons)(selectedQuery, queryClient, queryVersion);
+  return /*#__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,
+  selectedQuery,
+  queryVersion = 0
+}) {
+  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: selectedQuery.state.data,
+        defaultExpanded: ["Data"],
+        activeQuery: selectedQuery,
+        dataVersion: queryVersion
+      })
+    })]
+  });
+}
+function DataEmptyState({
+  visible,
+  selectedQuery
+}) {
+  if (!visible) return null;
+  const getEmptyStateContent = () => {
+    // Check if query is disabled first
+    if (selectedQuery.isDisabled()) {
+      return {
+        title: "Query Disabled",
+        description: "This query is disabled and won't automatically fetch. Enable the query or manually trigger a fetch to load data."
+      };
+    }
+    if (selectedQuery.state.status === "pending" || (0, _getQueryStatusLabel.getQueryStatusLabel)(selectedQuery) === "fetching") {
+      return {
+        title: selectedQuery.state.status === "pending" ? "Loading..." : "Refetching...",
+        description: "Please wait while the query is being executed."
+      };
+    }
+    if (selectedQuery.state.status === "error") {
+      return {
+        title: "Query Error",
+        description: selectedQuery.state.error?.message || "An error occurred while fetching data."
+      };
+    }
+    return {
+      title: "No Data Available",
+      description: "This query has no data to edit. Try refetching the query first."
+    };
+  };
+  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({
+  // Explorer section
+  explorerScrollContainer: {
+    flex: 1
+  },
+  explorerScrollContent: {
+    paddingBottom: 16,
+    paddingHorizontal: 8,
+    flexGrow: 1
+  },
+  // Section layout matching QueryInformation
+  section: {
+    marginBottom: 16
+  },
+  // Empty states matching main dev tools
+  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
+  },
+  // Action footer matching main dev tools exactly
+  actionFooter: {
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border,
+    paddingTop: 4,
+    paddingHorizontal: 12,
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14
+  },
+  actionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    // Reduced from 8
+    justifyContent: "space-between",
+    paddingBottom: 2
+  },
+  // Query Explorer styled container matching QueryDetails
+  queryExplorerContainer: {
+    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
+  },
+  queryExplorerHeader: {
+    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"
+  },
+  queryExplorerContent: {
+    padding: 8
+  },
+  // Data section with teal accent - editable/success theme
+  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,
+    marginTop: 8
+  },
+  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/FilterStatusBadge.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterStatusBadge = FilterStatusBadge;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Compact badge showing filter status (e.g., "Showing 5 of 12")
+ * Displayed below the header when filters are active
+ */
+function FilterStatusBadge({
+  totalCount,
+  filteredCount,
+  onPress
+}) {
+  // Don't show if no filtering is happening
+  if (filteredCount === totalCount) {
+    return null;
+  }
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: styles.text,
+      children: ["Showing ", filteredCount, " of ", totalCount]
+    })
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onPress,
+      activeOpacity: 0.7,
+      children: content
+    });
+  }
+  return content;
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 2
+  },
+  text: {
+    fontSize: 9,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  }
+});