Phlex, PhlexUI, Rails, and forms

[AliOsm]

I faced an issue while migrating one of my projects to Phlex/PhlexUI, which is how to create forms in a clean way. Using Phlex alone, I can use form_for/form_with and access helpers like input_field and others. Adding PhlexUI raises the issue about how to use the styles while keep the Rails functionalities like authenticity_token field, and auto-generation of input names.

What I'm doing now is creating new components that utilizes styles from PhlexUI (Copy & Paste), while creating the elements using Rails helpers, like this one:

module Forms
  class Field < ApplicationComponent
    def initialize(form:, type:, name:, **attrs)
      @form = form
      @type = type
      @name = name
      @attrs = attrs

      super()
    end

    def view_template
      @form.send(:"#{@type}_field", @name, **mix(default_attrs, @attrs))
    end

    private

    def default_attrs
      {
        class: 'flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground'
      }
    end
  end
end

I know this is not the ideal solution, but creating the forms manually is not a funny thing to do also :3

Any thoughts on this?

I found this form builder when I was searching, it provides a good starting point. Also, I hope that I'm not understanding the new Form component correctly, and it is providing the right solution that I'm looking for.

[SethHorsley]

We are working on rewriting how forms work with phlex_ui. I'll keep this open and can update it when we get something working. This should be released in v1.

[naofumi]

Hi!

We are currently on v1 beta but I don't see this is included yet.

I have some simple ideas like using the form_with helper inside the Form component and exposing a block variable that can be handed down to the Input component (basically mirroring how form_with works), but I wanted to know if you are working on something better.

[JustinGranof]

I am facing a similar problem as you @AliOsm.

One possible solution that I am still playing around with is using a custom FormBuilder and overriding the TextField's render method. Of course, your form_with must use the new builder that you defined. I just set it as the default in my application_controller.rb.

If this is a valid solution it would be nice to see RbUI implement it out of the box. Is this similar to what you had in mind of doing @SethHorsley?

# app/builders/phlex_form_builder.rb
class PhlexFormBuilder < ActionView::Helpers::FormBuilder
  def text_field(attribute, options = {})
    Form::Tags::TextField.new(@object_name, attribute, @template, options).render
  end
end

# app/helpers/form/tags/text_field.rb
class Form::Tags::TextField < ActionView::Helpers::Tags::TextField
  def render
    options = @options.stringify_keys
    options["size"] = options["maxlength"] unless options.key?("size")
    options["type"] ||= field_type
    options["value"] = options.fetch("value") { value_before_type_cast } unless field_type == "file"
    add_default_name_and_id(options)
    @template_object.render PhlexUI::Input.new(**options) # <-- Render PhlexUI input
  end
end