fernandes-ui 0.1.0 → 0.1.2

data/app/view_components/ui/toggle_group_item_component.rb

@@ -1,72 +1,72 @@
 # frozen_string_literal: true
 
-    # ItemComponent - ViewComponent implementation
-    #
-    # An individual toggle button within a Toggle Group.
-    # Inherits variant, size, and type from parent ToggleGroup.
-    #
-    # @example Basic usage
-    #   <%= render UI::ItemComponent.new(value: "left") { "Left" } %>
-    #
-    # @example With icon
-    #   <%= render UI::ItemComponent.new(value: "bold") do %>
-    #     <%= icon("bold") %>
-    #   <% end %>
-    class UI::ToggleGroupItemComponent < ViewComponent::Base
-      include UI::ToggleGroupItemBehavior
+# ItemComponent - ViewComponent implementation
+#
+# An individual toggle button within a Toggle Group.
+# Inherits variant, size, and type from parent ToggleGroup.
+#
+# @example Basic usage
+#   <%= render UI::ItemComponent.new(value: "left") { "Left" } %>
+#
+# @example With icon
+#   <%= render UI::ItemComponent.new(value: "bold") do %>
+#     <%= icon("bold") %>
+#   <% end %>
+class UI::ToggleGroupItemComponent < ViewComponent::Base
+  include UI::ToggleGroupItemBehavior
 
-      # @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
-      def initialize(value:, variant: nil, size: nil, pressed: false, disabled: false, classes: "", **attributes)
-        @value = value
-        @variant = variant
-        @size = size
-        @pressed = pressed
-        @disabled = disabled
-        @classes = classes
-        @attributes = attributes
+  # @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
+  def initialize(value:, variant: nil, size: nil, pressed: false, disabled: false, classes: "", **attributes)
+    @value = value
+    @variant = variant
+    @size = size
+    @pressed = pressed
+    @disabled = disabled
+    @classes = classes
+    @attributes = attributes
 
-        # These will be set from parent context if available
-        @group_type = nil
-        @spacing = nil
-      end
+    # These will be set from parent context if available
+    @group_type = nil
+    @spacing = nil
+  end
 
-      def before_render
-        # Try to inherit from parent ToggleGroup context
-        if helpers.instance_variable_defined?(:@toggle_group_context)
-          parent_context = helpers.instance_variable_get(:@toggle_group_context)
-          @variant ||= parent_context[:variant]
-          @size ||= parent_context[:size]
-          @group_type = parent_context[:type]
-          @spacing = parent_context[:spacing]
+  def before_render
+    # Try to inherit from parent ToggleGroup context
+    if helpers.instance_variable_defined?(:@toggle_group_context)
+      parent_context = helpers.instance_variable_get(:@toggle_group_context)
+      @variant ||= parent_context[:variant]
+      @size ||= parent_context[:size]
+      @group_type = parent_context[:type]
+      @spacing = parent_context[:spacing]
 
-          # Check if this item should be pressed based on parent value
-          parent_value = parent_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
+      # Check if this item should be pressed based on parent value
+      parent_value = parent_context[:value]
+      if parent_value
+        @pressed = if @group_type == "multiple"
+          Array(parent_value).include?(@value)
+        else
+          parent_value.to_s == @value.to_s
         end
-
-        # Fallback defaults
-        @variant ||= "default"
-        @size ||= "default"
-        @group_type ||= "single"
-        @spacing ||= 0
       end
+    end
 
-      def call
-        attrs = toggle_group_item_html_attributes
-        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+    # Fallback defaults
+    @variant ||= "default"
+    @size ||= "default"
+    @group_type ||= "single"
+    @spacing ||= 0
+  end
 
-        content_tag :button, content, **attrs.merge(@attributes.except(:data))
-      end
-    end
+  def call
+    attrs = toggle_group_item_html_attributes
+    attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+    content_tag :button, content, **attrs.merge(@attributes.except(:data))
+  end
+end

data/app/view_components/ui/tooltip_component.rb

@@ -1,19 +1,19 @@
 # frozen_string_literal: true
 
-    # TooltipComponent - ViewComponent implementation
-    #
-    # Root container for tooltip. Manages tooltip state via Stimulus controller.
-    class UI::TooltipComponent < ViewComponent::Base
-      include UI::TooltipBehavior
+# TooltipComponent - ViewComponent implementation
+#
+# Root container for tooltip. Manages tooltip state via Stimulus controller.
+class UI::TooltipComponent < ViewComponent::Base
+  include UI::TooltipBehavior
 
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(**attributes)
-        @attributes = attributes
-      end
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(**attributes)
+    @attributes = attributes
+  end
 
-      def call
-        content_tag :div, **tooltip_html_attributes.merge(@attributes.except(:data)) do
-          content
-        end
-      end
+  def call
+    content_tag :div, **tooltip_html_attributes.merge(@attributes.except(:data)) do
+      content
     end
+  end
+end

data/app/view_components/ui/tooltip_content_component.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
-    # ContentComponent - ViewComponent implementation
-    #
-    # The popup content that displays tooltip information.
-    # Positioned by Floating UI via Stimulus controller.
-    class UI::TooltipContentComponent < ViewComponent::Base
-      include UI::TooltipContentBehavior
+# ContentComponent - ViewComponent implementation
+#
+# The popup content that displays tooltip information.
+# Positioned by Floating UI via Stimulus controller.
+class UI::TooltipContentComponent < ViewComponent::Base
+  include UI::TooltipContentBehavior
 
-      # @param side [String] Preferred side: "top", "right", "bottom", "left"
-      # @param align [String] Alignment: "start", "center", "end"
-      # @param side_offset [Integer] Distance from trigger element in pixels
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(side: "top", align: "center", side_offset: 4, classes: "", **attributes)
-        @side = side
-        @align = align
-        @side_offset = side_offset
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param side [String] Preferred side: "top", "right", "bottom", "left"
+  # @param align [String] Alignment: "start", "center", "end"
+  # @param side_offset [Integer] Distance from trigger element in pixels
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(side: "top", align: "center", side_offset: 4, classes: "", **attributes)
+    @side = side
+    @align = align
+    @side_offset = side_offset
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        content_tag :div, **tooltip_content_html_attributes.merge(@attributes.except(:data)) do
-          content
-        end
-      end
+  def call
+    content_tag :div, **tooltip_content_html_attributes.merge(@attributes.except(:data)) do
+      content
     end
+  end
+end

data/app/view_components/ui/tooltip_trigger_component.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
-    # TriggerComponent - ViewComponent implementation
-    #
-    # The interactive element that shows/hides the tooltip on hover/focus.
-    # Supports asChild pattern for composition with other components.
-    class UI::TooltipTriggerComponent < ViewComponent::Base
-      include UI::TooltipTriggerBehavior
+# TriggerComponent - ViewComponent implementation
+#
+# The interactive element that shows/hides the tooltip on hover/focus.
+# Supports asChild pattern for composition with other components.
+class UI::TooltipTriggerComponent < ViewComponent::Base
+  include UI::TooltipTriggerBehavior
 
-      # @param as_child [Boolean] If true, yields attributes to block instead of rendering button
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, **attributes)
-        @as_child = as_child
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] If true, yields attributes to block instead of rendering button
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, **attributes)
+    @as_child = as_child
+    @attributes = attributes
+  end
 
-      def call
-        trigger_attrs = tooltip_trigger_html_attributes.merge(@attributes.except(:data))
+  def call
+    trigger_attrs = tooltip_trigger_html_attributes.merge(@attributes.except(:data))
 
-        # Default mode: render as button with proper styling
-        content_tag :button, **trigger_attrs do
-          content
-        end
-      end
+    # Default mode: render as button with proper styling
+    content_tag :button, **trigger_attrs do
+      content
     end
+  end
+end

data/app/views/ui/_command.html.erb

@@ -4,10 +4,12 @@
   # A command palette component for searching and selecting items.
   #
   # @param loop [Boolean] Whether to loop navigation
+  # @param autofocus [Boolean] Whether to focus the input on show (default: false)
   # @param classes [String] Additional CSS classes
   # @param attributes [Hash] Additional HTML attributes
 
   @loop = local_assigns.fetch(:loop, true)
+  @autofocus = local_assigns.fetch(:autofocus, false)
   @classes = local_assigns.fetch(:classes, "")
   @attributes = local_assigns.fetch(:attributes, {})
 

data/app/views/ui/carousel/_next.html.erb

@@ -7,7 +7,7 @@
   extend UI::CarouselNextBehavior
   all_attributes = carousel_next_html_attributes
 %>
-<%= render "ui/button", attributes: all_attributes, classes: carousel_next_classes, variant: :ghost, size: :icon do %>
+<%= render "ui/button", attributes: all_attributes, classes: carousel_next_classes, variant: :outline, size: :icon do %>
   <%= lucide_icon("arrow-right", class: "size-4") %>
   <span class="sr-only">Next slide</span>
 <% end %>

data/app/views/ui/carousel/_previous.html.erb

@@ -7,7 +7,7 @@
   extend UI::CarouselPreviousBehavior
   all_attributes = carousel_previous_html_attributes
 %>
-<%= render "ui/button", attributes: all_attributes, classes: carousel_previous_classes, variant: :ghost, size: :icon do %>
+<%= render "ui/button", attributes: all_attributes, classes: carousel_previous_classes, variant: :outline, size: :icon do %>
   <%= lucide_icon("arrow-left", class: "size-4") %>
   <span class="sr-only">Previous slide</span>
 <% end %>

data/lib/generators/ui/css_generator.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Ui
+  class CssGenerator < Rails::Generators::Base
+    desc "Copies UI Engine CSS to app/assets/tailwind/ui.css for use with cssbundling-rails/tailwindcss-rails"
+
+    def copy_css
+      gem_css_path = UI::Engine.root.join("app/assets/stylesheets/ui/application.css")
+
+      unless gem_css_path.exist?
+        say "Error: Could not find UI Engine CSS at #{gem_css_path}", :red
+        return
+      end
+
+      destination = Rails.root.join("app/assets/tailwind/ui.css")
+
+      # Create directory if it doesn't exist
+      FileUtils.mkdir_p(destination.dirname)
+
+      # Copy the file
+      FileUtils.cp(gem_css_path, destination)
+
+      say "Copied UI Engine CSS to #{destination}", :green
+    end
+
+    def add_import_to_application_css
+      application_css = Rails.root.join("app/assets/tailwind/application.css")
+
+      unless application_css.exist?
+        say "Warning: #{application_css} not found, skipping import", :yellow
+        return
+      end
+
+      content = File.read(application_css)
+
+      if content.include?('@import "./ui.css"')
+        say "Import already exists in #{application_css}", :yellow
+        return
+      end
+
+      # Add import after tailwindcss import
+      import_line = '@import "./ui.css";'
+      if content.include?('@import "tailwindcss"')
+        new_content = content.sub('@import "tailwindcss";', "@import \"tailwindcss\";\n#{import_line}")
+      elsif content.include?("@import 'tailwindcss'")
+        new_content = content.sub("@import 'tailwindcss';", "@import 'tailwindcss';\n#{import_line}")
+      else
+        # Fallback: add at the end if tailwindcss import not found
+        new_content = "#{content.rstrip}\n#{import_line}\n"
+        say "Warning: @import \"tailwindcss\" not found, added import at the end", :yellow
+      end
+
+      File.write(application_css, new_content)
+
+      say "Added @import \"./ui.css\" to #{application_css}", :green
+    end
+  end
+end

data/lib/generators/ui/install_generator.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module Ui
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path("install/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 "\nDetecting 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 "\nSetting up package.json...\n", :yellow
+        template "package.json", Rails.root.join("package.json")
+        say "  Created package.json with Tailwind CLI", :green
+      else
+        say "\nUpdating existing package.json...\n", :yellow
+        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 "\nSetting 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 "\nNo 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 "\nConfiguring 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 "\nNode.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

data/lib/ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fernandes-ui
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Celso Fernandes
@@ -100,7 +100,6 @@ files:
 - app/assets/javascripts/ui.esm.js
 - app/assets/javascripts/ui.js
 - app/assets/stylesheets/ui/application.css
-- app/assets/stylesheets/ui/sonner.css
 - app/behaviors/ui/accordion_behavior.rb
 - app/behaviors/ui/accordion_content_behavior.rb
 - app/behaviors/ui/accordion_item_behavior.rb
@@ -1176,10 +1175,11 @@ files:
 - config/importmap.rb
 - config/routes.rb
 - lib/fernandes-ui.rb
-- lib/generators/ui/install/install_generator.rb
+- lib/generators/ui/css_generator.rb
 - lib/generators/ui/install/templates/Procfile.dev
 - lib/generators/ui/install/templates/application.tailwind.css
 - lib/generators/ui/install/templates/package.json
+- lib/generators/ui/install_generator.rb
 - lib/tasks/ui_tasks.rake
 - lib/ui.rb
 - lib/ui/configuration.rb