@buoy-gg/route-events 7.0.1 → 7.0.2

package/lib/module/components/RouteEventDetailContent.js

@@ -1,494 +0,0 @@
-"use strict";
-
-import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { useEffect, useState, useCallback, useRef } from "react";
-import { formatRelativeTime, devToolsStorageKeys, ChevronLeft, ChevronRight, AlertCircle, Navigation as NavigationIcon, GitBranch, persistentStorage, buoyColors } from "@buoy-gg/shared-ui";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export function RouteEventDetailContent({
-  conversation,
-  selectedEventIndex = 0,
-  onEventIndexChange = () => {},
-  disableInternalFooter = false
-}) {
-  // Internal view state
-  const [internalActiveView, setInternalActiveView] = useState("current");
-
-  // Track if preferences have been loaded
-  const hasLoadedPreferences = useRef(false);
-
-  // Load saved preferences on mount
-  useEffect(() => {
-    if (hasLoadedPreferences.current) return;
-    const loadPreferences = async () => {
-      try {
-        // Load detail view preference (current/diff)
-        const savedDetailView = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.detailView());
-        if (savedDetailView === "current" || savedDetailView === "diff") {
-          setInternalActiveView(savedDetailView);
-        }
-        hasLoadedPreferences.current = true;
-      } catch (error) {
-        // Failed to load view preferences
-      }
-    };
-    loadPreferences();
-  }, []);
-
-  // Save detail view preference when changed
-  const handleViewChange = useCallback(async view => {
-    setInternalActiveView(view);
-    try {
-      await persistentStorage.setItem(devToolsStorageKeys.routeEvents.detailView(), view);
-    } catch (error) {
-      // Failed to save detail view preference
-    }
-  }, []);
-  const renderRouteContent = (event, label) => {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.valueContent,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.valueHeader,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: label
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: {
-            pathname: event.pathname,
-            segments: event.segments,
-            params: event.params,
-            timestamp: new Date(event.timestamp).toISOString()
-          },
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  };
-
-  // Get all events sorted by time
-  const navigationItems = conversation.events.sort((a, b) => a.timestamp - b.timestamp);
-  const totalEvents = navigationItems.length;
-
-  // Precise time HH:MM:SS.mmm
-  const formatTimeWithMs = useCallback(timestamp => {
-    const date = new Date(timestamp);
-    const h = String(date.getHours()).padStart(2, "0");
-    const m = String(date.getMinutes()).padStart(2, "0");
-    const s = String(date.getSeconds()).padStart(2, "0");
-    const ms = String(date.getMilliseconds()).padStart(3, "0");
-    return `${h}:${m}:${s}.${ms}`;
-  }, []);
-
-  // Render current value tab
-  const renderCurrentValue = () => {
-    const selectedEvent = navigationItems[selectedEventIndex];
-    const eventToShow = selectedEvent ?? conversation.lastEvent;
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.fullPageSection,
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.contentCard,
-        children: renderRouteContent(eventToShow, "CURRENT ROUTE STATE")
-      })
-    });
-  };
-
-  // Render diff tab
-  const renderDiff = () => {
-    if (navigationItems.length === 0) {
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.emptyState,
-        children: [/*#__PURE__*/_jsx(AlertCircle, {
-          size: 32,
-          color: buoyColors.textMuted
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyText,
-          children: "No changes to display"
-        })]
-      });
-    }
-    const prevIndex = Math.max(0, selectedEventIndex - 1);
-    const currentIndex = selectedEventIndex;
-    const previousEvent = navigationItems[prevIndex];
-    const currentEvent = navigationItems[currentIndex];
-    return /*#__PURE__*/_jsx(ScrollView, {
-      style: styles.fullPageSection,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.diffContainer,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.diffSection,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.diffSectionTitle,
-            children: "PREVIOUS"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.contentCard,
-            children: renderRouteContent(previousEvent, `Event #${prevIndex + 1}`)
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.diffDivider
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.diffSection,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.diffSectionTitle,
-            children: "CURRENT"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.contentCard,
-            children: renderRouteContent(currentEvent, `Event #${currentIndex + 1}`)
-          })]
-        })]
-      })
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [styles.contentOnly, {
-        flex: 1,
-        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.viewToggleContainer,
-        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: [styles.viewToggleCard, internalActiveView === "current" && styles.viewToggleCardActive],
-          onPress: () => handleViewChange("current"),
-          activeOpacity: 0.8,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.viewToggleContent,
-            children: [/*#__PURE__*/_jsx(NavigationIcon, {
-              size: 16,
-              color: internalActiveView === "current" ? buoyColors.primary : buoyColors.textSecondary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.viewToggleLabel, internalActiveView === "current" && styles.viewToggleLabelActive],
-              children: "CURRENT STATE"
-            })]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.viewToggleDescription, internalActiveView === "current" && {
-              color: buoyColors.text
-            }],
-            children: "View the current route state"
-          })]
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: [styles.viewToggleCard, internalActiveView === "diff" && styles.viewToggleCardActive],
-          onPress: () => handleViewChange("diff"),
-          activeOpacity: 0.8,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.viewToggleContent,
-            children: [/*#__PURE__*/_jsx(GitBranch, {
-              size: 16,
-              color: internalActiveView === "diff" ? buoyColors.success : buoyColors.textSecondary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.viewToggleLabel, internalActiveView === "diff" && styles.viewToggleLabelActive],
-              children: "DIFF VIEW"
-            })]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.viewToggleDescription, internalActiveView === "diff" && {
-              color: buoyColors.text
-            }],
-            children: "Compare changes between events"
-          })]
-        })]
-      }), internalActiveView === "current" && renderCurrentValue(), internalActiveView === "diff" && renderDiff()]
-    }), totalEvents > 1 && !disableInternalFooter && /*#__PURE__*/_jsxs(View, {
-      style: styles.stickyFooter,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        onPress: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
-        disabled: selectedEventIndex === 0,
-        style: [styles.navButton, selectedEventIndex === 0 && styles.navButtonDisabled],
-        children: [/*#__PURE__*/_jsx(ChevronLeft, {
-          size: 20,
-          color: selectedEventIndex === 0 ? buoyColors.textMuted : buoyColors.text
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, selectedEventIndex === 0 && styles.navButtonTextDisabled],
-          children: "Previous"
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.eventCounterContainer,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          style: styles.eventCounter,
-          children: ["Event ", selectedEventIndex + 1, " of ", totalEvents]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.eventTimestamp,
-          children: formatRelativeTime(new Date(navigationItems[selectedEventIndex]?.timestamp))
-        })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        onPress: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
-        disabled: selectedEventIndex === totalEvents - 1,
-        style: [styles.navButton, selectedEventIndex === totalEvents - 1 && styles.navButtonDisabled],
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, selectedEventIndex === totalEvents - 1 && styles.navButtonTextDisabled],
-          children: "Next"
-        }), /*#__PURE__*/_jsx(ChevronRight, {
-          size: 20,
-          color: selectedEventIndex === totalEvents - 1 ? buoyColors.textMuted : buoyColors.text
-        })]
-      })]
-    })]
-  });
-}
-
-// External footer component to be rendered by the modal outside the ScrollView
-export function RouteEventDetailFooter({
-  conversation,
-  selectedEventIndex = 0,
-  onEventIndexChange = () => {}
-}) {
-  const navigationItems = conversation.events.sort((a, b) => a.timestamp - b.timestamp);
-  const totalEvents = navigationItems.length;
-  if (totalEvents <= 1) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.externalFooterBar,
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
-      disabled: selectedEventIndex === 0,
-      style: [styles.navButton, selectedEventIndex === 0 && styles.navButtonDisabled],
-      children: [/*#__PURE__*/_jsx(ChevronLeft, {
-        size: 20,
-        color: selectedEventIndex === 0 ? buoyColors.textMuted : buoyColors.text
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.navButtonText, selectedEventIndex === 0 && styles.navButtonTextDisabled],
-        children: "Previous"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.eventCounterContainer,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: styles.eventCounter,
-        children: ["Event ", selectedEventIndex + 1, " of ", totalEvents]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.eventTimestamp,
-        children: formatRelativeTime(new Date(navigationItems[selectedEventIndex]?.timestamp))
-      })]
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
-      disabled: selectedEventIndex === totalEvents - 1,
-      style: [styles.navButton, selectedEventIndex === totalEvents - 1 && styles.navButtonDisabled],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.navButtonText, selectedEventIndex === totalEvents - 1 && styles.navButtonTextDisabled],
-        children: "Next"
-      }), /*#__PURE__*/_jsx(ChevronRight, {
-        size: 20,
-        color: selectedEventIndex === totalEvents - 1 ? buoyColors.textMuted : buoyColors.text
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  contentOnly: {
-    flex: 1,
-    backgroundColor: buoyColors.base
-  },
-  stickyFooter: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: buoyColors.base,
-    borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  externalFooterBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: buoyColors.base,
-    borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  fullPageSection: {
-    flex: 1,
-    paddingHorizontal: 14,
-    paddingVertical: 10
-  },
-  emptyState: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 48
-  },
-  emptyText: {
-    marginTop: 12,
-    fontSize: 14,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace"
-  },
-  valueContent: {
-    marginTop: 4
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace",
-    letterSpacing: 0.5,
-    fontWeight: "600",
-    textTransform: "uppercase"
-  },
-  valueBox: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    padding: 8
-  },
-  navButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 6,
-    backgroundColor: buoyColors.card,
-    minWidth: 100,
-    justifyContent: "center"
-  },
-  navButtonDisabled: {
-    opacity: 0.3
-  },
-  navButtonText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: buoyColors.text,
-    fontFamily: "monospace",
-    textTransform: "uppercase"
-  },
-  navButtonTextDisabled: {
-    color: buoyColors.textMuted
-  },
-  eventCounterContainer: {
-    alignItems: "center"
-  },
-  eventCounter: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: buoyColors.text,
-    fontFamily: "monospace",
-    textTransform: "uppercase"
-  },
-  eventTimestamp: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace",
-    marginTop: 2
-  },
-  contentCard: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.04,
-    shadowRadius: 16,
-    elevation: 2
-  },
-  // View Toggle Cards
-  viewToggleContainer: {
-    flexDirection: "row",
-    gap: 12,
-    padding: 14,
-    backgroundColor: buoyColors.base
-  },
-  viewToggleCard: {
-    flex: 1,
-    backgroundColor: buoyColors.card,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    padding: 14,
-    gap: 8
-  },
-  viewToggleCardActive: {
-    borderWidth: 1.5,
-    borderColor: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    shadowColor: buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  viewToggleContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  viewToggleLabel: {
-    fontSize: 12,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: buoyColors.textSecondary,
-    textTransform: "uppercase"
-  },
-  viewToggleLabelActive: {
-    color: buoyColors.text
-  },
-  viewToggleDescription: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
-    lineHeight: 16
-  },
-  // Diff view styles
-  diffContainer: {
-    gap: 16
-  },
-  diffSection: {
-    gap: 8
-  },
-  diffSectionTitle: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    paddingHorizontal: 4
-  },
-  diffDivider: {
-    height: 1,
-    backgroundColor: buoyColors.border,
-    marginVertical: 8
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  }
-});

package/lib/typescript/components/RouteEventDetailContent.d.ts

@@ -1,21 +0,0 @@
-import type { RouteChangeEvent } from "../RouteObserver";
-interface RouteConversation {
-    pathname: string;
-    lastEvent: RouteChangeEvent;
-    events: RouteChangeEvent[];
-    totalNavigations: number;
-}
-interface RouteEventDetailContentProps {
-    conversation: RouteConversation;
-    selectedEventIndex?: number;
-    onEventIndexChange?: (index: number) => void;
-    disableInternalFooter?: boolean;
-}
-export declare function RouteEventDetailContent({ conversation, selectedEventIndex, onEventIndexChange, disableInternalFooter, }: RouteEventDetailContentProps): import("react").JSX.Element;
-export declare function RouteEventDetailFooter({ conversation, selectedEventIndex, onEventIndexChange, }: {
-    conversation: RouteConversation;
-    selectedEventIndex?: number;
-    onEventIndexChange?: (index: number) => void;
-}): import("react").JSX.Element | null;
-export {};
-//# sourceMappingURL=RouteEventDetailContent.d.ts.map

package/lib/typescript/components/RouteEventDetailContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RouteEventDetailContent.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventDetailContent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAczD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,4BAA4B;IACpC,YAAY,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,kBAAsB,EACtB,kBAA6B,EAC7B,qBAA6B,GAC9B,EAAE,4BAA4B,+BA0T9B;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EACZ,kBAAsB,EACtB,kBAA6B,GAC9B,EAAE;IACD,YAAY,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,sCA2EA"}