shadcn-rails 0.2.0 → 0.2.1

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

@@ -0,0 +1,13 @@
+<textarea class="<%= textarea_classes %>"<% if @name %>
+          name="<%= ERB::Util.html_escape_once(@name) %>"<% end %><% if @id %>
+          id="<%= ERB::Util.html_escape_once(@id) %>"<% end %><% if @placeholder %>
+          placeholder="<%= ERB::Util.html_escape_once(@placeholder) %>"<% end %><% if @rows %>
+          rows="<%= @rows %>"<% end %><% if @cols %>
+          cols="<%= @cols %>"<% end %><% if @disabled %>
+          disabled<% end %><% if @required %>
+          required<% end %><% if @readonly %>
+          readonly<% end %><% if @autofocus %>
+          autofocus<% end %><% if @minlength %>
+          minlength="<%= @minlength %>"<% end %><% if @maxlength %>
+          maxlength="<%= @maxlength %>"<% end %>
+          <%= tag_attributes %>><%= textarea_content %></textarea>

data/app/components/shadcn/textarea_component.rb

@@ -55,30 +55,14 @@ module Shadcn
       @maxlength = maxlength
     end
 
-    def call
-      content_tag(:textarea, @value || content, textarea_attributes)
-    end
-
     private
 
-    def textarea_attributes
-      attrs = {
-        name: @name,
-        id: @id,
-        placeholder: @placeholder,
-        rows: @rows,
-        cols: @cols,
-        disabled: @disabled || nil,
-        required: @required || nil,
-        readonly: @readonly || nil,
-        autofocus: @autofocus || nil,
-        minlength: @minlength,
-        maxlength: @maxlength,
-        class: merge_classes(BASE_CLASSES)
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def textarea_classes
+      merge_classes(BASE_CLASSES)
+    end
+
+    def textarea_content
+      @value || content
     end
   end
 end

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

@@ -0,0 +1,36 @@
+<li class="<%= toast_classes %>"
+    role="status"
+    aria-live="polite"
+    data-controller="shadcn--toast"
+    data-shadcn--toast-duration-value="<%= @duration %>"
+    data-shadcn--toast-open-value="<%= @open %>"
+    data-state="<%= data_state %>"
+    <%= tag_attributes %>>
+  <div class="grid gap-1">
+    <%= title %>
+    <%= description %>
+    <%= content %>
+  </div>
+  <%= action %>
+  <% if has_custom_close? %>
+    <%= close %>
+  <% else %>
+    <button type="button"
+            class="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600"
+            data-action="click->shadcn--toast#close"
+            aria-label="Close">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           width="16"
+           height="16"
+           viewBox="0 0 24 24"
+           fill="none"
+           class="h-4 w-4">
+        <path d="M18 6 6 18M6 6l12 12"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+      </svg>
+    </button>
+  <% end %>
+</li>

data/app/components/shadcn/toast_component.rb

@@ -49,66 +49,18 @@ module Shadcn
       @open = open
     end
 
-    def call
-      content_tag(:li, toast_content, toast_attributes)
-    end
-
     private
 
-    def toast_content
-      safe_join([
-        content_wrapper,
-        action,
-        close_button
-      ].compact)
-    end
-
-    def content_wrapper
-      content_tag(:div, safe_join([title, description, content].compact), class: "grid gap-1")
-    end
-
-    def close_button
-      close || default_close_button
-    end
-
-    def default_close_button
-      content_tag(:button, close_icon, {
-        type: "button",
-        class: "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-        "data-action": "click->shadcn--toast#close",
-        "aria-label": "Close"
-      })
-    end
-
-    def close_icon
-      content_tag(:svg,
-        content_tag(:path, nil, d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round"),
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        class: "h-4 w-4"
-      )
-    end
-
     def toast_classes
       cn(BASE_CLASSES, VARIANTS[@variant], class_name)
     end
 
-    def toast_attributes
-      attrs = {
-        class: toast_classes,
-        role: "status",
-        "aria-live": "polite",
-        "data-controller": "shadcn--toast",
-        "data-shadcn--toast-duration-value": @duration,
-        "data-shadcn--toast-open-value": @open.to_s,
-        "data-state": @open ? "open" : "closed"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def has_custom_close?
+      close?
+    end
+
+    def data_state
+      @open ? "open" : "closed"
     end
   end
 end

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

@@ -0,0 +1,12 @@
+<button type="button"
+        class="<%= toggle_classes %>"
+        <%= "disabled" if @disabled %>
+        aria-pressed="<%= @pressed %>"
+        <%= "aria-label=\"#{ERB::Util.html_escape_once(@aria_label)}\"".html_safe if @aria_label %>
+        data-state="<%= data_state %>"
+        data-controller="shadcn--toggle"
+        data-action="click->shadcn--toggle#toggle"
+        data-shadcn--toggle-pressed-value="<%= @pressed %>"
+        <%= tag_attributes %>>
+  <%= content %>
+</button>

data/app/components/shadcn/toggle_component.rb

@@ -49,29 +49,14 @@ module Shadcn
       @aria_label = aria_label
     end
 
-    def call
-      content_tag(:button, toggle_attributes) do
-        content
-      end
-    end
-
     private
 
-    def toggle_attributes
-      attrs = {
-        type: "button",
-        class: cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name),
-        disabled: @disabled || nil,
-        "aria-pressed": @pressed.to_s,
-        "aria-label": @aria_label,
-        "data-state": @pressed ? "on" : "off",
-        "data-controller": "shadcn--toggle",
-        "data-action": "click->shadcn--toggle#toggle",
-        "data-shadcn--toggle-pressed-value": @pressed.to_s
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def toggle_classes
+      cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name)
+    end
+
+    def data_state
+      @pressed ? "on" : "off"
     end
   end
 end

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

@@ -0,0 +1,14 @@
+<div role="group"
+     class="<%= group_classes %>"
+     data-controller="shadcn--toggle-group"
+     data-shadcn--toggle-group-type-value="<%= @type %>"
+     data-shadcn--toggle-group-value-value="<%= value_string %>"
+     <%= tag_attributes %>>
+  <% if has_name? %>
+    <input type="hidden"
+           name="<%= @name %>"
+           value="<%= value_string %>"
+           data-shadcn--toggle-group-target="input" />
+  <% end %>
+  <%= safe_join(items.map(&:to_s)) %>
+</div>

data/app/components/shadcn/toggle_group_component.rb

@@ -56,41 +56,18 @@ module Shadcn
       @name = name
     end
 
-    def call
-      content_tag(:div, group_content, group_attributes)
-    end
-
     private
 
-    def group_content
-      safe_join([
-        hidden_input,
-        items.map(&:to_s)
-      ].flatten.compact)
+    def group_classes
+      merge_classes(BASE_CLASSES)
     end
 
-    def hidden_input
-      return unless @name
-
-      tag(:input,
-        type: "hidden",
-        name: @name,
-        value: Array(@value).join(","),
-        "data-shadcn--toggle-group-target": "input"
-      )
+    def has_name?
+      @name.present?
     end
 
-    def group_attributes
-      attrs = {
-        role: "group",
-        class: merge_classes(BASE_CLASSES),
-        "data-controller": "shadcn--toggle-group",
-        "data-shadcn--toggle-group-type-value": @type.to_s,
-        "data-shadcn--toggle-group-value-value": Array(@value).join(",")
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def value_string
+      Array(@value).join(",")
     end
   end
 end

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

@@ -0,0 +1,20 @@
+<span class="<%= tooltip_classes %>"
+      data-controller="<%= tooltip_data_attrs[:controller] %>"
+      data-shadcn--tooltip-side-value="<%= tooltip_data_attrs[:"shadcn--tooltip-side-value"] %>"
+      data-shadcn--tooltip-align-value="<%= tooltip_data_attrs[:"shadcn--tooltip-align-value"] %>"
+      data-shadcn--tooltip-delay-value="<%= tooltip_data_attrs[:"shadcn--tooltip-delay-value"] %>"
+      data-shadcn--tooltip-skip-delay-value="<%= tooltip_data_attrs[:"shadcn--tooltip-skip-delay-value"] %>"
+      <%= tag_attributes %>>
+  <span data-shadcn--tooltip-target="trigger"
+        data-action="mouseenter->shadcn--tooltip#show mouseleave->shadcn--tooltip#hide focus->shadcn--tooltip#show blur->shadcn--tooltip#hide">
+    <%= content %>
+  </span>
+  <div class="<%= tooltip_content_classes %>"
+       role="tooltip"
+       data-shadcn--tooltip-target="content"
+       data-side="<%= @side %>"
+       data-state="closed"
+       hidden>
+    <%= ERB::Util.html_escape_once(@tooltip_content) %>
+  </div>
+</span>

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)