humanbehavior-js 0.4.28 → 0.5.0

package/src/react/AutoInstallWizard.tsx

@@ -1,557 +0,0 @@
-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/src/react/browser.ts

@@ -1,8 +0,0 @@
-// 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';