Component namespacing (#2463)

* [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:23 EDT

* [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:30 EDT

* Update stimulus controller references to use namespace

* Fix remaining tests

Author: zachgoll

app/components/alert_component.html.erb renamed to app/components/DS/alert.html.erb

@@ -1,4 +1,4 @@
-class AlertComponent < ViewComponent::Base
+class DS::Alert < DesignSystemComponent
   def initialize(message:, variant: :info)
     @message = message
     @variant = variant

app/components/alert_component.rb renamed to app/components/DS/alert.rb

@@ -2,7 +2,7 @@
 
 # An extension to `button_to` helper.  All options are passed through to the `button_to` helper with some additional
 # options available.
-class ButtonComponent < ButtonishComponent
+class DS::Button < DS::Buttonish
   attr_reader :confirm
 
   def initialize(confirm: nil, **opts)

app/components/button_component.html.erb renamed to app/components/DS/button.html.erb

@@ -1,4 +1,4 @@
-class ButtonishComponent < ViewComponent::Base
+class DS::Buttonish < DesignSystemComponent
   VARIANTS = {
     primary: {
       container_classes: "text-inverse bg-inverse hover:bg-inverse-hover disabled:bg-gray-500 theme-dark:disabled:bg-gray-400",
@@ -71,7 +71,7 @@ def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, ic
   end
 
   def call
-    raise NotImplementedError, "ButtonishComponent is an abstract class and cannot be instantiated directly."
+    raise NotImplementedError, "Buttonish is an abstract class and cannot be instantiated directly."
   end
 
   def container_classes(override_classes = nil)

app/components/button_component.rb renamed to app/components/DS/button.rb

@@ -1,7 +1,7 @@
 <%= wrapper_element do %>
   <%= tag.dialog class: "w-full h-full bg-transparent theme-dark:backdrop:bg-alpha-black-900 backdrop:bg-overlay #{drawer? ? "lg:p-3" : "lg:p-1"}", **merged_opts do %>
     <%= tag.div class: dialog_outer_classes do %>
-      <%= tag.div class: dialog_inner_classes, data: { dialog_target: "content" } do %>
+      <%= tag.div class: dialog_inner_classes, data: { DS__dialog_target: "content" } do %>
         <div class="grow overflow-y-auto py-4 space-y-4 flex flex-col">
           <% if header? %>
             <%= header %>

app/components/buttonish_component.rb renamed to app/components/DS/buttonish.rb

@@ -1,9 +1,9 @@
-class DialogComponent < ViewComponent::Base
+class DS::Dialog < DesignSystemComponent
   renders_one :header, ->(title: nil, subtitle: nil, hide_close_icon: false, **opts, &block) do
     content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
       title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
         title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
-        close_icon = render ButtonComponent.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "dialog#close" }) unless hide_close_icon
+        close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "DS--dialog#close" }) unless hide_close_icon
         safe_join([ title, close_icon ].compact)
       end
 
@@ -19,16 +19,16 @@ class DialogComponent < ViewComponent::Base
 
   renders_many :actions, ->(cancel_action: false, **button_opts) do
     merged_opts = if cancel_action
-      button_opts.merge(type: "button", data: { action: "modal#close" })
+      button_opts.merge(type: "button", data: { action: "DS--dialog#close" })
     else
       button_opts
     end
 
-    render ButtonComponent.new(**merged_opts)
+    render DS::Button.new(**merged_opts)
   end
 
   renders_many :sections, ->(title:, **disclosure_opts, &block) do
-    render DisclosureComponent.new(title: title, align: :right, **disclosure_opts) do
+    render DS::Disclosure.new(title: title, align: :right, **disclosure_opts) do
       block.call
     end
   end
@@ -99,11 +99,11 @@ def merged_opts
     merged_opts = opts.dup
     data = merged_opts.delete(:data) || {}
 
-    data[:controller] = [ "dialog", "hotkey", data[:controller] ].compact.join(" ")
-    data[:dialog_auto_open_value] = auto_open
-    data[:dialog_reload_on_close_value] = reload_on_close
-    data[:action] = [ "mousedown->dialog#clickOutside", data[:action] ].compact.join(" ")
-    data[:hotkey] = "esc:dialog#close"
+    data[:controller] = [ "DS--dialog", "hotkey", data[:controller] ].compact.join(" ")
+    data[:DS__dialog_auto_open_value] = auto_open
+    data[:DS__dialog_reload_on_close_value] = reload_on_close
+    data[:action] = [ "mousedown->DS--dialog#clickOutside", data[:action] ].compact.join(" ")
+    data[:hotkey] = "esc:DS--dialog#close"
     merged_opts[:data] = data
 
     merged_opts

app/components/dialog_component.html.erb renamed to app/components/DS/dialog.html.erb

@@ -1,4 +1,4 @@
-class DisclosureComponent < ViewComponent::Base
+class DS::Disclosure < DesignSystemComponent
   renders_one :summary_content
 
   attr_reader :title, :align, :open, :opts