fluxbit_view_components 0.2.0 → 0.3.0

data/{app/components/fluxbit/form/toggle_input_component.rb → lib/fluxbit/config/form/toggle_component.rb}

@@ -1,22 +1,19 @@
 # frozen_string_literal: true
 
-class Fluxbit::Form::ToggleInputComponent < Fluxbit::Form::Component
+module Fluxbit::Config::Form::ToggleComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :unchecked_color, default: :default
+  mattr_accessor :button_color, default: :default
+  mattr_accessor :invert_label, default: false
+  mattr_accessor :sizing, default: 1
+
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
-  cattr_accessor :styles do
+  mattr_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"
-      },
+      label: "text-sm rtl:text-right font-medium text-gray-700 dark:text-gray-200 flex items-center",
+      input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 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",
+        base: "me-3 shrink-0 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:border after:rounded-full after:transition-all relative",
         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",
@@ -58,109 +55,25 @@ class Fluxbit::Form::ToggleInputComponent < Fluxbit::Form::Component
           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"
+        button: {
+          default: "after:bg-white",
+          success: "after:bg-green-500",
+          failure: "after:bg-red-500",
+          info: "after:bg-cyan-500"
+
+        },
+        sizes: [
+          "w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4",
+          "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5",
+          "w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6"
+        ],
+        active: {
+          on: "cursor-pointer",
+          off: "cursor-not-allowed opacity-50"
+        },
+        invert_label: "ms-3"
       }
     }
   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/lib/fluxbit/view_components/version.rb

@@ -1,5 +1,5 @@
 module Fluxbit
   module ViewComponents
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

data/lib/fluxbit/view_components.rb

@@ -9,7 +9,13 @@ module Fluxbit
 
   module Config
     module Form
-      require "fluxbit/config/form/helper_text_component"
+      require "fluxbit/config/form/help_text_component"
+      require "fluxbit/config/form/check_box_component"
+      require "fluxbit/config/form/dropzone_component"
+      require "fluxbit/config/form/label_component"
+      require "fluxbit/config/form/range_component"
+      require "fluxbit/config/form/text_field_component"
+      require "fluxbit/config/form/toggle_component"
     end
 
     require "fluxbit/config/alert_component"

data/lib/install/install.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-gem_path = Gem.loaded_specs['fluxbit_view_components'].full_gem_path
+gem_path = Gem.loaded_specs["fluxbit_view_components"].full_gem_path
 template_path = File.join(gem_path, "lib/fluxbit/templates/tailwind.config.js.template")
 darkmode_path = File.join(gem_path, "lib/fluxbit/templates/darkmode.js.template")
 layout_path = Rails.root.join("app/views/layouts/application.html.erb")
@@ -37,7 +37,7 @@ if stylesheets_path.exist?
   say.call "- Updating CSS with Flowbite imports..."
   content = File.read(stylesheets_path)
   content.prepend("@import \"flowbite/src/themes/default\";\n")
-  content << "\n@plugin \"flowbite/plugin\";\n@source \"../../../node_modules/flowbite\";\n@config \"../../../tailwind.config.js\";\n"
+  content << "\n@plugin \"flowbite/plugin\";\n@source \"../../../node_modules/flowbite\";\n@config \"../../../tailwind.config.js\";\n@custom-variant dark (&:where(.dark, .dark *));\n\n"
   File.write(stylesheets_path, content)
 else
   say.call "⚠️ Couldn't find application.tailwind.css, skipping CSS modifications", :red
@@ -59,7 +59,7 @@ if layout_path.exist?
 
 
   if layout_content.include?("<body")
-    # gsub_file layout_path.to_s, "<html", "<html class=\"<%= fluxbit_html_classes %>\""
+    # gsub_file layout_path.to_s, "<html", "<html class=\"<%= fx_html_class %>\""
     gsub_file layout_path.to_s, "<body>", "<body class=\"<%= fx_body_class %>\">"
   else
     say.call "<body> tag is not found in application layout.", :red

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fluxbit_view_components
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Arthur Molina
@@ -147,7 +147,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- LICENSE.txt
 - README.md
 - app/components/fluxbit/alert_component.rb
 - app/components/fluxbit/avatar_component.rb
@@ -158,24 +157,21 @@ files:
 - app/components/fluxbit/card_component.rb
 - app/components/fluxbit/component.rb
 - app/components/fluxbit/flex_component.rb
-- app/components/fluxbit/form/checkbox_input_component.rb
+- app/components/fluxbit/form/check_box_component.rb
 - app/components/fluxbit/form/component.rb
-- app/components/fluxbit/form/datepicker_component.rb
+- app/components/fluxbit/form/dropzone_component.html.erb
+- app/components/fluxbit/form/dropzone_component.rb
+- app/components/fluxbit/form/field_component.rb
 - app/components/fluxbit/form/form_builder_component.rb
-- app/components/fluxbit/form/helper_text_component.rb
+- app/components/fluxbit/form/help_text_component.rb
 - app/components/fluxbit/form/label_component.rb
-- app/components/fluxbit/form/radio_input_component.rb
-- app/components/fluxbit/form/range_input_component.rb
-- app/components/fluxbit/form/select_free_input_component.rb
-- app/components/fluxbit/form/select_input_component.rb
-- app/components/fluxbit/form/spacer_input_component.rb
-- app/components/fluxbit/form/text_input_component.rb
-- app/components/fluxbit/form/textarea_input_component.rb
-- app/components/fluxbit/form/toggle_input_component.rb
-- app/components/fluxbit/form/upload_image_input_component.html.erb
-- app/components/fluxbit/form/upload_image_input_component.rb
-- app/components/fluxbit/form/upload_input_component.html.erb
-- app/components/fluxbit/form/upload_input_component.rb
+- app/components/fluxbit/form/range_component.rb
+- app/components/fluxbit/form/select_component.rb
+- app/components/fluxbit/form/text_field_component.rb
+- app/components/fluxbit/form/toggle_component.html.erb
+- app/components/fluxbit/form/toggle_component.rb
+- app/components/fluxbit/form/upload_image_component.html.erb
+- app/components/fluxbit/form/upload_image_component.rb
 - app/components/fluxbit/gravatar_component.rb
 - app/components/fluxbit/heading_component.rb
 - app/components/fluxbit/modal_component.rb
@@ -185,6 +181,7 @@ files:
 - app/components/fluxbit/tooltip_component.rb
 - app/helpers/fluxbit/classes_helper.rb
 - app/helpers/fluxbit/components_helper.rb
+- app/helpers/fluxbit/form_builder.rb
 - config/deploy.yml
 - config/locales/en.yml
 - lib/fluxbit/config/alert_component.rb
@@ -193,7 +190,13 @@ files:
 - lib/fluxbit/config/button_component.rb
 - lib/fluxbit/config/card_component.rb
 - lib/fluxbit/config/flex_component.rb
-- lib/fluxbit/config/form/helper_text_component.rb
+- lib/fluxbit/config/form/check_box_component.rb
+- lib/fluxbit/config/form/dropzone_component.rb
+- lib/fluxbit/config/form/help_text_component.rb
+- lib/fluxbit/config/form/label_component.rb
+- lib/fluxbit/config/form/range_component.rb
+- lib/fluxbit/config/form/text_field_component.rb
+- lib/fluxbit/config/form/toggle_component.rb
 - lib/fluxbit/config/gravatar_component.rb
 - lib/fluxbit/config/heading_component.rb
 - lib/fluxbit/config/modal_component.rb

data/LICENSE.txt

@@ -1,20 +0,0 @@
-Copyright 2021 Dan Gamble
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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