better_ui 0.3.0 → 0.7.0

data/app/components/better_ui/forms/number_input_component.rb

@@ -0,0 +1,320 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Forms
+    # A number input component with support for min/max/step constraints, spinner controls,
+    # and prefix/suffix icons.
+    #
+    # This component extends {BaseComponent} to provide a number input field with optional
+    # decorative or functional icons, numeric constraints (min, max, step), and the ability
+    # to hide the browser's default up/down arrow spinner buttons.
+    #
+    # @example Basic number input
+    #   <%= render BetterUi::Forms::NumberInputComponent.new(
+    #     name: "user[age]",
+    #     label: "Age",
+    #     min: 0,
+    #     max: 120
+    #   ) %>
+    #
+    # @example Number input with step (decimal values)
+    #   <%= render BetterUi::Forms::NumberInputComponent.new(
+    #     name: "product[price]",
+    #     label: "Price",
+    #     min: 0,
+    #     step: 0.01,
+    #     placeholder: "0.00"
+    #   ) %>
+    #
+    # @example Number input without spinner controls
+    #   <%= render BetterUi::Forms::NumberInputComponent.new(
+    #     name: "quantity",
+    #     label: "Quantity",
+    #     min: 1,
+    #     show_spinner: false
+    #   ) %>
+    #
+    # @example Number input with prefix icon (currency)
+    #   <%= render BetterUi::Forms::NumberInputComponent.new(
+    #     name: "amount",
+    #     label: "Amount",
+    #     min: 0,
+    #     step: 0.01
+    #   ) do |component| %>
+    #     <% component.with_prefix_icon do %>
+    #       <span class="text-gray-500">$</span>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Number input with suffix icon (unit)
+    #   <%= render BetterUi::Forms::NumberInputComponent.new(
+    #     name: "weight",
+    #     label: "Weight",
+    #     min: 0
+    #   ) do |component| %>
+    #     <% component.with_suffix_icon do %>
+    #       <span class="text-gray-500">kg</span>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With validation errors
+    #   <%= render BetterUi::Forms::NumberInputComponent.new(
+    #     name: "user[age]",
+    #     value: "150",
+    #     label: "Age",
+    #     errors: ["Age must be between 0 and 120"]
+    #   ) %>
+    #
+    # @example Using with Rails form builder
+    #   <%= form_with model: @product, builder: BetterUi::UiFormBuilder do |f| %>
+    #     <%= f.ui_number_input :price, min: 0, step: 0.01 do |component| %>
+    #       <% component.with_prefix_icon do %>
+    #         <span>$</span>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @see BaseComponent
+    # @see TextInputComponent
+    # @see BetterUi::UiFormBuilder#ui_number_input
+    class NumberInputComponent < BaseComponent
+      # @!method with_prefix_icon
+      #   Slot for rendering an icon or content before (left of) the input text.
+      #   The icon is positioned absolutely and input padding is adjusted automatically.
+      #   @yieldreturn [String] the HTML content for the prefix icon
+      renders_one :prefix_icon
+
+      # @!method with_suffix_icon
+      #   Slot for rendering an icon or content after (right of) the input text.
+      #   The icon is positioned absolutely and input padding is adjusted automatically.
+      #   @yieldreturn [String] the HTML content for the suffix icon
+      renders_one :suffix_icon
+
+      # Initializes a new number input component.
+      #
+      # Accepts all parameters from {BaseComponent#initialize} plus additional
+      # number-specific parameters for constraints and spinner control.
+      #
+      # @param name [String] the name attribute for the input field (required for form submission)
+      # @param value [String, Numeric, nil] the current value of the input field
+      # @param label [String, nil] the label text to display above the input
+      # @param hint [String, nil] helpful hint text displayed below the input
+      # @param placeholder [String, nil] placeholder text shown when input is empty
+      # @param size [Symbol] the size variant (:xs, :sm, :md, :lg, :xl), defaults to :md
+      # @param disabled [Boolean] whether the input should be disabled (non-interactive), defaults to false
+      # @param readonly [Boolean] whether the input should be readonly (viewable but not editable), defaults to false
+      # @param required [Boolean] whether the field is required (shows asterisk indicator), defaults to false
+      # @param errors [Array<String>, String, nil] validation error messages to display below the input
+      # @param min [Numeric, nil] the minimum allowed value (HTML5 min attribute)
+      # @param max [Numeric, nil] the maximum allowed value (HTML5 max attribute)
+      # @param step [Numeric, nil] the step increment for value changes (e.g., 0.01 for currency, 1 for integers)
+      # @param show_spinner [Boolean] whether to display browser's up/down arrow buttons, defaults to true
+      # @param container_classes [String, Array<String>, nil] additional CSS classes for the outer wrapper
+      # @param label_classes [String, Array<String>, nil] additional CSS classes for the label element
+      # @param input_classes [String, Array<String>, nil] additional CSS classes for the input element
+      # @param hint_classes [String, Array<String>, nil] additional CSS classes for the hint text
+      # @param error_classes [String, Array<String>, nil] additional CSS classes for error messages
+      # @param options [Hash] additional HTML attributes to pass through to the input element
+      #
+      # @raise [ArgumentError] if size is not one of the valid SIZES
+      #
+      # @example Basic initialization with constraints
+      #   BetterUi::Forms::NumberInputComponent.new(
+      #     name: "product[quantity]",
+      #     label: "Quantity",
+      #     min: 1,
+      #     max: 100,
+      #     step: 1
+      #   )
+      #
+      # @example Currency input with decimal precision
+      #   BetterUi::Forms::NumberInputComponent.new(
+      #     name: "product[price]",
+      #     label: "Price",
+      #     min: 0,
+      #     step: 0.01,
+      #     show_spinner: false
+      #   )
+      #
+      # @see BaseComponent#initialize
+      def initialize(
+        name:,
+        value: nil,
+        label: nil,
+        hint: nil,
+        placeholder: nil,
+        size: :md,
+        disabled: false,
+        readonly: false,
+        required: false,
+        errors: nil,
+        min: nil,
+        max: nil,
+        step: nil,
+        show_spinner: true,
+        container_classes: nil,
+        label_classes: nil,
+        input_classes: nil,
+        hint_classes: nil,
+        error_classes: nil,
+        **options
+      )
+        @min = min
+        @max = max
+        @step = step
+        @show_spinner = show_spinner
+
+        super(
+          name: name,
+          value: value,
+          label: label,
+          hint: hint,
+          placeholder: placeholder,
+          size: size,
+          disabled: disabled,
+          readonly: readonly,
+          required: required,
+          errors: errors,
+          container_classes: container_classes,
+          label_classes: label_classes,
+          input_classes: input_classes,
+          hint_classes: hint_classes,
+          error_classes: error_classes,
+          **options
+        )
+      end
+
+      private
+
+      # Returns the HTML input type attribute.
+      #
+      # @return [String] the input type ("number")
+      # @api private
+      def input_type
+        "number"
+      end
+
+      # Checks if a prefix icon has been provided via the slot.
+      #
+      # @return [Boolean] true if prefix_icon slot is present, false otherwise
+      # @api private
+      def has_prefix_icon?
+        prefix_icon.present?
+      end
+
+      # Checks if a suffix icon has been provided via the slot.
+      #
+      # @return [Boolean] true if suffix_icon slot is present, false otherwise
+      # @api private
+      def has_suffix_icon?
+        suffix_icon.present?
+      end
+
+      # Returns the base CSS classes for icon wrapper elements.
+      #
+      # Icons are positioned absolutely within the input wrapper and include
+      # size-specific padding to ensure proper spacing.
+      #
+      # @return [String] the merged CSS class string for icon wrappers
+      # @api private
+      def icon_wrapper_classes
+        css_classes([
+          "absolute",
+          "inset-y-0",
+          "flex",
+          "items-center",
+          "pointer-events-none",
+          icon_size_padding
+        ].flatten.compact)
+      end
+
+      # Returns the CSS classes for the prefix icon wrapper.
+      #
+      # Extends icon_wrapper_classes with left positioning.
+      #
+      # @return [String] the merged CSS class string for the prefix icon wrapper
+      # @api private
+      def prefix_icon_classes
+        css_classes([
+          icon_wrapper_classes,
+          "left-0"
+        ].flatten.compact)
+      end
+
+      # Returns the CSS classes for the suffix icon wrapper.
+      #
+      # Extends icon_wrapper_classes with right positioning.
+      #
+      # @return [String] the merged CSS class string for the suffix icon wrapper
+      # @api private
+      def suffix_icon_classes
+        css_classes([
+          icon_wrapper_classes,
+          "right-0"
+        ].flatten.compact)
+      end
+
+      # Returns size-specific horizontal padding for icon wrappers.
+      #
+      # Ensures icons maintain proper spacing from the input borders across all sizes.
+      #
+      # @return [String] the padding class for the current component size
+      # @api private
+      def icon_size_padding
+        case @size
+        when :xs then "px-2"
+        when :sm then "px-3"
+        when :md then "px-4"
+        when :lg then "px-5"
+        when :xl then "px-6"
+        end
+      end
+
+      # Returns input element classes with icon-adjusted padding and optional spinner hiding.
+      #
+      # When prefix or suffix icons are present, this method adds extra padding to the
+      # input element to prevent text from overlapping with the icons. When show_spinner
+      # is false, adds the 'hide-number-spinner' class to hide browser's up/down arrows.
+      # Padding amount is proportional to the component size.
+      #
+      # @return [String] the CSS class string with icon padding and spinner visibility adjustments
+      # @api private
+      def input_element_classes_with_icons
+        classes = input_element_classes
+        classes = "#{classes} pl-10" if has_prefix_icon? && @size == :md
+        classes = "#{classes} pr-10" if has_suffix_icon? && @size == :md
+        classes = "#{classes} pl-8" if has_prefix_icon? && @size == :sm
+        classes = "#{classes} pr-8" if has_suffix_icon? && @size == :sm
+        classes = "#{classes} pl-6" if has_prefix_icon? && @size == :xs
+        classes = "#{classes} pr-6" if has_suffix_icon? && @size == :xs
+        classes = "#{classes} pl-12" if has_prefix_icon? && @size == :lg
+        classes = "#{classes} pr-12" if has_suffix_icon? && @size == :lg
+        classes = "#{classes} pl-14" if has_prefix_icon? && @size == :xl
+        classes = "#{classes} pr-14" if has_suffix_icon? && @size == :xl
+        classes = "#{classes} hide-number-spinner" unless @show_spinner
+        classes
+      end
+
+      # Returns the complete set of HTML attributes for the number input element.
+      #
+      # Extends the parent implementation to add number-specific attributes:
+      # - type: "number"
+      # - min: minimum allowed value (if specified)
+      # - max: maximum allowed value (if specified)
+      # - step: increment step for value changes (if specified)
+      # - class: icon-adjusted classes when icons are present or spinner is hidden
+      #
+      # @return [Hash] hash of HTML attributes for the input element
+      # @api private
+      def input_attributes
+        attrs = super
+        attrs[:type] = input_type
+        attrs[:min] = @min if @min
+        attrs[:max] = @max if @max
+        attrs[:step] = @step if @step
+        attrs[:class] = input_element_classes_with_icons if has_prefix_icon? || has_suffix_icon? || !@show_spinner
+        attrs
+      end
+    end
+  end
+end

data/app/components/better_ui/forms/password_input_component/password_input_component.html.erb

@@ -0,0 +1,71 @@
+<div class="<%= wrapper_classes %>">
+  <% if @label.present? %>
+    <label for="<%= @name %>" class="<%= label_element_classes %>">
+      <%= @label %>
+      <% if @required %>
+        <span class="text-danger-600">*</span>
+      <% end %>
+    </label>
+  <% end %>
+
+  <div <%= tag.attributes(input_wrapper_attributes) %>>
+    <% if has_prefix_icon? %>
+      <div class="<%= prefix_icon_classes %>">
+        <%= prefix_icon %>
+      </div>
+    <% end %>
+
+    <input <%= tag.attributes(input_attributes) %> />
+
+    <% if has_toggle_button? %>
+      <div class="<%= toggle_button_classes %>">
+        <button
+          type="button"
+          tabindex="-1"
+          class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-150"
+          data-action="mousedown->better-ui--forms--password-input#toggle"
+          aria-label="Toggle password visibility"
+        >
+          <!-- Eye icon (shown when password is hidden) -->
+          <svg
+            class="<%= toggle_icon_size %>"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            data-better-ui--forms--password-input-target="eyeIcon"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+          </svg>
+
+          <!-- Eye-slash icon (shown when password is visible) -->
+          <svg
+            class="<%= toggle_icon_size %> hidden"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            data-better-ui--forms--password-input-target="eyeSlashIcon"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+          </svg>
+        </button>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @hint.present? %>
+    <div class="<%= hint_element_classes %>">
+      <%= @hint %>
+    </div>
+  <% end %>
+
+  <% if has_errors? %>
+    <div class="<%= errors_element_classes %>">
+      <% @errors.each do |error| %>
+        <div><%= error %></div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/better_ui/forms/password_input_component.rb

@@ -0,0 +1,206 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Forms
+    # A password input component with visibility toggle functionality.
+    #
+    # This component extends {TextInputComponent} to provide a password input field with
+    # a toggle button that allows users to show or hide the password text. The toggle
+    # button displays an eye icon when the password is hidden and an eye-slash icon when
+    # the password is visible.
+    #
+    # The component inherits all features from TextInputComponent including labels, hints,
+    # errors, validation states, sizes, and the prefix_icon slot. The suffix position is
+    # reserved for the password visibility toggle button.
+    #
+    # @example Basic password input
+    #   <%= render BetterUi::Forms::PasswordInputComponent.new(
+    #     name: "user[password]",
+    #     label: "Password",
+    #     placeholder: "Enter your password"
+    #   ) %>
+    #
+    # @example Password input with prefix icon (lock)
+    #   <%= render BetterUi::Forms::PasswordInputComponent.new(
+    #     name: "user[password]",
+    #     label: "Password",
+    #     required: true
+    #   ) do |component| %>
+    #     <% component.with_prefix_icon do %>
+    #       <svg class="h-5 w-5 text-gray-400">...</svg>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With validation errors
+    #   <%= render BetterUi::Forms::PasswordInputComponent.new(
+    #     name: "user[password]",
+    #     label: "Password",
+    #     errors: ["Password is too short", "Password must include a number"]
+    #   ) %>
+    #
+    # @example With hint text
+    #   <%= render BetterUi::Forms::PasswordInputComponent.new(
+    #     name: "user[password]",
+    #     label: "Password",
+    #     hint: "Must be at least 8 characters with 1 number and 1 special character",
+    #     required: true
+    #   ) %>
+    #
+    # @example Using with Rails form builder
+    #   <%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
+    #     <%= f.ui_password_input :password, hint: "Minimum 8 characters" %>
+    #   <% end %>
+    #
+    # @note The suffix_icon slot from TextInputComponent is not available in PasswordInputComponent
+    #   as the suffix position is occupied by the visibility toggle button.
+    #
+    # @see TextInputComponent
+    # @see BaseComponent
+    # @see BetterUi::UiFormBuilder#ui_password_input
+    class PasswordInputComponent < TextInputComponent
+      # Initializes a new password input component.
+      #
+      # All parameters are passed to {TextInputComponent#initialize}. See the parent class
+      # for detailed parameter descriptions.
+      #
+      # @param (see TextInputComponent#initialize)
+      # @option (see TextInputComponent#initialize)
+      # @raise (see TextInputComponent#initialize)
+      #
+      # @see TextInputComponent#initialize
+      def initialize(
+        name:,
+        value: nil,
+        label: nil,
+        hint: nil,
+        placeholder: nil,
+        size: :md,
+        disabled: false,
+        readonly: false,
+        required: false,
+        errors: nil,
+        container_classes: nil,
+        label_classes: nil,
+        input_classes: nil,
+        hint_classes: nil,
+        error_classes: nil,
+        **options
+      )
+        super(
+          name: name,
+          value: value,
+          label: label,
+          hint: hint,
+          placeholder: placeholder,
+          size: size,
+          disabled: disabled,
+          readonly: readonly,
+          required: required,
+          errors: errors,
+          container_classes: container_classes,
+          label_classes: label_classes,
+          input_classes: input_classes,
+          hint_classes: hint_classes,
+          error_classes: error_classes,
+          **options
+        )
+      end
+
+      private
+
+      # Returns the HTML input type attribute.
+      #
+      # For password inputs, this returns "password" by default. The Stimulus controller
+      # toggles this between "password" and "text" to show/hide the password.
+      #
+      # @return [String] the input type ("password")
+      # @api private
+      def input_type
+        "password"
+      end
+
+      # Checks if the password visibility toggle button is present.
+      #
+      # For PasswordInputComponent, the toggle button is always present unless the
+      # input is disabled or readonly (as toggling would not be functional).
+      #
+      # @return [Boolean] true if toggle button should be rendered
+      # @api private
+      def has_toggle_button?
+        !@disabled && !@readonly
+      end
+
+      # Returns size-specific classes for the toggle button icon.
+      #
+      # Icon sizes are proportional to the input size to maintain visual balance.
+      #
+      # @return [String] the icon size class for the current component size
+      # @api private
+      def toggle_icon_size
+        case @size
+        when :xs then "w-4 h-4"
+        when :sm then "w-4 h-4"
+        when :md then "w-5 h-5"
+        when :lg then "w-5 h-5"
+        when :xl then "w-6 h-6"
+        end
+      end
+
+      # Returns the CSS classes for the toggle button wrapper.
+      #
+      # Positions the toggle button absolutely within the input wrapper.
+      #
+      # @return [String] the merged CSS class string for the toggle button wrapper
+      # @api private
+      def toggle_button_classes
+        css_classes([
+          "absolute",
+          "inset-y-0",
+          "right-0",
+          "flex",
+          "items-center",
+          icon_size_padding
+        ].flatten.compact)
+      end
+
+      # Returns the complete set of HTML attributes for the input element.
+      #
+      # Extends the parent implementation to add Stimulus target attribute
+      # for the password visibility toggle functionality.
+      #
+      # @return [Hash] hash of HTML attributes for the input element
+      # @api private
+      def input_attributes
+        attrs = super
+        attrs[:data] ||= {}
+        attrs[:data][:"better-ui--forms--password-input-target"] = "input"
+        attrs
+      end
+
+      # Returns the HTML attributes for the input wrapper div.
+      #
+      # Adds Stimulus controller to the wrapper so all child targets are accessible.
+      #
+      # @return [Hash] hash of HTML attributes for the wrapper div
+      # @api private
+      def input_wrapper_attributes
+        {
+          class: input_wrapper_classes,
+          data: {
+            controller: "better-ui--forms--password-input"
+          }
+        }
+      end
+
+      # Override parent method to always consider toggle button as suffix icon.
+      #
+      # This ensures input padding is adjusted for the toggle button.
+      #
+      # @return [Boolean] true if toggle button is present
+      # @api private
+      def has_suffix_icon?
+        has_toggle_button?
+      end
+    end
+  end
+end

data/app/components/better_ui/forms/text_input_component/text_input_component.html.erb

@@ -0,0 +1,40 @@
+<div class="<%= wrapper_classes %>">
+  <% if @label.present? %>
+    <label for="<%= @name %>" class="<%= label_element_classes %>">
+      <%= @label %>
+      <% if @required %>
+        <span class="text-danger-600">*</span>
+      <% end %>
+    </label>
+  <% end %>
+
+  <div class="<%= input_wrapper_classes %>">
+    <% if has_prefix_icon? %>
+      <div class="<%= prefix_icon_classes %>">
+        <%= prefix_icon %>
+      </div>
+    <% end %>
+
+    <input <%= tag.attributes(input_attributes) %> />
+
+    <% if has_suffix_icon? %>
+      <div class="<%= suffix_icon_classes %>">
+        <%= suffix_icon %>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @hint.present? %>
+    <div class="<%= hint_element_classes %>">
+      <%= @hint %>
+    </div>
+  <% end %>
+
+  <% if has_errors? %>
+    <div class="<%= errors_element_classes %>">
+      <% @errors.each do |error| %>
+        <div><%= error %></div>
+      <% end %>
+    </div>
+  <% end %>
+</div>