@buoy-gg/env 1.7.2

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEnvVarConfig = createEnvVarConfig;
+exports.envVar = envVar;
+/**
+ * Helper to create a required env var configuration with type checking
+ *
+ * @example
+ * const config = envVar("EXPO_PUBLIC_API_URL")
+ *   .withType("string")
+ *   .withDescription("Backend API endpoint")
+ *   .build();
+ *
+ * @example
+ * const config = envVar("EXPO_PUBLIC_DEBUG_MODE")
+ *   .withDescription("Enable debug logging")
+ *   .withType("boolean")
+ *   .build();
+ */
+class EnvVarBuilder {
+  constructor(key) {
+    this.key = key;
+  }
+  /** Just check if the variable exists */
+  exists() {
+    return this.key;
+  }
+
+  /** Check for a specific value */
+  withValue(value) {
+    this.expectedValue = value;
+    delete this.expectedType; // Can't have both type and value
+    return this;
+  }
+
+  /** Check for a specific type */
+  withType(type) {
+    this.expectedType = type;
+    delete this.expectedValue; // Can't have both type and value
+    return this;
+  }
+
+  /** Add a description for documentation */
+  withDescription(desc) {
+    this.description = desc;
+    return this;
+  }
+
+  /** Build the final configuration */
+  build() {
+    if (this.expectedValue !== undefined) {
+      return this.description ? {
+        key: this.key,
+        expectedValue: this.expectedValue,
+        description: this.description
+      } : {
+        key: this.key,
+        expectedValue: this.expectedValue
+      };
+    }
+    if (this.expectedType !== undefined) {
+      return this.description ? {
+        key: this.key,
+        expectedType: this.expectedType,
+        description: this.description
+      } : {
+        key: this.key,
+        expectedType: this.expectedType
+      };
+    }
+
+    // If neither type nor value is specified, just check existence
+    return this.key;
+  }
+}
+
+/**
+ * Fluent builder for defining expected environment variables. Helps teams author readable
+ * `requiredEnvVars` arrays by chaining type/value/description requirements while keeping the
+ * final shape compatible with `EnvVarsModal` and related helpers.
+ *
+ * @param key - Environment variable name to validate.
+ * @returns Builder with convenience methods like `.withType()` and `.withValue()`.
+ */
+function envVar(key) {
+  return new EnvVarBuilder(key);
+}
+
+/**
+ * Normalizes `requiredEnvVars` definitions while documenting intent in code. The helper simply
+ * returns the provided array, but allows teams to co-locate examples and benefit from IDE hovers.
+ *
+ * @param vars - Collection of required environment variable definitions created manually or via `envVar()`.
+ * @returns The original array, unchanged, for ergonomic chaining and inference.
+ *
+ * @example
+ * const requiredEnvVars = createEnvVarConfig([
+ *   // Simple existence check
+ *   "EXPO_PUBLIC_API_URL",
+ *
+ *   // Type checking
+ *   { key: "EXPO_PUBLIC_DEBUG_MODE", expectedType: "boolean" },
+ *
+ *   // Value checking
+ *   { key: "EXPO_PUBLIC_ENVIRONMENT", expectedValue: "development" },
+ *
+ *   // With descriptions
+ *   envVar("EXPO_PUBLIC_MAX_RETRIES")
+ *     .withType("number")
+ *     .withDescription("Maximum number of API retry attempts")
+ *     .build(),
+ * ]);
+ */
+function createEnvVarConfig(vars) {
+  return vars;
+}

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

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

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processEnvVars = exports.calculateStats = void 0;
+var _envTypeDetector = require("./envTypeDetector");
+/**
+ * Combines the auto-detected runtime environment values with the declared `requiredEnvVars`
+ * configuration and produces categorized metadata for rendering in the UI.
+ *
+ * @param autoCollectedEnvVars - Values discovered via `useDynamicEnv` (key/value string map).
+ * @param requiredEnvVars - Optional list of required variables describing expectations to validate.
+ * @returns Required and optional variable collections annotated with validation status.
+ */
+const processEnvVars = (autoCollectedEnvVars, requiredEnvVars) => {
+  const requiredVarInfos = [];
+  const optionalVarInfos = [];
+  const processedKeys = new Set();
+
+  // Process required variables
+  requiredEnvVars?.forEach(envVar => {
+    const key = typeof envVar === "string" ? envVar : envVar.key;
+    const expectedValue = typeof envVar === "object" && "expectedValue" in envVar ? envVar.expectedValue : undefined;
+    const expectedType = typeof envVar === "object" && "expectedType" in envVar ? envVar.expectedType : undefined;
+    const description = typeof envVar === "object" && "description" in envVar ? envVar.description : undefined;
+    processedKeys.add(key);
+    const actualValue = autoCollectedEnvVars[key];
+    const isPresent = actualValue !== undefined;
+    let status;
+    if (!isPresent) {
+      status = "required_missing";
+    } else if (expectedValue) {
+      // Handle different expectedValue patterns
+      let valueMatches = false;
+      if (expectedValue === "sk_*") {
+        valueMatches = actualValue.startsWith("sk_");
+      } else if (expectedValue === "production or development") {
+        valueMatches = actualValue === "production" || actualValue === "development";
+      } else {
+        valueMatches = actualValue === expectedValue;
+      }
+      status = valueMatches ? "required_present" : "required_wrong_value";
+    } else if (expectedType && (0, _envTypeDetector.getEnvVarType)(actualValue).toLowerCase() !== expectedType.toLowerCase()) {
+      status = "required_wrong_type";
+    } else {
+      status = "required_present";
+    }
+    requiredVarInfos.push({
+      key,
+      value: actualValue,
+      expectedValue,
+      expectedType,
+      description,
+      status,
+      category: "required"
+    });
+  });
+
+  // Process optional variables (those that exist but aren't required)
+  Object.entries(autoCollectedEnvVars).forEach(([key, value]) => {
+    if (!processedKeys.has(key)) {
+      optionalVarInfos.push({
+        key,
+        value,
+        status: "optional_present",
+        category: "optional"
+      });
+    }
+  });
+
+  // Sort each category
+  requiredVarInfos.sort((a, b) => {
+    const statusOrder = {
+      required_missing: 0,
+      required_wrong_value: 1,
+      required_wrong_type: 2,
+      required_present: 3,
+      optional_present: 4
+    };
+    if (statusOrder[a.status] !== statusOrder[b.status]) {
+      return statusOrder[a.status] - statusOrder[b.status];
+    }
+    return a.key.localeCompare(b.key);
+  });
+  optionalVarInfos.sort((a, b) => a.key.localeCompare(b.key));
+  return {
+    requiredVars: requiredVarInfos,
+    optionalVars: optionalVarInfos
+  };
+};
+
+/**
+ * Derives aggregate statistics from the processed environment variable lists for health badges
+ * and summary chips in the modal UI.
+ *
+ * @param requiredVars - Processed required variables with validation state.
+ * @param optionalVars - Processed optional variables discovered at runtime.
+ * @param totalEnvVars - Raw key/value map of every detected environment variable.
+ * @returns Counts related to overall env health for display purposes.
+ */
+exports.processEnvVars = processEnvVars;
+const calculateStats = (requiredVars, optionalVars, totalEnvVars) => {
+  const totalCount = Object.keys(totalEnvVars).length;
+  const requiredCount = requiredVars.length;
+  const missingCount = requiredVars.filter(v => v.status === "required_missing").length;
+  const wrongValueCount = requiredVars.filter(v => v.status === "required_wrong_value").length;
+  const wrongTypeCount = requiredVars.filter(v => v.status === "required_wrong_type").length;
+  const presentRequiredCount = requiredVars.filter(v => v.status === "required_present").length;
+  const optionalCount = optionalVars.length;
+  return {
+    totalCount,
+    requiredCount,
+    missingCount,
+    wrongValueCount,
+    wrongTypeCount,
+    presentRequiredCount,
+    optionalCount
+  };
+};
+exports.calculateStats = calculateStats;

package/lib/commonjs/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  envToolPreset: true,
+  createEnvTool: true,
+  EnvVarsModal: true
+};
+Object.defineProperty(exports, "EnvVarsModal", {
+  enumerable: true,
+  get: function () {
+    return _EnvVarsModal.EnvVarsModal;
+  }
+});
+Object.defineProperty(exports, "createEnvTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createEnvTool;
+  }
+});
+Object.defineProperty(exports, "envToolPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.envToolPreset;
+  }
+});
+var _preset = require("./preset");
+var _EnvVarsModal = require("./env/components/EnvVarsModal");
+var _types = require("./env/types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _utils = require("./env/utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/commonjs/preset.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEnvTool = createEnvTool;
+exports.envToolPreset = void 0;
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _EnvVarsModal = require("./env/components/EnvVarsModal");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Pre-configured environment variables tool for FloatingDevTools
+ *
+ * This preset provides a zero-config way to add env var inspection to your dev tools.
+ * Just import and add it to your apps array!
+ *
+ * @example
+ * ```tsx
+ * import { envToolPreset } from '@buoy-gg/env';
+ *
+ * const installedApps = [
+ *   envToolPreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+
+/**
+ * Pre-configured environment variables tool for FloatingDevTools.
+ * Includes:
+ * - Automatic env var discovery
+ * - Required variable validation
+ * - Search and filtering
+ * - Copy functionality
+ */
+const envToolPreset = exports.envToolPreset = {
+  id: "env",
+  name: "ENV",
+  description: "Environment variables debugger",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+    size: size
+  }),
+  component: _EnvVarsModal.EnvVarsModal,
+  props: {
+    requiredEnvVars: [],
+    enableSharedModalDimensions: true
+  }
+};
+
+/**
+ * Create a custom environment variables tool configuration.
+ * Use this if you want to override default settings or provide required env vars.
+ *
+ * @example
+ * ```tsx
+ * import { createEnvTool, envVar, createEnvVarConfig } from '@buoy-gg/env';
+ *
+ * const requiredEnvVars = createEnvVarConfig([
+ *   envVar("EXPO_PUBLIC_API_URL").exists(),
+ *   envVar("EXPO_PUBLIC_DEBUG_MODE").withType("boolean").build(),
+ * ]);
+ *
+ * const myEnvTool = createEnvTool({
+ *   requiredEnvVars,
+ *   colorPreset: "cyan",
+ *   enableSharedModalDimensions: true,
+ * });
+ * ```
+ */
+function createEnvTool(options) {
+  return {
+    id: options?.id || "env",
+    name: options?.name || "ENV",
+    description: options?.description || "Environment variables debugger",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EnvIcon, {
+      size: size
+    }),
+    component: _EnvVarsModal.EnvVarsModal,
+    props: {
+      requiredEnvVars: options?.requiredEnvVars || [],
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : true
+    }
+  };
+}

package/lib/module/env/EnvVariables.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Main entry point for the Environment Variables feature
+ * This component orchestrates all env-related functionality
+ */
+
+// Re-export only the public APIs that are actually used
+
+export { envVar, createEnvVarConfig } from "./utils/helpers";
+export { EnvVarsModal } from "./components/EnvVarsModal";

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

@@ -0,0 +1,130 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { CompactRow, buoyColors } from "@buoy-gg/shared-ui";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function EnvStatsOverview({
+  stats,
+  healthPercentage,
+  healthStatus,
+  healthColor,
+  activeFilter = "all",
+  onFilterChange
+}) {
+  const issuesCount = stats.wrongValueCount + stats.wrongTypeCount;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(CompactRow, {
+      statusDotColor: healthColor,
+      statusLabel: "System",
+      statusSublabel: healthStatus.toLowerCase(),
+      primaryText: "Environment Configuration",
+      secondaryText: `${healthPercentage}% healthy`,
+      customBadge: /*#__PURE__*/_jsx(View, {
+        style: [styles.percentBadge, {
+          borderColor: healthColor + "40",
+          backgroundColor: healthColor + "10"
+        }],
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: [styles.percentText, {
+            color: healthColor
+          }],
+          children: [healthPercentage, "%"]
+        })
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.statsGrid,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.statCard, activeFilter === "all" && styles.statCardActive],
+        onPress: () => onFilterChange?.("all"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.statValue, activeFilter === "all" && styles.statValueActive],
+          children: stats.requiredCount + stats.optionalCount
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.statLabel, activeFilter === "all" && styles.statLabelActive],
+          children: "ALL"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.statCard, activeFilter === "missing" && styles.statCardActive],
+        onPress: () => onFilterChange?.("missing"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.statValue, activeFilter === "missing" && styles.statValueActive],
+          children: stats.missingCount
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.statLabel, activeFilter === "missing" && styles.statLabelActive],
+          children: "MISSING"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.statCard, activeFilter === "issues" && styles.statCardActive],
+        onPress: () => onFilterChange?.("issues"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.statValue, activeFilter === "issues" && styles.statValueActive],
+          children: issuesCount
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.statLabel, activeFilter === "issues" && styles.statLabelActive],
+          children: "ISSUES"
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    gap: 8
+  },
+  statsGrid: {
+    flexDirection: "row",
+    gap: 8,
+    paddingHorizontal: 4
+  },
+  statCard: {
+    flex: 1,
+    backgroundColor: buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 64
+  },
+  statCardActive: {
+    borderColor: buoyColors.primary,
+    backgroundColor: buoyColors.primary + "10"
+  },
+  statValue: {
+    fontSize: 22,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    lineHeight: 26,
+    color: buoyColors.text
+  },
+  statValueActive: {
+    color: buoyColors.primary
+  },
+  statLabel: {
+    fontSize: 9,
+    color: buoyColors.textMuted,
+    marginTop: 4,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    fontWeight: "600"
+  },
+  statLabelActive: {
+    color: buoyColors.primary
+  },
+  percentBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  percentText: {
+    fontSize: 14,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  }
+});