Use Prima for invitation modal (#5843)

* Replace invitation modal with Prima

* Better focus handling

* Simplify css

* Remove unnecessary transition classes

* Clarify comment about testing

* Fix typo

* Remove alpine.js initialization

* Use prima 0.1.7

* Unlock autumn and rustler deps

* Npm run format

* Fix invitation modal reject button on mobile

Co-authored-by: Bijay-Shre-stha <[email protected]>

* Update assets/js/liveview/live_socket.js

Co-authored-by: Artur Pata <[email protected]>

---------

Co-authored-by: Bijay-Shre-stha <[email protected]>
Co-authored-by: Artur Pata <[email protected]>

Author: 3 people

assets/js/liveview/live_socket.js

@@ -1,11 +1,12 @@
 /**
-  These 3 modules are resolved from '../deps' folder, 
-  which does not exist when running the lint command in Github CI 
+  The modules below this comment block are resolved from '../deps' folder,
+  which does not exist when running the lint command in Github CI
 */
 /* eslint-disable import/no-unresolved */
 import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
+import { Modal } from 'prima'
 import topbar from 'topbar'
 /* eslint-enable import/no-unresolved */
 
@@ -14,7 +15,7 @@ import Alpine from 'alpinejs'
 let csrfToken = document.querySelector("meta[name='csrf-token']")
 let websocketUrl = document.querySelector("meta[name='websocket-url']")
 if (csrfToken && websocketUrl) {
-  let Hooks = {}
+  let Hooks = { Modal }
   Hooks.Metrics = {
     mounted() {
       this.handleEvent('send-metrics', ({ event_name }) => {

lib/plausible_web/components/generic.ex

@@ -1060,10 +1060,11 @@ defmodule PlausibleWeb.Components.Generic do
 
   slot :inner_block, required: true
   attr :class, :any, default: nil
+  attr :rest, :global
 
   def h2(assigns) do
     ~H"""
-    <h2 class={[@class || "font-semibold leading-6 text-gray-900 dark:text-gray-100"]}>
+    <h2 class={[@class || "font-semibold leading-6 text-gray-900 dark:text-gray-100"]} {@rest}>
       {render_slot(@inner_block)}
     </h2>
     """

lib/plausible_web/live/components/prima_modal.ex

@@ -0,0 +1,49 @@
+defmodule PlausibleWeb.Live.Components.PrimaModal do
+  @moduledoc false
+  use PlausibleWeb, :component
+  alias Prima.Modal
+
+  attr :id, :string, required: true
+  slot :inner_block, required: true
+
+  def modal(assigns) do
+    ~H"""
+    <Modal.modal id={@id}>
+      <Modal.modal_overlay
+        transition_enter={{"ease-out duration-300", "opacity-0", "opacity-100"}}
+        transition_leave={{"ease-in duration-200", "opacity-100", "opacity-0"}}
+        class="fixed inset-0 bg-gray-500/75 dark:bg-gray-800/75"
+      />
+
+      <div class="fixed inset-0 w-screen overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 sm:items-center sm:p-0">
+          <Modal.modal_panel
+            id={@id <> "-panel"}
+            class="relative overflow-hidden rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl sm:w-full sm:max-w-lg"
+            transition_enter={
+              {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+               "opacity-100 translate-y-0 sm:scale-100"}
+            }
+            transition_leave={
+              {"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
+               "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+            }
+          >
+            {render_slot(@inner_block)}
+          </Modal.modal_panel>
+        </div>
+      </div>
+    </Modal.modal>
+    """
+  end
+
+  slot :inner_block, required: true
+
+  def modal_title(assigns) do
+    ~H"""
+    <Modal.modal_title as={&h2/1}>
+      {render_slot(@inner_block)}
+    </Modal.modal_title>
+    """
+  end
+end