@buoy-gg/impersonate 1.0.3-beta.0

package/lib/module/impersonate/components/ImpersonateBanner.js

@@ -0,0 +1,211 @@
+"use strict";
+
+/**
+ * ImpersonateBanner Component
+ *
+ * A floating banner that shows when impersonation is active.
+ * Features polished design with avatar and elegant animations.
+ * Can be positioned at top or bottom of the screen.
+ */
+
+import React, { useSyncExternalStore } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { buoyColors, X, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { impersonateStore } from "../utils/impersonateStore";
+import { UserAvatar } from "./UserAvatar";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Floating banner showing impersonation status
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <>
+ *       <MainContent />
+ *       <ImpersonateBanner
+ *         position="top"
+ *         offset={60}
+ *         onPress={() => openImpersonateModal()}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function ImpersonateBanner({
+  onPress,
+  onStopPress,
+  position = "top",
+  offset = 50
+}) {
+  const state = useSyncExternalStore(impersonateStore.subscribe, impersonateStore.getSnapshot, impersonateStore.getSnapshot);
+
+  // Don't render if not impersonating or banner is disabled
+  if (!state.isActive || !state.currentUser || !state.showBanner) {
+    return null;
+  }
+  const handlePauseResume = async () => {
+    if (state.isPaused) {
+      await impersonateStore.resumeImpersonation();
+    } else {
+      await impersonateStore.pauseImpersonation();
+    }
+  };
+  const displayName = state.currentUser.displayName || state.currentUser.email || state.currentUser.id;
+  const positionStyle = position === "top" ? {
+    top: offset
+  } : {
+    bottom: offset
+  };
+  const handleStop = async () => {
+    await impersonateStore.stopImpersonation();
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, positionStyle],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.banner,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.userSection,
+        onPress: onPress,
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/_jsx(UserAvatar, {
+          userId: state.currentUser.id,
+          name: displayName,
+          size: "small",
+          showActiveIndicator: false
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.userName, state.isPaused && styles.userNamePaused],
+          numberOfLines: 1,
+          children: displayName
+        })]
+      }), /*#__PURE__*/_jsx(PowerToggleButton, {
+        isEnabled: !state.isPaused,
+        onToggle: handlePauseResume,
+        size: "small",
+        accessibilityLabel: "Toggle impersonation"
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: handleStop,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(X, {
+          size: 12,
+          color: "rgba(255, 255, 255, 0.5)"
+        })
+      })]
+    })
+  });
+}
+
+/**
+ * Minimal banner variant - just an indicator badge
+ */
+export function ImpersonateBannerMinimal({
+  onPress
+}) {
+  const state = useSyncExternalStore(impersonateStore.subscribe, impersonateStore.getSnapshot, impersonateStore.getSnapshot);
+  if (!state.isActive || !state.currentUser) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: styles.minimalBanner,
+    onPress: onPress,
+    activeOpacity: 0.8,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.minimalDot
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.minimalText,
+      children: "IMP"
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    zIndex: 9999,
+    pointerEvents: "box-none"
+  },
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(20, 20, 20, 0.94)",
+    borderWidth: 1,
+    borderColor: buoyColors.success + "40",
+    borderRadius: 22,
+    paddingVertical: 7,
+    paddingLeft: 7,
+    paddingRight: 10,
+    gap: 10,
+    marginTop: 3,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 14,
+    elevation: 10
+  },
+  userSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  userName: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#fff",
+    maxWidth: 180
+  },
+  userNamePaused: {
+    opacity: 0.6
+  },
+  closeButton: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: -4
+  },
+  // Minimal variant
+  minimalBanner: {
+    position: "absolute",
+    top: 60,
+    right: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(26, 26, 26, 0.92)",
+    borderWidth: 1,
+    borderColor: buoyColors.success + "35",
+    borderRadius: 12,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    gap: 5,
+    zIndex: 9999,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    elevation: 4
+  },
+  minimalDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: buoyColors.success
+  },
+  minimalText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.success,
+    letterSpacing: 0.5
+  }
+});

package/lib/module/impersonate/components/ImpersonateHistoryList.js

@@ -0,0 +1,168 @@
+"use strict";
+
+/**
+ * ImpersonateHistoryList Component
+ *
+ * List of recently impersonated users for quick switching.
+ * Uses polished UserCard component for consistent styling.
+ */
+
+import React, { useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, FlatList } from "react-native";
+import { buoyColors, Clock, Trash2, formatRelativeTime } from "@buoy-gg/shared-ui";
+import { UserCard } from "./UserCard";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ImpersonateHistoryList({
+  history,
+  currentUserId,
+  onSelectUser,
+  onStopImpersonation,
+  onRemoveFromHistory,
+  onClearHistory
+}) {
+  const renderHistoryItem = useCallback(({
+    item
+  }) => {
+    const {
+      user,
+      lastUsedAt
+    } = item;
+    const isActive = currentUserId === user.id;
+    return /*#__PURE__*/_jsx(UserCard, {
+      user: user,
+      isActive: isActive,
+      onPress: () => !isActive && onSelectUser(user),
+      onStop: isActive ? onStopImpersonation : undefined,
+      onRemove: onRemoveFromHistory ? () => onRemoveFromHistory(user.id) : undefined,
+      showRemoveButton: !!onRemoveFromHistory,
+      lastUsedTime: formatRelativeTime(new Date(lastUsedAt))
+    });
+  }, [currentUserId, onSelectUser, onStopImpersonation, onRemoveFromHistory]);
+  if (history.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.emptyIcon,
+        children: /*#__PURE__*/_jsx(Clock, {
+          size: 28,
+          color: buoyColors.textMuted
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyTitle,
+        children: "No History"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyDescription,
+        children: "Users you impersonate will appear here for quick access"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        children: "Recent"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.headerBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.headerBadgeText,
+          children: history.length
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.headerSpacer
+      }), onClearHistory && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.clearButton,
+        onPress: onClearHistory,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Trash2, {
+          size: 12,
+          color: buoyColors.textMuted
+        })
+      })]
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: history,
+      keyExtractor: item => item.user.id,
+      renderItem: renderHistoryItem,
+      ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
+        style: styles.separator
+      }),
+      contentContainerStyle: styles.listContent,
+      showsVerticalScrollIndicator: false
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    gap: 8
+  },
+  headerTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  headerBadge: {
+    backgroundColor: buoyColors.hover,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  headerBadgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: buoyColors.textMuted
+  },
+  headerSpacer: {
+    flex: 1
+  },
+  clearButton: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: buoyColors.hover,
+    borderRadius: 4
+  },
+  listContent: {
+    paddingBottom: 20
+  },
+  separator: {
+    height: 8
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+    paddingVertical: 48
+  },
+  emptyIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: buoyColors.text,
+    marginBottom: 6
+  },
+  emptyDescription: {
+    fontSize: 14,
+    color: buoyColors.textSecondary,
+    textAlign: "center"
+  }
+});

package/lib/module/impersonate/components/ImpersonateModal.js

@@ -0,0 +1,300 @@
+"use strict";
+
+/**
+ * ImpersonateModal Component
+ *
+ * Main modal for the impersonation tool. Uses JsModal with ModalHeader
+ * pattern matching other Buoy dev tools (Network, Storage, etc.).
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { View, StyleSheet, TouchableOpacity, TextInput } from "react-native";
+import { JsModal as JsModalBase, TabSelector, ModalHeader, macOSColors, Search, X } from "@buoy-gg/shared-ui";
+import { useImpersonate } from "../hooks/useImpersonate";
+import { useAutoClearReactQuery } from "../hooks/useAutoClearReactQuery";
+import { useAutoClearRedux } from "../hooks/useAutoClearRedux";
+import { useAutoClearAsyncStorage } from "../hooks/useAutoClearAsyncStorage";
+import { UserSearchView } from "./UserSearchView";
+import { ImpersonateHistoryList } from "./ImpersonateHistoryList";
+import { DataNukeSettings as DataNukeSettingsComponent } from "./DataNukeSettings";
+
+// Type assertion to work around React types compatibility issue with memo components
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const JsModal = JsModalBase;
+
+// Local Tab type (matches shared-ui's TabSelector)
+
+const ALL_TABS = [{
+  key: "search",
+  label: "Search"
+}, {
+  key: "history",
+  label: "History"
+}, {
+  key: "settings",
+  label: "Settings"
+}];
+const TABS_WITHOUT_SETTINGS = [{
+  key: "search",
+  label: "Search"
+}, {
+  key: "history",
+  label: "History"
+}];
+export function ImpersonateModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  onSearchUsers,
+  onClearReactQuery,
+  onClearRedux,
+  onClearAsyncStorage,
+  onClearMMKV,
+  showSettingsTab = true
+}) {
+  // Select tabs based on showSettingsTab prop
+  const tabs = showSettingsTab ? ALL_TABS : TABS_WITHOUT_SETTINGS;
+  const [activeTab, setActiveTab] = useState("search");
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const searchInputRef = useRef(null);
+
+  // Auto-detect React Query and get clear function if user didn't provide one
+  const {
+    clearCache: autoClearReactQuery,
+    isAvailable: isReactQueryDetected
+  } = useAutoClearReactQuery();
+
+  // Auto-detect Redux and get reset function if user didn't provide one
+  const {
+    resetStore: autoClearRedux,
+    isAvailable: isReduxDetected
+  } = useAutoClearRedux();
+
+  // Auto-detect AsyncStorage and get clear function if user didn't provide one
+  const {
+    clearStorage: autoClearAsyncStorage,
+    isAvailable: isAsyncStorageDetected
+  } = useAutoClearAsyncStorage();
+
+  // Use user-provided callbacks, or fall back to auto-detected ones
+  const effectiveClearReactQuery = onClearReactQuery ?? autoClearReactQuery ?? undefined;
+  const effectiveClearRedux = onClearRedux ?? autoClearRedux ?? undefined;
+  const effectiveClearAsyncStorage = onClearAsyncStorage ?? autoClearAsyncStorage ?? undefined;
+
+  // Detection status for settings display
+  // Shows "detected" if either user provided callback OR auto-detected
+  const detectionStatus = {
+    reactQuery: !!onClearReactQuery || isReactQueryDetected,
+    redux: !!onClearRedux || isReduxDetected,
+    asyncStorage: !!onClearAsyncStorage || isAsyncStorageDetected,
+    mmkv: !!onClearMMKV // TODO: implement auto-detection
+  };
+  const {
+    isActive,
+    currentUser,
+    headerKey,
+    dataNukeSettings,
+    showBanner,
+    searchQuery,
+    searchResults,
+    isSearching,
+    searchError,
+    searchUsers,
+    startImpersonation,
+    stopImpersonation,
+    updateHeaderKey,
+    updateDataNukeSettings,
+    updateShowBanner,
+    history,
+    removeFromHistory,
+    clearHistory
+  } = useImpersonate({
+    onSearchUsers,
+    onClearReactQuery: effectiveClearReactQuery,
+    onClearRedux: effectiveClearRedux,
+    onClearAsyncStorage: effectiveClearAsyncStorage,
+    onClearMMKV
+  });
+
+  // Focus input when search becomes active
+  useEffect(() => {
+    if (isSearchActive && searchInputRef.current) {
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    }
+  }, [isSearchActive]);
+
+  // Reset to search tab if settings tab is hidden while active
+  useEffect(() => {
+    if (!showSettingsTab && activeTab === "settings") {
+      setActiveTab("search");
+    }
+  }, [showSettingsTab, activeTab]);
+  const handleSearchTextChange = useCallback(text => {
+    setSearchText(text);
+  }, []);
+  const handleSubmitSearch = useCallback(() => {
+    if (searchText.trim()) {
+      searchUsers(searchText.trim());
+    }
+    setIsSearchActive(false);
+  }, [searchText, searchUsers]);
+  const handleSelectUser = useCallback(async user => {
+    await startImpersonation(user);
+  }, [startImpersonation]);
+  const handleSaveSettings = useCallback(async (newHeaderKey, settings, newShowBanner) => {
+    // Save header key, data nuke settings, and show banner
+    await updateHeaderKey(newHeaderKey);
+    await updateDataNukeSettings(settings);
+    await updateShowBanner(newShowBanner);
+  }, [updateHeaderKey, updateDataNukeSettings, updateShowBanner]);
+  const handleTabChange = useCallback(tabKey => {
+    setActiveTab(tabKey);
+    // Close search when switching tabs
+    setIsSearchActive(false);
+  }, []);
+
+  // Header content renderer (matching NetworkModal pattern)
+  const renderHeaderContent = () => {
+    return /*#__PURE__*/_jsxs(ModalHeader, {
+      children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
+          style: styles.headerSearchContainer,
+          children: [/*#__PURE__*/_jsx(Search, {
+            size: 14,
+            color: macOSColors.text.secondary
+          }), /*#__PURE__*/_jsx(TextInput, {
+            ref: searchInputRef,
+            style: styles.headerSearchInput,
+            placeholder: "Search by email, name, or ID...",
+            placeholderTextColor: macOSColors.text.muted,
+            value: searchText,
+            onChangeText: handleSearchTextChange,
+            onSubmitEditing: handleSubmitSearch,
+            onBlur: () => setIsSearchActive(false),
+            autoCapitalize: "none",
+            autoCorrect: false,
+            returnKeyType: "search"
+          }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => {
+              setSearchText("");
+              setIsSearchActive(false);
+            },
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/_jsx(X, {
+              size: 14,
+              color: macOSColors.text.secondary
+            })
+          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setIsSearchActive(false),
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/_jsx(X, {
+              size: 14,
+              color: macOSColors.text.muted
+            })
+          })]
+        }) : /*#__PURE__*/_jsx(TabSelector, {
+          tabs: tabs,
+          activeTab: activeTab,
+          onTabChange: handleTabChange
+        })
+      }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+        children: activeTab === "search" && !isSearchActive && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: styles.headerActionButton,
+          children: /*#__PURE__*/_jsx(Search, {
+            size: 14,
+            color: macOSColors.text.secondary
+          })
+        })
+      })]
+    });
+  };
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    onMinimize: onMinimize,
+    header: {
+      showToggleButton: true,
+      customContent: renderHeaderContent()
+    },
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    disableScrollWrapper: true,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [activeTab === "search" && /*#__PURE__*/_jsx(UserSearchView, {
+        currentUser: currentUser,
+        isActive: isActive,
+        searchQuery: searchQuery,
+        searchResults: searchResults,
+        isSearching: isSearching,
+        searchError: searchError,
+        onSelectUser: handleSelectUser,
+        onStopImpersonation: stopImpersonation,
+        searchAvailable: !!onSearchUsers
+      }), activeTab === "history" && /*#__PURE__*/_jsx(ImpersonateHistoryList, {
+        history: history,
+        currentUserId: currentUser?.id ?? null,
+        onSelectUser: handleSelectUser,
+        onStopImpersonation: stopImpersonation,
+        onRemoveFromHistory: removeFromHistory,
+        onClearHistory: clearHistory
+      }), activeTab === "settings" && /*#__PURE__*/_jsx(DataNukeSettingsComponent, {
+        headerKey: headerKey,
+        settings: dataNukeSettings,
+        showBanner: showBanner,
+        onSave: handleSaveSettings,
+        onShowBannerChange: updateShowBanner,
+        detectionStatus: detectionStatus
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginTop: 8,
+    flex: 1,
+    marginBottom: 2
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: macOSColors.text.primary,
+    fontSize: 13,
+    marginLeft: 6,
+    paddingVertical: 2
+  },
+  headerSearchClear: {
+    marginLeft: 6,
+    padding: 4
+  },
+  headerActionButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.hover,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});