@buoy-gg/events 2.1.1

package/lib/commonjs/components/EventsCopySettingsView.js

@@ -0,0 +1,645 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventsCopySettingsView = EventsCopySettingsView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _copySettings = require("../types/copySettings");
+var _eventExportFormatter = require("../utils/eventExportFormatter");
+var _copySettingsStorage = require("../utils/copySettingsStorage");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * EventsCopySettingsView
+ *
+ * Settings UI for configuring event export format and content.
+ * Based on NetworkCopySettingsView pattern.
+ */
+
+// Size thresholds for warnings
+const SIZE_WARNING_THRESHOLD = 50 * 1024; // 50KB
+const SIZE_DANGER_THRESHOLD = 200 * 1024; // 200KB
+
+// Helper to format bytes
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// Mock events for preview when no real events exist
+function createMockEvents() {
+  const now = Date.now();
+  return [{
+    id: "mock-1",
+    source: "storage-async",
+    timestamp: now - 2000,
+    title: "Set Item",
+    subtitle: "user_cart",
+    status: "success",
+    originalEvent: {
+      action: "setItem",
+      key: "user_cart",
+      value: {
+        items: 2
+      }
+    }
+  }, {
+    id: "mock-2",
+    source: "react-query-query",
+    timestamp: now - 1500,
+    title: "cart \u203A items",
+    subtitle: "Fetching...",
+    status: "pending",
+    originalEvent: {
+      type: "query-fetch-start",
+      queryKey: ["cart", "items"]
+    },
+    correlationId: "rq-query-cart",
+    sequenceInGroup: 1
+  }, {
+    id: "mock-3",
+    source: "react-query-query",
+    timestamp: now - 1000,
+    title: "cart \u203A items",
+    subtitle: "Success \u00B7 500ms",
+    status: "success",
+    originalEvent: {
+      type: "query-fetch-success",
+      queryKey: ["cart", "items"],
+      data: {
+        items: []
+      }
+    },
+    correlationId: "rq-query-cart",
+    sequenceInGroup: 2
+  }, {
+    id: "mock-4",
+    source: "network",
+    timestamp: now - 500,
+    title: "POST /api/checkout",
+    subtitle: "402 \u00B7 450ms",
+    status: "error",
+    originalEvent: {
+      method: "POST",
+      url: "/api/checkout",
+      status: 402,
+      error: "Payment required"
+    }
+  }];
+}
+function EventsCopySettingsView({
+  events = [],
+  initialSettings = _copySettings.DEFAULT_COPY_SETTINGS,
+  onSettingsChange
+}) {
+  const {
+    isPro
+  } = (0, _sharedUi.useFeatureGate)();
+  const [settings, setSettings] = (0, _react.useState)(initialSettings);
+  const [isPreviewExpanded, setIsPreviewExpanded] = (0, _react.useState)(false);
+  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
+
+  // Load persisted settings on mount
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    (0, _copySettingsStorage.loadCopySettings)().then(savedSettings => {
+      if (mounted && savedSettings) {
+        setSettings(savedSettings);
+        onSettingsChange?.(savedSettings);
+      }
+      if (mounted) {
+        setIsLoaded(true);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [onSettingsChange]);
+
+  // Update internal state, notify parent, and persist
+  const updateSettings = (0, _react.useCallback)(newSettings => {
+    setSettings(newSettings);
+    onSettingsChange?.(newSettings);
+    // Persist to storage
+    (0, _copySettingsStorage.saveCopySettings)(newSettings);
+  }, [onSettingsChange]);
+
+  // Use mock events if no real events
+  const hasLiveData = events.length > 0;
+  const previewEvents = hasLiveData ? events : createMockEvents();
+
+  // Detect active preset
+  const activePreset = (0, _react.useMemo)(() => (0, _copySettings.detectActivePreset)(settings), [settings]);
+
+  // Estimate size
+  const estimatedSize = (0, _react.useMemo)(() => (0, _eventExportFormatter.estimateExportSize)(previewEvents, settings), [previewEvents, settings]);
+
+  // Size warning level
+  const sizeWarningLevel = (0, _react.useMemo)(() => {
+    if (estimatedSize >= SIZE_DANGER_THRESHOLD) return "danger";
+    if (estimatedSize >= SIZE_WARNING_THRESHOLD) return "warning";
+    return "none";
+  }, [estimatedSize]);
+
+  // Generate copy text
+  const generateCopyText = (0, _react.useCallback)(() => {
+    return (0, _eventExportFormatter.generateExport)(previewEvents, settings);
+  }, [previewEvents, settings]);
+
+  // Handle preset selection
+  const applyPreset = (0, _react.useCallback)(presetName => {
+    const preset = _copySettings.COPY_PRESETS[presetName];
+    updateSettings({
+      ...preset,
+      // Convert readonly array to mutable array
+      filterSources: [...preset.filterSources]
+    });
+  }, [updateSettings]);
+
+  // Handle option changes
+  const handleOptionChange = (0, _react.useCallback)((optionId, value) => {
+    const [group, key] = optionId.split("::");
+    if (group === "preset") {
+      applyPreset(key);
+      return;
+    }
+    if (group === "include") {
+      updateSettings({
+        ...settings,
+        [key]: !settings[key]
+      });
+      return;
+    }
+    if (group === "format") {
+      updateSettings({
+        ...settings,
+        format: value
+      });
+      return;
+    }
+    if (group === "timestamp") {
+      updateSettings({
+        ...settings,
+        timestampFormat: value
+      });
+      return;
+    }
+    if (group === "filter") {
+      updateSettings({
+        ...settings,
+        filterMode: value
+      });
+      return;
+    }
+    if (group === "threshold") {
+      updateSettings({
+        ...settings,
+        dataSizeThreshold: value
+      });
+      return;
+    }
+  }, [settings, updateSettings, applyPreset]);
+
+  // Render preview content
+  const renderPreviewContent = (0, _react.useCallback)(() => {
+    const eventCount = previewEvents.length;
+
+    // Collapsed state
+    if (!isPreviewExpanded) {
+      const warningColor = sizeWarningLevel === "danger" ? _sharedUi.macOSColors.semantic.error : sizeWarningLevel === "warning" ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.secondary;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.collapsedPreview,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.expandButton,
+          onPress: () => setIsPreviewExpanded(true),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.expandButtonContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
+              size: 16,
+              color: _sharedUi.macOSColors.semantic.info
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.expandButtonTextContainer,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.expandButtonTitle,
+                children: "Show Preview"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.expandButtonSubtitle,
+                children: [eventCount, " event", eventCount !== 1 ? "s" : "", " \\u00B7 ~", formatBytes(estimatedSize), !hasLiveData ? " (mock data)" : ""]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+              size: 16,
+              color: _sharedUi.macOSColors.text.muted
+            })]
+          })
+        }), sizeWarningLevel !== "none" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+            size: 12,
+            color: warningColor
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sizeWarningText, {
+              color: warningColor
+            }],
+            children: sizeWarningLevel === "danger" ? "Very large payload - may cause performance issues" : "Large payload - preview may be slow"
+          })]
+        })]
+      });
+    }
+
+    // Expanded state
+    const exportText = generateCopyText();
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.collapseButton,
+        onPress: () => setIsPreviewExpanded(false),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.collapseButtonText,
+          children: "Hide Preview"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
+          size: 14,
+          color: _sharedUi.macOSColors.text.secondary
+        })]
+      }), settings.format === "json" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+        data: JSON.parse(exportText),
+        title: "",
+        showTypeFilter: false
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.previewScroll,
+        nestedScrollEnabled: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.previewText,
+          selectable: isPro,
+          children: exportText
+        })
+      })]
+    });
+  }, [isPreviewExpanded, previewEvents, settings, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText, isPro]);
+
+  // Render preview header actions
+  const renderPreviewHeaderActions = (0, _react.useCallback)(() => {
+    const summary = (0, _eventExportFormatter.getExportSummary)(previewEvents);
+    const statusLabel = hasLiveData ? `${summary.totalEvents} events` : "Mock data (no events captured)";
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.statusLabel,
+        children: statusLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+        value: generateCopyText()
+      })]
+    });
+  }, [hasLiveData, previewEvents, generateCopyText]);
+
+  // Build filter config
+  const dynamicFilterConfig = (0, _react.useMemo)(() => ({
+    sections: [
+    // Presets Section
+    {
+      id: "presets",
+      title: "Presets",
+      type: "custom",
+      data: [{
+        id: "preset::llm",
+        label: _copySettings.PRESET_METADATA.llm.label,
+        icon: _sharedUi.Zap,
+        color: _copySettings.PRESET_METADATA.llm.color,
+        value: "llm",
+        isActive: activePreset === "llm",
+        description: _copySettings.PRESET_METADATA.llm.description
+      }, {
+        id: "preset::bugReport",
+        label: _copySettings.PRESET_METADATA.bugReport.label,
+        icon: _sharedUi.AlertTriangle,
+        color: _copySettings.PRESET_METADATA.bugReport.color,
+        value: "bugReport",
+        isActive: activePreset === "bugReport",
+        description: _copySettings.PRESET_METADATA.bugReport.description
+      }, {
+        id: "preset::json",
+        label: _copySettings.PRESET_METADATA.json.label,
+        icon: _sharedUi.FileCode,
+        color: _copySettings.PRESET_METADATA.json.color,
+        value: "json",
+        isActive: activePreset === "json",
+        description: _copySettings.PRESET_METADATA.json.description
+      }, {
+        id: "preset::errors",
+        label: _copySettings.PRESET_METADATA.errors.label,
+        icon: _sharedUi.XCircle,
+        color: _copySettings.PRESET_METADATA.errors.color,
+        value: "errors",
+        isActive: activePreset === "errors",
+        description: _copySettings.PRESET_METADATA.errors.description
+      }, {
+        id: "preset::minimal",
+        label: _copySettings.PRESET_METADATA.minimal.label,
+        icon: _sharedUi.FileText,
+        color: _copySettings.PRESET_METADATA.minimal.color,
+        value: "minimal",
+        isActive: activePreset === "minimal",
+        description: _copySettings.PRESET_METADATA.minimal.description
+      }, {
+        id: "preset::custom",
+        label: "Custom",
+        icon: _sharedUi.Settings,
+        color: _sharedUi.macOSColors.text.secondary,
+        value: "custom",
+        isActive: activePreset === null,
+        description: "User-configured"
+      }]
+    },
+    // Include Section
+    {
+      id: "include",
+      title: "Include",
+      type: "custom",
+      data: [{
+        id: "include::includeSource",
+        label: "Source",
+        value: "includeSource",
+        isActive: settings.includeSource
+      }, {
+        id: "include::includeStatus",
+        label: "Status",
+        value: "includeStatus",
+        isActive: settings.includeStatus
+      }, {
+        id: "include::includeTitle",
+        label: "Title",
+        value: "includeTitle",
+        isActive: settings.includeTitle
+      }, {
+        id: "include::includeSubtitle",
+        label: "Subtitle",
+        value: "includeSubtitle",
+        isActive: settings.includeSubtitle
+      }, {
+        id: "include::includeCorrelation",
+        label: "Correlation",
+        value: "includeCorrelation",
+        isActive: settings.includeCorrelation
+      }, {
+        id: "include::includeDuration",
+        label: "Duration",
+        value: "includeDuration",
+        isActive: settings.includeDuration
+      }, {
+        id: "include::includeSummaryHeader",
+        label: "Summary",
+        value: "includeSummaryHeader",
+        isActive: settings.includeSummaryHeader
+      }, {
+        id: "include::includeEventData",
+        label: "Data",
+        value: "includeEventData",
+        isActive: settings.includeEventData
+      }]
+    },
+    // Format Section
+    {
+      id: "format",
+      title: "Format",
+      type: "custom",
+      data: [{
+        id: "format::markdown",
+        label: "Markdown",
+        icon: _sharedUi.FileText,
+        color: _sharedUi.macOSColors.semantic.info,
+        value: "markdown",
+        isActive: settings.format === "markdown"
+      }, {
+        id: "format::json",
+        label: "JSON",
+        icon: _sharedUi.FileCode,
+        color: _sharedUi.macOSColors.semantic.warning,
+        value: "json",
+        isActive: settings.format === "json"
+      }, {
+        id: "format::plaintext",
+        label: "Text",
+        icon: _sharedUi.Hash,
+        color: _sharedUi.macOSColors.text.secondary,
+        value: "plaintext",
+        isActive: settings.format === "plaintext"
+      }]
+    },
+    // Timestamp Section
+    {
+      id: "timestamp",
+      title: "Timestamps",
+      type: "custom",
+      data: [{
+        id: "timestamp::relative",
+        label: "Relative",
+        value: "relative",
+        isActive: settings.timestampFormat === "relative",
+        description: "+0ms, +150ms"
+      }, {
+        id: "timestamp::absolute",
+        label: "Absolute",
+        value: "absolute",
+        isActive: settings.timestampFormat === "absolute",
+        description: "ISO format"
+      }, {
+        id: "timestamp::both",
+        label: "Both",
+        value: "both",
+        isActive: settings.timestampFormat === "both",
+        description: "Both formats"
+      }]
+    },
+    // Filter Section
+    {
+      id: "filter",
+      title: "Filter Events",
+      type: "custom",
+      data: [{
+        id: "filter::all",
+        label: "All",
+        value: "all",
+        isActive: settings.filterMode === "all"
+      }, {
+        id: "filter::errors",
+        label: "Errors",
+        icon: _sharedUi.XCircle,
+        color: _sharedUi.macOSColors.semantic.error,
+        value: "errors",
+        isActive: settings.filterMode === "errors"
+      }, {
+        id: "filter::success",
+        label: "Success",
+        color: _sharedUi.macOSColors.semantic.success,
+        value: "success",
+        isActive: settings.filterMode === "success"
+      }, {
+        id: "filter::pending",
+        label: "Pending",
+        color: _sharedUi.macOSColors.semantic.warning,
+        value: "pending",
+        isActive: settings.filterMode === "pending"
+      }]
+    },
+    // LLM Optimization Section
+    {
+      id: "llmOptimization",
+      title: "LLM Optimization",
+      type: "custom",
+      data: [{
+        id: "include::compactMode",
+        label: "Compact",
+        value: "compactMode",
+        isActive: settings.compactMode,
+        description: "One line per event"
+      }, {
+        id: "include::smartJsonParsing",
+        label: "Smart JSON",
+        value: "smartJsonParsing",
+        isActive: settings.smartJsonParsing,
+        description: "Parse nested JSON"
+      }, {
+        id: "include::reduxChangedOnly",
+        label: "Redux Diff",
+        value: "reduxChangedOnly",
+        isActive: settings.reduxChangedOnly,
+        description: "Only show changes"
+      }, {
+        id: "include::showStorageDiff",
+        label: "Storage Diff",
+        value: "showStorageDiff",
+        isActive: settings.showStorageDiff,
+        description: "Show what changed"
+      }, {
+        id: "include::stripVerboseFields",
+        label: "Strip Noise",
+        value: "stripVerboseFields",
+        isActive: settings.stripVerboseFields,
+        description: "Remove images/descriptions"
+      }]
+    }],
+    previewSection: {
+      enabled: true,
+      title: "PREVIEW",
+      icon: _sharedUi.Eye,
+      content: renderPreviewContent,
+      headerActions: renderPreviewHeaderActions
+    },
+    onFilterChange: handleOptionChange
+  }), [settings, activePreset, handleOptionChange, renderPreviewContent, renderPreviewHeaderActions]);
+
+  // Pro gating - show banner at top with preview below (no floating)
+  if (!isPro) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.gatedContainer,
+      contentContainerStyle: styles.gatedContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProFeatureBanner, {
+        featureName: "Events Export",
+        description: "Export event flows to share with your team, debug issues, or feed into AI tools.",
+        benefits: ["Export to Markdown, JSON, or plain text", "Customizable presets (LLM-ready, Bug Report, JSON)", "Share event flows with teammates", "Feed event context directly to AI assistants"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.gatedPreview,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DynamicFilterView, {
+          ...dynamicFilterConfig
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DynamicFilterView, {
+    ...dynamicFilterConfig
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  collapsedPreview: {
+    gap: 8
+  },
+  expandButton: {
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    padding: 12
+  },
+  expandButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandButtonTextContainer: {
+    flex: 1
+  },
+  expandButtonTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.primary
+  },
+  expandButtonSubtitle: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.secondary,
+    marginTop: 2
+  },
+  collapseButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  collapseButtonText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  sizeWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.warning + "30"
+  },
+  sizeWarningDanger: {
+    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    borderColor: _sharedUi.macOSColors.semantic.error + "30"
+  },
+  sizeWarningText: {
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  previewScroll: {
+    maxHeight: 300
+  },
+  previewText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.primary,
+    lineHeight: 18
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.muted,
+    marginRight: 8
+  },
+  gatedContainer: {
+    flex: 1
+  },
+  gatedContent: {
+    padding: 12,
+    gap: 12
+  },
+  gatedPreview: {
+    // No flex: 1 so it doesn't try to fill remaining space
+  }
+});
+//# sourceMappingURL=EventsCopySettingsView.js.map