Merge pull request #23 from tallstackui/1.13.0

1.13.0
tallstackui · Jan 23, 2024 · 64579da · 64579da
2 parents 63c4753 + a89797f
commit 64579da
Show file tree

Hide file tree

Showing 17 changed files with 660 additions and 57 deletions.
diff --git a/app/Console/Commands/DeleteLivewireTemporaryUpload.php b/app/Console/Commands/DeleteLivewireTemporaryUpload.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Storage;
+
+class DeleteLivewireTemporaryUpload extends Command
+{
+    protected $signature = 'livewire:delete-temporary-upload';
+
+    protected $description = 'Delete the temporary upload folder of Livewire';
+
+    public function handle(): void
+    {
+        Storage::deleteDirectory('livewire-tmp');
+
+        if (app()->isProduction()) {
+            return;
+        }
+
+        $this->components->info('The temporary upload folder of Livewire has been deleted.');
+    }
+}
diff --git a/app/Console/Kernel.php b/app/Console/Kernel.php
@@ -2,13 +2,19 @@
 
 namespace App\Console;
 
+use App\Console\Commands\DeleteLivewireTemporaryUpload;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 
 class Kernel extends ConsoleKernel
 {
     protected function schedule(Schedule $schedule): void
     {
-        // $schedule->command('inspire')->hourly();
+        $schedule->command(DeleteLivewireTemporaryUpload::class)->hourly();
+    }
+
+    protected function commands(): void
+    {
+        $this->load(__DIR__.'/Commands');
     }
 }
diff --git a/app/Enums/Example.php b/app/Enums/Example.php
@@ -13,6 +13,7 @@
 use App\Enums\Examples\Form\Tag;
 use App\Enums\Examples\Form\Textarea;
 use App\Enums\Examples\Form\Toggle;
+use App\Enums\Examples\Form\Upload;
 use App\Enums\Examples\Form\WithoutLivewire;
 use App\Enums\Examples\Others\Alpine;
 use App\Enums\Examples\Others\Configuration;
@@ -41,6 +42,7 @@
 use App\Enums\Examples\Ui\Link;
 use App\Enums\Examples\Ui\Loading;
 use App\Enums\Examples\Ui\Modal;
+use App\Enums\Examples\Ui\Reaction;
 use App\Enums\Examples\Ui\Select;
 use App\Enums\Examples\Ui\Slide;
 use App\Enums\Examples\Ui\Tab;
@@ -82,6 +84,7 @@ enum Example: string
     case Pin = Pin::class;
     case Radio = Radio::class;
     case Range = Range::class;
+    case Reaction = Reaction::class;
     case Select = Select::class;
     case Slide = Slide::class;
     case SoftPersonalization = SoftPersonalization::class;
@@ -95,6 +98,7 @@ enum Example: string
     case Translation = Translation::class;
     case Troubleshooting = Troubleshooting::class;
     case Updates = Updates::class;
+    case Upload = Upload::class;
     case Welcome = Welcome::class;
     case WithoutLivewire = WithoutLivewire::class;
 

diff --git a/app/Enums/Examples/Form/Upload.php b/app/Enums/Examples/Form/Upload.php
@@ -0,0 +1,148 @@
+<?php
+
+namespace App\Enums\Examples\Form;
+
+class Upload
+{
+    public const BASIC = <<<'HTML'
+    <x-upload />
+    HTML;
+
+    public const LABEL_HINT_TIP = <<<'HTML'
+    <x-upload label="Screenshot"
+              hint="We need to analyze your screenshot"
+              tip="Drag and drop your screenshot here" />
+    HTML;
+
+    public const DELETE = <<<'HTML'
+    <!-- The Livewire component should have the "deleteUpload" method -->
+    
+    <x-upload delete />
+
+    <!-- Or you can specify a different method name -->
+
+    <x-upload delete delete-method="deleting" />
+    HTML;
+
+    public const DELETE_METHOD = <<<'HTML'
+    use Illuminate\Http\UploadedFile;
+    
+    public function deleteUpload(string $originalName, string $temporaryName): void
+    {
+        // Change this for the name of the property
+        // that you are using to store the temporary files
+        if (!$this->photos) {
+            return;
+        }
+
+        $files = Arr::wrap($this->photos);
+
+        /** @var UploadedFile $file */
+        $file = collect($files)->filter(fn (UploadedFile $item) => $item->getFilename() === $temporaryName)->first();
+
+        // 1. Here we delete the file. Even if we have a error here, we simply 
+        // ignore it because as long as the file is not persisted, it is 
+        // temporary and will be deleted at some point if there is a failure here.
+        rescue(fn () => $file->delete(), report: false);
+
+        $collect = collect($files)->filter(fn (UploadedFile $item) => $item->getFilename() !== $temporaryName);
+
+        // 2. We guarantee restore of remaining files regardless of upload 
+        // type, whether you are dealing with multiple or single uploads
+        $this->photos = is_array($this->photos) ? $collect->toArray() : $collect->first();
+    }
+    HTML;
+
+    public const MULTIPLE = <<<'HTML'
+    <!-- The Livewire property must be an array -->
+    
+    <x-upload multiple />
+    HTML;
+
+    public const MULTIPLE_BATCHES = <<<'HTML'
+    use Livewire\Component;
+    use Livewire\WithFileUploads;
+    use Illuminate\Http\UploadedFile;
+
+    class MyComponent extends Component
+    {
+        use WithFileUploads;
+    
+        // For multiple files the property must be an array [tl! highlight:1]
+        public $photos = [];
+
+        // 1. We create a property that will temporarily store the uploaded files
+        public $backup = [];
+
+        public function updatingPhotos(): void
+        {
+            // 2. We store the uploaded files in the temporary property
+            $this->backup = $this->photos;
+        }
+    
+        public function updatedPhotos(): void
+        {
+            if (!$this->photos) {
+                return;
+            }
+    
+            // 3. We merge the newly uploaded files with the saved ones 
+            $file = Arr::flatten(array_merge($this->backup, [$this->photos]));
+    
+            // 4. We finishing by removing the duplicates
+            $this->photos = collect($file)->unique(fn (UploadedFile $item) => $item->getClientOriginalName())->toArray();
+        }
+    }
+    HTML;
+
+    public const MULTIPLE_BATCHES_OTHER_PROPERTIES = <<<'HTML'
+    // Supposing you want to use $files instead of $photos:
+
+    public $photos = []; // [tl! remove]
+    public $files = []; // [tl! add]
+    
+    public function updatingPhotos(): void {} // [tl! remove]
+    public function updatingFiles(): void {} // [tl! add]
+    
+    public function updatedPhotos(): void {} // [tl! remove]
+    public function updatedFiles(): void {} // [tl! add]
+    HTML;
+
+    public const ACCEPT = <<<'HTML'
+    <x-upload accept="application/pdf" />
+    HTML;
+
+    public const FOOTER_SLOT = <<<'HTML'
+    <x-upload>
+        <x-slot:footer>
+            <x-button class="w-full">
+                Save
+            </x-button>
+        </x-slot:footer>
+    </x-upload>
+    HTML;
+
+    public const FOOTER_SLOT_WHEN_UPLOADED = <<<'HTML'
+    <x-upload>
+        <x-slot:footer when-uploaded> {{-- [tl! highlight] --}}
+            <x-button class="w-full" wire:click="store">
+                Save
+            </x-button>
+        </x-slot:footer>
+    </x-upload>
+    HTML;
+
+    public const EVENTS = <<<'HTML'
+    <!-- The listener receive the uploaded file $event.detail.files -->
+    <x-upload x-on:upload="console.log($event.detail.files)" />
+    
+    <!-- The listener receive the uploaded file $event.detail.file -->
+    <x-upload delete x-on:remove="console.log($event.detail.file)" />
+    HTML;
+
+    public const PERSONALIZATION = <<<'HTML'
+    TallStackUi::personalize()
+        ->form('upload')
+        ->block('block', 'classes');
+    HTML;
+}
diff --git a/app/Enums/Examples/Ui/Reaction.php b/app/Enums/Examples/Ui/Reaction.php
@@ -0,0 +1,93 @@
+<?php
+
+namespace App\Enums\Examples\Ui;
+
+class Reaction
+{
+    public const METHOD = <<<'HTML'
+    use Livewire\Component;
+
+    class MyComponent extends Component
+    {
+        public function react(string $reaction) // [tl! highlight]
+        {
+            // Your logic here...
+
+            // $reaction will be thumbs-up, thumbs-down, the emoji name.
+        }
+    }
+    HTML;
+
+    public const USING_OTHER_METHOD_NAME = <<<'HTML'
+    <x-reaction react-method="reacting" />
+    HTML;
+
+    public const BASIC = <<<'HTML'
+    <x-reaction />
+    HTML;
+
+    public const ANIMATED = <<<'HTML'
+    <x-reaction animated />
+    HTML;
+
+    public const POSITION = <<<'HTML'
+    <!-- Accept all positions of Tooltip component -->
+
+    <x-reaction position="top" />
+    HTML;
+
+    public const QUANTITY = <<<'HTML'
+    <x-reaction :quantity="12" />
+    HTML;
+
+    public const QUANTITY_BIND = <<<'HTML'
+    <!-- $quantity is an integer Livewire public property -->
+
+    <x-reaction wire:model="quantity" :$quantity />
+    HTML;
+
+    public const ONLY = <<<'HTML'
+    <!-- Available:
+
+        'smile',
+        'laugh',
+        'love',
+        'screaming',
+        'rage',
+        'pray',
+        'thumbs-up',
+        'thumbs-down',
+        'heart',
+        'broken-heart',
+        'clap',
+        'rocket',
+        'fire',
+        'mind-blown',
+        'sick',
+        'poop',
+        'eyes',
+        'party-popper',
+        'clown',
+        'check-mark' -->
+
+    <x-reaction :only="['thumbs-up', 'thumbs-down', 'heart']" />
+    HTML;
+
+    public const SLOT = <<<'HTML'
+    <x-reaction>
+        React to the TallStackUI
+    </x-reaction>
+    HTML;
+
+    public const EVENTS = <<<'HTML'
+    <!-- The listener receive the uploaded file $event.detail.reaction -->
+
+    <x-reaction x-on:react="alert(`Reacted: ${$event.detail.reaction.reaction}`)" />
+    HTML;
+
+    public const PERSONALIZATION = <<<'HTML'
+    TallStackUi::personalize()
+        ->reaction()
+        ->block('block', 'classes');
+    HTML;
+}
diff --git a/composer.json b/composer.json
@@ -13,7 +13,7 @@
         "laravel/tinker": "^2.8",
         "livewire/livewire": "^3.0",
         "livewire/volt": "^1.0",
-        "tallstackui/tallstackui": "^1.10",
+        "tallstackui/tallstackui": "^1.13",
         "torchlight/torchlight-laravel": "^0.5.14"
     },
     "require-dev": {