feat: move code from toast to flash file (#149)

* feat: move code from toast to flash file

* feat: add earthly package to flake.nix

* feat: implement flash component into html

* fix: change atom to success on put_flash

* feat: update phoenix_live_view

---------

Co-authored-by: Zoey de Souza Pessanha <[email protected]>

assets/css/app.scss

@@ -162,12 +162,12 @@ footer {
 // Componentes
 @import "./button.scss";
 @import "./checkbox.scss";
+@import "./flash.scss";
 @import "./input.scss";
 @import "./landing.scss";
 @import "./navbar.scss";
 @import "./radio.scss";
 @import "./search.scss";
-@import "./toast.scss";
 @import "./textarea.scss";
 @import "./tabela.scss";
 @import "./label.scss";

assets/css/flash.scss

@@ -0,0 +1,72 @@
+.flash-component {
+  display: inline-flex;
+  flex-direction: column-reverse;
+  position: fixed;
+  max-width: 25rem;
+  top: 1.5rem;
+  right: 1.5rem;
+  padding: 0.75rem;
+  align-items: flex-start;
+  gap: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: #fff;
+
+  .flash {
+    @apply flex items-center;
+    gap: 0.75rem;
+
+
+    .flash-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    p {
+      @apply text-black-80;
+    }
+  }
+}
+
+.flash-component.success {
+  @apply border-2 border-solid border-green-40;
+
+  .flash-icon {
+    @apply text-green-100;
+  }
+}
+
+.flash-component.warning {
+  @apply border-2 border-solid border-yellow-40;
+
+  .flash-icon {
+    @apply text-yellow-100;
+  }
+}
+
+.flash-component.error {
+  @apply border-2 border-solid border-red-40;
+
+  .flash-icon {
+    @apply text-red-100;
+  }
+}
+
+.flash-component.show {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}
+
+#flash-group {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  align-items: flex-end;
+  top: 1.5rem;
+  right: 1.5rem;
+  gap: 0.5rem;
+
+  .flash-component {
+    position: relative;
+  }
+}

flake.nix

@@ -33,6 +33,7 @@
           name = "pescarte";
           packages = with pkgs;
             [
+              earthly
               gnumake
               gcc
               openssl

lib/pescarte_web/design_system.ex

@@ -12,6 +12,7 @@ defmodule PescarteWeb.DesignSystem do
 
   alias PescarteWeb.DesignSystem
   alias PescarteWeb.DesignSystem.SearchInput
+  alias Phoenix.LiveView.JS
 
   @text_sizes ~w(h1 h2 h3 h4 h5 base lg md sm giant)
 
@@ -536,24 +537,59 @@ defmodule PescarteWeb.DesignSystem do
     """
   end
 
-  attr(:type, :string, values: ~w(success error warning), required: true)
-  attr(:message, :string, required: true)
-  attr(:id, :string, required: true)
+  @doc """
+  Renders flash notices.
+  ## Examples
+      <.flash kind={:info} flash={@flash} />
+      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
+  """
+  attr(:id, :string, default: "flash", doc: "the optional id of flash container")
+  attr(:flash, :map, default: %{}, doc: "the map of flash messages to display")
+
+  attr(:kind, :atom,
+    values: [:success, :warning, :error],
+    doc: "used for styling and flash lookup"
+  )
+
+  attr(:rest, :global, doc: "the arbitrary HTML attributes to add to the flash container")
 
-  def toast(assigns) do
+  slot(:inner_block, doc: "the optional inner block that renders the flash message")
+
+  def flash(assigns) do
     ~H"""
-    <div id={@id} class={["toast", @type, "show"]} role="alert">
-      <div class="toast-icon">
-        <Lucideicons.check_circle_2 :if={@type == "success"} />
-        <Lucideicons.info :if={@type == "warning"} />
-        <Lucideicons.x_circle :if={@type == "error"} />
-        <span class="sr-only"><%= @type %> icon</span>
+    <div
+      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
+      id={@id}
+      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
+      role="alert"
+      class={["flash-component", Atom.to_string(@kind), "show"]}
+      {@rest}
+    >
+      <div class="flash">
+        <Lucideicons.check_circle_2 :if={@kind == :success} class="flash-icon" />
+        <Lucideicons.info :if={@kind == :warning} class="flash-icon" />
+        <Lucideicons.x_circle :if={@kind == :error} class="flash-icon" />
+        <.text size="lg"><%= msg %></.text>
       </div>
-      <.text size="lg"><%= @message %></.text>
     </div>
     """
   end
 
+  @doc """
+  Shows the flash group with standard titles and content.
+  ## Examples
+      <.flash_group flash={@flash} />
+  """
+  attr(:flash, :map, required: true, doc: "the map of flash messages")
+
+  def flash_group(assigns) do
+    ~H"""
+    <.flash kind={:success} flash={@flash} />
+    <.flash kind={:warning} flash={@flash} />
+    <.flash kind={:error} flash={@flash} />
+    """
+  end
+
   @doc """
   Renderiza uma tabela com diferentes colunas - versão 4/6/2023:
 
@@ -644,4 +680,27 @@ defmodule PescarteWeb.DesignSystem do
     </div>
     """
   end
+
+  ## JS Commands
+
+  def show(js \\ %JS{}, selector) do
+    JS.show(js,
+      to: selector,
+      transition:
+        {"transition-all transform ease-out duration-300",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+         "opacity-100 translate-y-0 sm:scale-100"}
+    )
+  end
+
+  def hide(js \\ %JS{}, selector) do
+    JS.hide(js,
+      to: selector,
+      time: 200,
+      transition:
+        {"transition-all transform ease-in duration-200",
+         "opacity-100 translate-y-0 sm:scale-100",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+    )
+  end
 end

lib/pescarte_web/flash.ex

@@ -0,0 +1,14 @@
+defmodule PescarteWeb.Flash do
+  use PescarteWeb, :live_view
+
+  def on_mount(:flash, _params, _session, socket) do
+    Process.send_after(self(), :hide_flash, 10_000)
+    socket = attach_hook(socket, :hide_flash, :handle_info, &hide_flash/2)
+
+    {:cont, socket}
+  end
+
+  defp hide_flash(:hide_flash, socket) do
+    {:halt, clear_flash(socket)}
+  end
+end

lib/pescarte_web/layouts/app.html.heex

@@ -1,6 +1,7 @@
 <body class="grid">
   <.navbar />
   <main class="w-full h-full">
+    <.flash_group flash={@flash} />
     <%= @inner_content %>
   </main>
   <.footer />

lib/pescarte_web/layouts/authenticated.html.heex

@@ -5,6 +5,7 @@
     module={PescarteWeb.DesignSystem.AuthenticatedNavbar}
   />
   <main>
+    <.flash_group flash={@flash} />
     <%= @inner_content %>
   </main>
   <.footer />

lib/pescarte_web/live/pesquisa/relatorio_live/form_component.ex

@@ -117,7 +117,7 @@ defmodule PescarteWeb.Pesquisa.RelatorioLive.FormComponent do
 
         {:noreply,
          socket
-         |> put_flash(:info, "Relatório atualizado com sucesso!")
+         |> put_flash(:success, "Relatório atualizado com sucesso!")
          |> push_patch(to: socket.assigns.patch)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
@@ -132,7 +132,7 @@ defmodule PescarteWeb.Pesquisa.RelatorioLive.FormComponent do
 
         {:noreply,
          socket
-         |> put_flash(:info, "Relatório criado com sucesso")
+         |> put_flash(:success, "Relatório criado com sucesso")
          |> push_patch(to: socket.assigns.patch)}
 
       {:error, %Ecto.Changeset{} = changeset} ->

lib/pescarte_web/router.ex

@@ -48,7 +48,10 @@ defmodule PescarteWeb.Router do
     # pipe_through [:browser, :require_authenticated_user]
 
     live_session :require_authenticated_user,
-      on_mount: [{PescarteWeb.Authentication, :ensure_authenticated}] do
+      on_mount: [
+        {PescarteWeb.Authentication, :ensure_authenticated},
+        {PescarteWeb.Flash, :flash}
+      ] do
       live("/perfil", ProfileLive)
       live("/pesquisadores", ListPesquisadorLive)
       live("/cadastro", CadastroPesquisadorLive)

lib/pescarte_web/templates/login_html.ex

@@ -6,7 +6,9 @@ defmodule PescarteWeb.LoginHTML do
 
     ~H"""
     <div class="fish-bg h-full" id="login-wrapper">
-      <.toast :if={@error_message} id="login-error" type="error" message={@error_message} />
+      <.flash :if={@error_message} id="login-error" kind={:error}>
+        <%= @error_message %>
+      </.flash>
 
       <.simple_form for={@form} action={~p"/acessar"} class="login-form">
         <.text size="h3" color="text-black-80">

mix.exs

@@ -46,14 +46,15 @@ defmodule Pescarte.MixProject do
       {:ex_machina, "~> 2.7.0"},
       {:phoenix, "~> 1.7", override: true},
       {:phoenix_ecto, "~> 4.1"},
+      {:phoenix_html, "~> 3.3"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
+      {:phoenix_live_view, "~> 0.20"},
+      {:phoenix_storybook, "~> 0.5"},
       {:timex, "~> 3.0"},
       {:telemetry_metrics, "~> 0.4"},
       {:telemetry_poller, "~> 0.4"},
-      {:phoenix_live_view, "~> 0.18"},
       {:floki, ">= 0.30.0"},
       {:lucide_icons, "~> 1.0"},
-      {:phoenix_storybook, "~> 0.5"},
       {:hackney, "~> 1.20"},
       {:absinthe, "~> 1.5"},
       {:absinthe_plug, "~> 1.5"},