@buoy-gg/env 1.7.2

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

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

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

@@ -0,0 +1,315 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnvVarsModal = EnvVarsModal;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _EnvStatsOverview = require("./EnvStatsOverview");
+var _useDynamicEnv = require("../hooks/useDynamicEnv");
+var _utils = require("../utils");
+var _EnvVarSection = require("./EnvVarSection");
+var _jsxRuntime = require("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.
+ */
+function EnvVarsModal({
+  visible,
+  onClose,
+  requiredEnvVars,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const [activeFilter, setActiveFilter] = (0, _react.useState)("all");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, _react.useState)("");
+  const searchInputRef = (0, _react.useRef)(null);
+  const handleModeChange = (0, _react.useCallback)(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+
+  // Focus search input when search becomes active
+  (0, _react.useEffect)(() => {
+    if (isSearchActive && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchActive]);
+
+  // Clear search when changing filters
+  (0, _react.useEffect)(() => {
+    setSearchQuery("");
+    setIsSearchActive(false);
+  }, [activeFilter]);
+
+  // Auto-collect environment variables
+  const envResults = (0, _useDynamicEnv.useDynamicEnv)();
+  const autoCollectedEnvVars = (0, _react.useMemo)(() => {
+    const envVars = {};
+    envResults.forEach(({
+      key,
+      data
+    }) => {
+      if (data !== undefined && data !== null) {
+        envVars[key] = typeof data === "string" ? data : (0, _sharedUi.displayValue)(data);
+      }
+    });
+    return envVars;
+  }, [envResults]);
+
+  // Process and categorize environment variables
+  const {
+    requiredVars,
+    optionalVars
+  } = (0, _react.useMemo)(() => {
+    return (0, _utils.processEnvVars)(autoCollectedEnvVars, requiredEnvVars);
+  }, [autoCollectedEnvVars, requiredEnvVars]);
+
+  // Calculate statistics
+  const stats = (0, _react.useMemo)(() => {
+    if (requiredEnvVars === undefined) {
+      return {
+        totalCount: 0,
+        requiredCount: 0,
+        optionalCount: 0,
+        presentRequiredCount: 0,
+        missingCount: 0,
+        wrongValueCount: 0,
+        wrongTypeCount: 0
+      };
+    }
+    return (0, _utils.calculateStats)(requiredVars, optionalVars, autoCollectedEnvVars);
+  }, [requiredEnvVars, requiredVars, optionalVars, autoCollectedEnvVars]);
+
+  // Combine all vars and sort by priority (issues first)
+  const allVars = (0, _react.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 = (0, _react.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 ? _sharedUi.buoyColors.success : healthPercentage >= 75 ? _sharedUi.buoyColors.warning : healthPercentage >= 50 ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.error;
+  if (!visible) return null;
+  const storagePrefix = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.env.modal();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    persistenceKey: storagePrefix,
+    header: {
+      customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: onBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: isSearchActive ? "" : "Environment Variables",
+          noMargin: isSearchActive,
+          children: isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.headerSearchContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+              size: 12,
+              color: _sharedUi.buoyColors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+              ref: searchInputRef,
+              style: styles.headerSearchInput,
+              placeholder: "Search env keys...",
+              placeholderTextColor: _sharedUi.buoyColors.textMuted,
+              value: searchQuery,
+              onChangeText: setSearchQuery,
+              autoCorrect: false,
+              autoCapitalize: "none"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              onPress: () => {
+                setIsSearchActive(false);
+                setSearchQuery("");
+              },
+              style: styles.clearButton,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+                size: 12,
+                color: _sharedUi.buoyColors.textSecondary
+              })
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+          children: !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HeaderSearchButton, {
+            onPress: () => setIsSearchActive(true)
+          })
+        })]
+      }),
+      showToggleButton: true
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.scrollContainer,
+      contentContainerStyle: styles.contentContainer,
+      showsVerticalScrollIndicator: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EnvStatsOverview.EnvStatsOverview, {
+        stats: stats,
+        healthPercentage: healthPercentage,
+        healthStatus: healthStatus,
+        healthColor: healthColor,
+        activeFilter: activeFilter,
+        onFilterChange: setActiveFilter
+      }), filteredVars.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.varsSection,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.sectionHeader,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionTitle,
+            children: activeFilter === "all" ? "ALL VARIABLES" : activeFilter === "missing" ? "MISSING VARIABLES" : "ISSUES TO FIX"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.countBadge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.countText,
+              children: filteredVars.length
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EnvVarSection.EnvVarSection, {
+          title: "",
+          count: 0,
+          vars: filteredVars,
+          emptyMessage: ""
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+          size: 32,
+          color: _sharedUi.buoyColors.textMuted
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyTitle,
+          children: searchQuery ? "No results found" : "No variables"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptySubtitle,
+          children: searchQuery ? `No variables matching "${searchQuery}"` : `No ${activeFilter === "all" ? "" : activeFilter} variables found`
+        })]
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  scrollContainer: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  contentContainer: {
+    padding: 8,
+    paddingBottom: 24
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    marginHorizontal: 12,
+    marginVertical: 4,
+    height: 32,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  headerSearchInput: {
+    flex: 1,
+    marginLeft: 8,
+    fontSize: 13,
+    color: _sharedUi.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: _sharedUi.buoyColors.textMuted,
+    letterSpacing: 1.2,
+    fontFamily: "monospace"
+  },
+  countBadge: {
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "40"
+  },
+  countText: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: _sharedUi.buoyColors.primary,
+    fontFamily: "monospace"
+  },
+  emptyState: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 48
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    marginTop: 12,
+    marginBottom: 8
+  },
+  emptySubtitle: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary,
+    textAlign: "center"
+  }
+});

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDynamicEnv = useDynamicEnv;
+var _react = require("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
+ * });
+ */
+function useDynamicEnv({
+  envFilter = () => true // Default: include all available environment variables (EXPO_PUBLIC_ only)
+} = {}) {
+  // Helper function to get a single environment variable value
+  const getEnvValue = (0, _react.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 = (0, _react.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/commonjs/env/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _EnvVariables = require("./EnvVariables");
+Object.keys(_EnvVariables).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EnvVariables[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EnvVariables[key];
+    }
+  });
+});

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _userTypes = require("./userTypes");
+Object.keys(_userTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _userTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _userTypes[key];
+    }
+  });
+});

package/lib/commonjs/env/types/types.js

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

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

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

package/lib/commonjs/env/utils/envTypeDetector.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEnvVarType = getEnvVarType;
+/**
+ * Detects the type of an environment variable value
+ * First checks if useDynamicEnv already parsed it to the correct type,
+ * then analyzes string content to detect what type it represents
+ *
+ * @returns One of: "string", "number", "boolean", "array", "object"
+ */
+function getEnvVarType(value) {
+  // Check the actual parsed value type from useDynamicEnv
+  const type = typeof value;
+  if (type === "boolean") return "boolean";
+  if (type === "number") return "number";
+  if (Array.isArray(value)) return "array";
+  if (type === "object" && value !== null) return "object";
+
+  // For strings, check if they look like other types
+  if (type === "string") {
+    const strValue = value;
+
+    // Check if it looks like JSON
+    if (strValue.startsWith("{") && strValue.endsWith("}") || strValue.startsWith("[") && strValue.endsWith("]")) {
+      try {
+        const parsed = JSON.parse(strValue);
+        return Array.isArray(parsed) ? "array" : "object";
+      } catch {
+        return "string";
+      }
+    }
+
+    // Check if it's a boolean string
+    const lowerStr = strValue.toLowerCase();
+    if (lowerStr === "true" || lowerStr === "false" || lowerStr === "enabled" || lowerStr === "disabled" || lowerStr === "yes" || lowerStr === "no" || lowerStr === "on" || lowerStr === "off") {
+      return "boolean";
+    }
+
+    // Check if it's a number string (including 1 and 0 as numbers, not booleans)
+    if (!isNaN(Number(strValue)) && strValue.trim() !== "") {
+      return "number";
+    }
+
+    // Check if it's a URL
+    if (strValue.startsWith("http://") || strValue.startsWith("https://")) {
+      return "url";
+    }
+
+    // Check if it's a comma-separated array
+    if (strValue.includes(",")) {
+      return "array";
+    }
+    return "string";
+  }
+  return "unknown";
+}