V3.x

README.md

@@ -7,14 +7,32 @@
 
 ## Description
 
-Jetstrap is a lightweight laravel 8 package that focuses on the `VIEW` side of [Jetstream](https://github.com/laravel/jetstream) / [Breeze](https://github.com/laravel/breeze) package installed in your Laravel application, so when a swap is performed, the `Action`, `MODEL`, `CONTROLLER`, `Component` and `Action` classes of your project is still 100% handled by Laravel development team with no added layer of complexity.
+Jetstrap is a lightweight laravel 9 package that focuses on the `VIEW` side of [Jetstream](https://github.com/laravel/jetstream) / [Breeze](https://github.com/laravel/breeze) package installed in your Laravel application, so when a swap is performed, the `Action`, `MODEL`, `CONTROLLER`, `Component` and `Action` classes of your project is still 100% handled by Laravel development team with no added layer of complexity.
+
+Notes: 
+- I only tested Jetstream.
+- Have the PHP version installed and install Composer in it after installing it.
+After that uncomment the "fileinfo" line in php.ini
+
+* See Laravel version: php artisan --version
+* See PHP version: php -v
+
+Project Configuration:
+Laravel Framework 9.24.0
+PHP 8.1.9
+
+Reference Link: https://www.youtube.com/watch?v=nuB09o8SMUc&t=1s (by Tech Chess)
 
 ## Table of Content
   * [Installation](#installation)
+    + [Install Laravel (If Necessary)](#install-laravel-if-necessary)
+    + [Project Creation](#project-creation)
+    + [Update Composer (If Necessary)](#update-composer-if-necessary)
     + [Installing Jetstream](#installing-jetstream)
       - [Install Jetstream With Livewire](#install-jetstream-with-livewire)
       - [Or, Install Jetstream With Inertia](#or--install-jetstream-with-inertia)
     + [Install Jetstrap](#install-jetstrap)
+    + [Install Sass](#install-sass)
     + [Finalizing The Installation](#finalizing-the-installation)
     + [Extras](#extras)
       - [Pagination](#pagination)
@@ -30,6 +48,24 @@ Jetstrap is a lightweight laravel 8 package that focuses on the `VIEW` side of [
 
 ## Installation
 
+### Install Laravel (If Necessary)
+composer global require laravel/installer
+
+### Project Creation
+```
+laravel new laravel-jetstream-bootstrap --jet
+```
+- Select option 0 (liveware)
+- no (for creating teams)
+
+### Update Composer (If Necessary)
+```
+composer global update
+composer global update -w
+```
+- Create database in this case "my_test" and change it to ".env"
+- Open created project "cd laravel-jetstream-bootstrap" in terminal
+
 ### Installing Jetstream
 
 You may use Composer to install Jetstream into your new Laravel project:
@@ -43,21 +79,21 @@ If you choose to install Jetstream through Composer, you should run the jetstrea
 #### Install Jetstream With Livewire
 
 ```
-php artisan jetstream:install livewire --teams
+php artisan jetstream:install livewire --teams (Not tested)
 ```
 
 #### Or, Install Jetstream With Inertia
 
 ```
-php artisan jetstream:install inertia --teams
+php artisan jetstream:install inertia --teams (Not tested)
 ```
 
 ### Install Jetstrap
 
 Use Composer to install Jetstrap into your new Laravel project as dev dependency:
 
 ```
-composer require nascent-africa/jetstrap --dev
+composer require felipe-ps/jetstrap
 ```
 
 Regardless how you install Jetstream, Jetstrap commands are very similar to that
@@ -74,27 +110,34 @@ php artisan jetstrap:swap livewire
 
 or
 
-php artisan jetstrap:swap livewire --teams
+php artisan jetstrap:swap livewire --teams (Not tested)
 
-php artisan jetstrap:swap inertia --teams
+php artisan jetstrap:swap inertia --team (Not tested)
 ```
 
 This will publish overrides to enable Bootstrap like the good old days!
 
+### Install Sass
+```
+npm i -D sass
+```
+
 ### Finalizing The Installation
 
 After installing Jetstrap and swapping Jetstream resources, remove tailwindCSS and its dependencies if any from your package.json and then install and build your NPM dependencies and migrate your database:
 
 ```
-npm install && npm run dev
+npm install && npm run build
 
 php artisan migrate
+
+php artisan serve
 ```
 
 
 ### Extras
 
-#### Pagination
+#### Pagination (Not tested)
 
 It is also important to point out that Laravel 8 still includes pagination views built using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator's useBootstrap method within your AppServiceProvider:
 
@@ -131,7 +174,7 @@ class AppServiceProvider extends ServiceProvider
 ```
 
 
-## Presets
+## Presets (Not tested)
 
 Presets are custom third party templates built using bootstrap. We've thought about it, what are the chances that you're going to use the default template provided by Laravel or Laravel Jetstream.
 
@@ -140,7 +183,7 @@ With the assumption you already know which way you want to go before running any
 And if you change your mind after you've run a swap command and decide to use a preset, then run the `jetstrap:swap` command again.
 
 
-### Core Ui
+### Core Ui (Not tested)
 
 [Core Ui](https://coreui.io/) lets you save thousands of priceless hours because it offers everything you need to create modern, beautiful, and responsive applications as stated on their website.
 
@@ -180,7 +223,7 @@ class AppServiceProvider extends ServiceProvider
 }
 ```
 
-### AdminLTE
+### AdminLTE (Not tested)
 
 [AdminLTE](https://adminlte.io/) is an open source admin dashboard & control panel theme. Built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components.
 
@@ -221,7 +264,7 @@ class AppServiceProvider extends ServiceProvider
 ```
 
 
-## Breeze
+## Breeze (Not tested)
 
 > **Warning!!!**: Jetstrap resources has been updated to work with the current version of Breeze but does not support swap for inertia-react resources. Feel free to make a PR with this feature if you can.
 

breeze/resources/views/layouts/app.blade.php

@@ -10,11 +10,8 @@
         <!-- Fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
-        <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}" defer></script>
+       <!-- Scripts -->
+       @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-light">
         @include('layouts.navigation')

breeze/resources/views/layouts/guest.blade.php

@@ -10,11 +10,8 @@
         <!-- Fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
         <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-light">
         {{ $slot }}

composer.json

@@ -1,11 +1,11 @@
 {
-  "name": "nascent-africa/jetstrap",
-  "description": "A Laravel 8 package to easily switch TailwindCSS resources generated by Laravel Jetstream to Bootstrap 4 or 5.",
+  "name": "felipe-ps/jetstrap",
+  "description": "A Laravel 9 package to easily switch TailwindCSS resources generated by Laravel Jetstream to Bootstrap 5 with Vite.",
   "keywords": ["laravel", "bootstrap", "jetstream"],
   "license": "MIT",
   "support": {
-    "issues": "https://github.com/nascent-africa/jetstrap/issues",
-    "source": "https://github.com/nascent-africa/jetstrap"
+    "issues": "https://github.com/Felipe-PS-95/jetstrap/issues",
+    "source": "https://github.com/Felipe-PS-95/jetstrap"
   },
   "authors": [
     {
@@ -15,13 +15,13 @@
     }
   ],
   "require": {
-    "php": "^7.3|^8.0",
+    "php": "^8.0.2",
     "illuminate/support": "^8.0|^9.0"
   },
   "require-dev": {
     "inertiajs/inertia-laravel": "^0.3",
     "laravel/breeze": "^1.1",
-    "laravel/jetstream": "^2.3",
+    "laravel/jetstream": "^2.10",
     "orchestra/testbench": "^6.0|^7.0",
     "phpunit/phpunit": "^9.3"
   },

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        autoprefixer: {},
+    },
+};

src/NascentAfrica/Jetstrap/Console/InstallCommand.php

@@ -43,6 +43,18 @@ public function handle()
         copy(__DIR__.'/../../../../stubs/webpack.mix.js', base_path('webpack.mix.js'));
         copy(__DIR__.'/../../../../stubs/webpack.config.js', base_path('webpack.config.js'));
 
+        // Fix Errors Vite...
+        if ((new Filesystem)->exists(base_path('postcss.config.js'))) {
+            (new Filesystem)->delete(base_path('postcss.config.js'));
+        }
+
+        if ((new Filesystem)->exists(base_path('vite.config.js'))) {
+            (new Filesystem)->delete(base_path('vite.config.js'));
+        }
+
+        copy(__DIR__.'/../../../../postcss.config.js', base_path('postcss.config.js'));
+        copy(__DIR__.'/../../../../vite.config.js', base_path('vite.config.js'));
+
         // Assets...
         (new Filesystem)->deleteDirectory(resource_path('css'));
         (new Filesystem)->ensureDirectoryExists(resource_path('sass'));

stubs/inertia/resources/views/app.blade.php

@@ -10,13 +10,10 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
         <!-- Scripts -->
         @routes
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="bg-light">
         @inertia

stubs/livewire/resources/views/layouts/app.blade.php

@@ -10,13 +10,10 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
         @livewireStyles
 
         <!-- Scripts -->
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-light">
         <x-jet-banner />

stubs/livewire/resources/views/layouts/guest.blade.php

@@ -10,11 +10,8 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
         <!-- Scripts -->
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="bg-light font-sans antialiased">
         {{ $slot }}

stubs/resources/js/app.js

@@ -1,4 +1,4 @@
-require('./bootstrap');
+import './bootstrap';
 
 import Alpine from 'alpinejs';
 

stubs/resources/js/bootstrap.js

@@ -1,24 +1,25 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
  * for JavaScript based Bootstrap features such as modals and tabs. This
  * code may be modified to fit the specific needs of your application.
  */
 
-import '@popperjs/core'
+ import '@popperjs/core'
 
-const bootstrap = require('bootstrap')
-
-window.bootstrap = bootstrap
+ import * as bootstrap from 'bootstrap' 
+ window.bootstrap = bootstrap
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -30,11 +31,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
-// });
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });

stubs/resources/sass/app.scss

@@ -5,7 +5,7 @@
 @import 'variables';
 
 // Bootstrap
-@import '~bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap/scss/bootstrap';
 
 // Custom
 @import "custom";

stubs/resources/views/welcome.blade.php

@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
 
     <!-- Styles -->
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
 
     <style>
         body {

vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import laravel, { refreshPaths } from 'laravel-vite-plugin';
+import {resolve} from 'path'
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/sass/app.scss',
+                'resources/js/app.js',
+            ],
+            refresh: [
+                ...refreshPaths,
+                'app/Http/Livewire/**',
+            ],
+        }),
+    ]
+});