[7.0] Use blade components (#16)

* Redesign with blade components * Remove translation stub * Update default welcome view * Move input padding * Change bg color * Minor UI tweaks * Update readme * Apply fixes from StyleCI (#17) * Move status flash code * Update example component styles * Add example markup * Update readme * Update readme * Remove v-cloak * Minor UI tweaks * Add echo comments * Update Tailwind to 1.7 * Add route attribute to nav link * Apply fixes from StyleCI (#18) Co-authored-by: Zak Nesler <zaknesler@users.noreply.github.com> * Update tailwind file * Add preview screenshots * Change font sizes * Increase nav padding * Update deps * Add support for Laravel 8 Co-authored-by: Zak Nesler <zaknesler@users.noreply.github.com>
zaknesler · Aug 25, 2020 · 6f5551e · 6f5551e
1 parent cc76656
commit 6f5551e
Show file tree

Hide file tree

Showing 33 changed files with 449 additions and 850 deletions.
diff --git a/composer.json b/composer.json
@@ -17,9 +17,10 @@
     "minimum-stability": "stable",
     "require": {
         "php": "^7.2",
-        "laravel/ui": "^2.0",
-        "illuminate/filesystem": "^7.0",
-        "illuminate/support": "^7.0"
+        "laravel/ui": "^2.2",
+        "illuminate/console": "^7.0|^8.0",
+        "illuminate/filesystem": "^7.0|^8.0",
+        "illuminate/support": "^7.0|^8.0"
     },
     "autoload": {
         "psr-4": {

diff --git a/composer.lock b/composer.lock
diff --git a/readme.md b/readme.md
@@ -2,28 +2,30 @@
 
 [![Latest Stable Version](https://poser.pugx.org/zaknesler/tailwind-preset/v/stable)](https://packagist.org/packages/zaknesler/tailwind-preset) [![Total Downloads](https://poser.pugx.org/zaknesler/tailwind-preset/downloads)](https://packagist.org/packages/zaknesler/tailwind-preset) [![License](https://poser.pugx.org/zaknesler/tailwind-preset/license)](https://packagist.org/packages/zaknesler/tailwind-preset)
 
-A Laravel 7+ front-end preset for [Tailwind CSS](https://tailwindcss.com). This preset comes bundled with Vue.js and an example component, as well as a responsive navigation menu.
+Laravel 7+ front-end preset for [Tailwind CSS](https://tailwindcss.com). Includes Vue.js (and an example component), a clean and fully-responsive UI, and the utilization of Blade components to reduce code duplication.
 
-This preset uses Laravel Mix to compile and minify assets. Tailwind 1.4 includes PurgeCSS by default, and this preset is configured to purge the proper files.
+This preset also uses Laravel Mix to compile and minify assets. Tailwind comes packaged with PurgeCSS, and this preset is configured to purge the proper files.
 
-> This preset is built for Laravel 7 and up. For Laravel 5 or 6, please use [version 5.0](https://github.com/zaknesler/tailwind-preset/tree/a35309799e93fe384d16ead531add16b98b634e1).
+> This preset is built for Laravel 7 and up. For Laravel 5 or 6, please use [version 5.0](https://github.com/zaknesler/tailwind-preset/tree/v5.0.0).
 
-**[Live Demo](https://preset.zaknesler.com)** &middot; [Example Repository](https://github.com/zaknesler/tw-preset-demo)
+<!-- **[Live Demo](https://preset.zak.bz)** &middot; [Example Repository](https://github.com/zaknesler/tw-preset-demo) -->
 
 <details>
-<summary>View screenshots</summary>
+<summary>View preview screenshots</summary>
 
-<img alt="Welcome page" src="https://user-images.githubusercontent.com/7189795/80769741-37d0d700-8b1c-11ea-9b16-e76fd8cde9f4.png">
+![Welcome View](https://user-images.githubusercontent.com/7189795/91107549-8b26e200-e643-11ea-82f7-27ef51da169d.png)
 
-<img alt="Login page" src="https://user-images.githubusercontent.com/7189795/80769744-399a9a80-8b1c-11ea-9caf-00783b9acc80.png">
+![Login View](https://user-images.githubusercontent.com/7189795/91107547-8b26e200-e643-11ea-9684-fe576feb187b.png)
 
-<img alt="Home page" src="https://user-images.githubusercontent.com/7189795/80769745-3acbc780-8b1c-11ea-9010-25d38f9a3288.png">
+![Home View](https://user-images.githubusercontent.com/7189795/91107546-8b26e200-e643-11ea-9a38-8d5007c3f6c5.png)
+
+![Responsive Nav](https://user-images.githubusercontent.com/7189795/91107548-8b26e200-e643-11ea-8f40-48449450dc60.png)
 
 </details>
 
 ### Warning
 
-> Laravel presets are meant to be installed onto a fresh instance of Laravel. This preset will **overwrite** your existing views, assets, and Home controller. Please use with caution.
+> Laravel presets are designed to be installed onto a fresh instance of Laravel. This preset will **overwrite** your existing views, assets, and Home controller. Please use with caution.
 
 ### Installation
 
@@ -64,14 +66,8 @@ This preset uses Laravel Mix to compile and minify assets. Tailwind 1.4 includes
 
 ### Customization
 
-Tailwind is built to be fully customizable. The `tailwind.config.js` file that this preset provides includes a handful of custom options to help get you started, including adding [Inter](https://fonts.google.com/specimen/Inter) to the default font stack, a `theme` color palette for quick customization, as well as configuration for the [Tailwind custom-forms](https://tailwindcss-custom-forms.netlify.app/) plugin.
-
-The `theme` color palette, by default, simply destructures Tailwind's blue color palette, but can be easily swapped out for your own color keys. For more information, visit the [Tailwind color customization page](https://tailwindcss.com/docs/customizing-colors).
-
-I have tried to design this preset to use as many Tailwind features as possible. This includes using a plugin, overriding default theme values, configuration destructuring, and using PurgeCSS. To get the most out of Tailwind, it is recommended that you take a deep dive into Tailwind's [incredible documentation](https://tailwindcss.com/docs/installation), and more importantly... get your hands dirty with it!
-
-### Localization
+Tailwind is built to be fully customizable, and thus, the `tailwind.config.js` file that comes with this preset includes a handful of customizations to help get you started. These include adding [Inter](https://fonts.google.com/specimen/Inter) to the default font stack, a `theme` color palette for quick customization, as well as configuration for the [Tailwind custom-forms](https://tailwindcss-custom-forms.netlify.app/) plugin.
 
-This preset includes text that is already configured to be easily translated. An `en.json` file will be copied into your application's `resources/lang` directory when you install the authentication scaffolding. This file includes keys for all of the on-screen text found in this preset.
+The `theme` color palette, by default, simply destructures Tailwind's blue color palette, but can be easily swapped out for your own color palette. For more information, visit the [Tailwind color customization page](https://tailwindcss.com/docs/customizing-colors).
 
-To translate these values, duplicate the `en.json` file and rename it to `{language}.json`, and begin translating the values for each `"key": "value"` pair. For more about localization, please refer to the [Laravel documentation](https://laravel.com/docs/6.x/localization).
+This preset is designed to utilize many Tailwind features, including using a plugin, overriding default theme values, extracting components using `@apply`, and configuration for PurgeCSS. To really get the most out of Tailwind, you need to use it! Take a deep dive into Tailwind's [incredible documentation](https://tailwindcss.com/docs/installation), and most importantly... get your hands dirty with it! I hope this preset helps you out!
diff --git a/src/TailwindPreset.php b/src/TailwindPreset.php
@@ -9,6 +9,45 @@
 
 class TailwindPreset extends Preset
 {
+    /**
+     * Views for the default installation.
+     *
+     * @var array
+     */
+    protected static $defaultViews = [
+        'welcome.stub',
+    ];
+
+    /**
+     * Views for the authentication scaffolding.
+     *
+     * @var array
+     */
+    protected static $authViews = [
+        'components/form/action.stub',
+        'components/form/checkbox.stub',
+        'components/form/input.stub',
+        'components/template/base.stub',
+        'components/template/branded.stub',
+        'components/template/error.stub',
+        'components/template/form.stub',
+        'components/link.stub',
+        'components/nav-item.stub',
+        'auth/passwords/confirm.stub',
+        'auth/passwords/email.stub',
+        'auth/passwords/reset.stub',
+        'auth/login.stub',
+        'auth/register.stub',
+        'auth/verify.stub',
+        'errors/404.stub',
+        'errors/419.stub',
+        'errors/500.stub',
+        'errors/503.stub',
+        'partials/_header.stub',
+        'home.stub',
+        'welcome.stub',
+    ];
+
     /**
      * Setup basic assets.
      *
@@ -35,9 +74,7 @@ public static function install()
     {
         static::setup();
 
-        static::installViews('default', [
-            'welcome.stub',
-        ]);
+        static::installViews('default', static::$defaultViews);
     }
 
     /**
@@ -52,34 +89,20 @@ public static function installAuth()
 
         static::createResourceDirectories([
             'views/auth/passwords',
+            'views/components/form',
+            'views/components/template',
             'views/errors',
-            'views/layouts/partials',
+            'views/partials',
         ]);
 
-        static::installViews('auth', [
-            'auth/passwords/confirm.stub',
-            'auth/passwords/email.stub',
-            'auth/passwords/reset.stub',
-            'auth/login.stub',
-            'auth/register.stub',
-            'auth/verify.stub',
-            'errors/404.stub',
-            'errors/419.stub',
-            'errors/500.stub',
-            'errors/503.stub',
-            'layouts/partials/_header.stub',
-            'layouts/base.stub',
-            'home.stub',
-            'welcome.stub',
-        ]);
+        static::installViews('auth', static::$authViews);
 
         copy(
             base_path('vendor/laravel/ui/stubs/migrations/2014_10_12_100000_create_password_resets_table.php'),
             base_path('database/migrations/2014_10_12_100000_create_password_resets_table.php')
         );
 
         file_put_contents(app_path('Http/Controllers/HomeController.php'), static::compileControllerStub());
-        copy(__DIR__.'/stubs/en.stub', resource_path('lang/en.json'));
     }
 
     /**
@@ -93,10 +116,10 @@ protected static function updatePackageArray(array $packages)
         return [
             '@tailwindcss/custom-forms' => '^0.2',
             'autoprefixer' => '^9.8',
-            'axios' => '^0.19',
-            'cross-env' => '^6.0',
+            'axios' => '^0.20',
+            'cross-env' => '^7.0',
             'laravel-mix' => '^5.0',
-            'tailwindcss' => '^1.6',
+            'tailwindcss' => '^1.7',
             'vue' => '^2.6',
             'vue-template-compiler' => '^2.6',
         ];

diff --git a/src/stubs/css/tailwind.stub b/src/stubs/css/tailwind.stub
@@ -1,20 +1,8 @@
-[v-cloak] {
-    display: none;
-}
-
 @tailwind base;
 @tailwind components;
 
 .btn {
-    @apply px-6 py-3 bg-brand-500 font-semibold text-white rounded-lg border-none appearance-none transition duration-100 transition-shadow;
-}
-
-.btn:hover {
-    @apply bg-brand-600;
-}
-
-.btn:focus {
-    @apply outline-none shadow-outline;
+    @apply px-6 py-3 bg-brand-500 font-semibold text-white rounded-lg shadow-sm border-none cursor-pointer appearance-none transition duration-100 hover:bg-brand-600 focus:outline-none focus:shadow-outline;
 }
 
 @tailwind utilities;