humanbehavior-js 0.4.15 → 0.4.17

package/package/src/react/AutoInstallWizard.tsx

@@ -0,0 +1,557 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserAutoInstallationWizard } from '../wizard/core/install-wizard';
+
+interface AutoInstallWizardProps {
+  apiKey: string;
+  projectName?: string;
+  onComplete?: (result: any) => void;
+  onError?: (error: string) => void;
+}
+
+interface InstallationStep {
+  id: string;
+  title: string;
+  description: string;
+  status: 'pending' | 'running' | 'completed' | 'error';
+  code?: string;
+  filePath?: string;
+}
+
+export const AutoInstallWizard: React.FC<AutoInstallWizardProps> = ({
+  apiKey,
+  projectName,
+  onComplete,
+  onError
+}) => {
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [steps, setSteps] = useState<InstallationStep[]>([]);
+  const [result, setResult] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    initializeSteps();
+  }, []);
+
+  const initializeSteps = () => {
+    const initialSteps: InstallationStep[] = [
+      {
+        id: 'detect',
+        title: 'Detecting Framework',
+        description: 'Analyzing your project structure',
+        status: 'pending'
+      },
+      {
+        id: 'install',
+        title: 'Installing SDK',
+        description: 'Adding humanbehavior-js to your project',
+        status: 'pending'
+      },
+      {
+        id: 'configure',
+        title: 'Configuring Integration',
+        description: 'Modifying your codebase',
+        status: 'pending'
+      },
+      {
+        id: 'complete',
+        title: 'Installation Complete',
+        description: 'Your app is ready to track user behavior',
+        status: 'pending'
+      }
+    ];
+    setSteps(initialSteps);
+  };
+
+  const startInstallation = async () => {
+    setIsInstalling(true);
+    setError(null);
+
+    try {
+      // Step 1: Detect framework
+      updateStepStatus(0, 'running');
+      await simulateStep(1000);
+      updateStepStatus(0, 'completed');
+
+      // Step 2: Install package
+      updateStepStatus(1, 'running');
+      await simulateStep(1500);
+      updateStepStatus(1, 'completed');
+
+      // Step 3: Configure integration
+      updateStepStatus(2, 'running');
+      await simulateStep(2000);
+      updateStepStatus(2, 'completed');
+
+      // Step 4: Complete
+      updateStepStatus(3, 'completed');
+
+      // Generate result
+      const wizard = new BrowserAutoInstallationWizard(apiKey);
+      const installationResult = await wizard.install();
+      setResult(installationResult);
+
+      onComplete?.(installationResult);
+
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Installation failed';
+      setError(errorMessage);
+      onError?.(errorMessage);
+      
+      // Mark current step as error
+      updateStepStatus(currentStep, 'error');
+    } finally {
+      setIsInstalling(false);
+    }
+  };
+
+  const updateStepStatus = (stepIndex: number, status: InstallationStep['status']) => {
+    setSteps(prev => prev.map((step, index) => 
+      index === stepIndex ? { ...step, status } : step
+    ));
+    setCurrentStep(stepIndex);
+  };
+
+  const simulateStep = (duration: number) => {
+    return new Promise(resolve => setTimeout(resolve, duration));
+  };
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      // You could add a toast notification here
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+    }
+  };
+
+  const getStepIcon = (status: InstallationStep['status']) => {
+    switch (status) {
+      case 'completed':
+        return '✅';
+      case 'running':
+        return '🔄';
+      case 'error':
+        return '❌';
+      default:
+        return '⏳';
+    }
+  };
+
+  const getStepClass = (status: InstallationStep['status']) => {
+    switch (status) {
+      case 'completed':
+        return 'step-completed';
+      case 'running':
+        return 'step-running';
+      case 'error':
+        return 'step-error';
+      default:
+        return 'step-pending';
+    }
+  };
+
+  return (
+    <div className="auto-install-wizard">
+      <div className="wizard-header">
+        <h2>🚀 Auto-Installation Wizard</h2>
+        <p>Automatically integrate HumanBehavior SDK into your project</p>
+      </div>
+
+      {!isInstalling && steps.every(step => step.status === 'pending') && (
+        <div className="wizard-start">
+          <div className="start-content">
+            <h3>Ready to Install</h3>
+            <p>This wizard will automatically:</p>
+            <ul>
+              <li>🔍 Detect your project's framework</li>
+              <li>📦 Install the humanbehavior-js package</li>
+              <li>✏️ Modify your codebase to integrate the SDK</li>
+              <li>🔧 Create environment files with your API key</li>
+              <li>🚀 Make your app ready to track user behavior</li>
+            </ul>
+            
+            <button 
+              onClick={startInstallation}
+              className="btn btn-primary"
+              disabled={isInstalling}
+            >
+              {isInstalling ? 'Installing...' : 'Start Auto-Installation'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isInstalling && (
+        <div className="wizard-progress">
+          <div className="progress-bar">
+            <div 
+              className="progress-fill" 
+              style={{ 
+                width: `${((currentStep + 1) / steps.length) * 100}%` 
+              }}
+            />
+          </div>
+
+          <div className="steps-list">
+            {steps.map((step, index) => (
+              <div 
+                key={step.id}
+                className={`step-item ${getStepClass(step.status)}`}
+              >
+                <div className="step-icon">
+                  {getStepIcon(step.status)}
+                </div>
+                <div className="step-content">
+                  <h4>{step.title}</h4>
+                  <p>{step.description}</p>
+                  {step.status === 'running' && (
+                    <div className="step-spinner">
+                      <div className="spinner" />
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {result && result.success && (
+        <div className="wizard-success">
+          <div className="success-header">
+            <h3>✅ Installation Complete!</h3>
+            <p>Your HumanBehavior SDK has been successfully integrated.</p>
+          </div>
+
+          <div className="result-details">
+            <div className="framework-info">
+              <h4>Framework Detected</h4>
+              <p><strong>{result.framework.name}</strong></p>
+              {result.framework.bundler && (
+                <p>Bundler: {result.framework.bundler}</p>
+              )}
+            </div>
+
+            <div className="changes-made">
+              <h4>Changes Made</h4>
+              <ul>
+                {result.modifications.map((mod: any, index: number) => (
+                  <li key={index}>
+                    <strong>{mod.description}</strong>
+                    <br />
+                    <code>{mod.filePath}</code>
+                    {mod.content && (
+                      <button 
+                        onClick={() => copyToClipboard(mod.content)}
+                        className="btn-copy"
+                      >
+                        Copy Code
+                      </button>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="next-steps">
+              <h4>Next Steps</h4>
+              <ul>
+                {result.nextSteps.map((step: string, index: number) => (
+                  <li key={index}>{step}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="wizard-error">
+          <h3>❌ Installation Failed</h3>
+          <p>{error}</p>
+          <button 
+            onClick={() => {
+              setError(null);
+              initializeSteps();
+            }}
+            className="btn btn-secondary"
+          >
+            Try Again
+          </button>
+        </div>
+      )}
+
+      <style>{`
+        .auto-install-wizard {
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 2rem;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .wizard-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .wizard-header h2 {
+          font-size: 2rem;
+          margin-bottom: 0.5rem;
+          color: #1f2937;
+        }
+
+        .wizard-header p {
+          color: #6b7280;
+          font-size: 1.1rem;
+        }
+
+        .wizard-start {
+          background: white;
+          border-radius: 12px;
+          padding: 2rem;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          text-align: center;
+        }
+
+        .start-content h3 {
+          margin-bottom: 1rem;
+          color: #1f2937;
+        }
+
+        .start-content ul {
+          text-align: left;
+          margin: 1.5rem 0;
+          padding-left: 1.5rem;
+        }
+
+        .start-content li {
+          margin-bottom: 0.5rem;
+          color: #374151;
+        }
+
+        .btn {
+          padding: 0.75rem 1.5rem;
+          border-radius: 8px;
+          font-weight: 600;
+          cursor: pointer;
+          border: none;
+          font-size: 1rem;
+          transition: all 0.2s;
+        }
+
+        .btn-primary {
+          background: #10b981;
+          color: white;
+        }
+
+        .btn-primary:hover {
+          background: #059669;
+        }
+
+        .btn-secondary {
+          background: #6b7280;
+          color: white;
+        }
+
+        .btn-secondary:hover {
+          background: #4b5563;
+        }
+
+        .wizard-progress {
+          background: white;
+          border-radius: 12px;
+          padding: 2rem;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .progress-bar {
+          width: 100%;
+          height: 8px;
+          background: #e5e7eb;
+          border-radius: 4px;
+          overflow: hidden;
+          margin-bottom: 2rem;
+        }
+
+        .progress-fill {
+          height: 100%;
+          background: #10b981;
+          transition: width 0.3s ease;
+        }
+
+        .steps-list {
+          space-y: 1rem;
+        }
+
+        .step-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 1rem;
+          padding: 1rem;
+          border-radius: 8px;
+          margin-bottom: 1rem;
+        }
+
+        .step-pending {
+          background: #f9fafb;
+          border: 1px solid #e5e7eb;
+        }
+
+        .step-running {
+          background: #eff6ff;
+          border: 1px solid #3b82f6;
+        }
+
+        .step-completed {
+          background: #f0fdf4;
+          border: 1px solid #22c55e;
+        }
+
+        .step-error {
+          background: #fef2f2;
+          border: 1px solid #ef4444;
+        }
+
+        .step-icon {
+          font-size: 1.5rem;
+          flex-shrink: 0;
+        }
+
+        .step-content h4 {
+          margin: 0 0 0.25rem 0;
+          color: #1f2937;
+        }
+
+        .step-content p {
+          margin: 0;
+          color: #6b7280;
+        }
+
+        .step-spinner {
+          margin-top: 0.5rem;
+        }
+
+        .spinner {
+          width: 20px;
+          height: 20px;
+          border: 2px solid #e5e7eb;
+          border-top: 2px solid #3b82f6;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+
+        .wizard-success {
+          background: white;
+          border-radius: 12px;
+          padding: 2rem;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .success-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .success-header h3 {
+          color: #059669;
+          margin-bottom: 0.5rem;
+        }
+
+        .result-details {
+          display: grid;
+          gap: 2rem;
+        }
+
+        .framework-info, .changes-made, .next-steps {
+          background: #f9fafb;
+          padding: 1.5rem;
+          border-radius: 8px;
+        }
+
+        .framework-info h4, .changes-made h4, .next-steps h4 {
+          margin: 0 0 1rem 0;
+          color: #1f2937;
+        }
+
+        .changes-made ul {
+          list-style: none;
+          padding: 0;
+        }
+
+        .changes-made li {
+          margin-bottom: 1rem;
+          padding: 1rem;
+          background: white;
+          border-radius: 6px;
+          border: 1px solid #e5e7eb;
+        }
+
+        .changes-made code {
+          background: #f3f4f6;
+          padding: 0.25rem 0.5rem;
+          border-radius: 4px;
+          font-size: 0.875rem;
+          color: #374151;
+        }
+
+        .btn-copy {
+          margin-top: 0.5rem;
+          padding: 0.25rem 0.5rem;
+          background: #10b981;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          cursor: pointer;
+        }
+
+        .btn-copy:hover {
+          background: #059669;
+        }
+
+        .next-steps ul {
+          list-style: none;
+          padding: 0;
+        }
+
+        .next-steps li {
+          margin-bottom: 0.5rem;
+          padding-left: 1.5rem;
+          position: relative;
+        }
+
+        .next-steps li:before {
+          content: '✅';
+          position: absolute;
+          left: 0;
+        }
+
+        .wizard-error {
+          background: white;
+          border-radius: 12px;
+          padding: 2rem;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          text-align: center;
+        }
+
+        .wizard-error h3 {
+          color: #dc2626;
+          margin-bottom: 1rem;
+        }
+
+        .wizard-error p {
+          color: #6b7280;
+          margin-bottom: 1.5rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default AutoInstallWizard; 

package/package/src/react/browser.ts

@@ -0,0 +1,8 @@
+// Browser-safe version of HumanBehaviorTracker
+import { HumanBehaviorTracker } from '../tracker';
+
+// Re-export only browser-safe functionality
+export { HumanBehaviorTracker };
+
+// Export browser-safe utilities
+export { logError, logWarn, logDebug } from '../utils/logger';