ruby_ui 1.0.2 → 1.2.0

data/lib/ruby_ui/native_select/native_select_docs.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+class Views::Docs::NativeSelect < Views::Base
+  def view_template
+    component = "NativeSelect"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Native Select", description: "A styled native HTML select element with consistent design system integration.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+              NativeSelectOption(value: "pineapple") { "Pineapple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Groups", description: "Use NativeSelectGroup to organize options into categories.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a department" }
+              NativeSelectGroup(label: "Engineering") do
+                NativeSelectOption(value: "frontend") { "Frontend" }
+                NativeSelectOption(value: "backend") { "Backend" }
+                NativeSelectOption(value: "devops") { "DevOps" }
+              end
+              NativeSelectGroup(label: "Sales") do
+                NativeSelectOption(value: "account_executive") { "Account Executive" }
+                NativeSelectOption(value: "sales_development") { "Sales Development" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", description: "Add the disabled attribute to the NativeSelect component to disable the select.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(disabled: true) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Invalid", description: "Use aria-invalid to show validation errors.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(aria: {invalid: "true"}) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Native Select vs Select" }
+
+      div(class: "space-y-2 text-sm text-muted-foreground") do
+        p { "NativeSelect: Choose for native browser behavior, superior performance, or mobile-optimized dropdowns." }
+        p { "Select: Choose for custom styling, animations, or complex interactions." }
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectGroup < Base
+    def view_template(&)
+      optgroup(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_icon.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "size-4",
+        aria_hidden: "true"
+      ) do |s|
+        s.path(d: "m6 9 6 6 6-6")
+      end
+    end
+
+    def default_attrs
+      {
+        class: "text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+      }
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_option.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectOption < Base
+    def view_template(&)
+      option(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    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