fluxbit_view_components 0.3.0 → 0.4.0

data/app/components/fluxbit/accordion_component.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::AccordionComponent` renders an accordion component following Flowbite styles.
+# It supports collapsible panels with headers and content, customizable icons, and various styling options.
+class Fluxbit::AccordionComponent < Fluxbit::Component
+  include Fluxbit::Config::AccordionComponent
+
+  renders_many :panels, lambda { |**attrs, &block|
+    panel = Panel.new(accordion_id: fx_id, flush: @flush, color: @color, **attrs)
+    block.call(panel) if block_given?
+    panel
+  }
+
+  ##
+  # Initializes the accordion component with the given properties.
+  #
+  # @param [Hash] **props The properties to customize the accordion.
+  # @option props [Boolean] :flush (false) When true, removes borders and rounded corners for seamless integration.
+  # @option props [Symbol, String] :color (:default) The color theme for accordion panels (default, light, primary, secondary, success, danger, warning, info, dark).
+  # @option props [Boolean] :collapse_all (false) When true, allows all panels to be collapsed simultaneously. When false, keeps at least one panel open.
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes for the accordion container.
+  #
+  # @return [Fluxbit::AccordionComponent]
+  def initialize(**props)
+    super
+    @props = props
+    @flush = options(@props.delete(:flush), default: @@flush)
+    @color = options(@props.delete(:color), collection: styles[:colors].keys, default: @@color).to_sym
+    @collapse_all = options(@props.delete(:collapse_all), default: @@collapse_all)
+  end
+
+  def before_render
+    add to: @props, first_element: true, class: [
+      styles[:base],
+      @flush ? "" : "border border-gray-200 dark:border-gray-700 rounded-xl"
+    ]
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+    @props[:id] ||= fx_id
+    @props["data-accordion"] = @collapse_all ? "collapse" : "open"
+  end
+
+  def call
+    tag.div(**@props) do
+      safe_join(panels)
+    end
+  end
+
+  class Panel < Fluxbit::Component
+    include Fluxbit::Config::AccordionComponent
+    renders_one :header
+    renders_one :body
+
+    ##
+    # Initializes an accordion panel with the given properties.
+    #
+    # @param [String] accordion_id The parent accordion's ID for proper ARIA relationships.
+    # @param [Boolean] flush (false) Whether the panel should use flush styling.
+    # @param [Symbol, String] color (:default) The color theme for this panel.
+    # @param [Boolean] open (false) Whether the panel should start in an expanded state.
+    # @param [Integer] index (0) The panel's position index for proper styling (first, middle, last).
+    # @param [Hash] **props Additional HTML attributes for the panel container.
+    #
+    # @return [Fluxbit::AccordionComponent::Panel]
+    def initialize(accordion_id:, **props)
+      super
+      @props = props
+      @accordion_id = accordion_id
+      @flush = options(@props.delete(:flush), default: @@flush)
+      @color = options(@props.delete(:color), collection: styles[:colors].keys, default: @@color).to_sym
+      @open = options(@props.delete(:open), default: false)
+      @index = options(@props.delete(:index), default: 0)
+    end
+
+    def call
+      header_id = "#{@accordion_id}-header-#{@index}"
+      content_id = "#{@accordion_id}-content-#{@index}"
+
+      header_base = styles[:item][:header][:base]
+      content_base = styles[:item][:content][:base]
+
+      if @flush
+        header_base = header_base.gsub(/border[^-]\S*/, "").gsub(/rounded-\S+/, "")
+        content_base = content_base.gsub(/border[^-]\S*/, "").gsub(/rounded-\S+/, "")
+      end
+
+      header_classes = [
+        header_base,
+        styles[:colors][@color][:header],
+        (@index == 0) ? styles[:item][:header][:first] : styles[:item][:header][:middle]
+      ].compact.join(" ")
+
+      content_classes = [
+        content_base,
+        styles[:colors][@color][:content],
+        (@index == 0) ? styles[:item][:content][:first] : styles[:item][:content][:middle]
+      ].compact.join(" ")
+
+      tag.div(class: styles[:item][:base]) do
+        concat(
+          tag.h2(id: header_id) do
+            tag.button(
+              type: "button",
+              class: header_classes,
+              "data-accordion-target" => "##{content_id}",
+              "aria-expanded" => @open.to_s,
+              "aria-controls" => content_id
+            ) do
+              concat(tag.span(header || "Accordion Header"))
+              concat(chevron_down(class: styles[:item][:icon][:base]))
+            end
+          end
+        )
+        concat(
+          tag.div(
+            body || "",
+            id: content_id,
+            class: [ @open ? "" : "hidden", content_classes ].join(" "),
+            "aria-labelledby" => header_id
+          )
+        )
+      end
+    end
+  end
+end

data/app/components/fluxbit/alert_component.rb

@@ -73,9 +73,9 @@ class Fluxbit::AlertComponent < Fluxbit::Component
   end
 
   def call
-    content_tag :div, @props do
+    tag.div(**@props) do
       concat @icon
-      concat content_tag(:div, content, class: "ml-3 text-sm font-medium")
+      concat tag.div(content, class: "ml-3 text-sm font-medium")
       concat close_button
     end
   end
@@ -103,24 +103,24 @@ class Fluxbit::AlertComponent < Fluxbit::Component
   def define_icon(icon, class_icon = "")
     return "" if icon == false
     icon = icon || @@icon
-    return anyicon(icon: icon, class: class_icon) if icon != :default
+    return anyicon(icon, class: class_icon) if icon != :default
 
-    anyicon(icon: "heroicons_solid:#{styles[:default_icons][@color]}", class: class_icon + " w-4 h-4")
+    anyicon("heroicons_solid:#{styles[:default_icons][@color]}", class: class_icon + " size-5")
   end
 
   def close_button
     return "" unless @can_close
 
     b_props = {
-      "aria-label" => "Close",
+      "aria-label" => t("fluxbit.alert.aria_close"),
       "data-dismiss-target" => "##{@props["id"]}",
       type: "button"
     }
 
     add to: b_props, class: [ styles[:close_button][:base], styles[:close_button][:colors][@color] ]
-    content_tag :button, b_props do
-      concat content_tag(:span, "Dismiss", class: "sr-only")
-      concat anyicon(icon: "heroicons_outline:x-mark", class: "w-5 h-5")
+    tag.button(**b_props) do
+      concat tag.span(t("fluxbit.alert.dismiss"), class: "sr-only")
+      concat anyicon("heroicons_outline:x-mark", class: "size-5")
     end
   end
 end

data/app/components/fluxbit/avatar_component.rb

@@ -55,11 +55,11 @@ class Fluxbit::AvatarComponent < Fluxbit::Component
   end
 
   def avatar_itself
-    return content_tag(:img, "", @props) unless @src.nil? || @placeholder_initials
+    return tag.img(**@props) unless @src.nil? || @placeholder_initials
 
-    content_tag :div, @props do
+    tag.div(**@props) do
       if @placeholder_initials
-        content_tag :span, @placeholder_initials, class: styles[:initials][:text]
+        tag.span(@placeholder_initials, class: styles[:initials][:text])
       else
         placeholder_icon
       end
@@ -80,8 +80,8 @@ class Fluxbit::AvatarComponent < Fluxbit::Component
       "clip-rule": "evenodd"
     }
 
-    content_tag(:svg, svg_attributes) do
-      content_tag(:path, "", path_attributes)
+    tag.svg(**svg_attributes) do
+      tag.path(**path_attributes)
     end
   end
 
@@ -92,20 +92,19 @@ class Fluxbit::AvatarComponent < Fluxbit::Component
   end
 
   def dot_indicator
-    content_tag :span,
-                "",
-                class: [
-                  styles[:status][:base],
-                  styles[:status][:options][@status],
-                  styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[0]],
+    tag.span("", class: [
+      styles[:status][:base],
+      styles[:status][:options][@status],
+      styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[0]],
                   styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[1]][@size]
                 ].join(" ")
+    )
   end
 
   def call
     return avatar_itself unless @status
 
-    content_tag :div, class: "relative" do
+    tag.div(class: "relative") do
       concat avatar_itself
       concat dot_indicator
     end

data/app/components/fluxbit/avatar_group_component.rb

@@ -11,7 +11,7 @@ class Fluxbit::AvatarGroupComponent < Fluxbit::Component
   renders_many :gravatars, Fluxbit::GravatarComponent
 
   def call
-    content_tag :div, class: styles[:group] do
+    tag.div(class: styles[:group]) do
       avatars.each do |avatar|
         concat render(avatar)
       end

data/app/components/fluxbit/badge_component.rb

@@ -36,12 +36,13 @@ class Fluxbit::BadgeComponent < Fluxbit::Component
   def initialize(**props)
     super
     @props = props
-    @color = @props.delete(:color) || @@color
-    @pill = @props.delete(:pill) || @@pill
-    @size = @props.delete(:size) || @@size
-    @perfect_rounded = @props.delete(:perfect_rounded) || @@perfect_rounded
-    @notification = @props.delete(:notification) || @@notification
-    @as = @props.delete(:as) || @@as
+    @color = options @props.delete(:color), collection: styles[:colors].keys, default: @@color
+    @pill = options @props.delete(:pill), default: @@pill
+    @size = options @props.delete(:size), default: @@size
+    @perfect_rounded = options @props.delete(:perfect_rounded), default: @@perfect_rounded
+    @notification = options @props.delete(:notification), default: @@notification
+    @as = options @props.delete(:as), default: @@as
+
     add(class: badge_classes, to: @props, first_element: true)
     @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
   end
@@ -63,9 +64,9 @@ class Fluxbit::BadgeComponent < Fluxbit::Component
         styles[:colors][@color.to_sym],
         styles[:sizes][@size.to_i],
         styles[:perfect_rounded][@perfect_rounded.to_i],
+        styles[:pill][@pill ? :on : :off],
         notification_classes
       ]
-      base_classes << "rounded-full" if @pill
       base_classes.join(" ")
     end
   end

data/app/components/fluxbit/banner_component.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::BannerComponent` is a customizable banner component that extends `Fluxbit::Component`.
+# It provides various options to display banner messages with different styles, positions, and behaviors
+# such as close functionality and call-to-action elements.
+#
+# Example usage:
+#   = render Fluxbit::BannerComponent.new(position: :top, color: :info).with_content("Banner message")
+#
+class Fluxbit::BannerComponent < Fluxbit::Component
+  include Fluxbit::Config::BannerComponent
+
+  renders_one :cta_button, lambda { |**props|
+    Fluxbit::ButtonComponent.new(**props)
+  }
+
+  renders_one :logo, lambda { |**props|
+    content_tag(:img, "", **props)
+  }
+
+  ##
+  # Initializes the banner component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the banner.
+  # @option props [Symbol, String] :position (:top) The position of the banner (top, bottom, sticky_top, sticky_bottom).
+  # @option props [Symbol, String] :color (:info) The color style of the banner.
+  # @option props [Symbol, String, Boolean] :icon (:default) The icon to display in the banner or `false` to omit.
+  # @option props [Hash] :icon_html ({}) Additional HTML attributes for the icon.
+  # @option props [Boolean] :dismissible (true) Determines if the banner can be dismissed.
+  # @option props [Boolean] :full_width (true) Determines if the banner spans the full width.
+  # @option props [String] :remove_class ('') Classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::BannerComponent]
+  #
+  # @example
+  #   = render Fluxbit::BannerComponent.new(position: :top, color: :info).with_content("Banner message")
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @position = define_position(@props.delete(:position) || @@position)
+    @color = define_color(@props.delete(:color) || @@color)
+    icon_prop = @props.delete(:icon)
+    icon_html = @props.delete(:icon_html) || {}
+    @icon = define_icon(icon_prop.nil? ? :default : icon_prop, icon_html)
+    @dismissible = @props[:dismissible].nil? ? @@dismissible : @props.delete(:dismissible)
+    @full_width = @props[:full_width].nil? ? @@full_width : @props.delete(:full_width)
+    @props["id"] = fx_id if @props["id"].nil?
+
+    declare_classes
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    tag.div(**@props) do
+      concat banner_content
+    end
+  end
+
+  private
+
+  def banner_content
+    content_wrapper_class = @full_width ? styles[:content_wrapper][:full_width] : styles[:content_wrapper][:constrained]
+
+    tag.div(class: content_wrapper_class) do
+      concat banner_left_content
+      concat banner_right_content if @dismissible || cta_button?
+    end
+  end
+
+  def banner_left_content
+    tag.div(class: styles[:left_content]) do
+      concat logo if logo?
+      concat @icon unless @icon.blank?
+      text_class = icon_or_logo_present? ? styles[:text][:with_icon_or_logo] : styles[:text][:without_icon_or_logo]
+      concat tag.div(content, class: text_class)
+    end
+  end
+
+  def banner_right_content
+    tag.div(class: styles[:right_content]) do
+      concat cta_button if cta_button?
+      concat dismiss_button if @dismissible
+    end
+  end
+
+  def icon_or_logo_present?
+    !@icon.blank? || logo?
+  end
+
+  def dismiss_button
+    button_props = {
+      "aria-label" => t("fluxbit.banner.aria_close"),
+      "data-dismiss-target" => "##{@props["id"]}",
+      type: "button",
+      class: styles[:dismiss_button][:base]
+    }
+
+    if cta_button?
+      add(to: button_props, class: styles[:dismiss_button][:with_cta])
+    end
+
+    tag.button(**button_props) do
+      concat tag.span(t("fluxbit.banner.dismiss"), class: styles[:screen_reader])
+      concat close_icon(class: styles[:close_icon])
+    end
+  end
+
+  def declare_classes
+    base_classes = [
+      styles[:base],
+      styles[:positions][@position],
+      styles[:colors][@color]
+    ]
+
+    add(to: @props, first_element: true, class: base_classes)
+  end
+
+  def define_position(position)
+    position.to_sym.in?(styles[:positions].keys) ? position.to_sym : @@position
+  end
+
+  def define_color(color)
+    color.to_sym.in?(styles[:colors].keys) ? color.to_sym : @@color
+  end
+
+  def define_icon(icon, icon_html = {})
+    return "" if icon == false
+    icon = icon || @@icon
+    icon_props = { class: styles[:icon_default] }.merge(icon_html)
+    icon_props[:class] = remove_class(icon_props.delete(:remove_class) || "", icon_props[:class])
+
+    return anyicon(icon, **icon_props) if icon != :default
+
+    anyicon("heroicons_solid:#{styles[:default_icons][@color]}", **icon_props)
+  end
+end