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

package/package.json

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

package/.npmignore

@@ -1,20 +0,0 @@
-# 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/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 {};