@buoy-gg/jotai 3.0.1 → 3.0.2

package/lib/module/jotai/components/JotaiEventFilterView.js

@@ -1 +1,301 @@
-"use strict";import{useState}from"react";import{View,Text,TextInput,StyleSheet,ScrollView,TouchableOpacity}from"react-native";import{SectionHeader,macOSColors,buoyColors,Filter,X}from"@buoy-gg/shared-ui";import{jotaiStateStore}from"../utils/jotaiStateStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function getAtomColorForPattern(e,o){const t=o.find(o=>o.label.toLowerCase().includes(e.toLowerCase()));return t?t.color:null}export function JotaiEventFilterView({ignoredPatterns:e,onTogglePattern:o,onAddPattern:t,atoms:r}){const[l,s]=useState("");return _jsxs(ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!1,nestedScrollEnabled:!0,children:[_jsxs(View,{style:styles.section,children:[_jsxs(SectionHeader,{children:[_jsx(SectionHeader.Icon,{icon:Filter,color:buoyColors.textSecondary,size:12}),_jsx(SectionHeader.Title,{children:"REGISTERED ATOMS"})]}),0===r.length?_jsx(Text,{style:styles.emptyText,children:"No atoms registered yet."}):_jsx(ScrollView,{style:styles.atomList,contentContainerStyle:styles.atomListContent,nestedScrollEnabled:!0,children:r.map(t=>{const r=jotaiStateStore.getAtomColor(t.label),l=Array.from(e).some(e=>t.label.toLowerCase().includes(e.toLowerCase()));return _jsxs(TouchableOpacity,{style:[styles.atomRow,l&&styles.atomRowFiltered],onPress:()=>o(t.label),activeOpacity:.7,children:[_jsx(View,{style:[styles.atomDot,{backgroundColor:r}]}),_jsx(Text,{style:[styles.atomRowText,{color:r},l&&styles.atomRowTextFiltered],numberOfLines:1,children:t.label}),_jsx(Text,l?{style:styles.filteredLabel,children:"filtered"}:{style:[styles.addLabel,{color:r}],children:"+ add"})]},t.label)})}),_jsx(View,{style:styles.addInputWrapper,children:_jsx(TextInput,{value:l,onChangeText:s,onSubmitEditing:()=>{const o=l.trim();o&&!e.has(o)&&(t(o),s(""))},placeholder:"Type a pattern and press Enter...",placeholderTextColor:macOSColors.text.muted,returnKeyType:"done",autoCapitalize:"none",autoCorrect:!1,style:styles.patternInput})})]}),e.size>0&&_jsxs(View,{style:styles.section,children:[_jsxs(SectionHeader,{children:[_jsx(SectionHeader.Icon,{icon:Filter,color:buoyColors.textSecondary,size:12}),_jsx(SectionHeader.Title,{children:"ACTIVE FILTERS"})]}),_jsx(View,{style:styles.patternList,children:Array.from(e).map(e=>{const t=getAtomColorForPattern(e,r);return _jsxs(TouchableOpacity,{style:styles.patternRow,onPress:()=>o(e),activeOpacity:.8,children:[t?_jsx(View,{style:[styles.atomDot,{backgroundColor:t}]}):null,_jsx(Text,{style:[styles.patternText,t?{color:t}:null],numberOfLines:1,children:e}),_jsx(X,{size:12,color:buoyColors.primary+"80"})]},e)})})]}),_jsxs(View,{style:styles.section,children:[_jsxs(SectionHeader,{children:[_jsx(SectionHeader.Icon,{icon:Filter,color:buoyColors.textSecondary,size:12}),_jsx(SectionHeader.Title,{children:"HOW ATOM FILTERS WORK"})]}),_jsx(Text,{style:styles.howItWorksText,children:"Patterns hide matching atoms from both the Atoms tab and the Events tab. Tap an atom above to quickly add it as a filter."}),_jsxs(View,{style:styles.examplesContainer,children:[_jsx(Text,{style:styles.examplesTitle,children:"EXAMPLES:"}),["• count -> hides countAtom from atoms & events","• auth -> hides authAtom, authStatusAtom","• user -> hides userAtom from both tabs"].map(e=>_jsx(Text,{style:styles.exampleItem,children:e},e))]})]})]})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},scrollContent:{paddingTop:16,paddingHorizontal:16,paddingBottom:24,gap:16},section:{backgroundColor:buoyColors.card,borderRadius:16,borderWidth:1,borderColor:buoyColors.border,overflow:"hidden"},atomList:{maxHeight:180},atomListContent:{paddingHorizontal:16,paddingTop:8,paddingBottom:16,gap:10},atomRow:{flexDirection:"row",alignItems:"center",gap:10,paddingVertical:10,paddingHorizontal:12,backgroundColor:buoyColors.hover,borderRadius:8,borderWidth:1,borderColor:buoyColors.border},atomRowFiltered:{opacity:.45},atomDot:{width:7,height:7,borderRadius:3.5},atomRowText:{flex:1,fontSize:12,fontWeight:"600",fontFamily:"monospace"},atomRowTextFiltered:{color:macOSColors.text.muted,textDecorationLine:"line-through"},filteredLabel:{fontSize:10,fontWeight:"500",color: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:buoyColors.hover,borderRadius:8,borderWidth:1,borderColor:buoyColors.border,gap:8},patternText:{flex:1,fontSize:12,fontFamily:"monospace",color:buoyColors.text},howItWorksText:{fontSize:11,color:buoyColors.textSecondary,lineHeight:16,marginTop:8,paddingHorizontal:16,fontFamily:"monospace"},examplesContainer:{paddingTop:8,paddingHorizontal:16,paddingBottom:16,borderTopWidth:1,borderTopColor:buoyColors.border,marginTop:12},examplesTitle:{fontSize:10,fontWeight:"600",color:buoyColors.textMuted,fontFamily:"monospace",letterSpacing:.5,marginBottom:6},exampleItem:{fontSize:10,color:buoyColors.textMuted,fontFamily:"monospace",lineHeight:16},emptyText:{fontSize:11,color:macOSColors.text.muted,paddingHorizontal:16,paddingVertical:12,fontFamily:"monospace"},patternInput:{borderWidth:1,borderColor:buoyColors.primary+"40",borderRadius:8,paddingHorizontal:12,paddingVertical:8,fontSize:12,color:buoyColors.text,fontFamily:"monospace",backgroundColor:buoyColors.input}});
+"use strict";
+
+/**
+ * JotaiEventFilterView
+ *
+ * Filter configuration UI for hiding atoms from the Atoms and Events tabs.
+ * Mirrors ZustandEventFilterView.tsx from @buoy-gg/zustand.
+ */
+
+import { useState } from "react";
+import { View, Text, TextInput, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import { SectionHeader, macOSColors, buoyColors, Filter, X } from "@buoy-gg/shared-ui";
+import { jotaiStateStore } from "../utils/jotaiStateStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getAtomColorForPattern(pattern, atoms) {
+  const match = atoms.find(a => a.label.toLowerCase().includes(pattern.toLowerCase()));
+  return match ? match.color : null;
+}
+export function JotaiEventFilterView({
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  atoms
+}) {
+  const [newPattern, setNewPattern] = useState("");
+  const handleAddPattern = () => {
+    const trimmed = newPattern.trim();
+    if (trimmed && !ignoredPatterns.has(trimmed)) {
+      onAddPattern(trimmed);
+      setNewPattern("");
+    }
+  };
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    nestedScrollEnabled: true,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: buoyColors.textSecondary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "REGISTERED ATOMS"
+        })]
+      }), atoms.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: "No atoms registered yet."
+      }) : /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.atomList,
+        contentContainerStyle: styles.atomListContent,
+        nestedScrollEnabled: true,
+        children: atoms.map(atom => {
+          const atomColor = jotaiStateStore.getAtomColor(atom.label);
+          const isFiltered = Array.from(ignoredPatterns).some(p => atom.label.toLowerCase().includes(p.toLowerCase()));
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.atomRow, isFiltered && styles.atomRowFiltered],
+            onPress: () => onTogglePattern(atom.label),
+            activeOpacity: 0.7,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.atomDot, {
+                backgroundColor: atomColor
+              }]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.atomRowText, {
+                color: atomColor
+              }, isFiltered && styles.atomRowTextFiltered],
+              numberOfLines: 1,
+              children: atom.label
+            }), isFiltered ? /*#__PURE__*/_jsx(Text, {
+              style: styles.filteredLabel,
+              children: "filtered"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: [styles.addLabel, {
+                color: atomColor
+              }],
+              children: "+ add"
+            })]
+          }, atom.label);
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.addInputWrapper,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          value: newPattern,
+          onChangeText: setNewPattern,
+          onSubmitEditing: handleAddPattern,
+          placeholder: "Type a pattern and press Enter...",
+          placeholderTextColor: macOSColors.text.muted,
+          returnKeyType: "done",
+          autoCapitalize: "none",
+          autoCorrect: false,
+          style: styles.patternInput
+        })
+      })]
+    }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: buoyColors.textSecondary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "ACTIVE FILTERS"
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.patternList,
+        children: Array.from(ignoredPatterns).map(pattern => {
+          const atomColor = getAtomColorForPattern(pattern, atoms);
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.patternRow,
+            onPress: () => onTogglePattern(pattern),
+            activeOpacity: 0.8,
+            children: [atomColor ? /*#__PURE__*/_jsx(View, {
+              style: [styles.atomDot, {
+                backgroundColor: atomColor
+              }]
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              style: [styles.patternText, atomColor ? {
+                color: atomColor
+              } : null],
+              numberOfLines: 1,
+              children: pattern
+            }), /*#__PURE__*/_jsx(X, {
+              size: 12,
+              color: buoyColors.primary + "80"
+            })]
+          }, pattern);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: buoyColors.textSecondary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "HOW ATOM FILTERS WORK"
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.howItWorksText,
+        children: "Patterns hide matching atoms from both the Atoms tab and the Events tab. Tap an atom above to quickly add it as a filter."
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.examplesContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.examplesTitle,
+          children: "EXAMPLES:"
+        }), ["• count -> hides countAtom from atoms & events", "• auth -> hides authAtom, authStatusAtom", "• user -> hides userAtom from both tabs"].map(ex => /*#__PURE__*/_jsx(Text, {
+          style: styles.exampleItem,
+          children: ex
+        }, ex))]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  scrollContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 16
+  },
+  section: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    overflow: "hidden"
+  },
+  atomList: {
+    maxHeight: 180
+  },
+  atomListContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 10
+  },
+  atomRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  atomRowFiltered: {
+    opacity: 0.45
+  },
+  atomDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5
+  },
+  atomRowText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  atomRowTextFiltered: {
+    color: macOSColors.text.muted,
+    textDecorationLine: "line-through"
+  },
+  filteredLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: 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: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    gap: 8
+  },
+  patternText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.text
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    lineHeight: 16,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: "monospace"
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    marginTop: 12
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    lineHeight: 16
+  },
+  emptyText: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    fontFamily: "monospace"
+  },
+  patternInput: {
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 12,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    backgroundColor: buoyColors.input
+  }
+});

package/lib/module/jotai/components/JotaiIcon.js

@@ -1 +1,31 @@
-"use strict";import{View,Text}from"react-native";import{jsx as _jsx}from"react/jsx-runtime";const JOTAI_ICON_COLOR="#6C47FF";export function JotaiIcon({size:t,color:e}){return _jsx(View,{style:{width:t,height:t,justifyContent:"center",alignItems:"center"},children:_jsx(Text,{style:{fontSize:.75*t,color:e||"#6C47FF",fontWeight:"700"},children:"J"})})}export{JOTAI_ICON_COLOR};
+"use strict";
+
+/**
+ * Jotai DevTools icon
+ */
+
+import { View, Text } from "react-native";
+import { jsx as _jsx } from "react/jsx-runtime";
+const JOTAI_ICON_COLOR = "#6C47FF";
+export function JotaiIcon({
+  size,
+  color
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: size,
+      height: size,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: size * 0.75,
+        color: color || JOTAI_ICON_COLOR,
+        fontWeight: "700"
+      },
+      children: "J"
+    })
+  });
+}
+export { JOTAI_ICON_COLOR };