Merge pull request #111 from jacksonpires/adjust-docs-to-clipboard-co…

…mponent

Adjust docs to Clipboard component

app/controllers/docs_controller.rb

@@ -78,6 +78,10 @@ def checkbox
     render Docs::CheckboxView.new
   end
 
+  def clipboard
+    render Docs::ClipboardView.new
+  end
+
   def codeblock
     render Docs::CodeblockView.new
   end

app/views/components/shared/menu.rb

@@ -72,6 +72,7 @@ def components
       {name: "Calendar", path: helpers.docs_calendar_path},
       # { name: "Chart", path: helpers.docs_chart_path, badge: "New" },
       {name: "Checkbox", path: helpers.docs_checkbox_path},
+      {name: "Clipboard", path: helpers.docs_clipboard_path},
       {name: "Codeblock", path: helpers.docs_codeblock_path},
       {name: "Collapsible", path: helpers.docs_collapsible_path},
       {name: "Combobox", path: helpers.docs_combobox_path},

app/views/docs/clipboard_view.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class Docs::ClipboardView < ApplicationView
+  def view_template
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Clipboard", description: "A control to allow you to copy content to the clipboard.")
+
+      TypographyH2 { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Clipboard(success: "Copied!", error: "Copy failed!", class: "relative", options: {placement: "top"}) do
+            ClipboardSource(class: "hidden") { span { "Born rich!!!" } }
+
+            ClipboardTrigger do
+              Link(href: "#", class: "gap-1") do
+                TypographyP(size: :small, class: "text-primary") { "Copy the secret of success!!!" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(components)
+    end
+  end
+
+  private
+
+  def components
+    [
+      Docs::ComponentStruct.new(name: "ClipboarController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/clipboard_controller.js", built_using: :stimulus),
+      Docs::ComponentStruct.new(name: "ClipboardPopover", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/clipboard_popover.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ClipboardSource", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/clipboard_source.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "ClipboardTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/clipboard_trigger.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "Clipboard", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/clipboard.rb", built_using: :phlex)
+    ]
+  end
+end

config/routes.rb

@@ -27,6 +27,7 @@
     get "calendar", to: "docs#calendar", as: :docs_calendar
     get "chart", to: "docs#chart", as: :docs_chart
     get "checkbox", to: "docs#checkbox", as: :docs_checkbox
+    get "clipboard", to: "docs#clipboard", as: :docs_clipboard
     get "codeblock", to: "docs#codeblock", as: :docs_codeblock
     get "collapsible", to: "docs#collapsible", as: :docs_collapsible
     get "combobox", to: "docs#combobox", as: :docs_combobox

test/components/previews/phlex_ui/clipboard_preview.rb → test/components/previews/rbui/clipboard_preview.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
-module PhlexUi
+module Rbui
   class ClipboardPreview < Lookbook::Preview
     # Default Clipboard
     # ---------------
     def default
       render(TestView.new) do
-        Clipboard(success: "Copiado!", error: "Falha ao copiar!", class: "relative") do
-          ClipboardSource(class: "hidden") { span { "Nascer herdeiro!!!" } }
+        Clipboard(success: "Copied!", error: "Copy failed!", class: "relative", options: {placement: "top"}) do
+          ClipboardSource(class: "hidden") { span { "Born rich!!!" } }
 
           ClipboardTrigger do
             Link(href: "#", class: "gap-1") do
-              TypographyP(size: :small, class: "text-primary") { "Copiar segredo do sucesso!!!" }
+              TypographyP(size: :small, class: "text-primary") { "Copy the secret of success!!!" }
             end
           end
         end