From f5bc8a640d64c0c17eadd3c65d71f3e1561acb03 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 12 May 2025 10:43:13 +0100
Subject: [PATCH] Consolidate Fluxon usage via CoreComponents

With the exclusion of 'button' which is already in use an may need a
refactor
---
 .../components/add_record_component.ex        |  2 +-
 .../components/core_components.ex             |  7 ++++++
 .../components/form_component.ex              | 24 +++++--------------
 .../components/record_components.ex           |  2 +-
 .../components/release_component.ex           | 12 ++++------
 .../controllers/session_html/new.html.heex    |  2 +-
 .../live/artist_live/show.html.heex           |  2 +-
 7 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/lib/music_library_web/components/add_record_component.ex b/lib/music_library_web/components/add_record_component.ex
index 7211f5de..3ddbc8ba 100644
--- a/lib/music_library_web/components/add_record_component.ex
+++ b/lib/music_library_web/components/add_record_component.ex
@@ -21,7 +21,7 @@ defmodule MusicLibraryWeb.AddRecordComponent do
         phx-submit="search"
         class="px-4"
       >
-        <Fluxon.Components.Input.input
+        <.input
           id={:mb_query}
           name={:mb_query}
           field={@form[:mb_query]}
diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 87868791..4c287c7e 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -19,6 +19,13 @@ defmodule MusicLibraryWeb.CoreComponents do
   alias Phoenix.LiveView.JS
   use Gettext, backend: MusicLibraryWeb.Gettext
 
+  defdelegate date_time_picker(assigns), to: Fluxon.Components.DatePicker
+  defdelegate input(assigns), to: Fluxon.Components.Input
+  defdelegate loading(assigns), to: Fluxon.Components.Loading
+  defdelegate select(assigns), to: Fluxon.Components.Select
+  defdelegate separator(assigns), to: Fluxon.Components.Separator
+  defdelegate sheet(assigns), to: Fluxon.Components.Sheet
+
   @doc """
   Renders a modal.
 
diff --git a/lib/music_library_web/components/form_component.ex b/lib/music_library_web/components/form_component.ex
index 6e859439..331428fa 100644
--- a/lib/music_library_web/components/form_component.ex
+++ b/lib/music_library_web/components/form_component.ex
@@ -36,31 +36,19 @@ defmodule MusicLibraryWeb.FormComponent do
         phx-submit="save"
       >
         <div class="sm:columns-2 space-y-2">
-          <Fluxon.Components.Select.select
-            field={@form[:type]}
-            label={gettext("Type")}
-            options={types_with_labels()}
-          />
-          <Fluxon.Components.Select.select
-            field={@form[:format]}
-            label={gettext("Format")}
-            options={formats_with_labels()}
-          />
+          <.select field={@form[:type]} label={gettext("Type")} options={types_with_labels()} />
+          <.select field={@form[:format]} label={gettext("Format")} options={formats_with_labels()} />
         </div>
-        <Fluxon.Components.Input.input
-          class="font-mono"
-          field={@form[:musicbrainz_id]}
-          label={gettext("MusicBrainz ID")}
-        />
-        <Fluxon.Components.Select.select
+        <.input class="font-mono" field={@form[:musicbrainz_id]} label={gettext("MusicBrainz ID")} />
+        <.select
           searchable
           field={@form[:selected_release_id]}
           label={gettext("Selected Release")}
           options={selected_release_id_options(@record)}
         />
         <div class={[@show_purchased_at && "sm:columns-2", "space-y-2"]}>
-          <Fluxon.Components.Input.input field={@form[:release_date]} label={gettext("Release Date")} />
-          <Fluxon.Components.DatePicker.date_time_picker
+          <.input field={@form[:release_date]} label={gettext("Release Date")} />
+          <.date_time_picker
             :if={@show_purchased_at}
             field={@form[:purchased_at]}
             display_format="%B %-d, %Y at %I:%M %p"
diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index fca2f06c..e525fc78 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/lib/music_library_web/components/record_components.ex
@@ -197,7 +197,7 @@ defmodule MusicLibraryWeb.RecordComponents do
   def search_form(assigns) do
     ~H"""
     <form class="w-full sm:w-1/3" for={@query} phx-submit="search" phx-change="search">
-      <Fluxon.Components.Input.input
+      <.input
         type="search"
         size="sm"
         id={:query}
diff --git a/lib/music_library_web/components/release_component.ex b/lib/music_library_web/components/release_component.ex
index 28254313..6c8dbd25 100644
--- a/lib/music_library_web/components/release_component.ex
+++ b/lib/music_library_web/components/release_component.ex
@@ -34,11 +34,7 @@ defmodule MusicLibraryWeb.ReleaseComponent do
   def render(assigns) do
     ~H"""
     <div>
-      <Fluxon.Components.Sheet.sheet
-        :if={@record.selected_release_id}
-        id={@sheet_id}
-        placement="right"
-      >
+      <.sheet :if={@record.selected_release_id} id={@sheet_id} placement="right">
         <div class="mt-6 flex justify-between items-center gap-4">
           <h3 class="text-lg font-semibold text-zinc-700 dark:text-zinc-300">{gettext("Tracks")}</h3>
           <Fluxon.Components.Button.button
@@ -64,7 +60,7 @@ defmodule MusicLibraryWeb.ReleaseComponent do
           <.async_result :let={release_with_tracks} assign={@release_with_tracks}>
             <:loading>
               <span class="sr-only">{gettext("Loading release with tracks")}</span>
-              <Fluxon.Components.Loading.loading />
+              <.loading />
             </:loading>
             <:failed :let={_failure}>
               <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
@@ -123,14 +119,14 @@ defmodule MusicLibraryWeb.ReleaseComponent do
                   </div>
                 </li>
               </ul>
-              <Fluxon.Components.Separator.separator />
+              <.separator />
               <p class="text-xs md:text-sm text-right text-zinc-700 dark:text-zinc-300">
                 {medium_duration(medium)}
               </p>
             </div>
           </.async_result>
         </div>
-      </Fluxon.Components.Sheet.sheet>
+      </.sheet>
     </div>
     """
   end
diff --git a/lib/music_library_web/controllers/session_html/new.html.heex b/lib/music_library_web/controllers/session_html/new.html.heex
index d539ae68..f00bbdcc 100644
--- a/lib/music_library_web/controllers/session_html/new.html.heex
+++ b/lib/music_library_web/controllers/session_html/new.html.heex
@@ -9,7 +9,7 @@
       <div class="relative -space-y-px rounded-md shadow-xs">
         <div>
           <label for="password" class="sr-only">{gettext("Password")}</label>
-          <Fluxon.Components.Input.input
+          <.input
             id="password"
             name="password"
             type="password"
diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index 7e47bc5f..cc5c6c70 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -9,7 +9,7 @@
       <.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
         <:loading>
           <span class="sr-only">{gettext("Loading play count")}</span>
-          <Fluxon.Components.Loading.loading />
+          <.loading />
         </:loading>
         <:failed :let={_failure}>
           <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">