feat: Refactor left_menu.

gsmlg-dev · Feb 16, 2023 · 575fa11 · 575fa11
1 parent d9a50f3
commit 575fa11
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 93 deletions.
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
@@ -37,13 +37,6 @@ defmodule Phoenix.WebComponent.Card do
     """
   )
 
-  attr(:fit, :boolean,
-    default: false,
-    doc: """
-    set width and height to fit-content
-    """
-  )
-
   slot(:title,
     required: false,
     doc: """
@@ -58,17 +51,21 @@ defmodule Phoenix.WebComponent.Card do
 
     ~H"""
     <div id={@id} class={[
-        if(@fit, do: "w-fit h-fit", else: "w-auto h-auto"),
         "m-4 p-6 flex flex-col",
         "bg-white shadow",
         @class
       ]}
     >
-      <%= unless is_nil(@title) do %>
-      <div class="w-full text-xl flex flex-row justify-start items-center h-10 mb-4">
-        <%= render_slot(@title) %>
+      <div
+        :for={{title, _i} <- Enum.with_index(@title)}
+        class={[
+          "w-full text-xl",
+          "flex flex-row justify-start items-center",
+          "h-10 mb-4"
+        ]}
+      >
+        <%= render_slot(title) %>
       </div>
-      <% end %>
       <%= render_slot(@inner_block) %>
     </div>
     """

diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex
@@ -6,13 +6,15 @@ defmodule Phoenix.WebComponent.LeftMenu do
 
   @doc """
   Generates left menu
-
   ## Example
-
-      <.wc_left_menu active="left_menu" menus={[{"Components", [{"actionbar", "Actionbar", "/storybook/components/actionbar"}, {"card", "Card", "/storybook/components/card"}, {"left_menu", "Left Menu", "/storybook/components/left_menu"}, {"markdown", "Markdown", "/storybook/components/markdown"}, {"pagination", "Pagination", "/storybook/components/pagination"}, {"table", "Table", "/storybook/components/table"}]}]}>
-        <:title>Menu Demo Components</:title>
+      <.wc_left_menu
+        class="w-[200px] bg-[rgba(255,255,255,.7)] text-[14px]"
+        active="actionbar"
+      >
+        <:title class="text-[#A1A7C4]">Phx WebComponents</:title>
+        <:menu>actionbar</:menu>
+        <:menu>appbar</:menu>
       </.wc_left_menu>
-
   """
   @doc type: :component
   attr(:id, :any,
@@ -36,62 +38,148 @@ defmodule Phoenix.WebComponent.LeftMenu do
     """
   )
 
-  attr(:menus, :list,
-    default: [],
+  slot(:title,
+    required: false,
     doc: """
-    menu list
-    ```elixir
-    [
-      {"Components",
-        [
-          {"actionbar", "Actionbar", "/storybook/components/actionbar"},
-          {"card", "Card", "/storybook/components/card"},
-          {"left_menu", "Left Menu", "/storybook/components/left_menu"},
-          {"markdown", "Markdown", "/storybook/components/markdown"},
-          {"pagination", "Pagination", "/storybook/components/pagination"},
-          {"table", "Table", "/storybook/components/table"}
-        ]
-      }
-    ]
-    ```
+    Render menu title.
     """
-  )
+  ) do
+    attr :class, :string
+  end
 
-  slot(:title,
+  slot(:menu,
     required: false,
     doc: """
-    Render menu title.
+    Render menu
     """
   )
 
   def wc_left_menu(assigns) do
+
+    ~H"""
+    <nav
+      id={@id}
+      class={[
+        "flex flex-col justify-start items-start",
+        "h-full pt-4",
+        @class,
+      ]}
+    >
+    <%= if length(@title) > 0 do %>
+      <div
+        :for={{title, _i} <- Enum.with_index(@title)}
+        class={[
+          "flex flex-row justify-start items-center",
+          "px-10 py-4 w-full",
+          Map.get(title, :class, ""),
+        ]}
+      >
+        <%= render_slot(title) %>
+      </div>
+    <% end %>
+      <div
+        :for={{m, _i} <- Enum.with_index(@menu)}
+        class="flex flex-col justify-start items-start w-full"
+      >
+        <%= render_slot(m) %>
+      </div>
+    </nav>
+    """
+  end
+
+
+  @doc """
+  Generates left menu Group
+  ## Example
+      <.wc_left_menu_group active={"mdi"}>
+        <:title>Icons</:title>
+        <:menu id="mdi" to={~p"/icons/mdi"}>MD Icon</:menu>
+        <:menu id="bsi" to={~p"/icons/bsi"}>BS Icon</:menu>
+      </.wc_left_menu_group>
+  """
+  @doc type: :component
+  attr(:id, :any,
+    default: false,
+    doc: """
+    html attribute id
+    """
+  )
+
+  attr(:class, :string,
+    default: "",
+    doc: """
+    html attribute class
+    """
+  )
+
+  attr(:active, :string,
+    default: "",
+    doc: """
+    actvie menu id
+    """
+  )
+
+  slot(:title,
+    required: true,
+    doc: """
+    Render menu title.
+    """
+  ) do
+    attr :class, :string
+  end
+
+  slot(:menu,
+    required: false,
+    doc: """
+    Render menu
+    """
+  ) do
+    attr :id, :string
+    attr :class, :string
+    attr :to, :string
+  end
+
+  def wc_left_menu_group(assigns) do
     assigns =
       assigns
       |> assign_new(:title, fn -> nil end)
 
     ~H"""
-    <nav id={@id} class={"flex flex-col justify-start items-start bg-white h-full pt-4 shadow-sm z-10 #{@class}"}>
-    <%= unless is_nil(@title) do %>
-      <div class="w-full text-xl flex flex-col justify-center items-center mb-4">
+    <div
+      id={@id}
+      class={[
+        "flex flex-col justify-start items-start",
+        "w-full",
+        @class,
+      ]}
+    >
+      <div
+        :for={{title, _i} <- Enum.with_index(@title)}
+        class={[
+          "px-10 py-4 w-full",
+          Map.get(title, :class, ""),
+        ]}
+      >
         <%= render_slot(@title) %>
       </div>
-    <% end %>
-    <%= for {group, subMenu} <- @menus do %>
-      <div class="flex flex-col justify-start items-start w-full">
-        <div class="text-slate-400 px-10 py-4 w-full"><%= group %></div>
-        <div class="text-slate-800 px-4 w-full">
-        <%= for {id, menu, url} <- subMenu do %>
-          <.link
-            navigate={url}
-            class={"px-6 py-4 rounded-lg w-full flex flex-row justify-start items-center hover:text-blue-600 cursor-pointer" <> if(@active == id, do: " bg-blue-600 text-white hover:text-slate-300", else: "")}
-          >
-            <span data-menu-id={id} class="indent-2.5"><%= menu %></span>
-          </.link>
-        <% end %>
-        </div>
+      <div class="text-slate-800 px-4 w-full">
+        <.link
+          :for={{m, _i} <- Enum.with_index(@menu)}
+          class={[
+            "flex flex-row justify-start items-center",
+            "px-6 py-4 rounded-lg w-full cursor-pointer",
+            if(Map.get(m, :id, "") == @active, do: " bg-blue-100 text-blue-500 hover:text-blue-600", else: "hover:text-blue-600 "),
+            Map.get(m, :class, "")
+          ]}
+          navigate={Map.get(m, :to, "")}
+        >
+          <span class="indent-2.5 flex flex-row justify-start items-center">
+            <%= render_slot(m) %>
+          </span>
+        </.link>
       </div>
-    <% end %>
-    </nav>
+    </div>
     """
   end
+
 end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
@@ -7,8 +7,8 @@ defmodule PhxWCStorybookWeb.Storybook do
     # Path to your storybook stories (required).
     content_path: Path.expand("storybook", __DIR__),
 
-    # Custom storybook title. Default is "Live Storybook".
-    title: "Phoenix WebComponent Live Storybook",
+    # Custom storybook title. Default is "Storybook".
+    title: "Phoenix WebComponent Storybook",
 
     # Story compilation mode, can be either `:eager` or `:lazy`.
     # It defaults to `:lazy` in dev environment, `:eager` in other environments.

diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
@@ -1,6 +1,7 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.LeftMenu do
   # :live_component or :page are also available
   use PhxLiveStorybook.Story, :component
+  import Phoenix.WebComponent.LeftMenu
 
   def function, do: &Phoenix.WebComponent.LeftMenu.wc_left_menu/1
   def description, do: "A left menu element."
@@ -11,19 +12,33 @@ defmodule PhxWCStorybookWeb.Storybook.Components.LeftMenu do
         id: :default,
         attributes: %{
           active: "left_menu",
-          menus: [
-            {"Components",
-             [
-               {"actionbar", "Actionbar", "/storybook/components/actionbar"},
-               {"card", "Card", "/storybook/components/card"},
-               {"left_menu", "Left Menu", "/storybook/components/left_menu"},
-               {"markdown", "Markdown", "/storybook/components/markdown"},
-               {"pagination", "Pagination", "/storybook/components/pagination"},
-               {"table", "Table", "/storybook/components/table"}
-             ]}
-          ]
         },
-        slots: ["<:title>Menu Demo Components</:title>"]
+        slots: [
+          "<:title>Menu Demo</:title>",
+          """
+          <:menu>
+            Phx Hook
+          </:menu>
+          """,
+          """
+          <:menu>
+            Icons
+          </:menu>
+          """,
+          """
+          <:menu>
+          <.wc_left_menu_group active={"left_menu"}>
+            <:title>Components</:title>
+            <:menu id="table" to="/storybook/components/actionbar">Actionbar</:menu>
+            <:menu id="card" to="/storybook/components/card">Card</:menu>
+            <:menu id="left_menu" to="/storybook/components/left_menu">Left Menu</:menu>
+            <:menu id="markdown" to="/storybook/components/markdown">Markdown</:menu>
+            <:menu id="pagination" to="/storybook/components/pagination">Pagination</:menu>
+            <:menu id="table" to="/storybook/components/table">Table</:menu>
+          </.wc_left_menu_group>
+          </:menu>
+          """,
+        ]
       }
     ]
   end

diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
@@ -2,31 +2,45 @@
 <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
 <main class="container h-[calc(100vh-56px)] flex flex-row justify-start items-start overflow-hidden">
   <.wc_left_menu
-    class="w-48 h-[calc(100vh-56px)]"
+    class="w-48 h-[calc(100vh-56px)] bg-slate-100"
     active={assigns[:active_menu]}
-    menus={[
-      {"Icons", [
-        {"mdi", "MDIcons", "/mdi"},
-        {"bsi", "BSIcons", "/bsi"}
-      ]},
-      {"Hooks", [
-        {"phx-wc-hook", "PhxWCHook", "/"}
-      ]},
-      {"Components",
-        [
-          {"actionbar", "Actionbar", "/storybook/components/actionbar"},
-          {"card", "Card", "/storybook/components/card"},
-          {"left_menu", "Left Menu", "/storybook/components/left_menu"},
-          {"markdown", "Markdown", "/storybook/components/markdown"},
-          {"pagination", "Pagination", "/storybook/components/pagination"},
-          {"table", "Table", "/storybook/components/table"}
-        ]}
-    ]}
   >
-  <:title>
-  <.wc_link href="/">Simple Appbar</.wc_link>
-  <.wc_link href="/?mode=wc">WC Appbar</.wc_link>
+  <:title class="text-slate-400 font-bold">
+    WebComponent
   </:title>
+  <:menu>
+    <.wc_left_menu_group active={assigns[:active_menu]}>
+      <:title>Hooks</:title>
+      <:menu id="phx-wc-hook" to={"/"}>
+        <.wc_mdi name={"webhook"} class="w-4 h-4" />
+        PhxWCHook
+      </:menu>
+    </.wc_left_menu_group>
+  </:menu>
+  <:menu>
+    <.wc_left_menu_group active={assigns[:active_menu]}>
+      <:title>Icons</:title>
+      <:menu id="mdi" to={"/mdi"}>
+        <.wc_mdi name={"material-design"} class="w-4 h-4" />
+        MD Icon
+      </:menu>
+      <:menu id="bsi" to={"/bsi"}>
+        <.wc_bsi name={"bootstrap"} class="w-4 h-4" />
+        BS Icon
+      </:menu>
+    </.wc_left_menu_group>
+  </:menu>
+  <:menu>
+    <.wc_left_menu_group active={assigns[:active_menu]}>
+      <:title>Components</:title>
+      <:menu id="table" to="/storybook/components/actionbar">Actionbar</:menu>
+      <:menu id="card" to="/storybook/components/card">Card</:menu>
+      <:menu id="left_menu" to="/storybook/components/left_menu">Left Menu</:menu>
+      <:menu id="markdown" to="/storybook/components/markdown">Markdown</:menu>
+      <:menu id="pagination" to="/storybook/components/pagination">Pagination</:menu>
+      <:menu id="table" to="/storybook/components/table">Table</:menu>
+    </.wc_left_menu_group>
+  </:menu>
   </.wc_left_menu>
   <%= @inner_content %>
 </main>
diff --git a/apps/phx_wc_storybook_web/mix.exs b/apps/phx_wc_storybook_web/mix.exs
@@ -41,7 +41,8 @@ defmodule PhxWCStorybookWeb.MixProject do
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
       {:phoenix_live_view, "~> 0.18"},
-      {:phx_live_storybook, "~> 0.4.0"},
+      # {:phoenix_storybook, "~> 0.5.0"},
+      {:phx_live_storybook, "0.4.5"},
       {:floki, ">= 0.30.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.7"},
       {:tailwind, "~> 0.1.6", runtime: Mix.env() == :dev},