wip: add shoelace/alert

app/assets/javascripts/alchemy/admin.js

@@ -15,7 +15,6 @@
 //= require alchemy/alchemy.dragndrop
 //= require alchemy/alchemy.elements_window
 //= require alchemy/alchemy.fixed_elements
-//= require alchemy/alchemy.growler
 //= require alchemy/alchemy.hotkeys
 //= require alchemy/alchemy.image_overlay
 //= require alchemy/alchemy.string_extension

app/assets/stylesheets/alchemy/flash.scss

@@ -1,29 +1,3 @@
-div#flash_notices {
-  position: fixed;
-  right: 0;
-  z-index: 400000;
-  width: 400px;
-  top: 0;
-
-  .flash.error {
-    cursor: pointer;
-    padding-right: 32px;
-
-    &:before {
-      display: flex;
-      position: absolute;
-      right: 2 * $default-padding;
-      top: 7px;
-      width: 20px;
-      height: 20px;
-      font-family: "remixicon";
-      content: $ri-close-line;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
 div.flash {
   border-radius: $default-border-radius;
   opacity: 0.95;

app/assets/stylesheets/alchemy/print.scss

@@ -7,7 +7,6 @@
 div#main_menu,
 div#top_menu,
 div#corner,
-div#flash_notices,
 div.pagination span,
 div.pagination a {
   display: none;
@@ -18,7 +17,7 @@ div#archive_all {
 }
 
 span.icon.true:before {
-  content: 'x';
+  content: "x";
 }
 
 div.pagination {
@@ -31,5 +30,5 @@ div.pagination em.current {
 }
 
 div.pagination em:before {
-  content: 'Page ';
+  content: "Page ";
 }

app/assets/stylesheets/alchemy/shoelace.scss

@@ -343,3 +343,37 @@ sl-tooltip {
     box-shadow: 0 0 var(--spacing-1) var(--color-grey_medium);
   }
 }
+
+sl-alert {
+  &::part(base) {
+    border-width: 1px;
+
+    &[variant="primary"] {
+      --sl-panel-background-color: #{$info_background_color};
+      --sl-color-neutral-700: #{$info_text_color};
+      border-color: #{$info_border_color};
+    }
+
+    &[variant="success"] {
+      --sl-panel-background-color: #{$success_background_color};
+      --sl-color-neutral-700: #{$success_text_color};
+      border-color: #{$success_border_color};
+    }
+
+    &[variant="danger"] {
+      --sl-panel-background-color: #{$error_background_color};
+      --sl-color-neutral-700: #{$error_text_color};
+      border-color: #{$error_border_color};
+    }
+
+    &[variant="warning"] {
+      --sl-panel-background-color: #{$warning_background_color};
+      --sl-color-neutral-700: #{$warning_text_color};
+      border-color: #{$warning_border_color};
+    }
+  }
+
+  &::part(close-button) {
+    --sl-spacing-medium: var(--spacing-2);
+  }
+}

app/components/alchemy/admin/flash_message.rb

@@ -0,0 +1,56 @@
+class Alchemy::Admin::FlashMessage < ViewComponent::Base
+  def initialize(message, type: "notice", auto_dismiss: true, closable: true)
+    @message = message
+    @type = type
+    @auto_dismiss = (auto_dismiss == true) ? variant != "danger" : false
+    @closable = closable
+  end
+
+  def call
+    content_tag("sl-alert", message, attributes) do
+      content_tag("sl-icon", nil, name: icon, slot: "icon") + message
+    end
+  end
+
+  private
+
+  attr_reader :message, :type, :auto_dismiss, :closable
+
+  def icon
+    case type.to_s
+    when "warning", "warn", "alert"
+      "exclamation-triangle-fill"
+    when "notice"
+      "check-lg"
+    when "error"
+      "bug-fill"
+    else
+      "info-circle-fill"
+    end
+  end
+
+  def variant
+    case type.to_s
+    when "warning", "warn", "alert"
+      "warning"
+    when "notice", "success"
+      "success"
+    when "error"
+      "danger"
+    when "info"
+      "primary"
+    else
+      "neutral"
+    end
+  end
+
+  def attributes
+    {
+      variant: variant,
+      open: true
+    }.tap do |a|
+      a[:duration] = 3000 if auto_dismiss
+      a[:closable] = true if closable
+    end.compact!
+  end
+end

app/helpers/alchemy/base_helper.rb

@@ -54,19 +54,10 @@ def render_message(type = :info, msg = nil, &blk)
       if blk
         content_tag :div, render_icon(icon_class) + capture(&blk), class: "#{type} message"
       else
-        content_tag :div, render_icon(icon_class) + msg, class: "#{type} message"
+        render Alchemy::Admin::FlashMessage.new(msg, type: type, auto_dismiss: false, closable: false)
       end
     end
 
-    # Renders the flash partial (+alchemy/admin/partials/flash+)
-    #
-    # @param [String] notice The notice you want to display
-    # @param [Symbol] style The style of this flash. Valid values are +:notice+ (default), +:warn+ and +:error+
-    #
-    def render_flash_notice(notice, style = :notice)
-      render("alchemy/admin/partials/flash", flash_type: style, message: notice)
-    end
-
     # Checks if the given argument is a String or a Page object.
     # If a String is given, it tries to find the page via page_layout
     # Logs a warning if no page is given.

app/javascript/alchemy_admin.js

@@ -2,6 +2,7 @@ import "@ungap/custom-elements"
 import "@hotwired/turbo-rails"
 import Rails from "@rails/ujs"
 
+import growl from "alchemy_admin/growler"
 import GUI from "alchemy_admin/gui"
 import { translate } from "alchemy_admin/i18n"
 import Dirty from "alchemy_admin/dirty"
@@ -68,6 +69,7 @@ if (typeof window.Alchemy === "undefined") {
 // Enhance the global Alchemy object with imported features
 Object.assign(Alchemy, {
   ...Dirty,
+  growl,
   GUI,
   t: translate, // Global utility method for translating a given string
   ImageLoader: ImageLoader.init,

app/javascript/alchemy_admin/growler.js

@@ -0,0 +1,66 @@
+import "@shoelace/alert"
+import { registerIconLibrary } from "@shoelace/icon-library"
+
+registerIconLibrary("default", {
+  resolver: (name) =>
+    `https://cdn.jsdelivr.net/npm/[email protected]/icons/${name}.svg`
+})
+
+function notify(
+  message,
+  variant = "primary",
+  icon = "info-circle-fill",
+  duration = 3000
+) {
+  const alert = Object.assign(document.createElement("sl-alert"), {
+    variant,
+    closable: true,
+    innerHTML: `
+      <sl-icon name="${icon}" slot="icon"></sl-icon>
+      ${message}
+    `
+  })
+  if (variant !== "danger") {
+    alert.duration = duration
+  }
+  document.body.append(alert)
+  alert.toast()
+}
+
+function messageIcon(messageType) {
+  switch (messageType) {
+    case "alert":
+    case "warn":
+    case "warning":
+      return "exclamation-triangle-fill"
+    case "notice":
+      return "check-lg"
+    case "error":
+      return "bug-fill"
+    default:
+      return "info-circle-fill"
+  }
+}
+
+function messageStyle(messageType) {
+  switch (messageType) {
+    case "alert":
+    case "warn":
+    case "warning":
+      return "warning"
+    case "notice":
+    case "success":
+      return "success"
+    case "danger":
+    case "error":
+      return "danger"
+    case "info":
+      return "primary"
+    default:
+      return "neutral"
+  }
+}
+
+export default function (message, style = "notice") {
+  notify(message, messageStyle(style), messageIcon(style))
+}

app/javascript/alchemy_admin/initializer.js

@@ -25,11 +25,6 @@ function Initialize() {
   // Initialize the GUI.
   Alchemy.GUI.init()
 
-  // Fade all growl notifications.
-  if ($("#flash_notices").length > 0) {
-    Alchemy.Growler.fade()
-  }
-
   // Add observer for please wait overlay.
   $(".please_wait")
     .not("*[data-alchemy-confirm]")

app/views/alchemy/admin/partials/_flash.html.erb

@@ -1,4 +1 @@
-<div class="flash <%= flash_type %>">
-  <%= render_icon message_icon_class(flash_type) %>
-  <%= message %>
-</div>
+<%= render Alchemy::Admin::FlashMessage.new(message, type: flash_type) %>

app/views/alchemy/admin/partials/_flash_notices.html.erb

@@ -1,5 +1,10 @@
-<div id="flash_notices" style="display: <%= flash.keys.blank? ? "none" : "block" %>">
-<% flash.keys.each do |flash_type| %>
-  <%= render_flash_notice(flash[flash_type.to_sym], flash_type) if flash[flash_type.to_sym].present? %>
-<% end %>
+<div class="sl-toast-stack">
+  <% flash.keys.each do |flash_type| %>
+    <% message = flash[flash_type.to_sym] %>
+    <% if message.present? %>
+      <%= render "alchemy/admin/partials/flash",
+        message: message,
+        flash_type: flash_type %>
+    <% end %>
+  <% end %>
 </div>

app/views/alchemy/admin/styleguide/index.html.erb

@@ -41,6 +41,10 @@
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 <% end %>
 
+<h3>Inline Message</h3>
+
+<%= render_message "Lorem ipsum dolor sit amet, consectetur adipiscing elit." %>
+
 <h3>Warning Message</h3>
 
 <%= render_message :warning do %>

app/views/alchemy/base/error_notice.html.erb

@@ -1 +1 @@
-<%= render_flash_notice @notice, :error %>
+<%= render "alchemy/admin/partials/flash", flash_type: :error, message: @notice %>

config/importmap.rb

@@ -4,6 +4,9 @@
 pin "lodash-es/max", to: "https://ga.jspm.io/npm:[email protected]/max.js", preload: true
 pin "sortablejs", to: "https://ga.jspm.io/npm:[email protected]/modular/sortable.esm.js", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+
+pin "@shoelace/alert", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/alert/alert.js", preload: true
+pin "@shoelace/icon-library", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/utilities/icon-library.js", preload: true
 pin "@shoelace/switch", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/switch/switch.js", preload: true
 pin "@shoelace/tab", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/tab/tab.js", preload: true
 pin "@shoelace/tab-group", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/tab-group/tab-group.js", preload: true