@buoy-gg/shared-ui 1.7.2

package/lib/module/logger/index-sentry.js

@@ -0,0 +1,230 @@
+"use strict";
+
+import { add } from "./logDump.js";
+import { LogLevel, LogType } from "./types.js";
+export { LogLevel, LogType };
+
+// Simple ID generator to replace nanoid
+const generateId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+/**
+ * SentryLogger - Captures Sentry events for display in admin modal
+ *
+ * This logger is specifically designed to capture Sentry events before they are sent
+ * and store them in memory for display in the admin modal. It maintains up to 500 events.
+ *
+ * Usage:
+ * ```ts
+ * // In your Sentry.init():
+ * const logger = new SentryLogger();
+ *
+ * Sentry.init({
+ *   beforeSendTransaction: logger.captureTransaction,
+ *   beforeSendSpan: logger.captureSpan,
+ *   beforeSend: logger.captureEvent,
+ *   beforeBreadcrumb: logger.captureBreadcrumb,
+ *   // ... other config
+ * });
+ * ```
+ */
+export class SentryLogger {
+  /**
+   * Capture a Sentry transaction before it's sent
+   */
+  captureTransaction = event => {
+    this.logSentryEvent("transaction", event);
+    return event;
+  };
+
+  /**
+   * Capture a Sentry span before it's sent
+   */
+  captureSpan = span => {
+    this.logSentryEvent("span", span);
+    return span;
+  };
+
+  /**
+   * Capture a Sentry event before it's sent
+   */
+  captureEvent = event => {
+    this.logSentryEvent("event", event);
+    return event;
+  };
+
+  /**
+   * Capture a Sentry log before it's sent
+   */
+  captureLog = log => {
+    this.logSentryEvent("console", {
+      message: log.message || "Log entry",
+      level: log.level,
+      category: "console",
+      timestamp: log.timestamp,
+      ...log.attributes
+    });
+    return log;
+  };
+
+  /**
+   * Capture a Sentry breadcrumb before it's added
+   */
+  captureBreadcrumb = breadcrumb => {
+    // Get current pathname from global tracker if available
+    let pathname = "unknown";
+    try {
+      // Try to get the pathname from the global function if it exists
+      const getCurrentPathname = globalThis.getCurrentPathname;
+      if (getCurrentPathname) {
+        pathname = getCurrentPathname();
+      }
+    } catch {
+      // Ignore errors - use default pathname
+    }
+
+    // Type assertion for the category
+    const category = breadcrumb.category;
+
+    // Filter out breadcrumbs with "ignore" in the message (for admin components)
+    if (breadcrumb.message?.toLowerCase().includes("ignore")) {
+      return null;
+    }
+
+    // Replace touch event message if present
+    if (breadcrumb.message?.includes("Touch event within element:")) {
+      breadcrumb.message = breadcrumb.message.replace("Touch event within element:", "");
+    }
+
+    // Replace navigation message if present
+    if (category === "navigation" && breadcrumb.data?.from && breadcrumb.data?.to) {
+      breadcrumb.message = `From ${breadcrumb.data.from} To ${breadcrumb.data.to}`;
+    }
+
+    // Handle touch events specially
+    if (category === "touch" && breadcrumb.data?.path) {
+      // Clean up message if it starts with a space
+      if (breadcrumb.message) {
+        breadcrumb.message = breadcrumb.message.trim();
+      }
+
+      // Create enriched data structure
+      const enrichedData = {
+        ...breadcrumb.data,
+        category,
+        message: breadcrumb.message,
+        route: pathname,
+        timestamp: new Date().toISOString(),
+        path: breadcrumb.message ? [{
+          label: breadcrumb.message
+        }] : breadcrumb.data?.path
+      };
+
+      // Update breadcrumb data
+      breadcrumb.data = enrichedData;
+    }
+    this.logSentryEvent("breadcrumb", breadcrumb);
+    return breadcrumb;
+  };
+
+  /**
+   * Internal method to log Sentry events to memory
+   */
+  logSentryEvent(type, data) {
+    // Determine log type based on Sentry category
+    let logType = LogType.Generic;
+    const category = data.category;
+    if (category) {
+      switch (category) {
+        case "touch":
+          logType = LogType.Touch;
+          break;
+        case "xhr":
+        case "fetch":
+        case "http":
+          logType = LogType.HTTPRequest;
+          break;
+        case "navigation":
+          logType = LogType.Navigation;
+          break;
+        case "auth":
+          logType = LogType.Auth;
+          break;
+        case "console":
+          logType = LogType.System;
+          break;
+        case "debug":
+          logType = LogType.Debug;
+          break;
+        default:
+          if (category.startsWith("ui.")) {
+            logType = LogType.UserAction;
+          } else if (category.startsWith("replay.")) {
+            logType = LogType.Replay;
+          } else if (category.includes("redux") || category.includes("state")) {
+            logType = LogType.State;
+          } else {
+            logType = LogType.Custom;
+          }
+      }
+    }
+
+    // Create log entry
+    const entry = {
+      id: generateId(),
+      timestamp: Date.now(),
+      level: this.getSentryLevel(data),
+      message: this.getSentryMessage(data),
+      metadata: this.getSentryMetadata(data),
+      type: logType
+    };
+
+    // Add to memory store
+    add(entry);
+  }
+
+  /**
+   * Get appropriate log level from Sentry data
+   */
+  getSentryLevel(data) {
+    const level = data.level;
+    switch (level) {
+      case "fatal":
+      case "error":
+        return LogLevel.Error;
+      case "warning":
+        return LogLevel.Warn;
+      case "info":
+        return LogLevel.Info;
+      case "debug":
+        return LogLevel.Debug;
+      default:
+        return LogLevel.Log;
+    }
+  }
+
+  /**
+   * Extract message from Sentry data
+   */
+  getSentryMessage(data) {
+    const message = data.message;
+    if (typeof message === "string") {
+      return message;
+    }
+    return `${data.type || "Unknown"} Event`;
+  }
+
+  /**
+   * Extract metadata from Sentry data
+   */
+  getSentryMetadata(data) {
+    const {
+      message,
+      level,
+      type,
+      ...metadata
+    } = data;
+    return metadata;
+  }
+}
+
+// Export a default instance for convenience
+export const sentryLogger = new SentryLogger();

package/lib/module/logger/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+// Main Sentry logger for capturing events
+export { LogLevel, LogType, SentryLogger, sentryLogger } from "./index-sentry.js";
+
+// Test logger removed - no longer needed
+
+// Log storage and retrieval
+export { add, clearEntries, getEntries } from "./logDump.js";
+
+// Types
+
+export { LogLevel as LogLevelEnum, LogType as LogTypeEnum } from "./types.js";

package/lib/module/logger/logDump.js

@@ -0,0 +1,13 @@
+"use strict";
+
+let entries = [];
+export function add(entry) {
+  entries.unshift(entry);
+  entries = entries.slice(0, 500);
+}
+export function getEntries() {
+  return entries;
+}
+export function clearEntries() {
+  entries = [];
+}

package/lib/module/logger/types.js

@@ -0,0 +1,37 @@
+"use strict";
+
+export let LogLevel = /*#__PURE__*/function (LogLevel) {
+  LogLevel["Debug"] = "debug";
+  LogLevel["Info"] = "info";
+  LogLevel["Log"] = "log";
+  LogLevel["Warn"] = "warn";
+  LogLevel["Error"] = "error";
+  return LogLevel;
+}({});
+export let LogType = /*#__PURE__*/function (LogType) {
+  LogType["Auth"] = "Auth";
+  LogType["Custom"] = "Custom";
+  LogType["Debug"] = "Debug";
+  LogType["Error"] = "Error";
+  LogType["Generic"] = "Generic";
+  LogType["HTTPRequest"] = "HTTP Request";
+  LogType["Navigation"] = "Navigation";
+  LogType["Replay"] = "Replay";
+  LogType["State"] = "State";
+  LogType["System"] = "System";
+  LogType["Touch"] = "Touch";
+  LogType["UserAction"] = "User Action";
+  return LogType;
+}({});
+
+/**
+ * Event object structure that matches Sentry Event format
+ */
+
+/**
+ * Breadcrumb object structure that matches Sentry Breadcrumb format
+ */
+
+/**
+ * Metadata type that encompasses breadcrumb properties and capture context
+ */

package/lib/module/package.json

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

package/lib/module/settings/components/BubbleSettingsSection.js

@@ -0,0 +1,376 @@
+"use strict";
+
+import { View, Text, StyleSheet, Switch, ScrollView } from "react-native";
+import { Settings, EyeOff, Database } from "../../icons/index.js";
+import { useState, useEffect } from "react";
+import { CyberpunkSectionButton } from "../../ui/console/CyberpunkSectionButton.js";
+import { devToolsStorageKeys } from "../../storage/devToolsStorageKeys.js";
+import { safeGetItem, safeSetItem } from "../../utils/safeAsyncStorage.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STORAGE_KEY = devToolsStorageKeys.bubble.settings();
+const USER_PREFERENCES_KEY = devToolsStorageKeys.bubble.userPreferences();
+const DEFAULT_SETTINGS = {
+  showEnvironment: true,
+  showQueryButton: true,
+  showWifiToggle: true,
+  showEnvButton: false,
+  showSentryButton: false,
+  showStorageButton: false
+};
+export function BubbleSettingsSection({
+  onPress
+}) {
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  useEffect(() => {
+    loadSettings();
+  }, []);
+  const loadSettings = async () => {
+    try {
+      const stored = await safeGetItem(STORAGE_KEY);
+      if (stored) {
+        setSettings(JSON.parse(stored));
+      }
+    } catch (error) {
+      console.error("Failed to load bubble settings:", error);
+    }
+  };
+  const getVisibleCount = () => {
+    return Object.values(settings).filter(Boolean).length;
+  };
+  return /*#__PURE__*/_jsx(CyberpunkSectionButton, {
+    id: "bubble-settings",
+    title: "SETTINGS",
+    subtitle: `${getVisibleCount()}/6 visible`,
+    icon: Settings,
+    iconColor: "#10B981",
+    iconBackgroundColor: "rgba(16, 185, 129, 0.1)",
+    onPress: onPress || (() => {}),
+    index: 5
+  });
+}
+export function BubbleSettingsDetail({
+  onSettingsChange
+}) {
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    loadSettings();
+  }, []);
+  const loadSettings = async () => {
+    try {
+      const stored = await safeGetItem(STORAGE_KEY);
+      if (stored) {
+        setSettings(JSON.parse(stored));
+      }
+    } catch (error) {
+      console.error("Failed to load bubble settings:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const saveSettings = async newSettings => {
+    try {
+      await safeSetItem(STORAGE_KEY, JSON.stringify(newSettings));
+      setSettings(newSettings);
+      // Trigger the callback to reload settings in the parent
+      onSettingsChange?.(newSettings);
+    } catch (error) {
+      console.error("Failed to save bubble settings:", error);
+    }
+  };
+  const handleToggle = async key => {
+    const newSettings = {
+      ...settings,
+      [key]: !settings[key]
+    };
+
+    // Mark this preference as explicitly set by the user
+    try {
+      const prefsStored = await safeGetItem(USER_PREFERENCES_KEY);
+      const currentPrefs = prefsStored ? JSON.parse(prefsStored) : {};
+      const prefKey = key.replace("show", "hasSet");
+      const updatedPrefs = {
+        ...currentPrefs,
+        [prefKey]: true
+      };
+      await safeSetItem(USER_PREFERENCES_KEY, JSON.stringify(updatedPrefs));
+    } catch (error) {
+      console.error("Failed to save user preference marker:", error);
+    }
+    saveSettings(newSettings);
+  };
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.detailContainer,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.loadingText,
+        children: "Loading settings..."
+      })
+    });
+  }
+  const settingsConfig = [{
+    key: "showEnvironment",
+    label: "Environment Indicator",
+    description: "Shows current environment (dev, staging, prod)",
+    icon: /*#__PURE__*/_jsx(View, {
+      style: [styles.indicator, {
+        backgroundColor: "#10B981"
+      }]
+    })
+  }, {
+    key: "showQueryButton",
+    label: "React Query Button",
+    description: "Opens React Query dev tools",
+    icon: /*#__PURE__*/_jsx(View, {
+      style: [styles.indicator, {
+        backgroundColor: "#F59E0B"
+      }]
+    })
+  }, {
+    key: "showWifiToggle",
+    label: "WiFi",
+    description: "Toggle WiFi for testing offline scenarios",
+    icon: /*#__PURE__*/_jsx(View, {
+      style: [styles.indicator, {
+        backgroundColor: "#8B5CF6"
+      }]
+    })
+  }, {
+    key: "showEnvButton",
+    label: "Environment Variables",
+    description: "View and check environment variables",
+    icon: /*#__PURE__*/_jsx(Settings, {
+      size: 16,
+      color: "#10B981"
+    })
+  }, {
+    key: "showSentryButton",
+    label: "Sentry Events",
+    description: "View captured Sentry events and errors",
+    icon: /*#__PURE__*/_jsx(View, {
+      style: [styles.indicator, {
+        backgroundColor: "#a855f7"
+      }]
+    })
+  }, {
+    key: "showStorageButton",
+    label: "Storage Browser",
+    description: "Browse and inspect AsyncStorage data",
+    icon: /*#__PURE__*/_jsx(Database, {
+      size: 16,
+      color: "#3B82F6"
+    })
+  }];
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.detailContainer,
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: styles.scrollContent,
+      "sentry-label": "ignore bubble settings scroll",
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.headerTitle,
+          children: "Developer Tools Settings"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerDescription,
+          children: "Configure bubble button visibility"
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sectionDivider,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "Bubble Button Visibility"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.settingsList,
+        children: settingsConfig.map(config => /*#__PURE__*/_jsxs(View, {
+          style: styles.settingItem,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.settingIconContainer,
+            children: config.icon
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.settingContent,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.settingLabel,
+              children: config.label
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.settingDescription,
+              children: config.description
+            })]
+          }), /*#__PURE__*/_jsx(Switch, {
+            "sentry-label": "ignore bubble settings section",
+            value: settings[config.key],
+            onValueChange: () => handleToggle(config.key),
+            trackColor: {
+              false: "#4B5563",
+              true: "#10B981"
+            },
+            thumbColor: settings[config.key] ? "#fff" : "#9CA3AF"
+          })]
+        }, config.key))
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footer,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.noteContainer,
+          children: [/*#__PURE__*/_jsx(EyeOff, {
+            size: 16,
+            color: "#9CA3AF"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.noteText,
+            children: "User status indicator is always visible and cannot be disabled"
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.restartNote,
+          children: "Changes are saved automatically and will persist across app restarts"
+        })]
+      })]
+    })
+  });
+}
+export async function getBubbleVisibilitySettings() {
+  try {
+    const stored = await safeGetItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.error("Failed to load bubble settings:", error);
+  }
+  return DEFAULT_SETTINGS;
+}
+const styles = StyleSheet.create({
+  scrollContent: {
+    flexGrow: 1
+  },
+  sectionCard: {
+    backgroundColor: "#1F2937",
+    borderRadius: 8,
+    padding: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 12
+  },
+  iconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: "rgba(16, 185, 129, 0.1)",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12
+  },
+  textContainer: {
+    flex: 1
+  },
+  title: {
+    color: "#E5E7EB",
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 2
+  },
+  subtitle: {
+    color: "#9CA3AF",
+    fontSize: 12
+  },
+  chevron: {
+    color: "#6B7280",
+    fontSize: 20
+  },
+  detailContainer: {
+    flex: 1,
+    backgroundColor: "#171717"
+  },
+  loadingText: {
+    color: "#9CA3AF",
+    fontSize: 14,
+    textAlign: "center",
+    marginTop: 20
+  },
+  header: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.1)"
+  },
+  headerTitle: {
+    color: "#E5E7EB",
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 4
+  },
+  headerDescription: {
+    color: "#9CA3AF",
+    fontSize: 12
+  },
+  settingsList: {
+    padding: 16
+  },
+  settingItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.05)"
+  },
+  settingIconContainer: {
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12
+  },
+  settingContent: {
+    flex: 1,
+    marginRight: 12
+  },
+  settingLabel: {
+    color: "#E5E7EB",
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 2
+  },
+  settingDescription: {
+    color: "#6B7280",
+    fontSize: 11
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  footer: {
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255, 255, 255, 0.1)"
+  },
+  noteContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 8
+  },
+  noteText: {
+    color: "#9CA3AF",
+    fontSize: 12,
+    flex: 1
+  },
+  restartNote: {
+    color: "#6B7280",
+    fontSize: 11,
+    fontStyle: "italic"
+  },
+  sectionDivider: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255, 255, 255, 0.06)"
+  },
+  sectionTitle: {
+    color: "#9CA3AF",
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  }
+});

package/lib/module/settings/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { BubbleSettingsSection, BubbleSettingsDetail, getBubbleVisibilitySettings } from "./components/BubbleSettingsSection.js";