Merge pull request #83 from schodevio/feat/pagination-components

Add docs view for pagination component

Gemfile.lock

@@ -181,7 +181,7 @@ GEM
       phlex (~> 1.9)
       railties (>= 6.1, < 8)
       zeitwerk (~> 2.6)
-    phlex_ui (0.1.6)
+    phlex_ui (0.1.7)
       phlex (~> 1.7)
       rouge (~> 4.2.0)
       ruby-next (~> 1.0)
@@ -261,13 +261,13 @@ GEM
     rubocop-performance (1.20.2)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.30.0, < 2.0)
-    ruby-next (1.0.1)
+    ruby-next (1.0.2)
       paco (~> 0.2)
       require-hooks (~> 0.2)
-      ruby-next-core (= 1.0.1)
+      ruby-next-core (= 1.0.2)
       ruby-next-parser (>= 3.2.2.0)
       unparser (~> 0.6.0)
-    ruby-next-core (1.0.1)
+    ruby-next-core (1.0.2)
     ruby-next-parser (3.2.2.0)
       parser (>= 3.0.3.1)
     ruby-progressbar (1.13.0)

README.md

@@ -30,6 +30,7 @@ Here is the list of components that are being built. For reference, see here htt
 ✅ Link
 ⚪️ Menubar
 ⚪️ Navigation Menu
+✅ Pagination
 ✅ Popover
 ⚪️ Progress
 ⚪️ Radio Group

app/controllers/docs_controller.rb

@@ -122,6 +122,10 @@ def link
     render Docs::LinkView.new
   end
 
+  def pagination
+    render Docs::PaginationView.new
+  end
+
   def popover
     render Docs::PopoverView.new
   end

app/views/components/shared/menu.rb

@@ -108,6 +108,7 @@ def components
       {name: "Input", path: helpers.docs_input_path},
       {name: "Hover Card", path: helpers.docs_hover_card_path},
       {name: "Link", path: helpers.docs_link_path},
+      {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"},
       {name: "Popover", path: helpers.docs_popover_path},
       {name: "Select", path: helpers.docs_select_path, badge: "New"},
       {name: "Sheet", path: helpers.docs_sheet_path},
@@ -133,7 +134,6 @@ def components_coming_soon
       {name: "Menu Bar", path: "#"},
       {name: "Multi Select", path: "#"},
       {name: "Navigation Menu", path: "#"},
-      {name: "Pagination", path: "#"},
       {name: "Progress", path: "#"},
       {name: "Radio Group", path: "#"},
       {name: "Read more", path: "#"},

app/views/docs/pagination_view.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+class Docs::PaginationView < ApplicationView
+  def template
+    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.")
+
+      render PhlexUI::Typography::H2.new { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Pagination", context: self) do
+        <<~RUBY
+          render PhlexUI::Pagination.new do
+            render PhlexUI::Pagination::Content.new do
+              render PhlexUI::Pagination::Item.new(href: "#") do
+                chevrons_left_icon
+                plain "First"
+              end
+              render PhlexUI::Pagination::Item.new(href: "#") do
+                chevron_left_icon
+                plain "Prev"
+              end
+
+              render PhlexUI::Pagination::Ellipsis.new
+
+              render PhlexUI::Pagination::Item.new(href: "#") { "4" }
+              render PhlexUI::Pagination::Item.new(href: "#", active: true) { "5" }
+              render PhlexUI::Pagination::Item.new(href: "#") { "6" }
+
+              render PhlexUI::Pagination::Ellipsis.new
+
+              render PhlexUI::Pagination::Item.new(href: "#") do
+                plain "Next"
+                chevron_right_icon
+              end
+              render PhlexUI::Pagination::Item.new(href: "#") do
+                plain "Last"
+                chevrons_right_icon
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(components)
+    end
+  end
+
+  private
+
+  def components
+    [
+      Docs::ComponentStruct.new(name: "PhlexUI::Pagination", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PhlexUI::Pagination::Content", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/content.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PhlexUI::Pagination::Ellipsis", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/ellipsis.rb", built_using: :phlex),
+      Docs::ComponentStruct.new(name: "PhlexUI::Pagination::Item", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/pagination/item.rb", built_using: :phlex)
+    ]
+  end
+
+  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

config/routes.rb

@@ -36,6 +36,7 @@
     get "hover_card", to: "docs#hover_card", as: :docs_hover_card
     get "input", to: "docs#input", as: :docs_input
     get "link", to: "docs#link", as: :docs_link
+    get "pagination", to: "docs#pagination", as: :docs_pagination
     get "popover", to: "docs#popover", as: :docs_popover
     get "select", to: "docs#select", as: :docs_select
     get "sheet", to: "docs#sheet", as: :docs_sheet