@nextsparkjs/plugin-amplitude 0.1.0-beta.1

package/styles/amplitude.css

@@ -0,0 +1,593 @@
+/* Amplitude Plugin Styles */
+
+/* CSS Custom Properties for Theme Integration */
+:root {
+  --amplitude-primary: #3b82f6;
+  --amplitude-primary-hover: #2563eb;
+  --amplitude-success: #10b981;
+  --amplitude-warning: #f59e0b;
+  --amplitude-error: #ef4444;
+  --amplitude-bg-primary: #ffffff;
+  --amplitude-bg-secondary: #f9fafb;
+  --amplitude-bg-modal: rgba(0, 0, 0, 0.5);
+  --amplitude-text-primary: #111827;
+  --amplitude-text-secondary: #6b7280;
+  --amplitude-border: #e5e7eb;
+  --amplitude-border-hover: #d1d5db;
+  --amplitude-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --amplitude-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --amplitude-radius: 0.375rem;
+  --amplitude-radius-lg: 0.5rem;
+}
+
+/* Dark mode support */
+[data-theme="dark"] {
+  --amplitude-bg-primary: #1f2937;
+  --amplitude-bg-secondary: #374151;
+  --amplitude-bg-modal: rgba(0, 0, 0, 0.75);
+  --amplitude-text-primary: #f9fafb;
+  --amplitude-text-secondary: #d1d5db;
+  --amplitude-border: #4b5563;
+  --amplitude-border-hover: #6b7280;
+}
+
+/* Consent Manager Styles */
+.amplitude-consent-modal {
+  position: fixed;
+  z-index: 9999;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.amplitude-consent-modal--bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+.amplitude-consent-modal--bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+.amplitude-consent-modal--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.amplitude-consent-modal--top {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.amplitude-consent-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--amplitude-bg-modal);
+  z-index: -1;
+}
+
+.amplitude-consent-modal__content {
+  background: var(--amplitude-bg-primary);
+  border-radius: var(--amplitude-radius-lg);
+  box-shadow: var(--amplitude-shadow-lg);
+  max-width: 400px;
+  width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  border: 1px solid var(--amplitude-border);
+}
+
+.amplitude-consent-modal__content--compact {
+  max-width: 320px;
+}
+
+.amplitude-consent-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid var(--amplitude-border);
+}
+
+.amplitude-consent-modal__title {
+  margin: 0;
+  color: var(--amplitude-text-primary);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.amplitude-consent-modal__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--amplitude-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--amplitude-radius);
+  transition: all 0.2s ease;
+}
+
+.amplitude-consent-modal__close:hover {
+  background: var(--amplitude-bg-secondary);
+  color: var(--amplitude-text-primary);
+}
+
+.amplitude-consent-modal__body {
+  padding: 20px;
+}
+
+.amplitude-consent-modal__description {
+  margin: 0 0 20px 0;
+  color: var(--amplitude-text-secondary);
+  line-height: 1.5;
+}
+
+.amplitude-consent-modal__categories {
+  space-y: 16px;
+}
+
+.amplitude-consent-category {
+  margin-bottom: 16px;
+}
+
+.amplitude-consent-category__label {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--amplitude-text-primary);
+}
+
+.amplitude-consent-category__checkbox {
+  margin-right: 8px;
+  margin-top: 2px;
+  accent-color: var(--amplitude-primary);
+}
+
+.amplitude-consent-category__name {
+  flex: 1;
+}
+
+.amplitude-consent-category__description {
+  margin: 4px 0 0 24px;
+  font-size: 0.875rem;
+  color: var(--amplitude-text-secondary);
+  line-height: 1.4;
+}
+
+.amplitude-consent-modal__actions {
+  display: flex;
+  gap: 8px;
+  padding: 16px 20px 20px;
+  border-top: 1px solid var(--amplitude-border);
+  flex-wrap: wrap;
+}
+
+.amplitude-consent-modal__button {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 16px;
+  border-radius: var(--amplitude-radius);
+  border: 1px solid var(--amplitude-border);
+  background: var(--amplitude-bg-primary);
+  color: var(--amplitude-text-primary);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.amplitude-consent-modal__button:hover {
+  border-color: var(--amplitude-border-hover);
+  background: var(--amplitude-bg-secondary);
+}
+
+.amplitude-consent-modal__button--primary {
+  background: var(--amplitude-primary);
+  color: white;
+  border-color: var(--amplitude-primary);
+}
+
+.amplitude-consent-modal__button--primary:hover {
+  background: var(--amplitude-primary-hover);
+  border-color: var(--amplitude-primary-hover);
+}
+
+.amplitude-consent-modal__button--accent {
+  background: var(--amplitude-success);
+  color: white;
+  border-color: var(--amplitude-success);
+}
+
+.amplitude-consent-modal__button--accent:hover {
+  opacity: 0.9;
+}
+
+.amplitude-consent-modal__button--secondary {
+  background: transparent;
+  color: var(--amplitude-text-secondary);
+}
+
+.amplitude-consent-modal__footer {
+  padding: 0 20px 20px;
+}
+
+.amplitude-consent-modal__footer-text {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--amplitude-text-secondary);
+  text-align: center;
+}
+
+/* Consent Badge */
+.amplitude-consent-badge {
+  position: fixed;
+  z-index: 9998;
+  background: var(--amplitude-bg-primary);
+  border: 1px solid var(--amplitude-border);
+  border-radius: var(--amplitude-radius);
+  padding: 8px 12px;
+  box-shadow: var(--amplitude-shadow-sm);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.875rem;
+  color: var(--amplitude-text-primary);
+  transition: all 0.2s ease;
+}
+
+.amplitude-consent-badge:hover {
+  box-shadow: var(--amplitude-shadow-lg);
+  border-color: var(--amplitude-border-hover);
+}
+
+.amplitude-consent-badge__icon {
+  font-size: 1rem;
+}
+
+.amplitude-consent-badge__text {
+  white-space: nowrap;
+}
+
+/* Analytics Dashboard Styles */
+.amplitude-dashboard {
+  background: var(--amplitude-bg-primary);
+  border-radius: var(--amplitude-radius-lg);
+  border: 1px solid var(--amplitude-border);
+  padding: 24px;
+  color: var(--amplitude-text-primary);
+}
+
+.amplitude-dashboard--compact {
+  padding: 16px;
+}
+
+.amplitude-dashboard--loading,
+.amplitude-dashboard--error,
+.amplitude-dashboard--not-initialized {
+  text-align: center;
+  padding: 40px 24px;
+}
+
+.amplitude-dashboard__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--amplitude-border);
+}
+
+.amplitude-dashboard__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.amplitude-dashboard__refresh-button,
+.amplitude-dashboard__retry-button {
+  background: var(--amplitude-primary);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: var(--amplitude-radius);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background 0.2s ease;
+}
+
+.amplitude-dashboard__refresh-button:hover,
+.amplitude-dashboard__retry-button:hover {
+  background: var(--amplitude-primary-hover);
+}
+
+.amplitude-dashboard__refresh-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.amplitude-dashboard__alerts {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--amplitude-bg-secondary);
+  border-radius: var(--amplitude-radius);
+  border: 1px solid var(--amplitude-border);
+}
+
+.amplitude-dashboard__alerts h3 {
+  margin: 0 0 12px 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.amplitude-dashboard__alert {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--amplitude-radius);
+  margin-bottom: 8px;
+  font-size: 0.875rem;
+}
+
+.amplitude-dashboard__alert:last-child {
+  margin-bottom: 0;
+}
+
+.amplitude-dashboard__alert--warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--amplitude-warning);
+}
+
+.amplitude-dashboard__alert--error {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--amplitude-error);
+}
+
+.amplitude-dashboard__alert--critical {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--amplitude-error);
+  font-weight: 600;
+}
+
+.amplitude-dashboard__alert-icon {
+  font-size: 1rem;
+}
+
+.amplitude-dashboard__alert-message {
+  flex: 1;
+}
+
+.amplitude-dashboard__alert-value {
+  font-family: monospace;
+  font-size: 0.75rem;
+}
+
+.amplitude-dashboard__metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.amplitude-dashboard__metric-card {
+  background: var(--amplitude-bg-secondary);
+  border: 1px solid var(--amplitude-border);
+  border-radius: var(--amplitude-radius);
+  padding: 16px;
+  text-align: center;
+}
+
+.amplitude-dashboard__metric-card h3 {
+  margin: 0 0 8px 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--amplitude-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.amplitude-dashboard__metric-value {
+  display: block;
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--amplitude-text-primary);
+  margin-bottom: 4px;
+}
+
+.amplitude-dashboard__metric-label {
+  font-size: 0.75rem;
+  color: var(--amplitude-text-secondary);
+}
+
+.amplitude-dashboard__performance-table {
+  margin-top: 24px;
+}
+
+.amplitude-dashboard__performance-table h3 {
+  margin: 0 0 16px 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.amplitude-dashboard__table-container {
+  overflow-x: auto;
+  border: 1px solid var(--amplitude-border);
+  border-radius: var(--amplitude-radius);
+}
+
+.amplitude-dashboard__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.amplitude-dashboard__table th,
+.amplitude-dashboard__table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--amplitude-border);
+}
+
+.amplitude-dashboard__table th {
+  background: var(--amplitude-bg-secondary);
+  font-weight: 600;
+  color: var(--amplitude-text-primary);
+}
+
+.amplitude-dashboard__table td {
+  color: var(--amplitude-text-secondary);
+}
+
+.amplitude-dashboard__table tr:last-child td {
+  border-bottom: none;
+}
+
+.amplitude-dashboard__table tr:hover {
+  background: var(--amplitude-bg-secondary);
+}
+
+.amplitude-dashboard__footer {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--amplitude-border);
+}
+
+.amplitude-dashboard__footer-text {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--amplitude-text-secondary);
+  text-align: center;
+}
+
+.amplitude-dashboard__spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--amplitude-border);
+  border-top-color: var(--amplitude-primary);
+  border-radius: 50%;
+  animation: amplitude-spin 1s linear infinite;
+  margin: 0 auto 16px;
+}
+
+@keyframes amplitude-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Experiment Wrapper Styles */
+.amplitude-experiment-wrapper {
+  position: relative;
+}
+
+.amplitude-experiment-wrapper--loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.amplitude-experiment-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--amplitude-text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Performance Monitor Styles */
+.amplitude-performance-monitor {
+  background: var(--amplitude-bg-secondary);
+  border: 1px solid var(--amplitude-border);
+  border-radius: var(--amplitude-radius);
+  padding: 16px;
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--amplitude-text-primary);
+}
+
+.amplitude-performance-monitor h3 {
+  margin: 0 0 12px 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.amplitude-performance-monitor ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.amplitude-performance-monitor li {
+  margin-bottom: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--amplitude-border);
+}
+
+.amplitude-performance-monitor li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .amplitude-consent-modal__content {
+    max-width: 95vw;
+    margin: 10px;
+  }
+  
+  .amplitude-consent-modal__actions {
+    flex-direction: column;
+  }
+  
+  .amplitude-dashboard__metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .amplitude-dashboard {
+    padding: 16px;
+  }
+  
+  .amplitude-dashboard__header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .amplitude-consent-modal__button,
+  .amplitude-consent-badge,
+  .amplitude-dashboard__refresh-button,
+  .amplitude-dashboard__spinner {
+    transition: none;
+    animation: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  :root {
+    --amplitude-border: #000000;
+    --amplitude-text-secondary: #000000;
+  }
+  
+  [data-theme="dark"] {
+    --amplitude-border: #ffffff;
+    --amplitude-text-secondary: #ffffff;
+  }
+}
+

package/translations/en.json

@@ -0,0 +1,45 @@
+{
+  "plugin": {
+    "name": "Amplitude Analytics",
+    "description": "Advanced user analytics and behavioral tracking plugin for SaaS applications."
+  },
+  "consent": {
+    "title": "Privacy Preferences",
+    "description": "We use cookies and other tracking technologies to improve your experience. Please review your preferences.",
+    "category": {
+      "analytics": "Analytics (collects anonymous usage data)",
+      "sessionReplay": "Session Replay (records user sessions for debugging)",
+      "experiments": "A/B Testing (participate in experiments)",
+      "performance": "Performance Monitoring (collects app performance metrics)"
+    },
+    "acceptAll": "Accept All",
+    "rejectAll": "Reject All",
+    "savePreferences": "Save Preferences",
+    "managePreferences": "Manage Privacy Preferences"
+  },
+  "dashboard": {
+    "title": "Amplitude Analytics Dashboard",
+    "description": "Overview of collected analytics data and plugin performance.",
+    "loading": "Loading analytics data...",
+    "error": "Error loading dashboard: {{error}}",
+    "notInitialized": "Amplitude plugin not initialized. Check configuration.",
+    "performanceMetrics": "Performance Metrics"
+  },
+  "experiments": {
+    "variant": "Variant: {{variantName}}",
+    "loading": "Loading experiment..."
+  },
+  "sessionReplay": {
+    "enabled": "Session Replay is enabled.",
+    "disabled": "Session Replay is disabled due to consent or configuration."
+  },
+  "errors": {
+    "apiKeyMissing": "Amplitude API Key is missing or invalid.",
+    "notInitialized": "Amplitude SDK is not initialized.",
+    "offline": "You are offline. Events will be queued.",
+    "trackFailed": "Failed to track event: {{eventType}}",
+    "identifyFailed": "Failed to identify user: {{userId}}",
+    "setUserPropertiesFailed": "Failed to set user properties."
+  }
+}
+

package/translations/es.json

@@ -0,0 +1,45 @@
+{
+  "plugin": {
+    "name": "Amplitude Analytics",
+    "description": "Plugin avanzado de análisis de usuario y seguimiento de comportamiento para aplicaciones SaaS."
+  },
+  "consent": {
+    "title": "Preferencias de Privacidad",
+    "description": "Utilizamos cookies y otras tecnologías de seguimiento para mejorar su experiencia. Por favor, revise sus preferencias.",
+    "category": {
+      "analytics": "Análisis (recopila datos de uso anónimos)",
+      "sessionReplay": "Grabación de Sesiones (registra sesiones de usuario para depuración)",
+      "experiments": "Pruebas A/B (participar en experimentos)",
+      "performance": "Monitoreo de Rendimiento (recopila métricas de rendimiento de la aplicación)"
+    },
+    "acceptAll": "Aceptar Todo",
+    "rejectAll": "Rechazar Todo",
+    "savePreferences": "Guardar Preferencias",
+    "managePreferences": "Administrar Preferencias de Privacidad"
+  },
+  "dashboard": {
+    "title": "Panel de Control de Amplitude Analytics",
+    "description": "Resumen de los datos analíticos recopilados y el rendimiento del plugin.",
+    "loading": "Cargando datos analíticos...",
+    "error": "Error al cargar el panel: {{error}}",
+    "notInitialized": "El plugin de Amplitude no está inicializado. Verifique la configuración.",
+    "performanceMetrics": "Métricas de Rendimiento"
+  },
+  "experiments": {
+    "variant": "Variante: {{variantName}}",
+    "loading": "Cargando experimento..."
+  },
+  "sessionReplay": {
+    "enabled": "La Grabación de Sesiones está habilitada.",
+    "disabled": "La Grabación de Sesiones está deshabilitada debido al consentimiento o la configuración."
+  },
+  "errors": {
+    "apiKeyMissing": "La clave API de Amplitude falta o no es válida.",
+    "notInitialized": "El SDK de Amplitude no está inicializado.",
+    "offline": "Estás sin conexión. Los eventos se pondrán en cola.",
+    "trackFailed": "Fallo al rastrear el evento: {{eventType}}",
+    "identifyFailed": "Fallo al identificar al usuario: {{userId}}",
+    "setUserPropertiesFailed": "Fallo al establecer las propiedades del usuario."
+  }
+}
+