Refactor: Replace old Toast 'Notice'

Author: ismaail

app/Livewire/Board/BoardComponent.php

@@ -11,12 +11,12 @@
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Support\Collection;
 use Livewire\Component;
-use Support\Helpers\Concerns\NoticeType;
-use Support\Helpers\Concerns\UseNotice;
+use Support\Toastify\Enums\ToastType;
+use Support\Toastify\Toast;
 
 class BoardComponent extends Component
 {
-    use UseNotice;
+    use Toast;
 
     public Board $board;
 
@@ -62,7 +62,7 @@ public function delete(): void
     {
         $this->board->delete();
 
-        $this->flashNotice(NoticeType::Success, 'Board was successfully deleted.');
+        $this->toast('Board was successfully deleted.', type: ToastType::Success);
 
         redirect()->route('home');
     }
@@ -71,7 +71,7 @@ public function archive(): void
     {
         $this->board->update(['archived' => true]);
 
-        $this->flashNotice(NoticeType::Success, 'Board was successfully archived.');
+        $this->toast('Board was successfully archived.', type: ToastType::Success);
 
         redirect()->route('home');
     }

app/Livewire/Card/CardComponent.php

@@ -10,11 +10,12 @@
 use Domain\Timelog\Actions\CreateTimelogAction;
 use Illuminate\Contracts\View\View;
 use Livewire\Component;
-use Support\Helpers\Concerns\UseNotice;
+use Support\Toastify\Enums\ToastType;
+use Support\Toastify\Toast;
 
 class CardComponent extends Component
 {
-    use UseNotice;
+    use Toast;
 
     public Card $card;
 
@@ -37,7 +38,7 @@ public function start(): void
 
         $this->refreshCard($currentCard);
         $this->dispatch('task.started');
-        $this->success('Task started successfully.');
+        $this->toast('Task started successfully.', type: ToastType::Success);
         $this->toggleFavicon(true);
     }
 
@@ -51,7 +52,7 @@ public function stop(): void
 
         $this->refreshCard($currentCard);
         $this->dispatch('task.stoped');
-        $this->success('Task Stoped successfully.');
+        $this->toast('Task Stoped successfully.', type: ToastType::Success);
         $this->toggleFavicon(false);
     }
 
@@ -60,7 +61,7 @@ public function archive(): void
         $this->card->update(['archived' => true]);
 
         $this->dispatch("bucket-{$this->card->bucket_id}-updated");
-        $this->success('Task Archived successfully.');
+        $this->toast('Task Archived successfully.', type: ToastType::Success);
     }
 
     private function toggleFavicon(bool $value): void
@@ -75,7 +76,7 @@ public function delete(): void
         $this->card->delete();
 
         $this->dispatch("bucket-$bucketId-updated");
-        $this->success('Task Deleted successfully.');
+        $this->toast('Task Deleted successfully.', type: ToastType::Success);
     }
 
     public function render(): View

app/Livewire/Pomodoro.php

@@ -4,6 +4,7 @@
 
 namespace App\Livewire;
 
+use Illuminate\Contracts\View\View;
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Session;
 use Livewire\Attributes\On;
@@ -86,7 +87,7 @@ public function onStoped(): void
         $this->dispatch('pomodoro.stoped');
     }
 
-    public function render()
+    public function render(): View
     {
         return view('livewire.pomodoro');
     }

app/Livewire/Utils/Notice.php

@@ -6,6 +6,8 @@
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 
+@source inline("bg-success bg-danger");
+
 @custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
 
 :root {
@@ -16,6 +18,8 @@
 	--color-gray-300: #f7f7f7;
 	--color-text: theme('colors.neutral.900');
 	--color-blue: theme('colors.blue.600');
+	--color-success: theme('colors.green.600');
+	--color-danger: theme('colors.red.500');
 }
 
 :root[data-mode=dark] {
@@ -24,6 +28,8 @@
 	--color-gray-300: #0e3957;
 	--color-text: theme('colors.white');
 	--color-blue: theme('colors.blue.600');
+	--color-success: theme('colors.green.600');
+	--color-danger: theme('colors.red.500');
 }
 
 @theme {
@@ -37,6 +43,8 @@
 	--color-gray-300: var(--color-gray-300);
 	--color-text: var(--color-text);
 	--color-blue: var(--color-blue);
+	--color-success: var(--color-success);
+	--color-danger: var(--color-danger);
 }
 
 @layer base {

resources/assets/css/app.css

@@ -2,6 +2,7 @@
 
 import 'preline/dist/dropdown';
 import '@wotz/livewire-sortablejs';
+import '~/toastify.js';
 
 document.addEventListener('livewire:initialized', () => {
 	window.addEventListener('refresh.preline.dropdown', () => {

resources/assets/js/app.js

@@ -0,0 +1,44 @@
+import Toastify from 'toastify-js';
+
+document.addEventListener('livewire:initialized', () => {
+	const tostifyCustomClose = globalThis.tostifyCustomClose = (el) => {
+		const parent = el.closest('.toastify');
+		const close = parent.querySelector('.toast-close');
+
+		close.click();
+	}
+
+	window.addEventListener('toast', (event) => {
+		const toastData = event.detail[0];
+
+		const toastMarkup = `
+			<div class="max-w-xs bg-${toastData.className || 'primary'} text-sm text-white rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-teal-label">
+				<div id="hs-toast-solid-color-red-label" class="flex p-4 gap-4">
+					${toastData.text}
+					<div class="ms-auto ${toastData.close ? '' : 'hidden'}">
+						<button onclick="tostifyCustomClose(this)" type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-lg cursor-pointer text-white hover:text-white hover:opacity-80 focus:outline-hidden focus:opacity-100" aria-label="Close">
+							<span class="sr-only">Close</span>
+							<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<path d="M18 6 6 18"></path>
+								<path d="m6 6 12 12"></path>
+							</svg>
+						</button>
+					</div>
+				</div>
+			</div>
+		`;
+
+		Toastify({
+			style: {},
+			text: toastMarkup,
+			gravity: toastData.gravity || 'top',
+			position: toastData.position || 'right',
+			//className: 'hs-toastify-on:opacity-100 opacity-0 fixed -top-10 end-10 z-90 transition-all duration-300 w-72 bg-white text-sm text-gray-700 border border-gray-200 rounded-xl shadow-lg [&>.toast-close]:hidden dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400',
+			stopOnFocus: true,
+			duration: toastData.duration || 3000,
+			close: toastData.close,
+			escapeMarkup: false,
+		}).showToast();
+	});
+});
+

resources/assets/js/toastify.js

@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Support\Toastify\Enums;
+
+enum ToastGravity: string
+{
+    case Bottom = 'bottom';
+    case Top = 'top';
+}