fluxbit_view_components 0.2.0 → 0.4.0

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

@@ -1,61 +0,0 @@
-# frozen_string_literal: true
-
-class Fluxbit::Form::CheckboxInputComponent < Fluxbit::Form::Component
-  # rubocop: disable Layout/LineLength
-  cattr_accessor :styles do
-    {
-      checkbox: "rounded-sm",
-      base: "w-4 h-4 text-blue-600 bg-slate-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600",
-      label: {
-        with_helper: "font-medium text-slate-900 dark:text-slate-300",
-        base: "ml-2 text-sm font-medium text-slate-900 dark:text-slate-300"
-      },
-      input_div: "flex items-center h-5",
-      helper_div: "ml-2 text-sm",
-      no_helper_div: "flex items-center"
-    }
-  end
-  # rubocop: enable Layout/LineLength
-
-  def initialize(form: nil, field: nil, label: nil, helper_text: nil, helper_popover: nil,
-                 helper_popover_placement: "right", **props)
-    super
-    @form = form
-    @field = field
-    @object = form&.object
-    @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] = @props[:type].to_s.in?(%w[checkbox radio]) ? @props[:type].to_s : "checkbox"
-    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.nil?
-      content_tag :input, content, @props
-    else
-      @form.text_field(@field, **@props)
-    end
-  end
-
-  def call
-    if @helper_text
-      content_tag :div, { class: "flex" } do
-        concat content_tag(:div, input, { class: styles[:input_div] })
-        concat content_tag(:div, { class: styles[:helper_div] }) do
-          concat label
-          concat helper_text
-        end
-      end
-    else
-      content_tag :div, { class: styles[:no_helper_div] } do
-        concat input
-        concat label
-      end
-    end
-  end
-end

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

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-class Fluxbit::Form::DatepickerComponent < Fluxbit::Form::Component
-  cattr_accessor :styles
-
-  def call; end
-end

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

@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-class Fluxbit::Form::RadioInputComponent < Fluxbit::Form::Component
-  def initialize(**kwargs, &block)
-    super
-    kwargs[:type] = :radio
-
-    @component_klass = "Fluxbit::Form::CheckboxInputComponent".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/range_input_component.rb

@@ -1,51 +0,0 @@
-# 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

@@ -1,77 +0,0 @@
-# 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

@@ -1,21 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-# 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

@@ -1,225 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-# 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