@buoy-gg/env 1.7.2

package/lib/module/env/components/EnvVarRow.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { CompactRow, TypeBadge, buoyColors } from "@buoy-gg/shared-ui";
+import { getEnvVarType } from "../utils/envTypeDetector";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const getStatusConfig = (status, expectedType) => {
+  switch (status) {
+    case "required_present":
+      return {
+        label: "Valid",
+        color: buoyColors.success,
+        sublabel: "Required"
+      };
+    case "required_missing":
+      return {
+        label: "Missing",
+        color: buoyColors.error,
+        sublabel: "Required"
+      };
+    case "required_wrong_value":
+      return {
+        label: "Wrong",
+        color: buoyColors.warning,
+        sublabel: "Invalid value"
+      };
+    case "required_wrong_type":
+      return {
+        label: "Type Error",
+        color: buoyColors.info,
+        sublabel: "Wrong type"
+      };
+    case "optional_present":
+      return {
+        label: "Set",
+        color: buoyColors.textSecondary,
+        sublabel: "Optional"
+      };
+  }
+};
+const formatEnvKey = key => {
+  // Format key similar to React Query: "section > subsection"
+  return key.split("_").join(" › ");
+};
+const formatValue = value => {
+  if (value === undefined || value === null) {
+    return "undefined";
+  }
+  const str = typeof value === "string" ? value : String(value);
+  return str;
+};
+export function EnvVarRow({
+  envVar,
+  isExpanded,
+  onPress
+}) {
+  const config = getStatusConfig(envVar.status, envVar.expectedType);
+  const hasValue = envVar.value !== undefined && envVar.value !== null;
+
+  // Format primary text like React Query does: "section › subsection"
+  // For env vars, we'll show the key formatted nicely
+  const keyParts = envVar.key.split("_");
+  const primaryText = keyParts.map(part => part.toLowerCase()).join(" › ");
+
+  // Create expanded content for value and expected value
+  const expandedContent = /*#__PURE__*/_jsxs(View, {
+    style: styles.expandedContainer,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Value:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.expandedValue,
+        numberOfLines: 3,
+        children: formatValue(envVar.value) || "undefined"
+      })]
+    }), envVar.status === "required_wrong_type" && envVar.expectedType && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.expandedRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.expandedLabel,
+          children: "Type:"
+        }), /*#__PURE__*/_jsx(TypeBadge, {
+          type: getEnvVarType(envVar.value)
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.expandedRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.expandedLabel,
+          children: "Expected:"
+        }), /*#__PURE__*/_jsx(TypeBadge, {
+          type: envVar.expectedType
+        })]
+      })]
+    }), envVar.status === "required_wrong_value" && envVar.expectedValue && /*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Expected:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.expandedExpected,
+        children: String(envVar.expectedValue)
+      })]
+    }), envVar.description && /*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Info:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.expandedDescription,
+        children: envVar.description
+      })]
+    })]
+  });
+  return /*#__PURE__*/_jsx(CompactRow, {
+    statusDotColor: config.color,
+    statusLabel: config.label,
+    statusSublabel: config.sublabel,
+    primaryText: primaryText,
+    secondaryText: undefined // Don't show value inline anymore
+    ,
+    expandedContent: expandedContent,
+    isExpanded: isExpanded,
+    expandedGlowColor: config.color,
+    customBadge: envVar.expectedType ? /*#__PURE__*/_jsx(TypeBadge, {
+      type: envVar.expectedType
+    }) : undefined,
+    showChevron: true,
+    onPress: onPress ? () => onPress(envVar) : undefined
+  });
+}
+const styles = StyleSheet.create({
+  expandedContainer: {
+    gap: 6
+  },
+  expandedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  expandedLabel: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    fontWeight: "600",
+    minWidth: 60,
+    fontFamily: "monospace"
+  },
+  expandedValue: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  expandedExpected: {
+    fontSize: 11,
+    color: buoyColors.warning,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  expandedDescription: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    flex: 1
+  }
+});

package/lib/module/env/components/EnvVarSection.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { useCallback, useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { EnvVarRow } from "./EnvVarRow";
+import { SectionHeader, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EnvVarSection({
+  title,
+  count,
+  vars,
+  emptyMessage
+}) {
+  const [expandedVar, setExpandedVar] = useState(null);
+  const handleVarPress = useCallback(envVar => {
+    setExpandedVar(prev => prev === envVar.key ? null : envVar.key);
+  }, []);
+  if (vars.length === 0 && title === "Required Variables") {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.sectionContainer,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: title
+        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: 0,
+          color: buoyColors.primary
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.emptySection,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySectionText,
+          children: emptyMessage
+        })
+      })]
+    });
+  }
+  if (vars.length === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.sectionContainer,
+    children: [title !== "" && /*#__PURE__*/_jsxs(SectionHeader, {
+      children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
+        children: title
+      }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+        count: count,
+        color: buoyColors.primary
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.sectionContent,
+      children: vars.map(envVar => /*#__PURE__*/_jsx(EnvVarRow, {
+        envVar: envVar,
+        isExpanded: expandedVar === envVar.key,
+        onPress: handleVarPress
+      }, envVar.key))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  sectionContainer: {
+    gap: 8
+  },
+  sectionContent: {
+    // No gap needed, EnvVarRow has its own margins
+  },
+  emptySection: {
+    padding: 20,
+    backgroundColor: buoyColors.primary + "08",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "20",
+    alignItems: "center"
+  },
+  emptySectionText: {
+    color: buoyColors.primary,
+    fontSize: 11,
+    textAlign: "center",
+    fontFamily: "monospace",
+    opacity: 0.8,
+    letterSpacing: 0.5
+  }
+});

package/lib/module/env/components/EnvVarsModal.js

@@ -0,0 +1,311 @@
+"use strict";
+
+import { JsModal, devToolsStorageKeys, ModalHeader, HeaderSearchButton, Search, X, displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import { useCallback, useState, useRef, useEffect, useMemo } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet, ScrollView, Text } from "react-native";
+import { EnvStatsOverview } from "./EnvStatsOverview";
+import { useDynamicEnv } from "../hooks/useDynamicEnv";
+import { processEnvVars, calculateStats } from "../utils";
+import { EnvVarSection } from "./EnvVarSection";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Full-screen modal for inspecting required environment variables. Handles automatic
+ * discovery, validation, filtering, and rich search so teams can quickly spot missing
+ * or misconfigured values during development sessions.
+ */
+export function EnvVarsModal({
+  visible,
+  onClose,
+  requiredEnvVars,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const [activeFilter, setActiveFilter] = useState("all");
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const searchInputRef = useRef(null);
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+
+  // Focus search input when search becomes active
+  useEffect(() => {
+    if (isSearchActive && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchActive]);
+
+  // Clear search when changing filters
+  useEffect(() => {
+    setSearchQuery("");
+    setIsSearchActive(false);
+  }, [activeFilter]);
+
+  // Auto-collect environment variables
+  const envResults = useDynamicEnv();
+  const autoCollectedEnvVars = useMemo(() => {
+    const envVars = {};
+    envResults.forEach(({
+      key,
+      data
+    }) => {
+      if (data !== undefined && data !== null) {
+        envVars[key] = typeof data === "string" ? data : displayValue(data);
+      }
+    });
+    return envVars;
+  }, [envResults]);
+
+  // Process and categorize environment variables
+  const {
+    requiredVars,
+    optionalVars
+  } = useMemo(() => {
+    return processEnvVars(autoCollectedEnvVars, requiredEnvVars);
+  }, [autoCollectedEnvVars, requiredEnvVars]);
+
+  // Calculate statistics
+  const stats = useMemo(() => {
+    if (requiredEnvVars === undefined) {
+      return {
+        totalCount: 0,
+        requiredCount: 0,
+        optionalCount: 0,
+        presentRequiredCount: 0,
+        missingCount: 0,
+        wrongValueCount: 0,
+        wrongTypeCount: 0
+      };
+    }
+    return calculateStats(requiredVars, optionalVars, autoCollectedEnvVars);
+  }, [requiredEnvVars, requiredVars, optionalVars, autoCollectedEnvVars]);
+
+  // Combine all vars and sort by priority (issues first)
+  const allVars = useMemo(() => {
+    const combined = [...requiredVars, ...optionalVars];
+
+    // Sort by status priority: errors first, then warnings, then valid
+    return combined.sort((a, b) => {
+      const priorityMap = {
+        "required_missing": 1,
+        "required_wrong_type": 2,
+        "required_wrong_value": 3,
+        "required_present": 4,
+        "optional_present": 5
+      };
+      return (priorityMap[a.status] || 999) - (priorityMap[b.status] || 999);
+    });
+  }, [requiredVars, optionalVars]);
+
+  // Filter variables based on active filter and search
+  const filteredVars = useMemo(() => {
+    let vars = [];
+    switch (activeFilter) {
+      case "all":
+        vars = allVars;
+        break;
+      case "missing":
+        vars = allVars.filter(v => v.status === "required_missing");
+        break;
+      case "issues":
+        vars = allVars.filter(v => v.status === "required_wrong_type" || v.status === "required_wrong_value");
+        break;
+    }
+
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      vars = vars.filter(v => v.key.toLowerCase().includes(query) || v.description?.toLowerCase().includes(query) || typeof v.value === 'string' && v.value.toLowerCase().includes(query));
+    }
+    return vars;
+  }, [allVars, optionalVars, activeFilter, searchQuery]);
+
+  // Calculate health percentage
+  const healthPercentage = stats.requiredCount > 0 ? Math.round(stats.presentRequiredCount / stats.requiredCount * 100) : 100;
+  const healthStatus = healthPercentage === 100 ? "HEALTHY" : healthPercentage >= 75 ? "WARNING" : healthPercentage >= 50 ? "ERROR" : "CRITICAL";
+  const healthColor = healthPercentage === 100 ? buoyColors.success : healthPercentage >= 75 ? buoyColors.warning : healthPercentage >= 50 ? buoyColors.error : buoyColors.error;
+  if (!visible) return null;
+  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.env.modal();
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: onBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: isSearchActive ? "" : "Environment Variables",
+          noMargin: isSearchActive,
+          children: isSearchActive && /*#__PURE__*/_jsxs(View, {
+            style: styles.headerSearchContainer,
+            children: [/*#__PURE__*/_jsx(Search, {
+              size: 12,
+              color: buoyColors.textSecondary
+            }), /*#__PURE__*/_jsx(TextInput, {
+              ref: searchInputRef,
+              style: styles.headerSearchInput,
+              placeholder: "Search env keys...",
+              placeholderTextColor: buoyColors.textMuted,
+              value: searchQuery,
+              onChangeText: setSearchQuery,
+              autoCorrect: false,
+              autoCapitalize: "none"
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => {
+                setIsSearchActive(false);
+                setSearchQuery("");
+              },
+              style: styles.clearButton,
+              children: /*#__PURE__*/_jsx(X, {
+                size: 12,
+                color: buoyColors.textSecondary
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+          children: !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
+            onPress: () => setIsSearchActive(true)
+          })
+        })]
+      }),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scrollContainer,
+      contentContainerStyle: styles.contentContainer,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/_jsx(EnvStatsOverview, {
+        stats: stats,
+        healthPercentage: healthPercentage,
+        healthStatus: healthStatus,
+        healthColor: healthColor,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter
+      }), filteredVars.length > 0 ? /*#__PURE__*/_jsxs(View, {
+        style: styles.varsSection,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.sectionHeader,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: activeFilter === "all" ? "ALL VARIABLES" : activeFilter === "missing" ? "MISSING VARIABLES" : "ISSUES TO FIX"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.countBadge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.countText,
+              children: filteredVars.length
+            })
+          })]
+        }), /*#__PURE__*/_jsx(EnvVarSection, {
+          title: "",
+          count: 0,
+          vars: filteredVars,
+          emptyMessage: ""
+        })]
+      }) : /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/_jsx(Search, {
+          size: 32,
+          color: buoyColors.textMuted
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyTitle,
+          children: searchQuery ? "No results found" : "No variables"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySubtitle,
+          children: searchQuery ? `No variables matching "${searchQuery}"` : `No ${activeFilter === "all" ? "" : activeFilter} variables found`
+        })]
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  scrollContainer: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  contentContainer: {
+    padding: 8,
+    paddingBottom: 24
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    backgroundColor: buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    marginHorizontal: 12,
+    marginVertical: 4,
+    height: 32,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  headerSearchInput: {
+    flex: 1,
+    marginLeft: 8,
+    fontSize: 13,
+    color: buoyColors.text,
+    padding: 0,
+    height: '100%'
+  },
+  clearButton: {
+    padding: 4,
+    marginLeft: 4
+  },
+  varsSection: {
+    marginTop: 16
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+    paddingHorizontal: 8
+  },
+  sectionTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.textMuted,
+    letterSpacing: 1.2,
+    fontFamily: "monospace"
+  },
+  countBadge: {
+    backgroundColor: buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "40"
+  },
+  countText: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: buoyColors.primary,
+    fontFamily: "monospace"
+  },
+  emptyState: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 48
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: buoyColors.text,
+    marginTop: 12,
+    marginBottom: 8
+  },
+  emptySubtitle: {
+    fontSize: 13,
+    color: buoyColors.textSecondary,
+    textAlign: "center"
+  }
+});

package/lib/module/env/hooks/useDynamicEnv.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { useMemo } from "react";
+/**
+ * Hook that returns all available environment variables with parsed values
+ * Includes all available environment variables by default (only EXPO_PUBLIC_ prefixed vars are loaded by Expo)
+ *
+ * @example
+ * // Get all available environment variables (only EXPO_PUBLIC_ prefixed)
+ * const envVars = useDynamicEnv();
+ * // Returns: [
+ * //   { key: 'EXPO_PUBLIC_API_URL', data: 'https://api.example.com' },
+ * //   { key: 'EXPO_PUBLIC_APP_NAME', data: 'MyApp' },
+ * //   ...
+ * // ]
+ *
+ * @example
+ * // Filter to specific variables
+ * const envVars = useDynamicEnv({
+ *   envFilter: (key) => key.includes('API') || key.includes('URL')
+ * });
+ *
+ * @example
+ * // Filter by value content
+ * const envVars = useDynamicEnv({
+ *   envFilter: (key, value) => value !== undefined && value.length > 0
+ * });
+ */
+export function useDynamicEnv({
+  envFilter = () => true // Default: include all available environment variables (EXPO_PUBLIC_ only)
+} = {}) {
+  // Helper function to get a single environment variable value
+  const getEnvValue = useMemo(() => {
+    return key => {
+      // @ts-ignore thhis does exist
+      const value = process.env[key];
+      if (value === undefined) {
+        return null;
+      }
+
+      // Try to parse as JSON for complex values, fall back to string
+      try {
+        // Only attempt JSON parsing if it looks like JSON (starts with { or [)
+        if (value.startsWith("{") || value.startsWith("[")) {
+          return JSON.parse(value);
+        }
+
+        // Parse boolean-like strings
+        if (value.toLowerCase() === "true") return true;
+        if (value.toLowerCase() === "false") return false;
+
+        // Parse number-like strings
+        if (/^\d+$/.test(value)) {
+          const num = parseInt(value, 10);
+          return !isNaN(num) ? num : value;
+        }
+        if (/^\d*\.\d+$/.test(value)) {
+          const num = parseFloat(value);
+          return !isNaN(num) ? num : value;
+        }
+        return value;
+      } catch {
+        return value;
+      }
+    };
+  }, []);
+
+  // Get all environment variables and process them
+  const envResults = useMemo(() => {
+    // @ts-ignore thhis does exist
+    const allEnvKeys = Object.keys(process.env);
+    const filteredKeys = allEnvKeys.filter(key => {
+      // @ts-ignore thhis does exist
+      const value = process.env[key];
+      return envFilter(key, value);
+    });
+    return filteredKeys.map(key => ({
+      key,
+      data: getEnvValue(key)
+    }));
+  }, [envFilter, getEnvValue]);
+  return envResults;
+}

package/lib/module/env/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./EnvVariables";

package/lib/module/env/types/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./types";
+export * from "./userTypes";

package/lib/module/env/types/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/module/env/types/userTypes.js

@@ -0,0 +1 @@
+"use strict";