fluxbit_view_components 0.2.0 → 0.3.0

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

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

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

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

@@ -1,61 +0,0 @@
-# frozen_string_literal: true
-
-class Fluxbit::Form::UploadImageInputComponent < Fluxbit::Form::Component
-  cattr_accessor :styles do
-    {
-      height: {
-        no: "",
-        sm: "h-32",
-        md: "h-64",
-        lg: "h-96"
-      }
-    }
-  end
-
-  def initialize(form: nil, field: nil, id: nil, height: :md, label: nil, helper_text: nil, helper_popover: nil,
-                 helper_popover_placement: "right", type: nil, image_path: nil, image_placeholder: nil,
-                 title: true, subtitle: true, **props)
-    super
-    @form = form
-    @object = form&.object
-    @field = field
-    @id = id
-    @title = title
-    @subtitle = subtitle
-    @props = props
-    # @height = height.in?(styles[:height].keys) ? height : :md
-    @label = label_value(label, @object, field, id)
-    @helper_text = helper_text.present? ? define_helper_text(helper_text, @object, field) : ''
-    @helper_popover = define_helper_popover(helper_popover, @object, field)
-    @helper_popover_placement = helper_popover_placement
-    @image_path = image_path || (if @object&.send(@field)&.send("attached?")
-                                   @object&.send(@field)&.variant(resize_to_fit: [ 160, 160 ])
-                                 end) || image_placeholder || ""
-    @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
-  end
-
-  def input_element(input_id: nil)
-    @props["onchange"] = "loadFile(event, '#{id}')"
-    return content_tag :input, nil, @props.merge(id: input_id || id) if @form.nil?
-
-    @form.file_field(@field, **@props, id: input_id || id)
-  end
-
-  def image_element
-    image_tag @image_path,
-              class: "img_photo absolute inset-0 w-full h-full object-cover rounded-full",
-              alt:   @field&.to_s&.humanize
-  end
-
-  def title
-    return safe_join(content_tag(:span, "Click to upload", class: "font-semibold"), " or drag and drop") if @title == true
-
-    @title
-  end
-
-  def subtitle
-    return "SVG, PNG, JPG or GIF (MAX. 800x400px)" if @subtitle == true
-
-    @subtitle
-  end
-end

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

@@ -1,12 +0,0 @@
-<div class="<%= self.styles[:bae] %>">
-  <label for="<%= id %>" class="<%= self.styles[:label] %> <%= self.styles[:height][@height] %>">
-    <div class="<%= self.styles[:inner_div] %>">
-      <svg class="w-8 h-8 mb-4 text-slate-500 dark:text-slate-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-      </svg>
-      <p class="<%= self.styles[:title] %>"><%= title %></p>
-      <p class="<%= self.styles[:subtitle] %>"><%= subtitle %></p>
-    </div>
-    <input id="<%= id %>" name="<%= @name %>" type="file" class="hidden" />
-  </label>
-</div> 

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

@@ -1,47 +0,0 @@
-# frozen_string_literal: true
-
-class Fluxbit::Form::UploadInputComponent < Fluxbit::Form::Component
-  # rubocop: disable Layout/LineLength
-  cattr_accessor :styles do
-    {
-      base: "flex items-center justify-center w-full",
-      label: "flex flex-col items-center justify-center w-full border-2 border-slate-300 border-dashed rounded-lg cursor-pointer bg-slate-50 dark:hover:bg-bray-800 dark:bg-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:hover:border-slate-500 dark:hover:bg-slate-600",
-      inner_div: "flex flex-col items-center justify-center pt-5 pb-6",
-      title: "mb-2 text-sm text-slate-500 dark:text-slate-400",
-      subtitle: "text-xs text-slate-500 dark:text-slate-400",
-      height: {
-        no: "",
-        sm: "h-32",
-        md: "h-64",
-        lg: "h-96"
-      }
-    }
-  end
-  # rubocop: enable Layout/LineLength
-
-  def initialize(form: nil, field: nil, id: nil, height: :md,
-                 title: true, subtitle: true, **props)
-    super
-    @form = form
-    @object = form&.object
-    @field = field
-    @id = id
-    @title = title
-    @subtitle = subtitle
-    @props = props
-    @height = height.in?(styles[:height].keys) ? height : :md
-  end
-
-  def title
-    return safe_join(content_tag(:span, "Click to upload", class: "font-semibold"),
-" or drag and drop") if @title == true
-
-    @title
-  end
-
-  def subtitle
-    return "SVG, PNG, JPG or GIF (MAX. 800x400px)" if @subtitle == true
-
-    @subtitle
-  end
-end