@buoy-gg/zustand 7.0.38 → 7.0.40

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

@@ -1 +1,204 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStoreBrowser=ZustandStoreBrowser;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_zustandStateStore=require("../utils/zustandStateStore"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");function getKeysPreview(e){try{const t=e.api.getState();if(t&&"object"==typeof t&&!0===t.__buoyStateOnDevice)return"on device";if(t&&"object"==typeof t){const e=Object.keys(t).filter(e=>"function"!=typeof t[e]);return 0===e.length?"no data keys":e.length<=3?e.join(", "):`${e.slice(0,2).join(", ")} +${e.length-2}`}return""}catch{return""}}function LoadingBrowserState(){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-loading`,otto:"loading",title:"Loading stores…",message:"Waiting for the device to send its registered stores."})}function EmptyBrowserState(){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-empty`,otto:"scanning",title:"No stores registered",message:"Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."})}function ZustandStoreBrowser({stores:e,searchQuery:t,isLoading:s=!1,onOpenStore:r}){const o=(0,_react.useMemo)(()=>{if(!t)return e;const s=t.toLowerCase();return e.filter(e=>e.name.toLowerCase().includes(s)||e.persistName&&e.persistName.toLowerCase().includes(s))},[e,t]);return 0!==o.length||t?0===o.length&&t?(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-no-match`,...(0,_sharedUi.resolveListEmptyState)({subject:"stores",verb:"registered",search:t,total:e.length,waiting:{otto:"scanning",title:"No stores registered",message:"Use watchStores() to register your Zustand stores."}})}):(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-scroll`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionTitle,children:"STORES"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionCountBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionCountText,testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-count`,children:o.length})})]}),o.map(e=>{const t=getKeysPreview(e),s=_zustandStateStore.zustandStateStore.getStoreColor(e.name),o=(0,_testIDs.storeRowTestID)(e.name);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.storeRowWrapper,children:[(0,_jsxRuntime.jsx)(_sharedUi.CompactRow,{statusDotColor:s,statusLabel:e.isPersisted?"persisted":"in-memory",primaryText:e.name,secondaryText:t||void 0,showChevron:!0,onPress:()=>r(e.name),testID:o,statusTestID:`${o}-backing`,primaryTestID:`${o}-name`,secondaryTestID:`${o}-keys`}),e.stateChangeCount>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.absCountBadge,{backgroundColor:s+"22",borderColor:s+"55"}],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.absCountText,{color:s}],testID:`${o}-count`,children:String(e.stateChangeCount)})})]},e.name)})]}):s?(0,_jsxRuntime.jsx)(LoadingBrowserState,{}):(0,_jsxRuntime.jsx)(EmptyBrowserState,{})}const styles=_reactNative.StyleSheet.create({container:{flex:1},storeRowWrapper:{position:"relative"},absCountBadge:{position:"absolute",top:4,right:10,paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1,zIndex:1},absCountText:{fontSize:9,fontWeight:"700",fontFamily:_sharedUi.monoFont},scrollContent:{paddingTop:8,paddingBottom:20},sectionHeader:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,gap:8},sectionTitle:{fontSize:11,fontWeight:"700",letterSpacing:.5,color:_sharedUi.night.color.textTertiary},sectionCountBadge:{backgroundColor:_sharedUi.night.color.accentFill,paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandStoreBrowser = ZustandStoreBrowser;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _zustandStateStore = require("../utils/zustandStateStore");
+var _testIDs = require("../utils/testIDs");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ZustandStoreBrowser
+ *
+ * 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.
+ */
+
+/**
+ * Get a preview of the store's top-level keys
+ */
+function getKeysPreview(store) {
+  try {
+    const state = store.api.getState();
+    if (state && typeof state === "object" && state.__buoyStateOnDevice === true) {
+      return "on device";
+    }
+    if (state && typeof state === "object") {
+      const keys = Object.keys(state);
+      const dataKeys = keys.filter(k => {
+        const val = state[k];
+        return typeof val !== "function";
+      });
+      if (dataKeys.length === 0) return "no data keys";
+      if (dataKeys.length <= 3) return dataKeys.join(", ");
+      return `${dataKeys.slice(0, 2).join(", ")} +${dataKeys.length - 2}`;
+    }
+    return "";
+  } catch {
+    return "";
+  }
+}
+function LoadingBrowserState() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-loading`
+    // Replaces the spinner rather than joining it: two animated things
+    // stacked is clutter, and `loading` IS the indeterminate spinner in
+    // mascot form.
+    ,
+    otto: "loading",
+    title: "Loading stores\u2026",
+    message: "Waiting for the device to send its registered stores."
+  });
+}
+function EmptyBrowserState() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-empty`
+    // scanning = "scanning for targets… and finding none". The registry is
+    // discovered, not configured, so an empty one is a scan result.
+    ,
+    otto: "scanning",
+    title: "No stores registered",
+    message: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
+  });
+}
+function ZustandStoreBrowser({
+  stores,
+  searchQuery,
+  isLoading = false,
+  onOpenStore
+}) {
+  // Filter stores by search query
+  const filteredStores = (0, _react.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]);
+  if (filteredStores.length === 0 && !searchQuery) {
+    return isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingBrowserState, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
+  }
+  if (filteredStores.length === 0 && searchQuery) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-no-match`,
+      ...(0, _sharedUi.resolveListEmptyState)({
+        subject: "stores",
+        verb: "registered",
+        search: searchQuery,
+        total: stores.length,
+        waiting: {
+          otto: "scanning",
+          title: "No stores registered",
+          message: "Use watchStores() to register your Zustand stores."
+        }
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: true,
+    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-scroll`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.sectionHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: "STORES"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sectionCountBadge,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.sectionCountText,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-count`,
+          children: filteredStores.length
+        })
+      })]
+    }), filteredStores.map(store => {
+      const keysPreview = getKeysPreview(store);
+      const storeColor = _zustandStateStore.zustandStateStore.getStoreColor(store.name);
+      const rowID = (0, _testIDs.storeRowTestID)(store.name);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.storeRowWrapper,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
+          statusDotColor: storeColor,
+          statusLabel: store.isPersisted ? "persisted" : "in-memory",
+          primaryText: store.name,
+          secondaryText: keysPreview || undefined,
+          showChevron: true,
+          onPress: () => onOpenStore(store.name),
+          testID: rowID,
+          statusTestID: `${rowID}-backing`,
+          primaryTestID: `${rowID}-name`,
+          secondaryTestID: `${rowID}-keys`
+        }), store.stateChangeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.absCountBadge, {
+            backgroundColor: storeColor + "22",
+            borderColor: storeColor + "55"
+          }],
+          pointerEvents: "none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.absCountText, {
+              color: storeColor
+            }],
+            testID: `${rowID}-count`,
+            children: String(store.stateChangeCount)
+          })
+        })]
+      }, store.name);
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  storeRowWrapper: {
+    position: "relative"
+  },
+  absCountBadge: {
+    position: "absolute",
+    top: 4,
+    right: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 4,
+    borderWidth: 1,
+    zIndex: 1
+  },
+  absCountText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: _sharedUi.monoFont
+  },
+  scrollContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    gap: 8
+  },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: _sharedUi.night.color.textTertiary
+  },
+  sectionCountBadge: {
+    backgroundColor: _sharedUi.night.color.accentFill,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  sectionCountText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.night.color.accent,
+    fontFamily: _sharedUi.monoFont
+  }
+});