@buoy-gg/route-events 1.7.2

package/lib/module/components/NavigationStack.js

@@ -0,0 +1,580 @@
+"use strict";
+
+/**
+ * NavigationStack - Visual representation of current navigation stack
+ *
+ * Shows all screens currently mounted in memory, which one is visible,
+ * and provides controls to manipulate the stack.
+ */
+
+import { useState, useMemo } from "react";
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import { ChevronDown, ChevronRight, Info, InlineCopyButton, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+
+// Lazy load the license hooks to avoid circular dependencies
+let _useIsPro = null;
+let _licenseLoadAttempted = false;
+function loadLicenseModule() {
+  if (_licenseLoadAttempted) return;
+  _licenseLoadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+    }
+  } catch {
+    // License package not available
+  }
+}
+function getUseIsPro() {
+  loadLicenseModule();
+  return _useIsPro ?? (() => false);
+}
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { useNavigationStack } from "../useNavigationStack";
+import { useRouter } from "expo-router";
+
+// ============================================================================
+// Types
+// ============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function NavigationStack({
+  style
+}) {
+  const {
+    stack,
+    focusedRoute,
+    stackDepth,
+    isAtRoot,
+    isLoaded,
+    error,
+    navigateToIndex,
+    goBack,
+    popToTop
+  } = useNavigationStack();
+  const router = useRouter();
+  const [expandedIndex, setExpandedIndex] = useState(null);
+  const [showHelp, setShowHelp] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  // Check Pro status internally
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+
+  // ✅ All hooks must be called BEFORE any conditional returns
+  // Prepare stack data for copying
+  const stackDataForCopy = useMemo(() => {
+    const stackData = stack.map(item => ({
+      pathname: item.pathname,
+      name: item.name,
+      params: item.params,
+      isFocused: item.isFocused
+    }));
+    return JSON.stringify(stackData, null, 2);
+  }, [stack]);
+
+  // Determine which route actions should operate on
+  // If a stack item is expanded, actions target that route
+  // Otherwise, actions target the focused (visible) route
+  const selectedRoute = useMemo(() => {
+    if (expandedIndex !== null && stack[expandedIndex]) {
+      return stack[expandedIndex];
+    }
+    return focusedRoute;
+  }, [expandedIndex, stack, focusedRoute]);
+  const isNonFocusedSelected = useMemo(() => {
+    return expandedIndex !== null && stack[expandedIndex] && !stack[expandedIndex].isFocused;
+  }, [expandedIndex, stack]);
+
+  // Loading state
+  if (!isLoaded) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, style],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.loadingContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.loadingText,
+          children: "Loading navigation stack..."
+        })
+      })
+    });
+  }
+
+  // Error state
+  if (error) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.errorContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.errorText,
+          children: "Error loading stack"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.errorDetail,
+          children: error.message
+        })]
+      })
+    });
+  }
+
+  // Empty state
+  if (stack.length === 0) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "No navigation stack"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySubtext,
+          children: "Navigate to a route to see the stack"
+        })]
+      })
+    });
+  }
+
+  // Handlers
+  const handleGoBack = () => {
+    // Gate behind Pro
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    if (isAtRoot) {
+      Alert.alert("Cannot Go Back", "Already at the root of the stack");
+      return;
+    }
+    goBack();
+  };
+  const handlePopToTop = () => {
+    // Gate behind Pro
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    if (isAtRoot) {
+      Alert.alert("Already at Top", "Stack only has one screen");
+      return;
+    }
+    Alert.alert("Pop to Top", "This will remove all screens except the root screen.", [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Pop to Top",
+      style: "destructive",
+      onPress: popToTop
+    }]);
+  };
+  const toggleExpand = index => {
+    setExpandedIndex(expandedIndex === index ? null : index);
+  };
+  const handleGo = () => {
+    // Gate behind Pro
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    if (!selectedRoute) return;
+
+    // If the selected route is already focused, do nothing
+    if (selectedRoute.isFocused) {
+      Alert.alert("Already There", "This route is already visible");
+      return;
+    }
+
+    // Navigate to the selected route
+    navigateToIndex(selectedRoute.index);
+  };
+  const handlePopTo = () => {
+    // Gate behind Pro
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    if (!selectedRoute) return;
+
+    // If selected route is the focused one, we can't pop to it
+    if (selectedRoute.isFocused) {
+      Alert.alert("Cannot Pop", "Selected route is already visible");
+      return;
+    }
+
+    // If selected route is at the top of stack, nothing to pop
+    if (selectedRoute.index === stackDepth - 1) {
+      Alert.alert("Cannot Pop", "No screens above selected route");
+      return;
+    }
+    const screensToRemove = stackDepth - 1 - selectedRoute.index;
+    Alert.alert("Pop to Route", `Remove ${screensToRemove} screen${screensToRemove !== 1 ? "s" : ""} above ${selectedRoute.pathname}?`, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Pop",
+      style: "destructive",
+      onPress: () => {
+        // Navigate to the selected route, which effectively pops everything above it
+        navigateToIndex(selectedRoute.index);
+      }
+    }]);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.iconButton, showHelp && styles.iconButtonActive],
+        onPress: () => setShowHelp(!showHelp),
+        children: /*#__PURE__*/_jsx(Info, {
+          size: 16,
+          color: showHelp ? buoyColors.primary : buoyColors.textSecondary
+        })
+      }), /*#__PURE__*/_jsx(InlineCopyButton, {
+        value: stackDataForCopy,
+        buttonStyle: styles.iconButton
+      })]
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.stackScroll,
+      contentContainerStyle: styles.stackContent,
+      children: [...stack].reverse().map((item, reverseIndex) => {
+        const actualIndex = stack.length - 1 - reverseIndex;
+        const isExpanded = expandedIndex === actualIndex;
+        const hasParams = Object.keys(item.params).length > 0;
+        return /*#__PURE__*/_jsx(View, {
+          style: styles.stackItemWrapper,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: [styles.stackItem, isExpanded && styles.stackItemSelected],
+            children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: styles.stackItemHeader,
+              onPress: () => toggleExpand(actualIndex),
+              activeOpacity: 0.7,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.expandIndicator,
+                children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+                  size: 14,
+                  color: buoyColors.textSecondary
+                }) : /*#__PURE__*/_jsx(ChevronRight, {
+                  size: 14,
+                  color: buoyColors.textSecondary
+                })
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.stackItemPath,
+                numberOfLines: 1,
+                children: item.pathname
+              }), /*#__PURE__*/_jsx(InlineCopyButton, {
+                value: item.pathname,
+                buttonStyle: styles.copyRouteButton
+              }), item.isFocused ? /*#__PURE__*/_jsx(View, {
+                style: styles.focusedBadge,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.focusedBadgeText,
+                  children: "VISIBLE"
+                })
+              }) : /*#__PURE__*/_jsx(View, {
+                style: styles.memoryBadge,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.memoryBadgeText,
+                  children: "MEMORY"
+                })
+              })]
+            }), isExpanded && /*#__PURE__*/_jsxs(View, {
+              style: styles.expandedContent,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.detailRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.detailLabel,
+                  children: "Route Name:"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.detailValue,
+                  children: item.name
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.detailRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.detailLabel,
+                  children: "Position:"
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.detailValue,
+                  children: [actualIndex, " / ", stackDepth - 1]
+                })]
+              }), hasParams && /*#__PURE__*/_jsx(View, {
+                style: styles.dataViewerContainer,
+                children: /*#__PURE__*/_jsx(DataViewer, {
+                  title: "Parameters",
+                  data: item.params,
+                  showTypeFilter: false
+                })
+              })]
+            })]
+          })
+        }, `stack-${actualIndex}-${item.key}`);
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.actionsContainer,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.actionsRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, isAtRoot && styles.actionButtonDisabled],
+            onPress: handleGoBack,
+            disabled: isAtRoot,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionButtonText, isAtRoot && styles.actionButtonTextDisabled],
+              children: "Back"
+            })
+          }), showHelp && /*#__PURE__*/_jsx(Text, {
+            style: styles.helpText,
+            children: "Go back one screen"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, selectedRoute?.isFocused && styles.actionButtonDisabled],
+            onPress: handleGo,
+            disabled: selectedRoute?.isFocused,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionButtonText, selectedRoute?.isFocused && styles.actionButtonTextDisabled],
+              children: "Go"
+            })
+          }), showHelp && /*#__PURE__*/_jsx(Text, {
+            style: styles.helpText,
+            children: "Navigate to selected route"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, (selectedRoute?.isFocused || selectedRoute?.index === stackDepth - 1) && styles.actionButtonDisabled],
+            onPress: handlePopTo,
+            disabled: selectedRoute?.isFocused || selectedRoute?.index === stackDepth - 1,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionButtonText, (selectedRoute?.isFocused || selectedRoute?.index === stackDepth - 1) && styles.actionButtonTextDisabled],
+              children: "Pop To"
+            })
+          }), showHelp && /*#__PURE__*/_jsx(Text, {
+            style: styles.helpText,
+            children: "Remove screens above selected"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Stack Navigation"
+    })]
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  loadingText: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  errorText: {
+    color: buoyColors.error,
+    fontSize: 16,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    marginBottom: 8
+  },
+  errorDetail: {
+    color: buoyColors.textSecondary,
+    fontSize: 12,
+    fontFamily: "monospace",
+    textAlign: "center"
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32
+  },
+  emptyText: {
+    color: buoyColors.text,
+    fontSize: 16,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    marginBottom: 8
+  },
+  emptySubtext: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    fontFamily: "monospace",
+    textAlign: "center"
+  },
+  header: {
+    flexDirection: "row",
+    padding: 8,
+    gap: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  },
+  iconButton: {
+    padding: 6,
+    borderRadius: 4
+  },
+  iconButtonActive: {
+    backgroundColor: buoyColors.input
+  },
+  stackScroll: {
+    flex: 1
+  },
+  stackContent: {
+    padding: 8
+  },
+  stackItemWrapper: {
+    marginBottom: 6
+  },
+  stackItem: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    overflow: "hidden"
+  },
+  stackItemSelected: {
+    borderColor: buoyColors.primary,
+    borderWidth: 2
+  },
+  stackItemHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    gap: 8
+  },
+  expandIndicator: {
+    width: 20,
+    alignItems: "center"
+  },
+  stackItemPath: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  copyRouteButton: {
+    padding: 4,
+    marginLeft: 4
+  },
+  focusedBadge: {
+    backgroundColor: buoyColors.success,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  focusedBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: buoyColors.base,
+    fontFamily: "monospace"
+  },
+  memoryBadge: {
+    backgroundColor: buoyColors.input,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  memoryBadgeText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  expandedContent: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border
+  },
+  detailRow: {
+    marginBottom: 8
+  },
+  detailLabel: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    marginBottom: 2
+  },
+  detailValue: {
+    fontSize: 12,
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  dataViewerContainer: {
+    marginTop: 4,
+    marginHorizontal: -12,
+    marginBottom: 8
+  },
+  actionsContainer: {
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  actionsRow: {
+    flexDirection: "row",
+    gap: 6,
+    marginBottom: 6
+  },
+  actionWrapper: {
+    flex: 1
+  },
+  actionButton: {
+    backgroundColor: buoyColors.input,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    borderRadius: 6,
+    alignItems: "center"
+  },
+  actionButtonDisabled: {
+    opacity: 0.5
+  },
+  actionButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  actionButtonTextDisabled: {
+    color: buoyColors.textMuted
+  },
+  helpText: {
+    fontSize: 9,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    textAlign: "center",
+    marginTop: 4,
+    lineHeight: 12
+  }
+});