@walkeros/explorer 2.1.3 → 2.1.5

package/dist/components/molecules/code-box.stories.js

@@ -1,300 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { schemas } from '@walkeros/core/dev';
-import { CodeBox } from './code-box';
-import { enrichFlowSetupSchema } from '../../utils/monaco-schema-flow-setup';
-import { getEnrichedContractSchema } from '../../utils/monaco-schema-contract';
-import { getVariablesSchema } from '../../utils/monaco-schema-variables';
-/**
- * CodeBox - Monaco Editor wrapped in a Box component
- *
- * Combines the Code atom with Box container, providing header and toolbar actions.
- * Supports copy to clipboard, JSON formatting, and flexible height modes.
- */
-const meta = {
-    component: CodeBox,
-    title: 'Molecules/CodeBox',
-    tags: ['autodocs'],
-};
-export default meta;
-/**
- * Default CodeBox with JavaScript code
- */
-export const Default = {
-    args: {
-        code: `const event = {
-  entity: 'product',
-  action: 'view',
-  data: {
-    id: 'P123',
-    name: 'Laptop',
-    price: 999
-  }
-};
-
-console.log('Event:', event);`,
-        language: 'javascript',
-        label: 'Code Editor',
-        showCopy: true,
-        showFormat: false,
-    },
-};
-const flowJsonCode = `{
-  "flows": {
-    "default": {
-      "sources": {
-        "browser": {
-          "package": "@walkeros/web-source-browser",
-          "config": { "settings": { "pageview": true } }
-        }
-      },
-      "destinations": {
-        "ga4": {
-          "package": "@walkeros/web-destination-gtag",
-          "config": {
-            "settings": { "ga4": { "measurementId": "G-XXX" } }
-          }
-        }
-      }
-    }
-  }
-}`;
-/**
- * Mac-style code window with traffic lights and filename tab
- *
- * Use this pattern for landing pages and documentation.
- */
-export const WithTrafficLights = {
-    args: {
-        code: flowJsonCode,
-        language: 'json',
-        showTrafficLights: true,
-        tabs: [{ id: 'file', label: 'flow.json', code: flowJsonCode }],
-        showCopy: true,
-        height: 400,
-    },
-};
-/**
- * CodeBox with multiple tabs - clicking tabs switches code content
- */
-export const WithTabs = {
-    args: {
-        tabs: [
-            {
-                id: 'config',
-                label: 'config.ts',
-                code: `export const config = {
-  tracking: true,
-  debug: false,
-  destinations: ['ga4', 'gtm']
-};`,
-                language: 'typescript',
-            },
-            {
-                id: 'index',
-                label: 'index.ts',
-                code: `import { config } from './config';
-import { elb } from '@walkeros/core';
-
-elb('walker run', config);`,
-                language: 'typescript',
-            },
-            {
-                id: 'types',
-                label: 'types.ts',
-                code: `export interface TrackingConfig {
-  tracking: boolean;
-  debug: boolean;
-  destinations: string[];
-}`,
-                language: 'typescript',
-            },
-        ],
-        defaultTab: 'config',
-        showCopy: true,
-        height: 300,
-    },
-};
-/**
- * CodeBox with JSON Schema IntelliSense
- *
- * Demonstrates JSON validation, autocomplete, and hover docs
- * powered by a JSON Schema passed via the `jsonSchema` prop.
- */
-export const WithJsonSchema = {
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({ version: 1, flows: {} }, null, 2));
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config (with IntelliSense)", showFormat: true, jsonSchema: {
-                $schema: 'http://json-schema.org/draft-07/schema#',
-                type: 'object',
-                properties: {
-                    version: {
-                        type: 'number',
-                        description: 'Flow configuration version',
-                        enum: [1, 2],
-                    },
-                    flows: {
-                        type: 'object',
-                        description: 'Named flow configurations',
-                        additionalProperties: {
-                            type: 'object',
-                            properties: {
-                                web: { type: 'object', description: 'Web platform config' },
-                                server: {
-                                    type: 'object',
-                                    description: 'Server platform config',
-                                },
-                            },
-                        },
-                    },
-                },
-                required: ['version', 'flows'],
-            } }));
-    },
-};
-/**
- * CodeBox with settings toggle
- *
- * Click the gear icon to toggle line numbers, minimap, and word wrap.
- */
-export const WithSettings = {
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({
-            version: 1,
-            flows: {
-                default: {
-                    sources: {
-                        browser: {
-                            package: '@walkeros/web-source-browser',
-                            config: { settings: { pageview: true } },
-                        },
-                    },
-                    destinations: {
-                        ga4: {
-                            package: '@walkeros/web-destination-gtag',
-                            config: {
-                                settings: { ga4: { measurementId: 'G-XXX' } },
-                                mapping: {
-                                    'page view': { name: 'page_view' },
-                                    'product view': {
-                                        name: 'view_item',
-                                        data: { map: { id: 'items.0.item_id' } },
-                                    },
-                                },
-                            },
-                        },
-                    },
-                },
-            },
-        }, null, 2));
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config", showFormat: true, showSettings: true, height: 500 }));
-    },
-};
-// ============================================================
-// IntelliSense Stories
-// ============================================================
-/**
- * Enriched Flow.Setup schema with defaultSnippets and markdownDescription
- *
- * Uses the real Flow.Setup JSON Schema from @walkeros/core, enriched with
- * Monaco-specific extensions (snippets, markdown hover docs).
- *
- * **How to verify:** Place cursor inside `{}` after `"flows":`, press
- * Ctrl+Space — autocomplete shows property suggestions from the schema.
- */
-export const EnrichedFlowSetup = {
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({ version: 1, flows: {} }, null, 2));
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Setup (Enriched Schema)", showFormat: true, jsonSchema: enrichFlowSetupSchema(schemas.setupJsonSchema), height: 400 }));
-    },
-};
-/**
- * Contract schema with entity/action snippets
- *
- * **How to verify:** Autocomplete inside entities shows entity snippet;
- * hover on properties shows markdown descriptions.
- */
-export const EnrichedContract = {
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({ $tagging: 1 }, null, 2));
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Data Contract", showFormat: true, jsonSchema: getEnrichedContractSchema(), height: 400 }));
-    },
-};
-/**
- * Variables schema with `$var.` interpolation docs
- *
- * **How to verify:** Autocomplete shows "Add string variable",
- * "Add boolean variable", "Add number variable" snippets.
- */
-export const VariablesEditor = {
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({ measurementId: 'G-XXXXXXXXXX', debug: false }, null, 2));
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Variables", showFormat: true, jsonSchema: getVariablesSchema(), height: 300 }));
-    },
-};
-/**
- * Visual coloring of `$var.`, `$def.`, `$secret.`, `$env.`, `$code:` references
- *
- * Decorations are applied automatically for JSON content. Each reference type
- * is colored differently: variables=cyan italic, definitions=green italic,
- * secrets/env=amber italic, code=purple.
- *
- * **How to verify:** Each reference value should be colored differently
- * in the editor.
- */
-export const ReferenceDecorations = {
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({
-            measurementId: '$var.gaId',
-            apiKey: '$secret.apiKey',
-            endpoint: '$env.API_URL',
-            transform: '$def.cleanEvent',
-            code: '$code:myFunction',
-        }, null, 2));
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Reference Decorations", showFormat: true, height: 300 }));
-    },
-};
-/**
- * Dynamic Flow Context — self-referencing IntelliSense
- *
- * Edit the flow JSON and variables/definitions you define become immediately
- * available as `$var.` and `$def.` completions in the same editor.
- *
- * **How to verify:**
- * - Add a variable in the `"variables"` section (e.g., `"myVar": "hello"`)
- * - Scroll down to a destination config and type `$var.` — your new variable appears
- * - Rename or delete the variable — completions update instantly
- * - `$var.nonExistent` gets a warning marker
- */
-export const DynamicFlowContext = {
-    name: 'Dynamic Flow Context',
-    render: () => {
-        const [code, setCode] = useState(JSON.stringify({
-            version: 1,
-            variables: { gaId: 'G-XXXXXXXXXX', debug: false },
-            definitions: { cleanEvent: { filter: true } },
-            flows: {
-                default: {
-                    web: {},
-                    sources: {
-                        browser: { package: '@walkeros/web-source-browser' },
-                    },
-                    destinations: {
-                        ga4: {
-                            package: '@walkeros/web-destination-gtag',
-                            config: {
-                                settings: {
-                                    ga4: { measurementId: '$var.gaId' },
-                                    missing: '$var.nonExistent',
-                                },
-                            },
-                        },
-                    },
-                },
-            },
-        }, null, 2));
-        const validation = schemas.validateFlowSetup(code);
-        return (_jsx(CodeBox, { code: code, onChange: setCode, language: "json", label: "Flow Config (Dynamic Validation)", showFormat: true, jsonSchema: enrichFlowSetupSchema(schemas.setupJsonSchema), validate: schemas.validateFlowSetup, intellisenseContext: validation.context, onValidationIssues: (counts) => console.log('Validation:', counts), height: 500 }));
-    },
-};
-//# sourceMappingURL=code-box.stories.js.map

package/dist/components/molecules/code-box.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-box.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/code-box.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,IAAI,GAAyB;IACjC,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE;;;;;;;;;;8BAUoB;QAC1B,QAAQ,EAAE,YAAY;QACtB,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;EAmBnB,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,iBAAiB,EAAE,IAAI;QACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;QAC9D,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ;gBACE,EAAE,EAAE,QAAQ;gBACZ,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE;;;;GAIX;gBACK,QAAQ,EAAE,YAAY;aACvB;YACD;gBACE,EAAE,EAAE,OAAO;gBACX,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE;;;2BAGa;gBACnB,QAAQ,EAAE,YAAY;aACvB;YACD;gBACE,EAAE,EAAE,OAAO;gBACX,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE;;;;EAIZ;gBACM,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CACnD,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,iCAAiC,EACvC,UAAU,QACV,UAAU,EAAE;gBACV,OAAO,EAAE,yCAAyC;gBAClD,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE;oBACV,OAAO,EAAE;wBACP,IAAI,EAAE,QAAQ;wBACd,WAAW,EAAE,4BAA4B;wBACzC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;qBACb;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,QAAQ;wBACd,WAAW,EAAE,2BAA2B;wBACxC,oBAAoB,EAAE;4BACpB,IAAI,EAAE,QAAQ;4BACd,UAAU,EAAE;gCACV,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,qBAAqB,EAAE;gCAC3D,MAAM,EAAE;oCACN,IAAI,EAAE,QAAQ;oCACd,WAAW,EAAE,wBAAwB;iCACtC;6BACF;yBACF;qBACF;iBACF;gBACD,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;aAC/B,GACD,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CACZ;YACE,OAAO,EAAE,CAAC;YACV,KAAK,EAAE;gBACL,OAAO,EAAE;oBACP,OAAO,EAAE;wBACP,OAAO,EAAE;4BACP,OAAO,EAAE,8BAA8B;4BACvC,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;yBACzC;qBACF;oBACD,YAAY,EAAE;wBACZ,GAAG,EAAE;4BACH,OAAO,EAAE,gCAAgC;4BACzC,MAAM,EAAE;gCACN,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE;gCAC7C,OAAO,EAAE;oCACP,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;oCAClC,cAAc,EAAE;wCACd,IAAI,EAAE,WAAW;wCACjB,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAE;qCACzC;iCACF;6BACF;yBACF;qBACF;iBACF;aACF;SACF,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,aAAa,EACnB,UAAU,QACV,YAAY,QACZ,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,+DAA+D;AAC/D,uBAAuB;AACvB,+DAA+D;AAE/D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CACnD,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,8BAA8B,EACpC,UAAU,QACV,UAAU,EAAE,qBAAqB,CAC/B,OAAO,CAAC,eAA0C,CACnD,EACD,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3E,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,eAAe,EACrB,UAAU,QACV,UAAU,EAAE,yBAAyB,EAAE,EACvC,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CACzE,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,WAAW,EACjB,UAAU,QACV,UAAU,EAAE,kBAAkB,EAAE,EAChC,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CACZ;YACE,aAAa,EAAE,WAAW;YAC1B,MAAM,EAAE,gBAAgB;YACxB,QAAQ,EAAE,cAAc;YACxB,SAAS,EAAE,iBAAiB;YAC5B,IAAI,EAAE,kBAAkB;SACzB,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;QACF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,uBAAuB,EAC7B,UAAU,QACV,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC9B,IAAI,CAAC,SAAS,CACZ;YACE,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;YACjD,WAAW,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;YAC7C,KAAK,EAAE;gBACL,OAAO,EAAE;oBACP,GAAG,EAAE,EAAE;oBACP,OAAO,EAAE;wBACP,OAAO,EAAE,EAAE,OAAO,EAAE,8BAA8B,EAAE;qBACrD;oBACD,YAAY,EAAE;wBACZ,GAAG,EAAE;4BACH,OAAO,EAAE,gCAAgC;4BACzC,MAAM,EAAE;gCACN,QAAQ,EAAE;oCACR,GAAG,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE;oCACnC,OAAO,EAAE,kBAAkB;iCAC5B;6BACF;yBACF;qBACF;iBACF;aACF;SACF,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;QAEF,MAAM,UAAU,GAAG,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAEnD,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,kCAAkC,EACxC,UAAU,QACV,UAAU,EAAE,qBAAqB,CAC/B,OAAO,CAAC,eAA0C,CACnD,EACD,QAAQ,EAAE,OAAO,CAAC,iBAAiB,EACnC,mBAAmB,EAAE,UAAU,CAAC,OAAO,EACvC,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC,EAClE,MAAM,EAAE,GAAG,GACX,CACH,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/components/molecules/code-snippet.d.ts

@@ -1,58 +0,0 @@
-import { type CodeBoxProps } from './code-box';
-export type CodeSnippetProps = Omit<CodeBoxProps, 'label' | 'showHeader'> & {
-    format?: boolean;
-};
-/**
- * CodeSnippet - Prominent code display for snippets
- *
- * Wraps CodeBox with larger font size and generous padding.
- * Use this for showcasing code examples, one-liners, or small code blocks
- * where you want the code to be more visually prominent than in a standard editor.
- *
- * Always renders without a header. Use CodeBox if you need a header.
- *
- * Default behavior:
- * - Read-only (disabled=true)
- * - Copy button enabled (showCopy=true)
- * - Auto-height with sensible bounds (min: 20px, max: 600px)
- * - Auto-format on mount (format=true) - formats code once on initial load
- *
- * Auto-Formatting:
- * - Enabled by default (format=true)
- * - Runs once on component mount using Monaco's built-in formatters
- * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
- * - Use format={false} to disable for special cases (pre-formatted code)
- *
- * Reuses all CodeBox functionality:
- * - Monaco Editor with syntax highlighting
- * - Grid height management and auto-height modes
- * - Copy button
- * - Theme integration
- *
- * @example
- * // Minimal usage - code auto-formats on load
- * <CodeSnippet
- *   code="import { elb } from '@walkeros/core';"
- *   language="javascript"
- * />
- *
- * @example
- * // Disable auto-formatting for pre-formatted code
- * <CodeSnippet
- *   code={alreadyFormattedCode}
- *   language="javascript"
- *   format={false}
- * />
- *
- * @example
- * // Override defaults if needed
- * <CodeSnippet
- *   code={editableCode}
- *   language="javascript"
- *   disabled={false}
- *   showCopy={false}
- *   autoHeight={{ min: 100, max: 800 }}
- * />
- */
-export declare function CodeSnippet(props: CodeSnippetProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=code-snippet.d.ts.map

package/dist/components/molecules/code-snippet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-snippet.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAqClD"}

package/dist/components/molecules/code-snippet.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { CodeBox } from './code-box';
-import { formatCode } from '../../utils/format-code';
-/**
- * CodeSnippet - Prominent code display for snippets
- *
- * Wraps CodeBox with larger font size and generous padding.
- * Use this for showcasing code examples, one-liners, or small code blocks
- * where you want the code to be more visually prominent than in a standard editor.
- *
- * Always renders without a header. Use CodeBox if you need a header.
- *
- * Default behavior:
- * - Read-only (disabled=true)
- * - Copy button enabled (showCopy=true)
- * - Auto-height with sensible bounds (min: 20px, max: 600px)
- * - Auto-format on mount (format=true) - formats code once on initial load
- *
- * Auto-Formatting:
- * - Enabled by default (format=true)
- * - Runs once on component mount using Monaco's built-in formatters
- * - Supports: JavaScript, TypeScript, JSON, HTML, CSS
- * - Use format={false} to disable for special cases (pre-formatted code)
- *
- * Reuses all CodeBox functionality:
- * - Monaco Editor with syntax highlighting
- * - Grid height management and auto-height modes
- * - Copy button
- * - Theme integration
- *
- * @example
- * // Minimal usage - code auto-formats on load
- * <CodeSnippet
- *   code="import { elb } from '@walkeros/core';"
- *   language="javascript"
- * />
- *
- * @example
- * // Disable auto-formatting for pre-formatted code
- * <CodeSnippet
- *   code={alreadyFormattedCode}
- *   language="javascript"
- *   format={false}
- * />
- *
- * @example
- * // Override defaults if needed
- * <CodeSnippet
- *   code={editableCode}
- *   language="javascript"
- *   disabled={false}
- *   showCopy={false}
- *   autoHeight={{ min: 100, max: 800 }}
- * />
- */
-export function CodeSnippet(props) {
-    const { code, language = 'javascript', className, disabled = true, showCopy = true, autoHeight = { min: 20, max: 600 }, fontSize = 15, format = true, ...rest } = props;
-    const snippetClassName = `elb-code-snippet ${className || ''}`.trim();
-    const [formattedCode, setFormattedCode] = useState(code);
-    // Format code on mount
-    useEffect(() => {
-        if (format && code) {
-            formatCode(code, language).then(setFormattedCode);
-        }
-        else {
-            setFormattedCode(code);
-        }
-    }, [code, language, format]);
-    return (_jsx(CodeBox, { ...rest, code: formattedCode, language: language, className: snippetClassName, showHeader: false, disabled: disabled, showCopy: showCopy, autoHeight: autoHeight, fontSize: fontSize }));
-}
-//# sourceMappingURL=code-snippet.js.map

package/dist/components/molecules/code-snippet.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-snippet.js","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAqB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAMrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAClC,QAAQ,GAAG,EAAE,EACb,MAAM,GAAG,IAAI,EACb,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,oBAAoB,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEzD,uBAAuB;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,OAAO,OACF,IAAI,EACR,IAAI,EAAE,aAAa,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/molecules/code-snippet.stories.d.ts

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { CodeSnippet } from './code-snippet';
-declare const meta: Meta<typeof CodeSnippet>;
-export default meta;
-type Story = StoryObj<typeof CodeSnippet>;
-export declare const OneLine: Story;
-export declare const MultiLine: Story;
-/**
- * Auto-Formatting Demo - Badly formatted code gets auto-formatted on mount
- */
-export declare const AutoFormatEnabled: Story;
-/**
- * JSON Auto-Formatting - Badly formatted JSON gets auto-formatted
- */
-export declare const JSONFormatting: Story;
-/**
- * Bare Object Formatting - JS object literals without assignment
- *
- * This is common in docs where event results are shown as plain objects.
- * Previously these were not indented because Prettier couldn't parse them.
- */
-export declare const BareObjectFormatting: Story;
-//# sourceMappingURL=code-snippet.stories.d.ts.map

package/dist/components/molecules/code-snippet.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-snippet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAUlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC"}

package/dist/components/molecules/code-snippet.stories.js

@@ -1,87 +0,0 @@
-import { CodeSnippet } from './code-snippet';
-const meta = {
-    title: 'Molecules/CodeSnippet',
-    component: CodeSnippet,
-    tags: ['autodocs'],
-    argTypes: {
-        language: {
-            control: 'select',
-            options: ['javascript', 'typescript', 'json', 'html', 'css'],
-        },
-    },
-};
-export default meta;
-export const OneLine = {
-    args: {
-        code: "import { getAttribute, sendWeb, sessionStart } from '@walkeros/web-core';",
-        language: 'javascript',
-    },
-};
-export const MultiLine = {
-    args: {
-        code: `export async function setupGA4Complete() {
-  const { collector, elb } = await startFlow({
-    destinations: {
-      gtag: {
-        ...destinationGtag,
-        config: {
-          settings: {
-            ga4: { measurementId: 'G-XXXXXXXXXX' },
-          },
-        },
-      },
-    },
-  });
-  return { collector, elb };
-}`,
-        language: 'javascript',
-    },
-};
-/**
- * Auto-Formatting Demo - Badly formatted code gets auto-formatted on mount
- */
-export const AutoFormatEnabled = {
-    args: {
-        code: `function example(){const x={a:1,b:2,c:3};if(x.a===1){return x.b+x.c;}return 0;}`,
-        language: 'javascript',
-    },
-};
-/**
- * JSON Auto-Formatting - Badly formatted JSON gets auto-formatted
- */
-export const JSONFormatting = {
-    args: {
-        code: `{"entity":"product","action":"view","data":{"id":"P123","name":"Laptop","price":999},"context":{"stage":["shopping",1]}}`,
-        language: 'json',
-    },
-};
-/**
- * Bare Object Formatting - JS object literals without assignment
- *
- * This is common in docs where event results are shown as plain objects.
- * Previously these were not indented because Prettier couldn't parse them.
- */
-export const BareObjectFormatting = {
-    args: {
-        code: `{
-name: 'promotion view',
-data: {
-name: 'Setting up tracking easily',
-category: 'analytics',
-},
-context: {
-test: ['engagement', 0]
-},
-globals: {
-language: 'en'
-},
-nested: [],
-consent: { functional: true },
-trigger: 'visible',
-entity: 'promotion',
-action: 'view',
-}`,
-        language: 'javascript',
-    },
-};
-//# sourceMappingURL=code-snippet.stories.js.map

package/dist/components/molecules/code-snippet.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-snippet.stories.js","sourceRoot":"","sources":["../../../src/components/molecules/code-snippet.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;SAC7D;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,2EAA2E;QACjF,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE;;;;;;;;;;;;;;EAcR;QACE,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,iFAAiF;QACvF,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,IAAI,EAAE,0HAA0H;QAChI,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAU;IACzC,IAAI,EAAE;QACJ,IAAI,EAAE;;;;;;;;;;;;;;;;;EAiBR;QACE,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC"}

package/dist/components/molecules/config-form-card.d.ts

@@ -1,50 +0,0 @@
-import type { FormEvent } from 'react';
-export interface ConfigFormCardProps {
-    /** Current config value (JSON/code string) */
-    config: string;
-    /** Config change handler */
-    onConfigChange: (value: string) => void;
-    /** Form submit handler */
-    onSubmit: (e: FormEvent) => void;
-    /** Loading state */
-    loading?: boolean;
-    /** Error message (null if no error) */
-    error?: string | null;
-    /** Card title (default: "Configuration") */
-    title?: string;
-    /** Textarea label (default: "Configuration (JSON)") */
-    label?: string;
-    /** Submit button text (default: "Submit") */
-    submitText?: string;
-    /** Loading button text (default: "Processing...") */
-    loadingText?: string;
-    /** Number of textarea rows (default: 20) */
-    rows?: number;
-    /** Card max width */
-    maxWidth?: 'sm' | 'md' | 'lg' | 'full';
-    /** Additional CSS class */
-    className?: string;
-}
-/**
- * ConfigFormCard - Form for JSON/code configuration input (pure UI)
- *
- * Displays a textarea for entering configuration with submit button.
- * Business logic (validation, API calls) is handled via callbacks.
- *
- * @example
- * const { config, setConfig, loading, error, handleSubmit } = useBundleForm(); // App hook
- *
- * <ConfigFormCard
- *   config={config}
- *   onConfigChange={setConfig}
- *   onSubmit={handleSubmit}
- *   loading={loading}
- *   error={error}
- *   title="Bundle Configuration"
- *   label="Flow Configuration (JSON)"
- *   submitText="Bundle"
- *   loadingText="Bundling..."
- * />
- */
-export declare function ConfigFormCard({ config, onConfigChange, onSubmit, loading, error, title, label, submitText, loadingText, rows, maxWidth, className, }: ConfigFormCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=config-form-card.d.ts.map

package/dist/components/molecules/config-form-card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-form-card.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/config-form-card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACvC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAc,EACd,QAAQ,EACR,OAAe,EACf,KAAY,EACZ,KAAuB,EACvB,KAA8B,EAC9B,UAAqB,EACrB,WAA6B,EAC7B,IAAS,EACT,QAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAsBrB"}

package/dist/components/molecules/config-form-card.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormCard } from './form-card';
-import { FormTextarea } from '../atoms/form-textarea';
-import { SubmitButton } from '../atoms/submit-button';
-import { Alert } from '../atoms/alert';
-/**
- * ConfigFormCard - Form for JSON/code configuration input (pure UI)
- *
- * Displays a textarea for entering configuration with submit button.
- * Business logic (validation, API calls) is handled via callbacks.
- *
- * @example
- * const { config, setConfig, loading, error, handleSubmit } = useBundleForm(); // App hook
- *
- * <ConfigFormCard
- *   config={config}
- *   onConfigChange={setConfig}
- *   onSubmit={handleSubmit}
- *   loading={loading}
- *   error={error}
- *   title="Bundle Configuration"
- *   label="Flow Configuration (JSON)"
- *   submitText="Bundle"
- *   loadingText="Bundling..."
- * />
- */
-export function ConfigFormCard({ config, onConfigChange, onSubmit, loading = false, error = null, title = 'Configuration', label = 'Configuration (JSON)', submitText = 'Submit', loadingText = 'Processing...', rows = 20, maxWidth = 'lg', className = '', }) {
-    return (_jsx(FormCard, { title: title, maxWidth: maxWidth, className: className, children: _jsxs("form", { onSubmit: onSubmit, children: [_jsx(FormTextarea, { label: label, value: config, onChange: onConfigChange, rows: rows, disabled: loading, spellCheck: false, error: !!error }), error && _jsx(Alert, { variant: "error", children: error }), _jsx(SubmitButton, { loading: loading, loadingText: loadingText, fullWidth: true, children: submitText })] }) }));
-}
-//# sourceMappingURL=config-form-card.js.map

package/dist/components/molecules/config-form-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-form-card.js","sourceRoot":"","sources":["../../../src/components/molecules/config-form-card.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AA6BvC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,cAAc,EACd,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,IAAI,EACZ,KAAK,GAAG,eAAe,EACvB,KAAK,GAAG,sBAAsB,EAC9B,UAAU,GAAG,QAAQ,EACrB,WAAW,GAAG,eAAe,EAC7B,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,GACM;IACpB,OAAO,CACL,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,YAC9D,gBAAM,QAAQ,EAAE,QAAQ,aACtB,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,CAAC,CAAC,KAAK,GACd,EAED,KAAK,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,OAAO,YAAE,KAAK,GAAS,EAEhD,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,kBAChE,UAAU,GACE,IACV,GACE,CACZ,CAAC;AACJ,CAAC"}

package/dist/components/molecules/config-form-card.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ConfigFormCard } from './config-form-card';
-declare const meta: Meta<typeof ConfigFormCard>;
-export default meta;
-type Story = StoryObj<typeof ConfigFormCard>;
-export declare const Default: Story;
-//# sourceMappingURL=config-form-card.stories.d.ts.map