@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,260 @@
+"use strict";
+
+import { useState, useRef, useEffect } from "react";
+import { View, TextInput, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { Search, X, Filter, Clock } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function SearchBar({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Search...",
+  suggestions = [],
+  recentSearches = [],
+  showFilters = false,
+  onFilterPress,
+  style,
+  containerStyle,
+  autoFocus = false,
+  onSubmitEditing,
+  returnKeyType
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const blurTimeoutRef = useRef(null);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleClear = () => {
+    onChange("");
+    onClear?.();
+  };
+  const handleSuggestionPress = suggestion => {
+    onChange(suggestion);
+    setShowSuggestions(false);
+  };
+  const filteredSuggestions = suggestions.filter(s => s.toLowerCase().includes(value.toLowerCase()));
+  const shouldShowSuggestions = isFocused && (filteredSuggestions.length > 0 || value === "" && recentSearches.length > 0);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.searchBar, isFocused && styles.searchBarFocused],
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: 16,
+        color: gameUIColors.secondary
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: [styles.input, style],
+        placeholder: placeholder,
+        placeholderTextColor: gameUIColors.tertiary,
+        value: value,
+        onChangeText: onChange,
+        onFocus: () => {
+          setIsFocused(true);
+          setShowSuggestions(true);
+        },
+        onBlur: () => {
+          setIsFocused(false);
+          // Clear any existing timeout
+          if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+          }
+          // Set new timeout with proper cleanup
+          blurTimeoutRef.current = setTimeout(() => {
+            setShowSuggestions(false);
+            blurTimeoutRef.current = null;
+          }, 200);
+        },
+        autoFocus: autoFocus,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        onSubmitEditing: onSubmitEditing,
+        returnKeyType: returnKeyType
+      }), value.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleClear,
+        style: styles.clearButton,
+        children: /*#__PURE__*/_jsx(X, {
+          size: 14,
+          color: gameUIColors.secondary
+        })
+      }), showFilters && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onFilterPress,
+        style: styles.filterButton,
+        children: /*#__PURE__*/_jsx(Filter, {
+          size: 14,
+          color: gameUIColors.primary
+        })
+      })]
+    }), shouldShowSuggestions && showSuggestions && /*#__PURE__*/_jsxs(View, {
+      style: styles.suggestionsContainer,
+      children: [value === "" && recentSearches.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.suggestionsTitle,
+          children: "Recent"
+        }), recentSearches.slice(0, 5).map((search, index) => /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.suggestionItem,
+          onPress: () => handleSuggestionPress(search),
+          children: [/*#__PURE__*/_jsx(Clock, {
+            size: 12,
+            color: gameUIColors.tertiary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.suggestionText,
+            children: search
+          })]
+        }, index))]
+      }), filteredSuggestions.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [value !== "" && /*#__PURE__*/_jsx(Text, {
+          style: styles.suggestionsTitle,
+          children: "Suggestions"
+        }), filteredSuggestions.slice(0, 5).map((suggestion, index) => /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.suggestionItem,
+          onPress: () => handleSuggestionPress(suggestion),
+          children: [/*#__PURE__*/_jsx(Search, {
+            size: 12,
+            color: gameUIColors.tertiary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.suggestionText,
+            children: suggestion
+          })]
+        }, index))]
+      })]
+    })]
+  });
+}
+SearchBar.Quick = function QuickSearch({
+  onSearch,
+  placeholder = "Quick search...",
+  style
+}) {
+  const [query, setQuery] = useState("");
+  const handleSubmit = () => {
+    if (query.trim()) {
+      onSearch(query.trim());
+      setQuery("");
+    }
+  };
+  return /*#__PURE__*/_jsx(SearchBar, {
+    value: query,
+    onChange: setQuery,
+    placeholder: placeholder,
+    onSubmitEditing: handleSubmit,
+    returnKeyType: "search",
+    style: style
+  });
+};
+SearchBar.WithFilters = function WithFilters({
+  filterCount,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.withFiltersContainer,
+    children: [/*#__PURE__*/_jsx(SearchBar, {
+      ...props,
+      showFilters: true
+    }), filterCount !== undefined && filterCount > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.filterBadge,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.filterBadgeText,
+        children: filterCount
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+    zIndex: 100
+  },
+  searchBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 8,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  searchBarFocused: {
+    borderColor: gameUIColors.primary + "40"
+  },
+  input: {
+    flex: 1,
+    fontSize: 14,
+    color: gameUIColors.text,
+    padding: 0
+  },
+  clearButton: {
+    padding: 4
+  },
+  filterButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: gameUIColors.primary + "20"
+  },
+  suggestionsContainer: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 8,
+    marginTop: 4,
+    paddingVertical: 4,
+    maxHeight: 200,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  suggestionsTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: gameUIColors.secondary,
+    textTransform: "uppercase",
+    paddingHorizontal: 12,
+    paddingVertical: 4
+  },
+  suggestionItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 8
+  },
+  suggestionText: {
+    fontSize: 13,
+    color: gameUIColors.text
+  },
+  withFiltersContainer: {
+    position: "relative"
+  },
+  filterBadge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    backgroundColor: gameUIColors.error,
+    borderRadius: 10,
+    minWidth: 18,
+    height: 18,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 4
+  },
+  filterBadgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: "#FFFFFF"
+  }
+});

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

@@ -0,0 +1,121 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+
+// Base SectionHeader container component
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SectionHeader({
+  children
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: children
+  });
+}
+
+// Icon component for section headers
+
+function Icon({
+  icon: IconComponent,
+  color = buoyColors.text,
+  size = 16
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.iconWrapper,
+    children: /*#__PURE__*/_jsx(IconComponent, {
+      size: size,
+      color: color
+    })
+  });
+}
+
+// Title component for section headers
+
+function Title({
+  children,
+  flex = 1
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.title, {
+      flex
+    }],
+    numberOfLines: 1,
+    children: children
+  });
+}
+
+// Badge component for counts or status
+
+function Badge({
+  count,
+  color = buoyColors.primary,
+  children
+}) {
+  const backgroundColor = `${color}15`;
+  const borderColor = `${color}33`;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, {
+      backgroundColor,
+      borderColor
+    }],
+    children: count !== undefined ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.badgeText, {
+        color
+      }],
+      children: count
+    }) : children
+  });
+}
+
+// Actions component for section header actions
+
+function Actions({
+  children
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.actions,
+    children: children
+  });
+}
+
+// Attach sub-components to the main component
+SectionHeader.Icon = Icon;
+SectionHeader.Title = Title;
+SectionHeader.Badge = Badge;
+SectionHeader.Actions = Actions;
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: buoyColors.base,
+    minHeight: 40
+  },
+  iconWrapper: {
+    marginRight: 8
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: buoyColors.text
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 12,
+    borderWidth: 1,
+    marginLeft: 8
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginLeft: "auto"
+  }
+});

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

@@ -0,0 +1,194 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StatsCard({
+  children,
+  style,
+  title
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [title && /*#__PURE__*/_jsx(Text, {
+      style: styles.cardTitle,
+      children: title
+    }), children]
+  });
+}
+StatsCard.Grid = function Grid({
+  children,
+  columns = 4,
+  style
+}) {
+  const gridStyles = {
+    2: styles.grid2,
+    3: styles.grid3,
+    4: styles.grid4
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.grid, gridStyles[columns], style],
+    children: children
+  });
+};
+StatsCard.Item = function Item({
+  icon: Icon,
+  label,
+  value,
+  color = "primary",
+  size = "medium",
+  style,
+  labelStyle,
+  valueStyle
+}) {
+  const colorMap = {
+    success: gameUIColors.success,
+    error: gameUIColors.error,
+    warning: gameUIColors.warning,
+    info: gameUIColors.primary,
+    primary: gameUIColors.primary
+  };
+  const finalColor = colorMap[color] || color;
+  const sizeConfig = {
+    small: {
+      iconSize: 12,
+      valueSize: 16,
+      labelSize: 10
+    },
+    medium: {
+      iconSize: 14,
+      valueSize: 20,
+      labelSize: 11
+    },
+    large: {
+      iconSize: 16,
+      valueSize: 24,
+      labelSize: 12
+    }
+  };
+  const config = sizeConfig[size];
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.statCard, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.statHeader,
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        size: config.iconSize,
+        color: finalColor
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.statLabel, {
+          fontSize: config.labelSize
+        }, labelStyle],
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.statValue, {
+        fontSize: config.valueSize,
+        color: finalColor
+      }, valueStyle],
+      children: value
+    })]
+  });
+};
+StatsCard.Row = function Row({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.row, style],
+    children: children
+  });
+};
+StatsCard.Divider = function Divider({
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.divider, style]
+  });
+};
+StatsCard.Section = function Section({
+  title,
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.section, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.sectionTitle,
+      children: title
+    }), children]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 12,
+    padding: 16,
+    marginVertical: 8
+  },
+  cardTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: gameUIColors.text,
+    marginBottom: 12
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12
+  },
+  grid2: {
+    justifyContent: "space-between"
+  },
+  grid3: {
+    justifyContent: "space-between"
+  },
+  grid4: {
+    justifyContent: "space-between"
+  },
+  statCard: {
+    flex: 1,
+    minWidth: 70,
+    backgroundColor: gameUIColors.background + "40",
+    borderRadius: 8,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: gameUIColors.border + "20"
+  },
+  statHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    marginBottom: 6
+  },
+  statLabel: {
+    color: gameUIColors.secondary,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  statValue: {
+    fontWeight: "700"
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  divider: {
+    height: 1,
+    backgroundColor: gameUIColors.border + "20",
+    marginVertical: 8
+  },
+  section: {
+    marginVertical: 8
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: gameUIColors.secondary,
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  }
+});