@walkeros/explorer 0.3.1 → 1.0.0

package/dist/components/demos/DestinationInitDemo.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { tryCatchAsync } from '@walkeros/core';
+import { startFlow } from '@walkeros/collector';
+import { CodeBox } from '../molecules/code-box';
+import { Grid } from '../atoms/grid';
+import { captureDestinationInit } from '../../helpers/capture';
+/**
+ * DestinationInitDemo - Interactive destination initialization testing component
+ *
+ * Automatically captures destination.init() calls and displays the output.
+ * The component auto-detects the destination's env from destination.examples.env.init.
+ *
+ * Props:
+ * - destination: Destination instance with examples.env.init export
+ * - settings: Initial destination-specific settings
+ * - labelSettings: Label for settings panel (default: 'Settings')
+ * - labelOutput: Label for output panel (default: 'Result')
+ *
+ * Example:
+ * ```tsx
+ * import destinationGtag from '@walkeros/web-destination-gtag';
+ * import { examples } from '@walkeros/web-destination-gtag';
+ *
+ * const destination = { ...destinationGtag, examples };
+ *
+ * <DestinationInitDemo
+ *   destination={destination}
+ *   settings={{ ga4: { measurementId: 'G-XXXXXXXXXX' } }}
+ * />
+ * ```
+ */
+export function DestinationInitDemo({ destination, settings: initialSettings = {}, labelSettings = 'Settings', labelOutput = 'Result', }) {
+    const [settingsInput, setSettingsInput] = useState(typeof initialSettings === 'string'
+        ? initialSettings
+        : JSON.stringify(initialSettings, null, 2));
+    const [output, setOutput] = useState('');
+    const executeInit = useCallback(async () => {
+        await tryCatchAsync(async () => {
+            const settingsData = JSON.parse(settingsInput);
+            // Build config
+            const config = {
+                settings: settingsData,
+            };
+            // Create minimal collector
+            const { collector } = await startFlow({});
+            // Build context for destination.init()
+            const context = {
+                id: 'demo',
+                collector,
+                config,
+                env: destination.env || {},
+                logger: collector.logger,
+            };
+            if (!destination.init) {
+                setOutput('No init method defined for this destination');
+                return;
+            }
+            // Auto-detect destination.examples.env.init (for init method)
+            const destinationEnv = destination.examples?.env?.init;
+            // Use captureDestinationInit to automatically capture output
+            const captureFn = captureDestinationInit(destination, destinationEnv);
+            const result = await captureFn(context);
+            setOutput(result);
+        }, (error) => setOutput(`Error: ${error}`))();
+    }, [settingsInput, destination]);
+    useEffect(() => {
+        const timeoutId = setTimeout(executeInit, 500);
+        return () => clearTimeout(timeoutId);
+    }, [executeInit]);
+    return (_jsxs(Grid, { columns: 2, rowHeight: "synced", children: [_jsx(CodeBox, { label: labelSettings, code: settingsInput, onChange: setSettingsInput, language: "json", showFormat: true, autoHeight: true }), _jsx(CodeBox, { label: labelOutput, code: output, disabled: true, language: "javascript", autoHeight: true })] }));
+}
+//# sourceMappingURL=DestinationInitDemo.js.map

package/dist/components/demos/DestinationInitDemo.js.map

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

package/dist/components/demos/DestinationInitDemo.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DestinationInitDemo } from './DestinationInitDemo';
+/**
+ * DestinationInitDemo - Interactive destination initialization testing
+ *
+ * Tests destination.init() methods with configuration settings.
+ * Automatically captures initialization calls and displays output.
+ * Perfect for testing destination setup and configuration.
+ */
+declare const meta: Meta<typeof DestinationInitDemo>;
+export default meta;
+type Story = StoryObj<typeof DestinationInitDemo>;
+/**
+ * Default destination initialization demo with gtag GA4 settings
+ */
+export declare const Default: Story;
+//# sourceMappingURL=DestinationInitDemo.stories.d.ts.map

package/dist/components/demos/DestinationInitDemo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationInitDemo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/demos/DestinationInitDemo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAK5D;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AASlD;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/components/demos/DestinationInitDemo.stories.js

@@ -0,0 +1,39 @@
+import { DestinationInitDemo } from './DestinationInitDemo';
+import destinationGtag from '@walkeros/web-destination-gtag';
+import * as examples from '@walkeros/web-destination-gtag/examples';
+/**
+ * DestinationInitDemo - Interactive destination initialization testing
+ *
+ * Tests destination.init() methods with configuration settings.
+ * Automatically captures initialization calls and displays output.
+ * Perfect for testing destination setup and configuration.
+ */
+const meta = {
+    component: DestinationInitDemo,
+    title: 'Demos/DestinationInitDemo',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+// Create documentation gtag destination with examples
+// Cast to generic Destination.Instance to avoid type conflicts with specific gtag types
+const documentationGtag = {
+    ...destinationGtag,
+    examples,
+};
+/**
+ * Default destination initialization demo with gtag GA4 settings
+ */
+export const Default = {
+    args: {
+        destination: documentationGtag,
+        settings: {
+            ga4: {
+                measurementId: 'G-XXXXXXXXXX',
+            },
+        },
+    },
+};
+//# sourceMappingURL=DestinationInitDemo.stories.js.map

package/dist/components/demos/DestinationInitDemo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationInitDemo.stories.js","sourceRoot":"","sources":["../../../src/components/demos/DestinationInitDemo.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yCAAyC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,IAAI,GAAqC;IAC7C,SAAS,EAAE,mBAAmB;IAC9B,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,sDAAsD;AACtD,wFAAwF;AACxF,MAAM,iBAAiB,GAAG;IACxB,GAAG,eAAe;IAClB,QAAQ;CAC0D,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE,iBAAiB;QAC9B,QAAQ,EAAE;YACR,GAAG,EAAE;gBACH,aAAa,EAAE,cAAc;aAC9B;SACF;KACF;CACF,CAAC"}

package/dist/components/demos/MappingCode.d.ts

@@ -0,0 +1,34 @@
+export interface MappingCodeProps {
+    input: string;
+    config?: string;
+    labelInput?: string;
+    labelOutput?: string;
+}
+/**
+ * MappingCode - Specialized component for walkerOS mapping demonstrations
+ *
+ * Similar to LiveCode but specifically for mapping transformations.
+ * Shows input code and output result side-by-side with built-in mapping logic.
+ *
+ * Props:
+ * - input: Code string to execute (can use await getMappingEvent, getMappingValue)
+ * - config: Optional mapping configuration JSON
+ * - labelInput: Label for input editor (default: "Configuration")
+ * - labelOutput: Label for output display (default: "Result")
+ *
+ * Example:
+ * ```tsx
+ * <MappingCode
+ *   input={`await getMappingEvent(
+ *     { name: 'product view' },
+ *     {
+ *       product: {
+ *         view: { name: 'product_viewed' }
+ *       }
+ *     }
+ *   );`}
+ * />
+ * ```
+ */
+export declare function MappingCode({ input: initialInput, config, labelInput, labelOutput, }: MappingCodeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MappingCode.d.ts.map

package/dist/components/demos/MappingCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingCode.d.ts","sourceRoot":"","sources":["../../../src/components/demos/MappingCode.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,YAAY,EACnB,MAAM,EACN,UAA4B,EAC5B,WAAsB,GACvB,EAAE,gBAAgB,2CA8ClB"}

package/dist/components/demos/MappingCode.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { getMappingEvent, getMappingValue, createEvent } from '@walkeros/core';
+import { CodeBox } from '../molecules/code-box';
+import { Grid } from '../atoms/grid';
+/**
+ * MappingCode - Specialized component for walkerOS mapping demonstrations
+ *
+ * Similar to LiveCode but specifically for mapping transformations.
+ * Shows input code and output result side-by-side with built-in mapping logic.
+ *
+ * Props:
+ * - input: Code string to execute (can use await getMappingEvent, getMappingValue)
+ * - config: Optional mapping configuration JSON
+ * - labelInput: Label for input editor (default: "Configuration")
+ * - labelOutput: Label for output display (default: "Result")
+ *
+ * Example:
+ * ```tsx
+ * <MappingCode
+ *   input={`await getMappingEvent(
+ *     { name: 'product view' },
+ *     {
+ *       product: {
+ *         view: { name: 'product_viewed' }
+ *       }
+ *     }
+ *   );`}
+ * />
+ * ```
+ */
+export function MappingCode({ input: initialInput, config, labelInput = 'Configuration', labelOutput = 'Result', }) {
+    const [input, setInput] = useState(initialInput);
+    const [output, setOutput] = useState('');
+    const executeCode = useCallback(async () => {
+        try {
+            // Wrap input in async function and execute
+            const asyncFunction = new Function('getMappingEvent', 'getMappingValue', 'createEvent', `return (async () => {
+          return ${input}
+        })();`);
+            const result = await asyncFunction(getMappingEvent, getMappingValue, createEvent);
+            setOutput(JSON.stringify(result, null, 2));
+        }
+        catch (error) {
+            setOutput(`Error: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }, [input, config]);
+    useEffect(() => {
+        const timeoutId = setTimeout(executeCode, 500);
+        return () => clearTimeout(timeoutId);
+    }, [executeCode]);
+    return (_jsxs(Grid, { columns: 2, children: [_jsx(CodeBox, { label: labelInput, code: input, onChange: setInput, language: "javascript" }), _jsx(CodeBox, { label: labelOutput, code: output, disabled: true, language: "json" })] }));
+}
+//# sourceMappingURL=MappingCode.js.map

package/dist/components/demos/MappingCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingCode.js","sourceRoot":"","sources":["../../../src/components/demos/MappingCode.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASrC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EAAE,YAAY,EACnB,MAAM,EACN,UAAU,GAAG,eAAe,EAC5B,WAAW,GAAG,QAAQ,GACL;IACjB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACzC,IAAI,CAAC;YACH,2CAA2C;YAC3C,MAAM,aAAa,GAAG,IAAI,QAAQ,CAChC,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb;mBACW,KAAK;cACV,CACP,CAAC;YAEF,MAAM,MAAM,GAAG,MAAM,aAAa,CAChC,eAAe,EACf,eAAe,EACf,WAAW,CACZ,CAAC;YAEF,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC7C,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,SAAS,CACP,UAAU,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CACnE,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAE,CAAC,aACd,KAAC,OAAO,IACN,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,YAAY,GACrB,EACF,KAAC,OAAO,IAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,QAAC,QAAQ,EAAC,MAAM,GAAG,IACjE,CACR,CAAC;AACJ,CAAC"}

package/dist/components/demos/MappingCode.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MappingCode } from './MappingCode';
+/**
+ * MappingCode - Live code editor for mapping transformations
+ *
+ * Executes walkerOS mapping code in real-time and displays results.
+ * Perfect for demonstrating mapping functions like getMappingEvent and getMappingValue.
+ */
+declare const meta: Meta<typeof MappingCode>;
+export default meta;
+type Story = StoryObj<typeof MappingCode>;
+/**
+ * Default mapping code example with getMappingEvent
+ */
+export declare const Default: Story;
+//# sourceMappingURL=MappingCode.stories.d.ts.map

package/dist/components/demos/MappingCode.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingCode.stories.d.ts","sourceRoot":"","sources":["../../../src/components/demos/MappingCode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAOlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC"}

package/dist/components/demos/MappingCode.stories.js

@@ -0,0 +1,42 @@
+import { MappingCode } from './MappingCode';
+/**
+ * MappingCode - Live code editor for mapping transformations
+ *
+ * Executes walkerOS mapping code in real-time and displays results.
+ * Perfect for demonstrating mapping functions like getMappingEvent and getMappingValue.
+ */
+const meta = {
+    component: MappingCode,
+    title: 'Demos/MappingCode',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/**
+ * Default mapping code example with getMappingEvent
+ */
+export const Default = {
+    args: {
+        input: `await getMappingEvent(
+  { name: 'product view' },
+  {
+    product: {
+      view: {
+        name: 'view_item',
+        data: {
+          map: {
+            item_id: 'data.id',
+            item_name: 'data.name'
+          }
+        }
+      }
+    }
+  }
+);`,
+        labelInput: 'Code',
+        labelOutput: 'Result',
+    },
+};
+//# sourceMappingURL=MappingCode.stories.js.map

package/dist/components/demos/MappingCode.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingCode.stories.js","sourceRoot":"","sources":["../../../src/components/demos/MappingCode.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,IAAI,GAA6B;IACrC,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE;;;;;;;;;;;;;;;GAeR;QACC,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,QAAQ;KACtB;CACF,CAAC"}

package/dist/components/demos/MappingDemo.d.ts

@@ -0,0 +1,41 @@
+export interface MappingDemoProps {
+    input?: string;
+    config?: string;
+    labelInput?: string;
+    labelConfig?: string;
+    labelOutput?: string;
+    fn?: (input: string, config: string) => Promise<string>;
+}
+/**
+ * MappingDemo - Interactive dual-editor component with Monaco Editor
+ *
+ * A generic component with two editable JSON editors and one output display.
+ * Requires a transformation function to process input+config into output.
+ *
+ * Props:
+ * - input: Initial JSON string for left editor (default: '{}')
+ * - config: Initial JSON string for middle editor (default: '{}')
+ * - labelInput: Label for input editor (default: "Input")
+ * - labelConfig: Label for config editor (default: "Config")
+ * - labelOutput: Label for output editor (default: "Output")
+ * - fn: Transformation function (input, config) => Promise<string> (required for output)
+ *
+ * Example:
+ * ```tsx
+ * <MappingDemo
+ *   input='{ "name": "example" }'
+ *   config='{ "transform": "uppercase" }'
+ *   labelInput="Data"
+ *   labelConfig="Rules"
+ *   labelOutput="Result"
+ *   fn={async (input, config) => {
+ *     const data = JSON.parse(input);
+ *     const rules = JSON.parse(config);
+ *     // Your transformation logic
+ *     return JSON.stringify(result, null, 2);
+ *   }}
+ * />
+ * ```
+ */
+export declare function MappingDemo({ input: initialInput, config: initialConfig, labelInput, labelConfig, labelOutput, fn, }?: MappingDemoProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MappingDemo.d.ts.map

package/dist/components/demos/MappingDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingDemo.d.ts","sourceRoot":"","sources":["../../../src/components/demos/MappingDemo.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACzD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,YAAmB,EAC1B,MAAM,EAAE,aAAoB,EAC5B,UAAoB,EACpB,WAAsB,EACtB,WAAsB,EACtB,EAAE,GACH,GAAE,gBAAqB,2CAsDvB"}

package/dist/components/demos/MappingDemo.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { CodeBox } from '../molecules/code-box';
+import { Grid } from '../atoms/grid';
+/**
+ * MappingDemo - Interactive dual-editor component with Monaco Editor
+ *
+ * A generic component with two editable JSON editors and one output display.
+ * Requires a transformation function to process input+config into output.
+ *
+ * Props:
+ * - input: Initial JSON string for left editor (default: '{}')
+ * - config: Initial JSON string for middle editor (default: '{}')
+ * - labelInput: Label for input editor (default: "Input")
+ * - labelConfig: Label for config editor (default: "Config")
+ * - labelOutput: Label for output editor (default: "Output")
+ * - fn: Transformation function (input, config) => Promise<string> (required for output)
+ *
+ * Example:
+ * ```tsx
+ * <MappingDemo
+ *   input='{ "name": "example" }'
+ *   config='{ "transform": "uppercase" }'
+ *   labelInput="Data"
+ *   labelConfig="Rules"
+ *   labelOutput="Result"
+ *   fn={async (input, config) => {
+ *     const data = JSON.parse(input);
+ *     const rules = JSON.parse(config);
+ *     // Your transformation logic
+ *     return JSON.stringify(result, null, 2);
+ *   }}
+ * />
+ * ```
+ */
+export function MappingDemo({ input: initialInput = '{}', config: initialConfig = '{}', labelInput = 'Input', labelConfig = 'Config', labelOutput = 'Output', fn, } = {}) {
+    const [input, setInput] = useState(initialInput);
+    const [config, setConfig] = useState(initialConfig);
+    const [output, setOutput] = useState('');
+    const updateOutput = useCallback(async () => {
+        try {
+            if (fn) {
+                // Use custom function if provided
+                const result = await fn(input, config);
+                setOutput(result);
+            }
+            else {
+                // Default behavior: just show the parsed JSON
+                setOutput('No transformation function provided');
+            }
+        }
+        catch (error) {
+            setOutput(`Error: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }, [input, config, fn]);
+    useEffect(() => {
+        const timeoutId = setTimeout(updateOutput, 500);
+        return () => clearTimeout(timeoutId);
+    }, [updateOutput]);
+    return (_jsxs(Grid, { columns: 3, rowHeight: "synced", children: [_jsx(CodeBox, { label: labelInput, code: input, onChange: setInput, language: "json", showFormat: true, autoHeight: true }), _jsx(CodeBox, { label: labelConfig, code: config, onChange: setConfig, language: "json", showFormat: true, autoHeight: true }), _jsx(CodeBox, { label: labelOutput, code: output, disabled: true, language: "json", autoHeight: true })] }));
+}
+//# sourceMappingURL=MappingDemo.js.map

package/dist/components/demos/MappingDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingDemo.js","sourceRoot":"","sources":["../../../src/components/demos/MappingDemo.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAcrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EAAE,YAAY,GAAG,IAAI,EAC1B,MAAM,EAAE,aAAa,GAAG,IAAI,EAC5B,UAAU,GAAG,OAAO,EACpB,WAAW,GAAG,QAAQ,EACtB,WAAW,GAAG,QAAQ,EACtB,EAAE,MACkB,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC1C,IAAI,CAAC;YACH,IAAI,EAAE,EAAE,CAAC;gBACP,kCAAkC;gBAClC,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;gBACvC,SAAS,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,8CAA8C;gBAC9C,SAAS,CAAC,qCAAqC,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,SAAS,CACP,UAAU,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CACnE,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,QAAQ,aAClC,KAAC,OAAO,IACN,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,MAAM,EACf,UAAU,QACV,UAAU,SACV,EACF,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAC,MAAM,EACf,UAAU,QACV,UAAU,SACV,EACF,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,MAAM,EACZ,QAAQ,QACR,QAAQ,EAAC,MAAM,EACf,UAAU,SACV,IACG,CACR,CAAC;AACJ,CAAC"}

package/dist/components/demos/MappingDemo.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MappingDemo } from './MappingDemo';
+/**
+ * MappingDemo - Interactive 3-panel mapping editor
+ *
+ * Generic transformation component with two editable inputs (event + config)
+ * and one output display. Perfect for demonstrating walkerOS mapping transformations.
+ */
+declare const meta: Meta<typeof MappingDemo>;
+export default meta;
+type Story = StoryObj<typeof MappingDemo>;
+/**
+ * Default mapping demo with event transformation
+ */
+export declare const Default: Story;
+//# sourceMappingURL=MappingDemo.stories.d.ts.map

package/dist/components/demos/MappingDemo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingDemo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/demos/MappingDemo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAOlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAoDrB,CAAC"}

package/dist/components/demos/MappingDemo.stories.js

@@ -0,0 +1,63 @@
+import { MappingDemo } from './MappingDemo';
+import { getMappingEvent, getMappingValue, createEvent } from '@walkeros/core';
+/**
+ * MappingDemo - Interactive 3-panel mapping editor
+ *
+ * Generic transformation component with two editable inputs (event + config)
+ * and one output display. Perfect for demonstrating walkerOS mapping transformations.
+ */
+const meta = {
+    component: MappingDemo,
+    title: 'Demos/MappingDemo',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/**
+ * Default mapping demo with event transformation
+ */
+export const Default = {
+    args: {
+        input: JSON.stringify({
+            id: 'P123',
+            productName: 'Laptop',
+            price: 999,
+        }, null, 2),
+        config: JSON.stringify({
+            product: {
+                view: {
+                    name: 'view_item',
+                    data: {
+                        map: {
+                            item_id: 'data.id',
+                            item_name: 'data.productName',
+                            price: 'data.price',
+                            currency: { value: 'USD' },
+                        },
+                    },
+                },
+            },
+        }, null, 2),
+        labelInput: 'Event',
+        labelConfig: 'Mapping',
+        labelOutput: 'Result',
+        fn: async (input, config) => {
+            try {
+                const data = JSON.parse(input);
+                const mapping = JSON.parse(config);
+                const event = createEvent({ name: 'product view', data });
+                const mappingResult = await getMappingEvent(event, mapping);
+                const result = await getMappingValue(event, mappingResult.eventMapping?.data, {
+                    collector: { id: 'demo' },
+                });
+                return JSON.stringify(result, null, 2);
+            }
+            catch (error) {
+                return `Error: ${error instanceof Error ? error.message : String(error)}`;
+            }
+        },
+    },
+};
+//# sourceMappingURL=MappingDemo.stories.js.map

package/dist/components/demos/MappingDemo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingDemo.stories.js","sourceRoot":"","sources":["../../../src/components/demos/MappingDemo.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG/E;;;;;GAKG;AACH,MAAM,IAAI,GAA6B;IACrC,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI,CAAC,SAAS,CACnB;YACE,EAAE,EAAE,MAAM;YACV,WAAW,EAAE,QAAQ;YACrB,KAAK,EAAE,GAAG;SACX,EACD,IAAI,EACJ,CAAC,CACF;QACD,MAAM,EAAE,IAAI,CAAC,SAAS,CACpB;YACE,OAAO,EAAE;gBACP,IAAI,EAAE;oBACJ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE;wBACJ,GAAG,EAAE;4BACH,OAAO,EAAE,SAAS;4BAClB,SAAS,EAAE,kBAAkB;4BAC7B,KAAK,EAAE,YAAY;4BACnB,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;yBAC3B;qBACF;iBACF;aACF;SACF,EACD,IAAI,EACJ,CAAC,CACF;QACD,UAAU,EAAE,OAAO;QACnB,WAAW,EAAE,SAAS;QACtB,WAAW,EAAE,QAAQ;QACrB,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;YAC1B,IAAI,CAAC;gBACH,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBACnC,MAAM,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC1D,MAAM,aAAa,GAAG,MAAM,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBAC5D,MAAM,MAAM,GAAG,MAAM,eAAe,CAClC,KAAK,EACL,aAAa,CAAC,YAAY,EAAE,IAAI,EAChC;oBACE,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAmC;iBAC3D,CACF,CAAC;gBACF,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACzC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,UAAU,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5E,CAAC;QACH,CAAC;KACF;CACF,CAAC"}

package/dist/components/demos/PromotionPlayground.d.ts

@@ -0,0 +1,25 @@
+import { type DestinationCode } from '../../helpers/destinations';
+export interface PromotionPlaygroundProps {
+    initialHtml?: string;
+    initialCss?: string;
+    initialJs?: string;
+    initialMapping?: string;
+    labelCode?: string;
+    labelPreview?: string;
+    labelEvents?: string;
+    labelMapping?: string;
+    labelResult?: string;
+    destination?: DestinationCode;
+}
+/**
+ * PromotionPlayground - Full walkerOS demonstration with live code editing
+ *
+ * Shows the complete chain:
+ * 1. Code Editor - Edit HTML/CSS/JS with walkerOS data attributes
+ * 2. Preview - Live rendered output that captures real events
+ * 3. Events - Real events captured from preview interactions
+ * 4. Mapping - Apply transformations and see destination output
+ * 5. Result - Final destination function calls
+ */
+export declare function PromotionPlayground({ initialHtml, initialCss, initialJs, initialMapping, labelCode, labelPreview, labelEvents, labelMapping, labelResult, destination, }: PromotionPlaygroundProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromotionPlayground.d.ts.map

package/dist/components/demos/PromotionPlayground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.d.ts","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AA2PD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAyB,EACzB,UAAuB,EACvB,SAAc,EACd,cAA+B,EAC/B,SAAkB,EAClB,YAAwB,EACxB,WAAsB,EACtB,YAAwB,EACxB,WAAsB,EACtB,WAAqC,GACtC,EAAE,wBAAwB,2CAyE1B"}