On making a component with local "f" form variable

[LouisKottmann]

I am trying to gradually move from ERB to Phlex (2.0), and I have trouble factorizing this code into a Phlex Component:

      <div class="relative">
        <%= f.check_box :negated,
                    class: "peer absolute w-full h-full opacity-0 cursor-pointer" %>
        <button type="button" class="bg-red">Not</button>
      </div>

Where f comes from a calling ERB view like <%= form.fields_for :rules do |rule_form| %>

I tried https://phlexing.fun 's suggestion but it did not work (the HTML generated is different from ERB).

I read through https://beta.phlex.fun/reference/rails/helpers.html but that did not help me with forms.

I tried finding example usage of common phlex rails helpers on github but found nothing on that subject.

Lastly, I tried playing with including these:

include Phlex::Rails::Helpers::CheckBox
include Phlex::Rails::Helpers::CheckBoxTag
include Phlex::Rails::Helpers::FieldID
include Phlex::Rails::Helpers::FieldName
include Phlex::Rails::Helpers::FieldSetTag
include Phlex::Rails::Helpers::FormTag

But still no luck, in fact the input does not even show up on the HTML.

My latest try:

    def view_template(&)
      div(class: "relative") do
        f.check_box :negated,
                    class:
                      "peer absolute w-full h-full opacity-0 cursor-pointer"
        button(type: "button", class: button_classes, &)
      end
    end

When I only had the button, it worked fine, and my setup for Phlex otherwise seems correct, it is not my first component.

What am I missing?

--

EDIT:

To be clear, this is what I have right now:

In ERB:

      <div class="relative">
        <%= f.check_box :negated,
                    class: "peer absolute w-full h-full opacity-0 cursor-pointer" %>
        <%= render Components::HighlightToggleButton.new(
                 original_value: f.object.negated,
                 class:
                   "py-2 px-3 text-sm font-medium text-gray-300 bg-white rounded-lg border transition-colors duration-200 ease-in-out peer-checked:bg-red-100 peer-checked:text-black"
               ) do %>
          Not
        <% end %>
      </div>

Phlex component:

module Components
  class HighlightToggleButton < Components::Base
    def initialize(original_value:, **kwargs)
      @original_value = original_value
      @kwargs = kwargs
    end

    def view_template(&)
      button(
        **mix(
          { type: "button", class: highlight_toggle_button_classes },
          @kwargs
        ),
        &
      )
    end

    private

    def highlight_toggle_button_classes
      if @original_value
        "border-orange peer-checked:border-gray-300"
      else
        "peer-checked:border-orange border-gray-300"
      end
    end
  end
end

[joeldrapper]

Where is the f created? Does it come from Phlex or from ERB?

[LouisKottmann]

It comes from ERB, but I pass it as constructor argument.

I have updated my question with full ERB & Phlex code.

[joeldrapper]

Using a form builder in Phlex is incredibly awkward because of the way form builders work. If you were to create the form builder form Phlex using one of Phlex’ adapters such as Phlex::Rails::Helpers::FormWith, it should work much better.

[LouisKottmann]

Alright, I will put that aside for now then, as I plan to use Phlex for components while retaining ERB. Thank you.

[stephannv]

I did something similar for my project, but I'm rendering from a Phlex object, not from ERB, my code:

class RadioCardComponent < Phlex::HTML
  def inititalize(form:, attribute:, value:)
    @form = form
    @attribute = attribute
    @value = value
  end

  private 

  attr_reader :form, :attribute, :value

  def view_template
    ...
    form.radio_button attribute, value
    ...  
  end 
end

# Usage:
def view_template
  form_with(...) do |form|
    render RadioCardComponent.new(form:, attribute: :state, value: :draft)
    render RadioCardComponent.new(form:, attribute: :state, value: :online)
  end
end

[LouisKottmann]

I think the difference is likely in the "form" variable, whose class I'm guessing is a wrapper around the usual Rails form object.

Because otherwise we do the same thing.