@principal-ai/storybook-addon-otel 0.2.0 → 0.2.2

package/.npmignore

@@ -0,0 +1,20 @@
+# Source files (standalone manager.js used instead)
+src/
+
+# Exclude compiled manager files to avoid bundler conflicts in Storybook v10
+dist/manager.js
+dist/manager.d.ts
+dist/components/
+
+# Development files
+scripts/
+tsconfig.json
+*.test.ts
+*.test.tsx
+*.spec.ts
+*.spec.tsx
+.DS_Store
+node_modules/
+coverage/
+.nyc_output/
+*.tgz

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@principal-ai/storybook-addon-otel",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Storybook addon for capturing and visualizing OpenTelemetry data from story interactions",
   "main": "dist/preset.js",
   "types": "dist/preset.d.ts",
   "files": [
     "dist/**/*",
-    "src/**/*",
     "preset.js",
     "preview.js",
     "manager.js",
-    "README.md"
+    "README.md",
+    ".npmignore"
   ],
   "exports": {
     ".": {

package/src/collector.ts

@@ -1,122 +0,0 @@
-/**
- * Telemetry Collector
- *
- * Captures spans and events during story interactions
- */
-
-import { addons, types } from '@storybook/manager-api';
-import { ADDON_ID, EVENTS } from './constants';
-
-export interface SpanEvent {
-  time: number;
-  name: string;
-  attributes: Record<string, string | number | boolean>;
-}
-
-export interface TelemetrySpan {
-  id: string;
-  name: string;
-  parentId?: string;
-  startTime: number;
-  endTime?: number;
-  duration?: number;
-  attributes: Record<string, string | number | boolean>;
-  events: SpanEvent[];
-  status: 'OK' | 'ERROR';
-  errorMessage?: string;
-}
-
-class TelemetryCollectorImpl {
-  private spans: TelemetrySpan[] = [];
-  private spanIdCounter = 0;
-  private activeSpans = new Map<string, TelemetrySpan>();
-  private channel: any;
-
-  constructor() {
-    // Get communication channel with manager
-    if (typeof addons !== 'undefined') {
-      this.channel = addons.getChannel();
-    }
-  }
-
-  startSpan(
-    name: string,
-    attributes?: Record<string, string | number | boolean>,
-    parentId?: string
-  ): TelemetrySpan {
-    const span: TelemetrySpan = {
-      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: TelemetrySpan,
-    eventName: string,
-    attributes?: Record<string, string | number | boolean>
-  ): void {
-    span.events.push({
-      time: Date.now(),
-      name: eventName,
-      attributes: attributes || {},
-    });
-    this.emit();
-  }
-
-  endSpan(span: TelemetrySpan): void {
-    span.endTime = Date.now();
-    span.duration = span.endTime - span.startTime;
-    this.activeSpans.delete(span.id);
-    this.emit();
-  }
-
-  markError(span: TelemetrySpan, error: Error | string): void {
-    span.status = 'ERROR';
-    span.errorMessage = typeof error === 'string' ? error : error.message;
-    span.attributes['error'] = true;
-    span.attributes['error.message'] = span.errorMessage;
-    this.emit();
-  }
-
-  getSpans(): TelemetrySpan[] {
-    return [...this.spans];
-  }
-
-  clear(): void {
-    this.spans = [];
-    this.spanIdCounter = 0;
-    this.activeSpans.clear();
-    this.emit();
-  }
-
-  private emit(): void {
-    console.log('[TelemetryCollector] Emitting update, spans:', this.spans.length, 'has channel:', !!this.channel);
-    if (this.channel) {
-      this.channel.emit(EVENTS.TELEMETRY_UPDATE, this.getSpans());
-    }
-  }
-
-  exportJson(): string {
-    // End any active spans
-    this.activeSpans.forEach(span => this.endSpan(span));
-    return JSON.stringify(this.spans, null, 2);
-  }
-}
-
-// Singleton instance
-export const TelemetryCollector = new TelemetryCollectorImpl();

package/src/components/TelemetryPanel.tsx

@@ -1,279 +0,0 @@
-/**
- * Telemetry Panel Component
- *
- * Displays captured telemetry in Storybook panel
- */
-
-import React, { useEffect, useState } from 'react';
-import { useChannel } from '@storybook/manager-api';
-import { AddonPanel, TabButton } from '@storybook/components';
-import { styled } from '@storybook/theming';
-import type { TelemetrySpan } from '../collector';
-import { EVENTS } from '../constants';
-
-const PanelContainer = styled.div`
-  padding: 16px;
-  font-family: monospace;
-  font-size: 12px;
-  height: 100%;
-  overflow: auto;
-  background: #1a1a1a;
-  color: #e6e6e6;
-`;
-
-const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #333;
-`;
-
-const Button = styled.button`
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 6px 12px;
-  cursor: pointer;
-  font-size: 12px;
-  margin-left: 8px;
-
-  &:hover {
-    background: #2563eb;
-  }
-`;
-
-const SpanCard = styled.div<{ status: 'OK' | 'ERROR' }>`
-  background: #242424;
-  border: 1px solid ${props => props.status === 'ERROR' ? '#ef4444' : '#333'};
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 12px;
-`;
-
-const SpanHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 8px;
-`;
-
-const SpanName = styled.div`
-  font-weight: 600;
-  color: #3b82f6;
-  font-size: 13px;
-`;
-
-const SpanDuration = styled.div`
-  color: #10b981;
-  font-size: 11px;
-`;
-
-const Attributes = styled.div`
-  margin-top: 8px;
-  padding: 8px;
-  background: #1a1a1a;
-  border-radius: 4px;
-  font-size: 11px;
-`;
-
-const AttributeRow = styled.div`
-  padding: 2px 0;
-  color: #a0a0a0;
-
-  span:first-child {
-    color: #8b5cf6;
-  }
-`;
-
-const EventList = styled.div`
-  margin-top: 8px;
-`;
-
-const Event = styled.div`
-  padding: 6px 8px;
-  background: #1a1a1a;
-  border-left: 2px solid #f59e0b;
-  margin-bottom: 4px;
-  font-size: 11px;
-`;
-
-const EventName = styled.div`
-  color: #f59e0b;
-  font-weight: 600;
-  margin-bottom: 4px;
-`;
-
-const ViewToggle = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-`;
-
-const ToggleButton = styled.button<{ active: boolean }>`
-  background: ${props => props.active ? '#3b82f6' : '#333'};
-  color: ${props => props.active ? 'white' : '#a0a0a0'};
-  border: none;
-  border-radius: 4px;
-  padding: 6px 16px;
-  cursor: pointer;
-  font-size: 12px;
-
-  &:hover {
-    background: ${props => props.active ? '#2563eb' : '#404040'};
-  }
-`;
-
-const CanvasPlaceholder = styled.div`
-  padding: 40px;
-  text-align: center;
-  color: #666;
-  border: 2px dashed #333;
-  border-radius: 8px;
-
-  h3 {
-    margin: 0 0 8px 0;
-    color: #999;
-  }
-
-  p {
-    margin: 0;
-    font-size: 12px;
-  }
-`;
-
-interface PanelProps {
-  active: boolean;
-}
-
-export const TelemetryPanel: React.FC<PanelProps> = ({ active }) => {
-  const [spans, setSpans] = useState<TelemetrySpan[]>([]);
-  const [view, setView] = useState<'timeline' | 'canvas'>('timeline');
-
-  const emit = useChannel({
-    [EVENTS.TELEMETRY_UPDATE]: (newSpans: TelemetrySpan[]) => {
-      console.log('[TelemetryPanel] Received update, spans:', newSpans.length, newSpans);
-      setSpans(newSpans);
-    },
-  });
-
-  console.log('[TelemetryPanel] Render, active:', active, 'spans:', spans.length);
-
-  const handleClear = () => {
-    emit(EVENTS.CLEAR_TELEMETRY);
-    setSpans([]);
-  };
-
-  const handleExport = () => {
-    const json = JSON.stringify(spans, null, 2);
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'storybook-telemetry.json';
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  if (!active) {
-    return null;
-  }
-
-  return (
-    <AddonPanel active={active}>
-      <PanelContainer>
-        <Header>
-          <div>
-            <strong>OTEL Telemetry</strong>
-            <div style={{ fontSize: '11px', color: '#666', marginTop: '4px' }}>
-              {spans.length} span{spans.length !== 1 ? 's' : ''} collected
-            </div>
-          </div>
-          <div>
-            <Button onClick={handleClear}>Clear</Button>
-            <Button onClick={handleExport}>Export JSON</Button>
-          </div>
-        </Header>
-
-        <ViewToggle>
-          <ToggleButton
-            active={view === 'timeline'}
-            onClick={() => setView('timeline')}
-          >
-            Timeline
-          </ToggleButton>
-          <ToggleButton
-            active={view === 'canvas'}
-            onClick={() => setView('canvas')}
-          >
-            Canvas
-          </ToggleButton>
-        </ViewToggle>
-
-        {view === 'timeline' ? (
-          <>
-            {spans.length === 0 ? (
-              <div style={{ textAlign: 'center', padding: '40px', color: '#666' }}>
-                No telemetry data yet. Interact with the story to capture spans.
-              </div>
-            ) : (
-              spans.map(span => (
-                <SpanCard key={span.id} status={span.status}>
-                  <SpanHeader>
-                    <SpanName>{span.name}</SpanName>
-                    {span.duration && (
-                      <SpanDuration>{span.duration}ms</SpanDuration>
-                    )}
-                  </SpanHeader>
-
-                  {Object.keys(span.attributes).length > 0 && (
-                    <Attributes>
-                      {Object.entries(span.attributes).map(([key, value]) => (
-                        <AttributeRow key={key}>
-                          <span>{key}:</span> {String(value)}
-                        </AttributeRow>
-                      ))}
-                    </Attributes>
-                  )}
-
-                  {span.events.length > 0 && (
-                    <EventList>
-                      {span.events.map((event, idx) => (
-                        <Event key={idx}>
-                          <EventName>{event.name}</EventName>
-                          {Object.entries(event.attributes).map(([key, value]) => (
-                            <AttributeRow key={key}>
-                              <span>{key}:</span> {String(value)}
-                            </AttributeRow>
-                          ))}
-                        </Event>
-                      ))}
-                    </EventList>
-                  )}
-
-                  {span.errorMessage && (
-                    <div style={{ marginTop: '8px', color: '#ef4444', fontSize: '11px' }}>
-                      Error: {span.errorMessage}
-                    </div>
-                  )}
-                </SpanCard>
-              ))
-            )}
-          </>
-        ) : (
-          <CanvasPlaceholder>
-            <h3>Canvas Visualization</h3>
-            <p>
-              Canvas view will visualize the telemetry flow using your GraphRenderer.
-            </p>
-            <p style={{ marginTop: '8px', fontSize: '11px' }}>
-              To implement: Convert spans to canvas format and render with GraphRenderer
-            </p>
-          </CanvasPlaceholder>
-        )}
-      </PanelContainer>
-    </AddonPanel>
-  );
-};

package/src/constants.ts

@@ -1,9 +0,0 @@
-export const ADDON_ID = 'storybook-addon-otel-telemetry';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PARAM_KEY = 'otelTelemetry';
-
-export const EVENTS = {
-  TELEMETRY_UPDATE: `${ADDON_ID}/telemetry-update`,
-  CLEAR_TELEMETRY: `${ADDON_ID}/clear-telemetry`,
-  EXPORT_TELEMETRY: `${ADDON_ID}/export-telemetry`,
-};

package/src/decorator.tsx

@@ -1,103 +0,0 @@
-/**
- * Story Decorator
- *
- * Wraps stories to automatically capture telemetry
- */
-
-import React, { useEffect, useState } from 'react';
-import { TelemetryCollector } from './collector';
-import { PARAM_KEY } from './constants';
-
-export const withTelemetry = (Story: any, context: any) => {
-  const [rootSpan, setRootSpan] = useState<any>(null);
-
-  // Check if telemetry is enabled for this story
-  const enabled = context.parameters[PARAM_KEY]?.enabled !== false;
-
-  console.log('[Telemetry Decorator] Story:', context.title + '/' + context.name, 'Enabled:', enabled);
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    // 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, enabled]);
-
-  if (!enabled) {
-    return <Story />;
-  }
-
-  return (
-    <TelemetryProvider rootSpan={rootSpan}>
-      <Story />
-    </TelemetryProvider>
-  );
-};
-
-// Context to provide telemetry to story components
-const TelemetryContext = React.createContext<{
-  rootSpan: any;
-  collector: typeof TelemetryCollector;
-} | null>(null);
-
-function TelemetryProvider({
-  children,
-  rootSpan
-}: {
-  children: React.ReactNode;
-  rootSpan: any;
-}) {
-  return (
-    <TelemetryContext.Provider value={{ rootSpan, collector: TelemetryCollector }}>
-      {children}
-    </TelemetryContext.Provider>
-  );
-}
-
-// Hook for stories to access telemetry
-export function useTelemetry() {
-  const context = React.useContext(TelemetryContext);
-  if (!context) {
-    throw new Error('useTelemetry must be used within a story with telemetry enabled');
-  }
-  return context;
-}
-
-// Hook for automatic span lifecycle
-export function useTelemetrySpan(
-  name: string,
-  attributes?: Record<string, string | number | boolean>,
-  deps: unknown[] = []
-): any {
-  const { rootSpan } = useTelemetry();
-  const [span, setSpan] = useState<any>(null);
-
-  useEffect(() => {
-    const newSpan = TelemetryCollector.startSpan(name, attributes, rootSpan?.id);
-    setSpan(newSpan);
-
-    return () => {
-      TelemetryCollector.endSpan(newSpan);
-    };
-  }, deps);
-
-  return span;
-}
-
-// Export decorators array for Storybook
-export const decorators = [withTelemetry];

package/src/index.ts

@@ -1,7 +0,0 @@
-/**
- * Public API exports
- */
-
-export { TelemetryCollector } from './collector';
-export { useTelemetry, useTelemetrySpan, withTelemetry } from './decorator';
-export type { TelemetrySpan, SpanEvent } from './collector';

package/src/manager.tsx

@@ -1,19 +0,0 @@
-/**
- * Addon Manager Registration
- *
- * Registers the telemetry panel in Storybook UI
- */
-
-import React from 'react';
-import { addons, types } from '@storybook/manager-api';
-import { TelemetryPanel } from './components/TelemetryPanel';
-import { ADDON_ID, PANEL_ID } from './constants';
-
-addons.register(ADDON_ID, (api) => {
-  addons.add(PANEL_ID, {
-    type: types.PANEL,
-    title: 'OTEL Telemetry',
-    match: ({ viewMode }) => viewMode === 'story',
-    render: ({ active }) => <TelemetryPanel active={active || false} />,
-  });
-});

package/src/preset.ts

@@ -1,13 +0,0 @@
-/**
- * Addon Preset
- *
- * Configures the addon for Storybook
- */
-
-export function managerEntries(entry: any[] = []) {
-  return [...entry, require.resolve('./manager')];
-}
-
-export function previewAnnotations(entry: any[] = []) {
-  return [...entry, require.resolve('./decorator')];
-}