From a786bc66755e67950659ea5b9f394bfe8b51a73a Mon Sep 17 00:00:00 2001
From: David Alejandro
 <15317732+davidalejandroaguilar@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:37:53 +0000
Subject: [PATCH] Add MenuItem private component

So that we can have a more flexible way to render menu items,
e.g. with an automatic h2 title for the menu item.
---
 lib/phlexy_ui/collapsible_sub_menu.rb |  12 +-
 lib/phlexy_ui/menu.rb                 |  33 +---
 lib/phlexy_ui/menu_item.rb            |  52 ++++++
 lib/phlexy_ui/sub_menu.rb             |  12 +-
 spec/lib/phlexy_ui/menu_spec.rb       | 232 ++++++++++++++++++++++----
 5 files changed, 269 insertions(+), 72 deletions(-)
 create mode 100644 lib/phlexy_ui/menu_item.rb

diff --git a/lib/phlexy_ui/collapsible_sub_menu.rb b/lib/phlexy_ui/collapsible_sub_menu.rb
index 2015f7f..cab7fe9 100644
--- a/lib/phlexy_ui/collapsible_sub_menu.rb
+++ b/lib/phlexy_ui/collapsible_sub_menu.rb
@@ -25,9 +25,7 @@ def view_template(&)
         if @items.any?
           ul do
             @items.each do |item|
-              li do
-                render item
-              end
+              render item
             end
           end
         end
@@ -42,12 +40,8 @@ def title(&block)
       end
     end
 
-    def item(&block)
-      @items << block
-    end
-
-    def submenu(*, **, &)
-      @items << self.class.new(*, **, &)
+    def item(*, **, &)
+      @items << MenuItem.new(*, **, &)
     end
 
     private
diff --git a/lib/phlexy_ui/menu.rb b/lib/phlexy_ui/menu.rb
index 8fb124c..83d5dc2 100644
--- a/lib/phlexy_ui/menu.rb
+++ b/lib/phlexy_ui/menu.rb
@@ -22,21 +22,19 @@ def title(*, as: :li, **options, &)
       end
     end
 
-    def item(*base_modifiers, **options, &)
-      generate_classes!(
-        modifiers_map: MENU_ITEM_MODIFIERS_MAP,
-        base_modifiers:,
-        options:
-      ).then do |classes|
-        li(class: classes, &)
-      end
+    def item(*, **, &)
+      render MenuItem.new(*, **, &)
     end
 
     def submenu(*base_modifiers, **, &)
       if base_modifiers.include?(:collapsible)
-        render CollapsibleSubMenu.new(*base_modifiers, **, &)
+        li do
+          render CollapsibleSubMenu.new(*base_modifiers, **, &)
+        end
       else
-        render SubMenu.new(*base_modifiers, **, &)
+        li do
+          render SubMenu.new(*base_modifiers, **, &)
+        end
       end
     end
 
@@ -112,20 +110,5 @@ def submenu(*base_modifiers, **, &)
       # "lg:bg-error lg:text-error-content"
       error: "bg-error text-error-content"
     }.freeze
-
-    MENU_ITEM_MODIFIERS_MAP = {
-      # "sm:disabled"
-      # "md:disabled"
-      # "lg:disabled"
-      disabled: "disabled",
-      # "sm:active"
-      # "md:active"
-      # "lg:active"
-      active: "active",
-      # "sm:focus"
-      # "md:focus"
-      # "lg:focus"
-      focus: "focus"
-    }.freeze
   end
 end
diff --git a/lib/phlexy_ui/menu_item.rb b/lib/phlexy_ui/menu_item.rb
new file mode 100644
index 0000000..ea862a2
--- /dev/null
+++ b/lib/phlexy_ui/menu_item.rb
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require "debug"
+
+module PhlexyUI
+  # @private
+  class MenuItem < Base
+    def view_template(&)
+      generate_classes!(
+        modifiers_map: MENU_ITEM_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        li(class: classes, &)
+      end
+    end
+
+    def title(*, **options, &block)
+      generate_classes!(
+        component_html_class: :"menu-title",
+        options:
+      ).then do |classes|
+        h2(class: classes, **options, &block)
+      end
+    end
+
+    def submenu(*base_modifiers, **, &)
+      if base_modifiers.include?(:collapsible)
+        render CollapsibleSubMenu.new(*base_modifiers, **, &)
+      else
+        render SubMenu.new(*base_modifiers, **, &)
+      end
+    end
+
+    private
+
+    MENU_ITEM_MODIFIERS_MAP = {
+      # "sm:disabled"
+      # "md:disabled"
+      # "lg:disabled"
+      disabled: "disabled",
+      # "sm:active"
+      # "md:active"
+      # "lg:active"
+      active: "active",
+      # "sm:focus"
+      # "md:focus"
+      # "lg:focus"
+      focus: "focus"
+    }.freeze
+  end
+end
diff --git a/lib/phlexy_ui/sub_menu.rb b/lib/phlexy_ui/sub_menu.rb
index 3065bc4..476a0ee 100644
--- a/lib/phlexy_ui/sub_menu.rb
+++ b/lib/phlexy_ui/sub_menu.rb
@@ -20,9 +20,7 @@ def view_template(&)
       if @items.any?
         ul do
           @items.each do |item|
-            li do
-              render item
-            end
+            render item
           end
         end
       end
@@ -32,12 +30,8 @@ def title(&block)
       @title = block
     end
 
-    def item(&block)
-      @items << block
-    end
-
-    def submenu(*, **, &)
-      @items << self.class.new(*, **, &)
+    def item(*, **, &)
+      @items << MenuItem.new(*, **, &)
     end
   end
 end
diff --git a/spec/lib/phlexy_ui/menu_spec.rb b/spec/lib/phlexy_ui/menu_spec.rb
index 9d1da8d..b1cbf6e 100644
--- a/spec/lib/phlexy_ui/menu_spec.rb
+++ b/spec/lib/phlexy_ui/menu_spec.rb
@@ -236,64 +236,70 @@ def view_template(&)
               end
             end
 
-            menu.item do
-              menu.submenu :collapsible, :open do |submenu_1|
-                submenu_1.title do
+            menu.item do |item|
+              item.submenu :collapsible, :open do |submenu|
+                submenu.title do
                   "Parent 1"
                 end
 
-                submenu_1.item do
+                submenu.item do |submenu_item|
                   a do
                     "Child 1"
                   end
                 end
 
-                submenu_1.submenu do |submenu_2|
-                  submenu_2.title do
-                    "Parent 2"
-                  end
+                submenu.item do |submenu_item|
+                  submenu_item.submenu :collapsible do |submenu_2|
+                    submenu_2.title do
+                      "Parent 2"
+                    end
 
-                  submenu_2.item do
-                    a do
-                      "Child 2"
+                    submenu_2.item do
+                      a do
+                        "Child 2"
+                      end
                     end
                   end
                 end
 
-                menu.submenu do |submenu_3|
-                  submenu_3.title do
-                    "Parent 3"
-                  end
+                submenu.item do |submenu_item|
+                  submenu_item.submenu do |submenu_2|
+                    submenu_2.title do
+                      "Parent 3"
+                    end
 
-                  submenu_3.item do
-                    a do
-                      "Child 3"
+                    submenu_2.item do
+                      a do
+                        "Child 3"
+                      end
                     end
                   end
                 end
               end
             end
 
-            menu.item do
-              menu.submenu do |submenu_2|
-                submenu_2.title do
+            menu.item do |item|
+              item.submenu do |submenu|
+                submenu.title do
                   "Parent 1"
                 end
 
-                submenu_2.item do
+                submenu.item do
                   a do
                     "Child 1"
                   end
                 end
 
-                submenu_2.submenu do |submenu_2|
-                  submenu_2.title do
-                    "Parent 2"
-                  end
+                submenu.item do |item|
+                  item.submenu do |submenu_2|
+                    submenu_2.title do
+                      "Parent 2"
+                    end
 
-                  submenu_2.item do
-                    a do
-                      "Child 2"
+                    submenu_2.item do
+                      a do
+                        "Child 2"
+                      end
                     end
                   end
                 end
@@ -326,6 +332,12 @@ def view_template(&)
                     </ul>
                   </details>
                 </li>
+                <li>
+                  <div>Parent 3</div>
+                  <ul>
+                    <li><a>Child 3</a></li>
+                  </ul>
+                </li>
               </ul>
             </details>
           </li>
@@ -342,6 +354,168 @@ def view_template(&)
             </ul>
           </li>
         </ul>
+        
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+
+  describe "rendering a components sidebar" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Menu do |menu|
+            menu.item do |item|
+              item.submenu :collapsible, :open do |submenu|
+                submenu.title { "Docs" }
+
+                submenu.item do
+                  a href: "/docs/installation" do
+                    "Installation"
+                  end
+                end
+              end
+            end
+
+            menu.item do |item|
+              item.submenu :collapsible, :open do |submenu|
+                submenu.title { "Components" }
+
+                [
+                  {
+                    name: "Actions",
+                    components: [
+                      "Button",
+                      "Dropdown"
+                    ]
+                  },
+                  {
+                    name: "Data display",
+                    components: [
+                      "Badge",
+                      "Card"
+                    ]
+                  }
+                ].each do |category|
+                  submenu.item do |item|
+                    item.title class: "px-1.5" do
+                      category[:name]
+                    end
+
+                    item.submenu do |submenu|
+                      category[:components].each do |component|
+                        submenu.item do
+                          a href: "/components/#{component.downcase}" do
+                            component
+                          end
+                        end
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <ul class="menu">
+          <li>
+            <details open>
+              <summary>Docs</summary>
+              <ul>
+                <li><a href="/docs/installation">Installation</a></li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <details open>
+              <summary>Components</summary>
+              <ul>
+                <li>
+                  <h2 class="menu-title px-1.5">Actions</h2>
+                  <ul>
+                    <li><a href="/components/button">Button</a></li>
+                    <li><a href="/components/dropdown">Dropdown</a></li>
+                  </ul>
+                </li>
+                <li>
+                  <h2 class="menu-title px-1.5">Data display</h2>
+                  <ul>
+                    <li><a href="/components/badge">Badge</a></li>
+                    <li><a href="/components/card">Card</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </details>
+          </li>
+        </ul>
+        
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+
+  describe "rendering with title as parent" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Menu.new :base_200, class: "rounded-box w-56" do |menu|
+            menu.item do |item|
+              item.title do
+                "Title"
+              end
+
+              item.submenu do |submenu|
+                submenu.item do
+                  a do
+                    "Item 1"
+                  end
+                end
+
+                submenu.item do
+                  a do
+                    "Item 2"
+                  end
+                end
+
+                submenu.item do
+                  a do
+                    "Item 3"
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <ul class="menu bg-base-200 text-base-content rounded-box w-56">
+          <li>
+            <h2 class="menu-title">Title</h2>
+            <ul>
+              <li><a>Item 1</a></li>
+              <li><a>Item 2</a></li>
+              <li><a>Item 3</a></li>
+            </ul>
+          </li>
+        </ul>
       HTML
 
       is_expected.to eq(expected_html)