@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,178 @@
+"use strict";
+
+import { useState } from "react";
+import { Dimensions, Modal, ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
+import { X } from "../../icons/index.js";
+import { ExpandableSection } from "./ExpandableSection.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  height: screenHeight
+} = Dimensions.get("window");
+export function ExpandableSectionWithModal({
+  icon,
+  iconColor,
+  iconBackgroundColor,
+  title,
+  subtitle,
+  children,
+  modalBackgroundColor = "#0F0F0F",
+  showModalHeader = true,
+  fullScreen = false,
+  onModalOpen,
+  onModalClose
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const openModal = () => {
+    setIsModalOpen(true);
+    onModalOpen?.();
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+    onModalClose?.();
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ExpandableSection, {
+      icon: icon,
+      iconColor: iconColor,
+      iconBackgroundColor: iconBackgroundColor,
+      title: title,
+      subtitle: subtitle,
+      onPress: openModal,
+      children: /*#__PURE__*/_jsx(_Fragment, {})
+    }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+        style: styles.container,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.backdrop,
+          children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
+          style: fullScreen ? styles.fullScreenModalContainer : styles.modalContainer,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: [fullScreen ? styles.fullScreenModal : styles.modal, {
+              backgroundColor: modalBackgroundColor,
+              paddingTop: fullScreen ? insets.top : showModalHeader ? insets.top : 0
+            }],
+            children: [showModalHeader && /*#__PURE__*/_jsx(View, {
+              style: styles.headerContainer,
+              children: /*#__PURE__*/_jsx(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__*/_jsx(X, {
+                  size: 20,
+                  color: "#9CA3AF"
+                })
+              })
+            }), showModalHeader ? /*#__PURE__*/_jsxs(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__*/_jsx(View, {
+                style: styles.content,
+                children: typeof children === "function" ? children(closeModal) : children
+              }), /*#__PURE__*/_jsx(View, {
+                style: {
+                  paddingBottom: insets.bottom + 20
+                }
+              })]
+            }) :
+            /*#__PURE__*/
+            /* Direct content without ScrollView wrapper when no header - allows internal gesture handling */
+            _jsx(View, {
+              style: styles.directContent,
+              pointerEvents: "box-none",
+              children: typeof children === "function" ? children(closeModal) : children
+            })]
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  backdrop: {
+    ...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/module/ui/components/FilterComponents.js

@@ -0,0 +1,259 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
+import { X, Plus } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+
+// Container for filter section
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FilterSection({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.filterSection, style],
+    children: children
+  });
+}
+
+// Individual filter badge
+
+export 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__*/_jsxs(TouchableOpacity, {
+    style: [styles.badge, {
+      backgroundColor,
+      borderColor
+    }],
+    onPress: onRemove,
+    disabled: !onRemove,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.badgeText, {
+        color: textColor
+      }],
+      numberOfLines: 1,
+      children: filter
+    }), onRemove && /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onRemove,
+      style: styles.removeButton,
+      children: /*#__PURE__*/_jsx(X, {
+        size: 12,
+        color: textColor
+      })
+    })]
+  });
+}
+
+// Add filter input component
+
+export function AddFilterInput({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder = "Add filter...",
+  color = "#E5E7EB"
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.inputContainer, {
+      borderColor: `${color}40`
+    }],
+    children: [/*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: styles.inputButtons,
+      children: [value.trim() && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onSubmit,
+        style: [styles.inlineAddButton, {
+          backgroundColor: `${color}15`,
+          borderColor: `${color}40`
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.inlineAddButtonText, {
+            color
+          }],
+          children: "Add"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onCancel,
+        style: styles.cancelButton,
+        children: /*#__PURE__*/_jsx(X, {
+          size: 16,
+          color: `${color}60`
+        })
+      })]
+    })]
+  });
+}
+
+// Add filter button
+
+export function AddFilterButton({
+  onPress,
+  color = "#E5E7EB",
+  label = "Add Filter"
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: [styles.addButton, {
+      borderColor: `${color}40`
+    }],
+    onPress: onPress,
+    children: [/*#__PURE__*/_jsx(Plus, {
+      size: 14,
+      color: color
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.addButtonText, {
+        color
+      }],
+      children: label
+    })]
+  });
+}
+
+// Filter list component
+
+export function FilterList({
+  filters,
+  onRemoveFilter,
+  activeFilters,
+  color = "#E5E7EB"
+}) {
+  const filterArray = Array.from(filters);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.filterListColumn,
+    children: filterArray.map(filter => /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.filterItemRow,
+      onPress: () => onRemoveFilter?.(filter),
+      activeOpacity: 0.8,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.filterItemText, {
+          color
+        }],
+        numberOfLines: 1,
+        children: filter
+      }), /*#__PURE__*/_jsx(X, {
+        size: 12,
+        color: `${color}80`
+      })]
+    }, filter))
+  });
+}
+const styles = StyleSheet.create({
+  filterSection: {
+    padding: 16,
+    backgroundColor: 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: buoyColors.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    marginBottom: 8
+  },
+  input: {
+    flex: 1,
+    fontSize: 13,
+    paddingVertical: 0,
+    color: buoyColors.text
+  },
+  inputButtons: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  cancelButton: {
+    padding: 4,
+    borderRadius: 6,
+    backgroundColor: 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: buoyColors.border,
+    backgroundColor: 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: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  filterItemText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginRight: 8,
+    color: buoyColors.text
+  }
+});

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

@@ -0,0 +1,170 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import { Plus } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
+import { useFilterManager } from "../../hooks/useFilterManager.js";
+import { FilterSection, AddFilterInput, AddFilterButton, FilterList } from "./FilterComponents.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FilterViewPattern({
+  patterns,
+  availableItems,
+  onTogglePattern,
+  onAddPattern,
+  icon: Icon,
+  iconColor = gameUIColors.network,
+  placeholder = "Enter pattern",
+  emptyText = "No patterns configured",
+  suggestionsTitle = "AVAILABLE ITEMS",
+  type
+}) {
+  const filterManager = 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__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(FilterSection, {
+      style: styles.filterSectionOverrides,
+      children: [!filterManager.showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
+        onPress: () => filterManager.setShowAddInput(true),
+        color: iconColor
+      }) : /*#__PURE__*/_jsx(AddFilterInput, {
+        value: filterManager.newFilter,
+        onChange: filterManager.setNewFilter,
+        onSubmit: handleAddPattern,
+        onCancel: () => {
+          filterManager.setShowAddInput(false);
+          filterManager.setNewFilter("");
+        },
+        placeholder: placeholder,
+        color: gameUIColors.primaryLight
+      }), suggestedItems.length > 0 ? /*#__PURE__*/_jsxs(View, {
+        style: [styles.suggestedContainer, !filterManager.showAddInput && {
+          marginTop: 12
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.suggestedTitle,
+          children: suggestionsTitle
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.suggestedScroll,
+          showsVerticalScrollIndicator: true,
+          nestedScrollEnabled: true,
+          children: suggestedItems.map(item => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            onPress: () => {
+              if (filterManager.showAddInput) {
+                filterManager.setNewFilter(item);
+              } else {
+                onTogglePattern(item);
+              }
+            },
+            style: styles.suggestedItem,
+            children: [Icon && /*#__PURE__*/_jsx(Icon, {
+              size: 14,
+              color: "#9CA3AF"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.suggestedText,
+              numberOfLines: 1,
+              children: item
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => {
+                if (filterManager.showAddInput) {
+                  filterManager.setNewFilter(item);
+                } else {
+                  onTogglePattern(item);
+                }
+              },
+              style: styles.addIconButton,
+              children: /*#__PURE__*/_jsx(Plus, {
+                size: 16,
+                color: "#8B5CF6"
+              })
+            })]
+          }, item))
+        })]
+      }) : availableItems.length === 0 && /*#__PURE__*/_jsxs(View, {
+        style: [styles.suggestedContainer, {
+          marginTop: 12
+        }],
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.suggestedTitle,
+          children: ["NO ", type.toUpperCase(), " AVAILABLE"]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.emptyText,
+          children: ["Make some requests to see ", type, " here"]
+        })]
+      }), patterns.size > 0 ? /*#__PURE__*/_jsx(FilterList, {
+        filters: patterns,
+        onRemoveFilter: onTogglePattern,
+        color: iconColor
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: emptyText
+      })]
+    })
+  });
+}
+const styles = 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/module/ui/components/HeaderSearchButton.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Search } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HeaderSearchButton({
+  onPress,
+  size = 14,
+  color = gameUIColors.secondary,
+  style
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: onPress,
+    style: [styles.button, style],
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsx(Search, {
+      size: size,
+      color: color
+    })
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    padding: 8,
+    borderRadius: 4
+  }
+});