@principal-ai/storybook-addon-otel 0.3.0 → 0.3.2

package/collector.js

@@ -0,0 +1,9 @@
+/**
+ * TelemetryCollector Export (for manual instrumentation in stories)
+ *
+ * This file exports only the collector without the decorator registration,
+ * preventing the "loaded twice" issue when importing in stories.
+ */
+
+// Re-export the collector from the compiled version
+export { TelemetryCollector } from './dist/collector.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/storybook-addon-otel",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Storybook addon for capturing and visualizing OpenTelemetry data from story interactions",
   "main": "preset.js",
   "files": [
@@ -12,10 +12,10 @@
     "dist/decorator.js",
     "dist/index.d.ts",
     "dist/index.js",
-    "dist/preview.js",
     "preset.js",
     "preview.js",
     "manager.js",
+    "collector.js",
     "README.md"
   ],
   "exports": {
@@ -31,10 +31,14 @@
     "./manager": {
       "default": "./manager.js"
     },
+    "./collector": {
+      "types": "./dist/collector.d.ts",
+      "default": "./collector.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsc && node scripts/copy-browser-files.js && rm -f dist/manager.js dist/manager.d.ts dist/preset.js dist/preset.d.ts dist/components/*.js dist/components/*.d.ts",
+    "build": "tsc && node scripts/copy-browser-files.js && rm -f dist/manager.js dist/manager.d.ts dist/preset.js dist/preset.d.ts dist/preview.js dist/components/*.js dist/components/*.d.ts",
     "dev": "tsc --watch",
     "clean": "rm -rf dist"
   },

package/dist/preview.js

@@ -1,121 +0,0 @@
-/**
- * Preview-side entry point (runs in browser)
- * Must be ESM format
- */
-
-import React, { useEffect, useState } from 'react';
-
-// Simple telemetry collector for browser
-class BrowserTelemetryCollector {
-  constructor() {
-    this.spans = [];
-    this.spanIdCounter = 0;
-    this.activeSpans = new Map();
-
-    // Try to get Storybook channel (might not be available immediately)
-    if (typeof window !== 'undefined' && window.__STORYBOOK_ADDONS_CHANNEL__) {
-      this.channel = window.__STORYBOOK_ADDONS_CHANNEL__;
-    }
-  }
-
-  startSpan(name, attributes = {}, parentId) {
-    const span = {
-      id: `span-${++this.spanIdCounter}`,
-      name,
-      parentId,
-      startTime: Date.now(),
-      attributes: {
-        'component.name': name,
-        ...attributes,
-      },
-      events: [],
-      status: 'OK',
-    };
-
-    this.spans.push(span);
-    this.activeSpans.set(span.id, span);
-
-    console.log('[TelemetryCollector] Started span:', name, 'Total spans:', this.spans.length);
-    this.emit();
-
-    return span;
-  }
-
-  addEvent(span, eventName, attributes = {}) {
-    span.events.push({
-      time: Date.now(),
-      name: eventName,
-      attributes,
-    });
-    this.emit();
-  }
-
-  endSpan(span) {
-    span.endTime = Date.now();
-    span.duration = span.endTime - span.startTime;
-    this.activeSpans.delete(span.id);
-    this.emit();
-  }
-
-  getSpans() {
-    return [...this.spans];
-  }
-
-  clear() {
-    this.spans = [];
-    this.spanIdCounter = 0;
-    this.activeSpans.clear();
-    this.emit();
-  }
-
-  emit() {
-    // Get channel if not already set
-    if (!this.channel && typeof window !== 'undefined' && window.__STORYBOOK_ADDONS_CHANNEL__) {
-      this.channel = window.__STORYBOOK_ADDONS_CHANNEL__;
-    }
-
-    console.log('[TelemetryCollector] Emitting update, spans:', this.spans.length, 'has channel:', !!this.channel);
-
-    if (this.channel) {
-      this.channel.emit('storybook-addon-otel-telemetry/telemetry-update', this.getSpans());
-    }
-  }
-}
-
-// Singleton instance
-const TelemetryCollector = new BrowserTelemetryCollector();
-
-// Decorator
-export const withTelemetry = (Story, context) => {
-  const [rootSpan, setRootSpan] = useState(null);
-
-  console.log('[Telemetry Decorator] Story:', context.title + '/' + context.name);
-
-  useEffect(() => {
-    // Start root span for story
-    const span = TelemetryCollector.startSpan(`Story: ${context.title}/${context.name}`, {
-      'story.id': context.id,
-      'story.title': context.title,
-      'story.name': context.name,
-    });
-
-    setRootSpan(span);
-
-    TelemetryCollector.addEvent(span, 'story.mounted', {
-      'story.name': `${context.title}/${context.name}`,
-    });
-
-    return () => {
-      TelemetryCollector.addEvent(span, 'story.unmounted', {});
-      TelemetryCollector.endSpan(span);
-    };
-  }, [context.id]);
-
-  return React.createElement(Story);
-};
-
-// Export decorators array
-export const decorators = [withTelemetry];
-
-// Export for manual use
-export { TelemetryCollector };