Use URL helpers in previews that interact with the server-side (#1693)

.changeset/rude-toes-play.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Use URL helpers in previews that interact with the server-side

demo/config/routes.rb

@@ -9,8 +9,8 @@
     get "/", to: redirect("/lookbook/")
   end
 
-  scope path: Rails.env.production? ? "/view-components" : "/" do
-    get "/auto_complete", to: "auto_complete_test#index"
+  scope path: Rails.env.production? ? "/view-components/rails-app/" : "/" do
+    get "/auto_complete", to: "auto_complete_test#index", as: :autocomplete_index
     resources :toggle_switch, only: [:create]
     resources :nav_list_items, only: [:index]
     resources :multi, only: [:create]

previews/primer/alpha/auto_complete_preview.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "../url_helpers"
+
 module Primer
   module Alpha
     # @label AutoComplete
@@ -12,7 +14,18 @@ class AutoCompletePreview < ViewComponent::Preview
       # @param is_clearable toggle
       def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
@@ -24,7 +37,18 @@ def playground(label_text: "Select a fruit", is_label_visible: true, is_label_in
       # @param is_clearable toggle
       def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
@@ -33,28 +57,60 @@ def default(label_text: "Select a fruit", is_label_visible: true, is_label_inlin
       # @label AutoComplete with non-visible label
       def with_non_visible_label
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-1", list_id: "test-id-1", src: "/auto_complete?version=alpha", is_label_visible: false))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-1",
+            list_id: "test-id-1",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: false
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with inline label
       def with_inline_label
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "test-id-2", src: "/auto_complete?version=alpha", is_label_inline: true))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-2",
+            list_id: "test-id-2",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_inline: true
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with search icon
       def with_icon
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-3", list_id: "test-id-3", src: "/auto_complete?version=alpha", with_icon: true))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-3",
+            list_id: "test-id-3",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            with_icon: true
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with clear button
       def with_clear_button
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-4", list_id: "test-id-4", src: "/auto_complete?version=alpha", is_clearable: true))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-4",
+            list_id: "test-id-4",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_clearable: true
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 

previews/primer/alpha/toggle_switch_preview.rb

@@ -1,37 +1,39 @@
 # frozen_string_literal: true
 
+require_relative "../url_helpers"
+
 module Primer
   module Alpha
     # @label Toggle Switch
     class ToggleSwitchPreview < ViewComponent::Preview
       include ActionView::Helpers::FormTagHelper
 
       def playground
-        render(ToggleSwitch.new(src: "/toggle_switch"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
       end
 
       def default
-        render(ToggleSwitch.new(src: "/toggle_switch"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
       end
 
       def checked
-        render(ToggleSwitch.new(src: "/toggle_switch", checked: true))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true))
       end
 
       def disabled
-        render(ToggleSwitch.new(src: "/toggle_switch", enabled: false))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, enabled: false))
       end
 
       def checked_disabled
-        render(ToggleSwitch.new(src: "/toggle_switch", checked: true, enabled: false))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true, enabled: false))
       end
 
       def small
-        render(ToggleSwitch.new(src: "/toggle_switch", size: :small))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, size: :small))
       end
 
       def with_status_label_position_end
-        render(ToggleSwitch.new(src: "/toggle_switch", status_label_position: :end))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, status_label_position: :end))
       end
 
       def with_a_bad_src
@@ -43,11 +45,11 @@ def with_no_src
       end
 
       def with_csrf_token
-        render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "let_me_in"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
       end
 
       def with_bad_csrf_token
-        render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "i_am_a_criminal"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
       end
     end
   end