refactor

Author: Kamona-WD

README.md

@@ -7,9 +7,8 @@ Different UI for [larave/jetstream](https://github.com/laravel/jetstream).
 [![Stars](https://img.shields.io/github/stars/Kamona-WD/kui-laravel-jetstream)](https://github.com/Kamona-WD/kui-laravel-jetstream/stargazers)
 [![Total Downloads](https://img.shields.io/packagist/dt/kamona/kui-laravel-jetstream.svg)](https://packagist.org/packages/kamona/kui-laravel-jetstream)
 
-#### [Figma file](https://www.figma.com/community/file/1019844542917981418/)
 #### [Breeze Version](https://github.com/Kamona-WD/kui-laravel-breeze)
-#### [Fortify Version](https://github.com/Kamona-WD/kui-laravel-fortify)
+<!-- #### [Fortify Version](https://github.com/Kamona-WD/kui-laravel-fortify) -->
 
 #### Note
 

src/Console/ReplaceCommand.php

@@ -14,7 +14,8 @@ class ReplaceCommand extends Command
      * @var string
      */
     protected $signature = 'kui-jetstream:replace {stack : The development stack that should be replaced (livewire,inertia)}
-                            {--composer=global : Absolute path to the Composer binary which should be used to install packages}';
+                            {--composer=global : Absolute path to the Composer binary which should be used to install packages}
+                            {--vite : Vitejs}';
 
     /**
      * The console command description.
@@ -23,6 +24,8 @@ class ReplaceCommand extends Command
      */
     protected $description = 'Replace laravel\\jetstream views.';
 
+    protected $isVite = false;
+
     /**
      * Create a new command instance.
      *
@@ -40,6 +43,14 @@ public function __construct()
      */
     public function handle()
     {
+        $this->writeLogo();
+
+        $this->replaceFavIcon();
+
+        if (file_exists(base_path('vite.config.js')) || $this->option('vite')) {
+            $this->isVite = true;
+        }
+
         if ($this->argument('stack') === 'inertia') {
             return $this->replaceInertia();
         }
@@ -53,24 +64,22 @@ public function replaceInertia()
     {
         // NPM Packages...
         $this->updateNodePackages(function ($packages) {
-            return [
+            $extraPackages = [
                 '@heroicons/vue' => '^1.0.4',
-                '@headlessui/vue' => '^1.4.1',
+                '@headlessui/vue' => '^1.4.3',
                 '@vueuse/core' => '^6.5.3',
-                '@vue/babel-plugin-jsx' => '^1.1.0',
-                'autoprefixer' => '^10.3.7',
-                'postcss' => '^8.3.9',
-                'tailwindcss' => '^3.0.7',
-                '@tailwindcss/forms' => '^0.4.0',
-                '@tailwindcss/typography' => '^0.5.0',
                 'perfect-scrollbar' => '^1.5.2',
-                'vue' => '^3.2.26',
                 'vue-toastification' => '^2.0.0-rc.1'
             ] + $packages;
-        });
 
-        // Views...
-        copy(__DIR__ . '/../../stubs/inertia/views/app.blade.php', resource_path('views/app.blade.php'));
+            if (!$this->isVite) {
+                $extraPackages += ['@vue/babel-plugin-jsx' => '^1.1.0'];
+            } else {
+                $extraPackages += ['@vitejs/plugin-vue-jsx' => '^1.3.10'];
+            }
+
+            return $extraPackages + $packages;
+        });
 
         // Components + Pages...
         (new Filesystem)->ensureDirectoryExists(resource_path('js/Components'));
@@ -85,14 +94,23 @@ public function replaceInertia()
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/inertia/js/Pages', resource_path('js/Pages'));
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/inertia/js/Toast', resource_path('js/Toast'));
 
-        // Tailwind / Webpack...
+
         copy(__DIR__ . '/../../stubs/inertia/tailwind.config.js', base_path('tailwind.config.js'));
         copy(__DIR__ . '/../../stubs/inertia/css/app.css', resource_path('css/app.css'));
-        copy(__DIR__ . '/../../stubs/inertia/js/app.js', resource_path('js/app.js'));
-        copy(__DIR__ . '/../../stubs/inertia/.babelrc', base_path('.babelrc'));
-        copy(__DIR__ . '/../../stubs/inertia/webpack.config.js', base_path('webpack.config.js'));
-        copy(__DIR__ . '/../../stubs/inertia/webpack.mix.js', base_path('webpack.mix.js'));
 
+        if(!$this->isVite) {
+            copy(__DIR__ . '/../../stubs/inertia/views/app.mix.blade.php', resource_path('views/app.blade.php'));
+            copy(__DIR__ . '/../../stubs/inertia/.babelrc', base_path('.babelrc'));
+            copy(__DIR__ . '/../../stubs/inertia/webpack.config.js', base_path('webpack.config.js'));
+            copy(__DIR__ . '/../../stubs/inertia/webpack.mix.js', base_path('webpack.mix.js'));
+            copy(__DIR__ . '/../../stubs/inertia/js/app.mix.js', resource_path('js/app.js'));
+        } else {
+            copy(__DIR__ . '/../../stubs/inertia/views/app.vite.blade.php', resource_path('views/app.blade.php'));
+            copy(__DIR__ . '/../../stubs/inertia/vite.config.js', base_path('vite.config.js'));
+            copy(__DIR__ . '/../../stubs/inertia/js/app.vite.js', resource_path('js/app.js'));
+            copy(__DIR__ . '/../../stubs/common/postcss.config.js', base_path('postcss.config.js'));
+        }
+        
         $this->info('Jetstream ui scaffolding replaced successfully.');
         $this->comment('Please execute the "npm install && npm run dev" command to build your assets.');
     }
@@ -103,12 +121,6 @@ public function replaceLivewire()
         $this->updateNodePackages(function ($packages) {
             return [
                 '@alpinejs/collapse' => '^3.4.2',
-                'alpinejs' => '^3.4.2',
-                'autoprefixer' => '^10.3.7',
-                'postcss' => '^8.3.9',
-                'tailwindcss' => '^3.0.7',
-                '@tailwindcss/forms' => '^0.4.0',
-                '@tailwindcss/typography' => '^0.5.0',
                 'perfect-scrollbar' => '^1.5.2'
             ] + $packages;
         });
@@ -124,7 +136,6 @@ public function replaceLivewire()
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/api', resource_path('views/api'));
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/auth', resource_path('views/auth'));
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/components', resource_path('views/components'));
-        (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/layouts', resource_path('views/layouts'));
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/profile', resource_path('views/profile'));
         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/livewire/views/teams', resource_path('views/teams'));
 
@@ -136,9 +147,20 @@ public function replaceLivewire()
 
         // Assets
         copy(__DIR__ . '/../../stubs/livewire/tailwind.config.js', base_path('tailwind.config.js'));
-        copy(__DIR__ . '/../../stubs/livewire/webpack.mix.js', base_path('webpack.mix.js'));
         copy(__DIR__ . '/../../stubs/livewire/css/app.css', resource_path('css/app.css'));
-        copy(__DIR__ . '/../../stubs/livewire/js/app.js', resource_path('js/app.js'));
+        
+        if(!$this->isVite) {
+            copy(__DIR__ . '/../../stubs/livewire/views/layouts/app.mix.blade.php', resource_path('views/layouts/app.blade.php'));
+            copy(__DIR__ . '/../../stubs/livewire/views/layouts/guest.mix.blade.php', resource_path('views/layouts/guest.blade.php'));
+            copy(__DIR__ . '/../../stubs/livewire/webpack.mix.js', base_path('webpack.mix.js'));
+            copy(__DIR__ . '/../../stubs/livewire/js/app.mix.js', resource_path('js/app.js'));
+        } else {
+            copy(__DIR__ . '/../../stubs/livewire/views/layouts/app.vite.blade.php', resource_path('views/layouts/app.blade.php'));
+            copy(__DIR__ . '/../../stubs/livewire/views/layouts/guest.vite.blade.php', resource_path('views/layouts/guest.blade.php'));
+            copy(__DIR__ . '/../../stubs/livewire/vite.config.js', base_path('webpack.mix.js'));
+            copy(__DIR__ . '/../../stubs/livewire/js/app.vite.js', resource_path('js/app.js'));
+            copy(__DIR__ . '/../../stubs/common/postcss.config.js', base_path('postcss.config.js'));
+        }
 
         // Icons
         $this->requireComposerPackages('blade-ui-kit/blade-heroicons:^1.2');
@@ -203,21 +225,6 @@ protected static function updateNodePackages(callable $callback, $dev = true)
         );
     }
 
-    /**
-     * Delete the "node_modules" directory and remove the associated lock files.
-     *
-     * @return void
-     */
-    protected static function flushNodeModules()
-    {
-        tap(new Filesystem, function ($files) {
-            $files->deleteDirectory(base_path('node_modules'));
-
-            $files->delete(base_path('yarn.lock'));
-            $files->delete(base_path('package-lock.json'));
-        });
-    }
-
     /**
      * Replace a given string within a given file.
      *
@@ -230,4 +237,24 @@ protected function replaceInFile($search, $replace, $path)
     {
         file_put_contents($path, str_replace($search, $replace, file_get_contents($path)));
     }
+
+    protected function replaceFavIcon()
+    {
+        (new Filesystem)->ensureDirectoryExists(base_path('public'));
+        copy(__DIR__ . '/../../stubs/common/favicon.ico', base_path('public/favicon.ico'));
+    }
+
+    protected function writeLogo()
+    {
+        $logo = PHP_EOL . '<fg=bright-blue>
+██╗  ██╗     ██╗   ██╗██╗
+██║ ██╔╝     ██║   ██║██║
+█████╔╝█████╗██║   ██║██║
+██╔═██╗╚════╝██║   ██║██║
+██║  ██╗     ╚██████╔╝██║
+╚═╝  ╚═╝      ╚═════╝ ╚═╝
+        </>' . PHP_EOL;
+
+        return $this->line($logo);
+    }
 }

stubs/common/favicon.ico

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

stubs/common/postcss.config.js

@@ -1,22 +1,3 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-@import 'vue-toastification/dist/index.css';
-@import 'perfect-scrollbar/css/perfect-scrollbar.css';
 @import 'tailwindcss/utilities';
-
-.dark .ps__rail-y,
-.dark .ps__rail-x {
-    background-color: transparent !important;
-}
-
-.Vue-Toastification__toast {
-    padding: 0 !important;
-    box-shadow: none !important;
-}
-
-.Vue-Toastification__toast--default,
-.Vue-Toastification__toast--success,
-.Vue-Toastification__toast--info,
-.Vue-Toastification__toast--error {
-    background-color: transparent !important;
-}

stubs/inertia/css/app.css

@@ -14,5 +14,5 @@
 </template>
 
 <script setup>
-import SectionTitle from '@/Components/SectionTitle'
+import SectionTitle from '@/Components/SectionTitle.vue'
 </script>

stubs/inertia/js/Components/ActionMessage.vue

@@ -1,32 +1,34 @@
 <template>
-    <input type="checkbox" :value="value" v-model="proxyChecked"
-           class="text-purple-500 border-gray-300 rounded focus:border-purple-300 focus:ring focus:ring-purple-500 dark:border-gray-600 dark:bg-dark-eval-1 dark:focus:ring-offset-dark-eval-1">
+    <input 
+        type="checkbox" 
+        :value="value" 
+        v-model="proxyChecked"
+        class="text-purple-500 border-gray-300 rounded focus:border-purple-300 focus:ring focus:ring-purple-500 dark:border-gray-600 dark:bg-dark-eval-1 dark:focus:ring-offset-dark-eval-1">
 </template>
 
-<script>
-export default {
-    emits: ['update:checked'],
+<script setup>
+import { computed } from 'vue'
 
-    props: {
-        checked: {
-            type: [Array, Boolean],
-            default: false,
-        },
-        value: {
-            default: null,
-        },
+const emit = defineEmits(['update:checked'])
+
+const props = defineProps({
+    checked: {
+        type: [Array, Boolean],
+        default: false,
+    },
+    value: {
+        type: String,
+        default: null,
     },
+})
 
-    computed: {
-        proxyChecked: {
-            get() {
-                return this.checked;
-            },
+const proxyChecked = computed({
+    get() {
+        return props.checked
+    },
 
-            set(val) {
-                this.$emit("update:checked", val);
-            },
-        },
+    set(val) {
+        emit('update:checked', val)
     },
-}
+})
 </script>

stubs/inertia/js/Components/ActionSection.vue

@@ -1,5 +1,5 @@
 <template>
-    <modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 dark:bg-dark-eval-1">
             <div class="sm:flex sm:items-start">
                 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -21,39 +21,32 @@
         </div>
 
         <div class="px-6 py-4 bg-gray-100 text-right dark:bg-dark-eval-2">
-            <slot name="footer">
-            </slot>
+            <slot name="footer"></slot>
         </div>
-    </modal>
+    </Modal>
 </template>
 
-<script>
-    import { defineComponent } from 'vue'
-    import Modal from './Modal.vue'
-
-    export default defineComponent({
-        emits: ['close'],
-
-        components: {
-            Modal,
-        },
-
-        props: {
-            show: {
-                default: false
-            },
-            maxWidth: {
-                default: '2xl'
-            },
-            closeable: {
-                default: true
-            },
-        },
-
-        methods: {
-            close() {
-                this.$emit('close')
-            },
-        }
-    })
+<script setup>
+import Modal from '@/Components/Modal.vue'
+
+const emit = defineEmits(['close'])
+
+defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    maxWidth: {
+        type: String,
+        default: '2xl',
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+const close = () => {
+    emit('close')
+}
 </script>