fluxbit_view_components 0.2.0 → 0.4.0

data/app/components/fluxbit/table_component.rb

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::TableComponent` is a customizable alert component that extends `Fluxbit::Component`.
+# It provides various options to display alert messages with different styles, icons, and behaviors
+# such as close functionality and animations.
+#
+# Example usage:
+#   = render Fluxbit::TableComponent.new(
+#     striped: true,
+#     bordered: true,
+#     hover: true,
+#     shadow: true,
+#     wrapper_html: { class: "my-custom-wrapper" },
+#     thead_html: { class: "my-custom-thead" },
+#     tbody_html: { class: "my-custom-tbody" },
+#     tr_html: { class: "my-custom-tr" }
+#   ) do |table|
+#     table.with_header do |header|
+#       header.with_column "Column 1"
+#       header.with_column "Column 2"
+#     end
+#
+#     table.with_row do |row|
+#       row.with_cell "Data 1"
+#       row.with_cell "Data 2"
+#     end
+#   end
+#
+class Fluxbit::TableComponent < Fluxbit::Component
+  include Fluxbit::Config::TableComponent
+
+  renders_one :footer, lambda { |*args, **props, &block|
+    add class: styles[:footer][:base], to: props
+    props[:as] ||= :tr
+    remove_class_from_props props
+
+    props[:cells_html] ||= {}
+    props[:cells_html][:as] ||= :td
+    props[:cells_html][:scope] ||= :row
+    add(class: styles[:footer][:cell], to: props[:cells_html])
+    remove_class_from_props props[:cells_html]
+
+    Fluxbit::TableGroupComponent.new(*args, **props, &block)
+  }
+
+  renders_many :headers, lambda { |*args, **props, &block|
+    add class: styles[:head][:base], to: props
+    props[:as] ||= :tr
+    remove_class_from_props props
+
+    props[:cells_html] ||= {}
+    props[:cells_html][:as] ||= :th
+    props[:cells_html][:scope] ||= :col
+    add(class: styles[:head][:cell], to: props[:cells_html])
+    remove_class_from_props props[:cells_html]
+
+    Fluxbit::TableGroupComponent.new(*args, **props, &block)
+  }
+
+  renders_many :rows, lambda { |*args, **props, &block|
+    color = props.delete(:color) || :default
+    add(class: styles[:row][:base], to: props)
+    add(class: styles[:row][:striped][color], to: props) if @striped
+    add(class: styles[:row][:hovered][color], to: props) if @hover
+    add(class: styles[:row][:bordered], to: props) if @bordered
+    add(class: styles[:row][:colors][color], to: props, first_element: true) if styles[:row][:colors].key?(color) && !@striped
+    props[:as] ||= :tr
+    remove_class_from_props props
+
+    props[:cells_html] ||= {}
+    props[:cells_html][:as] ||= :td
+    props[:cells_html][:scope] ||= :row
+    add(class: styles[:row][:cell][:base], to: props[:cells_html])
+    remove_class_from_props props[:cells_html]
+
+    Fluxbit::TableGroupComponent.new(*args, **props, &block)
+  }
+
+  ##
+  # Initializes the table component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the table.
+  # @option props [Boolean] :striped (false) Determines if the table rows should be striped.
+  # @option props [Boolean] :bordered (false) Determines if the table should have borders.
+  # @option props [Boolean] :hover (false) Determines if the table rows should highlight on hover.
+  # @option props [Boolean] :shadow (false) Determines if the table should have a shadow effect.
+  # @option props [Hash] :thead_html Additional HTML attributes for the table header.
+  # @option props [Hash] :tbody_html Additional HTML attributes for the table body.
+  # @option props [Hash] :tr_html Additional HTML attributes for the table rows.
+  # @option props [Hash] :cells_html Additional HTML attributes for the table cells.
+  #
+  # @example
+  #   = render Fluxbit::TableComponent.new(
+  #     striped: true,
+  #     bordered: true,
+  #     hover: true,
+  #     shadow: true,
+  #     thead_html: { class: "my-custom-thead" },
+  #     tbody_html: { class: "my-custom-tbody" },
+  #     tr_html: { class: "my-custom-tr" }
+  #   ) do |table|
+  #     table.with_header do |header|
+  #       header.with_column "Column 1"
+  #       header.with_column "Column 2"
+  #     end
+  #
+  #     table.with_row do |row|
+  #       row.with_cell "Data 1"
+  #       row.with_cell "Data 2"
+  #     end
+  #   end
+  #
+  # @return [Fluxbit::TableComponent]
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @striped = options @props.delete(:striped), default: @@striped
+    @bordered = options @props.delete(:bordered), default: @@bordered
+    @hover = options @props.delete(:hover), default: @@hover
+    @shadow = options @props.delete(:shadow), default: @@shadow
+    @only_rows = options @props.delete(:only_rows), default: false
+
+    # Wrapper HTML
+    @wrapper_html = @props.delete(:wrapper_html) || {}
+    add(class: styles[:wrapper][:base], to: @wrapper_html)
+    add(class: styles[:wrapper][:shadow], to: @wrapper_html) if @shadow
+
+    # Head HTML
+    @thead_html = @props.delete(:thead_html) || {}
+    # add(class: styles[:head][:base], to: @thead_html)
+
+    # Body HTML
+    @tbody_html = @props.delete(:tbody_html) || {}
+    add(class: styles[:body][:base], to: @tbody_html)
+
+    # Row HTML
+    @tr_html = @props.delete(:tr_html) || {}
+    add(class: styles[:body][:base], to: @tbody_html)
+
+    # Footer HTML
+    @tfoot_html = @props.delete(:tfoot_html) || {}
+    add(class: styles[:footer][:base], to: @tfoot_html)
+
+    # Table HTML
+    add(class: styles[:root][:base], to: @props)
+  end
+
+  def call
+    return safe_join(rows) if @only_rows && rows?
+
+    # Wrapper
+    capture do
+      # Table
+      concat(tag.div(**@wrapper_html) do
+        concat(tag.table(**@props) do
+          # header
+          concat(
+            tag.thead(**@thead_html) do
+              concat(safe_join headers)
+            end
+          ) if headers?
+
+          # body
+          concat(
+            tag.tbody(**@tbody_html) do
+              if content.present?
+                content
+              else
+                concat(safe_join(rows)) if rows?
+              end
+            end
+          )
+
+          # Footer
+          concat(
+            tag.tfoot(**@tfoot_html) do
+              concat(footer)
+            end
+          ) if footer?
+        end)
+      end)
+    end
+  end
+end

data/app/components/fluxbit/table_group_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class Fluxbit::TableGroupComponent < Fluxbit::Component
+  include Fluxbit::Config::TableComponent
+
+  renders_many :cells, lambda { |*args, **props, &block|
+    cells_html_now = @cells_html.dup
+    add(class: props[:class], to: cells_html_now)
+    cells_html_now = props.merge cells_html_now
+    add(class: styles[:row][:cell][:selected], to: cells_html_now) if props.delete(:selected) || false
+    remove_class_from_props(cells_html_now)
+
+    content_tag(@as_cells, block.call, **cells_html_now)
+  }
+
+  def initialize(**props)
+    super
+    @props = props
+    @as = @props.delete(:as) || :tr
+    @cells_html = @props.delete(:cells_html) || { as: :td }
+
+    @as_cells = @cells_html.delete(:as) || :td
+  end
+
+  def call
+    tag.tr(safe_join(cells), **@props)
+  end
+end

data/app/components/fluxbit/theme_button_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::ThemeButtonComponent` is a round button component that toggles between dark, light, and system themes.
+# It extends `Fluxbit::ButtonComponent` and automatically updates the theme when clicked.
+class Fluxbit::ThemeButtonComponent < Fluxbit::ButtonComponent
+  include Fluxbit::Config::ThemeButtonComponent
+
+  ##
+  # Initializes the theme button component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the theme button.
+  # @option props [Symbol, String] :color The color style of the button (default: :transparent)
+  # @option props [Symbol, String] :size The size of the button (default: 2)
+  # @option props [Boolean] :pill (true) Makes the button round
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::ThemeButtonComponent]
+  def initialize(**props)
+    # Set default values specific to theme button
+    props[:pill] = true unless props.key?(:pill)
+    props[:color] ||= :transparent
+    props[:size] ||= 2
+    props[:remove_dropdown_arrow] = true
+
+    # Add Stimulus controller
+    props["data-controller"] = [props["data-controller"], "fx-theme-button"].compact.join(" ")
+    props["data-action"] = [props["data-action"], "click->fx-theme-button#toggle"].compact.join(" ")
+
+    super(**props)
+  end
+
+  def call
+    concat(render_theme_button)
+    concat(render_popover_or_tooltip.to_s)
+  end
+
+  private
+
+  def render_theme_button
+    button_content = safe_join([
+      content_tag(:span, light_icon, class: "fx-theme-icon fx-theme-light hidden", "data-fx-theme-button-target": "lightIcon"),
+      content_tag(:span, dark_icon, class: "fx-theme-icon fx-theme-dark hidden", "data-fx-theme-button-target": "darkIcon"),
+      content_tag(:span, system_icon, class: "fx-theme-icon fx-theme-system hidden", "data-fx-theme-button-target": "systemIcon")
+    ])
+
+    content_tag(@as, button_content, @props)
+  end
+
+  def light_icon
+    # Sun icon for light mode
+    anyicon("heroicons_outline:sun", class: "size-5")
+  end
+
+  def dark_icon
+    # Moon icon for dark mode
+    anyicon("heroicons_outline:moon", class: "size-5")
+  end
+
+  def system_icon
+    # Computer/display icon for system mode
+    anyicon("heroicons_outline:computer-desktop", class: "size-5")
+  end
+end

data/app/components/fluxbit/timeline_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::TimelineComponent` is a component for rendering customizable timelines.
+class Fluxbit::TimelineComponent < Fluxbit::Component
+  include Fluxbit::Config::TimelineComponent
+
+  # Slot for timeline items
+  renders_many :items, lambda { |**props|
+    Fluxbit::TimelineItemComponent.new(
+      variant: @variant,
+      **props
+    )
+  }
+
+  # Initializes the Timeline component with various customization options.
+  #
+  # @param [Hash] **props The properties to customize the timeline.
+  # @option props [Symbol] :variant (:default) The timeline variant (:default, :vertical, :stepper, :activity).
+  # @option props [Symbol] :position (:left) The position of timeline indicators (:left, :center, :right).
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::TimelineComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    @variant = options @props.delete(:variant), collection: styles[:variants].keys, default: @@variant
+    @position = options @props.delete(:position), collection: styles[:positions].keys, default: @@position
+
+    add class: [
+      styles[:base],
+      styles[:variants][@variant],
+      styles[:positions][@position]
+    ], to: @props
+
+    remove_class_from_props(@props)
+  end
+
+  def call
+    content_tag(@variant == :stepper ? "ol" : "ul", **@props) do
+      items_with_position.join.html_safe
+    end
+  end
+
+  private
+
+  def items_with_position
+    items.map.with_index do |item, index|
+      item.instance_variable_set(:@is_last, index == items.length - 1)
+      item
+    end
+  end
+
+
+  def timeline_classes
+    [
+      styles[:base],
+      styles[:variants][@variant],
+      styles[:positions][@position]
+    ].compact.join(" ")
+  end
+end

data/app/components/fluxbit/timeline_item_component.html.erb

@@ -0,0 +1,64 @@
+<li <%= tag.attributes(**@props) %>>
+  <% if @variant == :activity %>
+    <div class="<%= styles[:activity][:indicator] %>"></div>
+    <div class="<%= styles[:activity][:base] %>">
+      <% if @date %>
+        <time class="<%= styles[:activity][:time] %>"><%= @date %></time>
+      <% end %>
+      <% if render_as_link? %>
+        <a href="<%= @href %>" class="<%= styles[:activity][:title] %>"><%= @title %></a>
+      <% else %>
+        <h3 class="<%= styles[:activity][:title] %>"><%= @title %></h3>
+      <% end %>
+      <% if @description %>
+        <p class="<%= styles[:activity][:description] %>"><%= @description %></p>
+      <% end %>
+    </div>
+  <% elsif @variant == :stepper %>
+    <div class="<%= styles[:stepper][:indicator_container] %>">
+      <div class="<%= stepper_indicator_classes %>">
+        <% if @icon %>
+          <%= icon(@icon, class: (@status == :completed || @status == :current) ? styles[:stepper][:icon_completed] : styles[:stepper][:icon]) %>
+        <% end %>
+      </div>
+      <% unless is_last? %>
+        <div class="<%= styles[:stepper][:connector] %>"></div>
+      <% end %>
+    </div>
+    <div class="<%= styles[:stepper][:content] %>">
+      <% if @title %>
+        <h3 class="<%= styles[:stepper][:title] %>"><%= @title %></h3>
+      <% end %>
+      <% if @date %>
+        <time class="<%= styles[:stepper][:description] %>"><%= @date %></time>
+      <% end %>
+      <% if @description %>
+        <p class="<%= styles[:stepper][:description_paragraph] %>"><%= @description %></p>
+      <% end %>
+    </div>
+  <% else %>
+    <!-- Default and vertical variants -->
+    <div class="<%= indicator_classes %>">
+      <% if @icon %>
+        <%= icon(@icon, class: styles[:item][:icon]) %>
+      <% else %>
+        <div class="<%= styles[:item][:dot] %>"></div>
+      <% end %>
+    </div>
+    <div class="<%= styles[:item][:content][:base] %>">
+      <% if @date %>
+        <time class="<%= styles[:item][:content][:date] %>"><%= @date %></time>
+      <% end %>
+      <% if @title %>
+        <% if render_as_link? %>
+          <a href="<%= @href %>" class="<%= styles[:item][:content][:title] %>"><%= @title %></a>
+        <% else %>
+          <h3 class="<%= styles[:item][:content][:title] %>"><%= @title %></h3>
+        <% end %>
+      <% end %>
+      <% if @description %>
+        <p class="<%= styles[:item][:content][:description] %>"><%= @description %></p>
+      <% end %>
+    </div>
+  <% end %>
+</li>

data/app/components/fluxbit/timeline_item_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::TimelineItemComponent` is a component for rendering individual timeline items.
+class Fluxbit::TimelineItemComponent < Fluxbit::Component
+  include Fluxbit::Config::TimelineComponent
+
+  # Initializes the TimelineItem component.
+  #
+  # @param [Hash] **props The properties to customize the timeline item.
+  # @option props [Symbol] :variant (nil) The timeline variant from parent component.
+  # @option props [String] :title (nil) The title of the timeline item.
+  # @option props [String] :description (nil) The description text.
+  # @option props [String] :date (nil) The date or time for the item.
+  # @option props [String, Symbol] :icon (nil) The icon to display in the timeline indicator.
+  # @option props [Symbol] :status (:default) The status of the item (:default, :completed, :current, :pending).
+  # @option props [Symbol] :color (:blue) The color theme (:blue, :green, :red, :yellow, :purple, :indigo).
+  # @option props [String] :href (nil) URL to make the item clickable.
+  # @option props [Symbol] :ring (:default) The ring size around indicator (:none, :small, :default, :large).
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::TimelineItemComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    @variant = @props.delete(:variant) || :default
+    @title = @props.delete(:title)
+    @description = @props.delete(:description)
+    @date = @props.delete(:date)
+    @icon = @props.delete(:icon)
+    @status = options @props.delete(:status), collection: styles[:item][:indicator][:status].keys, default: :default
+    @color = options @props.delete(:color), collection: styles[:item][:indicator][:colors].keys, default: :blue
+    @ring = options @props.delete(:ring), collection: styles[:item][:indicator][:rings].keys, default: :default
+    @href = @props.delete(:href)
+
+    if @variant != :stepper
+      add class: styles[:item][:base], to: @props
+    end
+
+    remove_class_from_props(@props)
+  end
+
+  def before_render
+    super
+    if @variant == :stepper
+      # Add stepper classes after @is_last is set
+      add class: styles[:stepper][:item], to: @props
+    end
+  end
+
+  private
+
+  def indicator_classes
+    [
+      styles[:item][:indicator][:base],
+      styles[:item][:indicator][:status][@status],
+      styles[:item][:indicator][:colors][@color],
+      styles[:item][:indicator][:rings][@ring]
+    ].compact.join(" ")
+  end
+
+  def render_as_link?
+    @href.present?
+  end
+
+  def is_last?
+    @is_last || false
+  end
+
+  def stepper_indicator_classes
+    if @status == :completed || @status == :current
+      styles[:stepper][:indicator_completed]
+    else
+      styles[:stepper][:indicator]
+    end
+  end
+end

data/app/components/fluxbit/tooltip_component.rb

@@ -24,7 +24,7 @@ class Fluxbit::TooltipComponent < Fluxbit::Component
   end
 
   def call
-    content_tag(:div, @props) do
+    tag.div(**@props) do
       concat content
       concat arrow
     end
@@ -33,6 +33,6 @@ class Fluxbit::TooltipComponent < Fluxbit::Component
   def arrow
     return "" unless @has_arrow
 
-    content_tag :div, "", "data-popper-arrow" => true, class: "tooltip-arrow"
+    tag.div("", "data-popper-arrow" => true, class: "tooltip-arrow")
   end
 end

data/app/helpers/fluxbit/components_helper.rb

@@ -3,37 +3,107 @@
 module Fluxbit
   module ComponentsHelper
     # Components
-    def fx_avatar(...) = fluxbit_method("Avatar", ...)
-    def fx_avatar_group(...) = fluxbit_method("AvatarGroup", ...)
-    def fx_gravatar(...) = fluxbit_method("Gravatar", ...)
-    def fx_alert(...) = fluxbit_method("Alert", ...)
-    def fx_button(...) = fluxbit_method("Button", ...)
-    def fx_button_group(...) = fluxbit_method("ButtonGroup", ...)
-    def fx_badge(...) = fluxbit_method("Badge", ...)
-    def fx_card(...) = fluxbit_method("Card", ...)
-    def fx_modal(...) = fluxbit_method("Modal", ...)
-    def fx_popover(...) = fluxbit_method("Popover", ...)
-    def fx_tooltip(...) = fluxbit_method("Tooltip", ...)
-    def fx_flex(...) = fluxbit_method("Flex", ...)
-    def fx_tab(...) = fluxbit_method("Tab", ...)
+    [ :accordion, :avatar, :avatar_group, :banner, :bottom_navigation, :breadcrumb, :gravatar, :alert, :button, :button_group, :link,
+      :badge, :carousel, :drawer, :dropdown, :card, :modal, :pagination, :popover, :tooltip, :flex, :tab, :table, :skeleton, :stepper, :speed_dial, :theme_button, :timeline, :spinner_percent, :progress ].each do |component|
+      define_method("fx_#{component}") do |*args, **kwargs, &block|
+        fluxbit_method(component.to_s.camelize, *args, **kwargs, &block)
+      end
+    end
 
     # Forms
-    def fx_helper_text(...) = fluxbit_method("Form::HelperText", ...)
-    def fx_checkbox_input(...) = fluxbit_method("Form::CheckboxInput", ...)
-    def fx_form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
-    def fx_label(...) = fluxbit_method("Form::Label", ...)
-    def fx_range_input(...) = fluxbit_method("Form::RangeInput", ...)
-    def fx_select_input(...) = fluxbit_method("Form::SelectInput", ...)
-    def fx_select_free_input(...) = fluxbit_method("Form::SelectFreeInput", ...)
-    def fx_text_input(...) = fluxbit_method("Form::TextInput", ...)
-    def fx_textarea_input(...) = fluxbit_method("Form::TextareaInput", ...)
-    def fx_toggle_input(...) = fluxbit_method("Form::ToggleInput", ...)
+    [ :help_text, :form_builder, :label, :range,
+      :toggle, :upload_image, :dropzone, :radio_group_button ].each do |component|
+      define_method("fx_#{component}") do |*args, **kwargs, &block|
+        fluxbit_method("Form::#{component.to_s.camelize}", *args, **kwargs, &block)
+      end
+    end
+
+    # Mimics Rails' select_tag signature:
+    # select_tag(name, option_tags = nil, options = {})
+    #
+    # @param name [String, Symbol] Name attribute for the select tag
+    # @param option_tags [String, Array, Hash, nil] Pre-formatted HTML or raw options data
+    # @param options [Hash] HTML attributes and select options (prompt, class, etc.)
+    # @param block [Proc] Optional block for custom options
+    #
+    # @example Basic usage
+    #   fx_select "role", ["Admin", "User", "Guest"]
+    #
+    # @example With options
+    #   fx_select "country", countries, prompt: "Select a country", class: "custom-select"
+    #
+    # @example With pre-formatted options
+    #   fx_select "status", options_for_select(statuses, selected: "active")
+    #
+    # @example Named parameters (backwards compatible)
+    #   fx_select name: "role", options: ["Admin", "User"], prompt: "Choose..."
+    def fx_select(name = nil, option_tags = nil, options = {}, &block)
+      # Handle both positional and named parameters
+      if name.is_a?(Hash)
+        # Named parameters: fx_select(name: "role", options: [...], prompt: "...")
+        options = name
+        name = options.delete(:name)
+        option_tags = options.delete(:options) || options.delete(:choices)
+      elsif option_tags.is_a?(Hash) && options.empty?
+        # Two args with second being options: fx_select("role", prompt: "...")
+        options = option_tags
+        option_tags = options.delete(:options) || options.delete(:choices)
+      end
+
+      # Set the options/choices
+      options[:options] = option_tags if option_tags.present?
+      options[:name] = name if name.present?
+
+      fluxbit_method("Form::Select", **options, &block)
+    end
     def form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
 
+    Fluxbit::Form::TextFieldComponent::TYPE_OPTIONS.each do |type|
+      define_method(type.in?([ :text_area, :textarea ]) ? "fx_#{type}" : "fx_#{type}_field") do |*args, **kwargs, &block|
+        fluxbit_method("Form::TextField", *args, type: type, **kwargs, &block)
+      end
+    end
+
+    Fluxbit::Form::CheckBoxComponent::TYPE_OPTIONS.each do |type|
+      define_method("fx_#{type}") do |*args, **kwargs, &block|
+        fluxbit_method("Form::CheckBox", *args, type: type, **kwargs, &block)
+      end
+    end
+
     # Typography
     def fx_heading(...) = fluxbit_method("Heading", ...)
     def fx_txt(...) = fluxbit_method("Text", ...)
 
+
+    def fx_link_to_old(body, url, **kwargs, &block)
+      kwargs[:body] = body if body.is_a?(String)
+      kwargs[:url] = url if url.is_a?(String)
+      kwargs[:with_content] = block if block_given?
+      Fluxbit::TextComponent.new(body, url, **kwargs).render(&block)
+    end
+
+    def fx_link_to(body = nil, url = nil, **kwargs, &block)
+      kwargs[:as] = :a
+      if block_given? && body.is_a?(String) && (url.is_a?(String) || url.is_a?(Symbol))
+        # Handle case: fx_link_to("Link text", "/path") { ... }
+        kwargs[:href] = url
+        fluxbit_method("Link", as: :a, content: body, **kwargs, &block)
+      elsif block_given? && body.is_a?(String) && url.nil?
+        # Handle case: fx_link_to("/path") { ... content ... }
+        kwargs[:href] = body # first arg is URL
+        fluxbit_method("Link", as: :a, **kwargs, &block)
+      elsif !block_given? && body.is_a?(String) && (url.is_a?(String) || url.is_a?(Symbol))
+        # Handle case: fx_link_to("Link text", "/path", class: "...")
+        component_klass = "Fluxbit::LinkComponent".constantize
+        kwargs[:href] = url
+        render(component_klass.new(**kwargs).with_content(body))
+      else
+        # Handle other cases or provide feedback
+        raise ArgumentError, "Invalid arguments for fx_link_to"
+      end
+    end
+
+
     def fluxbit_method(method_name, *args, **kwargs, &c)
       component_klass = "Fluxbit::#{method_name}Component".constantize
       if kwargs[:with_content]
@@ -43,33 +113,5 @@ module Fluxbit
         render(component_klass.new(*args, **kwargs), &c)
       end
     end
-
-    # # Succint method for render component
-    # # from: https://dev.to/abeidahmed/advanced-viewcomponent-patterns-in-rails-2b4m
-    # #
-    # # Instead of using 'render XComponent'
-    # # One can use 'render_component "X", **@options'
-    # def render_component(component_path, collection: nil, with_content: nil, **options, &block)
-    #   component_klass = "#{component_path.classify}Component".constantize
-
-    #   return render component_klass.new(**options).with_content(with_content) if with_content
-
-    #   if collection
-    #     render component_klass.with_collection(collection, **options), &block
-    #   else
-    #     render component_klass.new(**options), &block
-    #   end
-    # end
-
-    # def method_missing(name, *args, &block)
-    #   if name == :alert
-    #     render component_klass.new(**options), &block
-    #     # do something if the method name is "custom_helper_method"
-    #     #content_tag(:div, *args, &block)
-    #   else
-    #     # call the original method_missing method if the method name is not recognized
-    #     super
-    #   end
-    # end
   end
 end