Use the default visual code example for the dialog

Author: lsouoliveira

app/controllers/docs/sidebar_controller.rb

@@ -14,10 +14,4 @@ def inset_example
 
     render Views::Docs::Sidebar::InsetExample.new(sidebar_state:)
   end
-
-  def dialog_example
-    sidebar_state = cookies.fetch(:sidebar_state, "true") == "true"
-
-    render Views::Docs::Sidebar::DialogExample.new(sidebar_state:)
-  end
 end

app/views/docs/sidebar.rb

@@ -17,36 +17,107 @@ def view_template
         Views::Docs::Sidebar::InsetExample::CODE
       end
 
-      render div do
-        div do
-          Components.Heading(level: 4) { "Dialog variant" }
-
-          Tabs(default_value: "preview") do
-            TabsList do
-              TabsTrigger(value: "preview") do
-                span { "Preview" }
-              end
-              TabsTrigger(value: "code") do
-                span { "Code" }
-              end
-            end
-
-            TabsContent(value: "preview") do
-              Link(href: "/docs/sidebar/dialog", target: :_blank, variant: :primary) { "Open in another tab" }
+      render Docs::VisualCodeExample.new(title: "Dialog variant", context: self) do
+        <<~RUBY
+          Dialog(data: {action: "ruby-ui--dialog:connect->ruby-ui--dialog#open"}) do
+            DialogTrigger do
+              Button { "Open Dialog" }
             end
-
-            TabsContent(value: "code") do
-              div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
-                Codeblock(Views::Docs::Sidebar::DialogExample::CODE, syntax: :ruby, class: "-m-px")
+            DialogContent(class: "grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]") do
+              SidebarWrapper(class: "items-start") do
+                Sidebar(collapsible: :none, class: "hidden md:flex") do
+                  SidebarContent do
+                    SidebarGroup do
+                      SidebarGroupContent do
+                        SidebarMenu do
+                          SidebarMenuItem do
+                            SidebarMenuButton(as: :a, href: "#") do
+                              search_icon()
+                              span { "Search" }
+                            end
+                          end
+                          SidebarMenuItem do
+                            SidebarMenuButton(as: :a, href: "#", active: true) do
+                              home_icon()
+                              span { "Home" }
+                            end
+                          end
+                          SidebarMenuItem do
+                            SidebarMenuButton(as: :a, href: "#") do
+                              inbox_icon()
+                              span { "Inbox" }
+                            end
+                          end
+                        end
+                      end
+                    end
+                  end
+                end
+                main(class: "flex h-[480px] flex-1 flex-col overflow-hidden") do
+                end
               end
             end
           end
-        end
+        RUBY
       end
 
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))
     end
   end
+
+  def search_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-search"
+    ) do |s|
+      s.circle(cx: "11", cy: "11", r: "8")
+      s.path(d: "M21 21L16.7 16.7")
+    end
+  end
+
+  def home_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-house"
+    ) do |s|
+      s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8")
+      s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z")
+    end
+  end
+
+  def inbox_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-inbox"
+    ) do |s|
+      s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12")
+      s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z")
+    end
+  end
 end

app/views/docs/sidebar/dialog_example.rb

@@ -69,7 +69,7 @@ def initialize(sidebar_state:)
                       ellipsis_icon()
                       span(class: "sr-only") { "More" }
                     end
-                    DropdownMenuContent(class: "z-40") do
+                    DropdownMenuContent do
                       DropdownMenuItem(href: '#') { "Profile" }
                       DropdownMenuItem(href: '#') { "Billing" }
                       DropdownMenuItem(href: '#') { "Team" }
@@ -99,7 +99,7 @@ def initialize(sidebar_state:)
                       ellipsis_icon()
                       span(class: "sr-only") { "More" }
                     end
-                    DropdownMenuContent(class: "z-40") do
+                    DropdownMenuContent do
                       DropdownMenuItem(href: '#') { "Profile" }
                       DropdownMenuItem(href: '#') { "Billing" }
                       DropdownMenuItem(href: '#') { "Team" }

app/views/docs/sidebar/example.rb

@@ -69,7 +69,7 @@ def initialize(sidebar_state:)
                       ellipsis_icon()
                       span(class: "sr-only") { "More" }
                     end
-                    DropdownMenuContent(class: "z-40") do
+                    DropdownMenuContent do
                       DropdownMenuItem(href: '#') { "Profile" }
                       DropdownMenuItem(href: '#') { "Billing" }
                       DropdownMenuItem(href: '#') { "Team" }
@@ -99,7 +99,7 @@ def initialize(sidebar_state:)
                       ellipsis_icon()
                       span(class: "sr-only") { "More" }
                     end
-                    DropdownMenuContent(class: "z-40") do
+                    DropdownMenuContent do
                       DropdownMenuItem(href: '#') { "Profile" }
                       DropdownMenuItem(href: '#') { "Billing" }
                       DropdownMenuItem(href: '#') { "Team" }

app/views/docs/sidebar/inset_example.rb

@@ -53,7 +53,6 @@
     get "sidebar", to: "docs#sidebar", as: :docs_sidebar
     get "sidebar/example", to: "docs/sidebar#example", as: :docs_sidebar_example
     get "sidebar/inset", to: "docs/sidebar#inset_example", as: :docs_sidebar_inset
-    get "sidebar/dialog", to: "docs/sidebar#dialog_example", as: :docs_sidebar_dialog
     get "skeleton", to: "docs#skeleton", as: :docs_skeleton
     get "switch", to: "docs#switch", as: :docs_switch
     get "table", to: "docs#table", as: :docs_table