ruby_ui 1.0.1 → 1.1.0

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.rb

@@ -2,6 +2,13 @@
 
 module RubyUI
   class Link < Base
+    BASE_CLASSES = [
+      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    ].freeze
+
     def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
       @href = href
       @variant = variant.to_sym
@@ -36,43 +43,55 @@ module RubyUI
 
     def primary_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-primary text-primary-foreground shadow",
+        "hover:bg-primary/90"
       ]
     end
 
     def link_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "text-primary underline-offset-4",
+        "hover:underline"
       ]
     end
 
     def secondary_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-opacity-80"
       ]
     end
 
     def destructive_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-destructive text-white shadow-sm",
+        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
       ]
     end
 
     def outline_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
     def ghost_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
@@ -88,10 +107,7 @@ module RubyUI
     end
 
     def default_attrs
-      {
-        type: "button",
-        class: default_classes
-      }
+      {type: "button", class: default_classes}
     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