add layout directory to separate components, based on #74

Author: shahryarjb

deployment/templates/test1.html

@@ -1,6 +1,6 @@
-defmodule MishkaTemplateCreator.Components.Blocks.Aside do
+defmodule MishkaTemplateCreator.Components.Layout.Aside do
   use Phoenix.Component
-  alias MishkaTemplateCreator.Components.Blocks.ElementMenu
+  alias MishkaTemplateCreator.Components.Layout.ElementMenu
   alias Phoenix.LiveView.JS
 
   attr(:selected_form, :string, required: false, default: nil)

lib/mishka_template_creator/components/blocks/aside.ex lib/mishka_template_creator/components/Layout/aside.ex

@@ -1,4 +1,4 @@
-defmodule MishkaTemplateCreator.Components.Blocks.Content do
+defmodule MishkaTemplateCreator.Components.Layout.Content do
   use Phoenix.Component
   alias MishkaTemplateCreator.Components.Elements.Layout
 

lib/mishka_template_creator/components/blocks/content.ex lib/mishka_template_creator/components/Layout/content.ex

@@ -1,7 +1,7 @@
-defmodule MishkaTemplateCreator.Components.Blocks.ElementMenu do
+defmodule MishkaTemplateCreator.Components.Layout.ElementMenu do
   use Phoenix.Component
   alias MishkaTemplateCreator.Data.Elements
-  alias MishkaTemplateCreatorWeb.MishkaCoreComponent
+  alias MishkaTemplateCreator.Components.Blocks.Icon
 
   attr :id, :string, required: true
   attr :title, :string, required: true
@@ -47,7 +47,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.ElementMenu do
           title={title}
           parent_type={Enum.join(parent_type, ",")}
         >
-          <MishkaCoreComponent.dynamic_icon module={module} />
+          <Icon.dynamic module={module} />
         </.block_menu>
       </div>
     </div>

lib/mishka_template_creator/components/blocks/element_menu.ex lib/mishka_template_creator/components/Layout/element_menu.ex

@@ -1,4 +1,4 @@
-defmodule MishkaTemplateCreator.Components.Blocks.History do
+defmodule MishkaTemplateCreator.Components.Layout.History do
   use Phoenix.LiveComponent
 
   @impl true

lib/mishka_template_creator/components/blocks/history.ex lib/mishka_template_creator/components/Layout/history.ex

@@ -6,7 +6,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
   import MishkaTemplateCreatorWeb.MishkaCoreComponent
 
   alias MishkaTemplateCreator.{
-    Components.Blocks.ElementMenu,
+    Components.Layout.ElementMenu,
     Components.Blocks.CustomClass,
     Data.TailwindSetting,
     Components.ConfigSelector

lib/mishka_template_creator/components/blocks/settings.ex lib/mishka_template_creator/components/Layout/settings.ex

@@ -0,0 +1,47 @@
+defmodule MishkaTemplateCreator.Components.Blocks.Icon do
+  use Phoenix.Component
+  alias MishkaTemplateCreator.Data.TailwindSetting
+
+  attr(:module, :string, required: true)
+  attr(:class, :string, required: false, default: "w-6 h-6 mx-auto stroke-current")
+
+  def dynamic(assigns) do
+    ~H"""
+    <%= Phoenix.LiveView.TagEngine.component(
+      Code.eval_string("&(#{@module}/1)") |> elem(0),
+      [class: @class],
+      {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
+    ) %>
+    """
+  end
+
+  attr(:myself, :integer, required: true)
+  attr(:selected, :string, required: false, default: nil)
+  attr(:block_id, :string, required: false, default: nil)
+
+  attr(:class, :string,
+    required: false,
+    default: "w-4 h-4 mx-auto stroke-current text-black cursor-pointer"
+  )
+
+  def select(assigns) do
+    assigns = assign(assigns, icons: TailwindSetting.hero_icons())
+
+    ~H"""
+    <div class="flex flex-wrap w-full gap-1 border border-gray-300 p-3 rounded-md mb-3 justify-start">
+      <span
+        :for={icon <- @icons}
+        phx-click="select_icon"
+        phx-value-name={icon}
+        phx-value-block-id={@block_id}
+        phx-target={@myself}
+      >
+        <.dynamic
+          module={"Heroicons.#{icon}"}
+          class={@class <> "#{if @selected == icon, do: " !text-red-600", else: ""}"}
+        />
+      </span>
+    </div>
+    """
+  end
+end

lib/mishka_template_creator/components/blocks/icon.ex

@@ -3,12 +3,13 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
   import Phoenix.HTML.Form
   use Phoenix.Component
 
-  alias MishkaTemplateCreator.Components.Blocks.Aside
+  alias MishkaTemplateCreator.Components.Layout.Aside
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
   alias Phoenix.LiveView.JS
   alias MishkaTemplateCreator.Components.Blocks.Tag
+  alias MishkaTemplateCreator.Components.Blocks.Icon
 
   @svg_height [
     "h-1",
@@ -456,7 +457,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
           phx-click={reset_and_select(@children, key)}
           id={"button-#{key}"}
         >
-          <MishkaCoreComponent.dynamic_icon
+          <Icon.dynamic
             module={data["icon"]}
             class={Enum.join(@header["icon"], " ")}
           />
@@ -711,7 +712,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
     <div id={"form-icon-#{@key}"} class="hidden">
       <p class="w-full font-bold text-sm pb-5 border-b border-gray-300 mb-5">Select Tab Icon:</p>
       <div class="px-5 pb-3">
-        <MishkaCoreComponent.select_icons
+        <Icon.select
           selected={String.replace(@data["icon"], "Heroicons.", "")}
           myself={@myself}
           block_id={@key}

lib/mishka_template_creator/components/elements/tab.ex

@@ -4,7 +4,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
   import Phoenix.HTML.Form
   import MishkaTemplateCreatorWeb.CoreComponents
 
-  alias MishkaTemplateCreator.Components.Blocks.Aside
+  alias MishkaTemplateCreator.Components.Layout.Aside
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   alias MishkaTemplateCreator.Data.TailwindSetting
   alias Phoenix.LiveView.JS

lib/mishka_template_creator/components/elements/table.ex

@@ -3,7 +3,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
   import Phoenix.HTML.Form
 
   alias MishkaTemplateCreator.Components.Blocks.Tag
-  alias MishkaTemplateCreator.Components.Blocks.Aside
+  alias MishkaTemplateCreator.Components.Layout.Aside
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
@@ -107,7 +107,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
           </ul>
         </div>
 
-        <Aside.aside_accordion id={"text-#{@id}"} title="Change Text" open={false}>
+        <Aside.aside_accordion id={"text-#{@id}"} title="Change Text">
           <MishkaCoreComponent.custom_simple_form
             :let={f}
             for={%{}}

lib/mishka_template_creator/components/elements/text.ex

@@ -3,7 +3,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
   import Phoenix.HTML.Form
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
-  alias MishkaTemplateCreator.Components.Blocks.{Content, Aside, History}
+  alias MishkaTemplateCreator.Components.Layout.{Content, Aside, History}
   alias Phoenix.LiveView.JS
   alias MishkaTemplateCreator.Data.Elements
 
@@ -212,49 +212,6 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
     """
   end
 
-  attr(:module, :string, required: true)
-  attr(:class, :string, required: false, default: "w-6 h-6 mx-auto stroke-current")
-
-  def dynamic_icon(assigns) do
-    ~H"""
-    <%= Phoenix.LiveView.TagEngine.component(
-      Code.eval_string("&(#{@module}/1)") |> elem(0),
-      [class: @class],
-      {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
-    ) %>
-    """
-  end
-
-  attr(:class, :string,
-    required: false,
-    default: "w-4 h-4 mx-auto stroke-current text-black cursor-pointer"
-  )
-
-  attr(:myself, :integer, required: true)
-  attr(:selected, :string, required: false, default: nil)
-  attr(:block_id, :string, required: false, default: nil)
-
-  def select_icons(assigns) do
-    assigns = assign(assigns, icons: TailwindSetting.hero_icons())
-
-    ~H"""
-    <div class="flex flex-wrap w-full gap-1 border border-gray-300 p-3 rounded-md mb-3 justify-start">
-      <span
-        :for={icon <- @icons}
-        phx-click="select_icon"
-        phx-value-name={icon}
-        phx-value-block-id={@block_id}
-        phx-target={@myself}
-      >
-        <.dynamic_icon
-          module={"Heroicons.#{icon}"}
-          class={@class <> "#{if @selected == icon, do: " !text-red-600", else: ""}"}
-        />
-      </span>
-    </div>
-    """
-  end
-
   attr(:myself, :integer, required: true)
   attr(:classes, :list, required: true)
   attr(:title, :string, required: false, default: "Color:")

lib/mishka_template_creator/components/mishka_core_component.ex

@@ -5,12 +5,12 @@ defmodule MishkaTemplateCreator.Data.Elements do
     {"text", "Text", "Heroicons.inbox_stack", ["section"]},
     {"tab", "Tab", "Heroicons.inbox_stack", ["section"]},
     {"table", "Table", "Heroicons.inbox_stack", ["section"]},
-    {"accordion", "Accordion", "Heroicons.inbox_stack", ["section"]}
+    {"accordion", "Accordion", "Heroicons.inbox_stack", ["section"]},
+    {"buttons", "Buttons", "Heroicons.inbox_stack", ["section"]}
   ]
   @elements_items [
     {"alerts", "Alerts", "Heroicons.inbox_stack", ["section"]},
     {"quotes", "Quotes", "Heroicons.inbox_stack", ["section"]},
-    {"buttons", "Buttons", "Heroicons.inbox_stack", ["section"]},
     {"links", "Links", "Heroicons.inbox_stack", ["section"]},
     {"code", "Code", "Heroicons.inbox_stack", ["section"]},
     {"notes", "Notes", "Heroicons.inbox_stack", ["section"]}