rails_onboarding 0.6.1

data/app/assets/javascripts/rails_onboarding/milestone_dashboard_controller.js

@@ -0,0 +1,132 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["milestoneCard", "pointsValue", "countValue"]
+  // Supplied by the view via milestones_path. The engine is mounted at a
+  // host-chosen prefix, so this cannot be a literal path.
+  static values = { milestonesPath: String }
+  
+  connect() {
+    this.animateStats()
+    this.setupCardHovers()
+    this.checkForNewMilestones()
+  }
+
+  animateStats() {
+    // Animate the point counter
+    if (this.hasPointsValueTarget) {
+      const finalValue = parseInt(this.pointsValueTarget.textContent)
+      this.animateCounter(this.pointsValueTarget, finalValue, 1000)
+    }
+    
+    // Animate the milestone counter
+    if (this.hasCountValueTarget) {
+      const finalValue = parseInt(this.countValueTarget.textContent)
+      this.animateCounter(this.countValueTarget, finalValue, 800)
+    }
+  }
+
+  animateCounter(element, finalValue, duration) {
+    const startValue = 0
+    const startTime = performance.now()
+    
+    const updateCounter = (currentTime) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      
+      // Easing function for smooth animation
+      const easeOut = 1 - Math.pow(1 - progress, 3)
+      const currentValue = Math.floor(startValue + (finalValue - startValue) * easeOut)
+      
+      element.textContent = currentValue
+      
+      if (progress < 1) {
+        requestAnimationFrame(updateCounter)
+      } else {
+        element.textContent = finalValue
+      }
+    }
+    
+    requestAnimationFrame(updateCounter)
+  }
+
+  setupCardHovers() {
+    this.milestoneCardTargets.forEach(card => {
+      card.addEventListener('mouseenter', this.handleCardHover.bind(this))
+      card.addEventListener('mouseleave', this.handleCardLeave.bind(this))
+    })
+  }
+
+  handleCardHover(event) {
+    const card = event.currentTarget
+    card.style.transform = 'translateY(-4px)'
+    card.style.transition = 'transform 0.2s ease-in-out'
+  }
+
+  handleCardLeave(event) {
+    const card = event.currentTarget
+    card.style.transform = 'translateY(0)'
+  }
+
+  checkForNewMilestones() {
+    // Check URL parameters for newly achieved milestones
+    const urlParams = new URLSearchParams(window.location.search)
+    const awardedMilestones = urlParams.get('awarded_milestones')
+    
+    if (awardedMilestones) {
+      const milestoneKeys = awardedMilestones.split(',')
+      
+      // Fetch milestone details and show celebrations
+      milestoneKeys.forEach(key => {
+        this.fetchAndShowMilestone(key.trim())
+      })
+      
+      // Clean up URL
+      this.cleanUrl()
+    }
+  }
+
+  async fetchAndShowMilestone(milestoneKey) {
+    // Without the mounted path there is nothing safe to guess at - bail rather
+    // than fire a request at the host app's root.
+    if (!this.hasMilestonesPathValue || !this.milestonesPathValue) return
+
+    const base = this.milestonesPathValue.replace(/\/+$/, "")
+    try {
+      const response = await fetch(`${base}/${encodeURIComponent(milestoneKey)}`, {
+        headers: { 'Accept': 'application/json' }
+      })
+      
+      if (response.ok) {
+        const milestone = await response.json()
+        this.showMilestoneCelebration(milestone)
+      }
+    } catch (error) {
+      console.error('Failed to fetch milestone:', error)
+    }
+  }
+
+  showMilestoneCelebration(milestone) {
+    // An empty shell on purpose: milestone_celebration_controller builds the
+    // same structure the server-rendered partial produces when it connects to
+    // an overlay with no .celebration-modal. Attributes are set as properties
+    // rather than interpolated into markup so milestone data cannot break out
+    // of the attribute.
+    const overlay = document.createElement("div")
+    overlay.className = "milestone-celebration-overlay"
+    overlay.dataset.controller = "milestone-celebration"
+    overlay.dataset.milestoneCelebrationMilestoneValue = JSON.stringify(milestone)
+    overlay.dataset.temporary = "true"
+    if (this.hasMilestonesPathValue && this.milestonesPathValue) {
+      overlay.dataset.milestoneCelebrationMilestonesPathValue = this.milestonesPathValue
+    }
+
+    document.body.appendChild(overlay)
+  }
+
+  cleanUrl() {
+    const url = new URL(window.location)
+    url.searchParams.delete('awarded_milestones')
+    window.history.replaceState({}, '', url)
+  }
+}

data/app/assets/javascripts/rails_onboarding/milestone_detail_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.setupAnimations()
+  }
+
+  setupAnimations() {
+    const iconLarge = this.element.querySelector('.milestone-icon-large')
+    const hero = this.element.querySelector('.milestone-hero')
+    
+    if (iconLarge) {
+      // Add bounce animation to the icon
+      iconLarge.style.animation = 'onboarding-milestone-bounce 1s ease-in-out'
+    }
+    
+    if (hero && hero.classList.contains('onboarding-achieved')) {
+      // Add celebration effect for achieved milestones
+      this.addCelebrationGlow()
+    }
+  }
+
+  addCelebrationGlow() {
+    const hero = this.element.querySelector('.milestone-hero')
+    if (hero) {
+      hero.classList.add('celebration-glow')
+      
+      // Remove the glow effect after animation
+      setTimeout(() => {
+        hero.classList.remove('celebration-glow')
+      }, 2000)
+    }
+  }
+}

data/app/assets/javascripts/rails_onboarding/navigation_controller.js

@@ -0,0 +1,277 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["helpTooltip"]
+    static values = { currentStep: String }
+
+    connect() {
+        this.setupKeyboardShortcuts()
+        this.setupClickOutsideHandler()
+    }
+
+    // Show help tooltip
+    showHelp(event) {
+        event.preventDefault()
+
+        if (this.hasHelpTooltipTarget) {
+            this.helpTooltipTarget.hidden = false
+            this.positionTooltip()
+            this.focusTooltip()
+        }
+    }
+
+    // Hide help tooltip
+    hideHelp(event) {
+        if (event) event.preventDefault()
+
+        if (this.hasHelpTooltipTarget) {
+            this.helpTooltipTarget.hidden = true
+        }
+    }
+
+    // Handle skip confirmation
+    confirmSkip(event) {
+        const confirmed = confirm(event.target.dataset.confirm || "Are you sure you want to skip this step?")
+
+        if (!confirmed) {
+            event.preventDefault()
+            return false
+        }
+
+        // Track skip event for analytics
+        this.trackSkipEvent()
+        return true
+    }
+
+    // Position help tooltip relative to button
+    positionTooltip() {
+        if (!this.hasHelpTooltipTarget) return
+
+        const tooltip = this.helpTooltipTarget
+        const button = this.element.querySelector('.help-action')
+
+        if (button) {
+            const buttonRect = button.getBoundingClientRect()
+            const tooltipRect = tooltip.getBoundingClientRect()
+
+            // Position above the button by default
+            let top = buttonRect.top - tooltipRect.height - 8
+            let left = buttonRect.left + (buttonRect.width / 2) - (tooltipRect.width / 2)
+
+            // Adjust if tooltip would be off-screen
+            if (top < 8) {
+                // Position below if no room above
+                top = buttonRect.bottom + 8
+            }
+
+            if (left < 8) {
+                left = 8
+            } else if (left + tooltipRect.width > window.innerWidth - 8) {
+                left = window.innerWidth - tooltipRect.width - 8
+            }
+
+            tooltip.style.position = 'fixed'
+            tooltip.style.top = `${top}px`
+            tooltip.style.left = `${left}px`
+        }
+    }
+
+    // Focus the first focusable element in tooltip
+    focusTooltip() {
+        if (this.hasHelpTooltipTarget) {
+            const focusableElement = this.helpTooltipTarget.querySelector('button, a, input, [tabindex]')
+            if (focusableElement) {
+                focusableElement.focus()
+            }
+        }
+    }
+
+    // Setup keyboard shortcuts
+    setupKeyboardShortcuts() {
+        document.addEventListener('keydown', this.handleKeyboard.bind(this))
+    }
+
+    // Handle keyboard events
+    handleKeyboard(event) {
+        // Close help on Escape
+        if (event.key === 'Escape' && this.hasHelpTooltipTarget && !this.helpTooltipTarget.hidden) {
+            this.hideHelp()
+            return
+        }
+
+        // Show help on F1 or Ctrl+?
+        if (event.key === 'F1' || (event.ctrlKey && event.key === '?')) {
+            event.preventDefault()
+            this.showHelp(event)
+            return
+        }
+
+        // Skip with Ctrl+S (if skippable)
+        if (event.ctrlKey && event.key === 's') {
+            const skipButton = this.element.querySelector('.skip-action')
+            if (skipButton) {
+                event.preventDefault()
+                skipButton.click()
+            }
+        }
+    }
+
+    // Setup click outside handler to close tooltip
+    setupClickOutsideHandler() {
+        document.addEventListener('click', (event) => {
+            if (this.hasHelpTooltipTarget && !this.helpTooltipTarget.hidden) {
+                // Check if click is outside tooltip and help button
+                const tooltip = this.helpTooltipTarget
+                const helpButton = this.element.querySelector('.help-action')
+
+                if (!tooltip.contains(event.target) && !helpButton.contains(event.target)) {
+                    this.hideHelp()
+                }
+            }
+        })
+    }
+
+    // Track skip event for analytics
+    trackSkipEvent() {
+        // Send analytics event if analytics system is available
+        if (typeof gtag !== 'undefined') {
+            gtag('event', 'onboarding_step_skipped', {
+                step: this.currentStepValue,
+                timestamp: new Date().toISOString()
+            })
+        }
+
+        // Send to Rails if needed
+        if (typeof Rails !== 'undefined' && Rails.ajax) {
+            Rails.ajax({
+                url: '/rails_onboarding/analytics/skip',
+                type: 'POST',
+                data: `step=${encodeURIComponent(this.currentStepValue)}`,
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+                }
+            })
+        }
+    }
+
+    // Handle navigation button clicks
+    navigateToStep(event) {
+        const direction = event.params.direction
+        const form = document.querySelector('.onboarding-form')
+
+        if (direction === 'next' && form) {
+            // Validate form before proceeding
+            const isValid = this.validateCurrentStep()
+            if (isValid) {
+                form.submit()
+            }
+        } else if (direction === 'previous') {
+            // Handle previous navigation (if implemented)
+            this.goToPreviousStep()
+        }
+    }
+
+    // Validate current step before proceeding
+    validateCurrentStep() {
+        const form = document.querySelector('.onboarding-form')
+        if (!form) return true
+
+        // Check required fields
+        const requiredFields = form.querySelectorAll('input[required], select[required]')
+        const radioGroups = this.getRadioGroups(form)
+
+        // Validate radio button groups
+        for (const groupName in radioGroups) {
+            const group = radioGroups[groupName]
+            const hasSelection = group.some(radio => radio.checked)
+
+            if (!hasSelection && group.length > 0) {
+                this.showValidationMessage('Please make a selection to continue.')
+                group[0].focus()
+                return false
+            }
+        }
+
+        // Validate other required fields
+        for (const field of requiredFields) {
+            if (field.value.trim() === '') {
+                this.showValidationMessage('Please fill in all required fields.')
+                field.focus()
+                return false
+            }
+        }
+
+        return true
+    }
+
+    // Get radio button groups
+    getRadioGroups(form) {
+        const radioGroups = {}
+
+        form.querySelectorAll('input[type="radio"]').forEach(radio => {
+            if (!radioGroups[radio.name]) {
+                radioGroups[radio.name] = []
+            }
+            radioGroups[radio.name].push(radio)
+        })
+
+        return radioGroups
+    }
+
+    // Show validation message
+    showValidationMessage(message) {
+        // Remove existing messages
+        document.querySelectorAll('.navigation-validation-error').forEach(error => {
+            error.remove()
+        })
+
+        // Create new message
+        const errorDiv = document.createElement('div')
+        errorDiv.className = 'navigation-validation-error'
+        errorDiv.style.cssText = `
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      color: #dc2626;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      margin: 1rem 0;
+      text-align: center;
+      font-size: 0.875rem;
+    `
+        errorDiv.textContent = message
+
+        // Insert at top of navigation
+        this.element.insertBefore(errorDiv, this.element.firstChild)
+
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (errorDiv.parentNode) {
+                errorDiv.remove()
+            }
+        }, 5000)
+    }
+
+    // Go to previous step (if supported)
+    goToPreviousStep() {
+        // This would need to be implemented based on your routing
+        console.log('Previous step navigation not yet implemented')
+    }
+
+    // Show progress summary
+    showProgressSummary() {
+        const progress = document.querySelector('[data-controller="progress"]')
+        if (progress) {
+            const currentStep = progress.dataset.progressCurrentStepValue || 1
+            const totalSteps = progress.dataset.progressTotalStepsValue || 4
+
+            alert(`Progress: Step ${currentStep} of ${totalSteps}`)
+        }
+    }
+
+    // Cleanup on disconnect
+    disconnect() {
+        document.removeEventListener('keydown', this.handleKeyboard)
+        document.removeEventListener('click', this.handleClickOutside)
+    }
+}