Class: BetterUi::Forms::BaseComponent Abstract

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/forms/base_component.rb

Overview

This class is abstract.

Subclasses must implement the #call method to render the specific input type.

Base component for all form input components in the BetterUi::Forms namespace.

This abstract class provides a common structure and behavior for form input components, including label positioning (vertical/above input), hint text display, error message handling, and consistent sizing/styling across all input types.

Examples:

Extending BaseComponent to create a custom input

module BetterUi
  module Forms
    class CustomInputComponent < BaseComponent
      def call
        content_tag :div, class: wrapper_classes do
          # Render label, input, hint, and errors
        end
      end
    end
  end
end

Usage with Rails form builder (via BetterUi::UiFormBuilder)

<%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
  <%= f.ui_text_input :email, label: "Email Address", hint: "We'll never share your email" %>
<% end %>

See Also:

Constant Summary collapse

SIZES =

Available size variants for form inputs. Each size adjusts font size, padding, and spacing proportionally.

Returns:

  • (Array<Symbol>) —

    the list of valid size options (:xs, :sm, :md, :lg, :xl)

%i[xs sm md lg xl].freeze

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Constructor Details

#initialize(name:, value: nil, label: nil, hint: nil, placeholder: nil, size: :md, disabled: false, readonly: false, required: false, errors: nil, shadow: :sm, container_classes: nil, label_classes: nil, input_classes: nil, hint_classes: nil, error_classes: nil, **options) ⇒ BaseComponent

Initializes a new form input component with common form field attributes.

Examples:

Basic initialization

BetterUi::Forms::TextInputComponent.new(
  name: "user[email]",
  label: "Email Address",
  hint: "We'll never share your email",
  required: true
)

With errors

BetterUi::Forms::TextInputComponent.new(
  name: "user[email]",
  value: "invalid",
  errors: ["Email is invalid", "Email can't be blank"]
)

Custom styling

BetterUi::Forms::TextInputComponent.new(
  name: "search",
  size: :lg,
  container_classes: "my-4",
  input_classes: "font-mono"
)

Parameters:

  • name (String) —

    the name attribute for the input field (required for form submission)

  • value (String, nil) (defaults to: nil) —

    the current value of the input field

  • label (String, nil) (defaults to: nil) —

    the label text to display above the input

  • hint (String, nil) (defaults to: nil) —

    helpful hint text displayed below the input

  • placeholder (String, nil) (defaults to: nil) —

    placeholder text shown when input is empty

  • size (Symbol) (defaults to: :md) —

    the size variant (:xs, :sm, :md, :lg, :xl), defaults to :md

  • disabled (Boolean) (defaults to: false) —

    whether the input should be disabled (non-interactive), defaults to false

  • readonly (Boolean) (defaults to: false) —

    whether the input should be readonly (viewable but not editable), defaults to false

  • required (Boolean) (defaults to: false) —

    whether the field is required (shows asterisk indicator), defaults to false

  • errors (Array<String>, String, nil) (defaults to: nil) —

    validation error messages to display below the input

  • container_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the outer wrapper

  • label_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the label element

  • input_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the input element

  • hint_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the hint text

  • error_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for error messages

  • options (Hash) —

    additional HTML attributes to pass through to the input element

Raises:

  • (ArgumentError) —

    if size is not one of the valid SIZES



84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
# File 'app/components/better_ui/forms/base_component.rb', line 84

def initialize(
  name:,
  value: nil,
  label: nil,
  hint: nil,
  placeholder: nil,
  size: :md,
  disabled: false,
  readonly: false,
  required: false,
  errors: nil,
  shadow: :sm,
  container_classes: nil,
  label_classes: nil,
  input_classes: nil,
  hint_classes: nil,
  error_classes: nil,
  **options
)
  @name = name
  @value = value
  @label = label
  @hint = hint
  @placeholder = placeholder
  @size = validate_size(size)
  @disabled = disabled
  @readonly = readonly
  @required = required
  @errors = Array(errors).compact.reject(&:blank?)
  @shadow = normalize_shadow(shadow)
  @container_classes = container_classes
  @label_classes = label_classes
  @input_classes = input_classes
  @hint_classes = hint_classes
  @error_classes = error_classes
  @options = options
end

Instance Method Details

#call ⇒ String

This method is abstract.

Subclasses must implement this method

Renders the component markup.

This method must be implemented by subclasses to define the specific rendering logic for each input type (text, number, select, etc.).

Returns:

  • (String) —

    the rendered HTML markup

Raises:

  • (NotImplementedError) —

    if called directly on BaseComponent



130
131
132
 
# File 'app/components/better_ui/forms/base_component.rb', line 130

def call
  raise NotImplementedError, "Subclasses must implement the #call method"
end