fluxbit_view_components 0.2.0 → 0.4.0

data/app/components/fluxbit/form/component.rb

@@ -6,32 +6,36 @@ class Fluxbit::Form::Component < Fluxbit::Component
     return @id ||= random_id if @props[:id].nil? && @form.nil?
     return @props[:id] unless @props[:id].nil?
 
-    "#{@form.object_name}_#{@field}"
+    "#{@form.object_name}_#{@attribute}"
   end
 
-  def define_helper_text(helper_text, object, field)
-    return nil if helper_text.is_a? FalseClass
+  def define_help_text(help_text, object, attribute)
+    return nil if help_text.is_a? FalseClass
 
-    if helper_text.nil? && !object.nil? && !field.nil?
-      helper_text = I18n.t(
-        field,
-        scope: [ :activerecord, :helper_text, object.class.name.underscore.to_sym ],
+    if help_text.nil? && !object.nil? && !attribute.nil?
+      help_text = I18n.t(
+        attribute,
+        scope: [ object.class.name.pluralize.underscore.to_sym, :help_text ],
         default: nil
       )
     end
 
-    (helper_text.is_a?(Array) ? helper_text : [ helper_text ]) + errors
+    (help_text.is_a?(Array) ? help_text : [ help_text ]) + errors
   end
 
-  def define_helper_popover(helper_popover, object, field)
-    return helper_popover if (helper_popover != false && !helper_popover.nil?) || object.nil?
+  def define_helper_popover(helper_popover, object, attribute)
+    return nil if helper_popover == false
+    return helper_popover if !helper_popover.nil? || object.nil?
 
-    object_name = object.class.name.underscore.to_sym
-    I18n.t(field, scope: [ :activerecord, :helper_popover, object_name ], default: nil)
+    I18n.t(attribute, scope: [ object.class.name.pluralize.underscore.to_sym, :helper_popover ], default: nil)
   end
 
-  def label_value(label, object, field, id)
-    return object.class.human_attribute_name(field) if label.nil? && !object.nil? && !field.nil?
+  def label_value(label, object, attribute, id)
+    if label.nil? && !object.nil? && !attribute.nil?
+      key = [ object.class.name.pluralize.underscore.to_sym, :fields, attribute ]
+      return I18n.exists?(key) ? I18n.t(attribute, scope: key[0..-2]) : object.class.human_attribute_name(attribute)
+    end
+    return attribute.to_s.humanize if label.nil? && object.nil?
     return id.to_s.humanize if label.nil? && !id.nil?
     return label unless label.nil?
 
@@ -46,27 +50,24 @@ class Fluxbit::Form::Component < Fluxbit::Component
       color:                    @color,
       helper_popover:           @helper_popover,
       helper_popover_placement: @helper_popover_placement,
-      class:                    @label_class
+      class:                    @label_class,
+      required:                 @required
     ).with_content(@label).render_in(view_context)
   end
 
   def errors
     return [] unless @object&.errors&.any?
 
-    @object.errors.filter { |f| f.attribute == @field }.map(&:full_message)
+    @object.errors.filter { |f| f.attribute == @attribute }.map(&:full_message)
   end
 
-  def helper_text
-    return "" if @helper_text.blank?
-
-    # safe_join(
-    #   @helper_text.compact.map do |text|
-    #     Fluxbit::HelperTextComponent.new(color: @color).with_content(text).render_in(view_context)
-    #   end
-    # )
+  def help_text
+    return "" if @help_text.blank? || @help_text.compact.blank?
 
-    @helper_text.compact.map do |text|
-      concat Fluxbit::Form::HelperTextComponent.new(color: @color).with_content(text).render_in(view_context)
+    nodes = @help_text.compact.map do |text|
+      Fluxbit::Form::HelpTextComponent.new(color: @color).with_content(text).render_in(view_context)
     end
+
+    view_context.safe_join(nodes)
   end
 end

data/app/components/fluxbit/form/dropzone_component.html.erb

@@ -0,0 +1,39 @@
+<%= content_tag :div, **@wrapper_html do %>
+<div class="<%= self.styles[:base] %>">
+  <label for="<%= id %>" class="<%= self.styles[:label] %> <%= self.styles[:height][@height] %>">
+    <div class="<%= self.styles[:inner_div] %>">
+      <% if content? %>
+        <%= content %>
+      <% else %>
+        <%= create_icon %>
+
+        <% if @title != false %>
+          <p class="<%= self.styles[:title] %>">
+            <% if @title != true %>
+              <%= @title %>
+            <% else %>
+              <span class="font-semibold">Click to upload</span> or drag and drop
+            <% end %>
+          </p>
+        <% end %>
+
+        <% if @subtitle != false %>
+          <p class="<%= self.styles[:subtitle] %>">
+            <% if @subtitle != true %>
+              <%= @subtitle %>
+            <% else %>
+              SVG, PNG, JPG or GIF (MAX. 800x400px)
+            <% end %>
+          </p>
+        <% end %>
+      <% end %>
+    </div>
+    <% if @form.present? && @attribute.present? %>
+      <%= @form.file_field(@attribute, **@props) %>
+    <% else %>
+      <%= file_field_tag(@name, **@props) %>
+    <% end %>
+  </label>
+</div>
+<%= help_text %>
+<% end %>

data/app/components/fluxbit/form/dropzone_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::DropzoneComponent` provides a drag-and-drop file input zone with support for labels,
+# titles, subtitles, icons, validation states, and integration with Rails form builders.
+# It renders a visually rich area that lets users drag files or click to select a file, and is fully customizable
+# via its options and slot for custom content.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::DropzoneComponent.new(name: :avatar)
+#
+# @see docs/03_Forms/Dropzone.md For detailed documentation and examples.
+class Fluxbit::Form::DropzoneComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::DropzoneComponent
+
+  # Initializes the dropzone component with the given properties.
+  #
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param label [String] Label for the input (optional)
+  # @param title [Boolean, String] Title text above the dropzone (true for default, false to hide, or custom string)
+  # @param subtitle [Boolean, String] Subtitle text below the title (true for default, false to hide, or custom string)
+  # @param icon [String, Symbol] Icon to display above the title (defaults to config)
+  # @param icon_html [Hash] Extra props for the icon element
+  # @param height [Integer] Height preset (0: auto, 1: h-32, 2: h-64, 3: h-96; default is 0)
+  # @param help_text [String] Helper or error text below the field
+  # @param ... any other HTML attribute supported by file_field_tag
+  def initialize(**props)
+    super(**props)
+    @title = options(@props.delete(:title), default: true)
+    @subtitle = options(@props.delete(:subtitle), default: true)
+    @icon = @props.delete(:icon) || @@icon
+    @icon_html = @props.delete(:icon_html) || { class: styles[:icon] }
+    @height = @props.delete(:height) || @@height
+    add to: @props, class: "hidden"
+  end
+
+  def create_icon
+    anyicon(@icon, class: styles[:icon])
+  end
+end

data/app/components/fluxbit/form/field_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::FieldComponent < Fluxbit::Form::Component
+  def initialize(**props)
+    super
+    @props = props
+    @form = @props.delete(:form)
+    @attribute = @props.delete(:attribute)
+    @name = @props.delete(:name) || (@attribute if @form.present?)
+    @value = @props.delete(:value)
+    @id = @props.delete(:id)
+    @required = @props.delete(:required)
+
+    @object = @form&.object
+    @help_text = define_help_text(props.delete(:help_text), @object, @attribute)
+    @helper_popover = define_helper_popover(props.delete(:helper_popover), @object, @attribute)
+    @helper_popover_placement = props.delete(:helper_popover_placement) || "right"
+    @label = label_value(props.delete(:label), @object, @attribute, @id)
+    @wrapper_html = props.delete(:wrapper_html) || {}
+    @wrapper_html = { class: @wrapper_html } if @wrapper_html.is_a?(String)
+    define_wrapper_options
+  end
+
+  def define_wrapper_options
+    add(to: @wrapper_html, class: "required") if @required.present?
+    add(to: @wrapper_html, class: @name.to_s) if @name.present?
+  end
+end

data/app/components/fluxbit/form/form_builder_component.rb

@@ -89,7 +89,7 @@ class Fluxbit::Form::FormBuilderComponent < Fluxbit::Component
   end
 
   def element_type(type)
-    return "TextInput" if type.nil? || type.to_s.in?(TEXT_TYPES)
+    return "TextField" if type.nil? || type.to_s.in?(TEXT_TYPES)
     return type.to_s.concat("_input").camelcase if type.to_s.in?(INPUT_TYPES)
 
     case type

data/app/components/fluxbit/form/{helper_text_component.rb → help_text_component.rb}

@@ -1,11 +1,16 @@
 # frozen_string_literal: true
 
-# The `Fluxbit::HelperTextComponent` is a component for rendering customizable helper text elements.
+# The `Fluxbit::HelpTextComponent` is a component for rendering customizable helper text elements.
 # It extends `Fluxbit::Component` and provides options for configuring the helper text's
 # appearance and behavior. You can control the helper text's color and other attributes.
 # The helper text can have various styles applied based on the provided properties.
-class Fluxbit::Form::HelperTextComponent < Fluxbit::Form::Component
-  include Fluxbit::Config::Form::HelperTextComponent
+#
+# @example Basic usage
+#   = render Fluxbit::Form::HelpTextComponent.new { "Your password must be at least 8 characters." }
+#
+# @see docs/03_Forms/HelpText.md For detailed documentation and examples.
+class Fluxbit::Form::HelpTextComponent < Fluxbit::Form::Component
+  include Fluxbit::Config::Form::HelpTextComponent
 
   # Initializes the helper text component with the given properties.
   #
@@ -15,7 +20,7 @@ class Fluxbit::Form::HelperTextComponent < Fluxbit::Form::Component
   def initialize(color: nil, **props)
     super
     @props = props
-    color = @@color unless color.in? %i[info default success failure warning]
+    color = @@color unless color.in? styles[:colors].keys
     add class: style(color), to: @props, first_element: true
   end
 

data/app/components/fluxbit/form/label_component.rb

@@ -1,36 +1,40 @@
 # frozen_string_literal: true
 
+# The `Fluxbit::Form::LabelComponent` is a flexible and accessible label for form fields.
+# It supports custom content, helper popovers, multiple color styles, sizing options, and
+# displays associated help text when provided. It is fully compatible with Rails form builders.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::LabelComponent.new(with_content: "Your Name")
+#
+# @see docs/03_Forms/Label.md For detailed documentation and examples.
 class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
-  cattr_accessor :styles do
-    {
-      base: "flex font-medium",
-      colors: {
-        default: "text-gray-900 dark:text-white",
-        success: "text-green-700 dark:text-green-500",
-        failure: "text-red-700 dark:text-red-500",
-        info: "text-cyan-500 dark:text-cyan-600",
-        warning: "text-yellow-500 dark:text-yellow-600"
-      },
-      sizes: {
-        sm: "text-sm",
-        md: "text-md",
-        lg: "text-lg"
-      },
-      helper_popover: "px-2 text-slate-400"
-    }
-  end
+  include Fluxbit::Config::Form::LabelComponent
 
-  def initialize(color: :default, form: nil, with_content: nil, helper_text: nil,
-                 sizing: :sm, helper_popover: nil, helper_popover_placement: "right", **props)
+  # Initializes the label component with the given properties.
+  #
+  # @param with_content [String] The label text to display (alternative to block content)
+  # @param help_text [String, Array<String>] One or more help text messages to render below the label
+  # @param helper_popover [String] Popover content shown on icon hover
+  # @param helper_popover_placement [String] Placement of the popover (default: "right")
+  # @param sizing [Integer] Size index for label text (default: config default)
+  # @param color [Symbol] Label color (:default, :success, :danger, :info, :warning)
+  # @param class [String] Additional CSS classes for the label element
+  # @param ... any other HTML attribute supported by the <label> tag
+  def initialize(**props)
     super
     @props = props
-    @sizing = sizing.in?(styles[:sizes].keys) ? sizing : :sm
-    @with_content = with_content
-    @helper_text = helper_text.is_a?(Array) ? helper_text : [ helper_text ]
-    @helper_popover = helper_popover
-    @helper_popover_placement = helper_popover_placement
-    color = :default unless color.in? %i[info default success failure warning]
-    add class: styles[:colors][color], to: @props, first_element: true
+    @with_content = @props.delete(:with_content)
+    @help_text = @props.delete(:help_text)
+    @help_text = [ @help_text ] if !@help_text.is_a?(Array)
+    @helper_popover = @props.delete(:helper_popover)
+    @helper_popover_placement = @props.delete(:helper_popover_placement) || @@helper_popover_placement
+    @sizing = @props[:sizing].to_i || @@sizing
+    @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
+    @color = options(@props.delete(:color), collection: styles[:colors], default: @@color)
+    @required = @props.delete(:required) || false
+
+    add class: styles[:colors][@color], to: @props, first_element: true
     add class: styles[:base], to: @props, first_element: true
     add class: styles[:sizes][@sizing], to: @props, first_element: true
   end
@@ -39,7 +43,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
     return "" if @helper_popover.nil?
 
     content_tag :span,
-                anyicon(icon: "heroicons_solid:question-mark-circle", class: "w-4 h-4"),
+                anyicon(@@helper_popover_icon, class: @@helper_popover_icon_class),
                 {
                   "data-popover-placement": @helper_popover_placement,
                   "data-popover-target": target,
@@ -56,10 +60,16 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
   def call
     safe_join(
       [
-        content_tag(:label, safe_join([ content || @with_content, span_helper_popover ]), @props),
-        helper_text,
+        content_tag(:label, safe_join([ content || @with_content, span_helper_popover, required ]), @props),
+        help_text,
         render_popover
       ]
     )
   end
+
+  def required
+    return "" unless @required
+
+    content_tag(:span, "*", class: styles[:required])
+  end
 end

data/app/components/fluxbit/form/password_component.rb

@@ -0,0 +1,247 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::PasswordComponent` is a password input component that extends `Fluxbit::Form::TextFieldComponent`.
+# It provides a password field with a toggleable visibility icon (eye/eye-slash) and optional password strength indicators.
+# The component can display validation checks for password requirements such as length, letters, capital letters, numbers, and special characters.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::PasswordComponent.new(name: :password)
+#
+# @example With password strength checks
+#   = render Fluxbit::Form::PasswordComponent.new(name: :password, show_strength: true)
+#
+# @example Custom requirements
+#   = render Fluxbit::Form::PasswordComponent.new(
+#     name: :password,
+#     show_strength: true,
+#     min_length: 12,
+#     require_uppercase: true,
+#     require_lowercase: true,
+#     require_numbers: true,
+#     require_special: true
+#   )
+#
+# @see docs/03_Forms/Password.md For detailed documentation and examples.
+class Fluxbit::Form::PasswordComponent < Fluxbit::Form::TextFieldComponent
+  # Initializes the password field component with the given properties.
+  #
+  # @param form [ActionView::Helpers::FormBuilder] The form builder (optional, for Rails forms)
+  # @param attribute [Symbol] The model attribute to be used in the form (required if using form builder)
+  # @param show_strength [Boolean] Whether to display password strength indicators (default: false)
+  # @param min_length [Integer] Minimum password length requirement (default: 8)
+  # @param require_uppercase [Boolean] Require at least one uppercase letter (default: true)
+  # @param require_lowercase [Boolean] Require at least one lowercase letter (default: true)
+  # @param require_numbers [Boolean] Require at least one number (default: true)
+  # @param require_special [Boolean] Require at least one special character (default: false)
+  # @param strength_labels [Hash] Custom labels for strength checks
+  # @param ... any other options supported by TextFieldComponent
+  def initialize(**props)
+    @show_strength = props.delete(:show_strength) || false
+    @min_length = props.delete(:min_length) || 8
+
+    # Get boolean values, defaulting to true for uppercase/lowercase/numbers, false for special
+    uppercase_val = props.delete(:require_uppercase)
+    @require_uppercase = uppercase_val.nil? ? true : uppercase_val
+
+    lowercase_val = props.delete(:require_lowercase)
+    @require_lowercase = lowercase_val.nil? ? true : lowercase_val
+
+    numbers_val = props.delete(:require_numbers)
+    @require_numbers = numbers_val.nil? ? true : numbers_val
+
+    @require_special = props.delete(:require_special) || false
+    @strength_labels = props.delete(:strength_labels) || default_strength_labels
+
+    # Force type to password and add eye icon for visibility toggle
+    props[:type] = :password
+    props[:right_icon] ||= :"heroicons_outline:eye"
+
+    # Add data attributes for Stimulus controller
+    props[:data] ||= {}
+    # props[:data][:controller] = add_controller(props[:data][:controller], "fx-password")
+    props[:data][:action] = add_action(props[:data][:action], "input->fx-password#validate")
+
+    # Store right_icon_html for later use in create_right_icon
+    @password_right_icon_html = props.delete(:right_icon_html) || {}
+
+    # Set up wrapper_html with controller before calling super
+    props[:wrapper_html] ||= {}
+    props[:wrapper_html][:data] ||= {}
+    props[:wrapper_html][:data][:controller] = "fx-password"
+    props[:wrapper_html][:data].merge!(
+      {
+        "fx-password-target": "inputWrapper",
+        "fx-password-min-length-value": @min_length,
+        "fx-password-require-uppercase-value": @require_uppercase,
+        "fx-password-require-lowercase-value": @require_lowercase,
+        "fx-password-require-numbers-value": @require_numbers,
+        "fx-password-require-special-value": @require_special
+      }
+    )
+
+
+    super(**props)
+  end
+
+  def call
+    content_tag :div, **@wrapper_html do
+      safe_join [
+        label,
+        icon_container_wrapper,
+        help_text,
+        (@show_strength ? strength_indicator : nil)
+      ].compact
+    end
+  end
+
+  private
+
+  def password_styles
+    @password_styles ||= {
+      strength_wrapper: "mt-2 space-y-2",
+      strength_bar_wrapper: "space-y-1",
+      strength_bar_label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+      strength_bar_container: "w-full bg-slate-200 rounded-full h-2 dark:bg-slate-700",
+      strength_bar: "h-2 rounded-full transition-all duration-300 bg-slate-300 dark:bg-slate-600",
+      checks_list: "space-y-1",
+      check_item: "flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400",
+      check_icon: "flex-shrink-0 text-red-500 dark:text-red-400",
+      check_label: ""
+    }
+  end
+
+  def icon_container_wrapper
+    content_tag :div,
+      data: {
+        "fx-password-target": "inputWrapper",
+        "fx-password-min-length-value": @min_length,
+        "fx-password-require-uppercase-value": @require_uppercase,
+        "fx-password-require-lowercase-value": @require_lowercase,
+        "fx-password-require-numbers-value": @require_numbers,
+        "fx-password-require-special-value": @require_special
+      } do
+      icon_container
+    end
+  end
+
+  def default_strength_labels
+    {
+      length: I18n.t("fluxbit.form.password.checks.length", default: "At least %{count} characters", count: @min_length),
+      uppercase: I18n.t("fluxbit.form.password.checks.uppercase", default: "Contains uppercase letter"),
+      lowercase: I18n.t("fluxbit.form.password.checks.lowercase", default: "Contains lowercase letter"),
+      numbers: I18n.t("fluxbit.form.password.checks.numbers", default: "Contains number"),
+      special: I18n.t("fluxbit.form.password.checks.special", default: "Contains special character"),
+      strength: I18n.t("fluxbit.form.password.strength", default: "Password strength")
+    }
+  end
+
+  def strength_indicator
+    content_tag :div, class: password_styles[:strength_wrapper], data: { "fx-password-target": "strengthIndicator" } do
+      safe_join [
+        strength_bar,
+        strength_checks
+      ]
+    end
+  end
+
+  def strength_bar
+    content_tag :div, class: password_styles[:strength_bar_wrapper] do
+      safe_join([
+        content_tag(:div, class: password_styles[:strength_bar_label]) do
+          content_tag :span, @strength_labels[:strength]
+        end,
+        content_tag(:div, class: password_styles[:strength_bar_container]) do
+          content_tag :div,
+            "",
+            class: password_styles[:strength_bar],
+            data: { "fx-password-target": "strengthBar" }
+        end
+      ])
+    end
+  end
+
+  def strength_checks
+    content_tag :ul, class: password_styles[:checks_list] do
+      safe_join [
+        strength_check(:length, @strength_labels[:length]),
+        (@require_lowercase ? strength_check(:lowercase, @strength_labels[:lowercase]) : nil),
+        (@require_uppercase ? strength_check(:uppercase, @strength_labels[:uppercase]) : nil),
+        (@require_numbers ? strength_check(:numbers, @strength_labels[:numbers]) : nil),
+        (@require_special ? strength_check(:special, @strength_labels[:special]) : nil)
+      ].compact
+    end
+  end
+
+  def strength_check(type, label)
+    content_tag :li,
+      class: password_styles[:check_item],
+      data: { "fx-password-target": "check#{type.to_s.capitalize}" } do
+      safe_join([
+        # Icon container with both check and X icons
+        content_tag(:span, class: password_styles[:check_icon]) do
+          safe_join([
+            # X icon (visible by default - password requirement not met)
+            content_tag(:span,
+              data: { "fx-password-target": "check#{type.to_s.capitalize}Fail" }
+            ) do
+              anyicon(:"heroicons_solid:x-circle", class: "size-4")
+            end,
+            # Check icon (hidden by default - password requirement met)
+            content_tag(:span,
+              class: "hidden",
+              data: { "fx-password-target": "check#{type.to_s.capitalize}Pass" }
+            ) do
+              anyicon(:"heroicons_solid:check-circle", class: "size-4")
+            end
+          ])
+        end,
+        content_tag(:span, label, class: password_styles[:check_label])
+      ])
+    end
+  end
+
+  def add_controller(existing, new_controller)
+    existing ? "#{existing} #{new_controller}" : new_controller
+  end
+
+  def add_action(existing, new_action)
+    existing ? "#{existing} #{new_action}" : new_action
+  end
+
+  def add_class(existing, new_class)
+    existing ? "#{existing} #{new_class}" : new_class
+  end
+
+  # Override to render both eye icons with toggle visibility
+  def create_right_icon
+    return "" if @right_icon.nil?
+
+    # Build wrapper attributes
+    wrapper_attrs = {
+      class: add_class(@password_right_icon_html[:class], "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer"),
+      onclick: "", # Prevent pointer-events-none
+      data: {
+        action: "click->fx-password#toggleVisibility"
+      }
+    }
+
+    content_tag :div, **wrapper_attrs do
+      safe_join([
+        # Eye icon (visible by default)
+        content_tag(:div,
+          class: "#{styles[:additional_icons][:class][@color]}",
+          data: { "fx-password-target": "eyeIcon" }
+        ) do
+          eye_icon
+        end,
+        # Eye-slash icon (hidden by default)
+        content_tag(:div,
+          class: "#{styles[:additional_icons][:class][@color]} hidden",
+          data: { "fx-password-target": "eyeSlashIcon" }
+        ) do
+          eye_slash_icon
+        end
+      ])
+    end
+  end
+end