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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@principal-ai/storybook-addon-otel",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Storybook addon for capturing and visualizing OpenTelemetry data from story interactions",
   "main": "dist/preset.js",
   "types": "dist/preset.d.ts",
   "files": [
-    "dist/**/*",
-    "src/**/*",
+    "dist/collector.*",
+    "dist/constants.*",
+    "dist/decorator.*",
+    "dist/index.*",
+    "dist/preset.*",
+    "dist/preview.js",
     "preset.js",
     "preview.js",
     "manager.js",

package/dist/components/TelemetryPanel.d.ts

@@ -1,11 +0,0 @@
-/**
- * Telemetry Panel Component
- *
- * Displays captured telemetry in Storybook panel
- */
-import React from 'react';
-interface PanelProps {
-    active: boolean;
-}
-export declare const TelemetryPanel: React.FC<PanelProps>;
-export {};

package/dist/components/TelemetryPanel.js

@@ -1,235 +0,0 @@
-"use strict";
-/**
- * Telemetry Panel Component
- *
- * Displays captured telemetry in Storybook panel
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelemetryPanel = void 0;
-const react_1 = __importStar(require("react"));
-const manager_api_1 = require("@storybook/manager-api");
-const components_1 = require("@storybook/components");
-const theming_1 = require("@storybook/theming");
-const constants_1 = require("../constants");
-const PanelContainer = theming_1.styled.div `
-  padding: 16px;
-  font-family: monospace;
-  font-size: 12px;
-  height: 100%;
-  overflow: auto;
-  background: #1a1a1a;
-  color: #e6e6e6;
-`;
-const Header = theming_1.styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #333;
-`;
-const Button = theming_1.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 = theming_1.styled.div `
-  background: #242424;
-  border: 1px solid ${props => props.status === 'ERROR' ? '#ef4444' : '#333'};
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 12px;
-`;
-const SpanHeader = theming_1.styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 8px;
-`;
-const SpanName = theming_1.styled.div `
-  font-weight: 600;
-  color: #3b82f6;
-  font-size: 13px;
-`;
-const SpanDuration = theming_1.styled.div `
-  color: #10b981;
-  font-size: 11px;
-`;
-const Attributes = theming_1.styled.div `
-  margin-top: 8px;
-  padding: 8px;
-  background: #1a1a1a;
-  border-radius: 4px;
-  font-size: 11px;
-`;
-const AttributeRow = theming_1.styled.div `
-  padding: 2px 0;
-  color: #a0a0a0;
-
-  span:first-child {
-    color: #8b5cf6;
-  }
-`;
-const EventList = theming_1.styled.div `
-  margin-top: 8px;
-`;
-const Event = theming_1.styled.div `
-  padding: 6px 8px;
-  background: #1a1a1a;
-  border-left: 2px solid #f59e0b;
-  margin-bottom: 4px;
-  font-size: 11px;
-`;
-const EventName = theming_1.styled.div `
-  color: #f59e0b;
-  font-weight: 600;
-  margin-bottom: 4px;
-`;
-const ViewToggle = theming_1.styled.div `
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-`;
-const ToggleButton = theming_1.styled.button `
-  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 = theming_1.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;
-  }
-`;
-const TelemetryPanel = ({ active }) => {
-    const [spans, setSpans] = (0, react_1.useState)([]);
-    const [view, setView] = (0, react_1.useState)('timeline');
-    const emit = (0, manager_api_1.useChannel)({
-        [constants_1.EVENTS.TELEMETRY_UPDATE]: (newSpans) => {
-            console.log('[TelemetryPanel] Received update, spans:', newSpans.length, newSpans);
-            setSpans(newSpans);
-        },
-    });
-    console.log('[TelemetryPanel] Render, active:', active, 'spans:', spans.length);
-    const handleClear = () => {
-        emit(constants_1.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 (react_1.default.createElement(components_1.AddonPanel, { active: active },
-        react_1.default.createElement(PanelContainer, null,
-            react_1.default.createElement(Header, null,
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("strong", null, "OTEL Telemetry"),
-                    react_1.default.createElement("div", { style: { fontSize: '11px', color: '#666', marginTop: '4px' } },
-                        spans.length,
-                        " span",
-                        spans.length !== 1 ? 's' : '',
-                        " collected")),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(Button, { onClick: handleClear }, "Clear"),
-                    react_1.default.createElement(Button, { onClick: handleExport }, "Export JSON"))),
-            react_1.default.createElement(ViewToggle, null,
-                react_1.default.createElement(ToggleButton, { active: view === 'timeline', onClick: () => setView('timeline') }, "Timeline"),
-                react_1.default.createElement(ToggleButton, { active: view === 'canvas', onClick: () => setView('canvas') }, "Canvas")),
-            view === 'timeline' ? (react_1.default.createElement(react_1.default.Fragment, null, spans.length === 0 ? (react_1.default.createElement("div", { style: { textAlign: 'center', padding: '40px', color: '#666' } }, "No telemetry data yet. Interact with the story to capture spans.")) : (spans.map(span => (react_1.default.createElement(SpanCard, { key: span.id, status: span.status },
-                react_1.default.createElement(SpanHeader, null,
-                    react_1.default.createElement(SpanName, null, span.name),
-                    span.duration && (react_1.default.createElement(SpanDuration, null,
-                        span.duration,
-                        "ms"))),
-                Object.keys(span.attributes).length > 0 && (react_1.default.createElement(Attributes, null, Object.entries(span.attributes).map(([key, value]) => (react_1.default.createElement(AttributeRow, { key: key },
-                    react_1.default.createElement("span", null,
-                        key,
-                        ":"),
-                    " ",
-                    String(value)))))),
-                span.events.length > 0 && (react_1.default.createElement(EventList, null, span.events.map((event, idx) => (react_1.default.createElement(Event, { key: idx },
-                    react_1.default.createElement(EventName, null, event.name),
-                    Object.entries(event.attributes).map(([key, value]) => (react_1.default.createElement(AttributeRow, { key: key },
-                        react_1.default.createElement("span", null,
-                            key,
-                            ":"),
-                        " ",
-                        String(value))))))))),
-                span.errorMessage && (react_1.default.createElement("div", { style: { marginTop: '8px', color: '#ef4444', fontSize: '11px' } },
-                    "Error: ",
-                    span.errorMessage)))))))) : (react_1.default.createElement(CanvasPlaceholder, null,
-                react_1.default.createElement("h3", null, "Canvas Visualization"),
-                react_1.default.createElement("p", null, "Canvas view will visualize the telemetry flow using your GraphRenderer."),
-                react_1.default.createElement("p", { style: { marginTop: '8px', fontSize: '11px' } }, "To implement: Convert spans to canvas format and render with GraphRenderer"))))));
-};
-exports.TelemetryPanel = TelemetryPanel;

package/dist/manager.d.ts

@@ -1,6 +0,0 @@
-/**
- * Addon Manager Registration
- *
- * Registers the telemetry panel in Storybook UI
- */
-export {};

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')];
-}