rails_onboarding 0.6.1

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+require "bundler/gem_tasks"

data/app/assets/javascripts/rails_onboarding/admin/chart_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Chart controller
+// Handles chart animations and interactions
+export default class extends Controller {
+  static targets = ["bar"]
+
+  connect() {
+    this.animateBars()
+  }
+
+  animateBars() {
+    if (!this.hasBarTarget) return
+
+    this.barTargets.forEach((bar, index) => {
+      const finalHeight = bar.style.height
+      bar.style.height = '0%'
+
+      setTimeout(() => {
+        bar.style.transition = 'height 0.5s ease-out'
+        bar.style.height = finalHeight
+      }, index * 100)
+    })
+  }
+}

data/app/assets/javascripts/rails_onboarding/admin/filter_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Filter controller
+// Handles filtering and search functionality
+export default class extends Controller {
+  static targets = ["searchInput", "statusSelect", "table", "row"]
+
+  connect() {
+    this.filterRows()
+  }
+
+  filter() {
+    this.filterRows()
+  }
+
+  filterRows() {
+    if (!this.hasRowTarget) return
+
+    const searchTerm = this.hasSearchInputTarget ?
+      this.searchInputTarget.value.toLowerCase() : ''
+
+    const statusFilter = this.hasStatusSelectTarget ?
+      this.statusSelectTarget.value : ''
+
+    this.rowTargets.forEach(row => {
+      const rowText = row.textContent.toLowerCase()
+      const rowStatus = row.dataset.status || ''
+
+      const matchesSearch = searchTerm === '' || rowText.includes(searchTerm)
+      const matchesStatus = statusFilter === '' || rowStatus === statusFilter
+
+      if (matchesSearch && matchesStatus) {
+        row.style.display = ''
+      } else {
+        row.style.display = 'none'
+      }
+    })
+  }
+
+  reset() {
+    if (this.hasSearchInputTarget) {
+      this.searchInputTarget.value = ''
+    }
+    if (this.hasStatusSelectTarget) {
+      this.statusSelectTarget.selectedIndex = 0
+    }
+    this.filterRows()
+  }
+}

data/app/assets/javascripts/rails_onboarding/admin/flash_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Flash message controller
+// Handles auto-dismissing flash messages
+export default class extends Controller {
+  connect() {
+    // Auto-dismiss after 5 seconds
+    setTimeout(() => {
+      this.dismiss()
+    }, 5000)
+  }
+
+  dismiss() {
+    this.element.style.transition = 'opacity 0.3s ease-out'
+    this.element.style.opacity = '0'
+
+    setTimeout(() => {
+      this.element.remove()
+    }, 300)
+  }
+}

data/app/assets/javascripts/rails_onboarding/admin/flow_editor_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Flow editor controller
+// Handles dynamic step management in flow editor
+export default class extends Controller {
+  static targets = ["stepsContainer"]
+
+  connect() {
+    this.stepIndex = this.getMaxStepIndex()
+  }
+
+  addStep(event) {
+    event.preventDefault()
+
+    this.stepIndex++
+    const stepNumber = this.stepIndex + 1
+
+    const template = document.getElementById('step-template')
+    if (!template) return
+
+    const stepHtml = template.innerHTML
+      .replace(/__INDEX__/g, this.stepIndex)
+      .replace(/__NUMBER__/g, stepNumber)
+
+    const stepsList = document.getElementById('steps-list')
+    if (!stepsList) return
+
+    // Remove empty state message if it exists
+    const emptyMessage = stepsList.querySelector('.admin-text-muted')
+    if (emptyMessage) {
+      emptyMessage.remove()
+    }
+
+    stepsList.insertAdjacentHTML('beforeend', stepHtml)
+    this.updateStepNumbers()
+  }
+
+  removeStep(event) {
+    event.preventDefault()
+
+    if (!confirm('Are you sure you want to remove this step?')) {
+      return
+    }
+
+    const stepItem = event.target.closest('.admin-step-item')
+    if (!stepItem) return
+
+    stepItem.remove()
+    this.updateStepNumbers()
+
+    // Show empty message if no steps remain
+    const stepsList = document.getElementById('steps-list')
+    if (stepsList && stepsList.children.length === 0) {
+      stepsList.innerHTML = '<p class="admin-text-muted">No steps added yet. Click "Add Step" to get started.</p>'
+    }
+  }
+
+  updateStepNumbers() {
+    const stepItems = document.querySelectorAll('.admin-step-item')
+    stepItems.forEach((item, index) => {
+      const stepNumber = item.querySelector('.admin-step-number')
+      if (stepNumber) {
+        stepNumber.textContent = index + 1
+      }
+
+      const orderInput = item.querySelector('input[type="hidden"][name*="[order]"]')
+      if (orderInput) {
+        orderInput.value = index
+      }
+    })
+  }
+
+  getMaxStepIndex() {
+    const stepItems = document.querySelectorAll('.admin-step-item')
+    let maxIndex = -1
+
+    stepItems.forEach(item => {
+      const index = parseInt(item.dataset.stepIndex || '0')
+      if (index > maxIndex) {
+        maxIndex = index
+      }
+    })
+
+    return maxIndex
+  }
+}

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

@@ -0,0 +1,231 @@
+/**
+ * Rails Onboarding JavaScript Application
+ *
+ * This file provides flexible integration with different JavaScript bundling strategies:
+ * - Stimulus (via importmap or bundler)
+ * - Standalone (without Stimulus)
+ * - ESBuild/Webpack/Vite
+ *
+ * The code automatically detects the environment and adapts accordingly.
+ *
+ * Compatibility:
+ * - Works with Asset Pipeline (Sprockets)
+ * - Works with Propshaft
+ * - Works with importmap-rails
+ * - Works with esbuild, webpack, vite, etc.
+ */
+
+(function() {
+  'use strict';
+
+  // Initialize Stimulus application if available
+  function initializeStimulusIfAvailable() {
+    // Check if Stimulus is already loaded
+    if (window.Stimulus) {
+      console.log('RailsOnboarding: Using existing Stimulus application');
+      return window.Stimulus;
+    }
+
+    // Check if we can create a new Stimulus application
+    if (typeof Application !== 'undefined') {
+      const app = Application.start();
+      app.debug = false;
+      window.Stimulus = app;
+      console.log('RailsOnboarding: Created new Stimulus application');
+      return app;
+    }
+
+    console.debug('RailsOnboarding: Stimulus not available, using standalone mode');
+    return null;
+  }
+
+  // Auto-initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      initializeStimulusIfAvailable();
+    });
+  } else {
+    initializeStimulusIfAvailable();
+  }
+})();
+
+// Global utilities for onboarding
+window.RailsOnboarding = {
+    // Show a global tooltip
+    showTooltip: function(element, content, options = {}) {
+        const tooltip = new TooltipController()
+        tooltip.element = element
+        tooltip.featureValue = options.feature || ''
+        tooltip.positionValue = options.position || 'top'
+        tooltip.delayValue = options.delay || 0
+        tooltip.dismissibleValue = options.dismissible !== false
+
+        // Override content method
+        tooltip.getTooltipContent = () => content
+
+        tooltip.connect()
+        tooltip.forceShow()
+
+        return tooltip
+    },
+
+    // Hide all tooltips
+    hideAllTooltips: function() {
+        document.querySelectorAll('.onboarding-tooltip').forEach(tooltip => {
+            if (tooltip.parentNode) {
+                tooltip.parentNode.removeChild(tooltip)
+            }
+        })
+    },
+
+    // Restart onboarding (if supported by backend)
+    restartOnboarding: function() {
+        if (confirm('Are you sure you want to restart the onboarding process?')) {
+            if (typeof Rails !== 'undefined' && Rails.ajax) {
+                Rails.ajax({
+                    url: '/rails_onboarding/onboarding/restart',
+                    type: 'POST',
+                    headers: {
+                        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+                    },
+                    success: function() {
+                        window.location.reload()
+                    },
+                    error: function() {
+                        alert('Failed to restart onboarding. Please try again.')
+                    }
+                })
+            }
+        }
+    },
+
+    // Skip to end of onboarding
+    skipToEnd: function() {
+        if (confirm('Are you sure you want to skip the remaining onboarding steps?')) {
+            const skipForm = document.createElement('form')
+            skipForm.method = 'POST'
+            skipForm.action = '/rails_onboarding/onboarding/complete'
+
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
+            if (csrfToken) {
+                const csrfInput = document.createElement('input')
+                csrfInput.type = 'hidden'
+                csrfInput.name = 'authenticity_token'
+                csrfInput.value = csrfToken
+                skipForm.appendChild(csrfInput)
+            }
+
+            document.body.appendChild(skipForm)
+            skipForm.submit()
+        }
+    },
+
+    // Get current onboarding progress
+    getProgress: function() {
+        const progressController = document.querySelector('[data-controller*="progress"]')
+        if (progressController) {
+            return {
+                current: progressController.dataset.progressCurrentStepValue || 1,
+                total: progressController.dataset.progressTotalStepsValue || 4,
+                percentage: progressController.dataset.progressValue || 0
+            }
+        }
+        return null
+    },
+
+    // Add custom step validation
+    addStepValidation: function(stepName, validationFunction) {
+        const onboardingController = document.querySelector('[data-controller*="onboarding"]')
+        if (onboardingController && onboardingController.stimulus) {
+            const controller = onboardingController.stimulus
+            if (!controller.customValidations) {
+                controller.customValidations = {}
+            }
+            controller.customValidations[stepName] = validationFunction
+        }
+    }
+}
+
+// Auto-initialize tooltips for elements with data-tooltip attribute
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('[data-tooltip]').forEach(element => {
+        const tooltipText = element.dataset.tooltip
+        const feature = element.dataset.tooltipFeature
+        const position = element.dataset.tooltipPosition || 'top'
+        const delay = parseInt(element.dataset.tooltipDelay) || 0
+
+        if (tooltipText && !element.dataset.controllerAdded) {
+            element.dataset.controller = (element.dataset.controller || '') + ' tooltip'
+            element.dataset.tooltipFeatureValue = feature || ''
+            element.dataset.tooltipPositionValue = position
+            element.dataset.tooltipDelayValue = delay
+            element.dataset.tooltipText = tooltipText
+            element.dataset.controllerAdded = 'true'
+
+            // Re-initialize Stimulus for this element
+            application.register("tooltip", TooltipController)
+        }
+    })
+})
+
+// Handle onboarding completion celebration
+document.addEventListener('onboarding:completed', function(event) {
+    // Show celebration animation or message
+    const celebration = document.createElement('div')
+    celebration.innerHTML = `
+    <div style="
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: white;
+      padding: 2rem;
+      border-radius: 1rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+      text-align: center;
+      z-index: 9999;
+    ">
+      <div style="font-size: 3rem; margin-bottom: 1rem;">🎉</div>
+      <h2 style="margin-bottom: 1rem; color: #1f2937;">Congratulations!</h2>
+      <p style="color: #6b7280; margin-bottom: 1.5rem;">You've completed the onboarding process.</p>
+      <button onclick="this.parentElement.parentElement.remove()" style="
+        background: #6366f1;
+        color: white;
+        border: none;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        font-weight: 600;
+      ">Get Started</button>
+    </div>
+  `
+
+    document.body.appendChild(celebration)
+
+    // Auto-remove after 5 seconds
+    setTimeout(() => {
+        if (celebration.parentNode) {
+            celebration.remove()
+        }
+    }, 5000)
+})
+
+// Handle page transitions during onboarding
+document.addEventListener('turbo:before-visit', function(event) {
+    // Hide tooltips before navigation
+    RailsOnboarding.hideAllTooltips()
+})
+
+// Re-initialize onboarding after Turbo navigation
+document.addEventListener('turbo:load', function() {
+    // Refresh any dynamic onboarding elements
+    const onboardingContainer = document.querySelector('.onboarding-container')
+    if (onboardingContainer) {
+        onboardingContainer.setAttribute('data-step-changed', 'true')
+
+        // Remove the attribute after animation
+        setTimeout(() => {
+            onboardingContainer.removeAttribute('data-step-changed')
+        }, 300)
+    }
+})

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

@@ -0,0 +1,177 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["confetti"]
+  // milestonesPath is supplied by the view. The engine is mounted at a
+  // host-chosen prefix, so a literal "/milestones" is wrong in most apps.
+  static values = { milestone: Object, milestonesPath: String }
+
+  connect() {
+    this.renderContentIfEmpty()
+    this.showCelebration()
+  }
+
+  // The celebration is normally rendered server-side by
+  // rails_onboarding/shared/_milestone_celebration. It can also be injected
+  // at runtime by milestone_dashboard_controller, which knows only the
+  // milestone's JSON - that injected element is an empty shell, and without
+  // this it showed as a full-screen backdrop containing nothing, with no
+  // dismiss control and no confetti container. Build the same structure the
+  // partial produces so the existing CSS applies either way.
+  renderContentIfEmpty() {
+    if (this.element.querySelector(".celebration-modal")) return
+
+    const milestone = this.hasMilestoneValue ? this.milestoneValue : {}
+    const el = (tag, className, text) => {
+      const node = document.createElement(tag)
+      if (className) node.className = className
+      if (text !== undefined && text !== null) node.textContent = text
+      return node
+    }
+
+    const backdrop = el("div", "celebration-backdrop")
+    backdrop.dataset.action = "click->milestone-celebration#dismiss"
+
+    const iconContainer = el("div", "achievement-icon-container")
+    iconContainer.append(el("div", "achievement-icon-glow"),
+                         el("div", "achievement-icon", milestone.icon))
+
+    const points = el("div", "points-earned")
+    points.append(el("span", "points-label", "You earned"),
+                  el("span", "points-value", `+${milestone.points ?? 0}`),
+                  el("span", "points-label", "points!"))
+
+    const announcement = el("div", "achievement-announcement")
+    announcement.append(iconContainer,
+                        el("h2", "achievement-title", "Milestone Achieved!"),
+                        el("h3", "milestone-name", milestone.title),
+                        el("p", "milestone-description", milestone.description),
+                        points)
+
+    const confetti = el("div", "confetti-container")
+    confetti.dataset.milestoneCelebrationTarget = "confetti"
+
+    const continueBtn = el("button", "onboarding-btn onboarding-btn-primary", "Continue")
+    continueBtn.type = "button"
+    continueBtn.dataset.action = "click->milestone-celebration#dismiss"
+
+    const actions = el("div", "celebration-actions")
+    actions.append(continueBtn)
+
+    // Only offer "View All" when the view told us where that lives.
+    if (this.hasMilestonesPathValue && this.milestonesPathValue) {
+      const allBtn = el("button", "onboarding-btn onboarding-btn-secondary", "View All Achievements")
+      allBtn.type = "button"
+      allBtn.dataset.action = "click->milestone-celebration#viewAllMilestones"
+      actions.append(allBtn)
+    }
+
+    const content = el("div", "celebration-content")
+    content.append(confetti, announcement, actions)
+
+    const modal = el("div", "celebration-modal")
+    modal.append(content)
+
+    this.element.append(backdrop, modal)
+  }
+
+  showCelebration() {
+    // Show the modal with animation. .is-hidden/.is-fading (and the
+    // opacity transition) live in milestones.css, so this only toggles
+    // classes rather than writing display/opacity/transition inline.
+    this.element.classList.remove("is-hidden")
+    this.element.classList.add("is-fading")
+
+    // Trigger animations
+    requestAnimationFrame(() => {
+      this.element.classList.remove("is-fading")
+
+      // Start confetti animation
+      this.startConfetti()
+
+      // Auto-dismiss after 5 seconds if user doesn't interact
+      this.autoDismissTimer = setTimeout(() => {
+        this.dismiss()
+      }, 8000)
+    })
+  }
+
+  startConfetti() {
+    // Fall back to a direct lookup: when renderContentIfEmpty() has just
+    // inserted the container, Stimulus may not have registered the target yet.
+    const confettiContainer = this.hasConfettiTarget
+      ? this.confettiTarget
+      : this.element.querySelector(".confetti-container")
+    if (!confettiContainer) return
+    const colors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7']
+    
+    // Create confetti pieces
+    for (let i = 0; i < 50; i++) {
+      setTimeout(() => this.createConfettiPiece(confettiContainer, colors), i * 50)
+    }
+  }
+
+  createConfettiPiece(container, colors) {
+    const confetti = document.createElement('div')
+    confetti.className = 'confetti-piece'
+    
+    // Random properties
+    const color = colors[Math.floor(Math.random() * colors.length)]
+    const size = Math.random() * 8 + 4
+    const left = Math.random() * 100
+    const animationDuration = Math.random() * 2 + 2
+    const rotation = Math.random() * 360
+    
+    confetti.style.cssText = `
+      position: absolute;
+      width: ${size}px;
+      height: ${size}px;
+      background-color: ${color};
+      left: ${left}%;
+      top: -10px;
+      border-radius: 50%;
+      animation: onboarding-confetti-fall ${animationDuration}s linear forwards;
+      transform: rotate(${rotation}deg);
+      pointer-events: none;
+    `
+    
+    container.appendChild(confetti)
+    
+    // Remove confetti piece after animation
+    setTimeout(() => {
+      if (confetti.parentNode) {
+        confetti.parentNode.removeChild(confetti)
+      }
+    }, animationDuration * 1000)
+  }
+
+  dismiss() {
+    if (this.autoDismissTimer) {
+      clearTimeout(this.autoDismissTimer)
+    }
+
+    this.element.classList.add("is-fading")
+
+    setTimeout(() => {
+      this.element.classList.add("is-hidden")
+      // Remove the element from DOM if it was dynamically added
+      if (this.element.dataset.temporary === "true") {
+        this.element.remove()
+      }
+    }, 300)
+  }
+
+  viewAllMilestones() {
+    this.dismiss()
+    // Supplied by the view via the engine's route helper; a literal
+    // "/milestones" only resolves when the engine is mounted at root.
+    if (this.hasMilestonesPathValue && this.milestonesPathValue) {
+      window.location.href = this.milestonesPathValue
+    }
+  }
+
+  // Prevent dismissal when clicking inside the modal
+  preventDismiss(event) {
+    event.stopPropagation()
+  }
+}