@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/ui/components/ExpandableSectionWithModal.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableSectionWithModal = ExpandableSectionWithModal;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
+var _index = require("../../icons/index.js");
+var _ExpandableSection = require("./ExpandableSection.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const {
+  height: screenHeight
+} = _reactNative.Dimensions.get("window");
+function ExpandableSectionWithModal({
+  icon,
+  iconColor,
+  iconBackgroundColor,
+  title,
+  subtitle,
+  children,
+  modalBackgroundColor = "#0F0F0F",
+  showModalHeader = true,
+  fullScreen = false,
+  onModalOpen,
+  onModalClose
+}) {
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const openModal = () => {
+    setIsModalOpen(true);
+    onModalOpen?.();
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+    onModalClose?.();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableSection.ExpandableSection, {
+      icon: icon,
+      iconColor: iconColor,
+      iconBackgroundColor: iconBackgroundColor,
+      title: title,
+      subtitle: subtitle,
+      onPress: openModal,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      accessibilityLabel: "Expandable section modal",
+      accessibilityHint: "View expandable section modal",
+      "sentry-label": "ignore expandable section modal",
+      visible: isModalOpen,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: closeModal,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.container,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.backdrop,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            accessibilityLabel: "Modal backdrop close",
+            accessibilityHint: "View modal backdrop close",
+            "sentry-label": "ignore modal backdrop close",
+            accessibilityRole: "button",
+            style: styles.backdropTouchable,
+            onPress: closeModal,
+            activeOpacity: 1
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: fullScreen ? styles.fullScreenModalContainer : styles.modalContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [fullScreen ? styles.fullScreenModal : styles.modal, {
+              backgroundColor: modalBackgroundColor,
+              paddingTop: fullScreen ? insets.top : showModalHeader ? insets.top : 0
+            }],
+            children: [showModalHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.headerContainer,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                accessibilityLabel: "Modal close button",
+                accessibilityHint: "View modal close button",
+                "sentry-label": "ignore modal close button",
+                accessibilityRole: "button",
+                onPress: closeModal,
+                style: styles.closeButton,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+                  size: 20,
+                  color: "#9CA3AF"
+                })
+              })
+            }), showModalHeader ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+              accessibilityLabel: "Modal content scroll",
+              accessibilityHint: "View modal content scroll",
+              "sentry-label": "ignore modal content scroll",
+              style: styles.scrollView,
+              contentContainerStyle: styles.contentContainer,
+              showsVerticalScrollIndicator: false,
+              nestedScrollEnabled: true,
+              scrollEventThrottle: 16,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.content,
+                children: typeof children === "function" ? children(closeModal) : children
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: {
+                  paddingBottom: insets.bottom + 20
+                }
+              })]
+            }) :
+            /*#__PURE__*/
+            /* Direct content without ScrollView wrapper when no header - allows internal gesture handling */
+            (0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.directContent,
+              pointerEvents: "box-none",
+              children: typeof children === "function" ? children(closeModal) : children
+            })]
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  backdrop: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.8)"
+  },
+  backdropTouchable: {
+    flex: 1
+  },
+  modalContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    maxHeight: screenHeight * 0.9
+  },
+  fullScreenModalContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: screenHeight
+  },
+  modal: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    minHeight: 200,
+    flex: 1
+  },
+  fullScreenModal: {
+    flex: 1,
+    minHeight: screenHeight
+  },
+  headerContainer: {
+    alignItems: "flex-end",
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 8
+  },
+  closeButton: {
+    padding: 8,
+    borderRadius: 8,
+    backgroundColor: "rgba(156, 163, 175, 0.1)"
+  },
+  scrollView: {
+    flex: 1
+  },
+  contentContainer: {
+    flexGrow: 1
+  },
+  content: {
+    flex: 1
+  },
+  directContent: {
+    flex: 1
+  }
+});

package/lib/commonjs/ui/components/FilterComponents.js

@@ -0,0 +1,267 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddFilterButton = AddFilterButton;
+exports.AddFilterInput = AddFilterInput;
+exports.FilterBadge = FilterBadge;
+exports.FilterList = FilterList;
+exports.FilterSection = FilterSection;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+// Container for filter section
+
+function FilterSection({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.filterSection, style],
+    children: children
+  });
+}
+
+// Individual filter badge
+
+function FilterBadge({
+  filter,
+  onRemove,
+  active = true,
+  color = "#E5E7EB"
+}) {
+  const backgroundColor = active ? `${color}15` : "transparent";
+  const borderColor = active ? `${color}40` : `${color}20`;
+  const textColor = active ? color : `${color}80`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.badge, {
+      backgroundColor,
+      borderColor
+    }],
+    onPress: onRemove,
+    disabled: !onRemove,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.badgeText, {
+        color: textColor
+      }],
+      numberOfLines: 1,
+      children: filter
+    }), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onRemove,
+      style: styles.removeButton,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+        size: 12,
+        color: textColor
+      })
+    })]
+  });
+}
+
+// Add filter input component
+
+function AddFilterInput({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder = "Add filter...",
+  color = "#E5E7EB"
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.inputContainer, {
+      borderColor: `${color}40`
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      value: value,
+      onChangeText: onChange,
+      onSubmitEditing: onSubmit,
+      placeholder: placeholder,
+      placeholderTextColor: `${color}40`,
+      style: [styles.input, {
+        color
+      }],
+      autoFocus: true,
+      returnKeyType: "done",
+      autoCorrect: false,
+      autoCapitalize: "none",
+      autoComplete: "off",
+      spellCheck: false
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inputButtons,
+      children: [value.trim() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onSubmit,
+        style: [styles.inlineAddButton, {
+          backgroundColor: `${color}15`,
+          borderColor: `${color}40`
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.inlineAddButtonText, {
+            color
+          }],
+          children: "Add"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onCancel,
+        style: styles.cancelButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+          size: 16,
+          color: `${color}60`
+        })
+      })]
+    })]
+  });
+}
+
+// Add filter button
+
+function AddFilterButton({
+  onPress,
+  color = "#E5E7EB",
+  label = "Add Filter"
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.addButton, {
+      borderColor: `${color}40`
+    }],
+    onPress: onPress,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
+      size: 14,
+      color: color
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.addButtonText, {
+        color
+      }],
+      children: label
+    })]
+  });
+}
+
+// Filter list component
+
+function FilterList({
+  filters,
+  onRemoveFilter,
+  activeFilters,
+  color = "#E5E7EB"
+}) {
+  const filterArray = Array.from(filters);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.filterListColumn,
+    children: filterArray.map(filter => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: styles.filterItemRow,
+      onPress: () => onRemoveFilter?.(filter),
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.filterItemText, {
+          color
+        }],
+        numberOfLines: 1,
+        children: filter
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+        size: 12,
+        color: `${color}80`
+      })]
+    }, filter))
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  filterSection: {
+    padding: 16,
+    backgroundColor: _gameUIColors.buoyColors.base
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 16,
+    borderWidth: 1,
+    marginRight: 8
+  },
+  badgeText: {
+    fontSize: 13,
+    fontWeight: "500",
+    marginRight: 4
+  },
+  removeButton: {
+    marginLeft: 4,
+    padding: 2
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _gameUIColors.buoyColors.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.border,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    marginBottom: 8
+  },
+  input: {
+    flex: 1,
+    fontSize: 13,
+    paddingVertical: 0,
+    color: _gameUIColors.buoyColors.text
+  },
+  inputButtons: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  cancelButton: {
+    padding: 4,
+    borderRadius: 6,
+    backgroundColor: _gameUIColors.buoyColors.hover
+  },
+  inlineAddButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  inlineAddButtonText: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  addButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: _gameUIColors.buoyColors.border,
+    backgroundColor: _gameUIColors.buoyColors.input
+  },
+  addButtonText: {
+    fontSize: 13,
+    fontWeight: "500",
+    marginLeft: 6
+  },
+  filterListColumn: {
+    gap: 8
+  },
+  filterItemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: _gameUIColors.buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.border
+  },
+  filterItemText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginRight: 8,
+    color: _gameUIColors.buoyColors.text
+  }
+});

package/lib/commonjs/ui/components/FilterViewPattern.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterViewPattern = FilterViewPattern;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _useFilterManager = require("../../hooks/useFilterManager.js");
+var _FilterComponents = require("./FilterComponents.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function FilterViewPattern({
+  patterns,
+  availableItems,
+  onTogglePattern,
+  onAddPattern,
+  icon: Icon,
+  iconColor = _gameUIColors.gameUIColors.network,
+  placeholder = "Enter pattern",
+  emptyText = "No patterns configured",
+  suggestionsTitle = "AVAILABLE ITEMS",
+  type
+}) {
+  const filterManager = (0, _useFilterManager.useFilterManager)(patterns);
+  const suggestedItems = availableItems.filter(item => !patterns.has(item));
+  const handleAddPattern = () => {
+    if (filterManager.newFilter.trim()) {
+      onAddPattern(filterManager.newFilter.trim());
+      filterManager.addFilter(filterManager.newFilter);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FilterComponents.FilterSection, {
+      style: styles.filterSectionOverrides,
+      children: [!filterManager.showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterButton, {
+        onPress: () => filterManager.setShowAddInput(true),
+        color: iconColor
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterInput, {
+        value: filterManager.newFilter,
+        onChange: filterManager.setNewFilter,
+        onSubmit: handleAddPattern,
+        onCancel: () => {
+          filterManager.setShowAddInput(false);
+          filterManager.setNewFilter("");
+        },
+        placeholder: placeholder,
+        color: _gameUIColors.gameUIColors.primaryLight
+      }), suggestedItems.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.suggestedContainer, !filterManager.showAddInput && {
+          marginTop: 12
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.suggestedTitle,
+          children: suggestionsTitle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          style: styles.suggestedScroll,
+          showsVerticalScrollIndicator: true,
+          nestedScrollEnabled: true,
+          children: suggestedItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            onPress: () => {
+              if (filterManager.showAddInput) {
+                filterManager.setNewFilter(item);
+              } else {
+                onTogglePattern(item);
+              }
+            },
+            style: styles.suggestedItem,
+            children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+              size: 14,
+              color: "#9CA3AF"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.suggestedText,
+              numberOfLines: 1,
+              children: item
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: () => {
+                if (filterManager.showAddInput) {
+                  filterManager.setNewFilter(item);
+                } else {
+                  onTogglePattern(item);
+                }
+              },
+              style: styles.addIconButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
+                size: 16,
+                color: "#8B5CF6"
+              })
+            })]
+          }, item))
+        })]
+      }) : availableItems.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.suggestedContainer, {
+          marginTop: 12
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.suggestedTitle,
+          children: ["NO ", type.toUpperCase(), " AVAILABLE"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: ["Make some requests to see ", type, " here"]
+        })]
+      }), patterns.size > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.FilterList, {
+        filters: patterns,
+        onRemoveFilter: onTogglePattern,
+        color: iconColor
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyText,
+        children: emptyText
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  filterSectionOverrides: {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    backgroundColor: "transparent"
+  },
+  suggestedContainer: {
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 16,
+    maxHeight: 300,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)"
+  },
+  suggestedTitle: {
+    fontSize: 10,
+    color: "#6B7280",
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    marginBottom: 12,
+    textTransform: "uppercase"
+  },
+  suggestedScroll: {
+    maxHeight: 250
+  },
+  suggestedItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    marginBottom: 6,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)"
+  },
+  suggestedText: {
+    flex: 1,
+    fontSize: 12,
+    color: "#E5E7EB",
+    fontFamily: "monospace",
+    marginLeft: 4
+  },
+  emptyText: {
+    fontSize: 11,
+    color: "#6B7280",
+    fontStyle: "italic",
+    padding: 12,
+    textAlign: "center"
+  },
+  addIconButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: "rgba(139, 92, 246, 0.1)"
+  }
+});

package/lib/commonjs/ui/components/HeaderSearchButton.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderSearchButton = HeaderSearchButton;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _index2 = require("../gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function HeaderSearchButton({
+  onPress,
+  size = 14,
+  color = _index2.gameUIColors.secondary,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    style: [styles.button, style],
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
+      size: size,
+      color: color
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    padding: 8,
+    borderRadius: 4
+  }
+});