fluxbit_view_components 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16de56192c4f954e22b5391bbd8e94970a8345ede43ffaf8866050222a8d486a
-  data.tar.gz: fb3a6c03297fc0836ee3c61005e530cc32640e0c97dbc872945b661e6e2b95c6
+  metadata.gz: 5f5ca4fde5d32556cdbc0f25088912fa549531dea43e9e46557806c742a61a3c
+  data.tar.gz: 2feca2ea7274688b6d1e850aee6dc6d5638718718584e977514f0abf96cedd8e
 SHA512:
-  metadata.gz: 9127a488dc9bec5cc886886855edb7649e62a9ce36406e0c9aef4f956eb392fd9f21f42473459885eeb9758f19528c3185bd8729398852d91e17a27168a6cb40
-  data.tar.gz: 3bced6391398780c7877563c35f406ede7c4dc838c2ac9e410c99db815c1c58686d79aa034eff979c561010f191701329a7daa9c857ed06b521b6441ff9c502d
+  metadata.gz: 85ef792f0b9ead019bf89459531723043c7b771fe7b6c8f016ba03697d2e80d93139a081e0f4250d46545eb97b31f159fcaa9ba2bd5592c27053a0792c8063f5
+  data.tar.gz: da59d2153f6ea5bb116ee44ae2dd7fd8cd8631c9024ebe7972d5103eb58f1fc05012953386d4520aed4247970dc00fc810ede2afc08a0ecc8329db053b3d5cb6

data/README.md

@@ -1,5 +1,9 @@
 # Fluxbit ViewComponents
 
+![Gem Downloads (for latest version)](https://img.shields.io/gem/dtv/fluxbit_view_components) ![GitHub License](https://img.shields.io/github/license/arthurmolina/fluxbit_view_components) ![GitHub last commit](https://img.shields.io/github/last-commit/arthurmolina/fluxbit_view_components) ![Gem Downloads (for latest version)](https://img.shields.io/gem/dtv/fluxbit_view_components) ![Gem Total Downloads](https://img.shields.io/gem/dt/fluxbit_view_components) ![GitHub forks](https://img.shields.io/github/forks/arthurmolina/fluxbit_view_components)
+
+
+
 Fluxbit ViewComponents is an implementation of the Fluxbit Design System using [ViewComponent](https://github.com/github/view_component).
 
 <div style="text-align: center;">
@@ -8,7 +12,9 @@ Fluxbit ViewComponents is an implementation of the Fluxbit Design System using [
 
 ## Preview
 
-I don't have a site to host the lookbook. Sorry.
+We have a Lookbook app online to show the documentation and all the Components available in action!
+
+Just [Click here!](https://fluxbit.artz.to)
 
 ## Usage
 

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::CheckBoxComponent` is a form input component for check boxes and radio buttons.
+# It extends `Fluxbit::Form::FieldComponent` and provides a styled checkbox/radio with label, helper text,
+# and support for different visual states and groupings. It automatically adds the correct styles for both
+# checkbox and radio types and works with or without Rails form builders.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::CheckBoxComponent.new(name: :accept_terms, label: "Accept the terms")
+#
+# @see docs/03_Forms/CheckBox.md For detailed documentation and examples.
+class Fluxbit::Form::CheckBoxComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::CheckBoxComponent
+  TYPE_DEFAULT = :check_box
+  TYPE_OPTIONS = %i[check_box checkbox radio_button].freeze
+
+  # Initializes the check box component with the given properties.
+  #
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param label [String] Label text next to the input (optional)
+  # @param value [String] Value for the field (optional)
+  # @param type [String, Symbol] Input type (`"check_box"`, `"checkbox"`, `"radio_button"`)
+  # @param help_text [String] Helper or error text below the field
+  # @param disabled [Boolean] Disables the input if true
+  # @param checked [Boolean] Marks the input as checked if true
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by check_box_tag/radio_button_tag
+  def initialize(**props)
+    super(**props)
+    @type = options(@props.delete(:type), collection: TYPE_OPTIONS, default: TYPE_DEFAULT)
+    add(class: styles[:checkbox], to: @props, first_element: true) if @props[:type] == "checkbox"
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def input
+    if @form.present? && @attribute.present?
+      @form.public_send(@type, @attribute, @props)
+    else
+      public_send("#{@type}_tag", @name, @value, @props)
+    end
+  end
+
+  def call
+    if @help_text
+      content_tag :div, { class: "flex" } do
+        concat content_tag(:div, input, { class: styles[:input_div] })
+        concat content_tag(:div, safe_join([ label, help_text ]), { class: styles[:helper_div] })
+      end
+    else
+      content_tag :div, { class: styles[:no_helper_div] } do
+        concat input
+        concat label
+      end
+    end
+  end
+end

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

@@ -6,31 +6,32 @@ 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: [ :activerecord, :help_text, object.class.name.underscore.to_sym ],
         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?
+  def define_helper_popover(helper_popover, object, attribute)
+    return helper_popover if (helper_popover != false && !helper_popover.nil?) || object.nil?
 
-    I18n.t(field, scope: [ :activerecord, :helper_popover, object.class.name.underscore.to_sym ], default: nil)
+    object_name = object.class.name.underscore.to_sym
+    I18n.t(attribute, scope: [ :activerecord, :helper_popover, object_name ], 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)
+    return object.class.human_attribute_name(attribute) if label.nil? && !object.nil? && !attribute.nil?
     return id.to_s.humanize if label.nil? && !id.nil?
     return label unless label.nil?
 
@@ -52,20 +53,14 @@ class Fluxbit::Form::Component < Fluxbit::Component
   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?
+  def help_text
+    return "" if @help_text.blank? || @help_text.compact.blank?
 
-    # safe_join(
-    #   @helper_text.compact.map do |text|
-    #     Fluxbit::HelperTextComponent.new(color: @color).with_content(text).render_in(view_context)
-    #   end
-    # )
-
-    @helper_text.compact.map do |text|
-      concat Fluxbit::Form::HelperTextComponent.new(color: @color).with_content(text).render_in(view_context)
-    end
+    @help_text.compact.map do |text|
+      Fluxbit::Form::HelpTextComponent.new(color: @color).with_content(text).render_in(view_context)
+    end.join.html_safe
   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_props [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_props = @props.delete(:icon_props) || { class: styles[:icon] }
+    @height = @props.delete(:height) || @@height
+    add to: @props, class: "hidden"
+  end
+
+  def create_icon
+    anyicon(icon: @icon, class: styles[:icon])
+  end
+end

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

@@ -0,0 +1,26 @@
+# 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)
+
+    @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) || {}
+    define_wrapper_options
+  end
+
+  def define_wrapper_options
+    add(to: @wrapper_html, class: "required") if @props[:required].present?
+    add(to: @wrapper_html, class: @name) if @name.present?
+  end
+end

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

@@ -79,6 +79,7 @@ class Fluxbit::Form::FormBuilderComponent < Fluxbit::Component
                                   else
                                     ''
                                   end}#{element_type(kwargs[:type])}Component".constantize
+
     unless kwargs[:with_content]
       return content_tag(:div, render(component_klass.new(**kwargs), &block), class: outer_div)
     end
@@ -88,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
@@ -104,14 +105,11 @@ class Fluxbit::Form::FormBuilderComponent < Fluxbit::Component
   def generate_elements
     return elements if elements?
 
-    safe_join(*@elements.map { |element| choose_element(element.merge({ form: @form }), nil) })
-  end
-
-  def generate_div
-    safe_join errors?, content_tag(:div, generate_elements, @props)
+    safe_join(@elements.map { |element| choose_element(element.merge({ form: @form }), nil) })
   end
 
   def call
-    generate_div
+    elements_rendered = elements? ? elements : safe_join(@elements.map { |element| choose_element(element.merge({ form: @form }), nil) })
+    safe_join [ errors?, content_tag(:div, elements_rendered, @props) ]
   end
 end

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.
   #

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

@@ -1,36 +1,39 @@
 # 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, :failure, :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)
+
+    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 +42,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(icon: @@helper_popover_icon, class: @@helper_popover_icon_class),
                 {
                   "data-popover-placement": @helper_popover_placement,
                   "data-popover-target": target,
@@ -57,7 +60,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
     safe_join(
       [
         content_tag(:label, safe_join([ content || @with_content, span_helper_popover ]), @props),
-        helper_text,
+        help_text,
         render_popover
       ]
     )

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::RangeComponent` renders a styled range slider for selecting numeric values within a range.
+# It supports vertical and horizontal orientation, sizing options, helper text, labels, and full compatibility with Rails form builders.
+# Custom classes and HTML attributes can be passed for further styling and control.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::RangeComponent.new(name: :volume, label: "Volume")
+#
+# @see docs/03_Forms/Range.md For detailed documentation and examples.
+class Fluxbit::Form::RangeComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::RangeComponent
+
+  # Initializes the range 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 value [Numeric] Value for the range input (optional)
+  # @param min [Numeric] Minimum value for the range slider (optional)
+  # @param max [Numeric] Maximum value for the range slider (optional)
+  # @param step [Numeric] Step value for the slider (optional)
+  # @param vertical [Boolean] Renders the slider vertically if true (default: false)
+  # @param sizing [Integer] Size index for slider height/thickness (default: config default)
+  # @param help_text [String] Helper or error text below the field
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by the <input type="range"> tag
+  def initialize(**props)
+    super(**props)
+    @vertical = options(@props.delete(:vertical), collection: [ true, false ], default: @@vertical)
+    @sizing = @props[:sizing].to_i || @@sizing
+    @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
+    @props[:type] = "range"
+    @props[:style] = @props[:style] || "" + ";transform: rotate(270deg);" if @vertical
+
+    add(class: styles[:sizes][@sizing], to: @props, first_element: true)
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def range
+    if @form.nil?
+      text_field_tag @name, @value, @props
+    else
+      @form.text_field(@attribute, **@props)
+    end
+  end
+
+  def call
+    content_tag :div, **@wrapper_html do
+      safe_join [ label, range, help_text ]
+    end
+  end
+end

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::SelectComponent` is a styled dropdown/select field for forms.
+# It supports standard, grouped, and time zone options, integrates with Rails form builders,
+# and provides flexible props for prompt, disabled/selected options, helper text, and more.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::SelectComponent.new(name: :role, options: ["Admin", "User", "Guest"], label: "User Role")
+#
+# @see docs/03_Forms/Select.md For detailed documentation and examples.
+class Fluxbit::Form::SelectComponent < Fluxbit::Form::TextFieldComponent
+  # Initializes the select 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 value [String] Value for the field (optional)
+  # @param grouped [Boolean] Enables grouped select options (default: false)
+  # @param time_zone [Boolean] Uses Rails time zone select options (default: false)
+  # @param select_options [Hash] Options for select tag (prompt, selected, disabled, etc)
+  # @param choices [Array] List of choices for options (alternative to options)
+  # @param options [Array, Hash] List or hash of options (or groups if grouped)
+  # @param help_text [String] Helper or error text below the field
+  # @param class [String] Additional CSS classes for the select element
+  # @param ... any other HTML attribute supported by <select>
+  def initialize(**props)
+    super(**props)
+    @grouped = @props.delete(:grouped) || false
+    @time_zone = @props.delete(:time_zone) || false
+    @select_options = @props.delete(:select_options) || {}
+    @choices = @props.delete(:choices) || nil
+    @options = @props.delete(:options) || {}
+    @options = ::ActiveSupport::TimeZone.all if @time_zone
+  end
+
+  def input
+    if @form.present? && @attribute.present?
+      @form.select(
+        @attribute,
+        build_options_for_select,
+        @select_options,
+        @props
+      )
+    else
+      select_tag(
+        @name,
+        build_options_for_select,
+        @props
+      )
+    end
+  end
+
+  def build_options_for_select
+    if @grouped
+      grouped_options_for_select(
+        @options,
+        @selected,
+        disabled: @disabled_options,
+        prompt: @prompt,
+        divider: @divider
+      )
+    elsif @time_zone
+      time_zone_options_for_select(@selected)
+    else
+      options_for_select(@options, selected: @selected, disabled: @disabled_options)
+    end
+  end
+
+  private
+
+  def grouped_selected_option
+    @options.each do |group|
+      group_to_traverse = @divider ? group[1] : group
+      if group_to_traverse.is_a?(String)
+        return group_to_traverse if group_to_traverse == @selected.to_s
+
+        next
+      end
+
+      group_to_traverse.each do |item|
+        if item.is_a?(Array) && item[1] == @selected.to_s
+          return item[0]
+        elsif item.is_a?(String) && item == @selected.to_s
+          return item
+        end
+      end
+    end
+  end
+end