@walkeros/explorer 0.3.1 → 1.0.0

package/dist/components/molecules/settings-overview-pane.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuleTile } from '../atoms/config-tile';
+import { BaseMappingPane } from '../atoms/base-mapping-pane';
+function getSettingStatus(value) {
+    if (value === undefined || value === null) {
+        return { enabled: false, text: 'Not set' };
+    }
+    // Display value preview
+    if (typeof value === 'string') {
+        return { enabled: true, text: value };
+    }
+    if (typeof value === 'number') {
+        return { enabled: true, text: String(value) };
+    }
+    if (typeof value === 'boolean') {
+        return { enabled: true, text: value ? 'Enabled' : 'Disabled' };
+    }
+    if (Array.isArray(value)) {
+        return { enabled: true, text: `${value.length} items` };
+    }
+    if (typeof value === 'object') {
+        const keys = Object.keys(value);
+        return { enabled: true, text: `${keys.length} properties` };
+    }
+    return { enabled: true, text: 'Configured' };
+}
+export function SettingsOverviewPane({ path, mappingState, navigation, schema, className = '', }) {
+    const settings = mappingState.actions.getValue(path);
+    // Gather all setting keys (from value + schema)
+    const configuredKeys = settings ? Object.keys(settings) : [];
+    const schemaKeys = schema?.properties ? Object.keys(schema.properties) : [];
+    const allKeys = Array.from(new Set([...configuredKeys, ...schemaKeys])).sort();
+    // Separate configured vs available
+    const configuredSettings = [];
+    const availableSettings = [];
+    allKeys.forEach((key) => {
+        const propSchema = schema?.properties?.[key];
+        const title = propSchema?.title || key.charAt(0).toUpperCase() + key.slice(1);
+        const description = propSchema?.description;
+        let nodeType = 'valueConfig';
+        if (propSchema) {
+            if (propSchema.enum && Array.isArray(propSchema.enum) && propSchema.enum.length > 0) {
+                nodeType = 'enum';
+            }
+            else if (propSchema.type === 'boolean') {
+                nodeType = 'boolean';
+            }
+            else if (propSchema.type === 'object') {
+                nodeType = 'map';
+            }
+            else if (propSchema.type === 'array') {
+                nodeType = propSchema.minItems === 2 && propSchema.maxItems === 2 ? 'loop' : 'set';
+            }
+            else if (propSchema.type === 'string' || propSchema.type === 'number') {
+                nodeType = 'primitive';
+            }
+        }
+        const currentValue = mappingState.actions.getValue([...path, key]);
+        const hasValue = currentValue !== undefined;
+        if (hasValue) {
+            configuredSettings.push({
+                key,
+                title,
+                description,
+                nodeType,
+                value: currentValue,
+            });
+        }
+        else {
+            availableSettings.push({
+                key,
+                title,
+                description,
+                nodeType,
+            });
+        }
+    });
+    const handleSettingClick = (key, nodeType) => {
+        navigation.openTab([...path, key], nodeType);
+    };
+    return (_jsxs(BaseMappingPane, { title: "Settings", description: configuredSettings.length === 0
+            ? 'No settings configured. Click a tile to add settings.'
+            : `${configuredSettings.length} ${configuredSettings.length === 1 ? 'setting' : 'settings'} configured`, navigation: navigation, className: className, children: [_jsx("div", { className: "elb-mapping-rule-section-grid", children: configuredSettings.map((setting) => (_jsx(RuleTile, { label: setting.title, description: setting.description || '', status: getSettingStatus(setting.value), onClick: () => handleSettingClick(setting.key, setting.nodeType) }, setting.key))) }), availableSettings.length > 0 && (_jsxs("div", { className: "elb-mapping-rule-section", children: [_jsx("h3", { className: "elb-mapping-rule-section-title", children: "Available Settings" }), _jsx("p", { className: "elb-mapping-rule-section-description", children: "Click to configure additional destination settings" }), _jsx("div", { className: "elb-mapping-rule-section-grid", children: availableSettings.map((setting) => (_jsx(RuleTile, { label: setting.title, description: setting.description || '', status: { enabled: false, text: 'Not set' }, onClick: () => handleSettingClick(setting.key, setting.nodeType) }, setting.key))) })] }))] }));
+}
+//# sourceMappingURL=settings-overview-pane.js.map

package/dist/components/molecules/settings-overview-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-overview-pane.js","sourceRoot":"","sources":["../../../src/components/molecules/settings-overview-pane.tsx"],"names":[],"mappings":"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"}

package/dist/components/molecules/validation-overview-pane.d.ts

@@ -0,0 +1,27 @@
+import type { UseMappingNavigationReturn } from '../../hooks/useMappingNavigation';
+import type { ValidationError } from '../../utils/config-validator';
+import type { ConfigStructureDef } from '../../schemas/config-structures/types';
+import type { RJSFSchema } from '@rjsf/utils';
+/**
+ * Validation Overview Pane - Shows all validation errors in the config
+ *
+ * Displays a list of all fields that have validation errors, grouped by section.
+ * Each error shows the path, current value, and error message.
+ * Clicking an error navigates to that field for editing.
+ *
+ * @example
+ * <ValidationOverviewPane
+ *   errors={validationErrors}
+ *   navigation={navigation}
+ * />
+ */
+export interface ValidationOverviewPaneProps {
+    errors: ValidationError[];
+    navigation: UseMappingNavigationReturn;
+    config: unknown;
+    structure: ConfigStructureDef;
+    schemas?: Record<string, RJSFSchema>;
+    className?: string;
+}
+export declare function ValidationOverviewPane({ errors, navigation, config, structure, schemas, className, }: ValidationOverviewPaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=validation-overview-pane.d.ts.map

package/dist/components/molecules/validation-overview-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-overview-pane.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/validation-overview-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAIpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,UAAU,EAAE,0BAA0B,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,OAAO,EACP,SAAc,GACf,EAAE,2BAA2B,2CAyE7B"}

package/dist/components/molecules/validation-overview-pane.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatPath, groupErrorsBySection } from '../../utils/config-validator';
+import { BaseMappingPane } from '../atoms/base-mapping-pane';
+import { detectNodeType } from '../../utils/type-detector';
+import { getValueAtPath } from '../../utils/mapping-path';
+/**
+ * Format value for display (truncate if too long)
+ */
+function formatValue(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    const str = typeof value === 'string' ? value : JSON.stringify(value);
+    const maxLength = 50;
+    if (str.length > maxLength) {
+        return str.substring(0, maxLength) + '...';
+    }
+    return str;
+}
+/**
+ * Get a nice section title from section key
+ */
+function getSectionTitle(section) {
+    const titles = {
+        settings: 'Settings',
+        mapping: 'Mapping Rules',
+        policy: 'Policy',
+        consent: 'Consent',
+        data: 'Data',
+    };
+    return titles[section] || section.charAt(0).toUpperCase() + section.slice(1);
+}
+export function ValidationOverviewPane({ errors, navigation, config, structure, schemas, className = '', }) {
+    const groupedErrors = groupErrorsBySection(errors);
+    const sections = Object.keys(groupedErrors).sort();
+    const handleErrorClick = (error) => {
+        const value = getValueAtPath(config, error.path);
+        const nodeType = detectNodeType(value, error.path, structure, schemas);
+        navigation.openTab(error.path, nodeType);
+    };
+    return (_jsx(BaseMappingPane, { title: "Validation Errors", description: errors.length === 0
+            ? 'No validation errors found. All fields are valid.'
+            : `${errors.length} validation ${errors.length === 1 ? 'error' : 'errors'} found in your configuration.`, navigation: navigation, className: className, children: errors.length === 0 ? (_jsx("div", { className: "elb-mapping-rule-section", children: _jsxs("div", { style: {
+                    padding: '40px 20px',
+                    textAlign: 'center',
+                    color: 'var(--color-text-muted)',
+                }, children: [_jsx("div", { style: { fontSize: '48px', marginBottom: '16px' }, children: "\u2713" }), _jsx("div", { style: { fontSize: '16px', fontWeight: 500 }, children: "All fields are valid" }), _jsx("div", { style: { fontSize: '14px', marginTop: '8px' }, children: "Your configuration has no validation errors." })] }) })) : (sections.map((section) => (_jsxs("div", { className: "elb-mapping-rule-section", children: [_jsx("h3", { className: "elb-mapping-rule-section-title", children: getSectionTitle(section) }), _jsx("div", { className: "elb-validation-errors-list", children: groupedErrors[section].map((error, index) => (_jsxs("div", { className: "elb-validation-error-item", onClick: () => handleErrorClick(error), children: [_jsx("div", { className: "elb-validation-error-icon", children: "\u26A0" }), _jsxs("div", { className: "elb-validation-error-content", children: [_jsx("div", { className: "elb-validation-error-path", children: formatPath(error.path) }), _jsx("div", { className: "elb-validation-error-message", children: error.error }), _jsxs("div", { className: "elb-validation-error-value", children: ["Current value: ", _jsx("code", { children: formatValue(error.value) })] })] }), _jsx("div", { className: "elb-validation-error-action", children: "\u2192" })] }, `${formatPath(error.path)}-${index}`))) })] }, section)))) }));
+}
+//# sourceMappingURL=validation-overview-pane.js.map

package/dist/components/molecules/validation-overview-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-overview-pane.js","sourceRoot":"","sources":["../../../src/components/molecules/validation-overview-pane.tsx"],"names":[],"mappings":"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"}

package/dist/components/organisms/browser-box.d.ts

@@ -0,0 +1,31 @@
+export interface BrowserBoxProps {
+    html?: string;
+    css?: string;
+    js?: string;
+    onHtmlChange?: (value: string) => void;
+    onCssChange?: (value: string) => void;
+    onJsChange?: (value: string) => void;
+    showPreview?: boolean;
+    label?: string;
+    className?: string;
+    initialTab?: 'preview' | 'html' | 'css' | 'js';
+    lineNumbers?: boolean;
+    wordWrap?: boolean;
+}
+/**
+ * BrowserBox - Code editor with HTML/CSS/JS toggle
+ *
+ * Displays code editor with button group to switch between HTML, CSS, and JavaScript.
+ * Only shows tabs for content that is provided.
+ *
+ * @example
+ * <BrowserBox
+ *   html={htmlCode}
+ *   css={cssCode}
+ *   onHtmlChange={setHtml}
+ *   onCssChange={setCss}
+ *   label="Code"
+ * />
+ */
+export declare function BrowserBox({ html, css, js, onHtmlChange, onCssChange, onJsChange, showPreview, label, className, initialTab, lineNumbers, wordWrap, }: BrowserBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=browser-box.d.ts.map

package/dist/components/organisms/browser-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,GAAG,EACH,EAAE,EACF,YAAY,EACZ,WAAW,EACX,UAAU,EACV,WAAkB,EAClB,KAAc,EACd,SAAc,EACd,UAAU,EACV,WAAmB,EACnB,QAAgB,GACjB,EAAE,eAAe,2CAqFjB"}

package/dist/components/organisms/browser-box.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box } from '../atoms/box';
+import { ButtonGroup } from '../atoms/button-group';
+import { Preview } from '../molecules/preview';
+import { Code } from '../atoms/code';
+/**
+ * BrowserBox - Code editor with HTML/CSS/JS toggle
+ *
+ * Displays code editor with button group to switch between HTML, CSS, and JavaScript.
+ * Only shows tabs for content that is provided.
+ *
+ * @example
+ * <BrowserBox
+ *   html={htmlCode}
+ *   css={cssCode}
+ *   onHtmlChange={setHtml}
+ *   onCssChange={setCss}
+ *   label="Code"
+ * />
+ */
+export function BrowserBox({ html, css, js, onHtmlChange, onCssChange, onJsChange, showPreview = true, label = 'Code', className = '', initialTab, lineNumbers = false, wordWrap = false, }) {
+    // Determine available tabs
+    const availableTabs = useMemo(() => {
+        const tabs = [];
+        if (showPreview && html !== undefined)
+            tabs.push({ label: 'Preview', value: 'preview' });
+        if (html !== undefined)
+            tabs.push({ label: 'HTML', value: 'html' });
+        if (css !== undefined)
+            tabs.push({ label: 'CSS', value: 'css' });
+        if (js !== undefined)
+            tabs.push({ label: 'JS', value: 'js' });
+        return tabs;
+    }, [html, css, js, showPreview]);
+    // Set initial active tab
+    const [activeTab, setActiveTab] = useState(() => {
+        if (initialTab && availableTabs.some((t) => t.value === initialTab)) {
+            return initialTab;
+        }
+        return availableTabs[0]?.value || 'preview';
+    });
+    // Get current content and language
+    const { content, language, onChange } = useMemo(() => {
+        switch (activeTab) {
+            case 'html':
+                return {
+                    content: html || '',
+                    language: 'html',
+                    onChange: onHtmlChange,
+                };
+            case 'css':
+                return {
+                    content: css || '',
+                    language: 'css',
+                    onChange: onCssChange,
+                };
+            case 'js':
+                return {
+                    content: js || '',
+                    language: 'javascript',
+                    onChange: onJsChange,
+                };
+            default:
+                return {
+                    content: '',
+                    language: 'text',
+                    onChange: undefined,
+                };
+        }
+    }, [activeTab, html, css, js, onHtmlChange, onCssChange, onJsChange]);
+    // Build button group data
+    const buttons = useMemo(() => availableTabs.map((tab) => ({
+        label: tab.label,
+        value: tab.value,
+        active: activeTab === tab.value,
+    })), [availableTabs, activeTab]);
+    return (_jsx(Box, { header: label, headerActions: availableTabs.length > 1 ? (_jsx(ButtonGroup, { buttons: buttons, onButtonClick: setActiveTab })) : null, className: className, children: activeTab === 'preview' ? (_jsx(Preview, { html: html || '', css: css || '' })) : (_jsx(Code, { code: content, language: language, onChange: onChange, disabled: !onChange, lineNumbers: lineNumbers, wordWrap: wordWrap })) }));
+}
+//# sourceMappingURL=browser-box.js.map

package/dist/components/organisms/browser-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.js","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.tsx"],"names":[],"mappings":"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"}

package/dist/components/organisms/browser-box.stories.d.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BrowserBox } from './browser-box';
+/**
+ * BrowserBox - Multi-tab HTML/CSS/JS editor with live preview
+ *
+ * Tabbed code editor that shows:
+ * - Live preview of HTML
+ * - HTML editor
+ * - CSS editor
+ * - JavaScript editor (when provided)
+ *
+ * Tabs are automatically hidden if content isn't provided.
+ */
+declare const meta: Meta<typeof BrowserBox>;
+export default meta;
+type Story = StoryObj<typeof BrowserBox>;
+/**
+ * Default browser box with HTML and CSS
+ *
+ * Shows a product card with:
+ * - Preview tab (live render)
+ * - HTML tab (editable source)
+ * - CSS tab (editable styles)
+ */
+export declare const Default: Story;
+//# sourceMappingURL=browser-box.stories.d.ts.map

package/dist/components/organisms/browser-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.stories.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAmEzC;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

package/dist/components/organisms/browser-box.stories.js

@@ -0,0 +1,102 @@
+import { BrowserBox } from './browser-box';
+/**
+ * BrowserBox - Multi-tab HTML/CSS/JS editor with live preview
+ *
+ * Tabbed code editor that shows:
+ * - Live preview of HTML
+ * - HTML editor
+ * - CSS editor
+ * - JavaScript editor (when provided)
+ *
+ * Tabs are automatically hidden if content isn't provided.
+ */
+const meta = {
+    component: BrowserBox,
+    title: 'Organisms/BrowserBox',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const sampleHtml = `<div class="product-card">
+  <div class="product-header">
+    <h2 class="product-title">Everyday Ruck Snack</h2>
+    <span class="product-badge">New</span>
+  </div>
+  <p class="product-price">€ 2.50</p>
+  <button class="product-button">Add to Cart</button>
+</div>`;
+const sampleCss = `
+.product-card {
+  width: 300px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  font-family: -apple-system, sans-serif;
+}
+
+.product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.product-title {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #1f2937;
+}
+
+.product-badge {
+  background: #3b82f6;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.product-price {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0 0 16px 0;
+}
+
+.product-button {
+  width: 100%;
+  padding: 12px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.product-button:hover {
+  background: #2563eb;
+}
+`;
+/**
+ * Default browser box with HTML and CSS
+ *
+ * Shows a product card with:
+ * - Preview tab (live render)
+ * - HTML tab (editable source)
+ * - CSS tab (editable styles)
+ */
+export const Default = {
+    args: {
+        html: sampleHtml,
+        css: sampleCss,
+        showPreview: true,
+        label: 'Code',
+        initialTab: 'preview',
+    },
+};
+//# sourceMappingURL=browser-box.stories.js.map

package/dist/components/organisms/browser-box.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-box.stories.js","sourceRoot":"","sources":["../../../src/components/organisms/browser-box.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAA4B;IACpC,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,sBAAsB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,UAAU,GAAG;;;;;;;OAOZ,CAAC;AAER,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,SAAS;QACd,WAAW,EAAE,IAAI;QACjB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS;KACtB;CACF,CAAC"}

package/dist/components/organisms/collector-box.d.ts

@@ -0,0 +1,24 @@
+import type { DestinationCode } from '../../helpers/destinations';
+export interface CollectorBoxProps {
+    event: string;
+    mapping: string;
+    destination: DestinationCode;
+    label?: string;
+    wordWrap?: boolean;
+}
+/**
+ * CollectorBox - Runs a collector with destination to transform events
+ *
+ * Takes raw event and mapping config, processes through collector pipeline,
+ * and displays the formatted destination output.
+ *
+ * @example
+ * <CollectorBox
+ *   event={JSON.stringify(event)}
+ *   mapping={mappingConfig}
+ *   destination={createGtagDestination()}
+ *   label="Result"
+ * />
+ */
+export declare function CollectorBox({ event, mapping, destination, label, wordWrap, }: CollectorBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collector-box.d.ts.map

package/dist/components/organisms/collector-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,eAAe,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAgB,EAChB,QAAgB,GACjB,EAAE,iBAAiB,2CAgDnB"}

package/dist/components/organisms/collector-box.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { startFlow } from '@walkeros/collector';
+import { CodeBox } from '../molecules/code-box';
+/**
+ * CollectorBox - Runs a collector with destination to transform events
+ *
+ * Takes raw event and mapping config, processes through collector pipeline,
+ * and displays the formatted destination output.
+ *
+ * @example
+ * <CollectorBox
+ *   event={JSON.stringify(event)}
+ *   mapping={mappingConfig}
+ *   destination={createGtagDestination()}
+ *   label="Result"
+ * />
+ */
+export function CollectorBox({ event, mapping, destination, label = 'Result', wordWrap = false, }) {
+    const [output, setOutput] = useState('// Click elements in the preview to see function call');
+    useEffect(() => {
+        (async () => {
+            try {
+                // Parse inputs
+                const eventObj = JSON.parse(event);
+                const mappingObj = JSON.parse(mapping);
+                // Create collector with destination
+                const { collector } = await startFlow({
+                    destinations: {
+                        demo: {
+                            code: destination,
+                            config: {
+                                mapping: mappingObj,
+                            },
+                            env: {
+                                elb: setOutput,
+                            },
+                        },
+                    },
+                });
+                // Push event through collector → destination
+                await collector.push(eventObj);
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    setOutput(`// Error: ${error.message}`);
+                }
+                else {
+                    setOutput(`// Error: ${String(error)}`);
+                }
+            }
+        })();
+    }, [event, mapping, destination]);
+    return (_jsx(CodeBox, { code: output, language: "javascript", disabled: true, label: label, wordWrap: wordWrap }));
+}
+//# sourceMappingURL=collector-box.js.map

package/dist/components/organisms/collector-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.js","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAUhD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,KAAK,GACE;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,uDAAuD,CACxD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,CAAC;gBACH,eAAe;gBACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACnC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAEvC,oCAAoC;gBACpC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,SAAS,CAAC;oBACpC,YAAY,EAAE;wBACZ,IAAI,EAAE;4BACJ,IAAI,EAAE,WAAW;4BACjB,MAAM,EAAE;gCACN,OAAO,EAAE,UAAU;6BACpB;4BACD,GAAG,EAAE;gCACH,GAAG,EAAE,SAAS;6BACf;yBACF;qBACF;iBACF,CAAC,CAAC;gBAEH,6CAA6C;gBAC7C,MAAM,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACjC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;oBAC3B,SAAS,CAAC,aAAa,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC1C,CAAC;qBAAM,CAAC;oBACN,SAAS,CAAC,aAAa,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;gBAC1C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAC,YAAY,EACrB,QAAQ,QACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/organisms/collector-box.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CollectorBox } from './collector-box';
+/**
+ * CollectorBox - Event pipeline processor with collector
+ *
+ * Processes events through the walkerOS collector pipeline with a destination,
+ * showing the final formatted output. Perfect for demonstrating how events
+ * are transformed and sent to analytics tools.
+ */
+declare const meta: Meta<typeof CollectorBox>;
+export default meta;
+type Story = StoryObj<typeof CollectorBox>;
+/**
+ * Default collector box with product view event
+ *
+ * Shows how a product view event is:
+ * 1. Processed by the collector
+ * 2. Transformed by mapping rules
+ * 3. Formatted as gtag() call
+ */
+export declare const Default: Story;
+//# sourceMappingURL=collector-box.stories.d.ts.map

package/dist/components/organisms/collector-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.stories.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAmC3C;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

package/dist/components/organisms/collector-box.stories.js

@@ -0,0 +1,59 @@
+import { CollectorBox } from './collector-box';
+import { createGtagDestination } from '../../helpers/destinations';
+/**
+ * CollectorBox - Event pipeline processor with collector
+ *
+ * Processes events through the walkerOS collector pipeline with a destination,
+ * showing the final formatted output. Perfect for demonstrating how events
+ * are transformed and sent to analytics tools.
+ */
+const meta = {
+    component: CollectorBox,
+    title: 'Organisms/CollectorBox',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const sampleEvent = JSON.stringify({
+    entity: 'product',
+    action: 'view',
+    data: {
+        id: 'P123',
+        name: 'Laptop',
+        price: 999,
+    },
+}, null, 2);
+const sampleMapping = JSON.stringify({
+    product: {
+        view: {
+            name: 'view_item',
+            data: {
+                map: {
+                    item_id: 'data.id',
+                    item_name: 'data.name',
+                    value: 'data.price',
+                },
+            },
+        },
+    },
+}, null, 2);
+/**
+ * Default collector box with product view event
+ *
+ * Shows how a product view event is:
+ * 1. Processed by the collector
+ * 2. Transformed by mapping rules
+ * 3. Formatted as gtag() call
+ */
+export const Default = {
+    args: {
+        event: sampleEvent,
+        mapping: sampleMapping,
+        destination: createGtagDestination(),
+        label: 'Collector Output',
+        wordWrap: false,
+    },
+};
+//# sourceMappingURL=collector-box.stories.js.map

package/dist/components/organisms/collector-box.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector-box.stories.js","sourceRoot":"","sources":["../../../src/components/organisms/collector-box.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE;;;;;;GAMG;AACH,MAAM,IAAI,GAA8B;IACtC,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAChC;IACE,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;IACd,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,GAAG;KACX;CACF,EACD,IAAI,EACJ,CAAC,CACF,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAClC;IACE,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE;gBACJ,GAAG,EAAE;oBACH,OAAO,EAAE,SAAS;oBAClB,SAAS,EAAE,WAAW;oBACtB,KAAK,EAAE,YAAY;iBACpB;aACF;SACF;KACF;CACF,EACD,IAAI,EACJ,CAAC,CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,OAAO,EAAE,aAAa;QACtB,WAAW,EAAE,qBAAqB,EAAE;QACpC,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC"}