@buoy-gg/impersonate 1.0.3-beta.0

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

@@ -0,0 +1,125 @@
+"use strict";
+
+/**
+ * ImpersonateStatusBar Component
+ *
+ * Shows the current impersonation status with user avatar, info and stop button.
+ * Displays at the top of the modal when impersonation is active.
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { buoyColors, X } from "@buoy-gg/shared-ui";
+import { UserAvatar } from "./UserAvatar";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ImpersonateStatusBar({
+  user,
+  onStopImpersonation
+}) {
+  const displayName = user.displayName || user.email || user.id;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.userSection,
+      children: [/*#__PURE__*/_jsx(UserAvatar, {
+        userId: user.id,
+        name: displayName,
+        size: "small",
+        showActiveIndicator: false
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.userInfo,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.userName,
+          numberOfLines: 1,
+          children: displayName
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.statusPill,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.pulseDot
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.statusText,
+        children: "Active"
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.stopButton,
+      onPress: onStopImpersonation,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/_jsx(X, {
+        size: 12,
+        color: buoyColors.error
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.stopButtonText,
+        children: "Stop"
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    backgroundColor: buoyColors.success + "10",
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.success + "25",
+    gap: 12
+  },
+  userSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    gap: 10,
+    minWidth: 0
+  },
+  userInfo: {
+    flex: 1,
+    minWidth: 0
+  },
+  userName: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: buoyColors.text
+  },
+  statusPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: buoyColors.success + "20",
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12
+  },
+  pulseDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: buoyColors.success
+  },
+  statusText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: buoyColors.success,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  stopButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: buoyColors.error + "15",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.error + "30"
+  },
+  stopButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.error
+  }
+});

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

@@ -0,0 +1,140 @@
+"use strict";
+
+/**
+ * UserAvatar Component
+ *
+ * Displays a user avatar with initials and deterministic color.
+ * Supports size variants and active indicator.
+ */
+
+import React, { useMemo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+
+// Avatar background colors - deterministic based on user ID
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AVATAR_COLORS = ["#6366F1",
+// Indigo
+"#8B5CF6",
+// Purple
+"#EC4899",
+// Pink
+"#F43F5E",
+// Rose
+"#F97316",
+// Orange
+"#EAB308",
+// Yellow
+"#22C55E",
+// Green
+"#14B8A6",
+// Teal
+"#06B6D4",
+// Cyan
+"#3B82F6" // Blue
+];
+const SIZES = {
+  small: {
+    container: 24,
+    font: 10,
+    indicator: 8
+  },
+  medium: {
+    container: 36,
+    font: 14,
+    indicator: 10
+  },
+  large: {
+    container: 44,
+    font: 16,
+    indicator: 12
+  }
+};
+/**
+ * Get initials from a name or email
+ */
+function getInitials(name) {
+  if (!name) return "?";
+
+  // If it's an email, use first letter before @
+  if (name.includes("@")) {
+    return name.charAt(0).toUpperCase();
+  }
+
+  // Split by spaces and get first letter of first two words
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+
+/**
+ * Get deterministic color based on user ID
+ */
+function getAvatarColor(userId) {
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+export function UserAvatar({
+  userId,
+  name,
+  size = "medium",
+  showActiveIndicator = false,
+  backgroundColor
+}) {
+  const sizeConfig = SIZES[size];
+  const avatarColor = useMemo(() => backgroundColor ?? getAvatarColor(userId), [userId, backgroundColor]);
+  const initials = useMemo(() => getInitials(name), [name]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wrapper,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.container, {
+        width: sizeConfig.container,
+        height: sizeConfig.container,
+        borderRadius: sizeConfig.container / 2,
+        backgroundColor: avatarColor
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.initials, {
+          fontSize: sizeConfig.font
+        }],
+        children: initials
+      })
+    }), showActiveIndicator && /*#__PURE__*/_jsx(View, {
+      style: [styles.indicator, {
+        width: sizeConfig.indicator,
+        height: sizeConfig.indicator,
+        borderRadius: sizeConfig.indicator / 2,
+        right: -1,
+        bottom: -1
+      }]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative"
+  },
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  initials: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+    letterSpacing: 0.5
+  },
+  indicator: {
+    position: "absolute",
+    backgroundColor: buoyColors.success,
+    borderWidth: 2,
+    borderColor: buoyColors.card
+  }
+});
+
+// Export helper functions for reuse
+export { getInitials, getAvatarColor, AVATAR_COLORS };

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

@@ -0,0 +1,195 @@
+"use strict";
+
+/**
+ * UserCard Component
+ *
+ * Polished user card for search results and history.
+ * Features avatar, clean typography hierarchy, and contextual actions.
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { buoyColors, Play, X, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { UserAvatar } from "./UserAvatar";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function UserCard({
+  user,
+  isActive = false,
+  onPress,
+  onStop,
+  onRemove,
+  showRemoveButton = false,
+  lastUsedTime,
+  variant = "default"
+}) {
+  const displayName = user.displayName || user.email || user.id;
+  const showEmail = user.email && user.displayName;
+  const role = typeof user.metadata?.role === "string" ? user.metadata.role : null;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    style: [styles.container, isActive && styles.activeContainer, variant === "compact" && styles.compactContainer],
+    onPress: onPress,
+    disabled: isActive,
+    activeOpacity: 0.7,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.avatarSection,
+      children: /*#__PURE__*/_jsx(UserAvatar, {
+        userId: user.id,
+        name: displayName,
+        size: variant === "compact" ? "small" : "medium",
+        showActiveIndicator: isActive
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.nameRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.name, isActive && styles.activeName],
+          numberOfLines: 1,
+          children: displayName
+        }), role && /*#__PURE__*/_jsx(View, {
+          style: styles.roleBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.roleBadgeText,
+            children: role.toUpperCase()
+          })
+        })]
+      }), showEmail && /*#__PURE__*/_jsx(Text, {
+        style: styles.email,
+        numberOfLines: 1,
+        children: user.email
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.metadataRow,
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: styles.userId,
+          children: ["ID: ", user.id]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [isActive ? /*#__PURE__*/_jsx(PowerToggleButton, {
+        isEnabled: true,
+        onToggle: onStop || (() => {}),
+        accessibilityLabel: "Stop impersonation"
+      }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.actionButton,
+        onPress: onPress,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(Play, {
+          size: 14,
+          color: "#FFFFFF"
+        })
+      }), showRemoveButton && onRemove && !isActive && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.removeButton,
+        onPress: onRemove,
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/_jsx(X, {
+          size: 12,
+          color: buoyColors.textMuted
+        })
+      })]
+    }), lastUsedTime && /*#__PURE__*/_jsx(Text, {
+      style: styles.lastUsed,
+      children: lastUsedTime
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 12,
+    gap: 12
+  },
+  activeContainer: {
+    backgroundColor: buoyColors.success + "10",
+    borderColor: buoyColors.success + "40"
+  },
+  compactContainer: {
+    padding: 10,
+    gap: 10
+  },
+  avatarSection: {
+    flexShrink: 0
+  },
+  content: {
+    flex: 1,
+    minWidth: 0
+  },
+  nameRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 2
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: buoyColors.text,
+    flexShrink: 1
+  },
+  activeName: {
+    color: buoyColors.success
+  },
+  roleBadge: {
+    backgroundColor: buoyColors.hover,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  roleBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: buoyColors.textMuted,
+    letterSpacing: 0.5
+  },
+  email: {
+    fontSize: 13,
+    color: buoyColors.textSecondary,
+    marginBottom: 4
+  },
+  metadataRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  userId: {
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  lastUsed: {
+    position: "absolute",
+    bottom: 8,
+    right: 10,
+    fontSize: 10,
+    color: buoyColors.textMuted
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 0
+  },
+  actionButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: buoyColors.primary,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  removeButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: buoyColors.hover,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

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

@@ -0,0 +1,222 @@
+"use strict";
+
+/**
+ * UserSearchView Component
+ *
+ * Displays search results for user impersonation.
+ * Search input is handled by the parent modal's header.
+ * Uses polished UserCard component for results.
+ */
+
+import React, { useCallback } from "react";
+import { View, Text, StyleSheet, FlatList, ActivityIndicator } from "react-native";
+import { SectionHeader, EmptyState, buoyColors, Search, AlertTriangle, Users } from "@buoy-gg/shared-ui";
+import { UserCard } from "./UserCard";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function UserSearchView({
+  currentUser,
+  searchQuery,
+  searchResults,
+  isSearching,
+  searchError,
+  onSelectUser,
+  onStopImpersonation,
+  searchAvailable = true
+}) {
+  const renderUserItem = useCallback(({
+    item
+  }) => {
+    const isCurrentUser = currentUser?.id === item.id;
+    return /*#__PURE__*/_jsx(UserCard, {
+      user: item,
+      isActive: isCurrentUser,
+      onPress: () => !isCurrentUser && onSelectUser(item),
+      onStop: isCurrentUser ? onStopImpersonation : undefined
+    });
+  }, [currentUser, onSelectUser, onStopImpersonation]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [!searchAvailable && /*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.warningCard,
+        children: [/*#__PURE__*/_jsx(AlertTriangle, {
+          size: 18,
+          color: buoyColors.warning
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.warningContent,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.warningTitle,
+            children: "Search Not Available"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.warningText,
+            children: "Configure the onSearchUsers callback to enable user search."
+          })]
+        })]
+      })
+    }), isSearching && /*#__PURE__*/_jsxs(View, {
+      style: styles.loadingContainer,
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: buoyColors.primary
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.loadingText,
+        children: "Searching users..."
+      })]
+    }), searchError && /*#__PURE__*/_jsx(View, {
+      style: styles.section,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.errorCard,
+        children: [/*#__PURE__*/_jsx(AlertTriangle, {
+          size: 16,
+          color: buoyColors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.errorText,
+          children: searchError
+        })]
+      })
+    }), searchResults.length > 0 && /*#__PURE__*/_jsxs(View, {
+      style: styles.resultsSection,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "Results"
+        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: searchResults.length
+        })]
+      }), /*#__PURE__*/_jsx(FlatList, {
+        data: searchResults,
+        keyExtractor: item => item.id,
+        renderItem: renderUserItem,
+        ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
+          style: styles.separator
+        }),
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: false
+      })]
+    }), searchQuery && !isSearching && searchResults.length === 0 && !searchError && /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyStateContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.emptyStateIcon,
+        children: /*#__PURE__*/_jsx(Users, {
+          size: 28,
+          color: buoyColors.textMuted
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyStateTitle,
+        children: "No users found"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.emptyStateDescription,
+        children: ["No results for \"", searchQuery, "\""]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyStateHint,
+        children: "Try a different search term"
+      })]
+    }), !searchQuery && searchResults.length === 0 && !isSearching && searchAvailable && /*#__PURE__*/_jsx(EmptyState, {
+      title: "Search for users",
+      description: "Tap the search icon in the header to find users by email, name, or ID",
+      icon: Search,
+      variant: "minimal"
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  section: {
+    padding: 16,
+    paddingBottom: 8
+  },
+  loadingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    paddingVertical: 20
+  },
+  loadingText: {
+    fontSize: 13,
+    color: buoyColors.textSecondary
+  },
+  resultsSection: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  listContent: {
+    paddingBottom: 16
+  },
+  separator: {
+    height: 8
+  },
+  warningCard: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 12,
+    backgroundColor: buoyColors.warning + "12",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.warning + "25",
+    padding: 14
+  },
+  warningContent: {
+    flex: 1
+  },
+  warningTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: buoyColors.warning,
+    marginBottom: 4
+  },
+  warningText: {
+    fontSize: 13,
+    color: buoyColors.textSecondary,
+    lineHeight: 18
+  },
+  errorCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    backgroundColor: buoyColors.error + "12",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.error + "25",
+    padding: 12
+  },
+  errorText: {
+    flex: 1,
+    fontSize: 13,
+    color: buoyColors.error
+  },
+  emptyStateContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+    paddingVertical: 48
+  },
+  emptyStateIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: buoyColors.hover,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16
+  },
+  emptyStateTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: buoyColors.text,
+    marginBottom: 6
+  },
+  emptyStateDescription: {
+    fontSize: 14,
+    color: buoyColors.textSecondary,
+    textAlign: "center",
+    marginBottom: 8
+  },
+  emptyStateHint: {
+    fontSize: 12,
+    color: buoyColors.textMuted
+  }
+});

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

@@ -0,0 +1,11 @@
+"use strict";
+
+export { UserSearchView } from "./UserSearchView";
+export { DataNukeSettings as DataNukeSettingsComponent } from "./DataNukeSettings";
+export { ImpersonateHistoryList } from "./ImpersonateHistoryList";
+export { ImpersonateModal } from "./ImpersonateModal";
+export { ImpersonateBanner, ImpersonateBannerMinimal } from "./ImpersonateBanner";
+export { ImpersonateStatusBar } from "./ImpersonateStatusBar";
+export { UserAvatar } from "./UserAvatar";
+export { getInitials, getAvatarColor, AVATAR_COLORS } from "./UserAvatar";
+export { UserCard } from "./UserCard";

package/lib/module/impersonate/hooks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export { useImpersonate } from "./useImpersonate";
+export { useImpersonateHistory } from "./useImpersonateHistory";
+export { useAutoClearReactQuery, useReactQueryAvailability } from "./useAutoClearReactQuery";
+export { useAutoClearRedux, useReduxAvailability, REDUX_RESET_ACTION_TYPE } from "./useAutoClearRedux";
+export { useAutoClearAsyncStorage, useAsyncStorageAvailability } from "./useAutoClearAsyncStorage";