usernotnull / tall-toasts Goto Github PK

A Toast notification library for the Laravel TALL stack. You can push notifications from the backend or frontend to render customizable toasts with almost zero footprint on the published CSS/JS 🔥🚀

License: MIT License

JavaScript 15.65% PHP 63.50% Blade 20.84%

toast toast-notifications toasts notifications laravel laravel-package tailwindcss alpinejs livewire livewire-component

tall-toasts's Introduction

... and here's what you need to know about me!

Hey there 👋🏼! My name is John and I'm...

Nah, boring, let's try the fun way!

See if you can follow...

import SoftwareDeveloper from 'usernotnull';

/**
 * You don't need to code to understand this ;)
 * Just keep reading...
 */
class Bio extends SoftwareDeveloper {
  name     = 'John Fares';
  title    = 'Full Stack Developer | Senior';
  location = 'Lebanon | Remote Work';
}

/**
 * Easy isn't it? ^^
 */
class Skills extends SoftwareDeveloper {
  languages  = ['PHP', 'JavaScript/TypeScript'];
  stack      = ['TailwindCSS', 'AlpineJS', 'Laravel', 'Livewire'];
  databases  = ['MySQL', 'Redis'];
  os         = ['Windows', 'Linux'];
  tools      = ['PHPStorm', 'Adobe Suite'];
  misc       = ['GitHub Actions', 'Deployer', 'Digital Ocean', 'SEO'];
}

🕵️ GitHub Analytics

👀 Feast your eyes on the sexy cards below. Don't worry if you don't understand what they mean, they're good to look at too...

🚀 Owned Open-Source Repos

✨ Awesome!

If you reached this far, I must be really good at attention-grabbing :D

Here's how you can contact me:

tall-toasts's People

Contributors

Stargazers

Watchers

tall-toasts's Issues

Livewire v3 support

I have received requests for upgrading to Livewire V3.

This tall-toast library will be upgraded after summer and after the livewire release is out of beta and stable.
In the meantime, if anyone wishes to speed up the process, I'm open to PRs.

Happy coding! 👋🏼

Assertion that toast was called (with options?)

Description

Ok, so in my application, I'd like to be able to do something like $this->assertToast(success, "Thanks for joining!"); to ensure that the toasts are actually being sent.

Additional context

n/a

toast wont appear until there's refresh

i've configured this package and it's working fine. But if i goto other page (im using wire:navigate from livewire's 3rd version), toast wont appear until i hit refresh button. But if i delete wire:navigate it works just fine

toasts array is not cleaned

Description

toasts array is not cleaned when message is gone

Screenshots

Laravel 10 support

it would be nice to have support for Laravel 10

Unable to call component method. Public method [data] not found on component

Description

Getting the above error using the latest versions of Livewire and AlpineJS. The error disappears when I remove <livewire:toasts /> from my app.blade.php file.

To Reproduce

Install latest AlpineJS and Livewire
Install latest tall-toasts
add <livewire:toasts /> to top of <body> tag

Expected behavior

It should not fail.

Paddings are in main div

Description

Paddings are in main div

Expected behavior

Can you hide paddings in main div and add it when message appears only?
It blocked some buttons on pages.

Screenshots

Livewire blade component weird comportement

Description

Hello, I don't understand this bug, sometime (1/2) the toast livewire component have a strange comportment... The component render the same toast until infinite.. I precise that the session->get('toasts') only contains one item.

I'm sorry for my bad english..

To Reproduce

You can see my implementation in my public project :

master.blade.php : master layout where is put assets

default.blade.php : default layout where i put the livewire component

vendor.js : Alpine package implementation

webpack.mix.js : webpack mix configuration

LoginController:php : a simple controller

HasFlashToast : a little trait (change nothing) to customize my usage of your package

Expected behavior

Just render one toast could be cool 😭

Screenshots

My render (with the number of AJAX call increment)

Additional context

My composer.json packages

"require": {
    "php": "^8.0",
    "ext-gmp": "*",
    "ext-pdo": "*",
    "fruitcake/laravel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "laravel/framework": "^8.54",
    "laravel/octane": "^1.0",
    "laravel/tinker": "^2.5",
    "livewire/livewire": "^2.6",
    "spatie/laravel-activitylog": "^4.3",
    "spatie/laravel-permission": "^5.1",
    "usernotnull/tall-toasts": "^1.0"
},
"require-dev": {
    "barryvdh/laravel-debugbar": "^3.6",
    "barryvdh/laravel-ide-helper": "^2.10",
    "facade/ignition": "^2.5",
    "fakerphp/faker": "^1.9.1",
    "mockery/mockery": "^1.4.4",
    "nunomaduro/collision": "^5.10",
    "phpunit/phpunit": "^9.5.8",
    "roave/security-advisories": "dev-latest"
}

Toasts appear and disappear quick

Discussed in #270

^{Originally posted by SrPeterr October 7, 2022}
Hi!
Well I'm having this problem with toasts, they appear and disappear quick and with no style
This is my controller:

class BugsController extends Controller
{
    public function index() {

        if(Auth::check()) {
            $issues = GitHub::issues()->all('confidential', 'confidential');
            toast()->info('Notification from the backend...', 'The Title')->push();
            return view("bugs", ["issues" => $issues]);
        } else {
            return redirect('/');
        }
    	
    }
}

This is how its on my blade:

@livewireStyles
@toastScripts
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
    @livewireScripts
    <livewire:toasts />

And I have run npm run dev and php artisan view:clear

I'm completely lost, been trying all afternoon 😕

Add RTL support

Description

Add RTL support to the toast notification. Currently, the contnet.blade.php would only display messages in LTR.
This feature would allow other languages, such as Arabic and Persian, to display messages in a better format, if displayed in RTL.

Screenshots

This screenshot shows what the message would look like if RTL is enabled.

Screen.Recording.2022-05-19.at.6.28.10.AM.mov

Additional context

"->push()" not working on backend livewire component.

So after the Livewire 3.0 update, ->push() no longer works on backend livewire components.

->pushOnNextPage() works perfectly fine... even on the frontend using Toast.success('A toast without a title also works') works as well, but the only way ->push() works inside a livewire component is if I remove the use WireToast trait, then it acts similarly to ->pushOnNextPage().

Here's my setup, maybe I'm missing something. If there is any other page I need to share, please let me know:

app.js

import {
    Livewire,
    Alpine,
} from "../../vendor/livewire/livewire/dist/livewire.esm";
import ToastComponent from "../../vendor/usernotnull/tall-toasts/resources/js/tall-toasts";

Alpine.plugin(ToastComponent);

Livewire.start();

base.blade.php

<!DOCTYPE html>
<html lang="en" class="...">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>{{ config('app.name') }}</title>
    @toastScripts
    @vite(['resources/js/app.js', 'resources/css/app.css'])
    @livewireStyles
</head>

<body class="...">
    <livewire:toasts />

    <div>
        {{ $slot }}
    </div>

    @livewireScriptConfig
</body>

</html>

test-page-component.blade.php

<div>
    <button wire:click="testToast" class="button">asdf</button>
</div>

TestPageComponent.php

<?php

namespace ...;

use Illuminate\Contracts\View\View;
use Livewire\Component;
use Usernotnull\Toast\Concerns\WireToast;

class TestPageComponent extends Component
{
    use WireToast;

    /**
     * Return the Host Dashboard view
     *
     * @return View view
     */
    public function render(): View
    {
        return view('test-page-component');
    }

    public function testToast(): void
    {
        toast()->success('This is a test toast.')->push();
    }
}

JS Notification: no duration for danger

Hi,

'Danger' type notifications close directly after display.
While reading the source code I noticed that the parameters of the 'danger' method are not the same as for the others: the duration is missing.

// show notification from JS
Toast.danger('message', 'title');

// source code
...
window.Toast = {
  ...
  warning (message, title = '', duration = undefined) {
       this.component.add(this.make(message, title, 'warning', duration ?? this.component.defaultDuration));
  },
  // no duration
  danger (message, title = '') {
        // no defaultDuration
        this.component.add(this.make(message, title, 'danger'));
   }
}

Laravel11 support

Description

I was going to upgrade my app to laravel11, but couldn't do it because tall-toasts doesn't have laravel11 support

To Reproduce

Steps to reproduce the behavior:

Switch laravel/framework to ^11 in the composer.json
Run composer update
See error:

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires usernotnull/tall-toasts ^2.0 -> satisfiable by usernotnull/tall-toasts[v2.0.0, v2.0.1].
    - Conclusion: don't install laravel/framework v11.0.1 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.2 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.3 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.4 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.5 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.6 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.7 (conflict analysis result)
    - Conclusion: don't install laravel/framework v11.0.0 (conflict analysis result)
    - usernotnull/tall-toasts[v2.0.0, ..., v2.0.1] require illuminate/contracts ^8.15 || 9.0 - 9.34 || ^9.36 || ^10.0 -> satisfiable by illuminate/contracts[v8.15.0, ..., 8.x-dev, v9.0.0-beta.1, ..., 9.x-dev, v10.0.0, ..., 10.x-dev].
    - Only one of these can be installed: illuminate/contracts[v6.0.0, ..., 6.x-dev, v7.0.0, ..., 7.x-dev, v8.0.0, ..., 8.x-dev, v9.28.0, ..., 9.x-dev, v10.0.0, ..., 10.x-dev, v11.0.0, ..., 11.x-dev], laravel/framework[v11.0.0, ..., 11.x-dev]. laravel/framework replaces illuminate/contracts and thus cannot coexist with it.
    - Root composer.json requires laravel/framework ^11.0 -> satisfiable by laravel/framework[v11.0.0, ..., 11.x-dev].

Adding PHPDoc for Facade so ide-helper works

Description

I would like to add PHPDoc for Facade so that the ide helper works properly.

Screenshots

This is what I would like to do:

This is the ide helper without my code:

And this is the ide helper with the phpdoc added:

Additional context

In the end it doesn't change any logic, but it's improves the operation of the ide (at least phpstorm/idea) but I think also with vscode.

Error using Vite, doesnt build.

Description

Error: 'default' is not exported by vendor/usernotnull/tall-toasts/dist/js/tall-toasts.js, imported by resources/js/app.js

To Reproduce

setup Vite, preferrably using mix first, then migrate to vite.
npm run build

Expected behavior

It builds

Screenshots

Additional context

None

Toast is not defined!

Description

I am using TALL stack for my company's project.
tailwindcss: 3.1.0
alpinejs: 3.0.6
livewire: 2.5
laravel: 9.19

And after a little bit more work on this project, I wanted to use toast notification.
Yes, it is working fine on the backend side(But sometimes it went wrong. e.g. I wanted to show notification once the user logged in, but it is not working...). But I can not use Toast on the frontend side(livewire component).

Screenshots

Per notification duration

As it stands at the moment, the duration for when the notifications are scheduled to be removed is set globally in the config for all notifications.

While this works for most notification, it would be nice to be able to override the duration per notification.

I am happy to write a PR for this is it is wanted.

failed install this package

Description

when i am install from composer i got error about requirement details error :

[InvalidArgumentException]
Package usernotnull/tall-toasts at version has a PHP requirement incompatible with your PHP version, PHP extensions and
Composer version

my project fulfill the requirements :

PHP 8.0.0 (cli) (built: Nov 27 2020 12:26:22) ( NTS )
Laravel Framework 8.68.1
livewire/livewire : "^2.7",

unable to find livewire component toast

Hi,
I successfully installed the package and it runs on the local machine.
but it fails when I run on server using Cpanel

please assist

Getting the toast only after I refresh the page!

I followed the installation steps.
If I call toast()->info()->push() in my render method it shows right away, but when I call it in another Livewire method it doesn't show, and this is very weird but if I refresh the page all the toasts from previous session show up!

Laravel 9 support

Description

Currently tall-toasts does not support the latest version of Laravel 9 due to an illuminate/contracts version conflict.

To Reproduce

Install Laravel 9
Install tall-toasts

Additional context

usernotnull/tall-toasts v1.3.0 requires illuminate/contracts ^v8.61 -> satisfiable by illuminate/contracts[v8.61.0, ..., 8.x-dev].

Tall Toasts did not work in my production

Description

When I was pushing my code to my production server (Nginx, Laravel 8.70, PHP 8.0.12, Laravel Octane) I was getting an interesting 404 not found error. This had happened before and after I added octane by the way.

To Reproduce

I actually fixed this issue by moving the tall-toasts.js to /public/toast/tall-toasts.js

Expected behavior

The Laravel RouteFacade to actually load it in production. It worked fine in development.

Additional context

This is a similar issue that gets experienced in Livewire. I'd like to open a PR and add an artisan command called toasts:publish that would allow users to move the JavaScript to a /public/toast/tall-toasts.js file. We could then call this in the post-autoload-dump, for example, in composer.json if we wish so it could stay updated as we update our projects.

toast is not showed up when called from livewire mount()

Description

Toast wont show when called inside livewire mount(), i dont know is this a bug or an expected behavior.

To Reproduce

Add use WireToast
Place this line of code inside your livewire mount() : toast()->info('Notification from the backend...', 'The Title')->push();
Reload / call your component
Toast not show

Expected behavior

To see a toast

Screenshots

My livewire component

Showing the bug

Thank you !

usernotnull / tall-toasts Goto Github PK

tall-toasts's Introduction

... and here's what you need to know about me!

See if you can follow...

🕵️ GitHub Analytics

👀 Feast your eyes on the sexy cards below. Don't worry if you don't understand what they mean, they're good to look at too...

🚀 Owned Open-Source Repos

✨ Awesome!

tall-toasts's People

Contributors

Stargazers

Watchers

Forkers

tall-toasts's Issues

Description

Additional context

Description

Screenshots

Description

To Reproduce

Expected behavior

Description

Expected behavior

Screenshots

Description

To Reproduce

Expected behavior

Screenshots

Additional context

Discussed in #270

Description

Screenshots

Additional context

Description

To Reproduce

Description

Screenshots

Additional context

Description

To Reproduce

Expected behavior

Screenshots

Additional context

Description

Screenshots

Description

Description

To Reproduce

Additional context

Description

To Reproduce

Expected behavior

Additional context

Description

To Reproduce

Expected behavior

Screenshots

Recommend Projects

Recommend Topics

Recommend Org