npm - onairos - Versions diffs - 2.2.1 → 2.3.0 - Mend

onairos 2.2.1 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/LARAVEL_INTEGRATION_GUIDE.md +643 -0
package/LARAVEL_TECHNICAL_EXPLANATION.md +465 -0
package/README.md +122 -43
package/dist/onairos-laravel.js +2 -0
package/dist/onairos-laravel.js.map +1 -0
package/laravel.txt +430 -0
package/package.json +31 -2
package/src/laravel/OnairosVue.vue +398 -0
package/src/laravel/blade-helpers.js +263 -0
package/src/laravel/vite-plugin.js +179 -0
package/tests/laravel/examples/blade-example.test.js +283 -0
package/tests/laravel/laravel-integration.test.js +647 -0
package/tests/laravel/setup.js +84 -0
package/tests/laravel/vitest.config.js +20 -0
package/webpack.config.js +46 -13

package/src/laravel/vite-plugin.js ADDED Viewed

@@ -0,0 +1,179 @@
+/**
+ * Onairos Vite Plugin for Laravel
+ *
+ * This plugin provides seamless integration of Onairos components
+ * within Laravel Vite applications, handling both development and
+ * production builds.
+ */
+import { resolve } from 'path';
+export function onairosLaravelPlugin(options = {}) {
+  const defaultOptions = {
+    autoImport: true,
+    injectGlobals: true,
+    optimizeDeps: true,
+    enableHMR: true,
+    bladeSupport: true
+  };
+  const config = { ...defaultOptions, ...options };
+  return {
+    name: 'onairos-laravel',
+    config(viteConfig, { command }) {
+      // Optimize dependencies for faster dev server startup
+      if (config.optimizeDeps) {
+        viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+        viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || [];
+        viteConfig.optimizeDeps.include.push('onairos');
+      }
+      // Add alias for easier imports
+      viteConfig.resolve = viteConfig.resolve || {};
+      viteConfig.resolve.alias = viteConfig.resolve.alias || {};
+      viteConfig.resolve.alias['@onairos'] = resolve('node_modules/onairos');
+      // Configure for Laravel Blade support
+      if (config.bladeSupport && command === 'serve') {
+        viteConfig.server = viteConfig.server || {};
+        viteConfig.server.watch = viteConfig.server.watch || {};
+        viteConfig.server.watch.include = viteConfig.server.watch.include || [];
+        viteConfig.server.watch.include.push('resources/views/**/*.blade.php');
+      }
+    },
+    configureServer(server) {
+      if (config.enableHMR) {
+        // Add custom HMR handling for Onairos components
+        server.ws.on('onairos:reload', () => {
+          server.ws.send({
+            type: 'full-reload'
+          });
+        });
+      }
+    },
+    transformIndexHtml: {
+      enforce: 'pre',
+      transform(html, context) {
+        if (config.injectGlobals && context.server) {
+          // Inject Onairos initialization script for development
+          const initScript = `
+            <script type="module">
+              import { initializeOnairosForBlade } from '/node_modules/onairos/src/laravel/blade-helpers.js';
+              // Initialize Onairos for Laravel Blade templates
+              initializeOnairosForBlade({
+                testMode: true,
+                autoDetectMobile: true,
+                globalStyles: true
+              });
+              // Enable HMR for Onairos components
+              if (import.meta.hot) {
+                import.meta.hot.on('onairos:update', () => {
+                  console.log('🔥 Onairos components updated');
+                  window.location.reload();
+                });
+              }
+            </script>
+          `;
+          return html.replace('<head>', `<head>${initScript}`);
+        }
+        return html;
+      }
+    },
+    generateBundle(options, bundle) {
+      // Add Onairos assets to the build output
+      if (config.autoImport) {
+        // Create a separate chunk for Laravel integration
+        this.emitFile({
+          type: 'chunk',
+          id: 'onairos-laravel-integration',
+          fileName: 'onairos-laravel.js'
+        });
+      }
+    },
+    writeBundle(options, bundle) {
+      // Create Laravel-specific integration files
+      const laravelIntegrationCode = `
+// Onairos Laravel Integration
+import { initializeOnairosForBlade, createOnairosButton } from 'onairos/blade';
+// Auto-initialize for production
+document.addEventListener('DOMContentLoaded', () => {
+  initializeOnairosForBlade({
+    testMode: false,
+    autoDetectMobile: true,
+    globalStyles: true
+  });
+});
+// Export for manual usage
+window.Onairos = {
+  init: initializeOnairosForBlade,
+  createButton: createOnairosButton
+};
+      `;
+      // Write the integration file
+      this.emitFile({
+        type: 'asset',
+        fileName: 'onairos-laravel-integration.js',
+        source: laravelIntegrationCode
+      });
+    }
+  };
+}
+// Vue.js specific plugin for Laravel
+export function onairosVuePlugin(options = {}) {
+  return {
+    name: 'onairos-vue-laravel',
+    config(viteConfig) {
+      // Add Vue-specific optimizations for Onairos
+      viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+      viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || [];
+      viteConfig.optimizeDeps.include.push('onairos', 'vue');
+    },
+    transform(code, id) {
+      // Auto-import Onairos in Vue components
+      if (id.endsWith('.vue') && options.autoImport) {
+        if (code.includes('OnairosButton') && !code.includes('import.*OnairosButton')) {
+          return `import { OnairosButton } from 'onairos';\n${code}`;
+        }
+      }
+      return null;
+    }
+  };
+}
+// React specific plugin for Laravel
+export function onairosReactPlugin(options = {}) {
+  return {
+    name: 'onairos-react-laravel',
+    config(viteConfig) {
+      // Add React-specific optimizations for Onairos
+      viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+      viteConfig.optimizeDeps.include = viteConfig.optimizeDeps.include || [];
+      viteConfig.optimizeDeps.include.push('onairos', 'react', 'react-dom');
+    },
+    transform(code, id) {
+      // Auto-import Onairos in React components
+      if ((id.endsWith('.jsx') || id.endsWith('.tsx')) && options.autoImport) {
+        if (code.includes('OnairosButton') && !code.includes('import.*OnairosButton')) {
+          return `import { OnairosButton } from 'onairos';\n${code}`;
+        }
+      }
+      return null;
+    }
+  };
+}
+export default onairosLaravelPlugin;

package/tests/laravel/examples/blade-example.test.js ADDED Viewed

@@ -0,0 +1,283 @@
+/**
+ * Laravel Blade Integration Example Test
+ *
+ * This test simulates a real Laravel application using Blade templates
+ * with Onairos integration.
+ */
+import { describe, test, expect, beforeEach } from 'vitest';
+import { JSDOM } from 'jsdom';
+import { initializeOnairosForBlade, createOnairosButton } from '../../../src/laravel/blade-helpers.js';
+describe('Laravel Blade Real-World Example', () => {
+  let dom;
+  let window;
+  let document;
+  beforeEach(() => {
+    // Create a DOM that mimics a Laravel Blade template
+    dom = new JSDOM(`
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Laravel App with Onairos</title>
+        <meta name="csrf-token" content="fake-csrf-token">
+      </head>
+      <body>
+        <div class="container">
+          <nav class="navbar">
+            <h1>My Laravel App</h1>
+          </nav>
+          <main class="content">
+            <div class="dashboard">
+              <h2>User Dashboard</h2>
+              <p>Connect your social accounts to enhance your experience:</p>
+              <!-- Onairos button will be inserted here -->
+              <div id="social-connect-button" class="mt-4"></div>
+              <div class="user-profile mt-6">
+                <h3>Profile Enhancement</h3>
+                <p>Let AI analyze your data for better recommendations:</p>
+                <!-- Another Onairos button for advanced features -->
+                <div id="profile-enhancement-button" class="mt-2"></div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </body>
+      </html>
+    `);
+    window = dom.window;
+    document = dom.window.document;
+    // Set globals for testing
+    global.window = window;
+    global.document = document;
+    global.navigator = window.navigator;
+  });
+  test('should integrate Onairos into Laravel dashboard page', () => {
+    // 1. Initialize Onairos as would be done in Laravel app.js
+    initializeOnairosForBlade({
+      testMode: true,
+      baseUrl: 'https://api2.onairos.uk',
+      autoDetectMobile: true,
+      globalStyles: true
+    });
+    // 2. Verify initialization worked
+    expect(window.OnairosConfig).toBeDefined();
+    expect(window.OnairosConfig.testMode).toBe(true);
+    expect(document.getElementById('onairos-styles')).not.toBeNull();
+    // 3. Create social connect button (as would be in Blade template script)
+    createOnairosButton('social-connect-button', {
+      requestData: ['email', 'profile', 'social'],
+      webpageName: 'Laravel Dashboard',
+      buttonType: 'pill',
+      textColor: 'white',
+      onComplete: function(result) {
+        console.log('Social connection completed:', result);
+        // In real Laravel app, this might update the UI or make AJAX calls
+      }
+    });
+    // 4. Create profile enhancement button
+    createOnairosButton('profile-enhancement-button', {
+      requestData: {
+        basic: { type: "basic", reward: "10 tokens" },
+        personality: { type: "personality", reward: "25 tokens" },
+        preferences: { type: "preferences", reward: "15 tokens" }
+      },
+      webpageName: 'Laravel Profile Enhancement',
+      buttonType: 'rounded',
+      textColor: 'black',
+      onComplete: function(result) {
+        console.log('Profile enhancement completed:', result);
+      }
+    });
+    // 5. Verify both buttons were created successfully
+    const socialButton = document.getElementById('social-connect-button-btn');
+    const profileButton = document.getElementById('profile-enhancement-button-btn');
+    expect(socialButton).not.toBeNull();
+    expect(profileButton).not.toBeNull();
+    // 6. Verify button configurations
+    const socialConfig = JSON.parse(socialButton.getAttribute('data-onairos-config'));
+    const profileConfig = JSON.parse(profileButton.getAttribute('data-onairos-config'));
+    expect(socialConfig.requestData).toEqual(['email', 'profile', 'social']);
+    expect(socialConfig.webpageName).toBe('Laravel Dashboard');
+    expect(socialConfig.buttonType).toBe('pill');
+    expect(profileConfig.requestData).toHaveProperty('basic');
+    expect(profileConfig.requestData).toHaveProperty('personality');
+    expect(profileConfig.webpageName).toBe('Laravel Profile Enhancement');
+    expect(profileConfig.buttonType).toBe('rounded');
+    // 7. Verify styling was applied
+    expect(socialButton.className).toContain('onairos-btn-pill');
+    expect(profileButton.className).toContain('onairos-btn-rounded');
+  });
+  test('should handle Laravel CSRF protection', () => {
+    // Laravel apps typically have CSRF tokens in meta tags
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    expect(csrfToken).toBe('fake-csrf-token');
+    // Initialize Onairos with CSRF handling
+    initializeOnairosForBlade({
+      csrfToken: csrfToken,
+      testMode: true
+    });
+    expect(window.OnairosConfig.csrfToken).toBe('fake-csrf-token');
+  });
+  test('should support Laravel environment variables pattern', () => {
+    // Mock Laravel Vite environment variables
+    global.import = {
+      meta: {
+        env: {
+          DEV: false,
+          PROD: true,
+          VITE_APP_NAME: 'Laravel App',
+          VITE_ONAIROS_API_KEY: 'prod-api-key',
+          VITE_ONAIROS_TEST_MODE: 'false'
+        }
+      }
+    };
+    // Initialize using Laravel environment pattern
+    initializeOnairosForBlade({
+      testMode: global.import.meta.env.VITE_ONAIROS_TEST_MODE === 'true',
+      apiKey: global.import.meta.env.VITE_ONAIROS_API_KEY,
+      appName: global.import.meta.env.VITE_APP_NAME
+    });
+    expect(window.OnairosConfig.testMode).toBe(false);
+    expect(window.OnairosConfig.apiKey).toBe('prod-api-key');
+    expect(window.OnairosConfig.appName).toBe('Laravel App');
+  });
+  test('should handle mobile responsive behavior in Laravel context', () => {
+    // Mock mobile user agent (iPhone)
+    Object.defineProperty(window.navigator, 'userAgent', {
+      writable: true,
+      value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15'
+    });
+    // Mock mobile viewport
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      value: 375
+    });
+    initializeOnairosForBlade({
+      autoDetectMobile: true
+    });
+    expect(window.OnairosUtils.isMobile).toBe(true);
+    // Create a button and verify mobile-specific behavior
+    createOnairosButton('mobile-test-button', {
+      requestData: ['email'],
+      webpageName: 'Mobile Laravel App'
+    });
+    const button = document.getElementById('mobile-test-button-btn');
+    expect(button).not.toBeNull();
+    // In mobile context, button should have mobile-optimized styling
+    const styles = window.getComputedStyle ? window.getComputedStyle(button) : {};
+    // Note: JSDOM doesn't compute styles, but we can verify the classes are applied
+    expect(button.className).toContain('onairos-btn');
+  });
+  test('should simulate Laravel Ajax integration', async () => {
+    // Mock Laravel AJAX setup (similar to what Laravel includes by default)
+    window.axios = {
+      defaults: {
+        headers: {
+          common: {
+            'X-CSRF-TOKEN': 'fake-csrf-token',
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        }
+      },
+      post: vi.fn(() => Promise.resolve({ data: { success: true } }))
+    };
+    initializeOnairosForBlade({
+      testMode: true,
+      onAuthComplete: async function(result) {
+        // Simulate Laravel AJAX call to store Onairos data
+        try {
+          const response = await window.axios.post('/onairos/callback', {
+            user_hash: result.userHash,
+            connections: result.connectedAccounts,
+            data_types: result.requestData
+          });
+          if (response.data.success) {
+            console.log('Laravel backend updated successfully');
+          }
+        } catch (error) {
+          console.error('Laravel integration error:', error);
+        }
+      }
+    });
+    // Trigger a simulated auth completion
+    const mockResult = {
+      userHash: 'test-hash-123',
+      connectedAccounts: ['youtube', 'linkedin'],
+      requestData: ['email', 'profile']
+    };
+    // Simulate the callback
+    if (window.OnairosConfig.onAuthComplete) {
+      await window.OnairosConfig.onAuthComplete(mockResult);
+    }
+    // Verify Laravel AJAX was called
+    expect(window.axios.post).toHaveBeenCalledWith('/onairos/callback', {
+      user_hash: 'test-hash-123',
+      connections: ['youtube', 'linkedin'],
+      data_types: ['email', 'profile']
+    });
+  });
+  test('should work with Laravel Blade @vite directive pattern', () => {
+    // Simulate what happens when Laravel's @vite directive loads assets
+    const viteScript = document.createElement('script');
+    viteScript.type = 'module';
+    viteScript.textContent = `
+      // Simulate Vite module loading
+      import { initializeOnairosForBlade } from '/resources/js/onairos-setup.js';
+      // Auto-initialize when loaded via Vite
+      document.addEventListener('DOMContentLoaded', () => {
+        initializeOnairosForBlade({
+          testMode: import.meta.env.DEV,
+          baseUrl: import.meta.env.VITE_ONAIROS_BASE_URL
+        });
+      });
+    `;
+    document.head.appendChild(viteScript);
+    // Verify script was added (simulating Vite asset injection)
+    const addedScript = document.querySelector('script[type="module"]');
+    expect(addedScript).not.toBeNull();
+    expect(addedScript.textContent).toContain('initializeOnairosForBlade');
+  });
+});