fluxbit_view_components 0.1.0

data/lib/fluxbit/config/heading_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::HeadingComponent
+  mattr_accessor :size, default: 1
+  mattr_accessor :spacing, default: :tight
+  mattr_accessor :line_height, default: :none
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "mb-4 text-gray-900 dark:text-white",
+      sizes: {
+        h1: "text-5xl font-extrabold md:text-6xl lg:text-7xl",
+        h2: "text-4xl font-bold md:text-5xl lg:text-6xl",
+        h3: "text-3xl font-bold md:text-4xl lg:text-5xl",
+        h4: "text-2xl font-bold md:text-3xl lg:text-4xl",
+        h5: "text-xl font-bold md:text-2xl lg:text-3xl",
+        h6: "text-lg font-bold md:text-xl lg:text-2xl"
+      },
+      spacings: {
+        tighter: "tracking-tighter",
+        tight: "tracking-tight",
+        normal: "tracking-normal",
+        wide: "tracking-wide",
+        wider: "tracking-wider",
+        widest: "tracking-widest"
+    },
+      line_heights: {
+        none: "leading-none",
+        tight: "leading-tight",
+        snug: "leading-snug",
+        normal: "leading-normal",
+        relaxed: "leading-relaxed",
+        loose: "leading-loose"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/modal_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::ModalComponent
+  mattr_accessor :opened, default: false
+  mattr_accessor :close_button, default: true
+  mattr_accessor :flat, default: false
+  mattr_accessor :size, default: 1
+  mattr_accessor :only_css, default: false
+  mattr_accessor :static, default: false
+  mattr_accessor :placement, default: nil
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      root: {
+        base: "fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full flex",
+        backdrop: "bg-gray-900/50 dark:bg-gray-900/80",
+        show: {
+          on: "",
+          off: "hidden"
+        },
+        size: [
+          "max-w-sm",
+          "max-w-md",
+          "max-w-lg",
+          "max-w-xl",
+          "max-w-2xl",
+          "max-w-3xl",
+          "max-w-4xl",
+          "max-w-5xl",
+          "max-w-6xl",
+          "max-w-7xl"
+        ],
+        placements: {
+          "top-left": "items-start justify-start",
+          "top-center": "items-start justify-center",
+          "top-right": "items-start justify-end",
+          "center-left": "items-center justify-start",
+          "center": "items-center justify-center",
+          "center-right": "items-center justify-end",
+          "bottom-right": "items-end justify-end",
+          "bottom-center": "items-end justify-center",
+          "bottom-left": "items-end justify-start"
+        }
+      },
+      content: {
+        base: "relative h-full w-full p-4 md:h-auto",
+        inner: "relative flex max-h-[90dvh] flex-col rounded-lg bg-white shadow-sm dark:bg-gray-700"
+      },
+      body: {
+        base: "flex-1 overflow-auto p-6",
+        flat: "pt-0",
+        no_title: "-mt-4"
+      },
+      header: {
+        base: "flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600",
+        flat: "border-b-0 p-2",
+        title: "text-xl font-medium text-gray-900 dark:text-white",
+        close: {
+          base: "close-button ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
+          icon: "h-5 w-5"
+        }
+      },
+      footer: {
+        base: "flex items-center space-x-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600",
+        flat: "border-t-0"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/paragraph_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::ParagraphComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "mb-3 text-gray-500 dark:text-gray-400"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/popover_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::PopoverComponent
+  mattr_accessor :has_arrow, default: true
+  mattr_accessor :image_position, default: :right
+  mattr_accessor :image_props, default: {}
+  mattr_accessor :size, default: 2
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800",
+      size: [
+        "w-24",
+        "w-32",
+        "w-48",
+        "w-64",
+        "w-96"
+      ],
+      title: {
+        div: "px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700",
+        h3: "font-semibold text-gray-900 dark:text-white"
+      },
+      content: "px-3 py-2",
+      image_base: "grid grid-cols-5",
+      image_content: {
+        text: "col-span-3 p-3 space-y-2",
+        image: "h-full col-span-2"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/tab_component.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::TabComponent
+  mattr_accessor :variant, default: :default
+  mattr_accessor :color, default: :blue
+  mattr_accessor :vertical, default: false
+  mattr_accessor :tab_panel, default: :default
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      div: {
+        horizontal: "",
+        vertical: "md:flex"
+      },
+      tab_list: {
+        ul: {
+          horizontal: "flex text-center",
+          vertical: "flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0"
+        },
+        li: "",
+        variant: {
+          default: "flex-wrap text-sm font-medium text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400",
+          underline: "-mb-px flex-wrap border-b border-gray-200 dark:border-gray-700",
+          pills: "flex-wrap space-x-2 text-sm font-medium text-gray-500 dark:text-gray-400",
+          full_width: "grid w-full grid-flow-col divide-x divide-gray-200 rounded-none text-sm font-medium shadow dark:divide-gray-700 dark:text-gray-400"
+        },
+        tab_item: {
+          base: "inline-flex w-full",
+          variant: {
+            default: {
+              base: "inline-block p-4 rounded-t-lg",
+              active: {
+                blue: "text-blue-600 bg-gray-100 active dark:bg-gray-800 dark:text-blue-500",
+                cyan: "text-cyan-600 bg-gray-100 active dark:bg-gray-800 dark:text-cyan-500",
+                green: "text-green-600 bg-gray-100 active dark:bg-gray-800 dark:text-green-500",
+                indigo: "text-indigo-600 bg-gray-100 active dark:bg-gray-800 dark:text-indigo-500",
+                pink: "text-pink-600 bg-gray-100 active dark:bg-gray-800 dark:text-pink-500",
+                purple: "text-purple-600 bg-gray-100 active dark:bg-gray-800 dark:text-purple-500",
+                red: "text-red-600 bg-gray-100 active dark:bg-gray-800 dark:text-red-500",
+                yellow: "text-yellow-600 bg-gray-100 active dark:bg-gray-800 dark:text-yellow-500",
+                gray: "text-gray-600 bg-gray-100 active dark:bg-gray-700 dark:text-white"
+              },
+              inactive: "hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+              disabled: "text-gray-400 cursor-not-allowed dark:text-gray-500"
+            },
+            underline: {
+              base: "inline-block p-4 rounded-t-lg border-b-2 ",
+              active: {
+                blue: "active text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500",
+                cyan: "active text-cyan-600 border-cyan-600 dark:text-cyan-500 dark:border-cyan-500",
+                green: "active text-green-600 border-green-600 dark:text-green-500 dark:border-green-500",
+                indigo: "active text-indigo-600 border-indigo-600 dark:text-indigo-500 dark:border-indigo-500",
+                pink: "active text-pink-600 border-pink-600 dark:text-pink-500 dark:border-pink-500",
+                purple: "active text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500",
+                red: "active text-red-600 border-red-600 dark:text-red-500 dark:border-red-500",
+                yellow: "active text-yellow-600 border-yellow-600 dark:text-yellow-500 dark:border-yellow-500",
+                gray: "active text-gray-600 border-gray-600 dark:text-gray-500 dark:border-gray-500"
+              },
+              inactive: "border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300",
+              disabled: "text-gray-400 border-transparent cursor-not-allowed dark:text-gray-500"
+            },
+            pills: {
+              base: "inline-block px-4 py-3 rounded-lg",
+              active: {
+                blue: "active text-white bg-blue-600",
+                cyan: "active text-white bg-cyan-600",
+                green: "active text-white bg-green-600",
+                indigo: "active text-white bg-indigo-600",
+                pink: "active text-white bg-pink-600",
+                purple: "active text-white bg-purple-600",
+                red: "active text-white bg-red-600",
+                yellow: "active text-white bg-yellow-600",
+                gray: "active text-white bg-gray-600"
+              },
+              inactive: "hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+              disabled: "text-gray-400 dark:text-gray-500 cursor-not-allowed"
+            },
+            full_width: {
+              base: "inline-block w-full p-4 border-r border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-blue-300 focus:outline-none",
+              active: {
+                blue: "text-blue-600 bg-gray-100 active dark:text-blue-500 dark:bg-gray-800",
+                cyan: "text-cyan-600 bg-gray-100 active dark:text-cyan-500 dark:bg-gray-800",
+                green: "text-green-600 bg-gray-100 active dark:text-green-500 dark:bg-gray-800",
+                indigo: "text-indigo-600 bg-gray-100 active dark:text-indigo-500 dark:bg-gray-800",
+                pink: "text-pink-600 bg-gray-100 active dark:text-pink-500 dark:bg-gray-800",
+                purple: "text-purple-600 bg-gray-100 active dark:text-purple-500 dark:bg-gray-800",
+                red: "text-red-600 bg-gray-100 active dark:text-red-500 dark:bg-gray-800",
+                yellow: "text-yellow-600 bg-gray-100 active dark:text-yellow-500 dark:bg-gray-800",
+                gray: "active text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white"
+              },
+              inactive: "bg-white hover:text-gray-700 hover:bg-gray-50 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700",
+              disabled: "cursor-not-allowed",
+              first: "rounded-s-lg",
+              last: "rounded-e-lg",
+              middle: ""
+            }
+          },
+          icon: "mr-2 h-5 w-5"
+        }
+      },
+      tabpanel_container: {
+        horizontal: "",
+        vertical: "w-full"
+      },
+      tabpanel: {
+        horizontal: {
+          none: {
+            active: "",
+            inactive: "hidden"
+          },
+          default: {
+            active: "p-4 rounded-b-lg bg-gray-50 dark:bg-gray-800",
+            inactive: "p-4 rounded-b-lg bg-gray-50 dark:bg-gray-800 hidden"
+          }
+        },
+        vertical: {
+          none: {
+            active: "",
+            inactive: "hidden"
+          },
+          default: {
+            active: "p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg h-full",
+            inactive: "p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg h-full hidden"
+          }
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/text_component.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::TextComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      color: {
+        blue: "text-blue-600 dark:text-blue-500",
+        red: "text-red-600 dark:text-red-500",
+        green: "text-green-600 dark:text-green-500",
+        yellow: "text-yellow-600 dark:text-yellow-500",
+        purple: "text-purple-600 dark:text-purple-500",
+        pink: "text-pink-600 dark:text-pink-500",
+        orange: "text-orange-600 dark:text-orange-500",
+        teal: "text-teal-600 dark:text-teal-500",
+        cyan: "text-cyan-600 dark:text-cyan-500",
+        indigo: "text-indigo-600 dark:text-indigo-500",
+        blue_to_green: "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400",
+        blue_to_purple: "text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500",
+        red_to_yellow: "text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-500",
+        green_to_blue: "text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500",
+        purple_to_pink: "text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500",
+        orange_to_red: "text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-red-500"
+      },
+      bg_color: {
+        blue: "px-2 bg-blue-600 rounded-sm dark:bg-blue-500",
+        red: "px-2 bg-red-600 rounded-sm dark:bg-red-500",
+        green: "px-2 text-white bg-green-600 rounded-sm dark:bg-green-500",
+        yellow: "px-2 text-white bg-yellow-600 rounded-sm dark:bg-yellow-500",
+        purple: "px-2 text-white bg-purple-600 rounded-sm dark:bg-purple-500",
+        pink: "px-2 text-white bg-pink-600 rounded-sm dark:bg-pink-500",
+        orange: "px-2 text-white bg-orange-600 rounded-sm dark:bg-orange-500",
+        teal: "px-2 text-white bg-teal-600 rounded-sm dark:bg-teal-500",
+        cyan: "px-2 text-white bg-cyan-600 rounded-sm dark:bg-cyan-500",
+        indigo: "px-2 text-white bg-indigo-600 rounded-sm dark:bg-indigo-500",
+        blue_to_purple: "px-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-sm",
+        red_to_yellow: "px-2 text-white bg-gradient-to-r from-red-500 to-yellow-500 rounded-sm",
+        green_to_blue: "px-2 text-white bg-gradient-to-r from-green-500 to-blue-500 rounded-sm",
+        purple_to_pink: "px-2 text-white bg-gradient-to-r from-purple-500 to-pink-500 rounded-sm",
+        orange_to_red: "px-2 text-white bg-gradient-to-r from-orange-500 to-red-500 rounded-sm"
+      },
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        "6xl": "text-6xl"
+      },
+      weight: {
+        thin: "font-thin",
+        extralight: "font-extralight",
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        extrabold: "font-extrabold",
+        black: "font-black"
+      },
+      transform: {
+        uppercase: "uppercase",
+        lowercase: "lowercase",
+        capitalize: "capitalize"
+      },
+      decoration_line: {
+        underline: "underline",
+        overline: "overline",
+        line_through: "line-through"
+      },
+      decoration_type: {
+        double: "decoration-double",
+        dotted: "decoration-dotted",
+        dashed: "decoration-dashed",
+        wavy: "decoration-wavy"
+      },
+      decoration_color: {
+        blue: "decoration-blue-400 dark:decoration-blue-600",
+        red: "decoration-red-400 dark:decoration-red-600",
+        green: "decoration-green-400 dark:decoration-green-600",
+        yellow: "decoration-yellow-400 dark:decoration-yellow-600",
+        purple: "decoration-purple-400 dark:decoration-purple-600",
+        pink: "decoration-pink-400 dark:decoration-pink-600",
+        orange: "decoration-orange-400 dark:decoration-orange-600",
+        teal: "decoration-teal-400 dark:decoration-teal-600",
+        cyan: "decoration-cyan-400 dark:decoration-cyan-600",
+        indigo: "decoration-indigo-400 dark:decoration-indigo-600"
+      },
+      decoration_tickness: [
+        "decoration-0",
+        "decoration-1",
+        "decoration-2",
+        "decoration-4",
+        "decoration-8"
+      ],
+      underline_offset: [
+        "underline-offset-0",
+        "underline-offset-1",
+        "underline-offset-2",
+        "underline-offset-4",
+        "underline-offset-8"
+      ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/tooltip_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::TooltipComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/view_components/codemods/v3_slot_setters.rb

@@ -0,0 +1,222 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module ViewComponents
+    # Usage:
+    #
+    # Run via rake task:
+    #
+    #     bin/rails fluxbit_view_components:detect_legacy_slots
+    #     bin/rails fluxbit_view_components:migrate_legacy_slots
+    #     bin/rails fluxbit_view_components:migrate_legacy_slots app/views
+    #
+    # Or run via rails console if you need to pass custom paths:
+    #
+    #     Fluxbit::ViewComponents::Codemods::V3SlotSetters.new(
+    #       view_path: Rails.root.join("app/views"),
+    #     ).call
+    module Codemods
+      class V3SlotSetters
+        TEMPLATE_LANGUAGES = %w[erb slim haml].join(",").freeze
+        RENDER_REGEX = /render[( ](?<component>\w+(?:::\w+)*)\.new[) ]+(do|\{) \|(?<arg>\w+)\b/ # standard:disable Lint/MixedRegexpCaptureTypes
+
+        Suggestion = Struct.new(:file, :line, :message)
+
+        def initialize(view_component_path: [], view_path: [], migrate: false)
+          Rails.application.eager_load!
+
+          @view_component_path = view_component_path
+          @view_path = view_path
+          @migrate = migrate
+        end
+
+        def call
+          puts "Using ViewComponent path: #{view_component_paths.join(", ")}"
+          puts "Using Views path: #{view_paths.join(", ")}"
+          puts "#{view_components.size} ViewComponents found"
+          puts "#{slottable_components.size} ViewComponents using Slots found"
+          puts "#{view_component_files.size} ViewComponent templates found"
+          puts "#{view_files.size} view files found"
+          process_all_files
+        end
+
+        def process_all_files
+          all_files.each do |file|
+            process_file(file)
+          end
+        end
+
+        def process_file(file)
+          @suggestions = []
+          @suggestions += scan_exact_matches(file)
+          @suggestions += scan_uncertain_matches(file)
+
+          return unless @suggestions.any?
+
+          puts
+          puts "File: #{file}"
+          @suggestions.each do |s|
+            puts "=> line #{s.line}: #{s.message}"
+          end
+        end
+
+        private
+
+        def scan_exact_matches(file)
+          [].tap do |suggestions|
+            rendered_components = []
+            content = File.read(file)
+
+            if (render_match = content.match(RENDER_REGEX))
+              component = render_match[:component]
+              arg = render_match[:arg]
+
+              if registered_slots.key?(component.constantize)
+                used_slots_names = registered_slots[component.constantize]
+                rendered_components << { component: component, arg: arg, slots: used_slots_names }
+              end
+            end
+
+            File.open(file, "r+") do |f|
+              lines = []
+              f.each_line do |line|
+                rendered_components.each do |rendered_component|
+                  arg = rendered_component[:arg]
+                  slots = rendered_component[:slots]
+
+                  if (matches = line.scan(/#{arg}\.#{Regexp.union(slots)}/))
+                    matches.each do |match|
+                      new_value = match.gsub("#{arg}.", "#{arg}.with_")
+                      message = if @migrate
+                        "replaced `#{match}` with `#{new_value}`"
+                      else
+                        "probably replace `#{match}` with `#{new_value}`"
+                      end
+                      suggestions << Suggestion.new(file, f.lineno, message)
+                      if @migrate
+                        line.gsub!("#{arg}.", "#{arg}.with_")
+                      end
+                    end
+                  end
+                end
+                lines << line
+              end
+
+              if @migrate
+                f.rewind
+                f.write(lines.join)
+              end
+            end
+          end
+        end
+
+        def scan_uncertain_matches(file)
+          [].tap do |suggestions|
+            File.open(file, "r+") do |f|
+              lines = []
+              f.each_line do |line|
+                if (matches = line.scan(/(?<!\s)\.(?<slot>#{Regexp.union(all_registered_slot_names)})\b/))
+                  matches.flatten.each do |match|
+                    next if @suggestions.find { |s| s.file == file && s.line == f.lineno }
+
+                    message = if @migrate
+                      "replaced `#{match}` with `with_#{match}`"
+                    else
+                      "maybe replace `#{match}` with `with_#{match}`"
+                    end
+                    suggestions << Suggestion.new(file, f.lineno, message)
+                    if @migrate
+                      line.gsub!(/(?<!\s)\.(#{match})\b/, ".with_\\1")
+                    end
+                  end
+                end
+                lines << line
+              end
+
+              if @migrate
+                f.rewind
+                f.write(lines.join)
+              end
+            end
+          end
+        end
+
+        def view_components
+          ViewComponent::Base.descendants
+        end
+
+        def slottable_components
+          view_components.select do |comp|
+            comp.registered_slots.any?
+          end
+        end
+
+        def registered_slots
+          @registered_slots ||= {}.tap do |slots|
+            puts
+            puts "Detected slots:"
+            slottable_components.each do |comp|
+              puts "- `#{comp}` has slots: #{comp.registered_slots.keys.join(", ")}"
+              slots[comp] = comp.registered_slots.map do |slot_name, slot|
+                normalized_slot_name(slot_name, slot)
+              end
+            end
+          end
+        end
+
+        def all_registered_slot_names
+          @all_registered_slot_names ||= registered_slots.values.flatten.uniq
+        end
+
+        def view_component_files
+          Dir.glob(Pathname.new(File.join(view_component_path_glob, "**", "*.{rb,#{TEMPLATE_LANGUAGES}}")))
+        end
+
+        def view_files
+          Dir.glob(Pathname.new(File.join(view_path_glob, "**", "*.{#{TEMPLATE_LANGUAGES}}")))
+        end
+
+        def all_files
+          view_component_files + view_files
+        end
+
+        def view_component_paths
+          @view_component_paths ||= [
+            Rails.application.config.view_component.view_component_path,
+            @view_component_path
+          ].flatten.compact.uniq
+        end
+
+        def view_component_path_glob
+          return view_component_paths.first if view_component_paths.size == 1
+
+          "{#{view_component_paths.join(",")}}"
+        end
+
+        def rails_view_paths
+          ActionController::Base.view_paths.select do |path|
+            path.to_s.include?(Rails.root.to_s)
+          end.map(&:to_s)
+        end
+
+        def view_paths
+          @view_paths ||= [
+            rails_view_paths,
+            Rails.application.config.view_component.preview_paths,
+            @view_path
+          ].flatten.compact.uniq
+        end
+
+        def view_path_glob
+          return view_paths.first if view_paths.size == 1
+
+          "{#{view_paths.join(",")}}"
+        end
+
+        def normalized_slot_name(slot_name, slot)
+          slot[:collection] ? ActiveSupport::Inflector.singularize(slot_name) : slot_name.to_s
+        end
+      end
+    end
+  end
+end

data/lib/fluxbit/view_components/engine.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+require "view_component"
+require "view_component/version"
+
+module Fluxbit
+  module ViewComponents
+    class Engine < ::Rails::Engine
+      isolate_namespace Fluxbit::ViewComponents
+
+      config.autoload_paths = %W[
+        #{root}/app/components
+        #{root}/app/helpers
+      ]
+
+      # Remove default wrapping .field_with_errors for proper Shopify form validations
+      config.to_prepare do
+        ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }
+      end
+
+      initializer "fluxbit_view_components.importmap", before: "importmap" do |app|
+        if app.config.respond_to?(:importmap) && app.config.importmap.has_key?(:cache_sweepers)
+          app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts")
+        end
+      end
+
+      initializer "fluxbit_view_components.helpers" do
+        ActiveSupport.on_load(:action_controller_base) do
+          helper Fluxbit::ClassesHelper
+          helper Fluxbit::ComponentsHelper
+        end
+      end
+    end
+  end
+end

data/lib/fluxbit/view_components/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module ViewComponents
+    VERSION = "0.1.0"
+  end
+end