Consolidate unique_id and unique_alpine_store_key into instance_key

The two params were doing overlapping namespacing work (DOM ids and
Alpine store keys) for the same purpose: letting multiple instances of
a component coexist on a single page. Collapse to one param across
RadioButtonsComponent, CheckboxesComponent, and ConditionalComponent.

Author: dfl

app/components/checkboxes_component.html.erb

@@ -9,16 +9,16 @@
              "x-model" => "$store.#{store_key}",
              :class => "cfa-checkbox #{box_classes} rounded #{border_class}"
            }
-           if @unique_id
-             input_id = "#{@form.object_name}_#{@method}_#{item_value}_#{@unique_id}"
+           if @instance_key.present?
+             input_id = "#{@form.object_name}_#{@method}_#{item_value}_#{@instance_key}"
              checkbox_attrs[:id] = input_id
            end
            checkbox_attrs["x-init"] = "$nextTick(() => $el.indeterminate = true)" if item_state == :indeterminate
            checkbox_attrs[:disabled] = true if item_state == :disabled
            content_tag :div, class: "checkbox_item" do
              concat checkbox_wrap(checkbox_item.checkbox(checkbox_attrs), small: @small)
              label_opts = {}
-             label_opts[:for] = input_id if @unique_id
+             label_opts[:for] = input_id if @instance_key.present?
              label_opts[:class] = "text-text-disabled" if item_state == :disabled
              concat(label_opts.empty? ? checkbox_item.label : checkbox_item.label(label_opts))
            end

app/components/checkboxes_component.rb

@@ -3,7 +3,9 @@
 class CheckboxesComponent < AttributeBoundFormElementComponent
   ALLOWED_ITEM_STATES = [:disabled, :indeterminate].freeze
 
-  def initialize(form:, method:, collection:, item_value_method:, item_label_method:, small: false, warning_message: nil, item_states: {}, unique_id: nil)
+  # instance_key namespaces both the Alpine store key and the input id/label-for,
+  # so multiple instances of this component can coexist on a single page.
+  def initialize(form:, method:, collection:, item_value_method:, item_label_method:, small: false, warning_message: nil, item_states: {}, instance_key: nil)
     super(form:, method:)
     @collection = collection
     @item_value_method = item_value_method
@@ -13,7 +15,7 @@ def initialize(form:, method:, collection:, item_value_method:, item_label_metho
     @item_states = item_states.transform_keys(&:to_s).transform_values(&:to_sym)
     invalid = @item_states.values - ALLOWED_ITEM_STATES
     raise ArgumentError, "Unknown item_states: #{invalid.inspect}. Allowed: #{ALLOWED_ITEM_STATES.inspect}" if invalid.any?
-    @unique_id = unique_id
+    @instance_key = instance_key
   end
 
   private
@@ -45,7 +47,7 @@ def state_for(value)
   end
 
   def store_key
-    suffix = @unique_id ? "_#{@unique_id}" : ""
+    suffix = @instance_key.present? ? "_#{@instance_key}" : ""
     "#{@method}#{suffix}"
   end
 end

app/components/conditional_component.html.erb

@@ -1,6 +1,6 @@
 <div x-data="{condition: false}"
-     x-effect="condition = $store.<%= @method.to_s + @unique_alpine_store_key.to_s %> === '<%= @value %>' ||
-                           (Array.isArray($store.<%= @method.to_s + @unique_alpine_store_key.to_s %>) && $store.<%= @method.to_s + @unique_alpine_store_key.to_s %>.includes('<%= @value %>'))">
+     x-effect="condition = $store.<%= store_key %> === '<%= @value %>' ||
+                           (Array.isArray($store.<%= store_key %>) && $store.<%= store_key %>.includes('<%= @value %>'))">
   <p class="sr-only" aria-live="polite" role="status"
      x-text="'<%= content_description %> is now ' + (condition ? 'visible' : 'hidden')">
   </p>

app/components/conditional_component.rb

@@ -1,16 +1,24 @@
 # frozen_string_literal: true
 
 class ConditionalComponent < ViewComponent::Base
-  def initialize(method:, value:, content_description: nil, unique_alpine_store_key: "")
+  # instance_key must match the instance_key passed to the corresponding
+  # RadioButtonsComponent or CheckboxesComponent so this conditional reads the
+  # right Alpine store when multiple instances coexist on a page.
+  def initialize(method:, value:, content_description: nil, instance_key: nil)
     @method = method
     @value = value
     @content_description = content_description
-    @unique_alpine_store_key = unique_alpine_store_key
+    @instance_key = instance_key
   end
 
   private
 
   def content_description
     @content_description || "Conditional section"
   end
+
+  def store_key
+    suffix = @instance_key.present? ? "_#{@instance_key}" : ""
+    "#{@method}#{suffix}"
+  end
 end

app/components/radio_buttons_component.html.erb

@@ -11,12 +11,12 @@
              "x-model" => "$store.#{store_key}",
              :class => radio_classes
            }
-           if @unique_id
-             input_id = "#{@form.object_name}_#{@method}_#{item_value}_#{@unique_id}"
+           if @instance_key.present?
+             input_id = "#{@form.object_name}_#{@method}_#{item_value}_#{@instance_key}"
              radio_attrs[:id] = input_id
            end
            label_opts = {}
-           label_opts[:for] = input_id if @unique_id
+           label_opts[:for] = input_id if @instance_key.present?
            content_tag :div, class: "radio_button_item" do
              concat radio_button_item.radio_button(radio_attrs)
              concat(label_opts.empty? ? radio_button_item.label : radio_button_item.label(label_opts))

app/components/radio_buttons_component.rb

@@ -1,15 +1,16 @@
 # frozen_string_literal: true
 
 class RadioButtonsComponent < AttributeBoundFormElementComponent
-  def initialize(form:, method:, collection:, item_value_method:, item_label_method:, unique_alpine_store_key: "", layout: :vertical, small: false, warning_message: nil, unique_id: nil, legend: nil)
+  # instance_key namespaces both the Alpine store key and the input id/label-for,
+  # so multiple instances of this component can coexist on a single page.
+  def initialize(form:, method:, collection:, item_value_method:, item_label_method:, instance_key: nil, layout: :vertical, small: false, warning_message: nil, legend: nil)
     super(form:, method:)
     @collection = collection
     @item_value_method = item_value_method
     @item_label_method = item_label_method
-    @unique_alpine_store_key = unique_alpine_store_key
+    @instance_key = instance_key
     @small = small
     @warning_message = warning_message
-    @unique_id = unique_id
     @legend = legend
     @layout =
       case layout
@@ -45,7 +46,7 @@ def radio_classes
   end
 
   def store_key
-    suffix = @unique_id ? "_#{@unique_id}" : @unique_alpine_store_key.to_s
+    suffix = @instance_key.present? ? "_#{@instance_key}" : ""
     "#{@method}#{suffix}"
   end
 end

test/components/checkboxes_component_test.rb

@@ -133,20 +133,20 @@ def test_item_states_rejects_unknown_state
     end
   end
 
-  def test_unique_id_namespaces_input_ids_and_label_for
+  def test_instance_key_namespaces_input_ids_and_label_for
     render_inline(CheckboxesComponent.new(
       form: build_form,
       method: :checkboxes_field,
       collection: simple_collection,
       item_value_method: :value,
       item_label_method: :label,
-      unique_id: "abc"
+      instance_key: "abc"
     ))
     assert_selector "input[type='checkbox'][id$='_abc']", count: 2
     assert_selector "label[for$='_abc']", count: 2
   end
 
-  def test_no_unique_id_keeps_default_input_ids
+  def test_no_instance_key_keeps_default_input_ids
     render_inline(CheckboxesComponent.new(
       form: build_form,
       method: :checkboxes_field,

test/components/previews/checkboxes_component_preview.rb

@@ -1,79 +1,79 @@
 class CheckboxesComponentPreview < FormComponentPreview
   # @!group Default
   def default
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, unique_id: "default"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, instance_key: "default"))
   end
 
   def prefilled
     custom_model = TestModel.new(favorite_fruits: ["apple", "orange"])
-    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, unique_id: "prefilled"))
+    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, instance_key: "prefilled"))
   end
 
   def with_error
     custom_model = TestModel.new
     custom_model.valid?
-    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, unique_id: "with_error"))
+    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, instance_key: "with_error"))
   end
 
   def with_warning
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", unique_id: "with_warning"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", instance_key: "with_warning"))
   end
 
   def indeterminate
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :indeterminate}, unique_id: "indeterminate"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :indeterminate}, instance_key: "indeterminate"))
   end
 
   def disabled_item
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :disabled}, unique_id: "disabled_item"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :disabled}, instance_key: "disabled_item"))
   end
 
   def mixed_states
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :indeterminate, "apple" => :disabled}, unique_id: "mixed_states"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :indeterminate, "apple" => :disabled}, instance_key: "mixed_states"))
   end
 
   def mixed_states_with_error_and_warning
     custom_model = TestModel.new
     custom_model.valid?
-    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", item_states: {"orange" => :indeterminate, "apple" => :disabled}, unique_id: "mixed_states_with_error_and_warning"))
+    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", item_states: {"orange" => :indeterminate, "apple" => :disabled}, instance_key: "mixed_states_with_error_and_warning"))
   end
   # @!endgroup
 
   # @!group Small
   def small_default
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, unique_id: "small_default"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, instance_key: "small_default"))
   end
 
   def small_prefilled
     custom_model = TestModel.new(favorite_fruits: ["apple", "orange"])
-    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, unique_id: "small_prefilled"))
+    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, instance_key: "small_prefilled"))
   end
 
   def small_with_error
     custom_model = TestModel.new
     custom_model.valid?
-    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, unique_id: "small_with_error"))
+    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, instance_key: "small_with_error"))
   end
 
   def small_with_warning
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, warning_message: "Message goes here.", unique_id: "small_with_warning"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, warning_message: "Message goes here.", instance_key: "small_with_warning"))
   end
 
   def small_indeterminate
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, item_states: {"orange" => :indeterminate}, unique_id: "small_indeterminate"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, item_states: {"orange" => :indeterminate}, instance_key: "small_indeterminate"))
   end
 
   def small_disabled_item
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, item_states: {"orange" => :disabled}, unique_id: "small_disabled_item"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, item_states: {"orange" => :disabled}, instance_key: "small_disabled_item"))
   end
 
   def small_mixed_states
-    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, item_states: {"orange" => :indeterminate, "apple" => :disabled}, unique_id: "small_mixed_states"))
+    render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, item_states: {"orange" => :indeterminate, "apple" => :disabled}, instance_key: "small_mixed_states"))
   end
 
   def small_mixed_states_with_error_and_warning
     custom_model = TestModel.new
     custom_model.valid?
-    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, warning_message: "Message goes here.", item_states: {"orange" => :indeterminate, "apple" => :disabled}, unique_id: "small_mixed_states_with_error_and_warning"))
+    render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, small: true, warning_message: "Message goes here.", item_states: {"orange" => :indeterminate, "apple" => :disabled}, instance_key: "small_mixed_states_with_error_and_warning"))
   end
   # @!endgroup
 end

test/components/previews/conditional_component_preview.rb

@@ -27,6 +27,6 @@ def prefilled_combobox
   end
   # @!endgroup
 
-  def unique_alpine_store_key
+  def instance_key
   end
 end

…preview/unique_alpine_store_key.html.erb …_component_preview/instance_key.html.erbtest/components/previews/conditional_component_preview/unique_alpine_store_key.html.erb renamed to test/components/previews/conditional_component_preview/instance_key.html.erb test/components/previews/conditional_component_preview/unique_alpine_store_key.html.erb renamed to test/components/previews/conditional_component_preview/instance_key.html.erb

@@ -1,23 +1,23 @@
 <p>
   When two forms on the same page share a field with the same name, they would normally share
   a single Alpine store, causing each form's ConditionalComponent to react to the other form's
-  selection. Passing a <code>unique_alpine_store_key</code> to both RadioButtonsComponent and
+  selection. Passing an <code>instance_key</code> to both RadioButtonsComponent and
   ConditionalComponent scopes each pair to its own store so they operate independently. This
   is relevant for forms that update primary and secondary filers with the same-named attribute.
 </p>
 
 <h2>Form 1</h2>
 <%= form_with url: "/", method: :post, model: FormComponentPreview::TestModel.new do |f| %>
-  <%= render RadioButtonsComponent.new(form: f, method: :pineapple_pizza_preference, collection: FormComponentPreview.yes_no_options, item_value_method: :value, item_label_method: :label, unique_alpine_store_key: "_form1") %>
-  <%= render ConditionalComponent.new(method: :pineapple_pizza_preference, value: "yes", content_description: "Followup question for form 1", unique_alpine_store_key: "_form1") do %>
+  <%= render RadioButtonsComponent.new(form: f, method: :pineapple_pizza_preference, collection: FormComponentPreview.yes_no_options, item_value_method: :value, item_label_method: :label, instance_key: "form1") %>
+  <%= render ConditionalComponent.new(method: :pineapple_pizza_preference, value: "yes", content_description: "Followup question for form 1", instance_key: "form1") do %>
     But why!?
   <% end %>
 <% end %>
 
 <h2>Form 2</h2>
 <%= form_with url: "/", method: :post, model: FormComponentPreview::TestModel.new do |f| %>
-  <%= render RadioButtonsComponent.new(form: f, method: :pineapple_pizza_preference, collection: FormComponentPreview.yes_no_options, item_value_method: :value, item_label_method: :label, unique_alpine_store_key: "_form2") %>
-  <%= render ConditionalComponent.new(method: :pineapple_pizza_preference, value: "yes", content_description: "Followup question for form 2", unique_alpine_store_key: "_form2") do %>
+  <%= render RadioButtonsComponent.new(form: f, method: :pineapple_pizza_preference, collection: FormComponentPreview.yes_no_options, item_value_method: :value, item_label_method: :label, instance_key: "form2") %>
+  <%= render ConditionalComponent.new(method: :pineapple_pizza_preference, value: "yes", content_description: "Followup question for form 2", instance_key: "form2") do %>
     But why!?
   <% end %>
 <% end %>