BREAKING CHANGE! : Filament v4 support

README.md

@@ -34,6 +34,10 @@ Installation
 composer require nuxtifyts/dash-stack-theme
 ```
 
+> For Filament 3:
+> If you're still using Filament v3: run this command instead
+> `composer require nuxtifyts/dash-stack-theme:"^1.3"
+
 #### Step 2: Run install command:
 
 Running this command will install required npm packages (If they're not already installed), and it will publish its assets as well.
@@ -60,8 +64,8 @@ Add DashStack theme to your `vite.config.js`:
 
 ```javascript
 input: [
-   // ...
-   'vendor/nuxtifyts/dash-stack-theme/resources/css/theme.css',
+  // ...
+  'vendor/nuxtifyts/dash-stack-theme/resources/css/theme.css',
 ],
 ```
 

composer.json

@@ -18,7 +18,7 @@
     "type": "library",
     "require": {
         "php": "^8.2",
-        "filament/filament": "^3.0",
+        "filament/filament": "^4.0",
         "illuminate/contracts": "^11.0|^12.0",
         "spatie/laravel-package-tools": "^1.19"
     },

resources/css/login.css

@@ -1,7 +1,8 @@
+/* Login Page Start */
 .fi-simple-layout {
     > .fi-simple-main-ctn {
         @apply bg-[#4880FF] dark:bg-[var(--ds-dark-bg-primary-color)];
-        @apply bg-[url(/vendor/nuxtifyts/dash-stack-theme/dash-stack-shape.svg)];
+        @apply bg-[url(/_filament-dash-stack-theme/assets/dash-stack-shape.svg)];
         @apply bg-no-repeat bg-cover;
 
         > .fi-simple-main {
@@ -13,3 +14,4 @@
         }
     }
 }
+/* Login Page End */

resources/css/theme.css

@@ -1,7 +1,5 @@
-@import '/vendor/filament/filament/resources/css/theme.css';
-@import 'login.css';
-
-@config 'tailwind.config.js';
+@import '../../../../../vendor/filament/filament/resources/css/theme.css';
+@import "./login.css";
 
 :root {
     --ds-dark-bg-primary-color: #1B2431;
@@ -144,37 +142,37 @@
         @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
         @apply border-r-[0.9px] border-r-[#E0E0E0] dark:border-none;
         @apply py-4 px-0;
-    
+
         > .fi-sidebar-nav-groups {
             @apply gap-y-4 -mr-4;
-    
+
             > .fi-sidebar-group  {
                 > .fi-sidebar-group-button {
                     @apply pl-14 pr-6 mt-2 rtl:pl-6 rtl:pr-14;
-    
+
                     > .fi-icon-btn, > .fi-sidebar-group-label {
                         @apply text-gray-600 dark:text-gray-300;
                     }
                 }
-    
+
                 > .fi-sidebar-group-items {
                     > .fi-sidebar-item {
                         @apply relative px-10 rtl:pr-14 rtl:pl-6;
-    
+
                         > .fi-sidebar-item-button {
                             @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
                             @apply px-4 py-3 gap-x-6;
-    
+
                             > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                 @apply text-gray-800 dark:text-white font-semibold;
                             }
                         }
                     }
-    
+
                     > .fi-sidebar-item.fi-sidebar-item-active {
                         > .fi-sidebar-item-button {
                             @apply bg-primary-600;
-                            
+
                             > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                 @apply text-white;
                             }
@@ -184,18 +182,18 @@
                             }
                         }
                     }
-    
+
                     > .fi-sidebar-item::after {
                         content: '';
                         @apply absolute left-0 rtl:right-4 top-0 w-4 h-full rounded-lg;
                     }
-    
+
                     > .fi-sidebar-item.fi-sidebar-item-active::after {
                         @apply bg-primary-600;
                     }
                 }
             }
-    
+
             > .fi-sidebar-group:not(:first-child) {
                 @apply border-t-[0.6px] border-t-[#E0E0E0] dark:border-white/10;
             }
@@ -219,46 +217,46 @@
         @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
         @apply border-r-[0.9px] border-r-[#E0E0E0] dark:border-none;
         @apply py-4 px-0;
-    
+
         > .fi-sidebar-nav-groups {
             @apply gap-y-4 -mr-4;
-    
+
             > .fi-sidebar-group  {
                 > .fi-sidebar-group-button {
                     @apply pl-14 pr-6 mt-2 rtl:pl-6 rtl:pr-14;
-    
+
                     > .fi-icon-btn, > .fi-sidebar-group-label {
                         @apply text-gray-600 dark:text-gray-300;
                     }
                 }
-    
+
                 > .fi-sidebar-group-items {
                     > .fi-sidebar-item {
                         @apply relative rtl:pr-8;
 
                         > .fi-sidebar-item-button {
                             @apply bg-white dark:bg-[var(--ds-dark-bg-secondary-color)];
                             @apply px-4 py-3 gap-x-6;
-    
+
                             > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                 @apply text-gray-800 dark:text-white font-semibold;
                             }
                         }
                     }
-    
+
                     > .fi-sidebar-item.fi-sidebar-item-active {
                         > .fi-sidebar-item-button {
                             > .fi-sidebar-item-icon, > .fi-sidebar-item-label {
                                 @apply text-primary-600;
                             }
                         }
                     }
-     
+
                     > .fi-sidebar-item::after {
                         content: '';
                         @apply absolute left-0 rtl:right-4 top-0 w-4 h-full rounded-lg;
                     }
-    
+
                     > .fi-sidebar-item.fi-sidebar-item-active::after {
                         @apply bg-primary-600;
                     }
@@ -304,7 +302,7 @@
     .fi-header {
         @apply pb-6;
     }
-    
+
     /* Table Component Start */
     .fi-ta-content {
         > .fi-ta-table {
@@ -347,7 +345,7 @@
             .fi-ta-table {
                 thead {
                     > tr {
-                        .fi-ta-actions-header-cell, 
+                        .fi-ta-actions-header-cell,
                         .fi-ta-header-cell,
                         .fi-ta-cell {
                             @apply bg-primary-100/10 dark:bg-[var(--ds-dark-bg-tertiary-color)];
@@ -431,7 +429,7 @@
                     }
                 }
             }
-            
+
             /* Table Component 2.1 Start */
             > div {
                 &:first-child {
@@ -457,7 +455,7 @@
 
                         .fi-ta-record {
                             @apply rounded-3xl ring-0 shadow-sm bg-gray-50 dark:bg-[var(--ds-dark-bg-tertiary-color)];
-                            @apply bg-[url(/vendor/nuxtifyts/dash-stack-theme/card-bg-pattern.svg)];
+                            @apply bg-[url(/_filament-dash-stack-theme/assets/card-bg-pattern.svg)];
                         }
                     }
                     /* Table Component 2.1.2 End */
@@ -485,6 +483,7 @@
     @apply rounded-md sm:rounded-lg;
     @apply py-1 px-3 sm:py-2 sm:px-4;
     @apply text-sm sm:text-base;
+    @apply text-white;
 
     .fi-btn-label {
         @apply text-sm sm:text-base;
@@ -596,4 +595,4 @@
     @apply ring-offset-0 ring-0 dark:ring-1 dark:ring-offset-0 dark:ring-white/10;
     @apply dark:bg-[var(--ds-dark-bg-secondary-color)];
 }
-/* Tabs Component End */
+/* Tabs Component End */

src/Commands/FilamentDashStackThemeInstallCommand.php

@@ -3,9 +3,7 @@
 namespace Nuxtifyts\DashStackTheme\Commands;
 
 use Illuminate\Console\Command;
-use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Process;
-use Nuxtifyts\DashStackTheme\DashStackThemeServiceProvider;
 use Symfony\Component\Console\Attribute\AsCommand;
 
 #[AsCommand('filament-dash-stack-theme:install')]
@@ -46,33 +44,16 @@ public function handle(): int
 
         $this->info("Using NPM version {$npmVersionResult->output()} to installed dependencies.");
 
-        $npmInstallResult = Process::run('npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev');
+        $npmInstallResult = Process::run('npm install tailwindcss @tailwindcss/vite @tailwindcss/forms @tailwindcss/typography --save-dev');
 
         $this->info($npmInstallResult->output());
 
-        $postcssConfigPath = base_path('postcss.config.js');
-
-        if (! File::exists($postcssConfigPath)) {
-            $this->info('No postcss.config.js file found. Creating one for you...');
-
-            File::copy(__DIR__.'/../../stubs/postcss.config.js', $postcssConfigPath);
-
-            $this->info('postcss.config.js file created.');
-        }
-
         $this->info('Running NPM build...');
 
         $npmBuildResult = Process::run('npm install && npm run build');
 
         $this->info($npmBuildResult->output());
 
-        $this->info('Publishing assets...');
-
-        $this->call('vendor:publish', [
-            '--tag' => DashStackThemeServiceProvider::PACKAGE_NAME.'-assets',
-            '--force' => true,
-        ]);
-
         return static::SUCCESS;
     }
 }

src/DashStackThemeServiceProvider.php

@@ -21,17 +21,14 @@ public function configurePackage(Package $package): void
             ->name(self::PACKAGE_NAME)
             ->hasConfigFile(self::CONFIG_FILE_NAME)
             ->hasViews()
-            ->hasAssets()
             ->hasCommands(...self::commandsClassStrings());
     }
 
-    /**
-     * @return $this
-     */
-    public function boot()
+    public function bootingPackage(): void
     {
-        return parent::boot()
-            ->bootDefaultFont();
+        $this
+            ->bootDefaultFont()
+            ->bootAssetsManager();
     }
 
     protected function bootDefaultFont(): static
@@ -48,6 +45,13 @@ protected function bootDefaultFont(): static
         return $this;
     }
 
+    protected function bootAssetsManager(): static
+    {
+        app(Support\Assets\Manager::class)->boot();
+
+        return $this;
+    }
+
     /**
      * @return list<class-string<Command>>
      */

src/Http/Controllers/AssetsController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Nuxtifyts\DashStackTheme\Http\Controllers;
+
+use Illuminate\Http\Response;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+use Throwable;
+
+readonly class AssetsController
+{
+    protected const CACHE_CONTROL = 'public, max-age=31536000';
+
+    protected const NONCE_SECRET = 'qe0u8t9n3r4a5n6d7o8m9s0t1r2i3n4g5';
+
+    protected const EXPIRES = '+1 year';
+
+    public function __invoke(string $fileName): BinaryFileResponse
+    {
+        try {
+            $filePath = __DIR__."/../../../resources/assets/{$fileName}";
+
+            return response()
+                ->file($filePath, headers: [
+                    'Expires' => sprintf('%s GMT', gmdate('D, d M Y H:i:s', strtotime(static::EXPIRES))),
+                    'Cache-Control' => static::CACHE_CONTROL,
+                    'Last-Modified' => sprintf('%s GMT', gmdate('D, d M Y H:i:s', filemtime($filePath))),
+                ]);
+        } catch (Throwable) {
+            abort(Response::HTTP_NOT_FOUND);
+        }
+    }
+}

src/Support/Assets/Manager.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Nuxtifyts\DashStackTheme\Support\Assets;
+
+use Illuminate\Support\Facades\Route;
+use Nuxtifyts\DashStackTheme\Http\Controllers\AssetsController;
+
+readonly class Manager
+{
+    public function boot(): void
+    {
+        $this->registerRoutes();
+    }
+
+    protected function registerRoutes(): void
+    {
+        Route::prefix('_filament-dash-stack-theme')->group(static function (): void {
+            Route::get('assets/{fileName}', AssetsController::class)
+                ->name('filament-dash-stack-theme.assets');
+        });
+    }
+}