create-analytics-demo 1.0.0

package/template/src/demo/DemoApp.tsx

@@ -0,0 +1,524 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { config } from "../demo.config";
+import { MiniIPhoneFrame } from "../components/IPhoneFrame";
+import { TravelingBall, type TravelingEvent } from "../components/TravelingBall";
+import {
+  LiveCodePanel,
+  getEventCategory,
+  shouldGoToSecondary,
+  type AnalyticsEvent,
+} from "../components/LiveCodePanel";
+
+const { theme } = config;
+const [primary, secondary] = config.services;
+
+type ConnectionStatus = "connecting" | "connected" | "disconnected";
+
+// ── Service Logos (DOM version for live demo) ────────────────────────────────
+
+const PrimaryLogo: React.FC<{ size?: number; isActive?: boolean }> = ({
+  size = 70,
+  isActive,
+}) => (
+  <div
+    style={{
+      borderRadius: 20,
+      boxShadow: isActive
+        ? `0 0 40px ${primary.color}`
+        : "0 10px 40px rgba(0,0,0,0.4)",
+      transition: "box-shadow 0.5s ease",
+    }}
+  >
+    {primary.logo === "svg" ? (
+      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
+        <rect width="100" height="100" rx="20" fill={primary.color} />
+        <path
+          d="M25 70 L35 45 L45 55 L55 30 L65 50 L75 25"
+          stroke="white"
+          strokeWidth="6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        <circle cx="75" cy="25" r="6" fill="white" />
+      </svg>
+    ) : (
+      <img
+        src={`/${primary.logo}`}
+        style={{ width: size, height: size, objectFit: "contain", borderRadius: 20 }}
+      />
+    )}
+  </div>
+);
+
+const SecondaryLogo: React.FC<{ size?: number; isActive?: boolean }> = ({
+  size = 70,
+  isActive,
+}) => (
+  <div
+    style={{
+      borderRadius: 20,
+      boxShadow: isActive
+        ? `0 0 40px ${secondary.color}`
+        : "0 10px 40px rgba(0,0,0,0.4)",
+      transition: "box-shadow 0.5s ease",
+    }}
+  >
+    {secondary.logo === "svg" ? (
+      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
+        <rect width="100" height="100" rx="20" fill={secondary.color} />
+        <path
+          d="M25 70 L35 45 L45 55 L55 30 L65 50 L75 25"
+          stroke="white"
+          strokeWidth="6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        <circle cx="75" cy="25" r="6" fill="white" />
+      </svg>
+    ) : (
+      <img
+        src={`/${secondary.logo}`}
+        style={{ width: size, height: size, objectFit: "contain", borderRadius: 20 }}
+      />
+    )}
+  </div>
+);
+
+// ── Main Component ──────────────────────────────────────────────────────────
+
+export const DemoApp: React.FC = () => {
+  const [status, setStatus] = useState<ConnectionStatus>("connecting");
+  const [eventHistory, setEventHistory] = useState<AnalyticsEvent[]>([]);
+  const [travelingEvents, setTravelingEvents] = useState<TravelingEvent[]>([]);
+  const [activeService, setActiveService] = useState({
+    primary: false,
+    secondary: false,
+    phone: false,
+  });
+  const [eventCounter, setEventCounter] = useState(0);
+  const [selectedEvent, setSelectedEvent] = useState<AnalyticsEvent | null>(null);
+
+  const primaryPathRef = useRef<SVGPathElement>(null);
+  const secondaryPathRef = useRef<SVGPathElement>(null);
+
+  // Animate traveling events at 60fps
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTravelingEvents((current) => {
+        const updated = current.map((e) => ({
+          ...e,
+          progress: Math.min(e.progress + 0.003, 1),
+        }));
+
+        updated.forEach((e) => {
+          if (e.progress >= 1) {
+            const key = e.target === primary.name ? "primary" : "secondary";
+            setActiveService((prev) => ({ ...prev, [key]: true }));
+            setTimeout(() => {
+              setActiveService((prev) => ({ ...prev, [key]: false }));
+            }, 500);
+          }
+        });
+
+        return updated.filter((e) => e.progress < 1);
+      });
+    }, 16);
+    return () => clearInterval(interval);
+  }, []);
+
+  // WebSocket connection
+  const connect = useCallback(() => {
+    setStatus("connecting");
+    const ws = new WebSocket(config.demo.wsUrl);
+
+    ws.onopen = () => setStatus("connected");
+
+    ws.onmessage = (messageEvent) => {
+      const data = JSON.parse(messageEvent.data);
+
+      if (data.type === "analytics_event") {
+        const analyticsEvent: AnalyticsEvent = {
+          event: data.event,
+          userId: data.userId,
+          deviceId: data.deviceId,
+          properties: data.properties || {},
+          timestamp: data.receivedAt,
+        };
+
+        setEventHistory((prev) => {
+          const isDuplicate = prev.some(
+            (e) =>
+              e.event === analyticsEvent.event &&
+              e.timestamp === analyticsEvent.timestamp
+          );
+          if (isDuplicate) return prev;
+          return [...prev, analyticsEvent];
+        });
+
+        // Create traveling events
+        setEventCounter((prev) => {
+          const newId = prev + 1;
+          const goesToSecondary = shouldGoToSecondary(analyticsEvent.event);
+
+          setTravelingEvents((cur) => {
+            const next = [...cur];
+            next.push({
+              ...analyticsEvent,
+              id: newId,
+              progress: 0,
+              target: primary.name,
+              direction: "toService",
+            });
+            if (goesToSecondary) {
+              next.push({
+                ...analyticsEvent,
+                id: newId + 0.5,
+                progress: 0,
+                target: secondary.name,
+                direction: "toService",
+              });
+            }
+            return next;
+          });
+
+          return newId;
+        });
+      }
+
+      if (data.type === "reset") {
+        setEventHistory([]);
+        setTravelingEvents([]);
+      }
+    };
+
+    ws.onclose = () => {
+      setStatus("disconnected");
+      setTimeout(connect, 2000);
+    };
+
+    ws.onerror = () => ws.close();
+    return ws;
+  }, []);
+
+  useEffect(() => {
+    const ws = connect();
+    return () => ws.close();
+  }, [connect]);
+
+  const handleBallClick = (_e: React.MouseEvent, event: TravelingEvent) => {
+    setSelectedEvent(event);
+  };
+
+  const closeCodePanel = () => setSelectedEvent(null);
+
+  // Escape to close
+  useEffect(() => {
+    if (!selectedEvent) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setSelectedEvent(null);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [selectedEvent]);
+
+  return (
+    <div style={styles.container}>
+      {/* Status bar */}
+      <div style={styles.statusBar}>
+        <div style={styles.statusIndicator}>
+          <div
+            style={{
+              ...styles.statusDot,
+              backgroundColor:
+                status === "connected"
+                  ? "#4ade80"
+                  : status === "connecting"
+                  ? "#facc15"
+                  : "#f87171",
+            }}
+          />
+          <span style={styles.statusText}>
+            {status === "connected"
+              ? "Live"
+              : status === "connecting"
+              ? "Connecting..."
+              : "Disconnected"}
+          </span>
+        </div>
+        <div style={styles.eventCount}>Events: {eventHistory.length}</div>
+      </div>
+
+      {/* Main visualization */}
+      <div style={styles.mainArea}>
+        <svg
+          style={styles.svg}
+          viewBox="0 0 1000 600"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          {/* Primary path */}
+          <path
+            ref={primaryPathRef}
+            d="M 200 300 Q 450 200 750 180"
+            stroke={`${primary.color}4D`}
+            strokeWidth="3"
+            fill="none"
+            strokeDasharray="8 8"
+            style={{ pointerEvents: "none" }}
+          />
+          {/* Secondary path */}
+          <path
+            ref={secondaryPathRef}
+            d="M 200 300 Q 450 400 750 420"
+            stroke={`${secondary.color}4D`}
+            strokeWidth="3"
+            fill="none"
+            strokeDasharray="8 8"
+            style={{ pointerEvents: "none" }}
+          />
+
+          {/* Traveling balls */}
+          {travelingEvents.map((event) => {
+            const pathRef =
+              event.target === primary.name ? primaryPathRef : secondaryPathRef;
+            return (
+              <TravelingBall
+                key={`${event.id}-${event.target}`}
+                event={event}
+                pathRef={pathRef}
+                onClick={handleBallClick}
+                color={
+                  event.target === primary.name
+                    ? primary.color
+                    : secondary.color
+                }
+              />
+            );
+          })}
+        </svg>
+
+        {/* iPhone */}
+        <div style={styles.iphoneContainer}>
+          <div
+            style={{
+              borderRadius: 36,
+              boxShadow: activeService.phone
+                ? "0 0 40px rgba(76, 175, 80, 0.8)"
+                : "none",
+              transition: "box-shadow 0.3s ease",
+            }}
+          >
+            <MiniIPhoneFrame />
+          </div>
+          <div style={styles.iphoneLabel}>{config.appName} App</div>
+        </div>
+
+        {/* Primary service */}
+        <div style={styles.primaryContainer}>
+          <PrimaryLogo size={70} isActive={activeService.primary} />
+          <div style={styles.serviceLabel}>{primary.name}</div>
+        </div>
+
+        {/* Secondary service */}
+        <div style={styles.secondaryContainer}>
+          <SecondaryLogo size={70} isActive={activeService.secondary} />
+          <div style={styles.serviceLabel}>{secondary.name}</div>
+        </div>
+
+        {travelingEvents.length > 0 && (
+          <div style={styles.hintText}>Click on a ball to see the code</div>
+        )}
+      </div>
+
+      {/* Sidebar */}
+      <div style={styles.sidebar}>
+        <h3 style={styles.sidebarTitle}>Event History</h3>
+        <div style={styles.eventList}>
+          {[...eventHistory].reverse().map((evt, i) => {
+            const goesToSec = shouldGoToSecondary(evt.event);
+            const eventColor = goesToSec ? secondary.color : primary.color;
+
+            return (
+              <div
+                key={eventHistory.length - 1 - i}
+                style={{
+                  ...styles.eventItem,
+                  opacity: i === 0 ? 1 : 0.7,
+                  borderLeftWidth: 3,
+                  borderLeftColor: eventColor,
+                  borderLeftStyle: "solid",
+                }}
+                onClick={() => setSelectedEvent(evt)}
+              >
+                <div style={{ ...styles.eventName, color: eventColor }}>
+                  {evt.event}
+                </div>
+                <div style={styles.eventMeta}>
+                  {evt.userId
+                    ? `User: ${evt.userId.slice(0, 8)}...`
+                    : "Anonymous"}
+                </div>
+              </div>
+            );
+          })}
+          {eventHistory.length === 0 && (
+            <div style={styles.noEvents}>Waiting for events...</div>
+          )}
+        </div>
+      </div>
+
+      {/* Code Panel Overlay */}
+      {selectedEvent && (
+        <>
+          <div style={styles.overlay} onClick={closeCodePanel} />
+          <LiveCodePanel event={selectedEvent} onClose={closeCodePanel} />
+        </>
+      )}
+
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+          to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 0.2; transform: scale(1); }
+          50% { opacity: 0.4; transform: scale(1.15); }
+        }
+        @keyframes ballGlow {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.8; }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+// ── Styles ──────────────────────────────────────────────────────────────────
+
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    width: "100vw",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    background:
+      "linear-gradient(135deg, #0a0a12 0%, #12121f 50%, #0a0a12 100%)",
+    overflow: "hidden",
+  },
+  statusBar: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 24px",
+    borderBottom: "1px solid rgba(255,255,255,0.1)",
+    zIndex: 10,
+  },
+  statusIndicator: { display: "flex", alignItems: "center", gap: 8 },
+  statusDot: { width: 10, height: 10, borderRadius: "50%" },
+  statusText: { color: "rgba(255,255,255,0.8)", fontSize: 14, fontWeight: 500 },
+  eventCount: { color: "rgba(255,255,255,0.6)", fontSize: 14 },
+  mainArea: { flex: 1, position: "relative", marginRight: 260 },
+  svg: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" },
+  iphoneContainer: {
+    position: "absolute",
+    left: 80,
+    top: "50%",
+    transform: "translateY(-50%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 16,
+  },
+  iphoneLabel: { color: "rgba(255,255,255,0.6)", fontSize: 14, fontWeight: 500 },
+  primaryContainer: {
+    position: "absolute",
+    right: 80,
+    top: "30%",
+    transform: "translateY(-50%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 12,
+  },
+  secondaryContainer: {
+    position: "absolute",
+    right: 80,
+    top: "70%",
+    transform: "translateY(-50%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 12,
+  },
+  serviceLabel: { color: "white", fontSize: 16, fontWeight: 600 },
+  hintText: {
+    position: "absolute",
+    bottom: 30,
+    left: "50%",
+    transform: "translateX(-50%)",
+    color: "rgba(255,255,255,0.4)",
+    fontSize: 13,
+    fontStyle: "italic",
+  },
+  sidebar: {
+    position: "fixed",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 260,
+    background: "rgba(0,0,0,0.4)",
+    borderLeft: "1px solid rgba(255,255,255,0.1)",
+    padding: 20,
+    display: "flex",
+    flexDirection: "column",
+  },
+  sidebarTitle: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: 600,
+    marginBottom: 16,
+    paddingBottom: 12,
+    borderBottom: "1px solid rgba(255,255,255,0.1)",
+  },
+  eventList: {
+    flex: 1,
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+  },
+  eventItem: {
+    background: "rgba(255,255,255,0.05)",
+    borderRadius: 8,
+    padding: 12,
+    border: "1px solid rgba(255,255,255,0.1)",
+    cursor: "pointer",
+    transition: "all 0.3s ease",
+  },
+  eventName: {
+    fontSize: 13,
+    fontWeight: 600,
+    fontFamily: "SF Mono, monospace",
+  },
+  eventMeta: {
+    color: "rgba(255,255,255,0.5)",
+    fontSize: 11,
+    marginTop: 4,
+  },
+  noEvents: {
+    color: "rgba(255,255,255,0.3)",
+    fontSize: 13,
+    textAlign: "center",
+    padding: 20,
+  },
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "rgba(0,0,0,0.5)",
+    zIndex: 999,
+  },
+};

package/template/src/demo/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { DemoApp } from './DemoApp';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
+  <React.StrictMode>
+    <DemoApp />
+  </React.StrictMode>
+);

package/template/src/demo.config.ts

@@ -0,0 +1,137 @@
+// ============================================================================
+// demo.config.ts — Edit this file to customize your analytics demo
+// ============================================================================
+
+export const config = {
+  // ── App Identity ──────────────────────────────────────────────────────────
+  appName: "MyApp",
+
+  // ── Theme ─────────────────────────────────────────────────────────────────
+  theme: {
+    bg: "#0F1119",
+    bgGradient: "#1E1E29",
+    accent: "#FC5B40",
+    accentSoft: "#FC7A57",
+    textPrimary: "#FFFFFF",
+    textSecondary: "rgba(255,255,255,0.7)",
+    surface: "rgba(255,255,255,0.08)",
+    stroke: "rgba(255,255,255,0.25)",
+  },
+
+  // ── Analytics Services ────────────────────────────────────────────────────
+  // The two services shown in the visualization (left = primary, right = secondary)
+  services: [
+    {
+      name: "Amplitude",
+      color: "#1E61F0",
+      // "svg" uses the built-in Amplitude logo; or set an image filename from public/
+      logo: "svg" as "svg" | string,
+    },
+    {
+      name: "Braze",
+      color: "#A633D6",
+      // Place your logo in public/ and reference it here
+      logo: "braze.png",
+    },
+  ],
+
+  // ── Event Categories ──────────────────────────────────────────────────────
+  // Maps event names (lowercase) → display category
+  eventCategories: {
+    "login completed": "Authentication",
+    "signup completed": "Authentication",
+    "logout completed": "Authentication",
+    "screen viewed": "Navigation",
+    "home viewed": "Navigation",
+    "store viewed": "Stores",
+    "product viewed": "Products",
+    "product added to cart": "Products",
+    "cart viewed": "Cart",
+    "checkout started": "Checkout",
+    "purchase completed": "Checkout",
+    "search performed": "Search",
+    "campaign opened": "Attribution",
+    "application opened": "App Lifecycle",
+  } as Record<string, string>,
+
+  // ── Secondary Service Events ──────────────────────────────────────────────
+  // Events that ALSO go to the secondary service (e.g. Braze)
+  secondaryServiceEvents: [
+    "purchase_completed",
+    "Purchase Completed",
+    "campaign_opened",
+    "Campaign Opened",
+  ],
+
+  // ── Code Snippets ─────────────────────────────────────────────────────────
+  // Shown in the code panel when clicking an event ball / sidebar item
+  codeSnippets: {
+    "login completed": {
+      file: "AuthManager.swift",
+      code: [
+        "func handleLoginSuccess(user: User) {",
+        "    analytics.setUserId(user.uid)",
+        "    engagement.changeUser(externalId: user.uid)",
+        "    ",
+        '    analytics.track("Login Completed",',
+        '        properties: ["method": "email"]',
+        "    )",
+        "}",
+      ],
+    },
+    "purchase completed": {
+      file: "CheckoutViewModel.swift",
+      code: [
+        "func completePurchase(order: Order) {",
+        '    analytics.track("Purchase Completed",',
+        "        properties: [",
+        '            "order_id": order.id,',
+        '            "total": order.total',
+        "        ]",
+        "    )",
+        "    engagement.logPurchase(order)",
+        "}",
+      ],
+    },
+    "store viewed": {
+      file: "StoreDetailViewModel.swift",
+      code: [
+        "func trackStoreView() {",
+        '    analytics.track("Store Viewed",',
+        "        properties: [",
+        '            "store_id": store.id,',
+        '            "store_name": store.name',
+        "        ]",
+        "    )",
+        "}",
+      ],
+    },
+  } as Record<string, { file: string; code: string[] }>,
+
+  // ── App Categories (shown in the phone UI) ────────────────────────────────
+  categories: [
+    { name: "Restaurants", emoji: "\u{1F37D}\u{FE0F}" },
+    { name: "Groceries", emoji: "\u{1F6D2}" },
+    { name: "Pharmacy", emoji: "\u{1F48A}" },
+    { name: "Drinks", emoji: "\u{2615}" },
+  ],
+
+  // ── Video Settings (Remotion) ─────────────────────────────────────────────
+  video: {
+    width: 1280,
+    height: 720,
+    fps: 30,
+    durationInFrames: 600,
+  },
+
+  // ── Server ────────────────────────────────────────────────────────────────
+  server: {
+    port: 3001,
+  },
+
+  // ── Demo (browser visualization) ──────────────────────────────────────────
+  demo: {
+    port: 3000,
+    wsUrl: "ws://localhost:3001",
+  },
+};