add bootstrap and tailwindcss theme templates for Laravel

src/Laravel/FlasherServiceProvider.php

@@ -66,6 +66,7 @@ final class FlasherServiceProvider extends PluginServiceProvider
 
         $this->registerCommands();
         $this->loadTranslationsFrom(__DIR__.'/Translation/lang', 'flasher');
+        $this->loadViewsFrom(__DIR__.'/Resources/views', 'flasher');
         $this->registerMiddlewares();
         $this->callAfterResolving('blade.compiler', $this->registerBladeDirectives(...));
         $this->registerLivewire();

src/Laravel/Resources/views/bootstrap.blade.php

@@ -0,0 +1,34 @@
+@php
+    use Flasher\Prime\Notification\Envelope;
+
+    /** @var Envelope $envelope */
+
+    $type = $envelope->getType();
+    $message = $envelope->getMessage();
+
+    $alertClass = match($type) {
+        'success' => 'alert-success',
+        'error' => 'alert-danger',
+        'warning' => 'alert-warning',
+        default => 'alert-info',
+    };
+
+    $progressBgColor = match($type) {
+        'success' => '#155724',
+        'error' => '#721c24',
+        'warning' => '#856404',
+        default => '#0c5460',
+    };
+@endphp
+
+<div style="margin-top: 0.5rem;cursor: pointer;">
+    <div class="alert {{ $alertClass }} alert-dismissible fade in show" role="alert" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border: unset;border-left: 6px solid {{ $progressBgColor }}">
+        {{ $message }}
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="this.parentElement.remove()">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="d-flex" style="height: .125rem;margin-top: -1rem;">
+        <span class="flasher-progress" style="background-color: {{ $progressBgColor }}"></span>
+    </div>
+</div>

src/Laravel/Resources/views/tailwindcss.blade.php

@@ -0,0 +1,66 @@
+@php
+    use Flasher\Prime\Notification\Envelope;
+
+    /** @var Envelope $envelope */
+
+    $type = $envelope->getType();
+    $message = $envelope->getMessage();
+
+    $config = match($type) {
+        'success' => [
+            'title' => 'Success',
+            'text_color' => 'text-green-600',
+            'ring_color' => 'ring-green-300',
+            'background_color' => 'bg-green-600',
+            'progress_background_color' => 'bg-green-100',
+            'border_color' => 'border-green-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="check w-7 h-7"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
+        ],
+        'error' => [
+            'title' => 'Error',
+            'text_color' => 'text-red-600',
+            'ring_color' => 'ring-red-300',
+            'background_color' => 'bg-red-600',
+            'progress_background_color' => 'bg-red-100',
+            'border_color' => 'border-red-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="x w-7 h-7"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>',
+        ],
+        'warning' => [
+            'title' => 'Warning',
+            'text_color' => 'text-yellow-600',
+            'ring_color' => 'ring-yellow-300',
+            'background_color' => 'bg-yellow-600',
+            'progress_background_color' => 'bg-yellow-100',
+            'border_color' => 'border-yellow-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="exclamation w-7 h-7"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+        ],
+        default => [
+            'title' => 'Info',
+            'text_color' => 'text-blue-600',
+            'ring_color' => 'ring-blue-300',
+            'background_color' => 'bg-blue-600',
+            'progress_background_color' => 'bg-blue-100',
+            'border_color' => 'border-blue-600',
+            'icon' => '<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+        ],
+    };
+@endphp
+
+<div class="bg-white shadow-inner border-l-4 mt-2 cursor-pointer {{ $config['border_color'] }}">
+    <div class="flex items-center px-2 py-3 rounded-lg shadow-lg overflow-hidden">
+        <div class="inline-flex items-center {{ $config['background_color'] }} p-1 text-white text-sm rounded-full flex-shrink-0">
+            {!! $config['icon'] !!}
+        </div>
+        <div class="ml-4 w-0 flex-1">
+            <p class="text-base leading-5 font-medium capitalize {{ $config['text_color'] }}">
+                {{ $config['title'] }}
+            </p>
+            <p class="mt-1 text-sm leading-5 text-gray-500">
+                {{ $message }}
+            </p>
+        </div>
+    </div>
+    <div class="h-0.5 flex {{ $config['progress_background_color'] }}">
+        <span class="flasher-progress {{ $config['background_color'] }}"></span>
+    </div>
+</div>

src/Laravel/Resources/views/tailwindcss_bg.blade.php

@@ -0,0 +1,62 @@
+@php
+    use Flasher\Prime\Notification\Envelope;
+
+    /** @var Envelope $envelope */
+
+    $type = $envelope->getType();
+    $message = $envelope->getMessage();
+
+    $config = match($type) {
+        'success' => [
+            'title' => 'Success',
+            'text_color' => 'text-green-700',
+            'background_color' => 'bg-green-50',
+            'progress_background_color' => 'bg-green-200',
+            'border_color' => 'border-green-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="check w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
+        ],
+        'error' => [
+            'title' => 'Error',
+            'text_color' => 'text-red-700',
+            'background_color' => 'bg-red-50',
+            'progress_background_color' => 'bg-red-200',
+            'border_color' => 'border-red-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="x w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>',
+        ],
+        'warning' => [
+            'title' => 'Warning',
+            'text_color' => 'text-yellow-700',
+            'background_color' => 'bg-yellow-50',
+            'progress_background_color' => 'bg-yellow-200',
+            'border_color' => 'border-yellow-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="exclamation w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+        ],
+        default => [
+            'title' => 'Info',
+            'text_color' => 'text-blue-700',
+            'background_color' => 'bg-blue-50',
+            'progress_background_color' => 'bg-blue-200',
+            'border_color' => 'border-blue-600',
+            'icon' => '<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+        ],
+    };
+@endphp
+
+<div class="bg-white shadow-lg border-l-4 mt-2 cursor-pointer {{ $config['background_color'] }} {{ $config['border_color'] }}">
+    <div class="flex items-center px-2 py-3 rounded-lg shadow-lg overflow-hidden">
+        <div class="inline-flex items-center p-2 text-white text-sm rounded-full {{ $config['text_color'] }} flex-shrink-0">
+            {!! $config['icon'] !!}
+        </div>
+        <div class="ml-4 w-0 flex-1">
+            <p class="text-base leading-5 font-medium capitalize {{ $config['text_color'] }}">
+                {{ $config['title'] }}
+            </p>
+            <p class="mt-1 text-sm leading-5 text-gray-500">
+                {{ $message }}
+            </p>
+        </div>
+    </div>
+    <div class="h-0.5 flex {{ $config['background_color'] }}">
+        <span class="flasher-progress {{ $config['progress_background_color'] }}"></span>
+    </div>
+</div>

src/Laravel/Resources/views/tailwindcss_r.blade.php

@@ -0,0 +1,66 @@
+@php
+    use Flasher\Prime\Notification\Envelope;
+
+    /** @var Envelope $envelope */
+
+    $type = $envelope->getType();
+    $message = $envelope->getMessage();
+
+    $config = match($type) {
+        'success' => [
+            'title' => 'Success',
+            'text_color' => 'text-green-600',
+            'ring_color' => 'ring-green-300',
+            'background_color' => 'bg-green-600',
+            'progress_background_color' => 'bg-green-100',
+            'border_color' => 'border-green-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="check w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',
+        ],
+        'error' => [
+            'title' => 'Error',
+            'text_color' => 'text-red-600',
+            'ring_color' => 'ring-red-300',
+            'background_color' => 'bg-red-600',
+            'progress_background_color' => 'bg-red-100',
+            'border_color' => 'border-red-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="x w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>',
+        ],
+        'warning' => [
+            'title' => 'Warning',
+            'text_color' => 'text-yellow-600',
+            'ring_color' => 'ring-yellow-300',
+            'background_color' => 'bg-yellow-600',
+            'progress_background_color' => 'bg-yellow-100',
+            'border_color' => 'border-yellow-600',
+            'icon' => '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="exclamation w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>',
+        ],
+        default => [
+            'title' => 'Info',
+            'text_color' => 'text-blue-600',
+            'ring_color' => 'ring-blue-300',
+            'background_color' => 'bg-blue-600',
+            'progress_background_color' => 'bg-blue-100',
+            'border_color' => 'border-blue-600',
+            'icon' => '<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+        ],
+    };
+@endphp
+
+<div class="bg-white shadow-inner border-l-4 mt-2 cursor-pointer {{ $config['border_color'] }}">
+    <div class="flex items-center px-2 py-3 rounded-lg shadow-lg overflow-hidden">
+        <div class="inline-flex items-center {{ $config['text_color'] }} p-1 text-xl rounded-full flex-shrink-0">
+            {!! $config['icon'] !!}
+        </div>
+        <div class="ml-4 w-0 flex-1">
+            <p class="text-base leading-5 font-medium capitalize {{ $config['text_color'] }}">
+                {{ $config['title'] }}
+            </p>
+            <p class="mt-1 text-sm leading-5 text-gray-500">
+                {{ $message }}
+            </p>
+        </div>
+    </div>
+    <div class="h-0.5 flex {{ $config['progress_background_color'] }}">
+        <span class="flasher-progress {{ $config['background_color'] }}"></span>
+    </div>
+</div>

tests/Laravel/Template/ThemeTemplatesTest.php

@@ -0,0 +1,239 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Flasher\Tests\Laravel\Template;
+
+use Flasher\Prime\Notification\Envelope;
+use Flasher\Prime\Notification\Notification;
+use Flasher\Tests\Laravel\TestCase;
+use Illuminate\Support\Facades\Blade;
+
+final class ThemeTemplatesTest extends TestCase
+{
+    private function createEnvelope(string $type, string $message): Envelope
+    {
+        $notification = new Notification();
+        $notification->setType($type);
+        $notification->setMessage($message);
+
+        return new Envelope($notification);
+    }
+
+    public function testBootstrapTemplateRendersSuccessNotification(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Success message');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('alert-success', $html);
+        $this->assertStringContainsString('Success message', $html);
+        $this->assertStringContainsString('#155724', $html);
+    }
+
+    public function testBootstrapTemplateRendersErrorNotification(): void
+    {
+        $envelope = $this->createEnvelope('error', 'Error message');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('alert-danger', $html);
+        $this->assertStringContainsString('Error message', $html);
+        $this->assertStringContainsString('#721c24', $html);
+    }
+
+    public function testBootstrapTemplateRendersWarningNotification(): void
+    {
+        $envelope = $this->createEnvelope('warning', 'Warning message');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('alert-warning', $html);
+        $this->assertStringContainsString('Warning message', $html);
+        $this->assertStringContainsString('#856404', $html);
+    }
+
+    public function testBootstrapTemplateRendersInfoNotification(): void
+    {
+        $envelope = $this->createEnvelope('info', 'Info message');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('alert-info', $html);
+        $this->assertStringContainsString('Info message', $html);
+        $this->assertStringContainsString('#0c5460', $html);
+    }
+
+    public function testTailwindcssTemplateRendersSuccessNotification(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Success message');
+
+        $html = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-green-600', $html);
+        $this->assertStringContainsString('bg-green-600', $html);
+        $this->assertStringContainsString('border-green-600', $html);
+        $this->assertStringContainsString('Success message', $html);
+        $this->assertStringContainsString('Success', $html);
+    }
+
+    public function testTailwindcssTemplateRendersErrorNotification(): void
+    {
+        $envelope = $this->createEnvelope('error', 'Error message');
+
+        $html = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-red-600', $html);
+        $this->assertStringContainsString('bg-red-600', $html);
+        $this->assertStringContainsString('border-red-600', $html);
+        $this->assertStringContainsString('Error message', $html);
+    }
+
+    public function testTailwindcssTemplateRendersWarningNotification(): void
+    {
+        $envelope = $this->createEnvelope('warning', 'Warning message');
+
+        $html = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-yellow-600', $html);
+        $this->assertStringContainsString('bg-yellow-600', $html);
+        $this->assertStringContainsString('border-yellow-600', $html);
+        $this->assertStringContainsString('Warning message', $html);
+    }
+
+    public function testTailwindcssTemplateRendersInfoNotification(): void
+    {
+        $envelope = $this->createEnvelope('info', 'Info message');
+
+        $html = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-blue-600', $html);
+        $this->assertStringContainsString('bg-blue-600', $html);
+        $this->assertStringContainsString('border-blue-600', $html);
+        $this->assertStringContainsString('Info message', $html);
+    }
+
+    public function testTailwindcssBgTemplateRendersSuccessNotification(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Success message');
+
+        $html = Blade::render('flasher::tailwindcss_bg', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-green-700', $html);
+        $this->assertStringContainsString('bg-green-50', $html);
+        $this->assertStringContainsString('border-green-600', $html);
+        $this->assertStringContainsString('Success message', $html);
+    }
+
+    public function testTailwindcssBgTemplateRendersErrorNotification(): void
+    {
+        $envelope = $this->createEnvelope('error', 'Error message');
+
+        $html = Blade::render('flasher::tailwindcss_bg', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-red-700', $html);
+        $this->assertStringContainsString('bg-red-50', $html);
+        $this->assertStringContainsString('border-red-600', $html);
+        $this->assertStringContainsString('Error message', $html);
+    }
+
+    public function testTailwindcssRTemplateRendersSuccessNotification(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Success message');
+
+        $html = Blade::render('flasher::tailwindcss_r', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-green-600', $html);
+        $this->assertStringContainsString('bg-green-600', $html);
+        $this->assertStringContainsString('border-green-600', $html);
+        $this->assertStringContainsString('Success message', $html);
+    }
+
+    public function testTailwindcssRTemplateRendersErrorNotification(): void
+    {
+        $envelope = $this->createEnvelope('error', 'Error message');
+
+        $html = Blade::render('flasher::tailwindcss_r', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('text-red-600', $html);
+        $this->assertStringContainsString('bg-red-600', $html);
+        $this->assertStringContainsString('border-red-600', $html);
+        $this->assertStringContainsString('Error message', $html);
+    }
+
+    public function testBootstrapTemplateContainsCloseButton(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Test');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('data-dismiss="alert"', $html);
+        $this->assertStringContainsString('&times;', $html);
+    }
+
+    public function testBootstrapTemplateContainsProgressBar(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Test');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('flasher-progress', $html);
+    }
+
+    public function testTailwindcssTemplatesContainProgressBar(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Test');
+
+        $html1 = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+        $html2 = Blade::render('flasher::tailwindcss_bg', ['envelope' => $envelope]);
+        $html3 = Blade::render('flasher::tailwindcss_r', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('flasher-progress', $html1);
+        $this->assertStringContainsString('flasher-progress', $html2);
+        $this->assertStringContainsString('flasher-progress', $html3);
+    }
+
+    public function testTemplatesContainIcons(): void
+    {
+        $envelope = $this->createEnvelope('success', 'Test');
+
+        $html1 = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+        $html2 = Blade::render('flasher::tailwindcss_bg', ['envelope' => $envelope]);
+        $html3 = Blade::render('flasher::tailwindcss_r', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('<svg', $html1);
+        $this->assertStringContainsString('<svg', $html2);
+        $this->assertStringContainsString('<svg', $html3);
+    }
+
+    public function testUnknownTypeDefaultsToInfo(): void
+    {
+        $envelope = $this->createEnvelope('custom', 'Unknown type');
+
+        $htmlBootstrap = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+        $htmlTailwind = Blade::render('flasher::tailwindcss', ['envelope' => $envelope]);
+
+        $this->assertStringContainsString('alert-info', $htmlBootstrap);
+        $this->assertStringContainsString('#0c5460', $htmlBootstrap);
+        $this->assertStringContainsString('text-blue-600', $htmlTailwind);
+        $this->assertStringContainsString('bg-blue-600', $htmlTailwind);
+    }
+
+    public function testTemplatesEscapeHtmlInMessage(): void
+    {
+        $envelope = $this->createEnvelope('success', '<script>alert("xss")</script>');
+
+        $html = Blade::render('flasher::bootstrap', ['envelope' => $envelope]);
+
+        $this->assertStringNotContainsString('<script>', $html);
+        $this->assertStringContainsString('&lt;script&gt;', $html);
+    }
+
+    public function testAllTemplatesExist(): void
+    {
+        $this->assertTrue(view()->exists('flasher::bootstrap'));
+        $this->assertTrue(view()->exists('flasher::tailwindcss'));
+        $this->assertTrue(view()->exists('flasher::tailwindcss_bg'));
+        $this->assertTrue(view()->exists('flasher::tailwindcss_r'));
+    }
+}