RubyGems - rails_onboarding - Versions diffs - 0.6.1 - Mend

rails_onboarding 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

data/app/views/layouts/rails_onboarding/application.html.erb ADDED Viewed

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <%# Without this, mobile Safari renders at a virtual ~980px desktop-width
+      viewport and zooms out to fit the physical screen - everything (text,
+      buttons, spacing) looks shrunk even though the CSS itself is correct. %>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= Rails.application.class.module_parent.name %> Onboarding</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= yield :head %>
+  <%= stylesheet_link_tag "rails_onboarding/application", media: "screen" %>
+  <% if defined?(Propshaft) %>
+    <%# Propshaft doesn't process application.css's Sprockets `require`
+        directives, so each stylesheet needs its own tag or it silently
+        never loads (tooltips, tour, milestones, mobile, etc). %>
+    <%= stylesheet_link_tag "rails_onboarding/tooltips", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/utilities", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/accessibility", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/milestones", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/tour", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/flash_messages", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/progressive_disclosure", media: "screen" %>
+    <%= stylesheet_link_tag "rails_onboarding/mobile", media: "screen" %>
+  <% end %>
+  <% if RailsOnboarding.configuration.include_host_styles %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload", media: "screen" %>
+  <% end %>
+  <%= javascript_include_tag "rails_onboarding/application", "data-turbo-track": "reload", defer: true %>
+</head>
+<body>
+<%# .onboarding-container/.onboarding-content provide the page-level
+    min-height/centering/responsive padding that the stylesheets (see
+    application.css and mobile.css) already define for every onboarding
+    page - without this wrapper, yielded content rendered directly under
+    <body> with zero horizontal padding, which is invisible on wide
+    viewports (there's empty space outside the content's own max-width
+    either way) but runs text edge-to-edge on mobile. %>
+<div class="onboarding-container">
+  <%# .onboarding-container is a three-row grid (auto 1fr auto) - header,
+      content, footer - and this fills the header row. The progress indicator
+      reads @current_step/@progress/@total_steps, which only the onboarding
+      controller assigns; milestones and A/B test pages share this layout and
+      set none of them, so it renders only when that context is present.
+      Putting it here rather than in each step template means host-supplied
+      step templates get it too, without having to know about it. %>
+  <% if @current_step && @total_steps %>
+    <header class="onboarding-header">
+      <%= render "rails_onboarding/onboarding/progress_indicator" %>
+    </header>
+  <% end %>
+  <div class="onboarding-content">
+    <%= yield %>
+  </div>
+</div>
+</body>
+</html>

data/app/views/rails_onboarding/ab_tests/index.html.erb ADDED Viewed

@@ -0,0 +1,209 @@
+<div class="ab-tests-index">
+  <div class="header">
+    <h1>A/B Tests</h1>
+    <p class="subtitle">Manage and monitor your onboarding A/B tests</p>
+  </div>
+  <% if @ab_tests.empty? %>
+    <div class="onboarding-empty-state">
+      <p>No A/B tests configured yet.</p>
+      <p class="onboarding-help-text">Configure A/B tests in your Rails initializer:</p>
+      <pre><code>RailsOnboarding.configure do |config|
+  config.enable_ab_testing = true
+  config.ab_tests = {
+    onboarding_flow: {
+      variants: ['original', 'simplified'],
+      weights: [50, 50],
+      enabled: true
+    }
+  }
+end</code></pre>
+    </div>
+  <% else %>
+    <div class="ab-tests-list">
+      <% @ab_tests.each do |test_name, config| %>
+        <div class="ab-test-card">
+          <div class="ab-test-header">
+            <h2><%= test_name.to_s.titleize %></h2>
+            <span class="status-badge <%= config[:enabled] ? 'enabled' : 'disabled' %>">
+              <%= config[:enabled] ? 'Active' : 'Inactive' %>
+            </span>
+          </div>
+          <div class="ab-test-details">
+            <div class="variants">
+              <h3>Variants</h3>
+              <ul>
+                <% config[:variants].each_with_index do |variant, index| %>
+                  <li>
+                    <%= variant %>
+                    <% if config[:weights] && config[:weights][index] %>
+                      <span class="weight"><%= config[:weights][index] %>%</span>
+                    <% end %>
+                  </li>
+                <% end %>
+              </ul>
+            </div>
+            <div class="actions">
+              <%= link_to 'View Results', results_ab_test_path(test_name), class: 'btn btn-primary' %>
+              <%= link_to 'Details', ab_test_path(test_name), class: 'btn btn-secondary' %>
+              <%= button_to config[:enabled] ? 'Disable' : 'Enable',
+                  toggle_ab_test_path(test_name),
+                  method: :post,
+                  class: 'btn btn-toggle' %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+<style>
+  .ab-tests-index {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+  .header {
+    margin-bottom: 2rem;
+  }
+  .header h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+  .subtitle {
+    color: #666;
+    font-size: 1rem;
+  }
+  .empty-state {
+    background: #f5f5f5;
+    padding: 3rem;
+    border-radius: 8px;
+    text-align: center;
+  }
+  .empty-state .help-text {
+    margin-top: 1rem;
+    color: #666;
+  }
+  .empty-state pre {
+    background: white;
+    padding: 1rem;
+    border-radius: 4px;
+    text-align: left;
+    margin-top: 1rem;
+    overflow-x: auto;
+  }
+  .ab-tests-list {
+    display: grid;
+    gap: 1.5rem;
+  }
+  .ab-test-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1.5rem;
+  }
+  .ab-test-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  .ab-test-header h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+  }
+  .status-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  .status-badge.enabled {
+    background: #d4edda;
+    color: #155724;
+  }
+  .status-badge.disabled {
+    background: #f8d7da;
+    color: #721c24;
+  }
+  .ab-test-details {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .variants h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+  .variants ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .variants li {
+    padding: 0.5rem 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .weight {
+    background: #e9ecef;
+    padding: 0.125rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    margin-left: 0.5rem;
+  }
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .btn {
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+  }
+  .btn-primary {
+    background: #007bff;
+    color: white;
+  }
+  .btn-secondary {
+    background: #6c757d;
+    color: white;
+  }
+  .btn-toggle {
+    background: #ffc107;
+    color: #000;
+  }
+</style>

data/app/views/rails_onboarding/ab_tests/results.html.erb ADDED Viewed

@@ -0,0 +1,253 @@
+<div class="ab-test-results">
+  <div class="header">
+    <h1><%= @test_name.to_s.titleize %> - Results</h1>
+    <%= link_to '← Back to A/B Tests', ab_tests_path, class: 'back-link' %>
+  </div>
+  <div class="results-summary">
+    <h2>Performance by Variant</h2>
+    <div class="variants-comparison">
+      <% @results.each do |variant, metrics| %>
+        <div class="variant-card">
+          <h3><%= variant.to_s.titleize %></h3>
+          <div class="metrics">
+            <div class="metric">
+              <span class="metric-label">Participants</span>
+              <span class="metric-value"><%= metrics[:participants] %></span>
+            </div>
+            <div class="metric">
+              <span class="metric-label">Completions</span>
+              <span class="metric-value"><%= metrics[:completions] %></span>
+            </div>
+            <div class="metric highlight">
+              <span class="metric-label">Conversion Rate</span>
+              <span class="metric-value"><%= metrics[:conversion_rate] %>%</span>
+            </div>
+            <div class="metric">
+              <span class="metric-label">Avg. Time (seconds)</span>
+              <span class="metric-value"><%= metrics[:average_time] %></span>
+            </div>
+            <div class="metric">
+              <span class="metric-label">Skip Rate</span>
+              <span class="metric-value"><%= metrics[:skip_rate] %>%</span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <% if @funnel.present? %>
+    <div class="funnel-analysis">
+      <h2>Funnel Analysis by Variant</h2>
+      <div class="funnel-container">
+        <% @funnel.each do |variant, steps| %>
+          <div class="funnel-variant">
+            <h3><%= variant.to_s.titleize %></h3>
+            <div class="funnel-steps">
+              <% steps.each do |step_name, count| %>
+                <% step = RailsOnboarding.configuration.step_by_name(step_name) %>
+                <div class="funnel-step">
+                  <div class="step-info">
+                    <span class="step-icon"><%= step[:icon] if step %></span>
+                    <span class="step-name"><%= step_name.to_s.titleize %></span>
+                  </div>
+                  <div class="step-count"><%= count %> users</div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+  <div class="winner-recommendation">
+    <% winner = @results.max_by { |_, metrics| metrics[:conversion_rate] } %>
+    <% if winner %>
+      <h2>Recommendation</h2>
+      <div class="recommendation-card">
+        <p>
+          <strong><%= winner[0].to_s.titleize %></strong> variant shows the best performance
+          with a <%= winner[1][:conversion_rate] %>% conversion rate.
+        </p>
+        <% if winner[1][:participants] < 100 %>
+          <p class="onboarding-warning">
+            ⚠️ Note: Sample size is relatively small (<%= winner[1][:participants] %> participants).
+            Consider gathering more data for statistical significance.
+          </p>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>
+<style>
+  .ab-test-results {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+  .header {
+    margin-bottom: 2rem;
+  }
+  .header h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+  .back-link {
+    color: #007bff;
+    text-decoration: none;
+    font-size: 0.875rem;
+  }
+  .results-summary {
+    margin-bottom: 3rem;
+  }
+  .results-summary h2,
+  .funnel-analysis h2,
+  .winner-recommendation h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+  }
+  .variants-comparison {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+  }
+  .variant-card {
+    background: white;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    padding: 1.5rem;
+  }
+  .variant-card h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 2px solid #007bff;
+  }
+  .metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .metric {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+  }
+  .metric.highlight {
+    background: #d4edda;
+    font-weight: 600;
+  }
+  .metric-label {
+    font-size: 0.875rem;
+    color: #666;
+  }
+  .metric-value {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #000;
+  }
+  .funnel-analysis {
+    margin-bottom: 3rem;
+  }
+  .funnel-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 2rem;
+  }
+  .funnel-variant {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1.5rem;
+  }
+  .funnel-variant h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+  .funnel-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .funnel-step {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: linear-gradient(to right, #007bff 0%, #007bff calc(var(--progress, 0) * 1%), #f8f9fa calc(var(--progress, 0) * 1%));
+    border-radius: 4px;
+    border: 1px solid #ddd;
+  }
+  .step-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .step-icon {
+    font-size: 1.25rem;
+  }
+  .step-name {
+    font-weight: 500;
+  }
+  .step-count {
+    font-weight: 600;
+    color: #007bff;
+  }
+  .winner-recommendation {
+    background: #fff3cd;
+    border: 2px solid #ffc107;
+    border-radius: 8px;
+    padding: 1.5rem;
+  }
+  .recommendation-card p {
+    margin: 0.5rem 0;
+  }
+  .warning {
+    color: #856404;
+    font-style: italic;
+  }
+</style>

data/app/views/rails_onboarding/admin/ab_tests/_ab_test_card.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<div class="admin-ab-test-card">
+  <div class="admin-ab-test-header">
+    <h3 class="admin-ab-test-title"><%= test[:name] %></h3>
+    <span class="admin-badge admin-badge-<%= test[:enabled] ? 'active' : 'draft' %>">
+      <%= test[:enabled] ? 'Active' : 'Inactive' %>
+    </span>
+  </div>
+  <div class="admin-ab-test-meta">
+    <div class="admin-ab-test-meta-item">
+      <strong>Variants:</strong> <%= test[:variants].join(', ') %>
+    </div>
+  </div>
+  <div class="admin-ab-test-actions">
+    <%= link_to "View Results", admin_ab_test_path(test[:name]), class: "admin-btn admin-btn-sm admin-btn-secondary" %>
+    <% if test[:enabled] %>
+      <%= button_to "Stop", stop_admin_ab_test_path(test[:name]), method: :post, class: "admin-btn admin-btn-sm admin-btn-warning" %>
+    <% else %>
+      <%= button_to "Start", start_admin_ab_test_path(test[:name]), method: :post, class: "admin-btn admin-btn-sm admin-btn-success" %>
+    <% end %>
+  </div>
+</div>

data/app/views/rails_onboarding/admin/ab_tests/index.html.erb ADDED Viewed

@@ -0,0 +1,57 @@
+<% content_for :page_title, "A/B Tests" %>
+<!-- Stats -->
+<div class="admin-stats-grid admin-stats-compact">
+  <div class="admin-stat-card">
+    <div class="admin-stat-label">Active Tests</div>
+    <div class="admin-stat-value"><%= @active_tests.count %></div>
+  </div>
+  <div class="admin-stat-card">
+    <div class="admin-stat-label">Inactive Tests</div>
+    <div class="admin-stat-value"><%= @inactive_tests.count %></div>
+  </div>
+  <div class="admin-stat-card">
+    <div class="admin-stat-label">Total Tests</div>
+    <div class="admin-stat-value"><%= @ab_tests.count %></div>
+  </div>
+</div>
+<!-- Active Tests (those on the current page; the stats above count them all) -->
+<% if @page_active_tests.any? %>
+  <div class="admin-section">
+    <h2 class="admin-section-title">Active Tests</h2>
+    <div class="admin-ab-tests-grid">
+      <% @page_active_tests.each do |test| %>
+        <%= render 'ab_test_card', test: test %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+<!-- Inactive Tests -->
+<% if @page_inactive_tests.any? %>
+  <div class="admin-section">
+    <h2 class="admin-section-title">Inactive Tests</h2>
+    <div class="admin-ab-tests-grid">
+      <% @page_inactive_tests.each do |test| %>
+        <%= render 'ab_test_card', test: test %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+<!-- Pagination -->
+<% if @pagy.count.positive? %>
+  <div class="admin-pagination">
+    <%= raw @pagy.info_tag(item_name: "tests") %>
+    <%= raw @pagy.series_nav if @pagy.pages > 1 %>
+  </div>
+<% end %>
+<% if @ab_tests.empty? %>
+  <div class="admin-empty-state-large">
+    <div class="admin-empty-icon">🧪</div>
+    <h3>No A/B Tests Configured</h3>
+    <p>Define A/B tests in your <code>config/initializers/rails_onboarding.rb</code> via <code>config.ab_tests</code> to manage them here.</p>
+  </div>
+<% end %>

data/app/views/rails_onboarding/admin/ab_tests/show.html.erb ADDED Viewed

@@ -0,0 +1,41 @@
+<% content_for :page_title, @test_name %>
+<% content_for :header_actions do %>
+  <%= link_to "← Back to A/B Tests", admin_ab_tests_path, class: "admin-btn admin-btn-secondary" %>
+  <% if @test_config[:enabled] %>
+    <%= button_to "Stop", stop_admin_ab_test_path(@test_name), method: :post, class: "admin-btn admin-btn-warning" %>
+  <% else %>
+    <%= button_to "Start", start_admin_ab_test_path(@test_name), method: :post, class: "admin-btn admin-btn-success" %>
+  <% end %>
+  <%= link_to "Export CSV", export_admin_ab_test_path(@test_name, format: :csv), class: "admin-btn admin-btn-secondary" %>
+<% end %>
+<div class="admin-card">
+  <div class="admin-card-header">
+    <h3 class="admin-card-title">Results by Variant</h3>
+  </div>
+  <div class="admin-card-body">
+    <table class="admin-table">
+      <thead>
+        <tr>
+          <th>Variant</th>
+          <th>Participants</th>
+          <th>Completions</th>
+          <th>Conversion Rate</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @results.each do |variant, data| %>
+          <tr>
+            <td><%= variant %></td>
+            <td><%= data[:participants] %></td>
+            <td><%= data[:completions] %></td>
+            <td><%= data[:conversion_rate] %>%</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>