@buoy-gg/zustand 7.0.30 → 7.0.32

package/lib/module/zustand/components/ZustandStateInfoView.js

@@ -18,6 +18,7 @@ import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { ZustandActionButton } from "./ZustandActionButton";
 import { zustandStateStore } from "../utils/zustandStateStore";
+import { ZUSTAND_TEST_ID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getCategoryInfo(category) {
   switch (category) {
@@ -55,10 +56,12 @@ function formatDuration(duration) {
 function SectionHeader({
   icon: Icon,
   title,
-  badge
+  badge,
+  testID
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.sectionHeader,
+    testID: testID,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.sectionHeaderLeft,
       children: [/*#__PURE__*/_jsx(Icon, {
@@ -75,7 +78,8 @@ function InfoRow({
   label,
   value,
   valueColor,
-  mono = false
+  mono = false,
+  testID
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.infoRow,
@@ -83,6 +87,7 @@ function InfoRow({
       style: styles.infoLabel,
       children: label
     }), /*#__PURE__*/_jsx(Text, {
+      testID: testID,
       style: [styles.infoValue, mono && styles.infoValueMono, valueColor ? {
         color: valueColor
       } : undefined],
@@ -138,8 +143,10 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
     style: styles.container,
     contentContainerStyle: styles.contentContainer,
     showsVerticalScrollIndicator: false,
+    testID: `${ZUSTAND_TEST_ID}-detail-scroll`,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${ZUSTAND_TEST_ID}-info-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Info,
         title: "CHANGE INFO"
@@ -149,11 +156,13 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
           label: "Store",
           value: change.storeName,
           mono: true,
-          valueColor: storeColor
+          valueColor: storeColor,
+          testID: `${ZUSTAND_TEST_ID}-info-store`
         }), /*#__PURE__*/_jsx(InfoRow, {
           label: "Time",
           value: formatTime(change.timestamp),
-          mono: true
+          mono: true,
+          testID: `${ZUSTAND_TEST_ID}-info-time`
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.badgeRow,
           children: [/*#__PURE__*/_jsx(View, {
@@ -164,6 +173,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
               style: [styles.categoryText, {
                 color: categoryInfo.color
               }],
+              testID: `${ZUSTAND_TEST_ID}-info-category`,
               children: categoryInfo.label
             })
           }), /*#__PURE__*/_jsxs(View, {
@@ -173,6 +183,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
               color: change.isSlowUpdate ? buoyColors.error : night.color.textSecondary
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.durationText, change.isSlowUpdate && styles.durationTextSlow],
+              testID: `${ZUSTAND_TEST_ID}-info-duration`,
               children: formatDuration(change.duration)
             }), change.isSlowUpdate && /*#__PURE__*/_jsx(AlertTriangle, {
               size: 10,
@@ -185,12 +196,14 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
               color: buoyColors.success
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.changesText,
+              testID: `${ZUSTAND_TEST_ID}-info-changes`,
               children: change.diffSummary || "changed"
             })]
           }) : /*#__PURE__*/_jsx(View, {
             style: styles.noChangesBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.noChangesText,
+              testID: `${ZUSTAND_TEST_ID}-info-no-changes`,
               children: "no change"
             })
           }), change.isPersisted && /*#__PURE__*/_jsxs(View, {
@@ -200,6 +213,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
               color: buoyColors.info
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.persistText,
+              testID: `${ZUSTAND_TEST_ID}-info-persisted`,
               children: "PERSISTED"
             })]
           })]
@@ -207,6 +221,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
       })]
     }), hasChangedKeys && /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${ZUSTAND_TEST_ID}-keys-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Zap,
         title: "CHANGED KEYS",
@@ -214,6 +229,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
           style: styles.countBadge,
           children: /*#__PURE__*/_jsx(Text, {
             style: styles.countText,
+            testID: `${ZUSTAND_TEST_ID}-keys-count`,
             children: change.changedKeys.length
           })
         })
@@ -225,6 +241,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
             style: styles.keyBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.keyText,
+              testID: `${ZUSTAND_TEST_ID}-key-${key}`,
               children: key
             })
           }, key))
@@ -232,6 +249,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
       })]
     }), hasPartial && /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${ZUSTAND_TEST_ID}-partial-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Box,
         title: "PARTIAL (setState argument)",
@@ -239,6 +257,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
           style: styles.typeBadge,
           children: /*#__PURE__*/_jsx(Text, {
             style: styles.typeText,
+            testID: `${ZUSTAND_TEST_ID}-partial-type`,
             children: Array.isArray(change.partial) ? "ARRAY" : typeof change.partial === "object" ? "OBJECT" : String(typeof change.partial).toUpperCase()
           })
         })
@@ -254,6 +273,7 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
       })]
     }), change.partial === "(updater fn)" && /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${ZUSTAND_TEST_ID}-updater-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Box,
         title: "SET STATE CALL"
@@ -272,15 +292,18 @@ export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoV
       children: [/*#__PURE__*/_jsx(ZustandActionButton, {
         type: "jump",
         text: "JUMP",
-        onPress: handleJumpToState
+        onPress: handleJumpToState,
+        testID: `${ZUSTAND_TEST_ID}-jump`
       }), /*#__PURE__*/_jsx(ZustandActionButton, {
         type: "reset",
         text: "RESET STORE",
-        onPress: handleResetStore
+        onPress: handleResetStore,
+        testID: `${ZUSTAND_TEST_ID}-reset`
       }), /*#__PURE__*/_jsx(ZustandActionButton, {
         type: "copy",
         text: "COPY STATE",
-        onPress: handleCopyState
+        onPress: handleCopyState,
+        testID: `${ZUSTAND_TEST_ID}-copy-state`
       })]
     }), /*#__PURE__*/_jsx(ProUpgradeModal, {
       visible: showProModal,

package/lib/module/zustand/components/ZustandStoreBrowser.js

@@ -3,18 +3,17 @@
 /**
  * ZustandStoreBrowser
  *
- * Browse tab — shows all registered Zustand stores and their current state.
- * Mirrors the Storage Browser pattern from @buoy-gg/storage.
- *
- * Each store is shown as an expandable row with its current state viewable
- * via the shared DataViewer component.
+ * Browse tab — lists all registered Zustand stores. Tapping a card opens the
+ * store's detail screen (ZustandStoreDetailContent): live state editor on
+ * top, store details and the read-only tree below — the React Query
+ * interaction, replacing the old expand-in-place card.
  */
 
-import { useState, useMemo, useCallback } from "react";
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator } from "react-native";
-import { CompactRow, buoyColors, night, Database, parseValue, Box, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { useMemo } from "react";
+import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from "react-native";
+import { CompactRow, night, Box } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
+import { ZUSTAND_TEST_ID, storeRowTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Get a preview of the store's top-level keys
@@ -40,80 +39,10 @@ function getKeysPreview(store) {
     return "";
   }
 }
-function StoreExpandedContent({
-  store,
-  onViewHistory
-}) {
-  const state = store.api.getState();
-  const displayState = useMemo(() => {
-    if (state && typeof state === "object") {
-      const filtered = {};
-      for (const [key, value] of Object.entries(state)) {
-        if (typeof value !== "function") {
-          filtered[key] = value;
-        }
-      }
-      return parseValue(filtered);
-    }
-    return parseValue(state);
-  }, [state]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: expandedStyles.container,
-    children: [/*#__PURE__*/_jsx(ExpandedInfoRow, {
-      label: "Type",
-      children: /*#__PURE__*/_jsx(PillBadge, {
-        color: store.color,
-        children: "ZUSTAND"
-      })
-    }), store.stateChangeCount > 0 && /*#__PURE__*/_jsxs(ExpandedInfoRow, {
-      label: "Changes",
-      children: [/*#__PURE__*/_jsx(PillBadge, {
-        color: buoyColors.warning,
-        children: String(store.stateChangeCount)
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => onViewHistory(store.name),
-        style: expandedStyles.viewHistoryButton,
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [expandedStyles.viewHistoryText, {
-            color: store.color
-          }],
-          children: "view history \u2192"
-        })
-      })]
-    }), store.isPersisted && /*#__PURE__*/_jsx(ExpandedInfoRow, {
-      label: "Persist",
-      children: /*#__PURE__*/_jsx(PillBadge, {
-        color: buoyColors.info,
-        icon: /*#__PURE__*/_jsx(Database, {
-          size: 9,
-          color: buoyColors.info
-        }),
-        children: store.persistName || "persisted"
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: expandedStyles.dataContainer,
-      children: displayState && typeof displayState === "object" ? /*#__PURE__*/_jsx(DataViewer, {
-        title: "",
-        data: displayState,
-        showTypeFilter: true,
-        rawMode: true,
-        initialExpanded: true
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: expandedStyles.emptyText,
-        children: "Empty state"
-      })
-    })]
-  });
-}
 function LoadingBrowserState() {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.emptyState,
+    testID: `${ZUSTAND_TEST_ID}-stores-loading`,
     children: [/*#__PURE__*/_jsx(ActivityIndicator, {
       size: "small",
       color: night.color.textTertiary
@@ -129,11 +58,13 @@ function LoadingBrowserState() {
 function EmptyBrowserState() {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.emptyState,
+    testID: `${ZUSTAND_TEST_ID}-stores-empty`,
     children: [/*#__PURE__*/_jsx(Box, {
       size: 32,
       color: night.color.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyTitle,
+      testID: `${ZUSTAND_TEST_ID}-stores-empty-title`,
       children: "No stores registered"
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyText,
@@ -144,33 +75,25 @@ function EmptyBrowserState() {
 export function ZustandStoreBrowser({
   stores,
   searchQuery,
-  onViewHistory,
   isLoading = false,
-  onStoreExpand
+  onOpenStore
 }) {
-  const [expandedStore, setExpandedStore] = useState(null);
-
   // Filter stores by search query
   const filteredStores = useMemo(() => {
     if (!searchQuery) return stores;
     const search = searchQuery.toLowerCase();
     return stores.filter(s => s.name.toLowerCase().includes(search) || s.persistName && s.persistName.toLowerCase().includes(search));
   }, [stores, searchQuery]);
-  const handleStorePress = useCallback(store => {
-    setExpandedStore(prev => {
-      const next = prev === store.name ? null : store.name;
-      if (next) onStoreExpand?.(store.name);
-      return next;
-    });
-  }, [onStoreExpand]);
   if (filteredStores.length === 0 && !searchQuery) {
     return isLoading ? /*#__PURE__*/_jsx(LoadingBrowserState, {}) : /*#__PURE__*/_jsx(EmptyBrowserState, {});
   }
   if (filteredStores.length === 0 && searchQuery) {
     return /*#__PURE__*/_jsxs(View, {
       style: styles.emptyState,
+      testID: `${ZUSTAND_TEST_ID}-stores-no-match`,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
+        testID: `${ZUSTAND_TEST_ID}-stores-no-match-title`,
         children: "No matching stores"
       }), /*#__PURE__*/_jsxs(Text, {
         style: styles.emptyText,
@@ -182,6 +105,7 @@ export function ZustandStoreBrowser({
     style: styles.container,
     contentContainerStyle: styles.scrollContent,
     showsVerticalScrollIndicator: true,
+    testID: `${ZUSTAND_TEST_ID}-stores-scroll`,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.sectionHeader,
       children: [/*#__PURE__*/_jsx(Text, {
@@ -191,27 +115,27 @@ export function ZustandStoreBrowser({
         style: styles.sectionCountBadge,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.sectionCountText,
+          testID: `${ZUSTAND_TEST_ID}-stores-count`,
           children: filteredStores.length
         })
       })]
     }), filteredStores.map(store => {
-      const isExpanded = expandedStore === store.name;
       const keysPreview = getKeysPreview(store);
       const storeColor = zustandStateStore.getStoreColor(store.name);
+      const rowID = storeRowTestID(store.name);
       return /*#__PURE__*/_jsxs(View, {
         style: styles.storeRowWrapper,
         children: [/*#__PURE__*/_jsx(CompactRow, {
           statusDotColor: storeColor,
-          statusLabel: store.name,
-          statusSublabel: store.isPersisted ? "persisted" : "in-memory",
-          primaryText: keysPreview,
+          statusLabel: store.isPersisted ? "persisted" : "in-memory",
+          primaryText: store.name,
+          secondaryText: keysPreview || undefined,
           showChevron: true,
-          isExpanded: isExpanded,
-          onPress: () => handleStorePress(store),
-          expandedContent: isExpanded ? /*#__PURE__*/_jsx(StoreExpandedContent, {
-            store: store,
-            onViewHistory: onViewHistory
-          }) : undefined
+          onPress: () => onOpenStore(store.name),
+          testID: rowID,
+          statusTestID: `${rowID}-backing`,
+          primaryTestID: `${rowID}-name`,
+          secondaryTestID: `${rowID}-keys`
         }), store.stateChangeCount > 0 && /*#__PURE__*/_jsx(View, {
           style: [styles.absCountBadge, {
             backgroundColor: storeColor + "22",
@@ -222,6 +146,7 @@ export function ZustandStoreBrowser({
             style: [styles.absCountText, {
               color: storeColor
             }],
+            testID: `${rowID}-count`,
             children: String(store.stateChangeCount)
           })
         })]
@@ -297,32 +222,4 @@ const styles = StyleSheet.create({
     textAlign: "center",
     lineHeight: 18
   }
-});
-const expandedStyles = StyleSheet.create({
-  container: {
-    gap: 10
-  },
-  viewHistoryButton: {
-    marginLeft: 4
-  },
-  viewHistoryText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  dataContainer: {
-    // Inset display panel — darker than the card, the night track color.
-    backgroundColor: night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden",
-    minHeight: 60
-  },
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    padding: 14,
-    fontStyle: "italic"
-  }
 });