fluxbit_view_components 0.1.0 → 0.3.0

data/lib/fluxbit/config/form/text_field_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::TextFieldComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :sizing, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_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_addon: "p-2.5 rounded-none rounded-r-lg flex-1 min-w-0 text-sm",
+      sizes: [
+        "p-2.5 text-sm rounded-lg",
+        "p-4 sm:text-md rounded-lg",
+        "p-2 rounded-lg sm:text-xs"
+      ],
+      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
+end

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/templates/darkmode.js.template

@@ -0,0 +1,7 @@
+  <script>
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    </script>

data/lib/fluxbit/templates/tailwind.config.js.template

@@ -0,0 +1,4 @@
+const execSync = require('child_process').execSync;
+module.exports = {
+  content: [`${execSync("bundle show fluxbit").toString().trim()}/**/*.{erb,html,rb}`]
+}

data/lib/fluxbit/view_components/version.rb

@@ -1,7 +1,5 @@
-# frozen_string_literal: true
-
 module Fluxbit
   module ViewComponents
-    VERSION = "0.1.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,64 +1,74 @@
 # frozen_string_literal: true
 
-APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
-IMPORTMAP_BINSTUB = Rails.root.join("bin/importmap")
-IMPORTMAP_CONFIG_PATH = Rails.root.join("config/importmap.rb")
-STIMULUS_PATH = Rails.root.join("app/javascript/controllers/index.js")
+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")
+importmap_binstub = Rails.root.join("bin/importmap")
+importmap_config = Rails.root.join("config/importmap.rb")
+stimulus_path = Rails.root.join("app/javascript/controllers/index.js")
+package_json_path = Rails.root.join("package.json")
+tailwind_config_path = Rails.root.join("tailwind.config.js")
+stylesheets_path = Rails.root.join("app/assets/stylesheets/application.tailwind.css")
 
-if APPLICATION_LAYOUT_PATH.exist?
-  say "Add Fluxbit styles in application layout"
-  insert_into_file APPLICATION_LAYOUT_PATH.to_s, "\n    <%= stylesheet_link_tag \"fluxbit_view_components\" %>", before: /\s*<\/head>/
+say = ->(msg, color = :green) { puts color == :red ? "\e[31m#{msg}\e[0m" : "\e[32m#{msg}\e[0m" }
 
-  if File.read(APPLICATION_LAYOUT_PATH).include?("<body>")
-    say "Add Fluxbit classes and inline styles for <html> in application layout"
-    gsub_file APPLICATION_LAYOUT_PATH.to_s, "<html", "<html class=\"<%= fluxbit_html_classes %>\" style=\"<%= fluxbit_html_styles %>\""
+Bundler.with_unbundled_env do
+  say.call "- Adding TailwindCSS gems..."
+  system "bundle add tailwindcss-ruby"
+  system "bundle add tailwindcss-rails"
+end
 
-    say "Add Fluxbit inline styles for <body> in application layout"
-    gsub_file APPLICATION_LAYOUT_PATH.to_s, "<body>", "<body style=\"<%= fluxbit_body_styles %>\">"
-  else
-    say "<body> tag is not found in application layout.", :red
-    say "        Replace <html> with <html class=\"<%= fluxbit_html_classes %>\" style=\"<%= fluxbit_html_styles %>\"> in your custom layour."
-    say "        Replace <body> with <body style=\"<%= fluxbit_body_styles %>\"> in your custom layour."
-  end
+say.call "- Running tailwindcss:install..."
+system "#{RbConfig.ruby} ./bin/rails tailwindcss:install"
+
+say.call "- Installing Flowbite via npm..."
+system "npm install flowbite --save"
+
+say.call "- Copying tailwind.config.js from template..."
+if File.exist?(template_path)
+  FileUtils.cp(template_path, tailwind_config_path)
+  say.call "  tailwind.config.js copied successfully!"
 else
-  say "Default application.html.erb is missing!", :red
-  say "        1. Add <%= stylesheet_link_tag \"fluxbit_view_components\" %> within the <head> tag in your custom layout."
-  say "        2. Replace <html> with <html class=\"<%= fluxbit_html_classes %>\" style=\"<%= fluxbit_html_styles %>\"> in your custom layour."
-  say "        3. Replace <body> with <body style=\"<%= fluxbit_body_styles %>\"> in your custom layour."
+  say.call "  tailwind.config.js.template not found at #{template_path}.", :red
 end
 
-if IMPORTMAP_BINSTUB.exist?
-  importmaps = File.read(IMPORTMAP_CONFIG_PATH)
+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@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
+end
 
-  unless importmaps.include?("@rails/request.js")
-    say "Pin @rails/request.js dependency"
-    run "bin/importmap pin @rails/request.js --download"
-  end
+if layout_path.exist?
+  say.call "- Updating layout to include Fluxbit styles..."
 
-  say "Pin fluxbit_view_components"
-  append_to_file IMPORTMAP_CONFIG_PATH do
-    %(pin "fluxbit-view-components", to: "fluxbit_view_components.js"\n)
-  end
-else
-  package_json = File.read(Rails.root.join("package.json"))
+  layout_content = File.read(layout_path)
 
-  unless package_json.include?("@rails/request.js")
-    say "Add @rails/request.js dependency"
-    run "yarn add @rails/request.js"
+  if layout_content.include?("<head>")
+    darkmode_content = File.read(darkmode_path)
+    gsub_file layout_path.to_s, "</head>", "#{darkmode_content}\n</head>"
+    say.call "  Added darkmode js before </head> tag."
+  else
+    say.call "</head> tag is not found in application layout.", :red
+    say.call "        Add darkmode js manually before the </head> tag."
   end
 
-  say "Add fluxbit-view-components package"
-  run "yarn add fluxbit-view-components"
-end
 
-if STIMULUS_PATH.exist?
-  say "Add Fluxbit Stimulus controllers"
-  append_to_file STIMULUS_PATH do
-    "\nimport { registerFluxbitControllers } from \"fluxbit-view-components\"\nregisterFluxbitControllers(Stimulus)\n"
+  if layout_content.include?("<body")
+    # 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
+    say.call "        Replace <html> and <body> manually as instructed."
   end
 else
-  say "Default Stimulus location is missing: app/javascript/controllers/index.js", :red
-  say "        Add to your Stimulus index.js:"
-  say "            import { registerFluxbitControllers } from \"fluxbit-view-components\""
-  say "            registerFluxbitControllers(Stimulus)"
+  say.call "❌ Default application.html.erb is missing!", :red
+  say.call "        1. Add stylesheet_link_tag inside <head>"
+  say.call "        2. Replace <html> and <body> manually."
 end
+
+say.call "✅ Fluxbit ViewComponents install completed!"

data/lib/tasks/fluxbit_view_components_tasks.rake

@@ -1,22 +1,42 @@
 # frozen_string_literal: true
 
-require "fluxbit/view_components/codemods/v3_slot_setters"
-
 namespace :fluxbit_view_components do
   desc "Setup Fluxbit::ViewComponents for the app"
   task :install do
     system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install.rb", __dir__)}"
   end
 
-  task detect_legacy_slots: :environment do
-    ARGV.each { |a| task a.to_sym { } }
-    custom_paths = ARGV.compact.map { |path| Rails.root.join(path) }
-    Fluxbit::ViewComponents::Codemods::V3SlotSetters.new(view_path: custom_paths).call
+  desc "Copy Fluxbit ViewComponents to the application (default value of destination is app/components/fluxbit)"
+  task :copy_components, [ :destination ] do |t, args|
+    require "fileutils"
+
+    gem_path = Gem.loaded_specs["fluxbit_view_components"].full_gem_path
+    components_source = File.join(gem_path, "app/components/fluxbit")
+    components_destination = args[:destination] || Rails.root.join("app/components/fluxbit")
+
+    if Dir.exist?(components_source)
+      FileUtils.mkdir_p(components_destination)
+      FileUtils.cp_r("#{components_source}/.", components_destination)
+      puts "✅ Components copied to #{components_destination}"
+    else
+      puts "❌ Components source directory not found at #{components_source}"
+    end
   end
 
-  task migrate_legacy_slots: :environment do
-    ARGV.each { |a| task a.to_sym { } }
-    custom_paths = ARGV.compact.map { |path| Rails.root.join(path) }
-    Fluxbit::ViewComponents::Codemods::V3SlotSetters.new(view_path: custom_paths, migrate: true).call
+  desc "Copy Fluxbit ViewComponents Previews to the application (default value of destination is test/components/previews/fluxbit)"
+  task :copy_previews, [ :destination ] do |t, args|
+    require "fileutils"
+
+    gem_path = Gem.loaded_specs["fluxbit_view_components"].full_gem_path
+    previews_source = File.join(gem_path, "previews/fluxbit")
+    previews_destination = args[:destination] || Rails.root.join("test/components/previews/fluxbit")
+
+    if Dir.exist?(previews_source)
+      FileUtils.mkdir_p(previews_destination)
+      FileUtils.cp_r("#{previews_source}/.", previews_destination)
+      puts "✅ Previews copied to #{previews_destination}"
+    else
+      puts "❌ Previews source directory not found at #{previews_source}"
+    end
   end
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: fluxbit_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Arthur Molina
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-08 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: anyicon
@@ -142,14 +141,12 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description:
 email:
 - arthurmolina@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- LICENSE.txt
 - README.md
 - app/components/fluxbit/alert_component.rb
 - app/components/fluxbit/avatar_component.rb
@@ -160,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
@@ -187,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
@@ -195,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
@@ -204,8 +205,9 @@ files:
 - lib/fluxbit/config/tab_component.rb
 - lib/fluxbit/config/text_component.rb
 - lib/fluxbit/config/tooltip_component.rb
+- lib/fluxbit/templates/darkmode.js.template
+- lib/fluxbit/templates/tailwind.config.js.template
 - lib/fluxbit/view_components.rb
-- lib/fluxbit/view_components/codemods/v3_slot_setters.rb
 - lib/fluxbit/view_components/engine.rb
 - lib/fluxbit/view_components/version.rb
 - lib/fluxbit_view_components.rb
@@ -216,7 +218,6 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -231,8 +232,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.16
-signing_key:
+rubygems_version: 3.6.7
 specification_version: 4
 summary: ViewComponents for Fluxbit Design System
 test_files: []

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