ruby_ui 1.0.2 → 1.1.0

data/lib/ruby_ui/hover_card/hover_card_docs.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+class Views::Docs::HoverCard < Views::Base
+  def view_template
+    component = "HoverCard"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Hover Card", description: "For sighted users to preview content available behind a link.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          HoverCard do
+            HoverCardTrigger do
+              Button(variant: :link) { "@joeldrapper" } # Make this a link in order to navigate somewhere
+            end
+            HoverCardContent do
+              div(class: "flex justify-between space-x-4") do
+                Avatar do
+                  AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+                  AvatarFallback { "JD" }
+                end
+                div(class: "space-y-1") do
+                  h4(class: "text-sm font-medium") { "@joeldrapper" }
+                  p(class: "text-sm") do
+                    "Creator of Phlex Components. Ruby on Rails developer."
+                  end
+                  div(class: "flex items-center pt-2") do
+                    svg(
+                      width: "15",
+                      height: "15",
+                      viewbox: "0 0 15 15",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      class: "mr-2 h-4 w-4 opacity-70"
+                    ) do |s|
+                      s.path(
+                        d:
+                          "M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
+                        fill: "currentColor",
+                        fill_rule: "evenodd",
+                        clip_rule: "evenodd"
+                      )
+                    end
+                    span(class: "text-xs text-muted-foreground") { "Joined December 2021" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  # def components
+  #   [
+  #     Docs::ComponentStruct.new(name: "PopoverController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/popover_controller.js", built_using: :stimulus),
+  #     Docs::ComponentStruct.new(name: "HoverCard", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card.rb", built_using: :phlex),
+  #     Docs::ComponentStruct.new(name: "HoverCardTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/trigger.rb", built_using: :phlex),
+  #     Docs::ComponentStruct.new(name: "HoverCardContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/content.rb", built_using: :phlex)
+  #   ]
+  # end
+end

data/lib/ruby_ui/input/input.rb

@@ -20,12 +20,13 @@ module RubyUI
           action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: [
-          "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border",
+          "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0",
           "placeholder:text-muted-foreground",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm",
+          (@type.to_s == "file") ? "pt-[7px]" : ""
         ]
       }
     end

data/lib/ruby_ui/input/input_docs.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class Views::Docs::Input < Views::Base
+  def view_template
+    component = "Input"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Input", description: "Displays a form input field or a component that looks like an input field.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Email", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "File", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            label(for: "picture") { "Picture" }
+            Input(type: "file", id: "picture")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(disabled: true, type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(aria: {disabled: "true"}, type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With label", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            label(for: "email1") { "Email" }
+            Input(type: "email", placeholder: "Email", id: "email1")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With button", context: self) do
+        <<~RUBY
+          div(class: 'flex w-full max-w-sm items-center space-x-2') do
+            Input(type: "email", placeholder: "Email")
+            Button { "Subscribe" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/link/link_docs.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+class Views::Docs::Link < Views::Base
+  def view_template
+    component = "Link"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Link", description: "Displays a link that looks like a button or underline link.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#") { "Link" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          Link(aria: {disabled: "true"}, href: "#") { "Link" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Primary", description: "This is the primary variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :primary) { "Primary" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Secondary", description: "This is the secondary variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :secondary) { "Secondary" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Destructive", description: "This is the destructive variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :destructive) { "Destructive" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Icon", description: "This is the icon variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :outline, icon: true) do
+            chevron_icon
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With Icon", description: "This is the primary variant of a Link with an icon", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :primary) do
+            email_icon
+            span { "Login with Email" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Ghost", description: "This is the ghost variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :ghost) { "Ghost" }
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def chevron_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 20 20",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def email_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: "w-4 h-4 mr-2"
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d:
+          "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+      )
+    end
+  end
+end

data/lib/ruby_ui/masked_input/masked_input_docs.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class Views::Docs::MaskedInput < Views::Base
+  def view_template
+    component = "MaskedInput"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "MaskedInput", description: "Displays a form input field with applied mask.")
+
+      Heading(level: 2) { "Usage" }
+
+      Text do
+        plain "For advanced usage, check out the "
+        InlineLink(href: "https://beholdr.github.io/maska/v3", target: "_blank") { "Maska website" }
+        plain "."
+      end
+
+      render Docs::VisualCodeExample.new(title: "Phone number", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            MaskedInput(data: {maska: "(##) #####-####"})
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Hex color code", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            MaskedInput(data: {maska: "!#HHHHHH", maska_tokens: "H:[0-9a-fA-F]"})
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "CPF / CNPJ", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            MaskedInput(data: {maska: "['###.###.###-##', '##.###.###/####-##']"})
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/pagination/pagination_docs.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+class Views::Docs::Pagination < Views::Base
+  def view_template
+    component = "Pagination"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Pagination", description: "Pagination with page navigation, next and previous links.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Pagination", context: self) do
+        <<~RUBY
+          Pagination do
+            PaginationContent do
+              PaginationItem(href: "#") do
+                chevrons_left_icon
+                plain "First"
+              end
+              PaginationItem(href: "#") do
+                chevron_left_icon
+                plain "Prev"
+              end
+
+              PaginationEllipsis
+
+              PaginationItem(href: "#") { "4" }
+              PaginationItem(href: "#", active: true) { "5" }
+              PaginationItem(href: "#") { "6" }
+
+              PaginationEllipsis
+
+              PaginationItem(href: "#") do
+                plain "Next"
+                chevron_right_icon
+              end
+              PaginationItem(href: "#") do
+                plain "Last"
+                chevrons_right_icon
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def chevrons_left_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      fill: "none",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(d: "M11 7l-5 5l5 5")
+      s.path(d: "M17 7l-5 5l5 5")
+    end
+  end
+
+  def chevron_left_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      fill: "none",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(d: "M15 6l-6 6l6 6")
+    end
+  end
+
+  def chevrons_right_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      fill: "none",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(d: "M7 7l5 5l-5 5")
+      s.path(d: "M13 7l5 5l-5 5")
+    end
+  end
+
+  def chevron_right_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      fill: "none",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4"
+    ) do |s|
+      s.path(stroke: "none", d: "M0 0h24v24H0z", fill: "none")
+      s.path(d: "M9 6l6 6l-6 6")
+    end
+  end
+end