Revamp all pages

Gemfile

@@ -88,4 +88,4 @@ gem "rollbar"
 gem "phlex-rails"
 # gem "phlex_ui"
 # gem "phlex_ui", path: "../phlex_ui"
-gem "phlex_ui", git: "https://github.com/cirdes/phlex_ui.git", branch: "cirdes:fix-clipboard"
+gem "phlex_ui", git: "https://github.com/cirdes/phlex_ui.git", branch: "fix-clipboard"

Gemfile.lock

@@ -1,6 +1,7 @@
 GIT
-  remote: https://github.com/PhlexUI/phlex_ui.git
-  revision: ab73874f4a437a92c8c721fff8f37cfad6196cd1
+  remote: https://github.com/cirdes/phlex_ui.git
+  revision: b20cee8f8bb143c019a58d6b0a9abbddf65c61b4
+  branch: fix-clipboard
   specs:
     phlex_ui (0.1.10)
       activesupport (>= 6.0)

app/views/components/docs/components_table.rb

@@ -8,29 +8,40 @@ def initialize(components)
   def view_template
     TypographyH2 { "Components" }
     div(class: "border rounded-lg overflow-hidden") do
-      Table::Builder.new(@components) do |t|
-        t.column("Component") do |component|
-          div(class: "flex items-center space-x-2") do
-            render PhlexUI::Typography::InlineCode.new { component.name }
-            if component.builder
-              render PhlexUI::Badge.new(size: :sm, variant: :sky) { "Builder" }
+      Table do
+        TableHeader do
+          TableRow do
+            div(class: "flex items-center space-x-2") do
+              TableHead { "Component" }
             end
+            TableHead(class: "w-full grow-1") { "Built using" }
+            TableHead(class: "text-right") { "Source" }
           end
         end
-        t.column("Built using", header_attrs: {class: "w-full grow-1"}) do |component|
-          component.built_using
-          case component.built_using&.to_sym
-          when :phlex
-            render PhlexUI::Badge.new(size: :sm, variant: :rose) { "Phlex" }
-          when :stimulus
-            render PhlexUI::Badge.new(size: :sm, variant: :amber) { "Stimulus JS" }
-          end
-        end
-        t.column("Source", header_attrs: {class: "text-right"}) do |component|
-          div(class: "flex justify-end") do
-            render PhlexUI::Link.new(href: component.source, variant: :outline, size: :sm) do
-              github_icon
-              span(class: "ml-2") { "See source" }
+
+        TableBody do
+          @components.each do |component|
+            TableRow do
+              TableCell do
+                TypographyInlineCode { component.name }
+              end
+              TableCell do
+                component.built_using
+                case component.built_using&.to_sym
+                when :phlex
+                  Badge(size: :sm, variant: :rose) { "Phlex" }
+                when :stimulus
+                  Badge(size: :sm, variant: :amber) { "Stimulus JS" }
+                end
+              end
+              TableCell do
+                div(class: "flex justify-end") do
+                  Link(href: component.source, variant: :outline, size: :sm) do
+                    github_icon
+                    span(class: "ml-2") { "See source" }
+                  end
+                end
+              end
             end
           end
         end

app/views/components/docs/installation_instructions_coming_soon.rb

@@ -18,7 +18,7 @@ def render_header
       end
       div(class: "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
         div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do
-          render PhlexUI::Typography::P.new(class: "text-muted-foreground text-center flex flex-col sm:flex-row items-center gap-y-2 gap-x-2") do
+          TypographyP(class: "text-muted-foreground text-center flex flex-col sm:flex-row items-center gap-y-2 gap-x-2") do
             svg(
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",

app/views/components/docs/premium_badge.rb

@@ -2,7 +2,7 @@
 
 class Docs::PremiumBadge < ApplicationComponent
   def view_template
-    render PhlexUI::Badge.new(variant: :violet) do
+    Badge(variant: :violet) do
       svg(
         xmlns: "http://www.w3.org/2000/svg",
         viewbox: "0 0 24 24",

app/views/docs/accordion_view.rb

@@ -5,29 +5,19 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Accordion", description: "A vertically stacked set of interactive headings that each reveal a section of content.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
-
-      render Docs::VisualCodeExample.new(title: "With Builder", context: self) do
-        <<~RUBY
-          render PhlexUI::Accordion::Builder.new do |accordion|
-            accordion.add_item("Item 1", "Content 1")
-            accordion.add_item("Item 2", "Content 2")
-            accordion.add_item("Item 3", "Content 3")
-          end
-        RUBY
-      end
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Custom Design", context: self) do
         <<~RUBY
-          render PhlexUI::Accordion.new(class: 'space-y-1') do
-            render PhlexUI::Accordion::Item.new(
+          Accordion(class: 'space-y-1') do
+            AccordionItem(
                     class!:
                       "data-[accordion-open-value=true]:bg-muted hover:bg-muted rounded-lg pb-3",
                     rotate_icon: 135
                   ) do
-              render PhlexUI::Accordion::Trigger.new(class!: "w-full rounded-lg") do
+              AccordionTrigger(class!: "w-full rounded-lg") do
                 div(class: "p-6 pb-3 pl-16 relative text-left") do
-                  render PhlexUI::Accordion::Icon.new(class: "absolute left-6 top-6") do
+                  AccordionIcon(class: "absolute left-6 top-6") do
                     svg(
                       xmlns: "http://www.w3.org/2000/svg",
                       fill: "none",
@@ -47,21 +37,21 @@ def view_template
                 end
               end
 
-              render PhlexUI::Accordion::Content.new do
+              AccordionContent do
                 p(class: "pl-16 pr-4 pb-4 text-muted-foreground") do
                   "PhlexUI is a UI component library for Ruby devs who want to build better, faster."
                 end
               end
             end
 
-            render PhlexUI::Accordion::Item.new(
+            AccordionItem(
                     class!:
                       "data-[accordion-open-value=true]:bg-muted hover:bg-muted rounded-lg pb-3",
                     rotate_icon: 135
                   ) do
-              render PhlexUI::Accordion::Trigger.new(class!: "w-full rounded-lg") do
+              AccordionTrigger(class!: "w-full rounded-lg") do
                 div(class: "p-6 pb-3 pl-16 relative text-left") do
-                  render PhlexUI::Accordion::Icon.new(class: "absolute left-6 top-6") do
+                  AccordionIcon(class: "absolute left-6 top-6") do
                     svg(
                       xmlns: "http://www.w3.org/2000/svg",
                       fill: "none",
@@ -81,7 +71,7 @@ def view_template
                 end
               end
 
-              render PhlexUI::Accordion::Content.new do
+              AccordionContent do
                 p(class: "pl-16 pr-4 pb-4 text-muted-foreground") do
                   "Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app."
                 end
@@ -100,12 +90,11 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "AccordionController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/accordion_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Builder", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/builder.rb", builder: true, built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Accordion::Icon", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/icon.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Accordion", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AccordionIcon", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/icon.rb", built_using: :phlex)
     ]
   end
 end

app/views/docs/alert_dialog_view.rb

@@ -5,21 +5,21 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Alert Dialog", description: "A modal dialog that interrupts the user with important content and expects a response.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::AlertDialog.new do
-            render PhlexUI::AlertDialog::Trigger.new do
-              render PhlexUI::Button.new { "Show dialog" }
+          AlertDialog do
+            AlertDialogTrigger do
+              Button { "Show dialog" }
             end
-            render PhlexUI::AlertDialog::Content.new do
-              render PhlexUI::AlertDialog::Header.new do
-                render PhlexUI::AlertDialog::Title.new { "Are you absolutely sure?" }
-                render PhlexUI::AlertDialog::Description.new { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." }
+            AlertDialogContent do
+              AlertDialogHeader do
+                AlertDialogTitle { "Are you absolutely sure?" }
+                AlertDialogDescription { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." }
               end
-              render PhlexUI::AlertDialog::Footer.new do
-                render PhlexUI::AlertDialog::Cancel.new { "Cancel" }
-                render PhlexUI::AlertDialog::Action.new { "Continue" } # Will probably be a link to a controller action (e.g. delete account)
+              AlertDialogFooter do
+                AlertDialogCancel { "Cancel" }
+                AlertDialogAction { "Continue" } # Will probably be a link to a controller action (e.g. delete account)
               end
             end
           end
@@ -35,15 +35,15 @@ def view_template
   def components
     [
       Docs::ComponentStruct.new(name: "AlertDialogController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/alert_dialog_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Trigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Header", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/description.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Footer", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/footer.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Cancel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/cancel.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::AlertDialog::Action", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/action.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "AlertDialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogHeader", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/header.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/description.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogFooter", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/footer.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogCancel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/cancel.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDialogAction", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/action.rb", built_using: :phlex)
     ]
   end
 end

app/views/docs/alert_view.rb

@@ -5,53 +5,53 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Alert", description: "Displays a callout for user attention.")
 
-      render PhlexUI::Typography::H2.new { "Usage" }
+      TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new do
+          Alert do
             rocket_icon
-            render PhlexUI::Alert::Title.new { "Pro tip" }
-            render PhlexUI::Alert::Description.new { "With PhlexUI you'll ship faster." }
+            AlertTitle { "Pro tip" }
+            AlertDescription { "With PhlexUI you'll ship faster." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Without Icon", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new do
-            render PhlexUI::Alert::Title.new { "Pro tip" }
-            render PhlexUI::Alert::Description.new { "Simply, don't include an icon and your alert will look like this." }
+          Alert do
+            AlertTitle { "Pro tip" }
+            AlertDescription { "Simply, don't include an icon and your alert will look like this." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Warning", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new(variant: :warning) do
+          Alert(variant: :warning) do
             info_icon
-            render PhlexUI::Alert::Title.new { "Ship often" }
-            render PhlexUI::Alert::Description.new { "Shipping is good, your users will thank you for it." }
+            AlertTitle { "Ship often" }
+            AlertDescription { "Shipping is good, your users will thank you for it." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Destructive", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new(variant: :destructive) do
+          Alert(variant: :destructive) do
             alert_icon
-            render PhlexUI::Alert::Title.new { "Oopsie daisy!" }
-            render PhlexUI::Alert::Description.new { "Your design system is non-existent." }
+            AlertTitle { "Oopsie daisy!" }
+            AlertDescription { "Your design system is non-existent." }
           end
         RUBY
       end
 
       render Docs::VisualCodeExample.new(title: "Success", context: self) do
         <<~RUBY
-          render PhlexUI::Alert.new(variant: :success) do
+          Alert(variant: :success) do
             check_icon
-            render PhlexUI::Alert::Title.new { "Installation successful" }
-            render PhlexUI::Alert::Description.new { "You're all set to start using PhlexUI in your application." }
+            AlertTitle { "Installation successful" }
+            AlertDescription { "You're all set to start using PhlexUI in your application." }
           end
         RUBY
       end
@@ -64,9 +64,9 @@ def view_template
 
   def components
     [
-      Docs::ComponentStruct.new(name: "PhlexUI::Alert", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Alert::Title", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "PhlexUI::Alert::Description", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/description.rb", built_using: :phlex)
+      Docs::ComponentStruct.new(name: "Alert", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/title.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "AlertDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/description.rb", built_using: :phlex)
     ]
   end