fluxbit_view_components 0.1.0

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::RangeInputComponent < Fluxbit::Form::Component
+  cattr_accessor :styles do
+    {
+      base: "w-full bg-slate-200 rounded-lg appearance-none cursor-pointer dark:bg-slate-700",
+      sizes: {
+        sm: "h-1 range-sm",
+        md: "h-2",
+        lg: "h-3 range-lg"
+      }
+    }
+  end
+
+  def initialize(form: nil, field: nil, sizing: :md, label: nil, helper_text: nil, helper_popover: nil,
+                 helper_popover_placement: "right", **props)
+    super
+    @form = form
+    @field = field
+    @object = form&.object
+    @sizing = sizing.in?(styles[:sizes].keys) ? sizing : :md
+    @props = props
+    @label = label_value(label, @object, field, id)
+    @helper_text = define_helper_text(helper_text, @object, field)
+    @helper_popover = define_helper_popover(helper_popover, @object, field)
+    @helper_popover_placement = helper_popover_placement
+    @props[:type] = "range"
+
+    add(class: styles[:sizes][@sizing], to: @props, first_element: true)
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def id
+    return @id ||= (0...30).map { ("a".."z").to_a[rand(26)] }.join if @props[:id].nil? && @form.nil?
+    return @props[:id] unless @props[:id].nil?
+
+    "#{@form.object_name}_#{@field}"
+  end
+
+  def range
+    if @form.nil?
+      content_tag :input, content, @props
+    else
+      @form.text_field(@field, **@props)
+    end
+  end
+
+  def call
+    safe_join([ label, range, helper_text ])
+  end
+end

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

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::SelectFreeInputComponent < Fluxbit::Form::Component
+  def initialize(free_option: "Specify...", **kwargs, &block)
+    super
+
+    @kwargs = kwargs
+    @block = block
+    @free_option = free_option
+  end
+
+  def call
+    if @kwargs[:with_content]
+      content = @kwargs.delete(:with_content)
+      content_tag :div do
+        concat render(Fluxbit::Form::SelectInputComponent.new(**select_params).with_content(content), &@block)
+        concat render(Fluxbit::Form::TextInputComponent.new(**text_params).with_content(content), &@block)
+      end
+    else
+      content_tag :div do
+        concat render(Fluxbit::Form::SelectInputComponent.new(**select_params), &@block)
+        concat render(Fluxbit::Form::TextInputComponent.new(**text_params), &@block)
+      end
+    end
+  end
+
+  private
+
+  def select_params
+    @kwargs[:options].push @free_option
+    @kwargs.merge(
+      {
+        class: (corresponding_options? ? "" : "hidden").to_s,
+        onchange: "
+          const select = this.selectedOptions[0];
+          const input = this.parentElement.querySelector('div > input');
+          const input_div = this.parentElement.querySelector('div');
+          if(select.value == '#{@free_option}') {
+            input.value = ''
+            this.classList.add('hidden');
+            input_div.classList.remove('hidden');
+          } else {
+            input.value = select.value;
+          }
+        "
+      }
+    )
+  end
+
+  def text_params
+    @kwargs.merge(
+      {
+        label: false,
+        helper_popover: false,
+        helper_text: false,
+        right_icon: "heroicons_solid:x-mark:cursor-pointer",
+        right_icon_props: {
+          onclick: "
+          this.parentElement.classList.add('hidden');
+          this.parentElement.querySelector('input').value='';
+          this.parentElement.parentElement.querySelector('select').classList.remove('hidden');
+          this.parentElement.parentElement.querySelector('select').selectedIndex = null;
+        "
+        },
+        div_props: { class: (corresponding_options? ? "hidden" : "").to_s }
+      }
+    )
+  end
+
+  def corresponding_options?
+    value.blank? || @kwargs[:options].include?(value)
+  end
+
+  def value
+    @kwargs[:value] || @kwargs[:form].object[@kwargs[:field]]
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::SelectInputComponent < Fluxbit::Form::Component
+  def initialize(**kwargs, &block)
+    super
+    kwargs[:type] = :select
+
+    @component_klass = "Fluxbit::Form::TextInputComponent".constantize
+    @kwargs = kwargs
+    @block = block
+  end
+
+  def call
+    if @kwargs[:with_content]
+      content = @kwargs.delete(:with_content)
+      render(@component_klass.new(**@kwargs).with_content(content), &@block)
+    else
+      render(@component_klass.new(**@kwargs), &@block)
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::SpacerInputComponent < Fluxbit::Component
+  def initialize(with_content: "", **_args)
+    super
+    @with_content = with_content
+  end
+
+  def call
+    content || @with_content
+  end
+end

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

@@ -0,0 +1,225 @@
+# frozen_string_literal: true
+
+#
+# @param
+# form: The form to create a input element
+# options: {
+#   size: :large, :base, :small,
+#   label: nil | 'Label',
+#   placeholder: nil | 'placeholder',
+#   validators: [:required]
+#   required: true | false | message,
+# }
+#
+# Validators can be predefined or customized:
+# [:required, :min_length, :max_length, :min_value, :max_value,
+#   { type: :regexp, regex: /dd/, success: '', failure: ''},
+# ]
+#
+class Fluxbit::Form::TextInputComponent < Fluxbit::Form::Component
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  cattr_accessor :styles do
+    {
+      default: "mt-1 block w-full border disabled:cursor-not-allowed disabled:opacity-50 disabled:text-slate-900 disabled:dark:text-slate-400 disabled:bg-slate-100 disabled:dark:bg-slate-700",
+      text: {
+        default: "text-slate-900 dark:text-white",
+        success: "text-green-900",
+        failure: "text-red-900",
+        info: "text-cyan-900",
+        warning: "text-yellow-900"
+      },
+      ring: {
+        default: "focus:ring-blue-500 dark:focus:ring-blue-500",
+        success: "focus:ring-green-500",
+        failure: "focus:ring-red-500",
+        info: "focus:ring-cyan-500",
+        warning: "focus:ring-yellow-500"
+      },
+      bg: {
+        default: "bg-slate-50 dark:bg-slate-700",
+        success: "bg-green-50 dark:bg-green-100",
+        failure: "bg-red-50 dark:bg-red-100",
+        info: "bg-cyan-50 dark:bg-cyan-100",
+        warning: "bg-yellow-50 dark:bg-yellow-100"
+      },
+      placeholder: {
+        default: "dark:placeholder-slate-400",
+        success: "placeholder-green-700",
+        failure: "placeholder-red-700",
+        info: "placeholder-cyan-700",
+        warning: "placeholder-yellow-700"
+      },
+      border: {
+        default: "border-slate-300 focus:border-blue-500 dark:border-slate-600 dark:focus:border-blue-500",
+        success: "border-green-500 focus:border-green-500 dark:border-green-400",
+        failure: "border-red-500 focus:border-red-500 dark:border-red-400",
+        info: "border-cyan-500 focus:border-cyan-500 dark:border-cyan-400",
+        warning: "border-yellow-500 focus:border-yellow-500 dark:border-yellow-400"
+      },
+      shadow: "shadow-xs dark:shadow-xs-light",
+      icon: "pl-10",
+      right_icon: "pr-10",
+      sizing: {
+        md: "p-2.5 text-sm rounded-lg",
+        lg: "p-4 sm:text-md rounded-lg",
+        sm: "p-2 rounded-lg sm:text-xs",
+        md_addon: "p-2.5 rounded-none rounded-r-lg flex-1 min-w-0 text-sm"
+      },
+      additional_icons: {
+        class: {
+          default: "mt-1 w-4 h-4 text-slate-500 dark:text-slate-400",
+          success: "mt-1 w-4 h-4 text-green-500 dark:text-green-400",
+          failure: "mt-1 w-4 h-4 text-red-500 dark:text-red-400",
+          info: "mt-1 w-4 h-4 text-cyan-500 dark:text-cyan-400",
+          warning: "mt-1 w-4 h-4 text-yellow-500 dark:text-yellow-400"
+        },
+        icon: "absolute inset-y-0 left-0 flex items-center pl-3",
+        right_icon: "absolute inset-y-0 right-0 flex items-center pr-3",
+        addon: {
+          default: "mt-1 inline-flex items-center px-3 text-sm text-slate-900 bg-slate-200 border border-r-0 border-slate-300 rounded-l-md dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600",
+          success: "mt-1 inline-flex items-center px-3 text-sm text-green-900 bg-green-200 border border-r-0 border-green-300 rounded-l-md dark:bg-green-600 dark:text-green-400 dark:border-green-600",
+          failure: "mt-1 inline-flex items-center px-3 text-sm text-red-900 bg-red-200 border border-r-0 border-red-300 rounded-l-md dark:bg-red-600 dark:text-red-400 dark:border-red-600",
+          info: "mt-1 inline-flex items-center px-3 text-sm text-cyan-900 bg-cyan-200 border border-r-0 border-cyan-300 rounded-l-md dark:bg-cyan-600 dark:text-cyan-400 dark:border-cyan-600",
+          warning: "mt-1 inline-flex items-center px-3 text-sm text-yellow-900 bg-yellow-200 border border-r-0 border-yellow-300 rounded-l-md dark:bg-yellow-600 dark:text-yellow-400 dark:border-yellow-600"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+
+  def initialize(form: nil, field: nil, id: nil, shadow: false, type: "text", helper_text: nil,
+                 helper_popover: nil, helper_popover_placement: "right", icon: nil,
+                 right_icon: nil, addon: nil, color: nil, label: nil, sizing: :md, i18n: nil, options: [],
+                 validators: [], div_props: {}, icon_props: {}, right_icon_props: {}, addon_props: {}, **props)
+    super
+    @form = form
+    @object = form&.object
+    @field = field
+    @id = id
+    @shadow = shadow
+    @type = valid_input_type(type)
+    @helper_text = define_helper_text(helper_text, @object, field)
+    @helper_popover = define_helper_popover(helper_popover, @object, field)
+    @helper_popover_placement = helper_popover_placement
+    @icon = icon
+    @right_icon = right_icon
+    @addon = addon
+    @color = valid_color(color)
+    @label = label_value(label, @object, field, id)
+    @sizing = sizing_with_addon(sizing, addon)
+    @validators = validators
+    @props = props.merge(type: @type)
+    @options = options
+    @sizing = :md_addon if addon
+    @div_props = div_props
+    @icon_props = icon_props
+    @right_icon_props = right_icon_props
+    @addon_props = addon_props
+
+    declare_classes
+  end
+
+  def call
+    safe_join [ label, icon_container, helper_text ]
+  end
+
+  private
+
+  def valid_input_type(type)
+    %w[email password number search time date datetime-local select].include?(type.to_s) ? type.to_s : "text"
+  end
+
+  def valid_color(color)
+    return color if styles[:bg].key?(color)
+    return :failure if errors.present?
+
+    :default
+  end
+
+  def sizing_with_addon(sizing, addon)
+    return :md_addon if addon
+
+    sizing.in?(%i[md sm lg]) ? sizing : :md
+  end
+
+  def declare_classes
+    add to: @props,
+        first_element: true,
+        class: [
+          styles[:default],
+          (@props.key?(:readonly) || @props.key?(:disabled) ? styles[:text][@color] : ""),
+          styles[:ring][@color],
+          styles[:bg][@color],
+          styles[:placeholder][@color],
+          styles[:border][@color],
+          styles[:sizing][@sizing],
+          (@shadow ? styles[:shadow] : ""),
+          (@right_icon ? styles[:right_icon] : ""),
+          (@icon ? styles[:icon] : "")
+        ].join(" ")
+  end
+
+  def icon(icon_v, tag: :div, props: nil)
+    return "" if icon_v.blank?
+
+    content_tag(
+      tag,
+      anyicon(
+        icon: icon_v,
+        class: styles[:additional_icons][:class][@color]
+      ),
+      **props
+    )
+  end
+
+  def create_icon
+    add class: styles[:additional_icons][:icon], to: @icon_props
+    add(class: "pointer-events-none", to: @icon_props) unless events?(@icon_props)
+    icon(@icon, props: @icon_props)
+  end
+
+  def create_addon
+    add class: styles[:additional_icons][:addon][@color], to: @addon_props
+    icon(@addon, tag: :span, props: @addon_props)
+  end
+
+  def create_right_icon
+    add class: styles[:additional_icons][:right_icon], to: @right_icon_props
+    add(class: "pointer-events-none", to: @right_icon_props) unless events?(@right_icon_props)
+    icon(@right_icon, props: @right_icon_props)
+  end
+
+  def events?(props)
+    props.keys.intersection(
+      %i[onclick onsubmit onchange onkeydown onkeyup onkeypress href]
+    ).present?
+  end
+
+  def input
+    return content_tag :input, content, @props if @form.nil?
+
+    if @type == "select"
+      @props[:prompt] = @props[:placeholder] if @props[:placeholder]
+      return @form.select(@field, @options || [], {}, @props)
+    end
+
+    @form.text_field(@field, **@props)
+  end
+
+  def icon_container_with_addon
+    add class: "flex", to: @div_props
+    content_tag :div, safe_join([ create_addon, create_right_icon, input ]), @div_props
+  end
+
+  def icon_container_without_addon
+    add class: "relative w-full", to: @div_props
+    content_tag :div, safe_join([ create_icon, create_right_icon, input ]), @div_props
+  end
+
+  def icon_container
+    return input if @icon.nil? && @right_icon.nil? && @addon.nil?
+    return icon_container_with_addon unless @addon.nil?
+
+    icon_container_without_addon
+  end
+end

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::TextareaInputComponent < Fluxbit::Form::Component
+  # rubocop: disable Layout/LineLength
+  cattr_accessor :styles do
+    {
+      base: "mt-1 block w-full rounded-lg border disabled:cursor-not-allowed disabled:opacity-50 text-sm",
+      bg: {
+        default: "bg-slate-50 border-slate-300 text-slate-900 focus:border-blue-500 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-slate-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+        success: "border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500",
+        failure: "border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500",
+        info: "border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500",
+        warning: "border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500"
+      },
+      shadow: "shadow-xs dark:shadow-xs-light"
+    }
+  end
+  # rubocop: enable Layout/LineLength
+
+  def initialize(form: nil, field: nil, color: nil, label: nil, helper_text: nil, helper_popover: nil,
+                 helper_popover_placement: "right", shadow: false, **props)
+    super
+    @form = form
+    @object = form&.object
+    @field = field
+    @shadow = shadow
+    @color = valid_color(color)
+    @props = props
+    @label = label_value(label, @object, field, id)
+    @helper_text = define_helper_text(helper_text, @object, field)
+    @helper_popover = define_helper_popover(helper_popover, @object, field)
+    @helper_popover_placement = helper_popover_placement
+
+    add(class: styles[:shadow], to: @props, first_element: true) if shadow
+    add(class: styles[:bg][@color], to: @props, first_element: true)
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def valid_color(color)
+    return color if styles[:bg].key?(color)
+    return :failure if errors.present?
+
+    :default
+  end
+
+  def textarea
+    if @form.nil?
+      content_tag :textarea, content, @props
+    else
+      @form.text_area(@field, **@props)
+    end
+  end
+
+  def call
+    safe_join([ label, textarea, helper_text ])
+  end
+end

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

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::ToggleInputComponent < Fluxbit::Form::Component
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  cattr_accessor :styles do
+    {
+      root: {
+        base: "relative inline-flex items-center mr-2",
+        base2: "relative inline-flex items-center",
+        no_helper_text: "mb-5",
+        active: {
+          on: "cursor-pointer",
+          off: "cursor-not-allowed opacity-50"
+        },
+        label: "ml-3 text-sm font-medium text-slate-900 dark:text-slate-300",
+        input: "sr-only peer"
+      },
+      toggle: {
+        base: "toggle-bg rounded-full after:rounded-full peer peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border after:transition-all",
+        checked: {
+          default: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600",
+          success: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",
+          failure: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",
+          info: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600",
+          warning: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-600",
+          dark: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-600",
+          light: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-100 peer-checked:bg-gray-100",
+          teal: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",
+          purple: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",
+          cyan: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600",
+          lime: "peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-600",
+          indigo: "peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600",
+          pink: "peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600"
+        },
+        unchecked: {
+          default: "bg-slate-200 dark:bg-slate-700 dark:border-slate-600 after:border-slate-300",
+          blue: "bg-blue-600 dark:bg-blue-500 dark:border-blue-500 after:border-blue-600",
+          success: "bg-green-600 dark:bg-green-500 dark:border-green-500 after:border-green-600",
+          failure: "bg-red-600 dark:bg-red-500 dark:border-red-500 after:border-red-600",
+          info: "bg-cyan-600 dark:bg-cyan-500 dark:border-cyan-500 after:border-cyan-600",
+          warning: "bg-yellow-600 dark:bg-yellow-500 dark:border-yellow-500 after:border-yellow-600",
+          teal: "bg-teal-600 dark:bg-teal-500 dark:border-teal-500 after:border-teal-600",
+          purple: "bg-purple-600 dark:bg-purple-500 dark:border-purple-500 after:border-purple-600",
+          cyan: "bg-cyan-600 dark:bg-cyan-500 dark:border-cyan-500 after:border-cyan-600",
+          lime: "bg-lime-600 dark:bg-lime-500 dark:border-lime-500 after:border-lime-600",
+          indigo: "bg-indigo-600 dark:bg-indigo-500 dark:border-indigo-500 after:border-indigo-600",
+          pink: "bg-pink-600 dark:bg-pink-500 dark:border-pink-500 after:border-pink-600",
+          dark: "bg-gray-600 dark:bg-gray-800 dark:border-gray-600 after:border-gray-300",
+          light: "bg-gray-50 dark:bg-gray-300 dark:border-gray-200 after:border-gray-50",
+          light_success: "bg-green-200 dark:bg-green-700 dark:border-green-600 after:border-green-300",
+          light_failure: "bg-red-200 dark:bg-red-700 dark:border-red-600 after:border-red-300",
+          light_info: "bg-cyan-200 dark:bg-cyan-700 dark:border-cyan-600 after:border-cyan-300",
+          light_warning: "bg-yellow-200 dark:bg-yellow-700 dark:border-yellow-600 after:border-yellow-300",
+          light_teal: "bg-teal-200 dark:bg-teal-700 dark:border-teal-600 after:border-teal-300",
+          light_purple: "bg-purple-200 dark:bg-purple-700 dark:border-purple-600 after:border-purple-300",
+          light_cyan: "bg-cyan-200 dark:bg-cyan-700 dark:border-cyan-600 after:border-cyan-300",
+          light_lime: "bg-lime-200 dark:bg-lime-700 dark:border-lime-600 after:border-lime-300",
+          light_indigo: "bg-indigo-200 dark:bg-indigo-700 dark:border-indigo-600 after:border-indigo-300",
+          light_pink: "bg-pink-200 dark:bg-pink-700 dark:border-pink-600 after:border-pink-300"
+        },
+        sizes: {
+          sm: "w-9 h-5  after:top-[2px] after:left-[2px] after:h-4 after:w-4",
+          md: "w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5",
+          lg: "w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6"
+        }
+      },
+      right_sided: {
+        top: "flex items-center justify-between py-4",
+        inside: "flex flex-col"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+
+  renders_one :helper, "Fluxbit::Form::HelperTextComponent"
+
+  def initialize(form: nil, field: nil, color: nil, unchecked_color: :default, sizing: :md,
+                 right_sided: false, label: nil, helper_text: nil, helper_popover: nil,
+                 helper_popover_placement: "right", **props)
+    super
+    @form = form
+    @field = field
+    @object = form&.object
+    @right_sided = right_sided
+    @sizing = sizing.in?(styles[:toggle][:sizes].keys) ? sizing : :md
+    @color = valid_color(color)
+    @unchecked_color = unchecked_color.in?(styles[:toggle][:unchecked].keys) ? unchecked_color : :default
+    @props = props
+    @label = label_value(label, @object, field, id)
+    @helper_text = define_helper_text(helper_text, @object, field)
+    @helper_popover = define_helper_popover(helper_popover, @object, field)
+    @helper_popover_placement = helper_popover_placement
+    @label_class = "ml-2" unless right_sided
+
+    # Input
+    @props[:type] = "checkbox"
+    declare_classes
+  end
+
+  def valid_color(color)
+    return color if styles[:toggle][:checked].key?(color)
+    return :failure if errors.present?
+
+    :default
+  end
+
+  def declare_classes
+    add(class: styles[:root][:input], to: @props)
+
+    # Root
+    @root_element = { class: "#{styles[:root][:base]} #{styles[:root][:active][(@props[:disabled] ? :off : :on)]}" }
+
+    # Toggle
+    @toggle_element = {
+      class:
+            [
+              styles[:toggle][:base],
+              styles[:toggle][:unchecked][@unchecked_color],
+              styles[:toggle][:checked][@color],
+              styles[:toggle][:sizes][@sizing]
+            ].join(" ")
+    }
+  end
+
+  def input
+    if @form.nil?
+      content_tag :input, content, @props
+    else
+      @form.check_box(@field, **@props)
+    end
+  end
+
+  def toggle
+    content_tag :div, "", @toggle_element
+  end
+
+  def toggle_input
+    content_tag :div, safe_join(input, toggle), class: styles[:root][:base2]
+  end
+
+  def label_container
+    content_tag(:label, safe_join(toggle_input, label), @root_element)
+  end
+
+  def left_sided
+    safe_join label_container, (helper? ? helper : helper_text)
+  end
+
+  def right_sided
+    content_tag :label, class: styles[:right_sided][:top] do
+      safe_join(
+        content_tag(
+          :div,
+          safe_join(label, (helper? ? helper : helper_text)),
+          class: styles[:right_sided][:inside]
+        ),
+        toggle_input
+      )
+    end
+  end
+
+  def call
+    add(class: styles[:root][:no_helper_text], to: @root_element) if @helper_text.nil? && !helper?
+    @right_sided ? right_sided : left_sided
+  end
+end

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

@@ -0,0 +1,48 @@
+<div id="<%= id %>" class="mt-6 grow lg:mt-0 lg:ml-6 lg:shrink-0 lg:grow-0">
+  <%= label %>
+  <div class="mt-1 lg:hidden">
+    <div class="flex items-center">
+      <div class="inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full relative" aria-hidden="true">
+        <%= image_element %>
+      </div>
+      <div class="ml-5 rounded-md shadow-xs">
+        <div class="group relative flex items-center justify-center rounded-md border border-slate-300 py-2 px-3 focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2 hover:bg-slate-50">
+          <label for="mobile-<%= id %>" class="pointer-events-none relative text-sm font-medium leading-4 text-slate-700">
+            <span>Change</span>
+            <span class="sr-only"><%= @label %></span>
+          </label>
+          <%= input_element(input_id: "mobile-#{id}") %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="relative hidden overflow-hidden rounded-full lg:block w-40">
+
+    <div class="inline-block h-40 w-40 shrink-0 overflow-hidden rounded-full relative" aria-hidden="true">
+      <%= image_element %>
+    </div>
+
+    <label for="desktop-<%= id %>" class="absolute inset-0 flex flex-col h-full w-full items-center justify-center bg-blue-800/75 text-sm font-medium text-white opacity-0 hover:opacity-100">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+      </svg>
+      <span>Change</span>
+      <span class="sr-only"><%= @label %></span>
+      <%= input_element(input_id: "desktop-#{id}") %>
+    </label>
+  </div>
+  <%= helper_text %>
+</div>
+
+<script>
+  var loadFile = function(event, id) {
+    const elements = document.getElementById('business_logo_image').querySelectorAll('.img_photo');
+
+    elements.forEach(element => {
+      element.src = URL.createObjectURL(event.target.files[0]);
+      element.onload = function() { URL.revokeObjectURL(element.src) }
+    });
+  };
+</script>