shadcn-rails 0.2.0 → 0.2.1

data/app/components/shadcn/avatar_component.rb

@@ -46,50 +46,22 @@ module Shadcn
       @size = size.to_sym
     end
 
-    def call
-      content_tag(:span, avatar_content, avatar_attributes)
-    end
-
     private
 
-    def avatar_content
-      if @src.present?
-        image_with_fallback
-      elsif fallback?
-        fallback
-      else
-        fallback_element
-      end
-    end
-
-    def image_with_fallback
-      # Use Stimulus controller to handle image loading errors
-      content_tag(:span, class: "contents", data: stimulus_data(controller: "shadcn--avatar")) do
-        safe_join([
-          tag(:img,
-            src: @src,
-            alt: @alt,
-            class: IMAGE_CLASSES,
-            data: { "shadcn--avatar-target": "image", action: "error->shadcn--avatar#handleError" }
-          ),
-          content_tag(:span, @fallback, class: "#{FALLBACK_CLASSES} hidden", data: { "shadcn--avatar-target": "fallback" })
-        ])
-      end
+    def avatar_classes
+      cn(BASE_CLASSES, SIZES[@size], class_name)
     end
 
-    def fallback_element
-      content_tag(:span, @fallback, class: FALLBACK_CLASSES)
+    def fallback_text
+      @fallback
     end
 
-    def avatar_classes
-      cn(BASE_CLASSES, SIZES[@size], class_name)
+    def has_image?
+      @src.present?
     end
 
-    def avatar_attributes
-      attrs = { class: avatar_classes }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def has_fallback_slot?
+      fallback?
     end
 
     def generate_fallback(alt)

data/app/components/shadcn/badge_component.html.erb

@@ -0,0 +1 @@
+<span class="<%= badge_classes %>" <%= tag_attributes %>><%= content %></span>

data/app/components/shadcn/badge_component.rb

@@ -29,21 +29,10 @@ module Shadcn
       @variant = variant.to_sym
     end
 
-    def call
-      content_tag(:span, content, badge_attributes)
-    end
-
     private
 
     def badge_classes
       cn(BASE_CLASSES, VARIANTS[@variant], class_name)
     end
-
-    def badge_attributes
-      attrs = { class: badge_classes }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

data/app/components/shadcn/base_component.rb

@@ -10,11 +10,15 @@ module Shadcn
     # Common attributes shared by all components
     attr_reader :class_name, :data, :html_options
 
-    # @param class_name [String, nil] Additional CSS classes
+    # @param class_name [String, nil] Additional CSS classes (preferred)
+    # @param class [String, nil] Alias for class_name (for Rails-like API)
     # @param data [Hash] Data attributes (will be prefixed with data-)
     # @param html_options [Hash] Additional HTML attributes
     def initialize(class_name: nil, data: {}, **html_options, &block)
-      @class_name = class_name
+      # Support both class: and class_name: for better Rails compatibility
+      # class_name takes precedence if both are provided
+      html_class = html_options.delete(:class)
+      @class_name = class_name || html_class
       @data = data
       @html_options = html_options
       @constructor_block = block
@@ -96,5 +100,14 @@ module Shadcn
 
       classes.split.map { |c| "#{config.tailwind_prefix}#{c}" }.join(" ")
     end
+
+    # Build HTML attributes string for use in templates
+    # Combines html_options and data attributes
+    # Uses html_escape_once to avoid double-escaping already-escaped content
+    # @return [String] HTML-safe attribute string
+    def tag_attributes
+      attrs = html_options.merge(build_data)
+      attrs.map { |k, v| "#{k}=\"#{ERB::Util.html_escape_once(v)}\"" if v }.compact.join(" ").html_safe
+    end
   end
 end

data/app/components/shadcn/breadcrumb_component.html.erb

@@ -0,0 +1,5 @@
+<nav aria-label="Breadcrumb" class="<%= breadcrumb_classes %>" <%= tag_attributes %>>
+  <ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5">
+    <%= breadcrumb_list_content %>
+  </ol>
+</nav>

data/app/components/shadcn/breadcrumb_component.rb

@@ -21,24 +21,14 @@ module Shadcn
       )
     end
 
-    def call
-      content_tag(:nav, breadcrumb_attributes) do
-        content_tag(:ol, class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5") do
-          safe_join(items_with_separators)
-        end
-      end
-    end
-
     private
 
-    def breadcrumb_attributes
-      attrs = {
-        "aria-label": "Breadcrumb",
-        class: merge_classes("")
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def breadcrumb_classes
+      merge_classes("")
+    end
+
+    def breadcrumb_list_content
+      safe_join(items_with_separators)
     end
 
     def items_with_separators

data/app/components/shadcn/button_component.html.erb

@@ -0,0 +1,18 @@
+<% if @href %>
+  <a href="<%= @href %>"
+     class="<%= button_classes %>"
+     role="button"
+     <%= "aria-disabled=true tabindex=-1" if @disabled %>
+     <%= tag_attributes %>>
+    <%= button_content %>
+  </a>
+<% else %>
+  <button type="<%= @type %>"
+          class="<%= button_classes %>"
+          <%= "disabled" if @disabled || @loading %>
+          <%= "aria-disabled=true" if @disabled || @loading %>
+          <%= "aria-busy=true" if @loading %>
+          <%= tag_attributes %>>
+    <%= button_content %>
+  </button>
+<% end %>

data/app/components/shadcn/button_component.rb

@@ -75,24 +75,8 @@ module Shadcn
       @loading = loading
     end
 
-    def call
-      if @href
-        link_tag
-      else
-        button_tag
-      end
-    end
-
     private
 
-    def button_tag
-      content_tag(:button, button_content, button_attributes)
-    end
-
-    def link_tag
-      content_tag(:a, button_content, link_attributes)
-    end
-
     def button_content
       if @loading
         safe_join([loading_spinner, content])
@@ -102,7 +86,7 @@ module Shadcn
     end
 
     def loading_spinner
-      content_tag(:span, "", class: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full", "aria-hidden": true)
+      tag.span("", class: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full", "aria-hidden": true)
     end
 
     def button_classes
@@ -113,29 +97,5 @@ module Shadcn
         class_name
       )
     end
-
-    def button_attributes
-      attrs = html_options.merge(
-        type: @type,
-        class: button_classes,
-        disabled: @disabled || @loading || nil,
-        "aria-disabled": (@disabled || @loading) ? "true" : nil,
-        "aria-busy": @loading ? "true" : nil
-      )
-      attrs.merge!(build_data)
-      attrs.compact
-    end
-
-    def link_attributes
-      attrs = html_options.merge(
-        href: @href,
-        class: button_classes,
-        role: "button",
-        "aria-disabled": @disabled ? "true" : nil,
-        tabindex: @disabled ? "-1" : nil
-      )
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

data/app/components/shadcn/card_component.html.erb

@@ -0,0 +1,8 @@
+<div class="<%= card_classes %>" <%= tag_attributes %>>
+  <%= header %>
+  <%= title %>
+  <%= description %>
+  <%= content_slot %>
+  <%= content %>
+  <%= footer %>
+</div>

data/app/components/shadcn/card_component.rb

@@ -50,14 +50,10 @@ module Shadcn
 
     BASE_CLASSES = "rounded-xl border bg-card text-card-foreground shadow"
 
-    def call
-      content_tag(:div, card_content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
-    end
-
     private
 
-    def card_content
-      safe_join([header, title, description, content_slot, content, footer].compact)
+    def card_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

data/app/components/shadcn/checkbox_component.html.erb

@@ -0,0 +1,32 @@
+<% if has_label? %>
+  <label class="flex items-center space-x-2 cursor-pointer">
+    <% if @name %>
+      <input type="hidden" name="<%= ERB::Util.html_escape_once(@name) %>" value="0" autocomplete="off">
+    <% end %>
+    <input type="checkbox"
+           class="<%= checkbox_classes %>"<% if @name %>
+           name="<%= ERB::Util.html_escape_once(@name) %>"<% end %><% if @id %>
+           id="<%= ERB::Util.html_escape_once(@id) %>"<% end %><% if @value %>
+           value="<%= ERB::Util.html_escape_once(@value) %>"<% end %><% if @checked %>
+           checked<% end %><% if @disabled %>
+           disabled<% end %><% if @required %>
+           required<% end %>
+           <%= tag_attributes %>>
+    <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <%= content %>
+    </span>
+  </label>
+<% else %>
+  <% if @name %>
+    <input type="hidden" name="<%= ERB::Util.html_escape_once(@name) %>" value="0" autocomplete="off">
+  <% end %>
+  <input type="checkbox"
+         class="<%= checkbox_classes %>"<% if @name %>
+         name="<%= ERB::Util.html_escape_once(@name) %>"<% end %><% if @id %>
+         id="<%= ERB::Util.html_escape_once(@id) %>"<% end %><% if @value %>
+         value="<%= ERB::Util.html_escape_once(@value) %>"<% end %><% if @checked %>
+         checked<% end %><% if @disabled %>
+         disabled<% end %><% if @required %>
+         required<% end %>
+         <%= tag_attributes %>>
+<% end %>

data/app/components/shadcn/checkbox_component.rb

@@ -51,53 +51,14 @@ module Shadcn
       @required = required
     end
 
-    def call
-      if content.present?
-        # Render with integrated label
-        content_tag(:label, class: "flex items-center space-x-2 cursor-pointer") do
-          safe_join([
-            hidden_input,
-            checkbox_input,
-            content_tag(:span, content, class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
-          ])
-        end
-      else
-        # Render just the checkbox (for use with external labels)
-        safe_join([hidden_input, checkbox_input].compact)
-      end
-    end
-
     private
 
-    def hidden_input
-      # Include hidden input with "0" value for unchecked state (Rails convention)
-      return unless @name
-
-      tag(:input,
-        type: "hidden",
-        name: @name,
-        value: "0",
-        autocomplete: "off"
-      )
-    end
-
-    def checkbox_input
-      tag(:input, input_attributes)
+    def checkbox_classes
+      cn(BASE_CLASSES, class_name)
     end
 
-    def input_attributes
-      attrs = {
-        type: "checkbox",
-        name: @name,
-        id: @id,
-        value: @value,
-        class: cn(BASE_CLASSES, class_name),
-        disabled: @disabled || nil,
-        checked: @checked || nil,
-        required: @required || nil
-      }
-      attrs.merge!(html_options.except(:class))
-      attrs.compact
+    def has_label?
+      content.present?
     end
   end
 end

data/app/components/shadcn/collapsible_component.html.erb

@@ -0,0 +1,8 @@
+<div class="<%= collapsible_classes %>"
+     data-controller="shadcn--collapsible"
+     data-shadcn--collapsible-open-value="<%= @open %>"
+     data-shadcn--collapsible-disabled-value="<%= @disabled %>"
+     data-state="<%= state %>"
+     <%= tag_attributes %>>
+  <%= collapsible_content %>
+</div>

data/app/components/shadcn/collapsible_component.rb

@@ -31,12 +31,12 @@ module Shadcn
       @disabled = disabled
     end
 
-    def call
-      content_tag(:div, collapsible_content, collapsible_attributes)
-    end
-
     private
 
+    def collapsible_classes
+      class_name
+    end
+
     def collapsible_content
       safe_join([trigger_wrapper, body].compact)
     end
@@ -50,17 +50,8 @@ module Shadcn
       })
     end
 
-    def collapsible_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--collapsible",
-        "data-shadcn--collapsible-open-value": @open.to_s,
-        "data-shadcn--collapsible-disabled-value": @disabled.to_s,
-        "data-state": @open ? "open" : "closed"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def state
+      @open ? "open" : "closed"
     end
   end
 end

data/app/components/shadcn/context_menu_component.html.erb

@@ -0,0 +1,11 @@
+<div class="<%= context_menu_classes %>"
+     data-controller="<%= context_menu_data_attrs[:controller] %>"
+     data-action="<%= context_menu_data_attrs[:action] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--context-menu-target="trigger" data-action="contextmenu->shadcn--context-menu#show:prevent">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= menu if menu? %>
+</div>

data/app/components/shadcn/context_menu_component.rb

@@ -28,37 +28,17 @@ module Shadcn
       ContextMenuContentComponent.new(**options)
     }
 
-    def call
-      content_tag(:div, context_menu_content, context_menu_attributes)
-    end
-
     private
 
-    def context_menu_content
-      safe_join([
-        trigger_wrapper,
-        menu
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--context-menu-target": "trigger",
-        "data-action": "contextmenu->shadcn--context-menu#show:prevent"
-      })
+    def context_menu_classes
+      cn("relative inline-block", class_name)
     end
 
-    def context_menu_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--context-menu",
-        "data-action": "keydown.escape->shadcn--context-menu#close"
+    def context_menu_data_attrs
+      {
+        controller: "shadcn--context-menu",
+        action: "keydown.escape->shadcn--context-menu#close"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/dialog_component.html.erb

@@ -0,0 +1,14 @@
+<div id="<%= @id %>"
+     class="<%= dialog_classes %>"
+     data-controller="<%= dialog_data_attrs[:controller] %>"
+     data-shadcn--dialog-open-value="<%= dialog_data_attrs[:"shadcn--dialog-open-value"] %>"
+     data-shadcn--dialog-modal-value="<%= dialog_data_attrs[:"shadcn--dialog-modal-value"] %>"
+     data-dialog-id="<%= dialog_data_attrs[:"dialog-id"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>

data/app/components/shadcn/dialog_component.rb

@@ -38,40 +38,19 @@ module Shadcn
       @modal = modal
     end
 
-    def call
-      content_tag(:div, dialog_content, dialog_attributes)
-    end
-
     private
 
-    def dialog_content
-      safe_join([
-        trigger_wrapper,
-        body
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--dialog-target": "trigger",
-        "data-action": "click->shadcn--dialog#open"
-      })
+    def dialog_classes
+      class_name
     end
 
-    def dialog_attributes
-      attrs = {
-        id: @id,
-        class: class_name,
-        "data-controller": "shadcn--dialog",
-        "data-shadcn--dialog-open-value": @open.to_s,
-        "data-shadcn--dialog-modal-value": @modal.to_s,
-        "data-dialog-id": @id
+    def dialog_data_attrs
+      {
+        controller: "shadcn--dialog",
+        "shadcn--dialog-open-value": @open.to_s,
+        "shadcn--dialog-modal-value": @modal.to_s,
+        "dialog-id": @id
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/drawer_component.html.erb

@@ -0,0 +1,12 @@
+<div class="<%= drawer_classes %>"
+     data-controller="<%= drawer_data_attrs[:controller] %>"
+     data-shadcn--drawer-open-value="<%= drawer_data_attrs[:"shadcn--drawer-open-value"] %>"
+     data-shadcn--drawer-direction-value="<%= drawer_data_attrs[:"shadcn--drawer-direction-value"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--drawer-target="trigger" data-action="click->shadcn--drawer#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>

data/app/components/shadcn/drawer_component.rb

@@ -35,38 +35,18 @@ module Shadcn
       @direction = direction
     end
 
-    def call
-      content_tag(:div, drawer_content, drawer_attributes)
-    end
-
     private
 
-    def drawer_content
-      safe_join([
-        trigger_wrapper,
-        body
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--drawer-target": "trigger",
-        "data-action": "click->shadcn--drawer#open"
-      })
+    def drawer_classes
+      class_name
     end
 
-    def drawer_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--drawer",
-        "data-shadcn--drawer-open-value": @open.to_s,
-        "data-shadcn--drawer-direction-value": @direction.to_s
+    def drawer_data_attrs
+      {
+        controller: "shadcn--drawer",
+        "shadcn--drawer-open-value": @open.to_s,
+        "shadcn--drawer-direction-value": @direction.to_s
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/dropdown_menu_component.html.erb

@@ -0,0 +1,14 @@
+<div class="<%= dropdown_classes %>"
+     data-controller="<%= dropdown_data_attrs[:controller] %>"
+     data-shadcn--dropdown-open-value="<%= dropdown_data_attrs[:"shadcn--dropdown-open-value"] %>"
+     data-shadcn--dropdown-align-value="<%= dropdown_data_attrs[:"shadcn--dropdown-align-value"] %>"
+     data-shadcn--dropdown-side-value="<%= dropdown_data_attrs[:"shadcn--dropdown-side-value"] %>"
+     data-action="<%= dropdown_data_attrs[:action] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--dropdown-target="trigger" data-action="click->shadcn--dropdown#toggle">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= menu if menu? %>
+</div>

data/app/components/shadcn/dropdown_menu_component.rb

@@ -36,40 +36,20 @@ module Shadcn
       @side = side
     end
 
-    def call
-      content_tag(:div, dropdown_content, dropdown_attributes)
-    end
-
     private
 
-    def dropdown_content
-      safe_join([
-        trigger_wrapper,
-        menu
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--dropdown-target": "trigger",
-        "data-action": "click->shadcn--dropdown#toggle"
-      })
+    def dropdown_classes
+      cn("relative inline-block", class_name)
     end
 
-    def dropdown_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--dropdown",
-        "data-shadcn--dropdown-open-value": @open.to_s,
-        "data-shadcn--dropdown-align-value": @align.to_s,
-        "data-shadcn--dropdown-side-value": @side.to_s,
-        "data-action": "keydown.escape->shadcn--dropdown#close clickOutside->shadcn--dropdown#close"
+    def dropdown_data_attrs
+      {
+        controller: "shadcn--dropdown",
+        "shadcn--dropdown-open-value": @open.to_s,
+        "shadcn--dropdown-align-value": @align.to_s,
+        "shadcn--dropdown-side-value": @side.to_s,
+        action: "keydown.escape->shadcn--dropdown#close clickOutside->shadcn--dropdown#close"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end