README

Send notifications to Eloquent Users and/or Guests.

Toasts are meant to be global and displayed in a corner of an app or web page over any other elements.

Callouts are inline notifications printed wherever needed on specific pages (or groups).

Toasts	Callouts

Prerequisites

Prepare db for default Laravel Notifications if not enabled yet:

php artisan make:notifications-table && php artisan migrate

Installation

composer require jmitech/notifications:dev-main

Publish notifications migrations

php artisan vendor:publish --tag=jmitech-notifications-migrations
php artisan migrate

Add trait HasToasts and HasCallouts to Eloquent User.php Model e.g.:

use Illuminate\Notifications\Notifiable;
use Jmitech\Laravel\Notifications\Traits\HasToasts;
use Jmitech\Laravel\Notifications\Traits\HasCallouts;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable {

    use Notifiable, HasToasts, HasCallouts;

    // ...

Source and import these files e.g. in resources/css/app.css:

/* Notifications */
@import "../../vendor/jmitech/notifications/resources/css/notifications.css";
@source '../../vendor/jmitech/notifications/config/notifications.php';
@source '../../vendor/jmitech/notifications/resources/views/*.blade.php';

Usage

Toast

Add the global toasts livewire component in a layout e.g. app.blade.php, inside <body>, ideally at the top:

<livewire:toasts />

Create a toast from component/controller:

use Jmitech\Laravel\Notifications\Facades\Toast;

// Send a toast to the authenticated/guest user
Toast::send('This is a toast notification.');

// Get collection of toast notifications for the user:
Toast::getAll();

Callouts

Add the callouts livewire component in a view e.g. dashboard.blade.php and use the callouts helper to set notifications collection.

<div class="max-w-lg xl:max-w-2xl">
	<livewire:callouts :notifications="callouts('dashboard')" group="dashboard" />
</div>

Create a callout from component/controller:

use Jmitech\Laravel\Notifications\Facades\Callout;

Callout::success('This is a test callout notification.')->group('dashboard')->send();

Quick demo

This demo uses the livewire:callouts element added to a dashboard view.

use Jmitech\Laravel\Notifications\Facades\Toast;
use Jmitech\Laravel\Notifications\Facades\Callout;

Route::get('test', function () {

    toast('Ho Ho!');

    Toast::success('Hey Hey')->send();

    Callout::success('Hello World!')->group('dashboard')->send();

    return view('dashboard');
});

Test toasts and callout demo

Documentation coming soon...

Customize (optional)

Extending Toast class

In a service container:

use App\Models\CustomToast;

$this->app->bind('toast', function ($app) {
	return new CustomToast();
});

Create custom model file app/Models/CustomToast.php:

<?php
namespace App\Models;

use Jmitech\Laravel\Notifications\Toast;

class CustomToast extends Toast
{
	public function set_purple(): self
	{
		// This method uses "set_" magic to catch purple calls
		// e.g. Toast::purple(message: 'this message is purple', title: 'Purple Title')->button()
		return $this->variant('purple')->icon('rocket-launch')->colorful();
	}

	public function urgent(string $message, ?string $action = null, ?string $action_text = null, bool $ignore_btn = true): self
	{
		$this->colorfulError(icon: 'shield-exclamation')
			->title($message) // use "title" instead of "message" to make text bold
			->sticky();

		if ($action and $action_text)
			$this->button($action_text, $action, 'danger');

		if ($ignore_btn)
			$this->button('Ignore', '#' . __('Ignore'), 'ghost');

		return $this;
	}

	public function happybirthday(string $persons_name): self
	{
		return $this->set(
			preset: 'birthday', // preset is an alias of variant
			title: 'Happy Birthday!',
			message: $persons_name
		)->sticky();
	}
}

Publish notifications config

 php artisan vendor:publish --tag=jmitech-notifications-config

Add new presets in config/notifications.php e.g.:

//...
'presets' => [
	'purple' => [
		'bg_class' => 'bg-radial-[at_50%_75%] from-purple-100 via-purple-100 to-purple-200 to-80% dark:from-purple-900 dark:via-purple-700 dark:to-purple-900',
		'icon' => [
			'name' => 'rocket-launch',
			'class' => 'text-purple-500 dark:text-purple-200',
			'bg_class' => 'bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
		],
	],
	'birthday' => [
		'always_colorful' => true,
		'bg_class' => 'bg-gradient-to-r from-pink-400 via-yellow-300 via-green-300 via-blue-400 to-purple-400 border-4 border-yellow-100 shadow-xl text-shadow-lg text-white dark:text-gray-900',
		'icon' => [
			'name' => 'cake',
			'class' => 'text-pink-500 dark:text-pink-600 drop-shadow-[0_2px_8px_rgba(255,255,255,0.95)]',
			'bg_class' => 'bg-white ring-4 ring-yellow-100',
		],
	],
	//...

And finally use it like so:

use Jmitech\Laravel\Notifications\Facades\Toast;

Toast::purple('This is a purple toast.')->send();

Toast::urgent('Something bad has happened!', 'http://localhost:8000/review-logs-or-something', 'Review logs')->send();

Toast::happybirthday('Beautiful User')->send();

Customized toasts

Tests

php artisan vendor:publish --tag=jmitech-notifications-tests

php artisan test

Dev Notes

Demo

Open this file to see how the package is used : vendor/jmitech/notifications/src/Livewire/DemoComponent.php

Or browse a toast notifcation demo page at http://localhost:8000/notifications/demo. Route is named notifications.demo and only activated when environment is local.

This demo also uses #[Layout('components.layouts.guest')] when page is viewed as guest, so have one file ready with <livewire:toasts /> in it to use it when unauthenticated.

Publish files

Configuration file

Tweak Styling & Settings:

php artisan vendor:publish --tag=jmitech-notifications-config

Views

php artisan vendor:publish --tag=jmitech-notifications-views

CSS

php artisan vendor:publish --tag=jmitech-notifications-css

N.B.: To fully integrate. After publishing views, css and configuration; app.css can be reduced to only these 2 lines in app.css: (but consider the workflow for when this package will modify these views,css,configurations,etc in the future).

/* Notifications */
@import "notifications.css";
@source '../../config/notifications.php';

Notes

Toasts uses free Flowbite components and styling.
Callouts uses free Flux components and styling.
only Heroicons is supported at the moment.

jmitech / notifications

Maintainers

Details