fluxbit_view_components 0.2.0 → 0.4.0

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

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

@@ -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

data/app/helpers/fluxbit/classes_helper.rb

@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-
-module Fluxbit
-  module ClassesHelper
-    def fx_body_class
-      "h-full bg-slate-100 dark:bg-slate-900 dark:text-white"
-    end
-  end
-end