@buoy-gg/env 7.0.33 → 7.0.34

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

@@ -139,44 +139,24 @@ function EnvVarsModal({
     }), /*#__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: isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+        value: searchQuery,
+        onChangeText: setSearchQuery,
+        onCancel: () => {
+          setIsSearchActive(false);
+          setSearchQuery("");
+        },
+        placeholder: "Search env keys...",
+        accessibilityLabel: "Search env keys",
+        testID: "buoy-env-search"
         // The field itself is a handle Detox can use but XCUITest
         // cannot: on this RN version a TextInput's testID never
         // reaches the XCUITest element tree — iOS folds the input
-        // into the header's accessibility container (the same is
-        // true of the network and storage search fields). This
-        // wrapper is the handle the a11y lane can actually see.
+        // into the header's accessibility container. This wrapper
+        // handle is the one the a11y lane can actually see.
         ,
-        testID: "buoy-env-search-field",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-          size: 12,
-          color: _sharedUi.night.color.textSecondary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          ref: searchInputRef,
-          style: styles.headerSearchInput,
-          placeholder: "Search env keys...",
-          placeholderTextColor: _sharedUi.night.color.placeholder,
-          value: searchQuery,
-          onChangeText: setSearchQuery,
-          autoCorrect: false,
-          autoCapitalize: "none",
-          testID: "buoy-env-search",
-          accessibilityLabel: "Search env keys"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => {
-            setIsSearchActive(false);
-            setSearchQuery("");
-          },
-          style: styles.clearButton,
-          testID: "buoy-env-search-clear",
-          accessibilityRole: "button",
-          accessibilityLabel: "Clear search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-            size: 12,
-            color: _sharedUi.night.color.textSecondary
-          })
-        })]
+        containerTestID: "buoy-env-search-field",
+        clearTestID: "buoy-env-search-clear"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
       children: !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HeaderSearchButton, {
@@ -308,32 +288,6 @@ const styles = _reactNative.StyleSheet.create({
     padding: 8,
     paddingBottom: 24
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    marginHorizontal: 12,
-    marginVertical: 4,
-    height: 32,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border
-  },
-  headerSearchInput: {
-    flex: 1,
-    marginLeft: 8,
-    fontSize: 13,
-    color: _sharedUi.night.color.text,
-    padding: 0,
-    height: '100%'
-  },
-  clearButton: {
-    padding: 4,
-    marginLeft: 4
-  },
   varsSection: {
     marginTop: 16
   },

package/lib/commonjs/preset.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createEnvTool = createEnvTool;
-exports.envToolPreset = void 0;
+exports.envToolPreset = exports.createEnvTool = void 0;
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _EnvVarsModal = require("./env/components/EnvVarsModal");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured environment variables tool for FloatingDevTools
@@ -33,7 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Search and filtering
  * - Copy functionality
  */
-const envToolPreset = exports.envToolPreset = {
+const envToolPreset = exports.envToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "env",
   name: "ENV",
   description: "Environment variables debugger",
@@ -48,7 +48,7 @@ const envToolPreset = exports.envToolPreset = {
     requiredEnvVars: [],
     enableSharedModalDimensions: true
   }
-};
+});
 
 /**
  * Create a custom environment variables tool configuration.
@@ -70,21 +70,7 @@ const envToolPreset = exports.envToolPreset = {
  * });
  * ```
  */
-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
-    }
-  };
-}
+const createEnvTool = exports.createEnvTool = (0, _sharedUi.createToolFactory)(envToolPreset, options => ({
+  requiredEnvVars: options.requiredEnvVars || [],
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? true
+}));

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

@@ -1,8 +1,8 @@
 "use strict";
 
-import { JsModal, devToolsStorageKeys, ModalHeader, HeaderSearchButton, Search, X, displayValue, buoyColors, night, windowDragProps, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
+import { JsModal, devToolsStorageKeys, ModalHeader, HeaderSearchButton, displayValue, buoyColors, night, windowDragProps, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
 import { useCallback, useState, useRef, useEffect, useMemo } from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet, ScrollView, Text } from "react-native";
+import { View, StyleSheet, ScrollView, Text } from "react-native";
 import { EnvStatsOverview } from "./EnvStatsOverview";
 import { useDynamicEnv } from "../hooks/useDynamicEnv";
 import { processEnvVars, calculateStats } from "../utils";
@@ -134,44 +134,24 @@ export function EnvVarsModal({
     }), /*#__PURE__*/_jsx(ModalHeader.Content, {
       title: isSearchActive ? "" : "Environment Variables",
       noMargin: isSearchActive,
-      children: isSearchActive && /*#__PURE__*/_jsxs(View, {
-        style: styles.headerSearchContainer
+      children: isSearchActive && /*#__PURE__*/_jsx(ModalHeader.Search, {
+        value: searchQuery,
+        onChangeText: setSearchQuery,
+        onCancel: () => {
+          setIsSearchActive(false);
+          setSearchQuery("");
+        },
+        placeholder: "Search env keys...",
+        accessibilityLabel: "Search env keys",
+        testID: "buoy-env-search"
         // The field itself is a handle Detox can use but XCUITest
         // cannot: on this RN version a TextInput's testID never
         // reaches the XCUITest element tree — iOS folds the input
-        // into the header's accessibility container (the same is
-        // true of the network and storage search fields). This
-        // wrapper is the handle the a11y lane can actually see.
+        // into the header's accessibility container. This wrapper
+        // handle is the one the a11y lane can actually see.
         ,
-        testID: "buoy-env-search-field",
-        children: [/*#__PURE__*/_jsx(Search, {
-          size: 12,
-          color: night.color.textSecondary
-        }), /*#__PURE__*/_jsx(TextInput, {
-          ref: searchInputRef,
-          style: styles.headerSearchInput,
-          placeholder: "Search env keys...",
-          placeholderTextColor: night.color.placeholder,
-          value: searchQuery,
-          onChangeText: setSearchQuery,
-          autoCorrect: false,
-          autoCapitalize: "none",
-          testID: "buoy-env-search",
-          accessibilityLabel: "Search env keys"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => {
-            setIsSearchActive(false);
-            setSearchQuery("");
-          },
-          style: styles.clearButton,
-          testID: "buoy-env-search-clear",
-          accessibilityRole: "button",
-          accessibilityLabel: "Clear search",
-          children: /*#__PURE__*/_jsx(X, {
-            size: 12,
-            color: night.color.textSecondary
-          })
-        })]
+        containerTestID: "buoy-env-search-field",
+        clearTestID: "buoy-env-search-clear"
       })
     }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
       children: !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
@@ -303,32 +283,6 @@ const styles = StyleSheet.create({
     padding: 8,
     paddingBottom: 24
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    marginHorizontal: 12,
-    marginVertical: 4,
-    height: 32,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  headerSearchInput: {
-    flex: 1,
-    marginLeft: 8,
-    fontSize: 13,
-    color: night.color.text,
-    padding: 0,
-    height: '100%'
-  },
-  clearButton: {
-    padding: 4,
-    marginLeft: 4
-  },
   varsSection: {
     marginTop: 16
   },

package/lib/module/preset.js

@@ -19,7 +19,8 @@
 
 import { EnvIcon } from "@buoy-gg/floating-tools-core";
 import { EnvVarsModal } from "./env/components/EnvVarsModal";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { createToolFactory, defineToolPreset } from "@buoy-gg/shared-ui";
+
 /**
  * Pre-configured environment variables tool for FloatingDevTools.
  * Includes:
@@ -28,7 +29,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - Search and filtering
  * - Copy functionality
  */
-export const envToolPreset = {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const envToolPreset = defineToolPreset({
   id: "env",
   name: "ENV",
   description: "Environment variables debugger",
@@ -43,7 +45,7 @@ export const envToolPreset = {
     requiredEnvVars: [],
     enableSharedModalDimensions: true
   }
-};
+});
 
 /**
  * Create a custom environment variables tool configuration.
@@ -65,21 +67,7 @@ export const envToolPreset = {
  * });
  * ```
  */
-export function createEnvTool(options) {
-  return {
-    id: options?.id || "env",
-    name: options?.name || "ENV",
-    description: options?.description || "Environment variables debugger",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(EnvIcon, {
-      size: size
-    }),
-    component: EnvVarsModal,
-    props: {
-      requiredEnvVars: options?.requiredEnvVars || [],
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : true
-    }
-  };
-}
+export const createEnvTool = createToolFactory(envToolPreset, options => ({
+  requiredEnvVars: options.requiredEnvVars || [],
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? true
+}));

package/lib/typescript/env/components/EnvVarsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvVarsModal.d.ts","sourceRoot":"","sources":["../../../../src/env/components/EnvVarsModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,cAAc,EAAc,MAAM,UAAU,CAAC;AAUtD,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qFAAqF;IACrF,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,GACf,EAAE,iBAAiB,sCA2RnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,+BASA"}
+{"version":3,"file":"EnvVarsModal.d.ts","sourceRoot":"","sources":["../../../../src/env/components/EnvVarsModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,cAAc,EAAc,MAAM,UAAU,CAAC;AAUtD,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qFAAqF;IACrF,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,GACf,EAAE,iBAAiB,sCAyQnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,+BASA"}

package/lib/typescript/preset.d.ts

@@ -58,18 +58,12 @@ export declare const envToolPreset: {
  * });
  * ```
  */
-export declare function createEnvTool(options?: {
-    /** Tool name (default: "ENV") */
-    name?: string;
-    /** Tool description */
-    description?: string;
-    /** Custom tool ID (default: "env") */
-    id?: string;
+export declare const createEnvTool: (options?: ({
     /** Array of required environment variables to validate */
     requiredEnvVars?: RequiredEnvVar[];
     /** Enable shared modal dimensions */
     enableSharedModalDimensions?: boolean;
-}): {
+} & import("@buoy-gg/shared-ui").ToolPresetOverrides) | undefined) => {
     id: string;
     name: string;
     description: string;

package/lib/typescript/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;;;;;qBAKP;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;yBAGR,cAAc,EAAE;;;CAG1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,qCAAqC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;;;;;qBAOoB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;;EASpC"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;;;;;qBAKP;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;yBAGR,cAAc,EAAE;;;CAGzC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa;IAGtB,0DAA0D;sBACxC,cAAc,EAAE;IAClC,qCAAqC;kCACP,OAAO;;;;;;qBAlCtB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;yBAGR,cAAc,EAAE;;;CAoC1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/env",
-  "version": "7.0.33",
+  "version": "7.0.34",
   "description": "Environment variable devtool for React Native — auto-discovers EXPO_PUBLIC_ vars, validates types, scores config health. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "^7.0.33",
-    "@buoy-gg/shared-ui": "^7.0.33"
+    "@buoy-gg/floating-tools-core": "^7.0.34",
+    "@buoy-gg/shared-ui": "^7.0.34"
   },
   "peerDependencies": {
     "react": "*",