fernandes-ui 0.1.0

data/app/views/ui/table/_head.html.erb

@@ -0,0 +1,18 @@
+<%
+  # Table Head - ERB Partial
+  #
+  # A table header cell (th) with consistent styling.
+  # Uses HeadBehavior module for shared styling logic.
+  #
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::TableHeadBehavior
+  all_attributes = head_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :th, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/table/_header.html.erb

@@ -0,0 +1,18 @@
+<%
+  # Table Header - ERB Partial
+  #
+  # A table header (thead) with consistent styling.
+  # Uses HeaderBehavior module for shared styling logic.
+  #
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::TableHeaderBehavior
+  all_attributes = header_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :thead, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/table/_row.html.erb

@@ -0,0 +1,18 @@
+<%
+  # Table Row - ERB Partial
+  #
+  # A table row (tr) with consistent styling.
+  # Uses RowBehavior module for shared styling logic.
+  #
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::TableRowBehavior
+  all_attributes = row_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :tr, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/tabs/_content.html.erb

@@ -0,0 +1,19 @@
+<%# TabsContent Component - Panel displaying content for active tab %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @value = local_assigns.fetch(:value, "")
+  @default_value = local_assigns.fetch(:default_value, @_tabs_default_value || "")
+  @orientation = local_assigns.fetch(:orientation, @_tabs_orientation || "horizontal")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TabsContentBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = content_html_attributes.deep_merge(@attributes.except(:data))
+  all_attributes[:data] = content_html_attributes[:data].merge(@attributes.fetch(:data, {}))
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/tabs/_list.html.erb

@@ -0,0 +1,16 @@
+<%# TabsList Component - Container for tab triggers %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @orientation = local_assigns.fetch(:orientation, @_tabs_orientation || "horizontal")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TabsListBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = list_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/tabs/_trigger.html.erb

@@ -0,0 +1,20 @@
+<%# TabsTrigger Component - Button that activates associated content %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @value = local_assigns.fetch(:value, "")
+  @default_value = local_assigns.fetch(:default_value, @_tabs_default_value || "")
+  @orientation = local_assigns.fetch(:orientation, @_tabs_orientation || "horizontal")
+  @disabled = local_assigns.fetch(:disabled, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TabsTriggerBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = trigger_html_attributes.deep_merge(@attributes.except(:data))
+  all_attributes[:data] = trigger_html_attributes[:data].merge(@attributes.fetch(:data, {}))
+-%>
+<%= content_tag :button, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/toggle_group/_item.html.erb

@@ -0,0 +1,51 @@
+<%
+  # ToggleGroup Item - ERB Partial
+  #
+  # An individual toggle button within a Toggle Group.
+  #
+  # @param value [String] Unique identifier for this item (required)
+  # @param variant [String] Visual style variant (inherits from parent if not specified)
+  # @param size [String] Size variant (inherits from parent if not specified)
+  # @param pressed [Boolean] Whether the item is pressed/active
+  # @param disabled [Boolean] Whether the item is disabled
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @value = local_assigns.fetch(:value)
+  @variant = local_assigns.fetch(:variant, nil)
+  @size = local_assigns.fetch(:size, nil)
+  @pressed = local_assigns.fetch(:pressed, false)
+  @disabled = local_assigns.fetch(:disabled, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Try to inherit from parent context
+  if defined?(@toggle_group_context) && @toggle_group_context
+    @variant ||= @toggle_group_context[:variant]
+    @size ||= @toggle_group_context[:size]
+    @group_type = @toggle_group_context[:type]
+    @spacing = @toggle_group_context[:spacing]
+
+    # Check if this item should be pressed based on parent value
+    parent_value = @toggle_group_context[:value]
+    if parent_value
+      @pressed = if @group_type == "multiple"
+        Array(parent_value).include?(@value)
+      else
+        parent_value.to_s == @value.to_s
+      end
+    end
+  end
+
+  # Fallback defaults
+  @variant ||= "default"
+  @size ||= "default"
+  @group_type ||= "single"
+  @spacing ||= 0
+
+  extend UI::ToggleGroupItemBehavior
+  all_attributes = toggle_group_item_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :button, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/tooltip/_content.html.erb

@@ -0,0 +1,17 @@
+<%# Tooltip Content - Popup that displays tooltip information %>
+<%
+  @side = local_assigns.fetch(:side, "top")
+  @align = local_assigns.fetch(:align, "center")
+  @side_offset = local_assigns.fetch(:side_offset, 4)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TooltipContentBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = tooltip_content_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/tooltip/_trigger.html.erb

@@ -0,0 +1,39 @@
+<%# Tooltip Trigger - Interactive element that shows/hides tooltip %>
+<%
+  @as_child = local_assigns.fetch(:as_child, false)
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TooltipTriggerBehavior
+
+  # Get HTML attributes from behavior
+  trigger_attrs = tooltip_trigger_html_attributes.deep_merge(@attributes)
+-%>
+<% if @as_child %>
+  <%# asChild mode: capture block and inject attributes into first element %>
+  <% captured_content = capture { yield } %>
+  <%= raw captured_content.sub(/(<[a-z][a-z0-9]*)([\s>])/i) do |match|
+    tag_start, tag_end = $1, $2
+
+    # Build attributes string manually
+    attrs_array = trigger_attrs.map do |key, value|
+      if key == :data && value.is_a?(Hash)
+        # Handle data attributes
+        value.map { |k, v| "data-#{k.to_s.dasherize}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ")
+      elsif value.is_a?(TrueClass)
+        key.to_s.dasherize
+      elsif value.is_a?(FalseClass) || value.nil?
+        nil
+      else
+        "#{key.to_s.dasherize}=\"#{ERB::Util.html_escape(value)}\""
+      end
+    end.compact.join(" ")
+
+    "#{tag_start} #{attrs_array}#{tag_end}"
+  end %>
+<% else %>
+  <%# Default mode: render as button %>
+  <%= content_tag :button, trigger_attrs do %>
+    <%= yield %>
+  <% end %>
+<% end %>

data/config/importmap.rb

@@ -0,0 +1,6 @@
+# UI Engine - Importmap Configuration
+# This file is automatically loaded by Rails apps that use this engine with importmap-rails
+
+# Main entry point - uses generated ESM file from Rollup build
+# Importmaps work with ES modules, not UMD
+pin "ui", to: "ui.esm.js"

data/config/routes.rb

@@ -0,0 +1,3 @@
+UI::Engine.routes.draw do
+  # Routes are defined by the host application
+end

data/lib/fernandes-ui.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# fernandes-ui gem loader
+# This file allows the gem to be published as "fernandes-ui" on RubyGems
+# while maintaining the UI namespace internally.
+#
+# Usage in Gemfile:
+#   gem "fernandes-ui"
+#
+# This will load the UI module and make all components available.
+
+require "ui"

data/lib/generators/ui/install/install_generator.rb

@@ -0,0 +1,141 @@
+module UI
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      def detect_asset_pipeline
+        @asset_pipeline = if defined?(Propshaft)
+          :propshaft
+        elsif defined?(Sprockets)
+          :sprockets
+        else
+          :unknown
+        end
+
+        @js_bundler = if File.exist?(Rails.root.join("config/importmap.rb"))
+          :importmap
+        elsif File.exist?(Rails.root.join("package.json"))
+          :node
+        else
+          :none
+        end
+      end
+
+      def show_asset_pipeline_info
+        say "\n🔍 Detecting your setup...\n", :yellow
+        say "  Asset pipeline: #{@asset_pipeline}", :green
+        say "  JavaScript bundler: #{@js_bundler}", :green
+        say "\n"
+      end
+
+      def install_tailwind_css
+        say "📦 Installing Tailwind CSS 4...\n", :yellow
+
+        # Create Tailwind CSS config file
+        template "application.tailwind.css", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+
+        # Create builds directory
+        create_file Rails.root.join("app/assets/builds/.keep")
+
+        # Add to gitignore
+        append_to_file Rails.root.join(".gitignore"), "\n# Compiled CSS\n/app/assets/builds/**/*.css\n"
+
+        say "  ✓ Created app/assets/stylesheets/application.tailwind.css", :green
+        say "  ✓ Created app/assets/builds directory", :green
+      end
+
+      def install_package_json
+        if @js_bundler == :node || !File.exist?(Rails.root.join("package.json"))
+          say "\n📄 Setting up package.json...\n", :yellow
+          template "package.json", Rails.root.join("package.json")
+          say "  ✓ Created package.json with Tailwind CLI", :green
+        else
+          say "\n📄 Updating existing package.json...\n", :yellow
+          # TODO: Merge scripts into existing package.json
+          say "  ⚠ Please add Tailwind scripts to your package.json manually", :yellow
+        end
+      end
+
+      def install_procfile
+        if !File.exist?(Rails.root.join("Procfile.dev"))
+          say "\n🚀 Setting up Procfile.dev...\n", :yellow
+          template "Procfile.dev", Rails.root.join("Procfile.dev")
+          say "  ✓ Created Procfile.dev", :green
+        else
+          say "\n  ⚠ Procfile.dev already exists, skipping", :yellow
+        end
+      end
+
+      def install_javascript
+        case @js_bundler
+        when :importmap
+          install_importmap_javascript
+        when :node
+          install_node_javascript
+        else
+          say "\n⚠ No JavaScript bundler detected", :yellow
+        end
+      end
+
+      def show_next_steps
+        say "\n"
+        say "="*60, :green
+        say "✅ UI Engine installed successfully!", :green
+        say "="*60, :green
+        say "\n"
+        say "📋 Next steps:\n", :yellow
+        say "\n"
+
+        say "  1. Install dependencies:", :cyan
+        say "     $ bun install\n", :white
+        say "\n"
+
+        say "  2. Build Tailwind CSS:", :cyan
+        say "     $ bun run build:css\n", :white
+        say "\n"
+
+        say "  3. Update your layout file to include:", :cyan
+        say "     <%= stylesheet_link_tag 'application' %>\n", :white
+        say "\n"
+
+        if @js_bundler == :importmap
+          say "  4. Import UI Engine in your JavaScript:", :cyan
+          say "     import UI from 'ui'\n", :white
+          say "     UI.init()\n", :white
+          say "\n"
+        end
+
+        say "  5. Start development with:", :cyan
+        say "     $ bin/dev\n", :white
+        say "\n"
+
+        say "="*60, :green
+        say "📚 Documentation: https://github.com/your-repo/ui", :cyan
+        say "="*60, :green
+        say "\n"
+      end
+
+      private
+
+      def install_importmap_javascript
+        say "\n🗺️  Configuring importmap...\n", :yellow
+
+        # Add UI engine pin to the host app's importmap
+        if File.exist?(Rails.root.join("config/importmap.rb"))
+          append_to_file Rails.root.join("config/importmap.rb"), <<~RUBY
+
+            # UI Engine
+            pin "ui", to: "ui/index.js"
+          RUBY
+          say "  ✓ Added 'ui' pin to config/importmap.rb", :green
+        end
+      end
+
+      def install_node_javascript
+        say "\n📦 Node.js setup detected\n", :yellow
+        say "  ℹ UI Engine JavaScript is available in the gem", :cyan
+        say "  ℹ Import it in your JavaScript bundle as needed", :cyan
+      end
+    end
+  end
+end

data/lib/generators/ui/install/templates/Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: bun run build:css:watch

data/lib/generators/ui/install/templates/application.tailwind.css

@@ -0,0 +1,32 @@
+@import "tailwindcss";
+
+/**
+ * Import UI Engine base styles and variables
+ * This provides CSS variables like --ui-primary, --ui-spacing-*, etc.
+ */
+@import "ui/application.css";
+
+/**
+ * Tailwind 4 configuration using CSS-based approach
+ * Register base path for Tailwind to automatically scan
+ */
+
+@source "../..";
+
+/**
+ * Custom theme configuration
+ * Customize the UI Engine variables or add your own
+ */
+
+@theme {
+  /* You can override UI Engine CSS variables here */
+  /* Example:
+  --color-primary: var(--ui-primary);
+  --font-family-sans: "Inter", sans-serif;
+  */
+}
+
+/**
+ * Custom CSS utilities and components
+ * Add any custom styles below
+ */

data/lib/generators/ui/install/templates/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "app",
+  "private": true,
+  "packageManager": "bun@latest",
+  "scripts": {
+    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
+    "build:css:watch": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch",
+    "build:css:prod": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.17"
+  }
+}

data/lib/tasks/ui_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :ui do
+#   # Task goes here
+# end

data/lib/ui/configuration.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module UI
+  # ==========================================================================
+  # Configuration
+  # ==========================================================================
+  # Allows users to override automatic gem detection for Phlex and ViewComponent.
+  #
+  # @example Force enable (useful for testing unsupported versions)
+  #   UI.configure do |c|
+  #     c.enable_phlex = true
+  #     c.enable_view_component = true
+  #   end
+  #
+  # @example Force disable (useful when gems exist but shouldn't be used)
+  #   UI.configure do |c|
+  #     c.enable_phlex = false
+  #     c.enable_view_component = false
+  #   end
+  #
+  # @example Let automatic detection decide (default)
+  #   # Don't call configure, or set to nil
+  #   UI.configure do |c|
+  #     c.enable_phlex = nil  # auto-detect
+  #     c.enable_view_component = nil  # auto-detect
+  #   end
+
+  class Configuration
+    # @return [Boolean, nil] nil = auto-detect, true = force enable, false = force disable
+    attr_accessor :enable_phlex
+
+    # @return [Boolean, nil] nil = auto-detect, true = force enable, false = force disable
+    attr_accessor :enable_view_component
+
+    def initialize
+      @enable_phlex = nil
+      @enable_view_component = nil
+    end
+  end
+
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+
+    def reset_configuration!
+      @configuration = Configuration.new
+    end
+  end
+end

data/lib/ui/engine.rb

@@ -0,0 +1,158 @@
+require_relative "configuration"
+
+module UI
+  class Engine < ::Rails::Engine
+    isolate_namespace UI
+
+    # ==========================================================================
+    # Optional Dependencies
+    # ==========================================================================
+    # Loading behavior is controlled by UI.configuration:
+    #   - nil (default): auto-detect based on gem availability and version
+    #   - true: force enable (skip version check, useful for testing)
+    #   - false: force disable (don't load even if gem is available)
+    #
+    # Minimum version requirements (for auto-detect):
+    #   - phlex: >= 2.0.0
+    #   - view_component: >= 3.0.0
+
+    PHLEX_MIN_VERSION = Gem::Version.new("2.0.0")
+    VIEW_COMPONENT_MIN_VERSION = Gem::Version.new("3.0.0")
+
+    # Determine if Phlex should be loaded
+    phlex_enabled = case UI.configuration.enable_phlex
+    when true
+      # Force enable - try to load without version check
+      begin
+        require "phlex-rails"
+        true
+      rescue LoadError
+        warn "[UI] Phlex force-enabled but gem not found. Phlex components won't be loaded."
+        false
+      end
+    when false
+      # Force disable
+      false
+    else
+      # Auto-detect (nil)
+      begin
+        require "phlex-rails"
+        phlex_spec = Gem.loaded_specs["phlex"]
+        if phlex_spec && phlex_spec.version >= PHLEX_MIN_VERSION
+          true
+        else
+          version = phlex_spec&.version || "unknown"
+          warn "[UI] Phlex #{version} found, but >= #{PHLEX_MIN_VERSION} is required. Phlex components won't be loaded."
+          false
+        end
+      rescue LoadError
+        false
+      end
+    end
+
+    # Determine if ViewComponent should be loaded
+    view_component_enabled = case UI.configuration.enable_view_component
+    when true
+      # Force enable - try to load without version check
+      begin
+        require "view_component"
+        true
+      rescue LoadError
+        warn "[UI] ViewComponent force-enabled but gem not found. ViewComponents won't be loaded."
+        false
+      end
+    when false
+      # Force disable
+      false
+    else
+      # Auto-detect (nil)
+      begin
+        require "view_component"
+        vc_spec = Gem.loaded_specs["view_component"]
+        if vc_spec && vc_spec.version >= VIEW_COMPONENT_MIN_VERSION
+          true
+        else
+          version = vc_spec&.version || "unknown"
+          warn "[UI] ViewComponent #{version} found, but >= #{VIEW_COMPONENT_MIN_VERSION} is required. ViewComponents won't be loaded."
+          false
+        end
+      rescue LoadError
+        false
+      end
+    end
+
+    # ==========================================================================
+    # Autoload Paths Configuration
+    # ==========================================================================
+    # Behaviors are always loaded (required for ERB partials)
+    config.autoload_paths << root.join("app/behaviors")
+
+    # Phlex components
+    if phlex_enabled
+      config.autoload_paths << root.join("app/components")
+    end
+
+    # ViewComponents
+    if view_component_enabled
+      config.autoload_paths << root.join("app/view_components")
+    end
+
+    initializer "setup_inflections" do
+      ActiveSupport::Inflector.inflections do |inflect|
+        inflect.acronym "UI"
+      end
+    end
+
+    # Configure asset paths for different asset pipelines
+    initializer "ui.assets" do |app|
+      # Add compiled assets path for Propshaft (Rails 8 default)
+      if defined?(Propshaft)
+        # Add generated JavaScript files from Rollup build (MUST come before source)
+        app.config.assets.paths << root.join("app/assets/javascripts")
+        app.config.assets.paths << root.join("app/assets/builds")
+        # NOTE: We don't add app/javascript to avoid serving source files
+        # Source files are only for building, not for serving
+      end
+
+      # Add assets paths for Sprockets (Rails 6/7)
+      if defined?(Sprockets)
+        app.config.assets.paths << root.join("app/assets/stylesheets")
+        app.config.assets.paths << root.join("app/assets/javascripts") if root.join("app/assets/javascripts").exist?
+
+        # Precompile engine assets for production
+        app.config.assets.precompile += %w[ui/application.css ui/application.js]
+      end
+    end
+
+    # Register importmap if available (Rails 7+ with importmap-rails)
+    initializer "ui.importmap", after: "importmap" do |app|
+      # Only proceed if importmap is actually loaded and configured
+      next unless defined?(Importmap::Engine)
+      next unless app.respond_to?(:importmap)
+
+      # Add engine's importmap configuration to the app's importmap paths
+      engine_importmap_path = root.join("config/importmap.rb")
+      if engine_importmap_path.exist?
+        # Explicitly draw the engine's importmap AFTER initialization
+        app.importmap.draw(engine_importmap_path)
+      end
+
+      # Add engine's JavaScript path for cache sweeping in development
+      # Only watch the generated files, not the source files
+      engine_js_generated_path = root.join("app/assets/javascripts")
+      app.config.importmap.cache_sweepers << engine_js_generated_path unless app.config.importmap.cache_sweepers.include?(engine_js_generated_path)
+    end
+
+    # Add app/assets/builds to load path for compiled Tailwind CSS
+    initializer "ui.asset_paths" do |app|
+      config.paths["app/assets"] << "app/assets/builds"
+    end
+
+    # Include engine helpers in the host application
+    initializer "ui.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include LucideRails::LucideHelper if defined?(LucideRails::LucideHelper)
+      end
+    end
+  end
+end

data/lib/ui/version.rb

@@ -0,0 +1,3 @@
+module UI
+  VERSION = "0.1.0"
+end

data/lib/ui.rb

@@ -0,0 +1,8 @@
+require "ui/version"
+require "ui/configuration"
+require "lucide-rails"
+require "tailwind_merge"
+require "ui/engine"
+
+module UI
+end