@buoy-gg/shared-ui 1.7.2

package/lib/module/storage/devToolsStorageKeys.js

@@ -0,0 +1,228 @@
+"use strict";
+
+/**
+ * Centralized storage keys for all dev tools
+ * This ensures consistency across all dev tool storage operations
+ * and allows easy filtering of dev tool keys from the Storage Browser
+ *
+ * All dev tool keys start with "@react_buoy" prefix for easy identification
+ */
+export const devToolsStorageKeys = {
+  /**
+   * Base dev tools key - all dev tool storage keys start with this
+   */
+  base: "@react_buoy",
+  /**
+   * Bubble-related storage keys
+   */
+  bubble: {
+    root: () => `${devToolsStorageKeys.base}_bubble`,
+    settings: () => `${devToolsStorageKeys.bubble.root()}_settings`,
+    userPreferences: () => `${devToolsStorageKeys.bubble.root()}_user_preferences`,
+    position: () => `${devToolsStorageKeys.bubble.root()}_position`
+  },
+  /**
+   * Modal-related storage keys
+   */
+  modal: {
+    root: () => `${devToolsStorageKeys.base}_modal`,
+    state: () => `${devToolsStorageKeys.modal.root()}_state`,
+    position: () => `${devToolsStorageKeys.modal.root()}_position`,
+    dimensions: () => `${devToolsStorageKeys.modal.root()}_dimensions`,
+    hintAcknowledged: () => `${devToolsStorageKeys.modal.root()}_hint_acknowledged`
+  },
+  /**
+   * Settings-related storage keys
+   */
+  settings: {
+    root: () => `${devToolsStorageKeys.base}_settings`,
+    theme: () => `${devToolsStorageKeys.settings.root()}_theme`,
+    preferences: () => `${devToolsStorageKeys.settings.root()}_preferences`,
+    wifiEnabled: () => `${devToolsStorageKeys.settings.root()}_wifi_enabled`,
+    /** Global settings that apply to all dev tools */
+    global: () => `${devToolsStorageKeys.settings.root()}_global`,
+    /** Settings modal active tab */
+    activeTab: () => `${devToolsStorageKeys.settings.root()}_active_tab`,
+    /** Settings modal open state */
+    modalOpen: () => `${devToolsStorageKeys.settings.root()}_modal_open`
+  },
+  /**
+   * Dial-related storage keys
+   */
+  dial: {
+    root: () => `${devToolsStorageKeys.base}_dial`,
+    /** Whether dial is open/visible */
+    isOpen: () => `${devToolsStorageKeys.dial.root()}_is_open`
+  },
+  /**
+   * Clipboard-related storage keys
+   */
+  clipboard: {
+    root: () => `${devToolsStorageKeys.base}_clipboard`,
+    hintAcknowledged: () => `${devToolsStorageKeys.clipboard.root()}_hint_acknowledged`
+  },
+  /**
+   * Environment-related storage keys
+   */
+  env: {
+    root: () => `${devToolsStorageKeys.base}_env`,
+    modal: () => `${devToolsStorageKeys.env.root()}_modal`,
+    currentEnv: () => `${devToolsStorageKeys.env.root()}_current`,
+    overrides: () => `${devToolsStorageKeys.env.root()}_overrides`
+  },
+  /**
+   * Sentry-related storage keys
+   */
+  sentry: {
+    root: () => `${devToolsStorageKeys.base}_sentry`,
+    modal: () => `${devToolsStorageKeys.sentry.root()}_modal`,
+    filters: () => `${devToolsStorageKeys.sentry.root()}_filters`,
+    preferences: () => `${devToolsStorageKeys.sentry.root()}_preferences`
+  },
+  /**
+   * Storage browser-related keys
+   */
+  storage: {
+    root: () => `${devToolsStorageKeys.base}_storage`,
+    modal: () => `${devToolsStorageKeys.storage.root()}_modal`,
+    eventsModal: () => `${devToolsStorageKeys.storage.root()}_events_modal`,
+    filters: () => `${devToolsStorageKeys.storage.root()}_filters`,
+    eventFilters: () => `${devToolsStorageKeys.storage.root()}_event_filters`,
+    keyFilters: () => `${devToolsStorageKeys.storage.root()}_key_filters`,
+    preferences: () => `${devToolsStorageKeys.storage.root()}_preferences`,
+    activeTab: () => `${devToolsStorageKeys.storage.root()}_active_tab`,
+    isMonitoring: () => `${devToolsStorageKeys.storage.root()}_is_monitoring`,
+    detailView: () => `${devToolsStorageKeys.storage.root()}_detail_view`,
+    // 'current' | 'diff'
+    diffViewerMode: () => `${devToolsStorageKeys.storage.root()}_diff_viewer_mode` // 'split' | 'tree'
+  },
+  /**
+   * React Query-related storage keys
+   */
+  reactQuery: {
+    root: () => `${devToolsStorageKeys.base}_rq`,
+    modal: () => `${devToolsStorageKeys.reactQuery.root()}_modal`,
+    browserModal: () => `${devToolsStorageKeys.reactQuery.root()}_browser_modal`,
+    mutationModal: () => `${devToolsStorageKeys.reactQuery.root()}_mutation_modal`,
+    filters: () => `${devToolsStorageKeys.reactQuery.root()}_filters`,
+    ignoredPatterns: () => `${devToolsStorageKeys.reactQuery.root()}_ignored_patterns`,
+    includedPatterns: () => `${devToolsStorageKeys.reactQuery.root()}_included_patterns`,
+    preferences: () => `${devToolsStorageKeys.reactQuery.root()}_preferences`
+  },
+  /**
+   * Network-related storage keys
+   */
+  network: {
+    root: () => `${devToolsStorageKeys.base}_network`,
+    modal: () => `${devToolsStorageKeys.network.root()}_modal`,
+    copyModal: () => `${devToolsStorageKeys.network.root()}_copy_modal`,
+    filters: () => `${devToolsStorageKeys.network.root()}_filters`,
+    ignoredDomains: () => `${devToolsStorageKeys.network.root()}_ignored_domains`,
+    ignoredUrls: () => `${devToolsStorageKeys.network.root()}_ignored_urls`,
+    preferences: () => `${devToolsStorageKeys.network.root()}_preferences`,
+    copyOptions: () => `${devToolsStorageKeys.network.root()}_copy_options`
+  },
+  /**
+   * Route events-related storage keys
+   */
+  routeEvents: {
+    root: () => `${devToolsStorageKeys.base}_route_events`,
+    modal: () => `${devToolsStorageKeys.routeEvents.root()}_modal`,
+    eventFilters: () => `${devToolsStorageKeys.routeEvents.root()}_event_filters`,
+    activeTab: () => `${devToolsStorageKeys.routeEvents.root()}_active_tab`,
+    isMonitoring: () => `${devToolsStorageKeys.routeEvents.root()}_is_monitoring`,
+    detailView: () => `${devToolsStorageKeys.routeEvents.root()}_detail_view`,
+    // 'current' | 'diff'
+    diffViewerMode: () => `${devToolsStorageKeys.routeEvents.root()}_diff_viewer_mode` // 'split' | 'tree'
+  },
+  /**
+   * Highlight updates-related storage keys
+   */
+  highlightUpdates: {
+    root: () => `${devToolsStorageKeys.base}_highlight_updates`,
+    modal: () => `${devToolsStorageKeys.highlightUpdates.root()}_modal`,
+    isTracking: () => `${devToolsStorageKeys.highlightUpdates.root()}_is_tracking`,
+    filters: () => `${devToolsStorageKeys.highlightUpdates.root()}_filters`,
+    settings: () => `${devToolsStorageKeys.highlightUpdates.root()}_settings`
+  },
+  /**
+   * Benchmark-related storage keys
+   */
+  benchmark: {
+    root: () => `${devToolsStorageKeys.base}_benchmark`,
+    modal: () => `${devToolsStorageKeys.benchmark.root()}_modal`,
+    isRecording: () => `${devToolsStorageKeys.benchmark.root()}_is_recording`,
+    activeTab: () => `${devToolsStorageKeys.benchmark.root()}_active_tab`,
+    settings: () => `${devToolsStorageKeys.benchmark.root()}_settings`,
+    selectedReports: () => `${devToolsStorageKeys.benchmark.root()}_selected_reports`
+  }
+};
+
+/**
+ * Legacy dev tool key patterns that should be cleaned up
+ * These are old keys from before we standardized on @react_buoy prefix
+ */
+const LEGACY_DEV_TOOL_PATTERNS = ["@devtools", "@dev_tools_", "@modal_state_",
+// Old modal state keys
+"@react_query_browser_modal", "@react_query_modal", "@react_query_mutation_modal", "@sentry_logs_modal", "@floating_rn_better_dev_tools_", "@floating_tools_", "@apphost_", "@bubble_settings_", "@env_vars_modal", "@storage_modal", "@floating_@devtools_",
+// Double @ migration issue
+"dev_last_route" // Old key without @ prefix
+];
+
+/**
+ * Check if a storage key belongs to dev tools
+ * @param key - The storage key to check
+ * @returns true if the key belongs to dev tools
+ */
+export function isDevToolsStorageKey(key) {
+  if (!key) return false;
+
+  // Check if it starts with our base prefix
+  if (key.startsWith(devToolsStorageKeys.base)) {
+    return true;
+  }
+
+  // Check for legacy dev tool keys that need cleanup
+  for (const pattern of LEGACY_DEV_TOOL_PATTERNS) {
+    if (key.startsWith(pattern)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Filter out dev tools storage keys from a list of keys
+ * @param keys - Array of storage keys
+ * @returns Array of keys that don't belong to dev tools
+ */
+export function filterOutDevToolsKeys(keys) {
+  return keys.filter(key => !isDevToolsStorageKey(key));
+}
+
+/**
+ * Get all dev tools storage keys
+ * Useful for cleanup operations
+ */
+export function getAllDevToolsStorageKeys() {
+  const keys = [];
+
+  // Add all current keys
+  keys.push(devToolsStorageKeys.bubble.settings());
+  keys.push(devToolsStorageKeys.bubble.userPreferences());
+  keys.push(devToolsStorageKeys.bubble.position());
+  keys.push(devToolsStorageKeys.modal.state());
+  keys.push(devToolsStorageKeys.modal.position());
+  keys.push(devToolsStorageKeys.modal.dimensions());
+  keys.push(devToolsStorageKeys.settings.theme());
+  keys.push(devToolsStorageKeys.settings.preferences());
+  keys.push(devToolsStorageKeys.env.currentEnv());
+  keys.push(devToolsStorageKeys.env.overrides());
+  keys.push(devToolsStorageKeys.sentry.filters());
+  keys.push(devToolsStorageKeys.sentry.preferences());
+  keys.push(devToolsStorageKeys.storage.filters());
+  keys.push(devToolsStorageKeys.storage.preferences());
+  keys.push(devToolsStorageKeys.reactQuery.filters());
+  keys.push(devToolsStorageKeys.reactQuery.preferences());
+  return keys;
+}

package/lib/module/storage/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { devToolsStorageKeys, isDevToolsStorageKey } from "./devToolsStorageKeys.js";

package/lib/module/types/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./types.js";

package/lib/module/types/types.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/module/types/types.js

@@ -0,0 +1,8 @@
+"use strict";
+
+// Shared type definitions for the dev tools
+
+// Type guard to check if a value is a plain object (not Date, Array, etc.)
+export function isPlainObject(value) {
+  return value !== null && value !== undefined && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date) && !(value instanceof Error) && !(value instanceof Map) && !(value instanceof Set) && !(value instanceof RegExp) && typeof value !== "function";
+}

package/lib/module/ui/components/BackButton.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { Pressable, StyleSheet } from "react-native";
+import { ChevronLeft } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BackButton({
+  onPress,
+  color = gameUIColors.primary,
+  size = 16,
+  accessibilityLabel = "Go back",
+  accessibilityHint = "Return to previous screen"
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    "sentry-label": "ignore back button",
+    onPress: onPress,
+    style: styles.button,
+    hitSlop: {
+      top: 6,
+      bottom: 6,
+      left: 6,
+      right: 6
+    },
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    children: /*#__PURE__*/_jsx(ChevronLeft, {
+      color: color,
+      size: size
+    })
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: gameUIColors.secondary + "1A",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: gameUIColors.secondary + "33"
+  }
+});

package/lib/module/ui/components/Badge.js

@@ -0,0 +1,213 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+
+// Badge variants
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Color mapping for common statuses - using Buoy theme colors
+const STATUS_COLORS = {
+  success: buoyColors.success,
+  error: buoyColors.error,
+  warning: buoyColors.warning,
+  info: buoyColors.primary,
+  pending: buoyColors.textSecondary,
+  active: buoyColors.success,
+  inactive: buoyColors.textMuted,
+  stale: buoyColors.warning,
+  fetching: buoyColors.primary
+};
+
+// Color mapping for HTTP methods - using Buoy theme colors
+const METHOD_COLORS = {
+  GET: buoyColors.success,
+  POST: buoyColors.primary,
+  PUT: buoyColors.warning,
+  PATCH: buoyColors.textSecondary,
+  DELETE: buoyColors.error,
+  HEAD: buoyColors.textMuted,
+  OPTIONS: buoyColors.primary
+};
+
+// Base Badge component
+
+export function Badge({
+  children,
+  variant = "default",
+  color = "#E5E7EB",
+  size = "medium",
+  style
+}) {
+  const badgeStyles = getBadgeStyles(variant, color, size);
+  return /*#__PURE__*/_jsx(View, {
+    style: [badgeStyles.container, style],
+    children: children
+  });
+}
+
+// Status Badge for success/error/warning states
+
+export function StatusBadge({
+  status,
+  size = "medium",
+  style
+}) {
+  const color = STATUS_COLORS[status.toLowerCase()] || "#6B7280";
+  const badgeStyles = getBadgeStyles("status", color, size);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [badgeStyles.container, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.statusDot, {
+        backgroundColor: color
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [badgeStyles.text, {
+        color
+      }],
+      children: status.charAt(0).toUpperCase() + status.slice(1)
+    })]
+  });
+}
+
+// Count Badge for displaying numbers
+
+export function CountBadge({
+  count,
+  color = buoyColors.primary,
+  size = "small",
+  style,
+  maxCount = 99
+}) {
+  const displayCount = typeof count === "number" && count > maxCount ? `${maxCount}+` : count;
+  const badgeStyles = getBadgeStyles("count", color, size);
+  return /*#__PURE__*/_jsx(View, {
+    style: [badgeStyles.container, styles.countBadge, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [badgeStyles.text, {
+        color
+      }],
+      children: displayCount
+    })
+  });
+}
+
+// Type Badge for data types
+
+export function TypeBadge({
+  type,
+  color,
+  size = "small",
+  style
+}) {
+  const typeColor = color || getTypeColor(type);
+  const badgeStyles = getBadgeStyles("type", typeColor, size);
+  return /*#__PURE__*/_jsx(View, {
+    style: [badgeStyles.container, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [badgeStyles.text, {
+        color: typeColor
+      }],
+      children: type
+    })
+  });
+}
+
+// Method Badge for HTTP methods
+
+export function MethodBadge({
+  method,
+  size = "medium",
+  style
+}) {
+  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
+  const badgeStyles = getBadgeStyles("method", color, size);
+  return /*#__PURE__*/_jsx(View, {
+    style: [badgeStyles.container, styles.methodBadge, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [badgeStyles.text, styles.methodText, {
+        color
+      }],
+      children: method.toUpperCase()
+    })
+  });
+}
+
+// Helper function to get badge styles
+function getBadgeStyles(variant, color, size) {
+  const isOutline = variant === "outline";
+  const backgroundColor = isOutline ? "transparent" : `${color}15`;
+  const borderColor = `${color}40`;
+  const sizeStyles = {
+    small: {
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      fontSize: 11
+    },
+    medium: {
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      fontSize: 12
+    },
+    large: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      fontSize: 14
+    }
+  };
+  const {
+    paddingHorizontal,
+    paddingVertical,
+    fontSize
+  } = sizeStyles[size];
+  return StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor,
+      borderColor,
+      borderWidth: 1,
+      borderRadius: variant === "count" ? 12 : 4,
+      paddingHorizontal,
+      paddingVertical
+    },
+    text: {
+      fontSize,
+      fontWeight: "600"
+    }
+  });
+}
+
+// Helper function to get type color - using Buoy theme
+function getTypeColor(type) {
+  const typeColors = {
+    string: buoyColors.primary,
+    number: buoyColors.primary,
+    boolean: buoyColors.primary,
+    object: buoyColors.textSecondary,
+    array: buoyColors.textSecondary,
+    null: buoyColors.textMuted,
+    undefined: buoyColors.textMuted,
+    function: buoyColors.textSecondary
+  };
+  return typeColors[type.toLowerCase()] || buoyColors.textMuted;
+}
+const styles = StyleSheet.create({
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 4
+  },
+  countBadge: {
+    minWidth: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  methodBadge: {
+    minWidth: 45,
+    alignItems: "center"
+  },
+  methodText: {
+    fontWeight: "700"
+  }
+});

package/lib/module/ui/components/ClipboardHintBanner.js

@@ -0,0 +1,145 @@
+"use strict";
+
+/**
+ * ClipboardHintBanner - A hint banner that shows users how to fix iOS Simulator clipboard sync
+ *
+ * Displays a dismissible hint to educate users about the iOS Simulator's
+ * "Automatically Sync Pasteboard" setting that needs to be toggled if copy doesn't work.
+ * Automatically manages storage to remember when the user acknowledges the hint.
+ */
+
+import { memo, useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Modal, Pressable } from "react-native";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A modal hint that teaches users about iOS Simulator clipboard sync
+ */
+export const ClipboardHintBanner = /*#__PURE__*/memo(function ClipboardHintBanner({
+  visible,
+  onAcknowledge
+}) {
+  const handleAcknowledge = useCallback(() => {
+    onAcknowledge();
+  }, [onAcknowledge]);
+  if (!visible) return null;
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: handleAcknowledge,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      style: styles.overlay,
+      onPress: handleAcknowledge,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.container,
+        onPress: e => e.stopPropagation(),
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.inner,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.iconContainer,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.iconText,
+              children: "\uD83D\uDCCB"
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.messageContainer,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.messageTitle,
+              children: "Clipboard Tip"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.messageText,
+              children: ["Content copied! If paste doesn't work on your Mac, go to the iOS Simulator menu:", "\n\n", /*#__PURE__*/_jsx(Text, {
+                style: styles.menuPath,
+                children: "Edit \u2192 Automatically Sync Pasteboard"
+              }), "\n\n", "Toggle it off and on again to fix the sync."]
+            })]
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.acknowledgeButton,
+            onPress: handleAcknowledge,
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.acknowledgeButtonText,
+              children: "Got it!"
+            })
+          })]
+        })
+      })
+    })
+  });
+});
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24
+  },
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderLeftWidth: 3,
+    borderLeftColor: gameUIColors.info,
+    borderRadius: 12,
+    overflow: "hidden",
+    shadowColor: gameUIColors.info,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 16,
+    elevation: 8,
+    maxWidth: 340
+  },
+  inner: {
+    padding: 20,
+    gap: 16,
+    alignItems: "center"
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: `${gameUIColors.info}20`,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  iconText: {
+    fontSize: 24
+  },
+  messageContainer: {
+    gap: 8
+  },
+  messageTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: gameUIColors.info,
+    letterSpacing: 0.3,
+    textAlign: "center"
+  },
+  messageText: {
+    fontSize: 13,
+    color: gameUIColors.primaryLight,
+    lineHeight: 20,
+    textAlign: "center"
+  },
+  menuPath: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: gameUIColors.primary,
+    fontWeight: "600"
+  },
+  acknowledgeButton: {
+    backgroundColor: gameUIColors.info,
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 8,
+    marginTop: 4
+  },
+  acknowledgeButtonText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: "#FFFFFF"
+  }
+});