@buoy-gg/react-query 1.7.2

package/lib/commonjs/react-query/utils/storageQueryUtils.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCleanStorageKey = getCleanStorageKey;
+exports.getStorageType = getStorageType;
+exports.getStorageTypeColor = getStorageTypeColor;
+exports.getStorageTypeHexColor = getStorageTypeHexColor;
+exports.getStorageTypeLabel = getStorageTypeLabel;
+exports.isStorageQuery = isStorageQuery;
+exports.storageQueryKeys = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * Centralized storage query keys for all storage hooks
+ * This ensures consistency across MMKV, AsyncStorage, and SecureStorage hooks
+ * and allows easy modification of the base storage key in one place
+ */
+const storageQueryKeys = exports.storageQueryKeys = {
+  /**
+   * Base storage key - change this to update all storage-related queries
+   */
+  base: () => ["#storage"],
+  /**
+   * MMKV storage query keys
+   */
+  mmkv: {
+    root: () => [...storageQueryKeys.base(), "mmkv"],
+    key: key => [...storageQueryKeys.mmkv.root(), key],
+    all: () => [...storageQueryKeys.mmkv.root(), "all"]
+  },
+  /**
+   * AsyncStorage query keys
+   */
+  async: {
+    root: () => [...storageQueryKeys.base(), "async"],
+    key: key => [...storageQueryKeys.async.root(), key],
+    all: () => [...storageQueryKeys.async.root(), "all"]
+  },
+  /**
+   * SecureStorage query keys
+   */
+  secure: {
+    root: () => [...storageQueryKeys.base(), "secure"],
+    key: key => [...storageQueryKeys.secure.root(), key],
+    all: () => [...storageQueryKeys.secure.root(), "all"]
+  }
+};
+
+/**
+ * Storage types that can be enabled/disabled
+ */
+
+/**
+ * Check if a query key matches any of the storage patterns
+ */
+function isStorageQuery(queryKey) {
+  if (!Array.isArray(queryKey) || queryKey.length === 0) {
+    return false;
+  }
+  return queryKey[0] === "#storage";
+}
+
+/**
+ * Get the storage type from a query key
+ */
+function getStorageType(queryKey) {
+  if (!isStorageQuery(queryKey) || queryKey.length < 2) {
+    return null;
+  }
+  const storageType = queryKey[1];
+  if (storageType === "mmkv" || storageType === "async" || storageType === "secure") {
+    return storageType;
+  }
+  return null;
+}
+
+/**
+ * Get display label for storage type
+ */
+function getStorageTypeLabel(storageType) {
+  switch (storageType) {
+    case "mmkv":
+      return "MMKV";
+    case "async":
+      return "Async";
+    case "secure":
+      return "Secure";
+    default:
+      return storageType;
+  }
+}
+
+/**
+ * Get storage type color class for styling
+ */
+function getStorageTypeColor(storageType) {
+  switch (storageType) {
+    case "mmkv":
+      return "purple";
+    // Premium, high-performance
+    case "async":
+      return "blue";
+    // Standard, reliable
+    case "secure":
+      return "green";
+    // Security, safety
+    default:
+      return "gray";
+  }
+}
+
+/**
+ * Get storage type hex color for UI components
+ * Design rationale:
+ * - MMKV: Primary teal - Premium, high-performance, sophisticated
+ * - Async: Warning color - Standard, reliable, default
+ * - Secure: Success color - Security, safety, protection
+ */
+function getStorageTypeHexColor(storageType) {
+  switch (storageType) {
+    case "mmkv":
+      return _sharedUi.buoyColors.primary;
+    // Premium, high-performance
+    case "async":
+      return _sharedUi.buoyColors.warning;
+    // Standard, reliable
+    case "secure":
+      return _sharedUi.buoyColors.success;
+    // Security, safety
+    default:
+      return _sharedUi.buoyColors.textMuted;
+    // Gray
+  }
+}
+
+/**
+ * Extract clean storage key from storage query key
+ * Example: ["#storage", "async", "@dev_tools_modal_state"] → "@dev_tools_modal_state"
+ */
+function getCleanStorageKey(queryKey) {
+  if (!isStorageQuery(queryKey) || queryKey.length < 3) {
+    return "Unknown Storage Key";
+  }
+
+  // Return everything after the storage type (index 2 and beyond)
+  const cleanKeys = queryKey.slice(2);
+  return cleanKeys.filter(k => k != null).map(k => String(k)).join(" › ") || "Unknown Storage Key";
+}

package/lib/commonjs/react-query/utils/updateNestedDataByPath.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateNestedDataByPath = void 0;
+/**
+ * updates nested data by path
+ *
+ * @param {JsonValue} oldData Data to be updated
+ * @param {Array<string>} updatePath Path to the data to be updated
+ * @param {JsonValue} value New value
+ */
+const updateNestedDataByPath = (oldData, updatePath, value) => {
+  if (updatePath.length === 0) {
+    return value;
+  }
+  if (oldData instanceof Map) {
+    const newData = new Map(oldData);
+    if (updatePath.length === 1) {
+      newData.set(updatePath[0], value);
+      return newData;
+    }
+    const [head, ...tail] = updatePath;
+    const currentValue = newData.get(head);
+    newData.set(head, updateNestedDataByPath(currentValue ?? null, tail, value));
+    return newData;
+  }
+  if (oldData instanceof Set) {
+    const setAsArray = updateNestedDataByPath(Array.from(oldData), updatePath, value);
+    return new Set(Array.isArray(setAsArray) ? setAsArray : []);
+  }
+  if (Array.isArray(oldData)) {
+    const newData = [...oldData];
+    if (updatePath.length === 1) {
+      // @ts-expect-error NAS
+      newData[updatePath[0]] = value;
+      return newData;
+    }
+    const [head, ...tail] = updatePath;
+    // @ts-expect-error NAS
+    newData[head] = updateNestedDataByPath(newData[head], tail, value);
+    return newData;
+  }
+  if (oldData instanceof Object) {
+    const newData = {
+      ...oldData
+    };
+    if (updatePath.length === 1) {
+      // @ts-expect-error NAS
+      newData[updatePath[0]] = value;
+      return newData;
+    }
+    const [head, ...tail] = updatePath;
+    // @ts-expect-error NAS
+    newData[head] = updateNestedDataByPath(newData[head], tail, value);
+    return newData;
+  }
+  return oldData;
+};
+exports.updateNestedDataByPath = updateNestedDataByPath;

package/lib/module/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+// Check if @tanstack/react-query is installed
+try {
+  require("@tanstack/react-query");
+} catch (error) {
+  throw new Error("\n\n[@buoy-gg/react-query] ERROR: Missing required peer dependency\n\n" + "This package requires @tanstack/react-query to be installed.\n\n" + "Install it with:\n" + "  npm install @tanstack/react-query\n" + "  or\n" + "  pnpm add @tanstack/react-query\n" + "  or\n" + "  yarn add @tanstack/react-query\n\n" + "For more information, visit: https://tanstack.com/query/latest\n");
+}
+
+// Export preset configuration (easiest way to add to FloatingDevTools!)
+export { reactQueryToolPreset, createReactQueryTool, wifiTogglePreset, createWifiToggleTool } from "./preset";
+
+// React Query dev tools entry point
+// Re-export the full dev tools surface so consumers can tree-shake as needed
+export * from "./react-query";
+export * from "./react-query/components";
+export * from "./react-query/hooks";
+export * from "./react-query/utils";
+export * from "./react-query/types";

package/lib/module/preset.js

@@ -0,0 +1,216 @@
+"use strict";
+
+/**
+ * Pre-configured React Query devtools for FloatingDevTools
+ *
+ * This preset provides a zero-config way to add React Query inspection to your dev tools.
+ * Just import and add it to your apps array!
+ *
+ * @example
+ * ```tsx
+ * import { reactQueryToolPreset } from '@buoy-gg/react-query';
+ *
+ * const installedApps = [
+ *   reactQueryToolPreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+
+import { QueryIcon } from "@buoy-gg/floating-tools-core";
+import { Wifi } from "@buoy-gg/shared-ui";
+import { ReactQueryDevToolsModal } from "./react-query/components/ReactQueryDevToolsModal";
+import { onlineManager } from "@tanstack/react-query";
+import { devToolsStorageKeys, safeSetItem } from "@buoy-gg/shared-ui";
+
+// Empty component for toggle-only mode
+const EmptyComponent = () => null;
+
+// Save WiFi state to storage
+const saveWifiState = async enabled => {
+  try {
+    await safeSetItem(devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
+  } catch (error) {
+    // Failed to save WiFi state
+  }
+};
+import { useState, useEffect } from "react";
+
+/**
+ * WiFi icon component - uses hooks to subscribe to onlineManager changes.
+ *
+ * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+ * This component MUST use useState and useEffect hooks to subscribe to onlineManager.
+ * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
+ * which allows hooks to work properly.
+ *
+ * If you remove the hooks or change this to read onlineManager.isOnline() directly,
+ * the icon color will NOT update when the WiFi toggle is pressed.
+ *
+ * See: FloatingMenu.tsx (renders as <IconComponent />)
+ * See: DialIcon.tsx (renders as <icon.iconComponent />)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function WifiIcon({
+  size
+}) {
+  const [isOnline, setIsOnline] = useState(() => onlineManager.isOnline());
+  useEffect(() => {
+    const unsubscribe = onlineManager.subscribe(online => {
+      setIsOnline(online);
+    });
+    return unsubscribe;
+  }, []);
+  const color = isOnline ? "#10B981" : "#DC2626";
+  return /*#__PURE__*/_jsx(Wifi, {
+    size: size,
+    color: color
+  });
+}
+
+/**
+ * Pre-configured React Query devtools for FloatingDevTools.
+ * Includes:
+ * - Query browser and inspector
+ * - Mutation tracking
+ * - Cache inspection
+ * - Query invalidation
+ * - Performance monitoring
+ */
+export const reactQueryToolPreset = {
+  id: "query",
+  name: "QUERY",
+  description: "React Query inspector",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/_jsx(QueryIcon, {
+    size: size
+  }),
+  component: ReactQueryDevToolsModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom React Query devtools configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createReactQueryTool } from '@buoy-gg/react-query';
+ *
+ * const myQueryTool = createReactQueryTool({
+ *   name: "TANSTACK",
+ *   colorPreset: "purple",
+ *   enableSharedModalDimensions: true,
+ * });
+ * ```
+ */
+export function createReactQueryTool(options) {
+  return {
+    id: options?.id || "query",
+    name: options?.name || "QUERY",
+    description: options?.description || "React Query inspector",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/_jsx(QueryIcon, {
+      size: size
+    }),
+    component: ReactQueryDevToolsModal,
+    props: {
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}
+
+/**
+ * Pre-configured WiFi toggle tool for FloatingDevTools.
+ * Allows toggling React Query's online state to simulate offline scenarios.
+ * Simple toggle - no modal needed!
+ *
+ * @example
+ * ```tsx
+ * import { wifiTogglePreset } from '@buoy-gg/react-query';
+ *
+ * const installedApps = [
+ *   wifiTogglePreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+export const wifiTogglePreset = {
+  id: "query-wifi-toggle",
+  name: "WIFI",
+  description: "Toggle React Query online/offline state",
+  slot: "row",
+  icon: WifiIcon,
+  component: EmptyComponent,
+  props: {},
+  launchMode: "toggle-only",
+  onPress: () => {
+    const newState = !onlineManager.isOnline();
+    onlineManager.setOnline(newState);
+    saveWifiState(newState);
+  }
+};
+
+/**
+ * Create a custom WiFi toggle tool configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createWifiToggleTool } from '@buoy-gg/react-query';
+ *
+ * const myWifiTool = createWifiToggleTool({
+ *   name: "OFFLINE",
+ *   onColor: "#10B981",
+ *   offColor: "#DC2626",
+ * });
+ * ```
+ */
+export function createWifiToggleTool(options) {
+  const onColor = options?.onColor || "#10B981";
+  const offColor = options?.offColor || "#DC2626";
+
+  /**
+   * Custom WiFi icon component with hooks - rendered as JSX component.
+   *
+   * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+   * This component MUST use useState and useEffect hooks to subscribe to onlineManager.
+   * See the comment on WifiIcon above for full explanation.
+   */
+  const CustomWifiIcon = ({
+    size
+  }) => {
+    const [isOnline, setIsOnline] = useState(() => onlineManager.isOnline());
+    useEffect(() => {
+      const unsubscribe = onlineManager.subscribe(online => {
+        setIsOnline(online);
+      });
+      return unsubscribe;
+    }, []);
+    return /*#__PURE__*/_jsx(Wifi, {
+      size: size,
+      color: isOnline ? onColor : offColor
+    });
+  };
+  return {
+    id: options?.id || "query-wifi-toggle",
+    name: options?.name || "WIFI",
+    description: options?.description || "Toggle React Query online/offline state",
+    slot: "row",
+    icon: CustomWifiIcon,
+    component: EmptyComponent,
+    props: {},
+    launchMode: "toggle-only",
+    onPress: () => {
+      const newState = !onlineManager.isOnline();
+      onlineManager.setOnline(newState);
+      saveWifiState(newState);
+    }
+  };
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+
+/**
+ * Main entry point for the React Query Dev Tools feature
+ * This component orchestrates all React Query dev tools functionality
+ */
+
+// Re-export main modal component
+export { ReactQueryModal } from "./components/modals/ReactQueryModal";
+export { ReactQueryModalHeader } from "./components/modals/ReactQueryModalHeader";
+
+// Re-export individual modals
+export { QueryBrowserModal } from "./components/modals/QueryBrowserModal";
+export { MutationBrowserModal } from "./components/modals/MutationBrowserModal";
+export { MutationEditorModal } from "./components/modals/MutationEditorModal";
+export { DataEditorModal } from "./components/modals/DataEditorModal";
+
+// Re-export footer components
+export { QueryBrowserFooter } from "./components/modals/QueryBrowserFooter";
+export { MutationBrowserFooter } from "./components/modals/MutationBrowserFooter";
+export { SwipeIndicator } from "./components/modals/SwipeIndicator";
+
+// Re-export query browser components
+export { Explorer } from "./components/query-browser";
+export { QueryBrowser } from "./components/query-browser";
+export { QueryDetails } from "./components/query-browser";
+export { QueryInformation } from "./components/query-browser";
+export { QueryActions } from "./components/query-browser";
+export { QueryRow } from "./components/query-browser";
+export { QueryStatus } from "./components/query-browser";
+export { QueryStatusCount } from "./components/query-browser";
+export { QueryDetailsChip } from "./components/query-browser";
+
+// Re-export mutation components
+export { MutationsList } from "./components/query-browser";
+export { MutationDetails } from "./components/query-browser";
+export { MutationInformation } from "./components/query-browser";
+export { MutationButton } from "./components/query-browser";
+export { MutationStatusCount } from "./components/query-browser";
+export { MutationDetailsChips } from "./components/query-browser";
+
+// Re-export action components
+export { ActionButton } from "./components/query-browser";
+export { ClearCacheButton } from "./components/query-browser";
+export { NetworkToggleButton } from "./components/query-browser";
+export { StorageStatusCount } from "./components/query-browser";
+
+// Re-export shared components
+export { VirtualizedDataExplorer, DataViewer, TypeLegend } from "@buoy-gg/shared-ui/dataViewer";
+
+// Re-export mode components
+export { QueryBrowserMode } from "./components/QueryBrowserMode";
+export { MutationBrowserMode } from "./components/MutationBrowserMode";
+export { MutationEditorMode } from "./components/MutationEditorMode";
+export { DataEditorMode } from "./components/DataEditorMode";
+export { QuerySelector } from "./components/QuerySelector";
+export { QueryDebugInfo } from "./components/QueryDebugInfo";
+export { WifiToggle } from "./components/WifiToggle";
+export { ReactQuerySection } from "./components/ReactQuerySection";
+
+// Re-export hooks
+export * from "./hooks";
+
+// Re-export utilities
+export * from "./utils";
+
+// Re-export types
+export * from "./types";