Consolidate Fluxon usage via CoreComponents

With the exclusion of 'button' which is already in use an may need a
refactor

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]}

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.
 

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
+          <.select field={@form[:type]} label={gettext("Type")} options={types_with_labels()} />
-            field={@form[:type]}
+          <.select field={@form[:format]} label={gettext("Format")} options={formats_with_labels()} />
-            label={gettext("Type")}
-            options={types_with_labels()}
-          />
-          <Fluxon.Components.Select.select
-            field={@form[:format]}
-            label={gettext("Format")}
-            options={formats_with_labels()}
-          />
         </div>
-        <Fluxon.Components.Input.input
+        <.input class="font-mono" field={@form[:musicbrainz_id]} label={gettext("MusicBrainz ID")} />
-          class="font-mono"
+        <.select
-          field={@form[:musicbrainz_id]}
-          label={gettext("MusicBrainz ID")}
-        />
-        <Fluxon.Components.Select.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")} />
+          <.input field={@form[:release_date]} label={gettext("Release Date")} />
-          <Fluxon.Components.DatePicker.date_time_picker
+          <.date_time_picker
             :if={@show_purchased_at}
             field={@form[:purchased_at]}
             display_format="%B %-d, %Y at %I:%M %p"

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}

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
+      <.sheet :if={@record.selected_release_id} id={@sheet_id} placement="right">
-        :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

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"

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">