@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,310 @@
+"use strict";
+
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { useQueryClient } from "@tanstack/react-query";
+import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import Explorer from "./query-browser/Explorer";
+import QueryDetails from "./query-browser/QueryDetails";
+import ActionButton from "./query-browser/ActionButton";
+import { getQueryStatusLabel } from "../utils/getQueryStatusLabel";
+import { useActionButtons } from "../hooks/useActionButtons";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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.
+ */
+export function DataEditorMode({
+  selectedQuery,
+  isFloatingMode,
+  disableInternalFooter = false,
+  queryVersion
+}) {
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const queryClient = useQueryClient();
+  const actionButtons = useActionButtons(selectedQuery, queryClient, queryVersion);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(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__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(DataExplorer, {
+          visible: !!selectedQuery.state.data,
+          selectedQuery: selectedQuery,
+          queryVersion: queryVersion
+        }), /*#__PURE__*/_jsx(DataEmptyState, {
+          visible: !selectedQuery.state.data,
+          selectedQuery: selectedQuery
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsx(QueryDetails, {
+          query: selectedQuery
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.queryExplorerContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.queryExplorerHeader,
+            children: "Query Explorer"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.queryExplorerContent,
+            children: /*#__PURE__*/_jsx(DataViewer, {
+              title: "",
+              data: selectedQuery,
+              maxDepth: 10,
+              rawMode: true,
+              showTypeFilter: true,
+              initialExpanded: false
+            })
+          })]
+        })
+      })]
+    }), !disableInternalFooter && /*#__PURE__*/_jsx(View, {
+      style: [styles.actionFooter, {
+        paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.actionsGrid,
+        children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+          "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.
+ */
+export function DataEditorActionsFooter({
+  selectedQuery,
+  isFloatingMode,
+  queryVersion
+}) {
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const queryClient = useQueryClient();
+  const actionButtons = useActionButtons(selectedQuery, queryClient, queryVersion);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.actionFooter, {
+      paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
+    }],
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.actionsGrid,
+      children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+        "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__*/_jsxs(View, {
+    style: styles.dataContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.dataHeader,
+      children: "Data Editor"
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.dataContent,
+      children: /*#__PURE__*/_jsx(Explorer, {
+        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" || 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__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyDescription,
+      children: description
+    })]
+  });
+}
+const styles = 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: buoyColors.text,
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  emptyDescription: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20,
+    maxWidth: 280
+  },
+  // Action footer matching main dev tools exactly
+  actionFooter: {
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    paddingTop: 4,
+    paddingHorizontal: 12,
+    backgroundColor: 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: 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
+  },
+  queryExplorerHeader: {
+    backgroundColor: buoyColors.primary + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: 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: 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,
+    marginTop: 8
+  },
+  dataHeader: {
+    backgroundColor: buoyColors.primary + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.primary + "33",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  dataContent: {
+    padding: 8
+  }
+});

package/lib/module/react-query/components/FilterStatusBadge.js

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

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

@@ -0,0 +1,46 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import MutationsList from "./query-browser/MutationsList";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Layout wrapper that renders the mutation list alongside selection handling glue logic used by
+ * the React Query modal.
+ */
+export 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__*/_jsx(View, {
+    style: styles.mutationListContainer,
+    children: /*#__PURE__*/_jsx(MutationsList, {
+      selectedMutation: selectedMutation,
+      setSelectedMutation: handleMutationSelect,
+      activeFilter: activeFilter,
+      searchText: searchText,
+      hideInfoPanel: true,
+      contentContainerStyle: styles.mutationListContent
+    })
+  });
+}
+const styles = StyleSheet.create({
+  mutationListContainer: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  mutationListContent: {
+    padding: 8,
+    backgroundColor: buoyColors.base
+  }
+});

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

@@ -0,0 +1,252 @@
+"use strict";
+
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import Explorer from "./query-browser/Explorer";
+import MutationDetails from "./query-browser/MutationDetails";
+import ActionButton from "./query-browser/ActionButton";
+import { useMutationActionButtons } from "../hooks/useMutationActionButtons";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Mutation-focused editing experience mirroring the query editor layout. Provides mutation detail
+ * panels, data inspector, and action buttons for the selected mutation entry.
+ */
+export function MutationEditorMode({
+  selectedMutation,
+  isFloatingMode
+}) {
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const actionButtons = useMutationActionButtons(selectedMutation);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ScrollView, {
+      accessibilityLabel: "Mutation editor mode",
+      accessibilityHint: "View mutation editor mode",
+      "sentry-label": "ignore mutation editor mode",
+      style: styles.explorerScrollContainer,
+      contentContainerStyle: styles.explorerScrollContent,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(DataExplorer, {
+          visible: !!selectedMutation.state.data,
+          selectedMutation: selectedMutation
+        }), /*#__PURE__*/_jsx(DataEmptyState, {
+          visible: !selectedMutation.state.data,
+          selectedMutation: selectedMutation
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsx(MutationDetails, {
+          selectedMutation: selectedMutation
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.mutationExplorerContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.mutationExplorerHeader,
+            children: "Mutation Explorer"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.mutationExplorerContent,
+            children: /*#__PURE__*/_jsx(DataViewer, {
+              title: "",
+              data: selectedMutation,
+              maxDepth: 10,
+              rawMode: true,
+              showTypeFilter: true,
+              initialExpanded: false
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.actionFooter, {
+        paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.actionsGrid,
+        children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+          "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__*/_jsxs(View, {
+    style: styles.dataContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.dataHeader,
+      children: "Data Editor"
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.dataContent,
+      children: /*#__PURE__*/_jsx(Explorer, {
+        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__*/_jsxs(View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.emptyTitle,
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyDescription,
+      children: description
+    })]
+  });
+}
+const styles = 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: buoyColors.text,
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  emptyDescription: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20,
+    maxWidth: 280
+  },
+  actionFooter: {
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: 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: 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
+  },
+  mutationExplorerHeader: {
+    backgroundColor: buoyColors.primary + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: 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: 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
+  },
+  dataHeader: {
+    backgroundColor: buoyColors.primary + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.primary + "33",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  dataContent: {
+    padding: 8
+  }
+});