More composable forms (#989)

* Make forms more composable, opt-in to form builder

* Remove unused method

* Simpler money input controls

* Add in new form styling to imports

* Lint fixes

* Small tweak of multi select styles

app/views/accounts/_account.html.erb

@@ -17,7 +17,6 @@
 
       <%= form_with model: account,
                     namespace: account.id,
-                    builder: ActionView::Helpers::FormBuilder,
                     data: { controller: "auto-submit-form", turbo_frame: "_top" } do |form| %>
         <div class="relative inline-block select-none">
           <%= form.check_box :is_active, { class: "sr-only peer", data: { "auto-submit-form-target": "auto" } } %>

app/views/accounts/edit.html.erb

@@ -5,9 +5,9 @@
       <%= lucide_icon "x", class: "w-5 h-5 text-gray-500", data: { action: "click->modal#close" } %>
     </header>
 
-    <%= form_with model: @account, data: { turbo_frame: "_top" } do |f| %>
+    <%= styled_form_with model: @account, class: "space-y-4", data: { turbo_frame: "_top" } do |f| %>
       <%= f.text_field :name, label: t(".name") %>
-      <%= f.money_field :balance_money, label: t(".balance"), readonly_currency: true %>
+      <%= money_with_currency_field f, :balance_money, label: t(".balance"), disable_currency: true %>
 
       <div class="relative">
         <%= f.collection_select :institution_id, Current.family.institutions.alphabetically, :id, :name, { include_blank: t(".ungrouped"), label: t(".institution") } %>

app/views/accounts/list.html.erb

@@ -1,5 +1,5 @@
-<turbo-frame id="account-list" target="_top">
+<%= turbo_frame_tag "account-list" do %>
   <% account_groups(period: @period).each do |group| %>
     <%= render "accounts/account_list", group: group %>
   <% end %>
-</turbo-frame>
+<% end %>

app/views/accounts/new.html.erb

@@ -73,13 +73,13 @@
         <% end %>
         <span>Add <%= @account.accountable.model_name.human.downcase %></span>
       </div>
-      <%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "m-5 mt-1 flex flex-col justify-between grow", data: { turbo: false } } do |f| %>
+      <%= styled_form_with model: @account, url: accounts_path, scope: :account, class: "m-5 mt-1 flex flex-col justify-between grow", data: { turbo: false } do |f| %>
         <div class="space-y-4 grow">
           <%= f.hidden_field :accountable_type %>
           <%= f.text_field :name, placeholder: t(".name.placeholder"), required: "required", label: t(".name.label"), autofocus: true %>
           <%= f.collection_select :institution_id, Current.family.institutions.alphabetically, :id, :name, { include_blank: t(".ungrouped"), label: t(".institution") } %>
           <%= render "accounts/accountables/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
-          <%= f.money_field :balance_money, label: t(".balance"), required: "required" %>
+          <%= money_with_currency_field f, :balance_money, label: t(".balance"), required: "required" %>
 
           <div>
             <%= check_box_tag :add_start_values, class: "maybe-checkbox maybe-checkbox--light peer mb-1" %>

app/views/accounts/show.html.erb

@@ -69,8 +69,8 @@
           <%= tag.span period_label(@period), class: "text-gray-500" %>
         </div>
       </div>
-      <%= form_with url: account_path(@account), method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do %>
-        <%= render partial: "shared/period_select", locals: { value: @period.name } %>
+      <%= form_with url: account_path(@account), method: :get, data: { controller: "auto-submit-form" } do |form| %>
+        <%= period_select form: form, selected: @period.name %>
       <% end %>
     </div>
     <div class="h-96 flex items-center justify-center text-2xl font-bold">

app/views/accounts/summary.html.erb

@@ -10,10 +10,10 @@
         <div class="space-y-2 grow">
           <%= render partial: "shared/value_heading", locals: {
             label: "Assets",
-                  period: @period,
-                  value: Current.family.assets,
-                  trend: @asset_series.trend
-              } %>
+            period: @period,
+            value: Current.family.assets,
+            trend: @asset_series.trend
+          } %>
         </div>
         <div
           id="assetsChart"
@@ -26,11 +26,11 @@
         <div class="space-y-2 grow">
           <%= render partial: "shared/value_heading", locals: {
             label: "Liabilities",
-                  period: @period,
-                  size: "md",
-                  value: Current.family.liabilities,
-                  trend: @liability_series.trend
-              } %>
+            period: @period,
+            size: "md",
+            value: Current.family.liabilities,
+            trend: @liability_series.trend
+          } %>
         </div>
         <div
           id="liabilitiesChart"
@@ -48,8 +48,8 @@
             <%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
             <p><%= t(".new") %></p>
           <% end %>
-          <%= form_with url: summary_accounts_path, method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do %>
-            <%= render partial: "shared/period_select", locals: { value: @period.name } %>
+          <%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
+            <%= period_select form: form, selected: @period.name %>
           <% end %>
         </div>
       </div>
@@ -64,8 +64,8 @@
             <%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
             <p><%= t(".new") %></p>
           <% end %>
-          <%= form_with url: summary_accounts_path, method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do %>
-            <%= render partial: "shared/period_select", locals: { value: @period.name } %>
+          <%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
+            <%= period_select form: form, selected: @period.name %>
           <% end %>
         </div>
       </div>