@walkeros/explorer 0.0.8 → 0.3.0

package/package.json

@@ -1,71 +1,112 @@
 {
   "name": "@walkeros/explorer",
-  "version": "0.0.8",
-  "description": "Vanilla JS interactive HTML element explorer and live code editor for walkerOS",
-  "keywords": [
-    "walkerOS",
-    "explorer",
-    "code-editor",
-    "html",
-    "elb-tagging",
-    "developer-tools"
-  ],
-  "homepage": "https://www.walkerOS.com",
-  "bugs": "https://github.com/elbwalker/walkerOS/issues",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/elbwalker/walkerOS.git",
-    "directory": "apps/explorer"
-  },
+  "version": "0.3.0",
+  "description": "Interactive React components for walkerOS documentation and exploration",
   "license": "MIT",
-  "author": "elbwalker",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./styles": "./dist/styles.css"
+  },
   "files": [
-    "dist/**",
-    "serve.js"
+    "dist/**"
   ],
   "scripts": {
     "build": "tsup --silent",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "dev": "jest --watchAll --colors",
-    "demo": "npm run build && node serve.js",
-    "lint": "tsc && eslint \"**/*.ts*\" --rule '@typescript-eslint/no-explicit-any: off'",
-    "test": "jest --passWithNoTests --silent",
-    "test:watch": "jest --watch --passWithNoTests --silent",
-    "test:coverage": "jest --coverage --passWithNoTests --silent",
-    "test:quick": "jest --testPathPattern=quick.test.ts --passWithNoTests --silent",
-    "test:foundation": "jest --testPathPattern=foundation.test.ts --passWithNoTests --silent",
-    "test:ci": "jest --ci --coverage --passWithNoTests --silent",
-    "test:verbose": "jest --passWithNoTests --verbose",
-    "test:visual": "node test-harness.js",
-    "test:visual:watch": "node test-harness.js --watch",
-    "test:playwright": "playwright test",
-    "test:playwright:ui": "playwright test --ui",
-    "test:playwright:debug": "playwright test --debug",
-    "test:playwright:report": "playwright show-report",
-    "dev:visual": "node dev-workflow.js",
-    "dev:visual:once": "node dev-workflow.js --no-watch",
-    "update": "npx npm-check-updates -u && npm update"
+    "start": "storybook dev -p 6006 --no-open",
+    "lint": "tsc && eslint \"src/**/*.ts*\"",
+    "test": "jest",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "update": "npx npm-check-updates -u && npm update",
+    "build-storybook": "storybook build",
+    "publish-packages": "npm run build && npm run lint && npm run test && changeset version && changeset publish",
+    "prepare": "husky || true",
+    "format": "prettier --write ."
   },
   "dependencies": {
-    "@walkeros/collector": "*",
-    "@walkeros/core": "*",
-    "@walkeros/web-core": "*"
+    "@monaco-editor/react": "^4.7.0",
+    "@rjsf/core": "^5.24.13",
+    "@rjsf/utils": "^5.24.13",
+    "@rjsf/validator-ajv8": "^5.24.13",
+    "clsx": "^2.1.1",
+    "monaco-editor": "^0.54.0",
+    "tailwind-merge": "^2.5.5"
+  },
+  "peerDependencies": {
+    "@walkeros/core": "^0.3.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@walkeros/collector": {
+      "optional": true
+    },
+    "@walkeros/web-source-browser": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.1",
+    "@changesets/cli": "^2.29.7",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/react-vite": "^10.0.4",
     "@testing-library/jest-dom": "^6.6.3",
-    "@walkeros/eslint": "*",
-    "@walkeros/jest": "*",
-    "@walkeros/tsconfig": "*",
-    "@walkeros/tsup": "*",
-    "chokidar": "^4.0.3",
-    "typescript": "^5.5.2"
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@walkeros/collector": "^0.3.0",
+    "@walkeros/config": "^0.1.3",
+    "@walkeros/core": "^0.3.0",
+    "@walkeros/web-destination-gtag": "^0.3.0",
+    "@walkeros/web-source-browser": "^0.3.0",
+    "eslint-plugin-storybook": "^10.0.4",
+    "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "lint-staged": "^16.2.6",
+    "prettier": "^3.6.2",
+    "rehype-external-links": "^3.0.0",
+    "rehype-slug": "^6.0.0",
+    "sass": "^1.93.2",
+    "storybook": "^10.0.4",
+    "vite": "^7.1.12"
+  },
+  "repository": {
+    "url": "git+https://github.com/elbwalker/walkerOS.git",
+    "directory": "apps/explorer"
+  },
+  "author": "elbwalker <hello@elbwalker.com>",
+  "homepage": "https://github.com/elbwalker/walkerOS#readme",
+  "bugs": {
+    "url": "https://github.com/elbwalker/walkerOS/issues"
   },
-  "funding": {
-    "type": "github",
-    "url": "https://github.com/sponsors/elbwalker"
+  "keywords": [
+    "walker",
+    "walkerOS",
+    "react",
+    "components",
+    "documentation",
+    "interactive",
+    "playground"
+  ],
+  "funding": [
+    {
+      "type": "GitHub Sponsors",
+      "url": "https://github.com/sponsors/elbwalker"
+    }
+  ],
+  "lint-staged": {
+    "*.{js,ts,tsx,json,css,md}": [
+      "prettier --write"
+    ]
   }
 }

package/dist/examples/destination.html

@@ -1,143 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Destination Component Demo</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 20px;
-        background: #f5f5f5;
-      }
-      .container {
-        max-width: 1600px;
-        margin: 0 auto;
-      }
-      h1 {
-        color: #333;
-        margin-bottom: 20px;
-        text-align: center;
-      }
-      .theme-toggle {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-        background: none;
-        border: 2px solid #ddd;
-        border-radius: 50%;
-        width: 40px;
-        height: 40px;
-        cursor: pointer;
-        font-size: 18px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s ease;
-      }
-      .theme-toggle:hover {
-        border-color: #007bff;
-        background: rgba(0, 123, 255, 0.1);
-      }
-      .destination-demo {
-        height: 600px;
-        min-height: 500px;
-      }
-
-      /* Ensure the explorer container uses full height */
-      #destination-container {
-        height: 100%;
-        min-height: 500px;
-      }
-    </style>
-  </head>
-  <body>
-    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
-      <span id="theme-icon">🌙</span>
-    </button>
-
-    <div class="container">
-      <h1>Destination Component Demo</h1>
-      <p style="text-align: center; margin-bottom: 30px">
-        Edit the Event and Mapping to see the processed result from the
-        destination.
-      </p>
-
-      <div class="destination-demo">
-        <div id="destination-container"></div>
-      </div>
-    </div>
-
-    <script src="../explorer.js"></script>
-    <script>
-      // Theme toggle functionality
-      window.toggleTheme = () => {
-        const html = document.documentElement;
-        const currentTheme = html.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-
-        html.setAttribute('data-theme', newTheme);
-
-        // Update icon
-        const icon = document.getElementById('theme-icon');
-        icon.textContent = newTheme === 'dark' ? '☀️' : '🌙';
-
-        // Save preference
-        localStorage.setItem('theme', newTheme);
-      };
-
-      document.addEventListener('DOMContentLoaded', () => {
-        // Create the destination component with PiwikPro order complete example
-        const destinationComponent = WalkerExplorer.createDestination(
-          '#destination-container',
-          {
-            height: '100%',
-            showHeader: true,
-            initialEvent: `{
-  "event": "order complete",
-  "data": {
-    "id": "0rd3r1d",
-    "currency": "EUR",
-    "shipping": 5.22,
-    "taxes": 73.76,
-    "total": 555
-  },
-  "context": { 
-    "shopping": ["complete", 0] 
-  },
-  "globals": { 
-    "pagegroup": "shop" 
-  },
-  "nested": [
-    {
-      "type": "product",
-      "data": {
-        "id": "ers",
-        "name": "Everyday Ruck Snack",
-        "color": "black",
-        "size": "l",
-        "price": 420
-      }
-    }
-  ]
-}`,
-            initialMapping: `{
-  "order": {
-    "complete": {
-      "data": {
-        "event_name": "purchase",
-        "product_id": "data.id",
-        "product_name": "data.name",
-        "product_price": "data.price",
-        "product_category": "data.category"
-      }
-    }
-  }
-}`,
-          },
-        );
-      });
-    </script>
-  </body>
-</html>

package/dist/examples/index.html

@@ -1,110 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>WalkerOS Explorer - Demo Index</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 40px 20px;
-        background: #f5f5f5;
-      }
-      .container {
-        background: white;
-        padding: 40px;
-        border-radius: 12px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-      }
-      h1 {
-        color: #333;
-        margin-bottom: 10px;
-        text-align: center;
-      }
-      .subtitle {
-        color: #666;
-        text-align: center;
-        margin-bottom: 40px;
-        font-size: 18px;
-      }
-      .demo-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 20px;
-        margin-bottom: 40px;
-      }
-      .demo-card {
-        border: 2px solid #e1e5e9;
-        border-radius: 8px;
-        padding: 24px;
-        text-decoration: none;
-        color: inherit;
-        transition: all 0.2s ease;
-        background: white;
-      }
-      .demo-card:hover {
-        border-color: #007bff;
-        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
-        transform: translateY(-2px);
-      }
-      .demo-card h3 {
-        margin: 0 0 12px 0;
-        color: #007bff;
-        font-size: 20px;
-      }
-      .demo-card p {
-        margin: 0;
-        color: #666;
-        line-height: 1.5;
-      }
-      .demo-card .emoji {
-        font-size: 24px;
-        margin-right: 8px;
-      }
-      .footer {
-        text-align: center;
-        color: #666;
-        font-size: 14px;
-        padding-top: 20px;
-        border-top: 1px solid #e1e5e9;
-      }
-      @media (max-width: 768px) {
-        .demo-grid {
-          grid-template-columns: 1fr;
-        }
-        body {
-          padding: 20px 10px;
-        }
-        .container {
-          padding: 20px;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <h1>🚀 WalkerOS Explorer</h1>
-      <p class="subtitle">Interactive components for walkerOS development</p>
-
-      <div class="demo-grid">
-        <a href="livecode-js.html" class="demo-card">
-          <h3><span class="emoji">⚡</span>LiveCodeJS</h3>
-          <p>
-            JavaScript evaluation with context injection. Perfect for testing
-            walkerOS functions and data processing with live code editing.
-          </p>
-        </a>
-
-        <a href="destination.html" class="demo-card">
-          <h3><span class="emoji">🎯</span>Destination</h3>
-          <p>
-            Three-column layout for Event, Mapping, and Result. Visualize how
-            event data transforms through mapping configurations.
-          </p>
-        </a>
-      </div>
-    </div>
-  </body>
-</html>