@buoy-gg/react-query 7.0.41 → 7.0.42

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

@@ -1,221 +1 @@
-"use strict";
-
-import { useMemo } from "react";
-import { DynamicFilterView, buoyColors } from "@buoy-gg/shared-ui";
-import { XCircle, Clock, RefreshCw, Globe, Zap, Filter, Eye } from "@buoy-gg/shared-ui";
-import { getQueryStatusLabel } from "../utils/getQueryStatusLabel";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Comprehensive filter control panel for React Query DevTools matching the Network DevTools
- * filter UI pattern. Provides status filtering and query key pattern-based filtering.
- */
-export function QueryFilterViewV3({
-  queries,
-  activeFilter,
-  onFilterChange,
-  ignoredPatterns,
-  onPatternToggle,
-  includedPatterns,
-  onIncludedPatternToggle
-}) {
-  // Calculate status counts
-  const statusCounts = useMemo(() => {
-    const counts = {
-      all: queries.length,
-      disabled: 0,
-      fresh: 0,
-      stale: 0,
-      fetching: 0,
-      paused: 0,
-      inactive: 0,
-      error: 0
-    };
-    queries.forEach(query => {
-      // Count by the status LABEL (single source of truth) so the Error chip's
-      // count matches exactly what the cards show and what the Error filter
-      // returns. (Previously error was counted off `state.error`, a different
-      // axis than the label, so the count, cards, and filter could disagree.)
-      const status = getQueryStatusLabel(query);
-      if (status === "disabled") counts.disabled++;else if (status === "error") counts.error++;else if (status === "fresh") counts.fresh++;else if (status === "stale") counts.stale++;else if (status === "fetching") counts.fetching++;else if (status === "paused") counts.paused++;else if (status === "inactive") counts.inactive++;
-    });
-    return counts;
-  }, [queries]);
-
-  // Extract available query keys (excluding numeric-only keys)
-  const availableQueryKeys = useMemo(() => {
-    const keys = new Set();
-    queries.forEach(query => {
-      if (!query?.queryKey) return;
-      const queryKeys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
-      queryKeys.forEach(key => {
-        if (key != null) {
-          const keyStr = String(key);
-          // Skip if key is purely numeric (likely a dynamic ID)
-          if (!/^\d+$/.test(keyStr)) {
-            keys.add(keyStr);
-          }
-        }
-      });
-    });
-    return Array.from(keys).sort().slice(0, 50); // Limit to 50
-  }, [queries]);
-
-  // Convert available query keys to suggestion items (just strings)
-  const suggestionItems = useMemo(() => {
-    return availableQueryKeys;
-  }, [availableQueryKeys]);
-
-  // Calculate filtered query count based on active patterns
-  const filteredCount = useMemo(() => {
-    let filtered = queries;
-
-    // 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;
-  }, [queries, includedPatterns, ignoredPatterns]);
-
-  // Build the filter configuration
-  const filterConfig = useMemo(() => {
-    return {
-      filterSummarySection: {
-        enabled: true,
-        totalCount: queries.length,
-        filteredCount: filteredCount,
-        includePatterns: includedPatterns,
-        excludePatterns: ignoredPatterns
-      },
-      sections: [
-      // Status section - radio button style
-      {
-        id: "status",
-        title: "Status",
-        type: "status",
-        data: [{
-          id: "status::all",
-          label: "All",
-          count: statusCounts.all,
-          icon: Globe,
-          color: buoyColors.primary,
-          isActive: !activeFilter || activeFilter === "all"
-        }, {
-          id: "status::disabled",
-          label: "Disabled",
-          count: statusCounts.disabled,
-          icon: XCircle,
-          color: buoyColors.textMuted,
-          isActive: activeFilter === "disabled"
-        }, {
-          id: "status::fresh",
-          label: "Fresh",
-          count: statusCounts.fresh,
-          icon: Zap,
-          color: buoyColors.success,
-          isActive: activeFilter === "fresh"
-        }, {
-          id: "status::stale",
-          label: "Stale",
-          count: statusCounts.stale,
-          icon: Clock,
-          color: buoyColors.warning,
-          isActive: activeFilter === "stale"
-        }, {
-          id: "status::fetching",
-          label: "Fetching",
-          count: statusCounts.fetching,
-          icon: RefreshCw,
-          color: buoyColors.primary,
-          isActive: activeFilter === "fetching"
-        }, {
-          id: "status::paused",
-          label: "Paused",
-          count: statusCounts.paused,
-          icon: Clock,
-          color: buoyColors.textMuted,
-          isActive: activeFilter === "paused"
-        }, {
-          id: "status::inactive",
-          label: "Inactive",
-          count: statusCounts.inactive,
-          icon: Clock,
-          color: buoyColors.textSecondary,
-          isActive: activeFilter === "inactive"
-        }, {
-          id: "status::error",
-          label: "Error",
-          count: statusCounts.error,
-          icon: XCircle,
-          color: buoyColors.error,
-          isActive: activeFilter === "error"
-        }]
-      }],
-      addFilterSection: {
-        enabled: true,
-        placeholder: "Enter pattern to exclude...",
-        title: "EXCLUDE FILTERS",
-        icon: Filter
-      },
-      includeOnlySection: {
-        enabled: true,
-        title: "INCLUDE ONLY FILTERS",
-        description: "Show ONLY queries matching these patterns. All non-matching queries will be hidden.",
-        placeholder: "Enter pattern to include...",
-        icon: Eye,
-        patterns: includedPatterns,
-        onPatternToggle: onIncludedPatternToggle,
-        onPatternAdd: onIncludedPatternToggle
-      },
-      availableItemsSection: {
-        enabled: true,
-        title: "AVAILABLE QUERY KEYS",
-        emptyMessage: "No queries found. Query keys will appear here once queries are active.",
-        items: suggestionItems
-      },
-      howItWorksSection: {
-        enabled: true,
-        title: "HOW QUERY FILTERS WORK",
-        description: "There are two types of query key filters:",
-        examples: ["", "INCLUDE ONLY (green):", "• Shows ONLY queries matching the pattern", "• Example: 'rewards' → shows only reward queries", "• When active, non-matching queries are hidden", "", "EXCLUDE (blue):", "• Hides queries matching the pattern", "• Example: 'analytics' → hides analytics queries", "", "Filters are case-insensitive and match partial keys."]
-      },
-      activePatterns: ignoredPatterns
-    };
-  }, [statusCounts, activeFilter, ignoredPatterns, includedPatterns, suggestionItems, onIncludedPatternToggle, queries.length, filteredCount]);
-
-  // Handle filter item clicks
-  const handleFilterSelect = itemId => {
-    const [section, value] = itemId.split("::");
-    if (section === "status") {
-      // Status filters are mutually exclusive
-      if (value === "all" || activeFilter === value) {
-        onFilterChange(null);
-      } else {
-        onFilterChange(value);
-      }
-    } else if (section === "suggestion") {
-      // Toggle pattern
-      onPatternToggle(value);
-    }
-  };
-  return /*#__PURE__*/_jsx(DynamicFilterView, {
-    ...filterConfig,
-    onFilterChange: handleFilterSelect,
-    onPatternToggle: onPatternToggle,
-    onPatternAdd: onPatternToggle
-  });
-}
+"use strict";import{useMemo as f}from"react";import{DynamicFilterView as w,buoyColors as l}from"@buoy-gg/shared-ui";import{XCircle as S,Clock as h,RefreshCw as L,Globe as C,Zap as K,Filter as v,Eye as x}from"@buoy-gg/shared-ui";import{getQueryStatusLabel as k}from"../utils/getQueryStatusLabel";import{jsx as I}from"react/jsx-runtime";export function QueryFilterViewV3({queries:o,activeFilter:i,onFilterChange:p,ignoredPatterns:n,onPatternToggle:y,includedPatterns:c,onIncludedPatternToggle:d}){const a=f(()=>{const e={all:o.length,disabled:0,fresh:0,stale:0,fetching:0,paused:0,inactive:0,error:0};o.forEach(t=>{const r=k(t);if(r==="disabled")e.disabled++;else if(r==="error")e.error++;else if(r==="fresh")e.fresh++;else if(r==="stale")e.stale++;else if(r==="fetching")e.fetching++;else if(r==="paused")e.paused++;else if(r==="inactive")e.inactive++});return e},[o]);const m=f(()=>{const e=new Set;o.forEach(t=>{if(!t?.queryKey)return;const r=Array.isArray(t.queryKey)?t.queryKey:[t.queryKey];r.forEach(u=>{if(u!=null){const s=String(u);if(!/^\d+$/.test(s)){e.add(s)}}})});return Array.from(e).sort().slice(0,50)},[o]);const b=f(()=>{return m},[m]);const A=f(()=>{let e=o;if(c.size>0){e=e.filter(t=>{if(!t?.queryKey)return false;const r=Array.isArray(t.queryKey)?t.queryKey:[t.queryKey];const u=r.filter(s=>s!=null).map(s=>String(s)).join(" ").toLowerCase();return Array.from(c).some(s=>u.includes(s.toLowerCase()))})}if(n.size>0){e=e.filter(t=>{if(!t?.queryKey)return true;const r=Array.isArray(t.queryKey)?t.queryKey:[t.queryKey];const u=r.filter(s=>s!=null).map(s=>String(s)).join(" ").toLowerCase();return!Array.from(n).some(s=>u.includes(s.toLowerCase()))})}return e.length},[o,c,n]);const E=f(()=>{return{filterSummarySection:{enabled:true,totalCount:o.length,filteredCount:A,includePatterns:c,excludePatterns:n},sections:[{id:"status",title:"Status",type:"status",data:[{id:"status::all",label:"All",count:a.all,icon:C,color:l.primary,isActive:!i||i==="all"},{id:"status::disabled",label:"Disabled",count:a.disabled,icon:S,color:l.textMuted,isActive:i==="disabled"},{id:"status::fresh",label:"Fresh",count:a.fresh,icon:K,color:l.success,isActive:i==="fresh"},{id:"status::stale",label:"Stale",count:a.stale,icon:h,color:l.warning,isActive:i==="stale"},{id:"status::fetching",label:"Fetching",count:a.fetching,icon:L,color:l.primary,isActive:i==="fetching"},{id:"status::paused",label:"Paused",count:a.paused,icon:h,color:l.textMuted,isActive:i==="paused"},{id:"status::inactive",label:"Inactive",count:a.inactive,icon:h,color:l.textSecondary,isActive:i==="inactive"},{id:"status::error",label:"Error",count:a.error,icon:S,color:l.error,isActive:i==="error"}]}],addFilterSection:{enabled:true,placeholder:"Enter pattern to exclude...",title:"EXCLUDE FILTERS",icon:v},includeOnlySection:{enabled:true,title:"INCLUDE ONLY FILTERS",description:"Show ONLY queries matching these patterns. All non-matching queries will be hidden.",placeholder:"Enter pattern to include...",icon:x,patterns:c,onPatternToggle:d,onPatternAdd:d},availableItemsSection:{enabled:true,title:"AVAILABLE QUERY KEYS",emptyMessage:"No queries found. Query keys will appear here once queries are active.",items:b},howItWorksSection:{enabled:true,title:"HOW QUERY FILTERS WORK",description:"There are two types of query key filters:",examples:["","INCLUDE ONLY (green):","\u2022 Shows ONLY queries matching the pattern","\u2022 Example: 'rewards' \u2192 shows only reward queries","\u2022 When active, non-matching queries are hidden","","EXCLUDE (blue):","\u2022 Hides queries matching the pattern","\u2022 Example: 'analytics' \u2192 hides analytics queries","","Filters are case-insensitive and match partial keys."]},activePatterns:n}},[a,i,n,c,b,d,o.length,A]);const g=e=>{const[t,r]=e.split("::");if(t==="status"){if(r==="all"||i===r){p(null)}else{p(r)}}else if(t==="suggestion"){y(r)}};return I(w,{...E,onFilterChange:g,onPatternToggle:y,onPatternAdd:y})}

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

@@ -1,205 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet, TouchableOpacity, Modal, ScrollView, Pressable } from "react-native";
-import { getQueryStatusColor } from "../utils/getQueryStatusColor";
-import { QueryDebugInfo } from "./QueryDebugInfo";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Modal selector that lists all known queries, highlighting status and enabling the user to focus
- * a specific query within the dev tools experience.
- */
-export function QuerySelector({
-  queries,
-  selectedQuery,
-  isOpen,
-  onClose,
-  onSelect
-}) {
-  const getQueryDisplayName = query => {
-    return Array.isArray(query.queryKey) ? query.queryKey.join(" - ") : String(query.queryKey);
-  };
-  return /*#__PURE__*/_jsx(Modal, {
-    accessibilityLabel: "Query selector",
-    accessibilityHint: "View query selector",
-    "sentry-label": "ignore query selector",
-    visible: isOpen,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: onClose,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      accessibilityLabel: "Query selector overlay",
-      accessibilityHint: "View query selector overlay",
-      "sentry-label": "ignore query selector overlay",
-      style: styles.modalOverlay,
-      onPress: onClose,
-      children: /*#__PURE__*/_jsxs(View, {
-        accessibilityLabel: "Query selector content",
-        accessibilityHint: "View query selector content",
-        "sentry-label": "ignore query selector content",
-        style: styles.modalContent,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.modalHeader,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.modalTitle,
-            children: "Select Query"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.modalSubtitle,
-            children: [queries.length, " ", queries.length === 1 ? "query" : "queries", " ", "available"]
-          })]
-        }), /*#__PURE__*/_jsx(ScrollView, {
-          accessibilityLabel: "Query selector scroll view",
-          accessibilityHint: "View query selector scroll view",
-          "sentry-label": "ignore query selector scroll view",
-          style: styles.scrollView,
-          contentContainerStyle: styles.scrollViewContent,
-          showsVerticalScrollIndicator: true,
-          children: queries.length === 0 ? /*#__PURE__*/_jsxs(View, {
-            style: styles.emptyState,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.emptyTitle,
-              children: "No Queries Found"
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.emptyDescription,
-              children: ["No React Query queries are currently active.", "\n\n", "To see queries here:", "\n", "\u2022 Make API calls using useQuery", "\n", "\u2022 Ensure queries are within QueryClientProvider", "\n", "\u2022 Check console for debugging info"]
-            }), /*#__PURE__*/_jsx(QueryDebugInfo, {})]
-          }) : queries.map((query, index) => {
-            const displayName = getQueryDisplayName(query);
-            const statusColorName = getQueryStatusColor({
-              queryState: query.state,
-              observerCount: query.getObserversCount(),
-              isStale: query.isStale()
-            });
-
-            // Convert color names to hex colors
-            const colorMap = {
-              blue: "#3B82F6",
-              gray: "#6B7280",
-              purple: "#8B5CF6",
-              yellow: "#F59E0B",
-              green: "#10B981",
-              red: "#EF4444"
-            };
-            const statusColor = colorMap[statusColorName] || "#6B7280";
-            const isSelected = query === selectedQuery;
-            return /*#__PURE__*/_jsxs(TouchableOpacity, {
-              accessibilityLabel: `Query ${displayName}`,
-              accessibilityHint: `View query ${displayName}`,
-              "sentry-label": `ignore query ${displayName}`,
-              style: [styles.queryItem, isSelected && styles.selectedQueryItem],
-              onPress: () => onSelect(query),
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.statusDot, {
-                  backgroundColor: statusColor
-                }]
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.queryText, isSelected && styles.selectedQueryText],
-                numberOfLines: 1,
-                children: displayName
-              })]
-            }, `${query.queryHash}-${index}`);
-          })
-        })]
-      })
-    })
-  });
-}
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  modalContent: {
-    backgroundColor: "#1F1F1F",
-    borderRadius: 8,
-    width: "80%",
-    maxHeight: "80%",
-    minHeight: "50%",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
-    flex: 0
-  },
-  modalHeader: {
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.1)"
-  },
-  modalTitle: {
-    color: "#FFFFFF",
-    fontSize: 16,
-    fontWeight: "600",
-    marginBottom: 4
-  },
-  modalSubtitle: {
-    color: "#9CA3AF",
-    fontSize: 12
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollViewContent: {
-    padding: 8,
-    flexGrow: 1
-  },
-  emptyState: {
-    padding: 32,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  emptyTitle: {
-    color: "#E5E7EB",
-    fontSize: 16,
-    fontWeight: "500",
-    marginBottom: 8,
-    textAlign: "center"
-  },
-  emptyDescription: {
-    color: "#9CA3AF",
-    fontSize: 14,
-    textAlign: "center",
-    lineHeight: 20
-  },
-  queryItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 8,
-    borderRadius: 4
-  },
-  selectedQueryItem: {
-    backgroundColor: "rgba(255, 255, 255, 0.1)"
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginRight: 8
-  },
-  queryText: {
-    color: "#E5E7EB",
-    fontSize: 14,
-    flex: 1
-  },
-  selectedQueryText: {
-    color: "#FFFFFF",
-    fontWeight: "500"
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
-    borderRadius: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
-    minWidth: 120,
-    maxWidth: 200
-  },
-  triggerText: {
-    color: "#E5E7EB",
-    fontSize: 12,
-    flex: 1,
-    marginHorizontal: 6
-  }
-});
+"use strict";import{View as s,Text as l,StyleSheet as p,TouchableOpacity as C,Modal as x,ScrollView as S,Pressable as w}from"react-native";import{getQueryStatusColor as F}from"../utils/getQueryStatusColor";import{QueryDebugInfo as Q}from"./QueryDebugInfo";import{jsx as r,jsxs as o}from"react/jsx-runtime";export function QuerySelector({queries:i,selectedQuery:y,isOpen:d,onClose:a,onSelect:u}){const g=t=>{return Array.isArray(t.queryKey)?t.queryKey.join(" - "):String(t.queryKey)};return r(x,{accessibilityLabel:"Query selector",accessibilityHint:"View query selector","sentry-label":"ignore query selector",visible:d,transparent:true,animationType:"fade",onRequestClose:a,children:r(w,{accessibilityLabel:"Query selector overlay",accessibilityHint:"View query selector overlay","sentry-label":"ignore query selector overlay",style:e.modalOverlay,onPress:a,children:o(s,{accessibilityLabel:"Query selector content",accessibilityHint:"View query selector content","sentry-label":"ignore query selector content",style:e.modalContent,children:[o(s,{style:e.modalHeader,children:[r(l,{style:e.modalTitle,children:"Select Query"}),o(l,{style:e.modalSubtitle,children:[i.length," ",i.length===1?"query":"queries"," ","available"]})]}),r(S,{accessibilityLabel:"Query selector scroll view",accessibilityHint:"View query selector scroll view","sentry-label":"ignore query selector scroll view",style:e.scrollView,contentContainerStyle:e.scrollViewContent,showsVerticalScrollIndicator:true,children:i.length===0?o(s,{style:e.emptyState,children:[r(l,{style:e.emptyTitle,children:"No Queries Found"}),o(l,{style:e.emptyDescription,children:["No React Query queries are currently active.","\n\n","To see queries here:","\n","\u2022 Make API calls using useQuery","\n","\u2022 Ensure queries are within QueryClientProvider","\n","\u2022 Check console for debugging info"]}),r(Q,{})]}):i.map((t,b)=>{const n=g(t);const m=F({queryState:t.state,observerCount:t.getObserversCount(),isStale:t.isStale()});const h={blue:"#3B82F6",gray:"#6B7280",purple:"#8B5CF6",yellow:"#F59E0B",green:"#10B981",red:"#EF4444"};const f=h[m]||"#6B7280";const c=t===y;return o(C,{accessibilityLabel:`Query ${n}`,accessibilityHint:`View query ${n}`,"sentry-label":`ignore query ${n}`,style:[e.queryItem,c&&e.selectedQueryItem],onPress:()=>u(t),children:[r(s,{style:[e.statusDot,{backgroundColor:f}]}),r(l,{style:[e.queryText,c&&e.selectedQueryText],numberOfLines:1,children:n})]},`${t.queryHash}-${b}`)})})]})})})}const e=p.create({modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center"},modalContent:{backgroundColor:"#1F1F1F",borderRadius:8,width:"80%",maxHeight:"80%",minHeight:"50%",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.1)",flex:0},modalHeader:{padding:16,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},modalTitle:{color:"#FFFFFF",fontSize:16,fontWeight:"600",marginBottom:4},modalSubtitle:{color:"#9CA3AF",fontSize:12},scrollView:{flex:1},scrollViewContent:{padding:8,flexGrow:1},emptyState:{padding:32,alignItems:"center",justifyContent:"center"},emptyTitle:{color:"#E5E7EB",fontSize:16,fontWeight:"500",marginBottom:8,textAlign:"center"},emptyDescription:{color:"#9CA3AF",fontSize:14,textAlign:"center",lineHeight:20},queryItem:{flexDirection:"row",alignItems:"center",padding:8,borderRadius:4},selectedQueryItem:{backgroundColor:"rgba(255, 255, 255, 0.1)"},statusDot:{width:8,height:8,borderRadius:4,marginRight:8},queryText:{color:"#E5E7EB",fontSize:14,flex:1},selectedQueryText:{color:"#FFFFFF",fontWeight:"500"},trigger:{flexDirection:"row",alignItems:"center",backgroundColor:"rgba(255, 255, 255, 0.05)",borderRadius:4,paddingHorizontal:8,paddingVertical:6,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.1)",minWidth:120,maxWidth:200},triggerText:{color:"#E5E7EB",fontSize:12,flex:1,marginHorizontal:6}});

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

@@ -1,87 +1 @@
-"use strict";
-
-import { useCallback, useState, useEffect } from "react";
-import { useQueryClient } from "@tanstack/react-query";
-import { TickProvider } from "@buoy-gg/shared-ui";
-import { ReactQueryModal } from "./modals/ReactQueryModal";
-import { reactQueryEventStore } from "../stores/reactQueryEventStore";
-
-/** Configuration options for the high-level React Query dev tools modal wrapper. */
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Opinionated wrapper around `ReactQueryModal` that manages selection state and filters so
- * consumers can drop in the full dev tools experience with a single component.
- */
-export function ReactQueryDevToolsModal({
-  visible,
-  onClose,
-  onMinimize,
-  enableSharedModalDimensions = true
-}) {
-  // Get QueryClient and connect to event store for unified Events DevTools
-  const queryClient = useQueryClient();
-  useEffect(() => {
-    // Connect the QueryClient to the event store so events flow to unified Events DevTools
-    // Only connect if not already connected (to preserve connection across modal open/close)
-    if (!reactQueryEventStore.isConnected()) {
-      reactQueryEventStore.setQueryClient(queryClient);
-    }
-    // Don't disconnect on unmount - keep the connection for unified Events DevTools
-  }, [queryClient]);
-  const [selectedQueryKey, setSelectedQueryKey] = useState(undefined);
-  const [selectedMutationId, setSelectedMutationId] = useState(undefined);
-  const [activeFilter, setActiveFilter] = useState(null);
-  const [activeTab, setActiveTab] = useState("queries");
-  const [searchText, setSearchText] = useState("");
-  const resetState = useCallback(() => {
-    setSelectedQueryKey(undefined);
-    setSelectedMutationId(undefined);
-    setActiveFilter(null);
-    setActiveTab("queries");
-    setSearchText("");
-  }, []);
-  const handleClose = useCallback(() => {
-    resetState();
-    onClose();
-  }, [onClose, resetState]);
-  const handleQuerySelect = useCallback(query => {
-    setSelectedQueryKey(query?.queryKey);
-  }, []);
-  const handleMutationSelect = useCallback(mutation => {
-    setSelectedMutationId(mutation?.mutationId);
-  }, []);
-  const handleFilterChange = useCallback(filter => {
-    setActiveFilter(filter);
-  }, []);
-  const handleTabChange = useCallback(tab => {
-    setActiveTab(tab);
-    setActiveFilter(null);
-    setSelectedQueryKey(undefined);
-    setSelectedMutationId(undefined);
-    setSearchText("");
-  }, []);
-  const handleSearchChange = useCallback(text => {
-    setSearchText(text);
-  }, []);
-  if (!visible) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(TickProvider, {
-    children: /*#__PURE__*/_jsx(ReactQueryModal, {
-      visible: visible,
-      selectedQueryKey: selectedQueryKey,
-      selectedMutationId: selectedMutationId,
-      onQuerySelect: handleQuerySelect,
-      onMutationSelect: handleMutationSelect,
-      onClose: handleClose,
-      onMinimize: onMinimize,
-      activeFilter: activeFilter,
-      onFilterChange: handleFilterChange,
-      activeTab: activeTab,
-      onTabChange: handleTabChange,
-      searchText: searchText,
-      onSearchChange: handleSearchChange,
-      enableSharedModalDimensions: enableSharedModalDimensions
-    })
-  });
-}
+"use strict";import{useCallback as t,useState as n,useEffect as q}from"react";import{useQueryClient as I}from"@tanstack/react-query";import{TickProvider as K}from"@buoy-gg/shared-ui";import{ReactQueryModal as j}from"./modals/ReactQueryModal";import{reactQueryEventStore as h}from"../stores/reactQueryEventStore";import{jsx as f}from"react/jsx-runtime";export function ReactQueryDevToolsModal({visible:c,onClose:s,onMinimize:y,enableSharedModalDimensions:m=true}){const l=I();q(()=>{if(!h.isConnected()){h.setQueryClient(l)}},[l]);const[S,r]=n(void 0);const[C,o]=n(void 0);const[Q,i]=n(null);const[T,u]=n("queries");const[v,a]=n("");const d=t(()=>{r(void 0);o(void 0);i(null);u("queries");a("")},[]);const M=t(()=>{d();s()},[s,d]);const b=t(e=>{r(e?.queryKey)},[]);const p=t(e=>{o(e?.mutationId)},[]);const g=t(e=>{i(e)},[]);const x=t(e=>{u(e);i(null);r(void 0);o(void 0);a("")},[]);const F=t(e=>{a(e)},[]);if(!c){return null}return f(K,{children:f(j,{visible:c,selectedQueryKey:S,selectedMutationId:C,onQuerySelect:b,onMutationSelect:p,onClose:M,onMinimize:y,activeFilter:Q,onFilterChange:g,activeTab:T,onTabChange:x,searchText:v,onSearchChange:F,enableSharedModalDimensions:m})})}

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

@@ -1,43 +1 @@
-"use strict";
-
-import { View } from "react-native";
-import { CyberpunkSectionButton, buoyColors } from "@buoy-gg/shared-ui";
-import { TanstackLogo } from "./query-browser/svgs";
-import { jsx as _jsx } from "react/jsx-runtime";
-// Component definition moved outside render to prevent recreation on every render
-const TanstackIcon = () => /*#__PURE__*/_jsx(View, {
-  style: {
-    width: 24,
-    height: 24
-  },
-  children: /*#__PURE__*/_jsx(TanstackLogo, {})
-});
-
-/**
- * React Query section component following composition principles.
- * Encapsulates React Query specific business logic and UI.
- */
-export function ReactQuerySection({
-  onPress,
-  getReactBuoySubtitle
-}) {
-  // Format subtitle to be shorter: "45 queries • 10 mutations" → "45Q • 10M"
-  const formatSubtitle = () => {
-    const full = getReactBuoySubtitle();
-    const match = full.match(/(\d+) queries • (\d+) mutations/);
-    if (match) {
-      return `${match[1]}Q • ${match[2]}M`;
-    }
-    return "No data";
-  };
-  return /*#__PURE__*/_jsx(CyberpunkSectionButton, {
-    id: "react-buoy-dev-tools",
-    title: "QUERY",
-    subtitle: formatSubtitle(),
-    icon: TanstackIcon,
-    iconColor: buoyColors.error,
-    iconBackgroundColor: buoyColors.error + "1A",
-    onPress: onPress,
-    index: 1
-  });
-}
+"use strict";import{View as s}from"react-native";import{CyberpunkSectionButton as u,buoyColors as r}from"@buoy-gg/shared-ui";import{TanstackLogo as a}from"./query-browser/svgs";import{jsx as t}from"react/jsx-runtime";const m=()=>t(s,{style:{width:24,height:24},children:t(a,{})});export function ReactQuerySection({onPress:e,getReactBuoySubtitle:n}){const i=()=>{const c=n();const o=c.match(/(\d+) queries • (\d+) mutations/);if(o){return`${o[1]}Q \u2022 ${o[2]}M`}return"No data"};return t(u,{id:"react-buoy-dev-tools",title:"QUERY",subtitle:i(),icon:m,iconColor:r.error,iconBackgroundColor:r.error+"1A",onPress:e,index:1})}

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

@@ -1,35 +1 @@
-"use strict";
-
-import { useContext, useEffect } from "react";
-import { QueryClientContext } from "@tanstack/react-query";
-import { reactQueryEventStore } from "../stores/reactQueryEventStore";
-
-/**
- * Connects the React Query event store to the app's QueryClient at startup.
- *
- * Auto-rendered by `FloatingDevTools` (the same treatment `RouteTracker` gets),
- * so nobody has to mount it by hand.
- *
- * Why it has to exist: until this, `setQueryClient` was called from exactly one
- * place — `ReactQueryDevToolsModal`'s mount effect — which meant the store had
- * no client unless somebody opened the React Query TOOL. Anything else that
- * consumes these events was therefore silently empty, and the Events timeline
- * showed a React Query badge with a confident `0` on it: not "nothing to
- * report" but "nobody was listening", and no way to tell the two apart.
- *
- * `useContext(QueryClientContext)`, NOT `useQueryClient()`: the hook throws
- * when there is no provider above it, and this component is mounted whether or
- * not the host app uses React Query at all. An app without a provider just
- * reads `undefined` here and nothing connects, which is the old behaviour.
- */
-export function ReactQueryTracker() {
-  const queryClient = useContext(QueryClientContext);
-  useEffect(() => {
-    if (!queryClient) return;
-    // The tool connects the same client when it opens; leave that alone rather
-    // than tearing down its cache subscriptions and rebuilding them.
-    if (reactQueryEventStore.isConnected()) return;
-    reactQueryEventStore.setQueryClient(queryClient);
-  }, [queryClient]);
-  return null;
-}
+"use strict";import{useContext as r,useEffect as n}from"react";import{QueryClientContext as o}from"@tanstack/react-query";import{reactQueryEventStore as t}from"../stores/reactQueryEventStore";export function ReactQueryTracker(){const e=r(o);n(()=>{if(!e)return;if(t.isConnected())return;t.setQueryClient(e)},[e]);return null}

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

@@ -1,48 +1 @@
-"use strict";
-
-import { TouchableOpacity } from "react-native";
-import { Wifi } from "@buoy-gg/shared-ui";
-import { useWifiState } from "../hooks/useWifiState";
-
-/**
- * Small icon button that toggles React Query’s online manager, allowing developers to simulate
- * offline scenarios directly from the modal header.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export function WifiToggle({
-  size = 16,
-  testID
-}) {
-  const {
-    isOnline,
-    handleWifiToggle
-  } = useWifiState();
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": `ignore toggle WiFi ${isOnline ? "On" : "Off"}`,
-    testID: testID,
-    accessibilityRole: "button",
-    accessibilityLabel: `WiFi ${isOnline ? "On" : "Off"}`,
-    accessibilityHint: `Tap to turn WiFi ${isOnline ? "off" : "on"} for React Query`,
-    onPress: handleWifiToggle,
-    hitSlop: {
-      top: 10,
-      bottom: 10,
-      left: 10,
-      right: 10
-    },
-    activeOpacity: 0.7,
-    style: {
-      alignItems: "center",
-      justifyContent: "center",
-      width: 14,
-      flexShrink: 0
-    },
-    children: isOnline ? /*#__PURE__*/_jsx(Wifi, {
-      size: size,
-      color: "#10B981"
-    }) : /*#__PURE__*/_jsx(Wifi, {
-      size: size,
-      color: "#DC2626"
-    })
-  });
-}
+"use strict";import{TouchableOpacity as s}from"react-native";import{Wifi as o}from"@buoy-gg/shared-ui";import{useWifiState as l}from"../hooks/useWifiState";import{jsx as t}from"react/jsx-runtime";export function WifiToggle({size:e=16,testID:r}){const{isOnline:i,handleWifiToggle:n}=l();return t(s,{"sentry-label":`ignore toggle WiFi ${i?"On":"Off"}`,testID:r,accessibilityRole:"button",accessibilityLabel:`WiFi ${i?"On":"Off"}`,accessibilityHint:`Tap to turn WiFi ${i?"off":"on"} for React Query`,onPress:n,hitSlop:{top:10,bottom:10,left:10,right:10},activeOpacity:.7,style:{alignItems:"center",justifyContent:"center",width:14,flexShrink:0},children:i?t(o,{size:e,color:"#10B981"}):t(o,{size:e,color:"#DC2626"})})}