shadcn-rails 0.1.0 → 0.2.1

data/app/components/shadcn/tooltip_component.rb

@@ -18,7 +18,7 @@ module Shadcn
   #   <% end %>
   #
   class TooltipComponent < BaseComponent
-    CONTENT_CLASSES = "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+    CONTENT_CLASSES = "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground whitespace-nowrap animate-tooltip-in data-[state=closed]:animate-tooltip-out"
 
     # @param text [String] Tooltip text content
     # @param side [Symbol] Side to show tooltip (:top, :right, :bottom, :left)
@@ -41,49 +41,24 @@ module Shadcn
       super(**options)
     end
 
-    def call
-      content_tag(:span, tooltip_structure, tooltip_attributes)
-    end
-
     private
 
-    def tooltip_structure
-      safe_join([
-        trigger_wrapper,
-        tooltip_content_element
-      ])
-    end
-
-    def trigger_wrapper
-      content_tag(:span, content, {
-        "data-shadcn--tooltip-target": "trigger",
-        "data-action": "mouseenter->shadcn--tooltip#show mouseleave->shadcn--tooltip#hide focus->shadcn--tooltip#show blur->shadcn--tooltip#hide"
-      })
+    def tooltip_classes
+      cn("relative inline-block", class_name)
     end
 
-    def tooltip_content_element
-      content_tag(:div, @tooltip_content, {
-        class: CONTENT_CLASSES,
-        role: "tooltip",
-        "data-shadcn--tooltip-target": "content",
-        "data-side": @side.to_s,
-        "data-state": "closed",
-        hidden: true
-      })
+    def tooltip_data_attrs
+      {
+        controller: "shadcn--tooltip",
+        "shadcn--tooltip-side-value": @side.to_s,
+        "shadcn--tooltip-align-value": @align.to_s,
+        "shadcn--tooltip-delay-value": @delay_duration,
+        "shadcn--tooltip-skip-delay-value": @skip_delay_duration
+      }
     end
 
-    def tooltip_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--tooltip",
-        "data-shadcn--tooltip-side-value": @side.to_s,
-        "data-shadcn--tooltip-align-value": @align.to_s,
-        "data-shadcn--tooltip-delay-value": @delay_duration,
-        "data-shadcn--tooltip-skip-delay-value": @skip_delay_duration
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def tooltip_content_classes
+      CONTENT_CLASSES
     end
   end
 end

data/lib/generators/shadcn/add/USAGE

@@ -0,0 +1,24 @@
+Description:
+    Adds shadcn components to your Rails application for customization.
+
+    This copies the component source code into your app so you can modify it.
+    Local components take precedence over the gem's built-in components.
+
+Examples:
+    rails generate shadcn:add button
+    rails generate shadcn:add button card dialog
+    rails generate shadcn:add dialog --exclude-controllers
+    rails generate shadcn:add --all
+    rails generate shadcn:add --list
+
+    This will create:
+        app/components/shadcn/button_component.rb
+        app/javascript/controllers/shadcn/dialog_controller.js (if applicable)
+
+Options:
+    --list                  List all available components
+    --all                   Add all available components
+    --include-controllers   Include Stimulus controllers (default: true)
+    --exclude-controllers   Exclude Stimulus controllers
+    --force                 Overwrite existing files
+    --path=PATH             Path for components (default: app/components)

data/lib/generators/shadcn/add/add_generator.rb

@@ -0,0 +1,279 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "rails/generators/base"
+
+module Shadcn
+  module Generators
+    # Generator for adding shadcn components to your application
+    # Usage: rails generate shadcn:add button
+    #        rails generate shadcn:add button card dialog
+    #        rails generate shadcn:add button --exclude-controllers
+    class AddGenerator < ::Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      argument :components, type: :array, default: [], banner: "component [component ...]"
+
+      class_option :all, type: :boolean, default: false,
+        desc: "Add all available components"
+      class_option :list, type: :boolean, default: false,
+        desc: "List all available components"
+      class_option :include_controllers, type: :boolean, default: true,
+        desc: "Include Stimulus controllers (default: true)"
+      class_option :exclude_controllers, type: :boolean, default: false,
+        desc: "Exclude Stimulus controllers"
+      class_option :force, type: :boolean, default: false,
+        desc: "Overwrite existing files"
+      class_option :path, type: :string, default: "app/components",
+        desc: "Path for components (default: app/components)"
+
+      desc "Adds shadcn components to your application for customization"
+
+      # Map component names to their files
+      COMPONENT_FILES = {
+        "accordion" => { component: "accordion_component.rb", controller: "accordion_controller.js" },
+        "alert" => { component: "alert_component.rb", controller: nil },
+        "alert_dialog" => { component: "alert_dialog_component.rb", controller: "dialog_controller.js" },
+        "aspect_ratio" => { component: "aspect_ratio_component.rb", controller: nil },
+        "avatar" => { component: "avatar_component.rb", controller: "avatar_controller.js" },
+        "badge" => { component: "badge_component.rb", controller: nil },
+        "breadcrumb" => { component: "breadcrumb_component.rb", controller: nil },
+        "button" => { component: "button_component.rb", controller: nil },
+        "button_group" => { component: "button_group_component.rb", controller: nil },
+        "calendar" => { component: "calendar_component.rb", controller: "calendar_controller.js" },
+        "card" => { component: "card_component.rb", controller: nil },
+        "carousel" => { component: "carousel_component.rb", controller: "carousel_controller.js" },
+        "checkbox" => { component: "checkbox_component.rb", controller: "checkbox_controller.js" },
+        "collapsible" => { component: "collapsible_component.rb", controller: "collapsible_controller.js" },
+        "combobox" => { component: "combobox_component.rb", controller: "combobox_controller.js" },
+        "command" => { component: "command_component.rb", controller: "command_controller.js" },
+        "context_menu" => { component: "context_menu_component.rb", controller: "context_menu_controller.js" },
+        "date_picker" => { component: "date_picker_component.rb", controller: "date_picker_controller.js" },
+        "dialog" => { component: "dialog_component.rb", controller: "dialog_controller.js" },
+        "drawer" => { component: "drawer_component.rb", controller: "drawer_controller.js" },
+        "dropdown_menu" => { component: "dropdown_menu_component.rb", controller: "dropdown_controller.js" },
+        "field" => { component: "field_component.rb", controller: nil },
+        "hover_card" => { component: "hover_card_component.rb", controller: "hover_card_controller.js" },
+        "input" => { component: "input_component.rb", controller: nil },
+        "input_group" => { component: "input_group_component.rb", controller: nil },
+        "input_otp" => { component: "input_otp_component.rb", controller: "input_otp_controller.js" },
+        "kbd" => { component: "kbd_component.rb", controller: nil },
+        "label" => { component: "label_component.rb", controller: nil },
+        "menubar" => { component: "menubar_component.rb", controller: "menubar_controller.js" },
+        "native_select" => { component: "native_select_component.rb", controller: nil },
+        "navigation_menu" => { component: "navigation_menu_component.rb", controller: "navigation_menu_controller.js" },
+        "pagination" => { component: "pagination_component.rb", controller: nil },
+        "popover" => { component: "popover_component.rb", controller: "popover_controller.js" },
+        "progress" => { component: "progress_component.rb", controller: nil },
+        "radio_group" => { component: "radio_group_component.rb", controller: "radio_group_controller.js" },
+        "resizable" => { component: "resizable_panel_group_component.rb", controller: "resizable_controller.js" },
+        "scroll_area" => { component: "scroll_area_component.rb", controller: "scroll_area_controller.js" },
+        "select" => { component: "select_component.rb", controller: "select_controller.js" },
+        "separator" => { component: "separator_component.rb", controller: nil },
+        "sheet" => { component: "sheet_component.rb", controller: "sheet_controller.js" },
+        "sidebar" => { component: "sidebar_component.rb", controller: "sidebar_controller.js" },
+        "skeleton" => { component: "skeleton_component.rb", controller: nil },
+        "slider" => { component: "slider_component.rb", controller: "slider_controller.js" },
+        "spinner" => { component: "spinner_component.rb", controller: nil },
+        "switch" => { component: "switch_component.rb", controller: "switch_controller.js" },
+        "table" => { component: "table_component.rb", controller: nil },
+        "tabs" => { component: "tabs_component.rb", controller: "tabs_controller.js" },
+        "textarea" => { component: "textarea_component.rb", controller: nil },
+        "toast" => { component: "toast_component.rb", controller: "toast_controller.js" },
+        "toggle" => { component: "toggle_component.rb", controller: "toggle_controller.js" },
+        "toggle_group" => { component: "toggle_group_component.rb", controller: "toggle_group_controller.js" },
+        "tooltip" => { component: "tooltip_component.rb", controller: "tooltip_controller.js" },
+        "typography" => { component: "typography_component.rb", controller: nil }
+      }.freeze
+
+      def validate_components
+        if options[:list]
+          display_available_components
+          exit 0
+        end
+
+        if options[:all]
+          @components_to_add = COMPONENT_FILES.keys
+        else
+          validate_requested_components
+          @components_to_add = components
+        end
+      end
+
+      def display_plan
+        say ""
+        say "Adding #{@components_to_add.length} component(s):", :green
+        @components_to_add.each { |c| say "  - #{c}" }
+        if include_controllers?
+          controllers = @components_to_add.count { |c| COMPONENT_FILES[c][:controller] }
+          say ""
+          say "Including #{controllers} Stimulus controller(s)", :cyan if controllers > 0
+        end
+        say ""
+      end
+
+      def add_components
+        @components_to_add.each do |component|
+          add_component(component)
+        end
+      end
+
+      def display_post_add_message
+        say ""
+        say "=" * 60, :green
+        say "  Components added successfully!", :green
+        say "=" * 60, :green
+        say ""
+        say "Components are now in your application:", :yellow
+        say "  - Ruby components: #{options[:path]}/shadcn/"
+        if include_controllers?
+          say "  - Stimulus controllers: app/javascript/controllers/shadcn/"
+        end
+        say ""
+        say "These local files will take precedence over the gem's components."
+        say "You can now customize them as needed."
+        say ""
+        if include_controllers?
+          say "Note: Register the controllers in your Stimulus application:", :cyan
+          say ""
+          say "  // In app/javascript/controllers/index.js"
+          say "  import ShadcnDialog from \"./shadcn/dialog_controller\""
+          say "  application.register(\"shadcn--dialog\", ShadcnDialog)"
+          say ""
+        end
+      end
+
+      private
+
+      def display_available_components
+        say ""
+        say "Available shadcn components:", :green
+        say ""
+
+        # Group by category
+        categories = {
+          "Buttons & Actions" => %w[button button_group toggle toggle_group],
+          "Form Inputs" => %w[checkbox field input input_group input_otp label native_select radio_group select slider switch textarea],
+          "Data Display" => %w[avatar badge card kbd progress skeleton spinner table typography aspect_ratio scroll_area],
+          "Feedback" => %w[alert toast tooltip],
+          "Overlays" => %w[alert_dialog dialog drawer dropdown_menu hover_card popover sheet context_menu],
+          "Navigation" => %w[accordion breadcrumb collapsible menubar navigation_menu pagination separator tabs resizable],
+          "Advanced" => %w[calendar carousel combobox command date_picker sidebar]
+        }
+
+        categories.each do |category, comps|
+          available = comps & COMPONENT_FILES.keys
+          next if available.empty?
+
+          say "  #{category}:", :yellow
+          available.each do |name|
+            controller_info = COMPONENT_FILES[name][:controller] ? " ✦" : ""
+            say "    #{name}#{controller_info}"
+          end
+          say ""
+        end
+
+        say "  ✦ = includes Stimulus controller", :cyan
+        say ""
+        say "Usage:", :yellow
+        say "  rails generate shadcn:add button"
+        say "  rails generate shadcn:add button card dialog"
+        say "  rails generate shadcn:add --all"
+        say ""
+      end
+
+      def validate_requested_components
+        if components.empty?
+          say "Error: Please specify at least one component or use --all", :red
+          say ""
+          display_available_components
+          exit 1
+        end
+
+        invalid = components - COMPONENT_FILES.keys
+        if invalid.any?
+          say "Error: Unknown component(s): #{invalid.join(', ')}", :red
+          say ""
+          display_available_components
+          exit 1
+        end
+      end
+
+      def add_component(name)
+        files = COMPONENT_FILES[name]
+
+        # Copy Ruby component
+        copy_ruby_component(name, files[:component])
+
+        # Copy ERB template if it exists
+        copy_erb_template(name, files[:component])
+
+        # Copy Stimulus controller if requested and exists
+        if include_controllers? && files[:controller]
+          copy_stimulus_controller(name, files[:controller])
+        end
+      end
+
+      def copy_ruby_component(name, filename)
+        source_path = gem_component_path(filename)
+        destination_path = File.join(options[:path], "shadcn", filename)
+
+        if File.exist?(destination_path) && !options[:force]
+          say "  skip  #{filename} (already exists, use --force to overwrite)", :yellow
+        else
+          copy_file source_path, destination_path
+          say "  create  #{filename}", :green
+        end
+      end
+
+      def copy_erb_template(name, ruby_filename)
+        erb_filename = ruby_filename.sub(/\.rb$/, ".html.erb")
+        source_path = gem_component_path(erb_filename)
+
+        # Only copy if the template exists
+        return unless File.exist?(source_path)
+
+        destination_path = File.join(options[:path], "shadcn", erb_filename)
+
+        if File.exist?(destination_path) && !options[:force]
+          say "  skip  #{erb_filename} (already exists, use --force to overwrite)", :yellow
+        else
+          copy_file source_path, destination_path
+          say "  create  #{erb_filename}", :green
+        end
+      end
+
+      def copy_stimulus_controller(name, filename)
+        source_path = gem_controller_path(filename)
+        destination_path = "app/javascript/controllers/shadcn/#{filename}"
+
+        # Create directory if it doesn't exist
+        directory = File.dirname(destination_path)
+        empty_directory directory unless File.directory?(directory)
+
+        if File.exist?(destination_path) && !options[:force]
+          say "  skip  #{filename} (already exists, use --force to overwrite)", :yellow
+        else
+          copy_file source_path, destination_path
+          say "  create  #{filename}", :green
+        end
+      end
+
+      def gem_component_path(filename)
+        File.join(gem_root, "app/components/shadcn", filename)
+      end
+
+      def gem_controller_path(filename)
+        File.join(gem_root, "app/assets/javascripts/shadcn/controllers", filename)
+      end
+
+      def gem_root
+        @gem_root ||= File.expand_path("../../../../..", __FILE__)
+      end
+
+      def include_controllers?
+        options[:include_controllers] && !options[:exclude_controllers]
+      end
+    end
+  end
+end

data/lib/generators/shadcn/install/USAGE

@@ -0,0 +1,22 @@
+Description:
+    Installs and configures shadcn-rails in your Rails application.
+
+Example:
+    rails generate shadcn:install
+
+    This will create:
+        config/initializers/shadcn.rb
+        config/shadcn.yml
+
+    And configure:
+        Tailwind CSS (if present)
+        Stimulus controllers
+
+Options:
+    --theme=NAME        Base color theme (default: neutral)
+                        Available: neutral, slate, stone, zinc, gray
+
+    --dark-mode=MODE    Dark mode strategy (default: class)
+                        Available: class, media, both
+
+    --skip-tailwind     Skip Tailwind CSS configuration

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

@@ -7,7 +7,7 @@ module Shadcn
   module Generators
     # Generator for installing shadcn-rails in a Rails application
     # Usage: rails generate shadcn:install
-    class InstallGenerator < Rails::Generators::Base
+    class InstallGenerator < ::Rails::Generators::Base
       source_root File.expand_path("templates", __dir__)
 
       class_option :theme, type: :string, default: "neutral",
@@ -15,7 +15,7 @@ module Shadcn
       class_option :css_variables, type: :boolean, default: true,
         desc: "Use CSS variables for theming"
       class_option :dark_mode, type: :string, default: "class",
-        desc: "Dark mode strategy (class, media, selector)"
+        desc: "Dark mode strategy (class, media, both)"
       class_option :skip_tailwind, type: :boolean, default: false,
         desc: "Skip Tailwind CSS configuration"
 
@@ -41,7 +41,7 @@ module Shadcn
             "\n/*\n *= require shadcn/base\n *= require shadcn/components\n */\n"
           end
         else
-          say "Could not find application stylesheet. Please manually import shadcn/base.css and shadcn/components.css", :yellow
+          say "Could not find application stylesheet. Please manually import shadcn styles.", :yellow
         end
       end
 
@@ -81,6 +81,11 @@ module Shadcn
         say "       Click me"
         say "     <% end %>"
         say ""
+        say "To add individual components to your app for customization:"
+        say ""
+        say "  rails generate shadcn:add button"
+        say "  rails generate shadcn:add --list"
+        say ""
         say "For more information, visit: https://github.com/iheanyi/shadcn-rails"
         say ""
       end

data/lib/generators/shadcn/install/templates/initializer.rb.tt

@@ -2,34 +2,14 @@
 
 # shadcn-rails configuration
 Shadcn::Rails.configure do |config|
-  # Style preset (currently only "default" is supported)
-  config.style = "default"
-
-  # Base color theme: neutral, stone, zinc, gray, slate
+  # Base color theme
+  # Available themes: neutral, slate, stone, zinc, gray
   config.base_color = "<%= options[:theme] %>"
 
-  # Whether to use CSS variables for theming
-  config.css_variables = <%= options[:css_variables] %>
-
-  # Prefix for Tailwind classes (e.g., "tw-")
-  # config.tailwind_prefix = ""
-
-  # Default border radius for components
-  config.radius = "0.5rem"
-
-  # Dark mode strategy: :class, :media, or :selector
+  # Dark mode strategy
+  # Available strategies: :class, :media, :both
+  # - :class - Uses .dark class on <html> for manual toggling
+  # - :media - Uses @media (prefers-color-scheme: dark) for system preference
+  # - :both - Includes both for maximum flexibility
   config.dark_mode = :<%= options[:dark_mode] %>
-
-  # Icon library to use: :lucide (default)
-  # config.icon_library = :lucide
-
-  # Register custom component aliases
-  # config.alias_component :my_button, MyCustomButtonComponent
-
-  # Register custom themes
-  # config.register_theme :corporate, {
-  #   primary: "210 100% 50%",
-  #   primary_foreground: "0 0% 100%",
-  #   ...
-  # }
 end

data/lib/generators/shadcn/install/templates/shadcn.yml.tt

@@ -1,35 +1,19 @@
-# shadcn-rails configuration file
-# This file mirrors the components.json structure from shadcn/ui
+# shadcn-rails configuration
+# This file stores component preferences and customizations
 
-# Style preset (currently only "default" is supported)
-style: "default"
+# Base color theme
+# Available: neutral, slate, stone, zinc, gray
+base_color: <%= options[:theme] %>
 
-# Tailwind CSS configuration
-tailwind:
-  # Path to your CSS file (for Tailwind CSS v4, leave config blank)
-  css: "app/assets/stylesheets/application.tailwind.css"
+# Dark mode strategy
+# Available: class, media, both
+dark_mode: <%= options[:dark_mode] %>
 
-  # Base color theme: neutral, stone, zinc, gray, slate
-  base_color: "<%= options[:theme] %>"
+# Component aliases (optional)
+# Map custom names to shadcn components
+# aliases:
+#   btn: button
+#   modal: dialog
 
-  # Use CSS variables for theming
-  css_variables: <%= options[:css_variables] %>
-
-  # Prefix for Tailwind utility classes (e.g., "tw-")
-  prefix: ""
-
-# Dark mode configuration
-dark_mode: "<%= options[:dark_mode] %>"
-
-# Component aliases for path mapping
-aliases:
-  components: "app/components"
-  ui: "app/components/shadcn"
-  lib: "lib"
-  hooks: "app/javascript/hooks"
-
-# Custom themes (optional)
-# themes:
-#   corporate:
-#     primary: "210 100% 50%"
-#     primary_foreground: "0 0% 100%"
+# CSS variables (enabled by default)
+css_variables: <%= options[:css_variables] %>

data/lib/shadcn/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Shadcn
   module Rails
-    VERSION = "0.1.0"
+    VERSION = "0.2.1"
   end
 end