Merge branch 'main' into move-box-component

.changeset/nice-ears-give.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Use a custom form builder; introduce primer_form_for

.rubocop.yml

@@ -12,6 +12,7 @@ AllCops:
     - "demo/**/*"
     - "**/vendor/**/*"
     - "**/node_modules/**/*"
+    - "test/previews/primer/docs/**/*"
   TargetRubyVersion: 2.6
 
 Style/ClassAndModuleChildren:

Gemfile.lock

@@ -5,7 +5,7 @@ PATH
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 17.0.0)
-      view_component (>= 2.0.0, < 3.0)
+      view_component (>= 2.57.0, < 3.0)
 
 GEM
   remote: https://rubygems.org/
@@ -72,7 +72,7 @@ GEM
     coderay (1.1.3)
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     crass (1.0.6)
     cuprite (0.13)
       capybara (>= 2.1, < 4)
@@ -98,7 +98,7 @@ GEM
       websocket-driver (>= 0.6, < 0.8)
     ffi (1.15.4)
     html_tokenizer (0.0.7)
-    i18n (1.8.10)
+    i18n (1.12.0)
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
     listen (3.7.0)
@@ -111,7 +111,7 @@ GEM
     method_source (1.0.0)
     mini_mime (1.1.1)
     mini_portile2 (2.8.0)
-    minitest (5.14.4)
+    minitest (5.16.2)
     mocha (1.13.0)
     msgpack (1.4.2)
     nio4r (2.5.8)
@@ -205,11 +205,12 @@ GEM
     thor (1.1.0)
     thread_safe (0.3.6)
     timecop (0.9.4)
-    tzinfo (2.0.4)
+    tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.1.0)
-    view_component (2.56.0)
+    view_component (2.64.0)
       activesupport (>= 5.0.0, < 8.0)
+      concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     view_component_storybook (0.8.0)
       view_component (>= 2.2)
@@ -231,7 +232,7 @@ GEM
     xpath (3.2.0)
       nokogiri (~> 1.8)
     yard (0.9.26)
-    zeitwerk (2.5.1)
+    zeitwerk (2.6.0)
 
 PLATFORMS
   ruby

app/components/primer/alpha/text_field.rb

@@ -6,7 +6,7 @@ module Alpha
 
     # A text field suitable for use outside a form. For a text field input suitable for use
     # within an HTML form, see the `Primer::Forms` namespace.
-    class TextField
+    class TextField < Primer::Component
       status :alpha
 
       # @!method initialize

app/helpers/primer/form_helper.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module FormHelper
+    def primer_form_with(**kwargs, &block)
+      form_with(**kwargs, skip_default_ids: false, builder: Primer::Forms::Builder, &block)
+    end
+  end
+end

demo/Gemfile.lock

@@ -24,7 +24,7 @@ PATH
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 17.0.0)
-      view_component (>= 2.0.0, < 3.0)
+      view_component (>= 2.57.0, < 3.0)
 
 GEM
   remote: https://rubygems.org/
@@ -279,8 +279,9 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.8)
-    view_component (2.49.1)
+    view_component (2.64.0)
       activesupport (>= 5.0.0, < 8.0)
+      concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     view_component_storybook (0.8.0)
       view_component (>= 2.2)

lib/primer/form_components.rb

@@ -17,7 +17,7 @@ def initialize(**system_arguments, &block)
         end
 
         def call
-          builder = ActionView::Helpers::FormBuilder.new(
+          builder = Primer::Forms::Builder.new(
             nil, nil, __vc_original_view_context, {}
           )
 
@@ -28,7 +28,7 @@ def call
             &@block
           )
 
-          input.render_in(__vc_original_view_context) { content }
+          input.to_component.render_in(__vc_original_view_context) { content }
         end
       end
     end

lib/primer/forms/base.html.erb

@@ -1,6 +1,6 @@
 <%= render(SpacingWrapper.new) do %>
   <% inputs.each do |input| %>
-    <%= render(input) %>
+    <%= render(input.to_component) %>
   <% end %>
 <% end %>
 <% if after_content? %>

lib/primer/forms/base.rb

@@ -17,6 +17,11 @@ def form(&block)
         end
 
         def new(builder, **options)
+          if builder && !builder.is_a?(Primer::Forms::Builder)
+            raise ArgumentError, "please pass an instance of Primer::Forms::Builder when "\
+              "constructing a form object (consider using the `primer_form_with` helper)"
+          end
+
           allocate.tap do |form|
             form.instance_variable_set(:@builder, builder)
             form.send(:initialize, **options)

lib/primer/forms/base_component.rb

@@ -39,6 +39,10 @@ def input?
         false
       end
 
+      def to_component
+        self
+      end
+
       private
 
       def compile_and_render_template

lib/primer/forms/buffer_rewriter.rb

@@ -16,8 +16,9 @@ def rewrite(code)
           code.dup.tap do |result|
             parser.var_refs.reverse_each do |lineno, stop|
               line_offset = line_offsets[lineno]
-              start = (stop - "@output_buffer".length) + line_offset
               stop += line_offset
+              stop -= 1 if stop < code.length
+              start = stop - "@output_buffer".length
               result[start...stop] = "output_buffer"
             end
           end
@@ -39,7 +40,7 @@ def calc_line_offsets(code)
       def on_var_ref(var)
         return unless var == "@output_buffer"
 
-        var_refs << [lineno, column - 1]
+        var_refs << [lineno, column]
       end
 
       def var_refs

lib/primer/forms/builder.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "primer/classify"
+
+module Primer
+  module Forms
+    # :nodoc:
+    class Builder < ActionView::Helpers::FormBuilder
+      include Primer::ClassNameHelper
+
+      UTILITY_KEYS = Primer::Classify::Utilities::UTILITIES.keys.freeze
+
+      def label(*args, **options, &block)
+        super(*args, classify(options), &block)
+      end
+
+      def check_box(*args, **options, &block)
+        super(*args, classify(options), &block)
+      end
+
+      def radio_button(*args, **options, &block)
+        super(*args, classify(options), &block)
+      end
+
+      def select(*args, **options, &block)
+        super(*args, classify(options), &block)
+      end
+
+      def text_field(*args, **options, &block)
+        super(*args, classify(options), &block)
+      end
+
+      def text_area(*args, **options, &block)
+        super(*args, classify(options), &block)
+      end
+
+      private
+
+      def classify(options)
+        options[:classes] = class_names(options.delete(:class), options[:classes])
+        options.merge!(Primer::Classify.call(options))
+        options.except!(*UTILITY_KEYS)
+        options[:class] = class_names(options[:class], options.delete(:classes))
+        options
+      end
+    end
+  end
+end

lib/primer/forms/check_box_group.html.erb

@@ -6,7 +6,7 @@
   <% end %>
   <%= render(SpacingWrapper.new) do %>
     <% @input.check_boxes.each do |check_box| %>
-      <%= render(check_box) %>
+      <%= render(check_box.to_component) %>
     <% end %>
   <% end %>
 </fieldset>

lib/primer/forms/dsl/input.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "primer/classify"
-
 module Primer
   module Forms
     module Dsl
@@ -16,8 +14,6 @@ class Input
         }.freeze
         SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-        UTILITY_KEYS = Primer::Classify::Utilities::UTILITIES.keys.freeze
-
         include Primer::ClassNameHelper
 
         attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids
@@ -27,14 +23,11 @@ def initialize(builder:, form:, **system_arguments)
           @form = form
 
           @input_arguments = system_arguments
-          process_classes!(@input_arguments)
-
           @label_arguments = @input_arguments.delete(:label_arguments) || {}
-          process_classes!(@label_arguments)
 
           @label_arguments[:class] = class_names(
             @label_arguments[:class],
-            @input_arguments.fetch(:visually_hide_label, true) ? "sr-only" : nil
+            @input_arguments.fetch(:visually_hide_label, false) ? "sr-only" : nil
           )
 
           @input_arguments.delete(:visually_hide_label)
@@ -207,23 +200,8 @@ def input?
           true
         end
 
-        # Avoid using Rails delegation here for performance reasons
-        # rubocop:disable Rails/Delegate
-        def render_in(view_context)
-          to_component.render_in(view_context)
-        end
-        # rubocop:enable Rails/Delegate
-
         private
 
-        def process_classes!(args)
-          args[:classes] = class_names(args.delete(:class), args[:classes])
-          args.merge!(Primer::Classify.call(args))
-          args[:class] = class_names(args[:class], args.delete(:classes))
-          args.except!(*UTILITY_KEYS)
-          args
-        end
-
         def input_data
           @input_arguments[:data] ||= {}
         end

lib/primer/forms/dsl/input_group.rb

@@ -28,13 +28,6 @@ def type
         def input?
           true
         end
-
-        # Avoid using Rails delegation here for performance reasons
-        # rubocop:disable Rails/Delegate
-        def render_in(view_context)
-          to_component.render_in(view_context)
-        end
-        # rubocop:enable Rails/Delegate
       end
     end
   end

lib/primer/forms/group.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag_if(horizontal?, :div, class: "d-flex", style: "gap: 15px;") do %>
   <% @inputs.each do |input| %>
-    <%= render(input) %>
+    <%= render(input.to_component) %>
   <% end %>
 <% end %>

lib/primer/forms/multi.html.erb

@@ -1,3 +1,3 @@
 <% @input.inputs.each do |child_input| %>
-  <%= render(child_input) %>
+  <%= render(child_input.to_component) %>
 <% end %>

lib/primer/view_components/engine.rb

@@ -15,6 +15,7 @@ class Engine < ::Rails::Engine
 
       config.eager_load_paths = %W[
         #{root}/app/components
+        #{root}/app/helpers
         #{root}/app/lib
       ]
 
@@ -39,6 +40,16 @@ class Engine < ::Rails::Engine
         end
       end
 
+      initializer "primer.forms.helpers" do
+        ActiveSupport.on_load :action_controller do
+          require "primer/form_helper"
+          helper Primer::FormHelper
+
+          # make primer_form_with available to view components also
+          ViewComponent::Base.prepend(Primer::FormHelper)
+        end
+      end
+
       initializer "primer_view_components.zeitwerk_ignore" do
         Rails.autoloaders.each do |autoloader|
           autoloader.ignore(Engine.root.join("lib", "primer", "view_components", "linters.rb"))

lookbook/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    primer_view_components (0.0.85)
+    primer_view_components (0.0.86)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 17.0.0)

primer_view_components.gemspec

@@ -30,7 +30,7 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency     "actionview", ">= 5.0.0"
   spec.add_runtime_dependency     "activesupport", ">= 5.0.0"
   spec.add_runtime_dependency     "octicons", ">= 17.0.0"
-  spec.add_runtime_dependency     "view_component", [">= 2.0.0", "< 3.0"]
+  spec.add_runtime_dependency     "view_component", [">= 2.57.0", "< 3.0"]
 
   spec.add_development_dependency "allocation_stats", "~> 0.1"
   spec.add_development_dependency "allocation_tracer", "~> 0.6.3"

test/forms/submit_button_form.rb

@@ -6,7 +6,13 @@ class SubmitButtonForm < ApplicationForm
       MultiTextFieldForm.new(builder)
     end
 
-    my_form.submit(name: :submit, label: "Submit", scheme: :primary) do |c|
+    my_form.text_field(
+      name: :green,
+      label: "I'm green",
+      color: :success
+    )
+
+    my_form.submit(name: :submit, label: "Submit", scheme: :primary, mr: 3) do |c|
       c.with_leading_visual_icon(icon: :"check-circle")
     end
   end

test/previews/primer/forms/forms_preview/after_content_form.html.erb

@@ -1,3 +1,3 @@
-<%= form_with(url: "/foo", skip_default_ids: false) do |f| %>
+<%= primer_form_with(url: "/foo") do |f| %>
   <%= render(AfterContentForm.new(f)) %>
 <% end %>

test/previews/primer/forms/forms_preview/caption_template_form.html.erb

@@ -1,3 +1,3 @@
-<%= form_with(url: "/foo", skip_default_ids: false) do |f| %>
+<%= primer_form_with(url: "/foo") do |f| %>
   <%= render(CaptionTemplateForm.new(f)) %>
 <% end %>

test/previews/primer/forms/forms_preview/check_box_group_form.html.erb

@@ -1,3 +1,3 @@
-<%= form_with(url: "/foo", skip_default_ids: false) do |f| %>
+<%= primer_form_with(url: "/foo") do |f| %>
   <%= render(CheckBoxGroupForm.new(f)) %>
 <% end %>