README

A beautiful, Apple-inspired liquid glass notification system for PHP and Laravel applications. Built with modern web technologies and optimized for performance.

Features

🎨 Apple Design System - Consistent with Apple Human Interface Guidelines
✨ Liquid Glass Effect - Modern backdrop blur and transparency effects
🔊 Sound Effects - Subtle audio feedback using Web Audio API
📱 Responsive Design - Automatically adapts to mobile and desktop
🚀 High Performance - Optimized animations and efficient DOM manipulation
♿ Accessibility - Screen reader support and keyboard navigation
🌍 RTL Support - Right-to-left language support
🎯 Multiple Positions - 6 different positioning options
🎭 Theme Support - Auto, light, and dark themes
⚙️ Highly Configurable - Extensive customization options
🕐 Time Display - Real-time clock display on notifications
🎵 Audio Feedback - Different sound frequencies for each notification type
📊 Progress Tracking - Built-in progress indicators
🔧 Storage Drivers - Session and Array storage support

Requirements

PHP 8.2 or higher
Laravel 12.0 or higher (for Laravel integration)

Installation

You can install the package via composer:

composer require rzlco666/notifikasi

Laravel Integration

The package will automatically register its service provider and facade.

Publish the configuration file:

php artisan vendor:publish --provider="Rzlco\NotifikasiServiceProvider" --tag="config"

Optionally, you can publish the views:

php artisan vendor:publish --provider="Rzlco\NotifikasiServiceProvider" --tag="views"

Usage

PHP Native

use Rzlco\Notifikasi;
use Rzlco\Storage\SessionStorage;

// Initialize with session storage
$notifikasi = new Notifikasi(new SessionStorage());

// Add notifications
$notifikasi->success('Success!', 'Your data has been saved successfully.');
$notifikasi->error('Error!', 'Something went wrong.');
$notifikasi->warning('Warning!', 'Please check your input.');
$notifikasi->info('Info!', 'Here is some useful information.');

// Render notifications
echo $notifikasi->render();

Laravel

Using Facade

use Rzlco\Facades\Notifikasi;

// Add notifications
Notifikasi::success('Success!', 'Your data has been saved successfully.');
Notifikasi::error('Error!', 'Something went wrong.');
Notifikasi::warning('Warning!', 'Please check your input.');
Notifikasi::info('Info!', 'Here is some useful information.');

Using Dependency Injection

use Rzlco\Contracts\NotifikasiInterface;

class UserController extends Controller
{
    public function store(Request $request, NotifikasiInterface $notifikasi)
    {
        // Your logic here
        
        $notifikasi->success('User Created!', 'The user has been created successfully.');
        
        return redirect()->back();
    }
}

In Blade Templates

{{-- Include the notification component --}}
<x-notifikasi />

{{-- Or use the directive --}}
@notifikasi

{{-- With custom options --}}
<x-notifikasi 
    position="top-left" 
    theme="dark" 
    :sound="false" 
    :duration="3000" 
/>

Advanced Usage

Custom Options

$notifikasi->success('Success!', [
    'duration' => 3000,
    'closable' => false,
    'theme' => 'dark',
    'position' => 'bottom-right',
    'sound' => true,
    'show_time' => true,
    'time_format' => '24',
    'background_opacity' => 0.9,
    'background_blur' => 30,
    'close_button_style' => 'circle'
]);

Configuration

$notifikasi->setPosition('top-left')
          ->setTheme('dark')
          ->setDuration(3000)
          ->setSound(false)
          ->setMaxNotifications(10);

Custom Storage

use Rzlco\Storage\ArrayStorage;

$notifikasi = new Notifikasi(new ArrayStorage());

Configuration

Laravel Configuration

The configuration file config/notifikasi.php allows you to customize:

return [
    'default' => 'session',
    
    'storages' => [
        'session' => [
            'driver' => 'session',
            'key' => 'rzlco_notifications',
        ],
        'array' => [
            'driver' => 'array',
        ],
    ],
    
    'defaults' => [
        'position' => 'top-right',
        'duration' => 5000,
        'theme' => 'auto',
        'sound' => true,
        'closable' => true,
        'pause_on_hover' => true,
        'rtl' => false,
        'max_notifications' => 5,
        'animation_duration' => 300,
        'blur_strength' => 20,
        'border_radius' => 16,
        'backdrop_opacity' => 0.8,
        'show_time' => true,
        'time_format' => '12',
        'background_opacity' => 0.85,
        'background_blur' => 25,
        'close_button_style' => 'circle',
    ],
    
    // Apple Design System Colors
    'colors' => [
        'success' => [
            'light' => '#34C759',
            'dark' => '#30D158',
        ],
        'error' => [
            'light' => '#FF3B30',
            'dark' => '#FF453A',
        ],
        'warning' => [
            'light' => '#FF9500',
            'dark' => '#FF9F0A',
        ],
        'info' => [
            'light' => '#007AFF',
            'dark' => '#0A84FF',
        ],
        'background' => [
            'light' => 'rgba(255, 255, 255, 0.8)',
            'dark' => 'rgba(28, 28, 30, 0.8)',
        ],
        'text' => [
            'light' => '#1D1D1F',
            'dark' => '#F2F2F7',
        ],
        'border' => [
            'light' => 'rgba(0, 0, 0, 0.1)',
            'dark' => 'rgba(255, 255, 255, 0.1)',
        ],
    ],
    
    // Sound Configuration
    'sound' => [
        'enabled' => true,
        'volume' => 0.3,
        'frequencies' => [
            'success' => [800, 1000],
            'error' => [400, 300],
            'warning' => [600, 800],
            'info' => [500, 700],
        ],
    ],
    
    // Performance Settings
    'performance' => [
        'debounce_delay' => 100,
        'animation_fps' => 60,
        'lazy_load' => true,
        'preload_assets' => false,
    ],
    
    // Accessibility Settings
    'accessibility' => [
        'reduce_motion' => 'auto',
        'high_contrast' => false,
        'screen_reader' => true,
        'focus_management' => true,
    ],
];

Available Positions

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right

Available Themes

auto - Automatically detects system preference
light - Light theme
dark - Dark theme

Time Format Options

12 - 12-hour format (e.g., "3:45 PM")
24 - 24-hour format (e.g., "15:45")

JavaScript API

The package includes a JavaScript API for dynamic notifications:

// Initialize
const notifikasi = new RzlcoNotifikasi({
    position: 'top-right',
    theme: 'auto',
    sound: true,
    duration: 5000,
    showTime: true,
    timeFormat: '12'
});

// Show notifications
notifikasi.success('Success!', 'Your operation completed successfully.');
notifikasi.error('Error!', 'Something went wrong.');
notifikasi.warning('Warning!', 'Please be careful.');
notifikasi.info('Info!', 'Here is some useful information.');

// Clear notifications
notifikasi.clear();
notifikasi.clearAll();

// Update settings
notifikasi.setPosition('bottom-right');
notifikasi.setTheme('dark');
notifikasi.setDuration(3000);

Styling

The package includes Apple-inspired CSS with liquid glass effects:

/* Custom CSS variables */
:root {
    --rzlco-notifikasi-blur: 20px;
    --rzlco-notifikasi-radius: 16px;
    --rzlco-notifikasi-backdrop-opacity: 0.8;
    --rzlco-notifikasi-animation-duration: 300ms;
    --rzlco-notifikasi-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Customize colors */
.rzlco-notifikasi-success {
    --current-color: #34C759;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    :root {
        --rzlco-notifikasi-bg: rgba(28, 28, 30, 0.8);
        --rzlco-notifikasi-text: #F2F2F7;
    }
}

Testing

Run the tests with:

composer test

Run static analysis:

composer phpstan

Run code style checks:

composer phpcs

Fix code style automatically:

composer phpcbf

Performance

The package is optimized for performance:

Efficient DOM manipulation - Minimal DOM updates
CSS transforms - Hardware-accelerated animations
Debounced operations - Prevents excessive updates
Lazy loading - Assets loaded only when needed
Memory management - Automatic cleanup of old notifications
RequestAnimationFrame - Smooth animations
Web Audio API - Efficient sound generation

Browser Support

Chrome 58+
Firefox 53+
Safari 10+
Edge 79+

Accessibility

The package includes comprehensive accessibility features:

Screen reader support - ARIA labels and live regions
Keyboard navigation - Full keyboard support
Reduced motion - Respects user preferences
High contrast - Compatible with high contrast mode
Focus management - Proper focus handling
RTL support - Right-to-left language support

Security

The package handles user input safely:

XSS protection - All content is properly escaped
Content Security Policy - Compatible with strict CSP
No inline scripts - All JavaScript is external
Session security - Secure session handling

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Roadmap

Version 1.x

Basic notification system
Apple liquid glass design
Laravel integration
Multiple storage drivers
Comprehensive testing
Time display feature
Audio feedback system
RTL support
Accessibility features
Performance optimizations

Version 2.x (Planned)

Database storage driver
Queue integration
Email notifications
Push notifications
Advanced theming system
Plugin system
React/Vue components
TypeScript definitions
Progress indicators
Custom notification types

Version 3.x (Future)

Real-time notifications
WebSocket support
Advanced analytics
A/B testing framework
Multi-language support
Advanced animations
Enterprise features
Mobile app integration

Support

If you discover any issues or have questions, please:

Check the documentation
Search existing issues
Create a new issue

For commercial support, please contact support@rzlco.com.

Acknowledgments

Inspired by Apple's Human Interface Guidelines
Built with modern web standards
Optimized for performance and accessibility
Designed for developer experience
Liquid glass effect implementation
Web Audio API integration

Made with ❤️ by Rzlco666

rzlco666 / notifikasi

Maintainers

Details

README

Features

Requirements

Installation

Laravel Integration

Usage

PHP Native

Laravel

Using Facade

Using Dependency Injection

In Blade Templates

Advanced Usage

Custom Options

Configuration

Custom Storage

Configuration

Laravel Configuration

Available Positions

Available Themes

Time Format Options

JavaScript API

Styling

Testing

Performance

Browser Support

Accessibility

Security

Contributing

Security Vulnerabilities

Credits

License

Changelog

Roadmap

Version 1.x

Version 2.x (Planned)

Version 3.x (Future)

Support

Acknowledgments