@buoy-gg/shared-ui 1.7.2

package/lib/module/env/EnvironmentIndicator.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import { Pressable, Text, View } from "react-native";
+import { FlaskConical, TestTube2, Bug, Zap, ChevronDown } from "../icons/index.js";
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getEnvironmentConfig(environment) {
+  switch (environment) {
+    case "local":
+      return {
+        label: "LOCAL",
+        backgroundColor: gameUIColors.info,
+        icon: FlaskConical,
+        isLocal: true
+      };
+    case "dev":
+      return {
+        label: "DEV",
+        backgroundColor: gameUIColors.warning,
+        icon: FlaskConical,
+        isLocal: false
+      };
+    case "qa":
+      return {
+        label: "QA",
+        backgroundColor: gameUIColors.optional,
+        icon: Bug,
+        isLocal: false
+      };
+    case "staging":
+      return {
+        label: "STAGING",
+        backgroundColor: gameUIColors.success,
+        icon: Zap,
+        isLocal: false
+      };
+    case "prod":
+      return {
+        label: "PROD",
+        backgroundColor: gameUIColors.error,
+        icon: TestTube2,
+        isLocal: false
+      };
+    default:
+      return {
+        label: "LOCAL",
+        backgroundColor: gameUIColors.info,
+        icon: FlaskConical,
+        isLocal: true
+      };
+  }
+}
+export function EnvironmentIndicator({
+  environment,
+  onLayout,
+  interactive = false,
+  onPress
+}) {
+  const envConfig = getEnvironmentConfig(environment);
+  const content = /*#__PURE__*/_jsxs(View, {
+    onLayout: onLayout,
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: 6,
+      paddingLeft: 8,
+      paddingRight: interactive ? 4 : 8,
+      flexShrink: 0
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: envConfig.backgroundColor,
+        marginRight: 6,
+        shadowColor: envConfig.backgroundColor,
+        shadowOffset: {
+          width: 0,
+          height: 0
+        },
+        shadowOpacity: 0.6,
+        shadowRadius: 4,
+        elevation: 2
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: 11,
+        fontWeight: "600",
+        fontFamily: "Poppins-SemiBold",
+        color: gameUIColors.primaryLight,
+        letterSpacing: 0.5
+      },
+      children: envConfig.label
+    }), interactive && /*#__PURE__*/_jsx(ChevronDown, {
+      size: 12,
+      color: gameUIColors.muted,
+      style: {
+        marginLeft: 2
+      }
+    })]
+  });
+  if (interactive && onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => ({
+        opacity: pressed ? 0.7 : 1
+      }),
+      accessibilityRole: "button",
+      accessibilityLabel: `Current environment: ${envConfig.label}. Tap to switch environment.`,
+      children: content
+    });
+  }
+  return content;
+}

package/lib/module/env/EnvironmentSelector.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import React from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Check } from "../icons/index.js";
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { ExpandablePopover } from "../ui/components/ExpandablePopover.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Constants
+// ============================================================================
+
+const ENV_SELECTOR_WIDTH = 140; // Wider than minimized tools stack
+const PEEK_HEIGHT = 28;
+const OPTION_HEIGHT = 44;
+const PADDING_VERTICAL = 8;
+const COLLAPSE_BUTTON_HEIGHT = 24;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Environment Config Helper
+// ============================================================================
+
+function getEnvironmentConfig(environment) {
+  switch (environment) {
+    case "local":
+      return {
+        label: "LOCAL",
+        backgroundColor: gameUIColors.info
+      };
+    case "dev":
+      return {
+        label: "DEV",
+        backgroundColor: gameUIColors.warning
+      };
+    case "qa":
+      return {
+        label: "QA",
+        backgroundColor: gameUIColors.optional
+      };
+    case "staging":
+      return {
+        label: "STAGING",
+        backgroundColor: gameUIColors.success
+      };
+    case "prod":
+      return {
+        label: "PROD",
+        backgroundColor: gameUIColors.error
+      };
+    default:
+      return {
+        label: "LOCAL",
+        backgroundColor: gameUIColors.info
+      };
+  }
+}
+
+// ============================================================================
+// Environment Option Component
+// ============================================================================
+
+function EnvironmentOption({
+  environment,
+  isSelected,
+  onPress
+}) {
+  const config = getEnvironmentConfig(environment);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.optionContainer, isSelected && styles.optionContainerSelected, pressed && styles.optionContainerPressed],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.optionLeft,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.optionDot, {
+          backgroundColor: config.backgroundColor
+        }, {
+          shadowColor: config.backgroundColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 4,
+          elevation: 2
+        }]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.optionLabel,
+        children: config.label
+      })]
+    }), isSelected && /*#__PURE__*/_jsx(Check, {
+      size: 14,
+      color: gameUIColors.success,
+      strokeWidth: 3
+    })]
+  });
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function EnvironmentSelector({
+  hasItems,
+  currentEnvironment,
+  availableEnvironments,
+  onSelect,
+  width = ENV_SELECTOR_WIDTH,
+  collapsedContent
+}) {
+  // Calculate expanded height based on number of environments
+  const expandedHeight = PADDING_VERTICAL + availableEnvironments.length * OPTION_HEIGHT + COLLAPSE_BUTTON_HEIGHT + 4;
+
+  // Default collapsed content shows current environment
+  const defaultCollapsedContent = /*#__PURE__*/_jsxs(View, {
+    style: styles.collapsedEnvBadge,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.collapsedDot, {
+        backgroundColor: getEnvironmentConfig(currentEnvironment).backgroundColor
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.collapsedLabel,
+      children: getEnvironmentConfig(currentEnvironment).label
+    })]
+  });
+  return /*#__PURE__*/_jsx(ExpandablePopover, {
+    hasItems: hasItems,
+    width: width,
+    expandedHeight: expandedHeight,
+    peekHeight: PEEK_HEIGHT,
+    showCount: false,
+    collapsedContent: collapsedContent || defaultCollapsedContent,
+    collapsedLabel: `Switch environment from ${currentEnvironment}`,
+    children: availableEnvironments.map(env => /*#__PURE__*/_jsx(EnvironmentOption, {
+      environment: env,
+      isSelected: env === currentEnvironment,
+      onPress: () => onSelect(env)
+    }, env))
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  collapsedEnvBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  collapsedDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  collapsedLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  },
+  optionContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    height: OPTION_HEIGHT,
+    width: "100%"
+  },
+  optionContainerSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  optionContainerPressed: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  optionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  optionDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 10
+  },
+  optionLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  }
+});

package/lib/module/env/EnvironmentSelectorInline.js

@@ -0,0 +1,293 @@
+"use strict";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { Check, ChevronUp } from "../icons/index.js";
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Constants
+// ============================================================================
+
+const OPTION_HEIGHT = 36;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Environment Config Helper
+// ============================================================================
+
+function getEnvironmentConfig(environment) {
+  switch (environment) {
+    case "local":
+      return {
+        label: "LOCAL",
+        backgroundColor: gameUIColors.info
+      };
+    case "dev":
+      return {
+        label: "DEV",
+        backgroundColor: gameUIColors.warning
+      };
+    case "qa":
+      return {
+        label: "QA",
+        backgroundColor: gameUIColors.optional
+      };
+    case "staging":
+      return {
+        label: "STAGING",
+        backgroundColor: gameUIColors.success
+      };
+    case "prod":
+      return {
+        label: "PROD",
+        backgroundColor: gameUIColors.error
+      };
+    default:
+      return {
+        label: "LOCAL",
+        backgroundColor: gameUIColors.info
+      };
+  }
+}
+
+// ============================================================================
+// Environment Option Component
+// ============================================================================
+
+function EnvironmentOption({
+  environment,
+  isSelected,
+  onPress
+}) {
+  const config = getEnvironmentConfig(environment);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.optionContainer, isSelected && styles.optionContainerSelected, pressed && styles.optionContainerPressed],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.optionLeft,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.optionDot, {
+          backgroundColor: config.backgroundColor
+        }, {
+          shadowColor: config.backgroundColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 3,
+          elevation: 2
+        }]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.optionLabel,
+        numberOfLines: 1,
+        children: config.label
+      })]
+    }), isSelected && /*#__PURE__*/_jsx(Check, {
+      size: 12,
+      color: gameUIColors.success,
+      strokeWidth: 3
+    })]
+  });
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function EnvironmentSelectorInline({
+  currentEnvironment,
+  availableEnvironments,
+  onSelect
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const heightAnim = useRef(new Animated.Value(0)).current;
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const config = getEnvironmentConfig(currentEnvironment);
+
+  // Calculate expanded height based on number of environments
+  const expandedHeight = availableEnvironments.length * OPTION_HEIGHT;
+
+  // Animate height and chevron rotation
+  useEffect(() => {
+    Animated.parallel([Animated.timing(heightAnim, {
+      toValue: isExpanded ? expandedHeight : 0,
+      duration: 200,
+      useNativeDriver: false
+    }), Animated.timing(rotateAnim, {
+      toValue: isExpanded ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    })]).start();
+  }, [isExpanded, expandedHeight, heightAnim, rotateAnim]);
+  const handleToggle = useCallback(() => {
+    setIsExpanded(prev => !prev);
+  }, []);
+  const handleSelect = useCallback(env => {
+    setIsExpanded(false);
+    onSelect(env);
+  }, [onSelect]);
+  const chevronRotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wrapper,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.optionsDropup, {
+        height: heightAnim,
+        opacity: heightAnim.interpolate({
+          inputRange: [0, expandedHeight * 0.5, expandedHeight],
+          outputRange: [0, 0.8, 1]
+        })
+      }],
+      pointerEvents: isExpanded ? "auto" : "none",
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          height: expandedHeight
+        },
+        children: availableEnvironments.map(env => /*#__PURE__*/_jsx(EnvironmentOption, {
+          environment: env,
+          isSelected: env === currentEnvironment,
+          onPress: () => handleSelect(env)
+        }, env))
+      })
+    }), /*#__PURE__*/_jsxs(Pressable, {
+      onPress: handleToggle,
+      style: ({
+        pressed
+      }) => [styles.badge, isExpanded && styles.badgeExpanded, pressed && styles.badgePressed],
+      accessibilityRole: "button",
+      accessibilityLabel: `Current environment: ${config.label}. Tap to switch.`,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.dot, {
+          backgroundColor: config.backgroundColor
+        }, {
+          shadowColor: config.backgroundColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 4,
+          elevation: 2
+        }]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        children: config.label
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          transform: [{
+            rotate: chevronRotation
+          }]
+        },
+        children: /*#__PURE__*/_jsx(ChevronUp, {
+          size: 10,
+          color: gameUIColors.muted
+        })
+      })]
+    })]
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    zIndex: 1000
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 6,
+    paddingLeft: 8,
+    paddingRight: 6,
+    gap: 6,
+    backgroundColor: "transparent",
+    borderRadius: 6
+  },
+  badgeExpanded: {
+    backgroundColor: gameUIColors.blackTint1,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  },
+  badgePressed: {
+    opacity: 0.7
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  },
+  optionsDropup: {
+    position: "absolute",
+    bottom: "100%",
+    left: 0,
+    right: 0,
+    backgroundColor: gameUIColors.blackTint1,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: gameUIColors.border,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10
+  },
+  optionContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 10,
+    height: OPTION_HEIGHT
+  },
+  optionContainerSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  optionContainerPressed: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  optionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  optionDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 8
+  },
+  optionLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  }
+});

package/lib/module/hooks/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { useFilterManager } from "./useFilterManager.js";
+export { useSafeAreaInsets } from "./useSafeAreaInsets.js";
+export { getSafeAreaInsets } from "./useSafeAreaInsets.js";
+export { useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./useDeviceInfo.js";

package/lib/module/hooks/safe-area-impl.js

@@ -0,0 +1,23 @@
+"use strict";
+
+/**
+ * Auto-generated safe area implementation
+ * Detected: none
+ * Generated at: 2026-01-03T16:08:00.629Z
+ *
+ * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
+ *
+ * No react-native-safe-area-context found. Using pure JS fallback only.
+ * Install react-native-safe-area-context for more accurate safe area values.
+ */
+
+export const safeAreaType = "pure-js";
+export const hasSafeAreaPackage = false;
+
+/**
+ * Hook that returns null since react-native-safe-area-context is not installed.
+ * The main useSafeAreaInsets hook will use pure JS fallback.
+ */
+export const useNativeSafeAreaInsets = () => {
+  return null;
+};