@buoy-gg/zustand 2.1.9 → 2.1.11

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

@@ -1 +1,291 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandEventFilterView=ZustandEventFilterView;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_zustandStateStore=require("../utils/zustandStateStore"),_jsxRuntime=require("react/jsx-runtime");function getStoreColorForPattern(e,t){const o=t.find(t=>t.name.toLowerCase()===e.toLowerCase());return o?_zustandStateStore.zustandStateStore.getStoreColor(o.name):null}function isStoreFiltered(e,t){return Array.from(t).some(t=>e.name.toLowerCase().includes(t.toLowerCase()))}function ZustandEventFilterView({ignoredPatterns:e,onTogglePattern:t,onAddPattern:o,stores:r}){const[s,i]=(0,_react.useState)(!1),[a,n]=(0,_react.useState)("");return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!1,children:[r.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"REGISTERED STORES"}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:r.length,color:_sharedUi.buoyColors.primary})]}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:styles.storeList,contentContainerStyle:styles.storeListContent,showsVerticalScrollIndicator:!0,nestedScrollEnabled:!0,children:r.map(t=>{const r=_zustandStateStore.zustandStateStore.getStoreColor(t.name),s=isStoreFiltered(t,e);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.storeRow,s&&styles.storeRowFiltered],onPress:()=>o(t.name),disabled:s,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.storeDot,{backgroundColor:s?_sharedUi.macOSColors.text.disabled:r}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.storeRowText,s&&styles.storeRowTextFiltered,!s&&{color:r}],numberOfLines:1,children:t.name}),s?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.filteredLabel,children:"hidden"}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addLabel,{color:r+"99"}],children:"+ hide"})]},t.name)})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Filter,color:_sharedUi.buoyColors.primary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"STORE NAME FILTERS"}),e.size>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:e.size,color:_sharedUi.buoyColors.primary})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addInputWrapper,children:s?(0,_jsxRuntime.jsx)(_sharedUi.AddFilterInput,{value:a,onChange:n,onSubmit:()=>{const e=a.trim();e&&(o(e),n(""),i(!1))},onCancel:()=>{i(!1),n("")},placeholder:"Enter store name pattern to hide...",color:_sharedUi.buoyColors.primary}):(0,_jsxRuntime.jsx)(_sharedUi.AddFilterButton,{onPress:()=>i(!0),color:_sharedUi.buoyColors.primary,label:"Add store name pattern"})}),e.size>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternList,children:Array.from(e).map(e=>{const o=getStoreColorForPattern(e,r);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.patternRow,onPress:()=>t(e),activeOpacity:.8,children:[o?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.storeDot,{backgroundColor:o}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.patternText,o?{color:o}:null],numberOfLines:1,children:e}),(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.buoyColors.primary+"80"})]},e)})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Filter,color:_sharedUi.buoyColors.textSecondary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"HOW EVENT FILTERS WORK"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksText,children:"Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter."}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.examplesContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.examplesTitle,children:"EXAMPLES:"}),["• auth → hides authStore from stores & events","• temp → hides tempStore, tempUserStore","• cart → hides cartStore from both tabs"].map(e=>(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.exampleItem,children:e},e))]})]})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},scrollContent:{paddingTop:16,paddingHorizontal:16,paddingBottom:24,gap:16},section:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:16,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden"},storeList:{maxHeight:180},storeListContent:{paddingHorizontal:16,paddingTop:8,paddingBottom:16,gap:10},storeRow:{flexDirection:"row",alignItems:"center",gap:10,paddingVertical:10,paddingHorizontal:12,backgroundColor:_sharedUi.buoyColors.hover,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border},storeRowFiltered:{opacity:.45},storeDot:{width:7,height:7,borderRadius:3.5},storeRowText:{flex:1,fontSize:12,fontWeight:"600",fontFamily:"monospace"},storeRowTextFiltered:{color:_sharedUi.macOSColors.text.muted,textDecorationLine:"line-through"},filteredLabel:{fontSize:10,fontWeight:"500",color:_sharedUi.macOSColors.text.disabled,fontFamily:"monospace"},addLabel:{fontSize:10,fontWeight:"600",fontFamily:"monospace"},addInputWrapper:{paddingHorizontal:16,paddingTop:8,paddingBottom:8},patternList:{paddingHorizontal:16,paddingBottom:16,gap:8},patternRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:10,paddingHorizontal:12,backgroundColor:_sharedUi.buoyColors.hover,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,gap:8},patternText:{flex:1,fontSize:12,fontFamily:"monospace",color:_sharedUi.buoyColors.text},howItWorksText:{fontSize:11,color:_sharedUi.buoyColors.textSecondary,lineHeight:16,marginTop:8,paddingHorizontal:16,fontFamily:"monospace"},examplesContainer:{paddingTop:8,paddingHorizontal:16,paddingBottom:16,borderTopWidth:1,borderTopColor:_sharedUi.buoyColors.border,marginTop:12},examplesTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace",letterSpacing:.5,marginBottom:6},exampleItem:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace",lineHeight:16}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandEventFilterView = ZustandEventFilterView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _zustandStateStore = require("../utils/zustandStateStore");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Returns the store color for a given pattern if it exactly matches a registered store name */
+function getStoreColorForPattern(pattern, stores) {
+  const match = stores.find(s => s.name.toLowerCase() === pattern.toLowerCase());
+  return match ? _zustandStateStore.zustandStateStore.getStoreColor(match.name) : null;
+}
+
+/** True if any active pattern filters out this store */
+function isStoreFiltered(store, ignoredPatterns) {
+  return Array.from(ignoredPatterns).some(p => store.name.toLowerCase().includes(p.toLowerCase()));
+}
+function ZustandEventFilterView({
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  stores
+}) {
+  const [showAddInput, setShowAddInput] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const handleAddPattern = () => {
+    const trimmed = inputValue.trim();
+    if (trimmed) {
+      onAddPattern(trimmed);
+      setInputValue("");
+      setShowAddInput(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    children: [stores.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+          children: "REGISTERED STORES"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+          count: stores.length,
+          color: _sharedUi.buoyColors.primary
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.storeList,
+        contentContainerStyle: styles.storeListContent,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        children: stores.map(store => {
+          const storeColor = _zustandStateStore.zustandStateStore.getStoreColor(store.name);
+          const filtered = isStoreFiltered(store, ignoredPatterns);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.storeRow, filtered && styles.storeRowFiltered],
+            onPress: () => onAddPattern(store.name),
+            disabled: filtered,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.storeDot, {
+                backgroundColor: filtered ? _sharedUi.macOSColors.text.disabled : storeColor
+              }]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.storeRowText, filtered && styles.storeRowTextFiltered, !filtered && {
+                color: storeColor
+              }],
+              numberOfLines: 1,
+              children: store.name
+            }), filtered ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.filteredLabel,
+              children: "hidden"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.addLabel, {
+                color: storeColor + "99"
+              }],
+              children: "+ hide"
+            })]
+          }, store.name);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+          icon: _sharedUi.Filter,
+          color: _sharedUi.buoyColors.primary,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+          children: "STORE NAME FILTERS"
+        }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
+          count: ignoredPatterns.size,
+          color: _sharedUi.buoyColors.primary
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.addInputWrapper,
+        children: !showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AddFilterButton, {
+          onPress: () => setShowAddInput(true),
+          color: _sharedUi.buoyColors.primary,
+          label: "Add store name pattern"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AddFilterInput, {
+          value: inputValue,
+          onChange: setInputValue,
+          onSubmit: handleAddPattern,
+          onCancel: () => {
+            setShowAddInput(false);
+            setInputValue("");
+          },
+          placeholder: "Enter store name pattern to hide...",
+          color: _sharedUi.buoyColors.primary
+        })
+      }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.patternList,
+        children: Array.from(ignoredPatterns).map(pattern => {
+          const storeColor = getStoreColorForPattern(pattern, stores);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.patternRow,
+            onPress: () => onTogglePattern(pattern),
+            activeOpacity: 0.8,
+            children: [storeColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.storeDot, {
+                backgroundColor: storeColor
+              }]
+            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.patternText, storeColor ? {
+                color: storeColor
+              } : null],
+              numberOfLines: 1,
+              children: pattern
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+              size: 12,
+              color: _sharedUi.buoyColors.primary + "80"
+            })]
+          }, pattern);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+          icon: _sharedUi.Filter,
+          color: _sharedUi.buoyColors.textSecondary,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+          children: "HOW EVENT FILTERS WORK"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.howItWorksText,
+        children: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.examplesContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.examplesTitle,
+          children: "EXAMPLES:"
+        }), ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"].map(ex => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.exampleItem,
+          children: ex
+        }, ex))]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  scrollContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 16
+  },
+  section: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    overflow: "hidden"
+  },
+  storeList: {
+    maxHeight: 180
+  },
+  storeListContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 10
+  },
+  storeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  storeRowFiltered: {
+    opacity: 0.45
+  },
+  storeDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5
+  },
+  storeRowText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  storeRowTextFiltered: {
+    color: _sharedUi.macOSColors.text.muted,
+    textDecorationLine: "line-through"
+  },
+  filteredLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: _sharedUi.macOSColors.text.disabled,
+    fontFamily: "monospace"
+  },
+  addLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  addInputWrapper: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  patternList: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8
+  },
+  patternRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: _sharedUi.buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    gap: 8
+  },
+  patternText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.text
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    lineHeight: 16,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: "monospace"
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border,
+    marginTop: 12
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace",
+    lineHeight: 16
+  }
+});

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

@@ -1 +1,35 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZUSTAND_ICON_COLOR=void 0,exports.ZustandIcon=ZustandIcon;var _reactNative=require("react-native"),_jsxRuntime=require("react/jsx-runtime");const ZUSTAND_ICON_COLOR=exports.ZUSTAND_ICON_COLOR="#463B3F";function ZustandIcon({size:e,color:t}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:e,height:e,justifyContent:"center",alignItems:"center"},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{fontSize:.75*e,color:t||ZUSTAND_ICON_COLOR,fontWeight:"700"},children:"Z"})})}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZUSTAND_ICON_COLOR = void 0;
+exports.ZustandIcon = ZustandIcon;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Zustand DevTools icon
+ */
+
+const ZUSTAND_ICON_COLOR = exports.ZUSTAND_ICON_COLOR = "#463B3F";
+function ZustandIcon({
+  size,
+  color
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: size,
+      height: size,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        fontSize: size * 0.75,
+        color: color || ZUSTAND_ICON_COLOR,
+        fontWeight: "700"
+      },
+      children: "Z"
+    })
+  });
+}