Add ui/forms/address component

Author: rainerdema

admin/app/components/solidus_admin/ui/forms/address/component.html.erb

@@ -0,0 +1,33 @@
+<fieldset class="<%= stimulus_id %>"
+  data-controller="<%= stimulus_id %>"
+  <%= :disabled if @disabled %>
+>
+  <div class="<%= stimulus_id %>--address-form flex flex-wrap gap-4 pb-4">
+    <%= render component("ui/forms/field").text_field(@form, :name) %>
+    <%= render component("ui/forms/field").text_field(@form, :address1) %>
+    <%= render component("ui/forms/field").text_field(@form, :address2) %>
+    <div class="flex w-full space-x-4">
+      <%= render component("ui/forms/field").text_field(@form, :city, class: "flex-1") %>
+      <%= render component("ui/forms/field").text_field(@form, :zipcode, class: "flex-1") %>
+    </div>
+
+    <%= render component("ui/forms/field").select(
+      @form,
+      :country_id,
+      Spree::Country.all.map { |c| [c.name, c.id] },
+      value: @form.object.try(:country_id),
+      "data-#{stimulus_id}-target": "country",
+      "data-action": "change->#{stimulus_id}#loadStates"
+    ) %>
+
+    <%= render component("ui/forms/field").select(
+      @form,
+      :state_id,
+      [],
+      value: @form.object.try(:state_id),
+      "data-#{stimulus_id}-target": "state"
+    ) %>
+
+    <%= render component("ui/forms/field").text_field(@form, :phone) %>
+  </div>
+</fieldset>

admin/app/components/solidus_admin/ui/forms/address/component.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["country", "state"]
+
+  connect() {
+    this.loadStates()
+  }
+
+  loadStates() {
+    const countryId = this.countryTarget.value
+
+    fetch(`/admin/countries/${countryId}/states`)
+      .then(response => response.json())
+      .then(data => {
+        this.updateStateOptions(data)
+      })
+  }
+
+  updateStateOptions(data) {
+    const stateSelect = this.stateTarget
+
+    stateSelect.innerHTML = ""
+
+    data.forEach(state => {
+      const option = document.createElement("option")
+
+      option.value = state.id
+      option.innerText = state.name
+      stateSelect.appendChild(option)
+    })
+  }
+}

admin/app/components/solidus_admin/ui/forms/address/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Component < SolidusAdmin::BaseComponent
+  def initialize(form:, disabled: false)
+    @form = form
+    @disabled = disabled
+  end
+end

admin/spec/components/previews/solidus_admin/ui/forms/address/component_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+# @component "ui/forms/address"
+class SolidusAdmin::UI::Forms::Address::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param disabled toggle
+  def playground(disabled: false)
+    view = ActionView::Base.new(ActionView::LookupContext.new([]), {}, nil)
+    render component("ui/forms/address").new(
+      form: ActionView::Helpers::FormBuilder.new(:address, Spree::Address.new, view, {}),
+      disabled: disabled
+    )
+  end
+end

admin/spec/components/previews/solidus_admin/ui/forms/address/component_preview/overview.html.erb

@@ -0,0 +1,3 @@
+<%= form_for Spree::Address.new, url: '#' do |f| %>
+  <%= render current_component.new(form: f, disabled: false) %>
+<% end %>

admin/spec/components/solidus_admin/ui/forms/address/component_spec.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Forms::Address::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end