Rails Form Builder Field Component

component.html.erb

<div class="w-full">
  <%= component("Form/Label", form: form) { @label } %>

  <div class="flex w-full gap-1">
    <% if @field_type == :select %>
        <%= @form.send(
          @field_type,
          @attribute_key,
          @option_values,
          {
            include_blank: "Please Select...",
            selected: @value || @option_values.first,
          }.merge(@select_options),
          {
            class: style(),
            data: {},
          }.merge(@field_options),
        ) %>
    <% else %>
      <%= @form.send(
        @field_type,
        @attribute_key,
        {
          autocomplete: @autocomplete,
          class: style(),
          placeholder: @placeholder,
          value: @value,
        }.merge(@field_options),
      ) %>
    <% end %>

    <% if inline_button? %>
      <%= inline_button %>
    <% end %>
  </div>

  <% if @hint.present? %>
    <p class="text-sm mb-3 text-text-secondary">
      <%= @hint %>
    </p>
  <% end %>
</div>

component.rb

# frozen_string_literal: true

class Form::Field::Component < ApplicationViewComponent
  renders_one :inline_button

  option :attribute_key, default: proc { nil }
  option :autocomplete, default: proc { "off" }
  option :field_options, default: proc { {} }
  option :field_type, default: proc { :text_field }
  option :form, default: proc { nil }
  option :hint, default: proc { nil }
  option :label, default: proc { "Label" }
  option :option_values, default: proc { [] }
  option :placeholder, default: proc { nil }
  option :select_options, default: proc { {} }
  option :value, default: proc { nil }

  style do
    base {
      %w[
        appearance-none
        bg-field-background
        block
        border
        border-field-border
        focus:bg-field-background-active
        focus:border-gray-500
        focus:outline-none
        leading-tight
        mb-3
        px-4
        py-3
        rounded
        text-text
        w-full
      ]
    }.freeze
  end
end

usage.html.erb

<%= component("Form/Field",
  attribute_key: :platform_key,
  field_options: {
    autocomplete: "off",
    data: {
      action: "#{component_identifier("ProjectManager/External_Platform_Id")}#normalize",
      controller: component_identifier("ProjectManager/External_Platform_Id"),
      platform_key: platform.key,
    },
    placeholder: "Paste ID or Public Url",
    style: "margin-bottom: 0;",
  },
  form: form,
  label: "#{platform&.title} ID",
  value: project.external_platform_id(platform.key) || "",
) %>