Merge pull request #26 from tallstackui/summer-release

The Summer Release Docs.
tallstackui · Mar 12, 2024 · 352e474 · 352e474
2 parents 27f0549 + 97cffc9
commit 352e474
Show file tree

Hide file tree

Showing 93 changed files with 2,491 additions and 444 deletions.
diff --git a/app/Enums/Example.php b/app/Enums/Example.php
@@ -4,14 +4,17 @@
 
 use App\Enums\Examples\Form\Checkbox;
 use App\Enums\Examples\Form\Color;
+use App\Enums\Examples\Form\Date;
 use App\Enums\Examples\Form\Input;
 use App\Enums\Examples\Form\Number;
 use App\Enums\Examples\Form\Password;
 use App\Enums\Examples\Form\Pin;
 use App\Enums\Examples\Form\Radio;
 use App\Enums\Examples\Form\Range;
+use App\Enums\Examples\Form\Select;
 use App\Enums\Examples\Form\Tag;
 use App\Enums\Examples\Form\Textarea;
+use App\Enums\Examples\Form\Time;
 use App\Enums\Examples\Form\Toggle;
 use App\Enums\Examples\Form\Upload;
 use App\Enums\Examples\Form\WithoutLivewire;
@@ -21,6 +24,7 @@
 use App\Enums\Examples\Others\DarkTheme;
 use App\Enums\Examples\Others\DebugMode;
 use App\Enums\Examples\Others\Installation;
+use App\Enums\Examples\Others\SummerRelease;
 use App\Enums\Examples\Others\Translation;
 use App\Enums\Examples\Others\Troubleshooting;
 use App\Enums\Examples\Others\Updates;
@@ -43,10 +47,12 @@
 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\Stats;
+use App\Enums\Examples\Ui\Step;
 use App\Enums\Examples\Ui\Tab;
 use App\Enums\Examples\Ui\Table;
+use App\Enums\Examples\Ui\ThemeSwitch;
 use App\Enums\Examples\Ui\Toast;
 use App\Enums\Examples\Ui\Tooltip;
 use Exception;
@@ -67,6 +73,7 @@ enum Example: string
     case ColorPersonalization = ColorPersonalization::class;
     case Configuration = Configuration::class;
     case Contribution = Contribution::class;
+    case Date = Date::class;
     case DarkTheme = DarkTheme::class;
     case DebugMode = DebugMode::class;
     case DeepPersonalization = DeepPersonalization::class;
@@ -87,11 +94,16 @@ enum Example: string
     case Reaction = Reaction::class;
     case Select = Select::class;
     case Slide = Slide::class;
+    case Stats = Stats::class;
+    case Step = Step::class;
     case SoftPersonalization = SoftPersonalization::class;
+    case SummerRelease = SummerRelease::class;
     case Tab = Tab::class;
     case Table = Table::class;
     case Tag = Tag::class;
     case Textarea = Textarea::class;
+    case ThemeSwitch = ThemeSwitch::class;
+    case Time = Time::class;
     case Toast = Toast::class;
     case Toggle = Toggle::class;
     case Tooltip = Tooltip::class;

diff --git a/app/Enums/Examples/Form/Date.php b/app/Enums/Examples/Form/Date.php
@@ -0,0 +1,107 @@
+<?php
+
+namespace App\Enums\Examples\Form;
+
+class Date
+{
+    public const BASIC = <<<'HTML'
+    <x-date />
+    HTML;
+
+    public const LABEL_HINT = <<<'HTML'
+    <x-date label="Date" hint="Select your DoB" />
+    HTML;
+
+    public const FORMATS = <<<'HTML'
+    <x-date format="YYYY-MM-DD" />
+    <x-date format="YYYY, MMMM, DD" />
+    <x-date format="DD [of] MMMM [of] YYYY" />
+    HTML;
+
+    public const CREATE_FROM_FORMAT = <<<'HTML'
+    // Your current date
+    $date = '20/02/2024'; // 20/02/2024
+    
+    // Formatting
+    $date = now()->createFromFormat('d/m/Y', $date)->format('Y-m-d');
+    
+    // Same date, but now in the correct format
+    $date; // 2024-02-20
+    HTML;
+
+    public const HELPERS = <<<'HTML'
+    <x-date helpers />
+    HTML;
+
+    public const MIN_MAX_DATES = <<<'HTML'
+    <!-- You can use dates as strings or Carbon instances -->
+    
+    <x-date :min-date="now()->subWeek()" 
+            :max-date="now()->addWeek()" />
+    HTML;
+
+    public const MIN_MAX_YEARS = <<<'HTML'
+    <x-date :min-year="2020" :max-year="2024" />
+    HTML;
+
+    public const DISABLED = <<<'HTML'
+    <!-- Simple Array -->
+    <x-date :disable="['2020-01-01','2020-01-02','2020-01-03']" />
+    
+    <!-- Multiple Arrays -->
+    <x-date :disable="[
+        ['2020-01-01','2020-01-02','2020-01-03'],
+        ['2020-01-04','2020-01-05','2020-01-06']
+    ]" />
+
+    <!-- Collection -->
+    <x-date :disable="collect(['2020-01-01','2020-01-02','2020-01-03'])" />
+
+    <!-- Carbon Interval-->
+    <x-date :disable="\Carbon\CarbonInterval::days(1)->toPeriod(now(), now()->addWeek())->toArray()" />
+    HTML;
+
+    public const RANGE = <<<'HTML'
+    <!-- 
+    The Livewire property must be an array with two positions,
+    the first one is the start date and the second one is the end date.
+    
+    Property:
+    public array $date = ['2021-01-01', '2021-01-31'];
+    
+    Usage:
+    <x-date range wire:model="date" />
+    -->
+
+    <x-date range />
+    HTML;
+
+    public const MULTIPLE = <<<'HTML'
+    <!-- 
+    The Livewire property must be an array with multiples dates.
+    
+    Property:
+    public array $date = ['2021-01-01', '2021-01-02', '2021-01-03'];
+    
+    Usage:
+    <x-date multiple wire:model="date" />
+    -->
+    
+    <x-date multiple />
+    HTML;
+
+    public const EVENTS = <<<'HTML'
+    <x-date x-on:select="alert(`Selected Date: ${$event.detail.date}`)" 
+            x-on:clear="alert(`Cleaned!`)" />
+    HTML;
+
+    public const INVALIDATE = <<<'HTML'
+    <x-date invalidate />
+    HTML;
+
+    public const PERSONALIZATION = <<<'HTML'
+    TallStackUi::personalize()
+        ->form('date')
+        ->block('block', 'classes');
+    HTML;
+}
diff --git a/app/Enums/Examples/Form/Input.php b/app/Enums/Examples/Form/Input.php
@@ -24,6 +24,17 @@ class Input
     public const PREFIX_SUFFIX = <<<'HTML'
     <x-input prefix="https://" label="Domain" />
     <x-input suffix="@gmail.com" label="E-mail" />
+
+    <!-- or -->
+
+    <x-input>
+        <x-slot:prefix>
+            Prefix
+        </x-slot:prefix>
+        <x-slot:suffix>
+            Suffix
+        </x-slot:suffix>
+    </x-input>
     HTML;
 
     public const INVALIDATE = <<<'HTML'

diff --git a/app/Enums/Examples/Form/Number.php b/app/Enums/Examples/Form/Number.php
@@ -21,6 +21,10 @@ class Number
     <x-number centralized />
     HTML;
 
+    public const SELECTABLE = <<<'HTML'
+    <x-number selectable />
+    HTML;
+
     public const DELAY = <<<'HTML'
     <x-number delay="1" min="1" max="10" />
     HTML;

diff --git a/app/Enums/Examples/Ui/Select.php → app/Enums/Examples/Form/Select.php b/app/Enums/Examples/Ui/Select.php → app/Enums/Examples/Form/Select.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Enums\Examples\Ui;
+namespace App\Enums\Examples\Form;
 
 class Select
 {
@@ -154,37 +154,6 @@ class Select
                      ]" select="label:name|value:id" />
     HTML;
 
-    public const ELOQUENT = <<<'HTML'
-    use App\Models\User;
-    use Illuminate\Http\Request;
-    use Illuminate\Support\Facades\Route;
-
-    Route::get('/users', function (Request $request) {
-        // getting initial selected values
-        $selected = json_decode($request->get('selected', ''), true);
-
-        return User::query()
-            // searching when type in the select input
-            ->when(
-                $search = $request->get('search'),
-                fn ($query) => $query->where('name', 'like', "%{$search}%")
-            )
-            ->when(!$search && $selected, function ($query) use ($selected) {
-                // selecting the initial selected values
-                $query->whereIn('id', $selected)
-                    // or selecting the other users ordered by creation date
-                    ->orWhere(function ($query) use ($selected) {
-                        $query->whereNotIn('id', $selected)
-                            ->orderBy('created_at');
-                    });
-            })
-            ->limit(10)
-            ->get()
-            // mapping to the expected format
-            ->map(fn (User $user) => $user->only('id', 'name'));
-    })->name('api.users');
-    HTML;
-
     public const PERSONALIZATION_NATIVE = <<<'HTML'
     TallStackUi::personalize()
         ->select()

diff --git a/app/Enums/Examples/Form/Tag.php b/app/Enums/Examples/Form/Tag.php
@@ -24,9 +24,7 @@ class Tag
     HTML;
 
     public const EVENTS = <<<'HTML'
-    <!-- 1. The listeners receive the content through $event.detail -->
-
-    <!-- 2. For the erase event the correct index is
+    <!-- For the erase event the correct index is
         $event.detail.tags instead of $event.detail.tag -->
 
     <x-tag ...

diff --git a/app/Enums/Examples/Form/Time.php b/app/Enums/Examples/Form/Time.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Enums\Examples\Form;
+
+class Time
+{
+    public const BASIC = <<<'HTML'
+    <x-time />
+    HTML;
+
+    public const LABEL_HINT = <<<'HTML'
+    <x-time label="Time" hint="Select the hour" />
+    HTML;
+
+    public const FORMATS = <<<'HTML'
+    <!-- 12-hour format -->
+    <x-time />
+    
+    <!-- 24-hour format -->
+    <x-time format="24" />
+    HTML;
+
+    public const MIN_MAX = <<<'HTML'
+    <!-- Hours -->
+    <x-time :min-hour="5" :max-hour="10" />
+    
+    <!-- Minutes -->
+    <x-time :min-minute="30" :max-minute="45" />
+    HTML;
+
+    public const HELPER = <<<'HTML'
+    <x-time helper />
+    HTML;
+
+    public const STEP = <<<'HTML'
+    <x-time :step-hour="3" :step-minute="15" />
+    HTML;
+
+    public const FOOTER_SLOT = <<<'HTML'
+    <x-time>
+        <x-slot:footer>
+            Footer Slot
+        </x-slot:footer>
+    </x-time>
+    HTML;
+
+    public const EVENTS = <<<'HTML'
+    <x-time x-on:hour="alert(`Hour Selected: ${$event.detail.hour}`)"
+            x-on:minute="alert(`Minute Selected: ${$event.detail.minute}`)"
+            x-on:interval="alert(`Interval Changed: ${$event.detail.interval}`)"/>
+    HTML;
+
+    public const INVALIDATE = <<<'HTML'
+    <x-time invalidate />
+    HTML;
+
+    public const PERSONALIZATION = <<<'HTML'
+    TallStackUi::personalize()
+        ->form('time')
+        ->block('block', 'classes');
+    HTML;
+}
diff --git a/app/Enums/Examples/Form/WithoutLivewire.php b/app/Enums/Examples/Form/WithoutLivewire.php
@@ -5,7 +5,7 @@
 class WithoutLivewire
 {
     public const EXAMPLE = <<<'HTML'
-    <form action="{{ route('user.register') }}" method="post">
+    <form action="{{ route('users.profile') }}" method="post">
         @csrf
 
         <x-input label="Name" name="input" :value="old('name')" />
@@ -41,6 +41,10 @@ class WithoutLivewire
                          :value="old('search_api')" />
 
         <x-tag label="Frameworks" name="frameworks" :value="['Laravel', 'Symfony', 'CodeIgniter']" />
+        
+        <x-date label="DoB" name="dob" value="2024-02-27" />
+        
+        <x-time label="Preferred Hour" name="hour" value="02:30 PM" />
 
         <x-button type="submit">
             Submit
@@ -50,7 +54,7 @@ class WithoutLivewire
     HTML;
 
     public const JSON_DECODE_BLADE = <<<'HTML'
-    <form action="{{ route('user.register') }}" method="post">
+    <form action="{{ route('users.profile') }}" method="post">
         @csrf
 
         <x-tag label="Frameworks"
@@ -63,6 +67,11 @@ class WithoutLivewire
                          searchable
                          multiple
                          :value="old('select_options')" />
+                         
+         <x-date label="Vacation Dates"
+                 name="vacation" 
+                 range
+                 :value="['2024-02-26', '2024-02-27']" />
 
         <x-button type="submit">
             Submit
@@ -80,11 +89,13 @@ class RegisterController extends Controller
     {
         // ...
 
-        public function create(Request $request)
+        public function store(Request $request)
         {
             $selectOptions = json_decode($request->get('select_options')); // [tl! highlight]
 
             $tagFrameworks = json_decode($request->get('frameworks')); // [tl! highlight]
+            
+            $vacationDates = json_decode($request->get('vacation')); // [tl! highlight]
 
             // ...
         }

diff --git a/app/Enums/Examples/Others/Installation.php b/app/Enums/Examples/Others/Installation.php
@@ -74,6 +74,10 @@ class Installation
     <x-ts-input /> {{-- [tl! add] --}}
     HTML;
 
+    public const PREFIX_COMMAND = <<<'HTML'
+    php artisan tallstackui:setup-prefix
+    HTML;
+
     public const ALPINE = <<<'HTML'
     <html>
         <head>

diff --git a/app/Enums/Examples/Others/SummerRelease.php b/app/Enums/Examples/Others/SummerRelease.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Enums\Examples\Others;
+
+class SummerRelease
+{
+    public const SETUP_PREFIX = <<<'HTML'
+    php artisan tallstackui:setup-prefix
+    HTML;
+}