From 5886384ad0d2b10085922b5ecb5117632811e39f Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 12 May 2021 13:46:00 -0500 Subject: [PATCH 01/16] use common folder for inertia frontend --- src/Console/InstallCommand.php | 26 +++++++++---------- .../Auth/AuthenticatedSessionController.php | 0 .../Auth/ConfirmablePasswordController.php | 0 ...mailVerificationNotificationController.php | 0 .../EmailVerificationPromptController.php | 0 .../Auth/NewPasswordController.php | 0 .../Auth/PasswordResetLinkController.php | 0 .../Auth/RegisteredUserController.php | 0 .../Auth/VerifyEmailController.php | 0 .../Http/Middleware/HandleInertiaRequests.php | 0 .../resources/css/app.css | 0 .../resources/views/app.blade.php | 0 .../routes/auth.php | 0 .../routes/web.php | 0 .../tailwind.config.js | 0 .../webpack.config.js | 0 .../webpack.mix.js | 0 .../js/Components/ApplicationLogo.vue | 0 .../resources/js/Components/Button.vue | 0 .../resources/js/Components/Checkbox.vue | 0 .../resources/js/Components/Dropdown.vue | 0 .../resources/js/Components/DropdownLink.vue | 0 .../resources/js/Components/Input.vue | 0 .../resources/js/Components/InputError.vue | 0 .../resources/js/Components/Label.vue | 0 .../resources/js/Components/NavLink.vue | 0 .../js/Components/ResponsiveNavLink.vue | 0 .../js/Components/ValidationErrors.vue | 0 .../resources/js/Layouts/Authenticated.vue | 0 .../resources/js/Layouts/Guest.vue | 0 .../js/Pages/Auth/ConfirmPassword.vue | 0 .../js/Pages/Auth/ForgotPassword.vue | 0 .../resources/js/Pages/Auth/Login.vue | 0 .../resources/js/Pages/Auth/Register.vue | 0 .../resources/js/Pages/Auth/ResetPassword.vue | 0 .../resources/js/Pages/Auth/VerifyEmail.vue | 0 .../resources/js/Pages/Dashboard.vue | 0 .../resources/js/Pages/Welcome.vue | 0 .../resources/js/app.js | 0 39 files changed, 13 insertions(+), 13 deletions(-) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/AuthenticatedSessionController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/ConfirmablePasswordController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/EmailVerificationNotificationController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/EmailVerificationPromptController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/NewPasswordController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/PasswordResetLinkController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/RegisteredUserController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Controllers/Auth/VerifyEmailController.php (100%) rename stubs/{inertia => inertia-common}/app/Http/Middleware/HandleInertiaRequests.php (100%) rename stubs/{inertia => inertia-common}/resources/css/app.css (100%) rename stubs/{inertia => inertia-common}/resources/views/app.blade.php (100%) rename stubs/{inertia => inertia-common}/routes/auth.php (100%) rename stubs/{inertia => inertia-common}/routes/web.php (100%) rename stubs/{inertia => inertia-common}/tailwind.config.js (100%) rename stubs/{inertia => inertia-common}/webpack.config.js (100%) rename stubs/{inertia => inertia-common}/webpack.mix.js (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/ApplicationLogo.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/Button.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/Checkbox.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/Dropdown.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/DropdownLink.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/Input.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/InputError.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/Label.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/NavLink.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/ResponsiveNavLink.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Components/ValidationErrors.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Layouts/Authenticated.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Layouts/Guest.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Auth/ConfirmPassword.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Auth/ForgotPassword.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Auth/Login.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Auth/Register.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Auth/ResetPassword.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Auth/VerifyEmail.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Dashboard.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/Pages/Welcome.vue (100%) rename stubs/{inertia => inertia-vue}/resources/js/app.js (100%) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index adb9edf52..9b585a89b 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -122,7 +122,7 @@ protected function installInertiaStack() // Controllers... (new Filesystem)->ensureDirectoryExists(app_path('Http/Controllers/Auth')); - (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia/app/Http/Controllers/Auth', app_path('Http/Controllers/Auth')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-common/app/Http/Controllers/Auth', app_path('Http/Controllers/Auth')); // Requests... (new Filesystem)->ensureDirectoryExists(app_path('Http/Requests/Auth')); @@ -131,26 +131,26 @@ protected function installInertiaStack() // Middleware... $this->installMiddlewareAfter('SubstituteBindings::class', '\App\Http\Middleware\HandleInertiaRequests::class'); - copy(__DIR__.'/../../stubs/inertia/app/Http/Middleware/HandleInertiaRequests.php', app_path('Http/Middleware/HandleInertiaRequests.php')); + copy(__DIR__.'/../../stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php', app_path('Http/Middleware/HandleInertiaRequests.php')); // Views... - copy(__DIR__.'/../../stubs/inertia/resources/views/app.blade.php', resource_path('views/app.blade.php')); + copy(__DIR__.'/../../stubs/inertia-common/resources/views/app.blade.php', resource_path('views/app.blade.php')); // Components + Pages... (new Filesystem)->ensureDirectoryExists(resource_path('js/Components')); (new Filesystem)->ensureDirectoryExists(resource_path('js/Layouts')); (new Filesystem)->ensureDirectoryExists(resource_path('js/Pages')); - (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia/resources/js/Components', resource_path('js/Components')); - (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia/resources/js/Layouts', resource_path('js/Layouts')); - (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia/resources/js/Pages', resource_path('js/Pages')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-vue/resources/js/Components', resource_path('js/Components')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-vue/resources/js/Layouts', resource_path('js/Layouts')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-vue/resources/js/Pages', resource_path('js/Pages')); // Tests... (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/default/tests/Feature', base_path('tests/Feature')); // Routes... - copy(__DIR__.'/../../stubs/inertia/routes/web.php', base_path('routes/web.php')); - copy(__DIR__.'/../../stubs/inertia/routes/auth.php', base_path('routes/auth.php')); + copy(__DIR__.'/../../stubs/inertia-common/routes/web.php', base_path('routes/web.php')); + copy(__DIR__.'/../../stubs/inertia-common/routes/auth.php', base_path('routes/auth.php')); // "Dashboard" Route... $this->replaceInFile('/home', '/dashboard', resource_path('js/Pages/Welcome.vue')); @@ -158,11 +158,11 @@ protected function installInertiaStack() $this->replaceInFile('/home', '/dashboard', app_path('Providers/RouteServiceProvider.php')); // Tailwind / Webpack... - copy(__DIR__.'/../../stubs/inertia/tailwind.config.js', base_path('tailwind.config.js')); - copy(__DIR__.'/../../stubs/inertia/webpack.mix.js', base_path('webpack.mix.js')); - copy(__DIR__.'/../../stubs/inertia/webpack.config.js', base_path('webpack.config.js')); - copy(__DIR__.'/../../stubs/inertia/resources/css/app.css', resource_path('css/app.css')); - copy(__DIR__.'/../../stubs/inertia/resources/js/app.js', resource_path('js/app.js')); + copy(__DIR__.'/../../stubs/inertia-common/tailwind.config.js', base_path('tailwind.config.js')); + copy(__DIR__.'/../../stubs/inertia-common/webpack.mix.js', base_path('webpack.mix.js')); + copy(__DIR__.'/../../stubs/inertia-common/webpack.config.js', base_path('webpack.config.js')); + copy(__DIR__.'/../../stubs/inertia-common/resources/css/app.css', resource_path('css/app.css')); + copy(__DIR__.'/../../stubs/inertia-vue/resources/js/app.js', resource_path('js/app.js')); $this->info('Breeze scaffolding installed successfully.'); $this->comment('Please execute the "npm install && npm run dev" command to build your assets.'); diff --git a/stubs/inertia/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/stubs/inertia-common/app/Http/Controllers/Auth/AuthenticatedSessionController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/AuthenticatedSessionController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/AuthenticatedSessionController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/ConfirmablePasswordController.php b/stubs/inertia-common/app/Http/Controllers/Auth/ConfirmablePasswordController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/ConfirmablePasswordController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/ConfirmablePasswordController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/EmailVerificationNotificationController.php b/stubs/inertia-common/app/Http/Controllers/Auth/EmailVerificationNotificationController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/EmailVerificationNotificationController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/EmailVerificationNotificationController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/EmailVerificationPromptController.php b/stubs/inertia-common/app/Http/Controllers/Auth/EmailVerificationPromptController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/EmailVerificationPromptController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/EmailVerificationPromptController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/NewPasswordController.php b/stubs/inertia-common/app/Http/Controllers/Auth/NewPasswordController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/NewPasswordController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/NewPasswordController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/PasswordResetLinkController.php b/stubs/inertia-common/app/Http/Controllers/Auth/PasswordResetLinkController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/PasswordResetLinkController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/PasswordResetLinkController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/RegisteredUserController.php b/stubs/inertia-common/app/Http/Controllers/Auth/RegisteredUserController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/RegisteredUserController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/RegisteredUserController.php diff --git a/stubs/inertia/app/Http/Controllers/Auth/VerifyEmailController.php b/stubs/inertia-common/app/Http/Controllers/Auth/VerifyEmailController.php similarity index 100% rename from stubs/inertia/app/Http/Controllers/Auth/VerifyEmailController.php rename to stubs/inertia-common/app/Http/Controllers/Auth/VerifyEmailController.php diff --git a/stubs/inertia/app/Http/Middleware/HandleInertiaRequests.php b/stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php similarity index 100% rename from stubs/inertia/app/Http/Middleware/HandleInertiaRequests.php rename to stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php diff --git a/stubs/inertia/resources/css/app.css b/stubs/inertia-common/resources/css/app.css similarity index 100% rename from stubs/inertia/resources/css/app.css rename to stubs/inertia-common/resources/css/app.css diff --git a/stubs/inertia/resources/views/app.blade.php b/stubs/inertia-common/resources/views/app.blade.php similarity index 100% rename from stubs/inertia/resources/views/app.blade.php rename to stubs/inertia-common/resources/views/app.blade.php diff --git a/stubs/inertia/routes/auth.php b/stubs/inertia-common/routes/auth.php similarity index 100% rename from stubs/inertia/routes/auth.php rename to stubs/inertia-common/routes/auth.php diff --git a/stubs/inertia/routes/web.php b/stubs/inertia-common/routes/web.php similarity index 100% rename from stubs/inertia/routes/web.php rename to stubs/inertia-common/routes/web.php diff --git a/stubs/inertia/tailwind.config.js b/stubs/inertia-common/tailwind.config.js similarity index 100% rename from stubs/inertia/tailwind.config.js rename to stubs/inertia-common/tailwind.config.js diff --git a/stubs/inertia/webpack.config.js b/stubs/inertia-common/webpack.config.js similarity index 100% rename from stubs/inertia/webpack.config.js rename to stubs/inertia-common/webpack.config.js diff --git a/stubs/inertia/webpack.mix.js b/stubs/inertia-common/webpack.mix.js similarity index 100% rename from stubs/inertia/webpack.mix.js rename to stubs/inertia-common/webpack.mix.js diff --git a/stubs/inertia/resources/js/Components/ApplicationLogo.vue b/stubs/inertia-vue/resources/js/Components/ApplicationLogo.vue similarity index 100% rename from stubs/inertia/resources/js/Components/ApplicationLogo.vue rename to stubs/inertia-vue/resources/js/Components/ApplicationLogo.vue diff --git a/stubs/inertia/resources/js/Components/Button.vue b/stubs/inertia-vue/resources/js/Components/Button.vue similarity index 100% rename from stubs/inertia/resources/js/Components/Button.vue rename to stubs/inertia-vue/resources/js/Components/Button.vue diff --git a/stubs/inertia/resources/js/Components/Checkbox.vue b/stubs/inertia-vue/resources/js/Components/Checkbox.vue similarity index 100% rename from stubs/inertia/resources/js/Components/Checkbox.vue rename to stubs/inertia-vue/resources/js/Components/Checkbox.vue diff --git a/stubs/inertia/resources/js/Components/Dropdown.vue b/stubs/inertia-vue/resources/js/Components/Dropdown.vue similarity index 100% rename from stubs/inertia/resources/js/Components/Dropdown.vue rename to stubs/inertia-vue/resources/js/Components/Dropdown.vue diff --git a/stubs/inertia/resources/js/Components/DropdownLink.vue b/stubs/inertia-vue/resources/js/Components/DropdownLink.vue similarity index 100% rename from stubs/inertia/resources/js/Components/DropdownLink.vue rename to stubs/inertia-vue/resources/js/Components/DropdownLink.vue diff --git a/stubs/inertia/resources/js/Components/Input.vue b/stubs/inertia-vue/resources/js/Components/Input.vue similarity index 100% rename from stubs/inertia/resources/js/Components/Input.vue rename to stubs/inertia-vue/resources/js/Components/Input.vue diff --git a/stubs/inertia/resources/js/Components/InputError.vue b/stubs/inertia-vue/resources/js/Components/InputError.vue similarity index 100% rename from stubs/inertia/resources/js/Components/InputError.vue rename to stubs/inertia-vue/resources/js/Components/InputError.vue diff --git a/stubs/inertia/resources/js/Components/Label.vue b/stubs/inertia-vue/resources/js/Components/Label.vue similarity index 100% rename from stubs/inertia/resources/js/Components/Label.vue rename to stubs/inertia-vue/resources/js/Components/Label.vue diff --git a/stubs/inertia/resources/js/Components/NavLink.vue b/stubs/inertia-vue/resources/js/Components/NavLink.vue similarity index 100% rename from stubs/inertia/resources/js/Components/NavLink.vue rename to stubs/inertia-vue/resources/js/Components/NavLink.vue diff --git a/stubs/inertia/resources/js/Components/ResponsiveNavLink.vue b/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue similarity index 100% rename from stubs/inertia/resources/js/Components/ResponsiveNavLink.vue rename to stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue diff --git a/stubs/inertia/resources/js/Components/ValidationErrors.vue b/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue similarity index 100% rename from stubs/inertia/resources/js/Components/ValidationErrors.vue rename to stubs/inertia-vue/resources/js/Components/ValidationErrors.vue diff --git a/stubs/inertia/resources/js/Layouts/Authenticated.vue b/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue similarity index 100% rename from stubs/inertia/resources/js/Layouts/Authenticated.vue rename to stubs/inertia-vue/resources/js/Layouts/Authenticated.vue diff --git a/stubs/inertia/resources/js/Layouts/Guest.vue b/stubs/inertia-vue/resources/js/Layouts/Guest.vue similarity index 100% rename from stubs/inertia/resources/js/Layouts/Guest.vue rename to stubs/inertia-vue/resources/js/Layouts/Guest.vue diff --git a/stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Auth/ConfirmPassword.vue rename to stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue diff --git a/stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Auth/ForgotPassword.vue rename to stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue diff --git a/stubs/inertia/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Auth/Login.vue rename to stubs/inertia-vue/resources/js/Pages/Auth/Login.vue diff --git a/stubs/inertia/resources/js/Pages/Auth/Register.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Auth/Register.vue rename to stubs/inertia-vue/resources/js/Pages/Auth/Register.vue diff --git a/stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Auth/ResetPassword.vue rename to stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue diff --git a/stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue b/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Auth/VerifyEmail.vue rename to stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue diff --git a/stubs/inertia/resources/js/Pages/Dashboard.vue b/stubs/inertia-vue/resources/js/Pages/Dashboard.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Dashboard.vue rename to stubs/inertia-vue/resources/js/Pages/Dashboard.vue diff --git a/stubs/inertia/resources/js/Pages/Welcome.vue b/stubs/inertia-vue/resources/js/Pages/Welcome.vue similarity index 100% rename from stubs/inertia/resources/js/Pages/Welcome.vue rename to stubs/inertia-vue/resources/js/Pages/Welcome.vue diff --git a/stubs/inertia/resources/js/app.js b/stubs/inertia-vue/resources/js/app.js similarity index 100% rename from stubs/inertia/resources/js/app.js rename to stubs/inertia-vue/resources/js/app.js From 15a2461d5e45e64d0111dda627b762c73233661e Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 12 May 2021 14:09:08 -0500 Subject: [PATCH 02/16] adding react things --- src/Console/InstallCommand.php | 98 +++++- .../resources/js/Components/Forms/Button.js | 12 + .../resources/js/Components/Forms/Checkbox.js | 16 + .../js/Components/Forms/TextInput.js | 30 ++ .../js/Components/Forms/ValidationErrors.js | 18 ++ .../js/Components/UI/ApplicationLogo.js | 9 + .../resources/js/Components/UI/Dropdown.js | 74 +++++ .../resources/js/Components/UI/NavLink.js | 17 + .../js/Components/UI/ResponsiveNavLink.js | 17 + .../resources/js/Layouts/Authenticated.js | 161 +++++++++ .../resources/js/Layouts/Guest.js | 19 ++ .../js/Pages/Auth/ConfirmPassword.js | 56 ++++ .../resources/js/Pages/Auth/ForgotPassword.js | 59 ++++ .../resources/js/Pages/Auth/Login.js | 94 ++++++ .../resources/js/Pages/Auth/Register.js | 103 ++++++ .../resources/js/Pages/Auth/ResetPassword.js | 82 +++++ .../resources/js/Pages/Auth/VerifyEmail.js | 41 +++ .../resources/js/Pages/Dashboard.js | 27 ++ .../resources/js/Pages/Welcome.js | 305 ++++++++++++++++++ stubs/inertia-react/resources/js/app.js | 19 ++ stubs/inertia-react/resources/js/bootstrap.js | 28 ++ stubs/inertia-vue/resources/js/bootstrap.js | 28 ++ 22 files changed, 1304 insertions(+), 9 deletions(-) create mode 100644 stubs/inertia-react/resources/js/Components/Forms/Button.js create mode 100644 stubs/inertia-react/resources/js/Components/Forms/Checkbox.js create mode 100644 stubs/inertia-react/resources/js/Components/Forms/TextInput.js create mode 100644 stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js create mode 100644 stubs/inertia-react/resources/js/Components/UI/ApplicationLogo.js create mode 100644 stubs/inertia-react/resources/js/Components/UI/Dropdown.js create mode 100644 stubs/inertia-react/resources/js/Components/UI/NavLink.js create mode 100644 stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js create mode 100644 stubs/inertia-react/resources/js/Layouts/Authenticated.js create mode 100644 stubs/inertia-react/resources/js/Layouts/Guest.js create mode 100644 stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js create mode 100644 stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js create mode 100644 stubs/inertia-react/resources/js/Pages/Auth/Login.js create mode 100644 stubs/inertia-react/resources/js/Pages/Auth/Register.js create mode 100644 stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js create mode 100644 stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js create mode 100644 stubs/inertia-react/resources/js/Pages/Dashboard.js create mode 100644 stubs/inertia-react/resources/js/Pages/Welcome.js create mode 100644 stubs/inertia-react/resources/js/app.js create mode 100644 stubs/inertia-react/resources/js/bootstrap.js create mode 100644 stubs/inertia-vue/resources/js/bootstrap.js diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 9b585a89b..6863ef6de 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -14,8 +14,7 @@ class InstallCommand extends Command * * @var string */ - protected $signature = 'breeze:install - {--inertia : Indicates that the Inertia stack should be installed} + protected $signature = 'breeze:install {stack=blade : The development stack that should be installed} {--composer=global : Absolute path to the Composer binary which should be used to install packages}'; /** @@ -32,8 +31,12 @@ class InstallCommand extends Command */ public function handle() { - if ($this->option('inertia')) { - return $this->installInertiaStack(); + if ($this->argument('stack') === 'vue') { + return $this->installInertiaVueStack(); + } + + if ($this->argument('stack') === 'react') { + return $this->installInertiaReactStack(); } // NPM Packages... @@ -94,11 +97,11 @@ public function handle() } /** - * Install the Inertia Breeze stack. + * Install the Inertia Vue Breeze stack. * * @return void */ - protected function installInertiaStack() + protected function installInertiaVueStack() { // Install Inertia... $this->requireComposerPackages('inertiajs/inertia-laravel:^0.3.5', 'laravel/sanctum:^2.6', 'tightenco/ziggy:^1.0'); @@ -112,9 +115,9 @@ protected function installInertiaStack() '@tailwindcss/forms' => '^0.2.1', '@vue/compiler-sfc' => '^3.0.5', 'autoprefixer' => '^10.2.4', - 'postcss' => '^8.2.1', - 'postcss-import' => '^12.0.1', - 'tailwindcss' => '^2.0.3', + 'postcss' => '^8.2.13', + 'postcss-import' => '^14.0.1', + 'tailwindcss' => '^2.1.2', 'vue' => '^3.0.5', 'vue-loader' => '^16.1.2', ] + $packages; @@ -168,6 +171,83 @@ protected function installInertiaStack() $this->comment('Please execute the "npm install && npm run dev" command to build your assets.'); } + /** + * Install the Inertia React Breeze stack. + * + * @return void + */ + protected function installInertiaReactStack() + { + // Install Inertia... + $this->requireComposerPackages('inertiajs/inertia-laravel:^0.3.5', 'laravel/sanctum:^2.6', 'tightenco/ziggy:^1.0'); + + // NPM Packages... + $this->updateNodePackages(function ($packages) { + return [ + '@inertiajs/inertia' => '^0.8.4', + '@inertiajs/inertia-react' => '^0.5.12', + '@inertiajs/progress' => '^0.2.4', + '@tailwindcss/forms' => '^0.3.2', + 'autoprefixer' => '^10.2.4', + 'postcss' => '^8.2.13', + 'postcss-import' => '^14.0.1', + 'tailwindcss' => '^2.1.2', + 'react' => '^17.0.2', + 'react-dom' => '^17.0.2', + '@babel/preset-react' => '^7.13.13', + ] + $packages; + }); + + // Controllers... + (new Filesystem)->ensureDirectoryExists(app_path('Http/Controllers/Auth')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-common/app/Http/Controllers/Auth', app_path('Http/Controllers/Auth')); + + // Requests... + (new Filesystem)->ensureDirectoryExists(app_path('Http/Requests/Auth')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/default/App/Http/Requests/Auth', app_path('Http/Requests/Auth')); + + // Middleware... + $this->installMiddlewareAfter('SubstituteBindings::class', '\App\Http\Middleware\HandleInertiaRequests::class'); + + copy(__DIR__.'/../../stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php', app_path('Http/Middleware/HandleInertiaRequests.php')); + + // Views... + copy(__DIR__.'/../../stubs/inertia-common/resources/views/app.blade.php', resource_path('views/app.blade.php')); + + // Components + Pages... + (new Filesystem)->ensureDirectoryExists(resource_path('js/Components')); + (new Filesystem)->ensureDirectoryExists(resource_path('js/Layouts')); + (new Filesystem)->ensureDirectoryExists(resource_path('js/Pages')); + + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-react/resources/js/Components', resource_path('js/Components')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-react/resources/js/Layouts', resource_path('js/Layouts')); + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-react/resources/js/Pages', resource_path('js/Pages')); + + // Tests... + (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/default/tests/Feature', base_path('tests/Feature')); + + // Routes... + copy(__DIR__.'/../../stubs/inertia-common/routes/web.php', base_path('routes/web.php')); + copy(__DIR__.'/../../stubs/inertia-common/routes/auth.php', base_path('routes/auth.php')); + + // "Dashboard" Route... + $this->replaceInFile('/home', '/dashboard', resource_path('js/Pages/Welcome.js')); + $this->replaceInFile('Home', 'Dashboard', resource_path('js/Pages/Welcome.js')); + $this->replaceInFile('/home', '/dashboard', app_path('Providers/RouteServiceProvider.php')); + + // Tailwind / Webpack... + copy(__DIR__.'/../../stubs/inertia-common/tailwind.config.js', base_path('tailwind.config.js')); + copy(__DIR__.'/../../stubs/inertia-common/webpack.mix.js', base_path('webpack.mix.js')); + copy(__DIR__.'/../../stubs/inertia-common/webpack.config.js', base_path('webpack.config.js')); + copy(__DIR__.'/../../stubs/inertia-common/resources/css/app.css', resource_path('css/app.css')); + copy(__DIR__.'/../../stubs/inertia-react/resources/js/app.js', resource_path('js/app.js')); + + $this->replaceInFile('.vue()', '.react()', base_path('webpack.mix.js')); + + $this->info('Breeze scaffolding installed successfully.'); + $this->comment('Please execute the "npm install && npm run dev" command to build your assets.'); + } + /** * Install the middleware to a group in the application Http Kernel. * diff --git a/stubs/inertia-react/resources/js/Components/Forms/Button.js b/stubs/inertia-react/resources/js/Components/Forms/Button.js new file mode 100644 index 000000000..aa6bb9adf --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/Forms/Button.js @@ -0,0 +1,12 @@ +import React from "react"; + +export default function Button({ children }) { + return ( + + ); +} diff --git a/stubs/inertia-react/resources/js/Components/Forms/Checkbox.js b/stubs/inertia-react/resources/js/Components/Forms/Checkbox.js new file mode 100644 index 000000000..6a37428ea --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/Forms/Checkbox.js @@ -0,0 +1,16 @@ +import React from "react"; + +export default function Checkbox({ name, value, label, handleChange }) { + return ( + + ); +} diff --git a/stubs/inertia-react/resources/js/Components/Forms/TextInput.js b/stubs/inertia-react/resources/js/Components/Forms/TextInput.js new file mode 100644 index 000000000..f33e35948 --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/Forms/TextInput.js @@ -0,0 +1,30 @@ +import React, { useEffect, useRef } from "react"; + +export default function TextInput({ label, type = 'text', name, value, error, handleChange, autoComplete, isFocused }) { + + const input = useRef(); + + useEffect(() => { + if (isFocused) { + input.current.focus(); + } + }, []); + + return ( +
+ {label && } + handleChange(e)} + ref={input} + autoComplete={autoComplete} + required + /> + + {error &&

{error}

} +
+ ); +} diff --git a/stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js b/stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js new file mode 100644 index 000000000..55c3a2543 --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js @@ -0,0 +1,18 @@ +import React from "react"; + +export default function ValidationErros(props) { + return ( + Object.keys(props.errors).length > 0 && ( +
+
+ Whoops! Something went wrong. +
+
    + {Object.keys(props.errors).map(function (key, index) { + return
  • {props.errors[key]}
    • ; + })} +
+
+ ) + ); +} diff --git a/stubs/inertia-react/resources/js/Components/UI/ApplicationLogo.js b/stubs/inertia-react/resources/js/Components/UI/ApplicationLogo.js new file mode 100644 index 000000000..5349dc738 --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/UI/ApplicationLogo.js @@ -0,0 +1,9 @@ +import React from "react"; + +export default function ApplicationLogo({ className }) { + return ( + + + + ); +} diff --git a/stubs/inertia-react/resources/js/Components/UI/Dropdown.js b/stubs/inertia-react/resources/js/Components/UI/Dropdown.js new file mode 100644 index 000000000..f21105a2c --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/UI/Dropdown.js @@ -0,0 +1,74 @@ +import React, { useState, useContext } from "react"; +import { InertiaLink } from "@inertiajs/inertia-react"; + +const DropDownContext = React.createContext(); + +const Dropdown = ({ children }) => { + + const [open, setOpen] = useState(false); + + const toggleOpen = () => { + setOpen((prevState) => !prevState); + }; + + + return ( + +
+ {children} +
+ + ); +} + +const Content = ({ children }) => { + + const { open, setOpen } = useContext(DropDownContext) + + + return ( + <> + {open && ( + <> +
setOpen(false)}>
+ +
setOpen(false)} + > +
+ {children} +
+
+ + )} + + ) + +} + +const Trigger = ({ children }) => { + const { toggleOpen } = useContext(DropDownContext) + + return ( +
+ {children} +
+ ) +} + +const Link = ({ href, children }) => { + return + {children} + +} + +Dropdown.Trigger = Trigger; +Dropdown.Content = Content; +Dropdown.Link = Link; + +export default Dropdown; diff --git a/stubs/inertia-react/resources/js/Components/UI/NavLink.js b/stubs/inertia-react/resources/js/Components/UI/NavLink.js new file mode 100644 index 000000000..e7fe91e84 --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/UI/NavLink.js @@ -0,0 +1,17 @@ +import { InertiaLink } from "@inertiajs/inertia-react"; +import React from "react"; + +export default function NavLink({ href, active, label }) { + return ( + + {label} + + ); +} diff --git a/stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js b/stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js new file mode 100644 index 000000000..18597be2a --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js @@ -0,0 +1,17 @@ +import { InertiaLink } from "@inertiajs/inertia-react"; +import React from "react"; + +export default function ResponsiveNavLink({ active, href, children, method }) { + return ( + + {children} + + ); +} diff --git a/stubs/inertia-react/resources/js/Layouts/Authenticated.js b/stubs/inertia-react/resources/js/Layouts/Authenticated.js new file mode 100644 index 000000000..8968ea7a3 --- /dev/null +++ b/stubs/inertia-react/resources/js/Layouts/Authenticated.js @@ -0,0 +1,161 @@ +import ApplicationLogo from "../Components/UI/ApplicationLogo"; +import Dropdown from "../Components/UI/Dropdown"; +import NavLink from "../Components/UI/NavLink"; +import React, { useEffect, useState } from "react"; +import ResponsiveNavLink from "../Components/UI/ResponsiveNavLink"; +import { InertiaLink } from "@inertiajs/inertia-react"; + +export default function Authenticated({ auth, header, children }) { + + const [showingNavigationDropdown, setShowingNavigationDropdown] = useState( + false + ); + + return ( +
+ + + {header && ( +
+
+ {header} +
+
+ )} + +
{children}
+
+ ); +} diff --git a/stubs/inertia-react/resources/js/Layouts/Guest.js b/stubs/inertia-react/resources/js/Layouts/Guest.js new file mode 100644 index 000000000..51cf397fd --- /dev/null +++ b/stubs/inertia-react/resources/js/Layouts/Guest.js @@ -0,0 +1,19 @@ +import ApplicationLogo from "../Components/UI/ApplicationLogo"; +import React, { useEffect } from "react"; +import { InertiaLink } from "@inertiajs/inertia-react"; + +export default function Guest({ children }) { + return ( +
+
+ + + +
+ +
+ {children} +
+
+ ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js new file mode 100644 index 000000000..22abf057e --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js @@ -0,0 +1,56 @@ +import React, { useEffect } from "react"; +import { useForm } from "@inertiajs/inertia-react"; +import Button from "@/Components/Forms/Button"; +import TextInput from "@/Components/Forms/TextInput"; +import Guest from "@/Layouts/Guest"; +import ValidationErrors from "@/Components/Forms/ValidationErrors"; + +export default function ConfirmPassword() { + + const { data, setData, post, processing, errors, reset } = useForm({ + password: "", + }); + + useEffect(() => { + return () => { + reset("password"); + }; + }, []); + + const onHandleChange = (event) => { + setData(event.target.name, event.target.value); + }; + + const submit = (e) => { + e.preventDefault(); + post(route("password.confirm")); + }; + + return ( + +
+ This is a secure area of the application. Please confirm your + password before continuing. +
+ +
+
+ +
+
+
+ +
+
+
+ + ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js new file mode 100644 index 000000000..121c2706b --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js @@ -0,0 +1,59 @@ +import React from "react"; +import { useForm } from "@inertiajs/inertia-react"; +import Button from "@/Components/Forms/Button"; +import TextInput from "@/Components/Forms/TextInput"; +import Guest from "@/Layouts/Guest"; +import ValidationErros from "@/Components/Forms/ValidationErrors"; + +export default function ForgotPassword({ status }) { + + const { data, setData, post, processing, errors } = useForm({ + email: "", + }); + + const onHandleChange = (event) => { + setData(event.target.name, event.target.value); + }; + + const submit = (e) => { + e.preventDefault(); + post(route("password.email")); + }; + + return ( + + {status ? ( +
+ {status} +
+ ) : ( + <> +
+ Forgot your password? No problem. Just let us know your + email address and we will email you a password reset + link that will allow you to choose a new one. +
+ +
+ +
+
+ +
+
+ + + )} +
+ ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js new file mode 100644 index 000000000..b8be79d0b --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.js @@ -0,0 +1,94 @@ +import React, { useEffect } from "react"; +import { useForm } from "@inertiajs/inertia-react"; +import { InertiaLink } from "@inertiajs/inertia-react"; +import Checkbox from "@/Components/Forms/Checkbox"; +import Button from "@/Components/Forms/Button"; +import TextInput from "@/Components/Forms/TextInput"; +import Guest from "@/Layouts/Guest"; +import ValidationErros from "@/Components/Forms/ValidationErrors"; + +export default function Login({ status, canResetPassword }) { + + const { data, setData, post, processing, errors, reset } = useForm({ + email: "", + password: "", + remember: "", + }); + + useEffect(() => { + return () => { + reset("password"); + }; + }, []); + + const onHandleChange = (event) => { + if (event.target.type === "checkbox") { + setData(event.target.name, event.target.checked); + } else { + setData(event.target.name, event.target.value); + } + }; + + const submit = (e) => { + e.preventDefault(); + post(route("login")); + }; + + return ( + + {status && ( +
+ {status} +
+ )} + +
+ + +
+ +
+ +
+ +
+ +
+ {canResetPassword && ( + + Forgot your password? + + )} +
+ +
+
+ +
+ ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js new file mode 100644 index 000000000..95aee5003 --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.js @@ -0,0 +1,103 @@ +import React, { useEffect } from "react"; +import { useForm } from "@inertiajs/inertia-react"; +import { InertiaLink } from "@inertiajs/inertia-react"; +import Button from "@/Components/Forms/Button"; +import TextInput from "@/Components/Forms/TextInput"; +import Guest from "@/Layouts/Guest"; +import ValidationErrors from "@/Components/Forms/ValidationErrors"; + +export default function Register() { + + const { data, setData, post, processing, errors, reset } = useForm({ + name: "", + email: "", + password: "", + password_confirmation: "", + terms: false, + }); + + useEffect(() => { + return () => { + reset("password", "password_confirmation"); + }; + }, []); + + const onHandleChange = (event) => { + if (event.target.type === "checkbox") { + setData(event.target.name, event.target.checked); + } else { + setData(event.target.name, event.target.value); + } + }; + + const submit = (e) => { + e.preventDefault(); + post(route("register")); + }; + + return ( + + +
+ + +
+ +
+
+ +
+ +
+ +
+ +
+ + Already registered? + +
+ +
+
+ +
+ ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js new file mode 100644 index 000000000..02859387d --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js @@ -0,0 +1,82 @@ +import React, { useEffect } from "react"; +import { useForm } from "@inertiajs/inertia-react"; +import ValidationErros from "@/Components/Forms/ValidationErrors"; +import Guest from "@/Layouts/Guest"; +import TextInput from "@/Components/Forms/TextInput"; +import Button from "@/Components/Forms/Button"; + +export default function ResetPassword({ token, email }) { + + const { data, setData, post, processing, errors, reset } = useForm({ + token: token, + email: email, + password: "", + password_confirmation: "", + }); + + useEffect(() => { + return () => { + reset("password", "password_confirmation"); + }; + }, []); + + const onHandleChange = (event) => { + setData(event.target.name, event.target.value); + }; + + const submit = (e) => { + e.preventDefault(); + post(route("password.update")); + }; + + return ( + + + +
+
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+
+
+ + ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js new file mode 100644 index 000000000..cb0f94047 --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -0,0 +1,41 @@ +import React from "react"; +import { useForm } from "@inertiajs/inertia-react"; +import { InertiaLink } from "@inertiajs/inertia-react"; +import Button from "@/Components/Forms/Button"; +import Guest from "@/Layouts/Guest"; + +export default function VerifyEmail({ status }) { + const { post, processing } = useForm(); + + const submit = (e) => { + e.preventDefault(); + post(route("verification.send")); + }; + + return ( + +
+ Thanks for signing up! Before getting started, could you verify + your email address by clicking on the link we just emailed to + you? If you didn't receive the email, we will gladly send you + another. +
+ {status === "verification-link-sent" && ( +
+ A new verification link has been sent to the email address + you provided during registration. +
+ )} +
+
+ + + Log Out + +
+
+ + ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.js b/stubs/inertia-react/resources/js/Pages/Dashboard.js new file mode 100644 index 000000000..50b7492c4 --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Dashboard.js @@ -0,0 +1,27 @@ +import React from "react"; +import Authenticated from "@/Layouts/Authenticated"; + +export default function Dashboard(props) { + return ( + + Dashboard + + } + > +
+
+
+
+ You're logged in! +
+
+
+
+ + ); +} diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.js b/stubs/inertia-react/resources/js/Pages/Welcome.js new file mode 100644 index 000000000..2ee0500e0 --- /dev/null +++ b/stubs/inertia-react/resources/js/Pages/Welcome.js @@ -0,0 +1,305 @@ +import React from "react"; +import { InertiaLink } from "@inertiajs/inertia-react"; + +export default function Welcome(props) { + return ( +
+
+ {props.auth.user ? ( + + Dashboard + + ) : ( + <> + + Log in + + + + Register + + + )} +
+ +
+
+ + + + + +
+ +
+
+
+
+ + + + +
+ +
+
+ Laravel has wonderful, thorough + documentation covering every aspect of the + framework. Whether you are new to the + framework or have previous experience with + Laravel, we recommend reading all of the + documentation from beginning to end. +
+
+
+ +
+
+ + + + + +
+ +
+
+ Laracasts offers thousands of video + tutorials on Laravel, PHP, and JavaScript + development. Check them out, see for + yourself, and massively level up your + development skills in the process. +
+
+
+ +
+
+ + + + +
+ +
+
+ Laravel News is a community driven portal + and newsletter aggregating all of the latest + and most important news in the Laravel + ecosystem, including new package releases + and tutorials. +
+
+
+ +
+
+ + + +
+ Vibrant Ecosystem +
+
+ +
+
+ Laravel's robust library of first-party + tools and libraries, such as + + Forge + + , + + Vapor + + , + + Nova + + , and + + Envoyer + + help you take your projects to the next + level. Pair them with powerful open source + libraries like + + Cashier + + , + + Dusk + + , + + Echo + + , + + Horizon + + , + + Sanctum + + , + + Telescope + + , and more. +
+
+
+
+
+ +
+
+
+ + + + + + Shop + + + + + + + + Sponsor + +
+
+ +
+ Laravel v{props.laravelVersion} (PHP v{props.phpVersion} + ) +
+
+
+
+ ); +} diff --git a/stubs/inertia-react/resources/js/app.js b/stubs/inertia-react/resources/js/app.js new file mode 100644 index 000000000..60b8e3576 --- /dev/null +++ b/stubs/inertia-react/resources/js/app.js @@ -0,0 +1,19 @@ +require('./bootstrap'); + +// Import modules... +import React from "react"; +import { render } from "react-dom"; +import { App } from "@inertiajs/inertia-react"; +import { InertiaProgress } from '@inertiajs/progress'; + +const el = document.getElementById('app'); + +render( + require(`./Pages/${name}`).default} + />, + el +); + +InertiaProgress.init({ color: '#4B5563' }); diff --git a/stubs/inertia-react/resources/js/bootstrap.js b/stubs/inertia-react/resources/js/bootstrap.js new file mode 100644 index 000000000..692257769 --- /dev/null +++ b/stubs/inertia-react/resources/js/bootstrap.js @@ -0,0 +1,28 @@ +window._ = require('lodash'); + +/** + * 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'); + +window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; + +/** + * Echo exposes an expressive API for subscribing to channels and listening + * for events that are broadcast by Laravel. Echo and event broadcasting + * allows your team to easily build robust real-time web applications. + */ + +// import Echo from 'laravel-echo'; + +// window.Pusher = require('pusher-js'); + +// window.Echo = new Echo({ +// broadcaster: 'pusher', +// key: process.env.MIX_PUSHER_APP_KEY, +// cluster: process.env.MIX_PUSHER_APP_CLUSTER, +// forceTLS: true +// }); diff --git a/stubs/inertia-vue/resources/js/bootstrap.js b/stubs/inertia-vue/resources/js/bootstrap.js new file mode 100644 index 000000000..692257769 --- /dev/null +++ b/stubs/inertia-vue/resources/js/bootstrap.js @@ -0,0 +1,28 @@ +window._ = require('lodash'); + +/** + * 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'); + +window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; + +/** + * Echo exposes an expressive API for subscribing to channels and listening + * for events that are broadcast by Laravel. Echo and event broadcasting + * allows your team to easily build robust real-time web applications. + */ + +// import Echo from 'laravel-echo'; + +// window.Pusher = require('pusher-js'); + +// window.Echo = new Echo({ +// broadcaster: 'pusher', +// key: process.env.MIX_PUSHER_APP_KEY, +// cluster: process.env.MIX_PUSHER_APP_CLUSTER, +// forceTLS: true +// }); From 9283041a3b00642e45ac27d37b9e212b8a06d963 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 12 May 2021 14:37:11 -0500 Subject: [PATCH 03/16] formatting --- stubs/inertia-common/jsconfig.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 stubs/inertia-common/jsconfig.json diff --git a/stubs/inertia-common/jsconfig.json b/stubs/inertia-common/jsconfig.json new file mode 100644 index 000000000..97921a98e --- /dev/null +++ b/stubs/inertia-common/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["resources/js/*"] + } + }, + "exclude": ["node_modules", "public"] +} From 745871ec1e40410ad0b4e3cea4f5ad0f78558bbe Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Thu, 13 May 2021 15:26:16 -0500 Subject: [PATCH 04/16] wip --- .../js/Components/{UI => }/ApplicationLogo.js | 0 .../js/Components/{Forms => }/Button.js | 9 +++++---- .../resources/js/Components/Checkbox.js | 13 +++++++++++++ .../resources/js/Components/{UI => }/Dropdown.js | 0 .../resources/js/Components/Forms/Checkbox.js | 16 ---------------- .../resources/js/Components/{UI => }/NavLink.js | 6 +++--- .../js/Components/{UI => }/ResponsiveNavLink.js | 6 +++--- .../js/Components/{Forms => }/TextInput.js | 0 .../Components/{Forms => }/ValidationErrors.js | 9 +++++---- .../resources/js/Layouts/Authenticated.js | 12 +++++++----- .../inertia-react/resources/js/Layouts/Guest.js | 2 +- .../resources/js/Pages/Auth/ConfirmPassword.js | 6 +++--- .../resources/js/Pages/Auth/ForgotPassword.js | 6 +++--- .../resources/js/Pages/Auth/Login.js | 8 ++++---- .../resources/js/Pages/Auth/Register.js | 6 +++--- .../resources/js/Pages/Auth/ResetPassword.js | 6 +++--- .../resources/js/Pages/Auth/VerifyEmail.js | 2 +- 17 files changed, 54 insertions(+), 53 deletions(-) rename stubs/inertia-react/resources/js/Components/{UI => }/ApplicationLogo.js (100%) rename stubs/inertia-react/resources/js/Components/{Forms => }/Button.js (59%) create mode 100644 stubs/inertia-react/resources/js/Components/Checkbox.js rename stubs/inertia-react/resources/js/Components/{UI => }/Dropdown.js (100%) delete mode 100644 stubs/inertia-react/resources/js/Components/Forms/Checkbox.js rename stubs/inertia-react/resources/js/Components/{UI => }/NavLink.js (89%) rename stubs/inertia-react/resources/js/Components/{UI => }/ResponsiveNavLink.js (85%) rename stubs/inertia-react/resources/js/Components/{Forms => }/TextInput.js (100%) rename stubs/inertia-react/resources/js/Components/{Forms => }/ValidationErrors.js (60%) diff --git a/stubs/inertia-react/resources/js/Components/UI/ApplicationLogo.js b/stubs/inertia-react/resources/js/Components/ApplicationLogo.js similarity index 100% rename from stubs/inertia-react/resources/js/Components/UI/ApplicationLogo.js rename to stubs/inertia-react/resources/js/Components/ApplicationLogo.js diff --git a/stubs/inertia-react/resources/js/Components/Forms/Button.js b/stubs/inertia-react/resources/js/Components/Button.js similarity index 59% rename from stubs/inertia-react/resources/js/Components/Forms/Button.js rename to stubs/inertia-react/resources/js/Components/Button.js index aa6bb9adf..c3775a2ee 100644 --- a/stubs/inertia-react/resources/js/Components/Forms/Button.js +++ b/stubs/inertia-react/resources/js/Components/Button.js @@ -1,11 +1,12 @@ import React from "react"; -export default function Button({ children }) { +export default function Button({ type = 'submit', processing, children }) { return ( ); diff --git a/stubs/inertia-react/resources/js/Components/Checkbox.js b/stubs/inertia-react/resources/js/Components/Checkbox.js new file mode 100644 index 000000000..4bee7446f --- /dev/null +++ b/stubs/inertia-react/resources/js/Components/Checkbox.js @@ -0,0 +1,13 @@ +import React from "react"; + +export default function Checkbox({ name, value, handleChange }) { + return ( + handleChange(e)} + /> + ); +} diff --git a/stubs/inertia-react/resources/js/Components/UI/Dropdown.js b/stubs/inertia-react/resources/js/Components/Dropdown.js similarity index 100% rename from stubs/inertia-react/resources/js/Components/UI/Dropdown.js rename to stubs/inertia-react/resources/js/Components/Dropdown.js diff --git a/stubs/inertia-react/resources/js/Components/Forms/Checkbox.js b/stubs/inertia-react/resources/js/Components/Forms/Checkbox.js deleted file mode 100644 index 6a37428ea..000000000 --- a/stubs/inertia-react/resources/js/Components/Forms/Checkbox.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -export default function Checkbox({ name, value, label, handleChange }) { - return ( - - ); -} diff --git a/stubs/inertia-react/resources/js/Components/UI/NavLink.js b/stubs/inertia-react/resources/js/Components/NavLink.js similarity index 89% rename from stubs/inertia-react/resources/js/Components/UI/NavLink.js rename to stubs/inertia-react/resources/js/Components/NavLink.js index e7fe91e84..035170cbd 100644 --- a/stubs/inertia-react/resources/js/Components/UI/NavLink.js +++ b/stubs/inertia-react/resources/js/Components/NavLink.js @@ -1,17 +1,17 @@ import { InertiaLink } from "@inertiajs/inertia-react"; import React from "react"; -export default function NavLink({ href, active, label }) { +export default function NavLink({ href, active, children }) { return ( - {label} + {children} ); } diff --git a/stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js similarity index 85% rename from stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js rename to stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js index 18597be2a..d1bd880ed 100644 --- a/stubs/inertia-react/resources/js/Components/UI/ResponsiveNavLink.js +++ b/stubs/inertia-react/resources/js/Components/ResponsiveNavLink.js @@ -1,15 +1,15 @@ import { InertiaLink } from "@inertiajs/inertia-react"; import React from "react"; -export default function ResponsiveNavLink({ active, href, children, method }) { +export default function ResponsiveNavLink({ method, as = 'a', href, active, children }) { return ( {children} diff --git a/stubs/inertia-react/resources/js/Components/Forms/TextInput.js b/stubs/inertia-react/resources/js/Components/TextInput.js similarity index 100% rename from stubs/inertia-react/resources/js/Components/Forms/TextInput.js rename to stubs/inertia-react/resources/js/Components/TextInput.js diff --git a/stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js b/stubs/inertia-react/resources/js/Components/ValidationErrors.js similarity index 60% rename from stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js rename to stubs/inertia-react/resources/js/Components/ValidationErrors.js index 55c3a2543..f83ad6234 100644 --- a/stubs/inertia-react/resources/js/Components/Forms/ValidationErrors.js +++ b/stubs/inertia-react/resources/js/Components/ValidationErrors.js @@ -1,15 +1,16 @@ import React from "react"; -export default function ValidationErros(props) { +export default function ValidationErrors({ errors }) { return ( - Object.keys(props.errors).length > 0 && ( + Object.keys(errors).length > 0 && (
Whoops! Something went wrong.
+
    - {Object.keys(props.errors).map(function (key, index) { - return
  • {props.errors[key]}
    • ; + {Object.keys(errors).map(function (key, index) { + return
  • {errors[key]}
    • ; })}
diff --git a/stubs/inertia-react/resources/js/Layouts/Authenticated.js b/stubs/inertia-react/resources/js/Layouts/Authenticated.js index 8968ea7a3..0f1c1319e 100644 --- a/stubs/inertia-react/resources/js/Layouts/Authenticated.js +++ b/stubs/inertia-react/resources/js/Layouts/Authenticated.js @@ -1,8 +1,8 @@ -import ApplicationLogo from "../Components/UI/ApplicationLogo"; -import Dropdown from "../Components/UI/Dropdown"; -import NavLink from "../Components/UI/NavLink"; +import ApplicationLogo from "../Components/ApplicationLogo"; +import Dropdown from "../Components/Dropdown"; +import NavLink from "../Components/NavLink"; import React, { useEffect, useState } from "react"; -import ResponsiveNavLink from "../Components/UI/ResponsiveNavLink"; +import ResponsiveNavLink from "../Components/ResponsiveNavLink"; import { InertiaLink } from "@inertiajs/inertia-react"; export default function Authenticated({ auth, header, children }) { @@ -155,7 +155,9 @@ export default function Authenticated({ auth, header, children }) { )} -
{children}
+
+ {children} +
); } diff --git a/stubs/inertia-react/resources/js/Layouts/Guest.js b/stubs/inertia-react/resources/js/Layouts/Guest.js index 51cf397fd..c017c27c9 100644 --- a/stubs/inertia-react/resources/js/Layouts/Guest.js +++ b/stubs/inertia-react/resources/js/Layouts/Guest.js @@ -1,4 +1,4 @@ -import ApplicationLogo from "../Components/UI/ApplicationLogo"; +import ApplicationLogo from "../Components/ApplicationLogo"; import React, { useEffect } from "react"; import { InertiaLink } from "@inertiajs/inertia-react"; diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js index 22abf057e..bd95b7d36 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js @@ -1,9 +1,9 @@ import React, { useEffect } from "react"; import { useForm } from "@inertiajs/inertia-react"; -import Button from "@/Components/Forms/Button"; -import TextInput from "@/Components/Forms/TextInput"; +import Button from "@/Componentss/Button"; +import TextInput from "@/Componentss/TextInput"; import Guest from "@/Layouts/Guest"; -import ValidationErrors from "@/Components/Forms/ValidationErrors"; +import ValidationErrors from "@/Componentss/ValidationErrors"; export default function ConfirmPassword() { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js index 121c2706b..05786e6f8 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js @@ -1,9 +1,9 @@ import React from "react"; import { useForm } from "@inertiajs/inertia-react"; -import Button from "@/Components/Forms/Button"; -import TextInput from "@/Components/Forms/TextInput"; +import Button from "@/Componentss/Button"; +import TextInput from "@/Componentss/TextInput"; import Guest from "@/Layouts/Guest"; -import ValidationErros from "@/Components/Forms/ValidationErrors"; +import ValidationErros from "@/Componentss/ValidationErrors"; export default function ForgotPassword({ status }) { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js index b8be79d0b..dbdc5e5a1 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Login.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.js @@ -1,11 +1,11 @@ import React, { useEffect } from "react"; import { useForm } from "@inertiajs/inertia-react"; import { InertiaLink } from "@inertiajs/inertia-react"; -import Checkbox from "@/Components/Forms/Checkbox"; -import Button from "@/Components/Forms/Button"; -import TextInput from "@/Components/Forms/TextInput"; +import Checkbox from "@/Componentss/Checkbox"; +import Button from "@/Componentss/Button"; +import TextInput from "@/Componentss/TextInput"; import Guest from "@/Layouts/Guest"; -import ValidationErros from "@/Components/Forms/ValidationErrors"; +import ValidationErros from "@/Componentss/ValidationErrors"; export default function Login({ status, canResetPassword }) { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js index 95aee5003..4959c42be 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Register.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.js @@ -1,10 +1,10 @@ import React, { useEffect } from "react"; import { useForm } from "@inertiajs/inertia-react"; import { InertiaLink } from "@inertiajs/inertia-react"; -import Button from "@/Components/Forms/Button"; -import TextInput from "@/Components/Forms/TextInput"; +import Button from "@/Componentss/Button"; +import TextInput from "@/Componentss/TextInput"; import Guest from "@/Layouts/Guest"; -import ValidationErrors from "@/Components/Forms/ValidationErrors"; +import ValidationErrors from "@/Componentss/ValidationErrors"; export default function Register() { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js index 02859387d..ca8dc62b4 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js @@ -1,9 +1,9 @@ import React, { useEffect } from "react"; import { useForm } from "@inertiajs/inertia-react"; -import ValidationErros from "@/Components/Forms/ValidationErrors"; +import ValidationErros from "@/Componentss/ValidationErrors"; import Guest from "@/Layouts/Guest"; -import TextInput from "@/Components/Forms/TextInput"; -import Button from "@/Components/Forms/Button"; +import TextInput from "@/Componentss/TextInput"; +import Button from "@/Componentss/Button"; export default function ResetPassword({ token, email }) { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index cb0f94047..973c2b112 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -1,7 +1,7 @@ import React from "react"; import { useForm } from "@inertiajs/inertia-react"; import { InertiaLink } from "@inertiajs/inertia-react"; -import Button from "@/Components/Forms/Button"; +import Button from "@/Componentss/Button"; import Guest from "@/Layouts/Guest"; export default function VerifyEmail({ status }) { From b20564849131f67571667bf5d4cf4461f88ccd14 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Thu, 13 May 2021 16:45:54 -0500 Subject: [PATCH 05/16] wip --- .../resources/js/Components/Button.js | 4 +- .../resources/js/Components/Label.js | 13 +++ .../resources/js/Components/TextInput.js | 10 +-- .../resources/js/Layouts/Authenticated.js | 5 +- .../js/Pages/Auth/ConfirmPassword.js | 6 +- .../resources/js/Pages/Auth/ForgotPassword.js | 6 +- .../resources/js/Pages/Auth/Login.js | 82 +++++++++++-------- .../resources/js/Pages/Auth/Register.js | 6 +- .../resources/js/Pages/Auth/ResetPassword.js | 6 +- .../resources/js/Pages/Auth/VerifyEmail.js | 2 +- 10 files changed, 81 insertions(+), 59 deletions(-) create mode 100644 stubs/inertia-react/resources/js/Components/Label.js diff --git a/stubs/inertia-react/resources/js/Components/Button.js b/stubs/inertia-react/resources/js/Components/Button.js index c3775a2ee..2c613b48f 100644 --- a/stubs/inertia-react/resources/js/Components/Button.js +++ b/stubs/inertia-react/resources/js/Components/Button.js @@ -1,10 +1,10 @@ import React from "react"; -export default function Button({ type = 'submit', processing, children }) { +export default function Button({ type = 'submit', className = '', processing, children }) { return ( - + + diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js index 4959c42be..304d19f60 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Register.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.js @@ -1,10 +1,10 @@ import React, { useEffect } from "react"; import { useForm } from "@inertiajs/inertia-react"; import { InertiaLink } from "@inertiajs/inertia-react"; -import Button from "@/Componentss/Button"; -import TextInput from "@/Componentss/TextInput"; +import Button from "@/Components/Button"; +import TextInput from "@/Components/TextInput"; import Guest from "@/Layouts/Guest"; -import ValidationErrors from "@/Componentss/ValidationErrors"; +import ValidationErrors from "@/Components/ValidationErrors"; export default function Register() { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js index ca8dc62b4..5e0377b97 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js @@ -1,9 +1,9 @@ import React, { useEffect } from "react"; import { useForm } from "@inertiajs/inertia-react"; -import ValidationErros from "@/Componentss/ValidationErrors"; +import ValidationErros from "@/Components/ValidationErrors"; import Guest from "@/Layouts/Guest"; -import TextInput from "@/Componentss/TextInput"; -import Button from "@/Componentss/Button"; +import TextInput from "@/Components/TextInput"; +import Button from "@/Components/Button"; export default function ResetPassword({ token, email }) { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index 973c2b112..066653c9b 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -1,7 +1,7 @@ import React from "react"; import { useForm } from "@inertiajs/inertia-react"; import { InertiaLink } from "@inertiajs/inertia-react"; -import Button from "@/Componentss/Button"; +import Button from "@/Components/Button"; import Guest from "@/Layouts/Guest"; export default function VerifyEmail({ status }) { From e8b08eb924541dee1ec33a639c310d106ffeeb81 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Thu, 13 May 2021 16:57:49 -0500 Subject: [PATCH 06/16] wip --- .../resources/js/Pages/Auth/Register.js | 85 +++++++++++-------- 1 file changed, 48 insertions(+), 37 deletions(-) diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js index 304d19f60..ebc8ac629 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Register.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.js @@ -1,10 +1,11 @@ -import React, { useEffect } from "react"; -import { useForm } from "@inertiajs/inertia-react"; -import { InertiaLink } from "@inertiajs/inertia-react"; import Button from "@/Components/Button"; -import TextInput from "@/Components/TextInput"; import Guest from "@/Layouts/Guest"; +import React, { useEffect } from "react"; +import Label from "@/Components/Label"; +import TextInput from "@/Components/TextInput"; import ValidationErrors from "@/Components/ValidationErrors"; +import { InertiaLink } from "@inertiajs/inertia-react"; +import { useForm } from "@inertiajs/inertia-react"; export default function Register() { @@ -23,64 +24,75 @@ export default function Register() { }, []); const onHandleChange = (event) => { - if (event.target.type === "checkbox") { - setData(event.target.name, event.target.checked); - } else { - setData(event.target.name, event.target.value); - } + setData(event.target.name, event.target.type === "checkbox" + ? event.target.checked + : event.target.value); }; const submit = (e) => { e.preventDefault(); + post(route("register")); }; return ( - + +
- +
+
From 14ad7042207df6c504ff22a51641878f4ce9c32c Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 14:26:10 -0500 Subject: [PATCH 07/16] wip --- .../resources/js/Components/Checkbox.js | 2 +- .../resources/js/Components/TextInput.js | 5 +- .../js/Pages/Auth/ConfirmPassword.js | 33 ++++++---- .../resources/js/Pages/Auth/ForgotPassword.js | 66 +++++++++---------- .../resources/js/Pages/Auth/Login.js | 4 +- .../resources/js/Pages/Auth/Register.js | 1 - .../resources/js/Pages/Auth/ResetPassword.js | 55 +++++++++------- .../resources/js/Pages/Auth/VerifyEmail.js | 22 +++---- .../resources/js/Pages/Dashboard.js | 3 +- 9 files changed, 98 insertions(+), 93 deletions(-) diff --git a/stubs/inertia-react/resources/js/Components/Checkbox.js b/stubs/inertia-react/resources/js/Components/Checkbox.js index 4bee7446f..8c523373c 100644 --- a/stubs/inertia-react/resources/js/Components/Checkbox.js +++ b/stubs/inertia-react/resources/js/Components/Checkbox.js @@ -3,8 +3,8 @@ import React from "react"; export default function Checkbox({ name, value, handleChange }) { return ( handleChange(e)} diff --git a/stubs/inertia-react/resources/js/Components/TextInput.js b/stubs/inertia-react/resources/js/Components/TextInput.js index 8b0d466da..bc40b03c5 100644 --- a/stubs/inertia-react/resources/js/Components/TextInput.js +++ b/stubs/inertia-react/resources/js/Components/TextInput.js @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from "react"; -export default function TextInput({ label, type = 'text', name, value, className, handleChange, autoComplete, required, isFocused }) { +export default function TextInput({ label, type = 'text', name, value, className, autoComplete, required, isFocused, handleChange }) { const input = useRef(); @@ -12,16 +12,15 @@ export default function TextInput({ label, type = 'text', name, value, className return (
- {label && } handleChange(e)} autoComplete={autoComplete} required={required} + onChange={(e) => handleChange(e)} />
); diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js index 45781c8b9..5a960bbf3 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js @@ -1,9 +1,10 @@ -import React, { useEffect } from "react"; -import { useForm } from "@inertiajs/inertia-react"; import Button from "@/Components/Button"; -import TextInput from "@/Components/TextInput"; import Guest from "@/Layouts/Guest"; +import Label from "@/Components/Label"; +import React, { useEffect } from "react"; +import TextInput from "@/Components/TextInput"; import ValidationErrors from "@/Components/ValidationErrors"; +import { useForm } from "@inertiajs/inertia-react"; export default function ConfirmPassword() { @@ -23,32 +24,36 @@ export default function ConfirmPassword() { const submit = (e) => { e.preventDefault(); + post(route("password.confirm")); }; return ( - +
- This is a secure area of the application. Please confirm your - password before continuing. + This is a secure area of the application. Please confirm your password before continuing.
+ +
+
+
-
- -
+
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js index 74e2bd379..e67011f18 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js @@ -1,9 +1,10 @@ -import React from "react"; -import { useForm } from "@inertiajs/inertia-react"; import Button from "@/Components/Button"; -import TextInput from "@/Components/TextInput"; import Guest from "@/Layouts/Guest"; -import ValidationErros from "@/Components/ValidationErrors"; +import Label from "@/Components/Label"; +import React from "react"; +import TextInput from "@/Components/TextInput"; +import ValidationErrors from "@/Components/ValidationErrors"; +import { useForm } from "@inertiajs/inertia-react"; export default function ForgotPassword({ status }) { @@ -17,43 +18,40 @@ export default function ForgotPassword({ status }) { const submit = (e) => { e.preventDefault(); + post(route("password.email")); }; return ( - - {status ? ( -
+ +
+ Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one. +
+ + {status && ( +
{status}
- ) : ( - <> -
- Forgot your password? No problem. Just let us know your - email address and we will email you a password reset - link that will allow you to choose a new one. -
- -
- -
-
- -
-
- - )} + + + +
+ + +
+ +
+
); } diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js index 415b3fdbf..98478bf4b 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Login.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.js @@ -35,9 +35,9 @@ export default function Login({ status, canResetPassword }) { }; return ( - + {status && ( -
+
{status}
)} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js index ebc8ac629..02343303f 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Register.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.js @@ -14,7 +14,6 @@ export default function Register() { email: "", password: "", password_confirmation: "", - terms: false, }); useEffect(() => { diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js index 5e0377b97..bcf813433 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js @@ -1,9 +1,10 @@ -import React, { useEffect } from "react"; -import { useForm } from "@inertiajs/inertia-react"; -import ValidationErros from "@/Components/ValidationErrors"; +import Button from "@/Components/Button"; import Guest from "@/Layouts/Guest"; +import Label from "@/Components/Label"; +import React, { useEffect } from "react"; import TextInput from "@/Components/TextInput"; -import Button from "@/Components/Button"; +import ValidationErrors from "@/Components/ValidationErrors"; +import { useForm } from "@inertiajs/inertia-react"; export default function ResetPassword({ token, email }) { @@ -26,55 +27,59 @@ export default function ResetPassword({ token, email }) { const submit = (e) => { e.preventDefault(); + post(route("password.update")); }; return ( - - + +
-
+
+
+
+
+
-
- -
+
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index 066653c9b..8c33cc657 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -1,37 +1,37 @@ -import React from "react"; -import { useForm } from "@inertiajs/inertia-react"; -import { InertiaLink } from "@inertiajs/inertia-react"; import Button from "@/Components/Button"; import Guest from "@/Layouts/Guest"; +import React from "react"; +import { InertiaLink } from "@inertiajs/inertia-react"; +import { useForm } from "@inertiajs/inertia-react"; export default function VerifyEmail({ status }) { const { post, processing } = useForm(); const submit = (e) => { e.preventDefault(); + post(route("verification.send")); }; return ( - +
- Thanks for signing up! Before getting started, could you verify - your email address by clicking on the link we just emailed to - you? If you didn't receive the email, we will gladly send you - another. + Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
+ {status === "verification-link-sent" && (
- A new verification link has been sent to the email address - you provided during registration. + A new verification link has been sent to the email address you provided during registration.
)} +
- + + Log Out
diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.js b/stubs/inertia-react/resources/js/Pages/Dashboard.js index 50b7492c4..2bb1a5a03 100644 --- a/stubs/inertia-react/resources/js/Pages/Dashboard.js +++ b/stubs/inertia-react/resources/js/Pages/Dashboard.js @@ -1,12 +1,11 @@ -import React from "react"; import Authenticated from "@/Layouts/Authenticated"; +import React from "react"; export default function Dashboard(props) { return ( Dashboard From ca6f077a60b222491e768c7d4cbc5f4211b0ba27 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:42:00 -0500 Subject: [PATCH 08/16] wip --- .../resources/js/Components/Dropdown.js | 54 ++--- .../resources/js/Components/Label.js | 2 +- .../js/Components/ResponsiveNavLink.js | 2 +- .../resources/js/Layouts/Authenticated.js | 86 ++------ .../resources/js/Pages/Welcome.js | 208 ++---------------- 5 files changed, 68 insertions(+), 284 deletions(-) diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.js b/stubs/inertia-react/resources/js/Components/Dropdown.js index f21105a2c..d087cbba3 100644 --- a/stubs/inertia-react/resources/js/Components/Dropdown.js +++ b/stubs/inertia-react/resources/js/Components/Dropdown.js @@ -8,12 +8,11 @@ const Dropdown = ({ children }) => { const [open, setOpen] = useState(false); const toggleOpen = () => { - setOpen((prevState) => !prevState); + setOpen((previousState) => ! previousState); }; - return ( - +
{children}
@@ -21,46 +20,47 @@ const Dropdown = ({ children }) => { ); } -const Content = ({ children }) => { - - const { open, setOpen } = useContext(DropDownContext) - +const Trigger = ({ children }) => { + const { open, setOpen, toggleOpen } = useContext(DropDownContext) return ( <> - {open && ( - <> -
setOpen(false)}>
+
+ {children} +
-
setOpen(false)} - > -
- {children} -
-
- + {open && ( +
setOpen(false)}> +
)} ) - } -const Trigger = ({ children }) => { - const { toggleOpen } = useContext(DropDownContext) +const Content = ({ contentClasses = 'py-1 bg-white', children }) => { + + const { open, setOpen } = useContext(DropDownContext) return ( -
- {children} -
+ <> + {open && ( +
setOpen(false)} + > +
+ {children} +
+
+ )} + ) } -const Link = ({ href, children }) => { +const Link = ({ href, method = 'post', as = 'a', children }) => { return {children} diff --git a/stubs/inertia-react/resources/js/Components/Label.js b/stubs/inertia-react/resources/js/Components/Label.js index dc5b85970..6b7d24c13 100644 --- a/stubs/inertia-react/resources/js/Components/Label.js +++ b/stubs/inertia-react/resources/js/Components/Label.js @@ -2,7 +2,7 @@ import React from "react"; export default function Label({ forInput, value, className, children }) { return ( -
- + Dashboard
@@ -38,30 +33,19 @@ export default function Authenticated({ auth, header, children }) { - - - Logout + + Log Out @@ -69,59 +53,21 @@ export default function Authenticated({ auth, header, children }) {
-
-
+
- + Dashboard
@@ -138,9 +84,7 @@ export default function Authenticated({ auth, header, children }) {
- + Log Out
diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.js b/stubs/inertia-react/resources/js/Pages/Welcome.js index 2ee0500e0..5bafe9468 100644 --- a/stubs/inertia-react/resources/js/Pages/Welcome.js +++ b/stubs/inertia-react/resources/js/Pages/Welcome.js @@ -6,25 +6,16 @@ export default function Welcome(props) {
{props.auth.user ? ( - + Dashboard ) : ( <> - + Log in - + Register @@ -33,12 +24,7 @@ export default function Welcome(props) {
- + @@ -49,22 +35,12 @@ export default function Welcome(props) {
- + + @@ -72,35 +48,20 @@ export default function Welcome(props) {
- Laravel has wonderful, thorough - documentation covering every aspect of the - framework. Whether you are new to the - framework or have previous experience with - Laravel, we recommend reading all of the - documentation from beginning to end. + Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
- + + @@ -108,33 +69,19 @@ export default function Welcome(props) {
- Laracasts offers thousands of video - tutorials on Laravel, PHP, and JavaScript - development. Check them out, see for - yourself, and massively level up your - development skills in the process. + Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
- + + @@ -142,28 +89,17 @@ export default function Welcome(props) {
- Laravel News is a community driven portal - and newsletter aggregating all of the latest - and most important news in the Laravel - ecosystem, including new package releases - and tutorials. + Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
- + +
Vibrant Ecosystem
@@ -171,80 +107,7 @@ export default function Welcome(props) {
- Laravel's robust library of first-party - tools and libraries, such as - - Forge - - , - - Vapor - - , - - Nova - - , and - - Envoyer - - help you take your projects to the next - level. Pair them with powerful open source - libraries like - - Cashier - - , - - Dusk - - , - - Echo - - , - - Horizon - - , - - Sanctum - - , - - Telescope - - , and more. + Laravel's robust library of first-party tools and libraries, such as Forge, Vapor, Nova, and Envoyer help you take your projects to the next level. Pair them with powerful open source libraries like Cashier, Dusk, Echo, Horizon, Sanctum, Telescope, and more.
@@ -254,49 +117,26 @@ export default function Welcome(props) {
- Laravel v{props.laravelVersion} (PHP v{props.phpVersion} - ) + Laravel v{props.laravelVersion} (PHP v{props.phpVersion})
From c1f9ef3b978a8873b3eda1c0cf9ef72401a53475 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:49:06 -0500 Subject: [PATCH 09/16] fix logout wording --- stubs/default/resources/views/auth/verify-email.blade.php | 2 +- stubs/default/resources/views/layouts/navigation.blade.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/stubs/default/resources/views/auth/verify-email.blade.php b/stubs/default/resources/views/auth/verify-email.blade.php index fed7184ee..dc0ae7f40 100644 --- a/stubs/default/resources/views/auth/verify-email.blade.php +++ b/stubs/default/resources/views/auth/verify-email.blade.php @@ -31,7 +31,7 @@ @csrf
diff --git a/stubs/default/resources/views/layouts/navigation.blade.php b/stubs/default/resources/views/layouts/navigation.blade.php index 32240e06b..c083d6036 100644 --- a/stubs/default/resources/views/layouts/navigation.blade.php +++ b/stubs/default/resources/views/layouts/navigation.blade.php @@ -41,7 +41,7 @@ - {{ __('Log out') }} + {{ __('Log Out') }} @@ -91,7 +91,7 @@ - {{ __('Log out') }} + {{ __('Log Out') }}
From 0983ee9715419a3ad7d5d4d878a31afbb5053e30 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:49:40 -0500 Subject: [PATCH 10/16] Apply fixes from StyleCI (#72) --- .../js/Components/ApplicationLogo.js | 2 +- .../resources/js/Components/Button.js | 8 +- .../resources/js/Components/Checkbox.js | 2 +- .../resources/js/Components/Dropdown.js | 62 ++++---- .../resources/js/Components/Label.js | 8 +- .../resources/js/Components/NavLink.js | 8 +- .../js/Components/ResponsiveNavLink.js | 12 +- .../resources/js/Components/TextInput.js | 20 ++- .../js/Components/ValidationErrors.js | 6 +- .../resources/js/Layouts/Authenticated.js | 80 ++++++---- .../resources/js/Layouts/Guest.js | 6 +- .../js/Pages/Auth/ConfirmPassword.js | 21 ++- .../resources/js/Pages/Auth/ForgotPassword.js | 28 ++-- .../resources/js/Pages/Auth/Login.js | 47 +++--- .../resources/js/Pages/Auth/Register.js | 38 ++--- .../resources/js/Pages/Auth/ResetPassword.js | 23 ++- .../resources/js/Pages/Auth/VerifyEmail.js | 28 ++-- .../resources/js/Pages/Dashboard.js | 14 +- .../resources/js/Pages/Welcome.js | 140 +++++++++++++++--- stubs/inertia-react/resources/js/app.js | 11 +- 20 files changed, 333 insertions(+), 231 deletions(-) diff --git a/stubs/inertia-react/resources/js/Components/ApplicationLogo.js b/stubs/inertia-react/resources/js/Components/ApplicationLogo.js index 5349dc738..57bc22233 100644 --- a/stubs/inertia-react/resources/js/Components/ApplicationLogo.js +++ b/stubs/inertia-react/resources/js/Components/ApplicationLogo.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; export default function ApplicationLogo({ className }) { return ( diff --git a/stubs/inertia-react/resources/js/Components/Button.js b/stubs/inertia-react/resources/js/Components/Button.js index 2c613b48f..7675e994c 100644 --- a/stubs/inertia-react/resources/js/Components/Button.js +++ b/stubs/inertia-react/resources/js/Components/Button.js @@ -1,10 +1,14 @@ -import React from "react"; +import React from 'react'; export default function Button({ type = 'submit', className = '', processing, children }) { return ( - + Log Out @@ -53,38 +64,51 @@ export default function Authenticated({ auth, header, children }) {
-
-
+
- + Dashboard
-
- {auth.user.name} -
+
{auth.user.name}
-
- {auth.user.email} -
+
{auth.user.email}
- + Log Out
@@ -94,15 +118,11 @@ export default function Authenticated({ auth, header, children }) { {header && (
-
- {header} -
+
{header}
)} -
- {children} -
+
{children}
); } diff --git a/stubs/inertia-react/resources/js/Layouts/Guest.js b/stubs/inertia-react/resources/js/Layouts/Guest.js index c017c27c9..bad7e897e 100644 --- a/stubs/inertia-react/resources/js/Layouts/Guest.js +++ b/stubs/inertia-react/resources/js/Layouts/Guest.js @@ -1,6 +1,6 @@ -import ApplicationLogo from "../Components/ApplicationLogo"; -import React, { useEffect } from "react"; -import { InertiaLink } from "@inertiajs/inertia-react"; +import ApplicationLogo from '../Components/ApplicationLogo'; +import React, { useEffect } from 'react'; +import { InertiaLink } from '@inertiajs/inertia-react'; export default function Guest({ children }) { return ( diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js index 5a960bbf3..9d28afd51 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.js @@ -1,20 +1,19 @@ -import Button from "@/Components/Button"; -import Guest from "@/Layouts/Guest"; -import Label from "@/Components/Label"; -import React, { useEffect } from "react"; -import TextInput from "@/Components/TextInput"; -import ValidationErrors from "@/Components/ValidationErrors"; -import { useForm } from "@inertiajs/inertia-react"; +import Button from '@/Components/Button'; +import Guest from '@/Layouts/Guest'; +import Label from '@/Components/Label'; +import React, { useEffect } from 'react'; +import TextInput from '@/Components/TextInput'; +import ValidationErrors from '@/Components/ValidationErrors'; +import { useForm } from '@inertiajs/inertia-react'; export default function ConfirmPassword() { - const { data, setData, post, processing, errors, reset } = useForm({ - password: "", + password: '', }); useEffect(() => { return () => { - reset("password"); + reset('password'); }; }, []); @@ -25,7 +24,7 @@ export default function ConfirmPassword() { const submit = (e) => { e.preventDefault(); - post(route("password.confirm")); + post(route('password.confirm')); }; return ( diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js index e67011f18..9e4687a38 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js @@ -1,15 +1,14 @@ -import Button from "@/Components/Button"; -import Guest from "@/Layouts/Guest"; -import Label from "@/Components/Label"; -import React from "react"; -import TextInput from "@/Components/TextInput"; -import ValidationErrors from "@/Components/ValidationErrors"; -import { useForm } from "@inertiajs/inertia-react"; +import Button from '@/Components/Button'; +import Guest from '@/Layouts/Guest'; +import Label from '@/Components/Label'; +import React from 'react'; +import TextInput from '@/Components/TextInput'; +import ValidationErrors from '@/Components/ValidationErrors'; +import { useForm } from '@inertiajs/inertia-react'; export default function ForgotPassword({ status }) { - const { data, setData, post, processing, errors } = useForm({ - email: "", + email: '', }); const onHandleChange = (event) => { @@ -19,20 +18,17 @@ export default function ForgotPassword({ status }) { const submit = (e) => { e.preventDefault(); - post(route("password.email")); + post(route('password.email')); }; return (
- Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one. + Forgot your password? No problem. Just let us know your email address and we will email you a password + reset link that will allow you to choose a new one.
- {status && ( -
- {status} -
- )} + {status &&
{status}
} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js index 98478bf4b..febe6a771 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Login.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.js @@ -1,46 +1,39 @@ -import Button from "@/Components/Button"; -import Checkbox from "@/Components/Checkbox"; -import Guest from "@/Layouts/Guest"; -import Label from "@/Components/Label"; -import React, { useEffect } from "react"; -import TextInput from "@/Components/TextInput"; -import ValidationErrors from "@/Components/ValidationErrors"; -import { InertiaLink } from "@inertiajs/inertia-react"; -import { useForm } from "@inertiajs/inertia-react"; +import Button from '@/Components/Button'; +import Checkbox from '@/Components/Checkbox'; +import Guest from '@/Layouts/Guest'; +import Label from '@/Components/Label'; +import React, { useEffect } from 'react'; +import TextInput from '@/Components/TextInput'; +import ValidationErrors from '@/Components/ValidationErrors'; +import { InertiaLink } from '@inertiajs/inertia-react'; +import { useForm } from '@inertiajs/inertia-react'; export default function Login({ status, canResetPassword }) { - const { data, setData, post, processing, errors, reset } = useForm({ - email: "", - password: "", - remember: "", + email: '', + password: '', + remember: '', }); useEffect(() => { return () => { - reset("password"); + reset('password'); }; }, []); const onHandleChange = (event) => { - setData(event.target.name, event.target.type === "checkbox" - ? event.target.checked - : event.target.value); + setData(event.target.name, event.target.type === 'checkbox' ? event.target.checked : event.target.value); }; const submit = (e) => { e.preventDefault(); - post(route("login")); + post(route('login')); }; return ( - {status && ( -
- {status} -
- )} + {status &&
{status}
} @@ -74,11 +67,7 @@ export default function Login({ status, canResetPassword }) {
@@ -87,7 +76,7 @@ export default function Login({ status, canResetPassword }) {
{canResetPassword && ( Forgot your password? diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Register.js b/stubs/inertia-react/resources/js/Pages/Auth/Register.js index 02343303f..1e8afe2f9 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Register.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Register.js @@ -1,37 +1,34 @@ -import Button from "@/Components/Button"; -import Guest from "@/Layouts/Guest"; -import React, { useEffect } from "react"; -import Label from "@/Components/Label"; -import TextInput from "@/Components/TextInput"; -import ValidationErrors from "@/Components/ValidationErrors"; -import { InertiaLink } from "@inertiajs/inertia-react"; -import { useForm } from "@inertiajs/inertia-react"; +import Button from '@/Components/Button'; +import Guest from '@/Layouts/Guest'; +import React, { useEffect } from 'react'; +import Label from '@/Components/Label'; +import TextInput from '@/Components/TextInput'; +import ValidationErrors from '@/Components/ValidationErrors'; +import { InertiaLink } from '@inertiajs/inertia-react'; +import { useForm } from '@inertiajs/inertia-react'; export default function Register() { - const { data, setData, post, processing, errors, reset } = useForm({ - name: "", - email: "", - password: "", - password_confirmation: "", + name: '', + email: '', + password: '', + password_confirmation: '', }); useEffect(() => { return () => { - reset("password", "password_confirmation"); + reset('password', 'password_confirmation'); }; }, []); const onHandleChange = (event) => { - setData(event.target.name, event.target.type === "checkbox" - ? event.target.checked - : event.target.value); + setData(event.target.name, event.target.type === 'checkbox' ? event.target.checked : event.target.value); }; const submit = (e) => { e.preventDefault(); - post(route("register")); + post(route('register')); }; return ( @@ -96,10 +93,7 @@ export default function Register() {
- + Already registered? diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js index bcf813433..7ce7245e8 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ResetPassword.js @@ -1,23 +1,22 @@ -import Button from "@/Components/Button"; -import Guest from "@/Layouts/Guest"; -import Label from "@/Components/Label"; -import React, { useEffect } from "react"; -import TextInput from "@/Components/TextInput"; -import ValidationErrors from "@/Components/ValidationErrors"; -import { useForm } from "@inertiajs/inertia-react"; +import Button from '@/Components/Button'; +import Guest from '@/Layouts/Guest'; +import Label from '@/Components/Label'; +import React, { useEffect } from 'react'; +import TextInput from '@/Components/TextInput'; +import ValidationErrors from '@/Components/ValidationErrors'; +import { useForm } from '@inertiajs/inertia-react'; export default function ResetPassword({ token, email }) { - const { data, setData, post, processing, errors, reset } = useForm({ token: token, email: email, - password: "", - password_confirmation: "", + password: '', + password_confirmation: '', }); useEffect(() => { return () => { - reset("password", "password_confirmation"); + reset('password', 'password_confirmation'); }; }, []); @@ -28,7 +27,7 @@ export default function ResetPassword({ token, email }) { const submit = (e) => { e.preventDefault(); - post(route("password.update")); + post(route('password.update')); }; return ( diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index 8c33cc657..600088d38 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -1,8 +1,8 @@ -import Button from "@/Components/Button"; -import Guest from "@/Layouts/Guest"; -import React from "react"; -import { InertiaLink } from "@inertiajs/inertia-react"; -import { useForm } from "@inertiajs/inertia-react"; +import Button from '@/Components/Button'; +import Guest from '@/Layouts/Guest'; +import React from 'react'; +import { InertiaLink } from '@inertiajs/inertia-react'; +import { useForm } from '@inertiajs/inertia-react'; export default function VerifyEmail({ status }) { const { post, processing } = useForm(); @@ -10,16 +10,17 @@ export default function VerifyEmail({ status }) { const submit = (e) => { e.preventDefault(); - post(route("verification.send")); + post(route('verification.send')); }; return (
- Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another. + Thanks for signing up! Before getting started, could you verify your email address by clicking on the + link we just emailed to you? If you didn't receive the email, we will gladly send you another.
- {status === "verification-link-sent" && ( + {status === 'verification-link-sent' && (
A new verification link has been sent to the email address you provided during registration.
@@ -27,11 +28,14 @@ export default function VerifyEmail({ status }) {
- + - + Log Out
diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.js b/stubs/inertia-react/resources/js/Pages/Dashboard.js index 2bb1a5a03..99c875f03 100644 --- a/stubs/inertia-react/resources/js/Pages/Dashboard.js +++ b/stubs/inertia-react/resources/js/Pages/Dashboard.js @@ -1,23 +1,17 @@ -import Authenticated from "@/Layouts/Authenticated"; -import React from "react"; +import Authenticated from '@/Layouts/Authenticated'; +import React from 'react'; export default function Dashboard(props) { return ( - Dashboard - - } + header={

Dashboard

} >
-
- You're logged in! -
+
You're logged in!
diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.js b/stubs/inertia-react/resources/js/Pages/Welcome.js index 5bafe9468..50f63e068 100644 --- a/stubs/inertia-react/resources/js/Pages/Welcome.js +++ b/stubs/inertia-react/resources/js/Pages/Welcome.js @@ -1,5 +1,5 @@ -import React from "react"; -import { InertiaLink } from "@inertiajs/inertia-react"; +import React from 'react'; +import { InertiaLink } from '@inertiajs/inertia-react'; export default function Welcome(props) { return ( @@ -11,11 +11,11 @@ export default function Welcome(props) { ) : ( <> - + Log in - + Register @@ -24,7 +24,12 @@ export default function Welcome(props) {
- + @@ -35,12 +40,23 @@ export default function Welcome(props) {
- + @@ -48,14 +64,24 @@ export default function Welcome(props) {
- Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end. + Laravel has wonderful, thorough documentation covering every aspect of the + framework. Whether you are new to the framework or have previous experience with + Laravel, we recommend reading all of the documentation from beginning to end.
- + @@ -69,19 +95,32 @@ export default function Welcome(props) {
- Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process. + Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript + development. Check them out, see for yourself, and massively level up your + development skills in the process.
- + @@ -89,14 +128,24 @@ export default function Welcome(props) {
- Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials. + Laravel News is a community driven portal and newsletter aggregating all of the + latest and most important news in the Laravel ecosystem, including new package + releases and tutorials.
- + @@ -107,7 +156,48 @@ export default function Welcome(props) {
- Laravel's robust library of first-party tools and libraries, such as Forge, Vapor, Nova, and Envoyer help you take your projects to the next level. Pair them with powerful open source libraries like Cashier, Dusk, Echo, Horizon, Sanctum, Telescope, and more. + Laravel's robust library of first-party tools and libraries, such as{' '} + + Forge + + ,{' '} + + Vapor + + ,{' '} + + Nova + + , and{' '} + + Envoyer + {' '} + help you take your projects to the next level. Pair them with powerful open source + libraries like{' '} + + Cashier + + ,{' '} + + Dusk + + ,{' '} + + Echo + + ,{' '} + + Horizon + + ,{' '} + + Sanctum + + ,{' '} + + Telescope + + , and more.
@@ -117,7 +207,15 @@ export default function Welcome(props) {
- + @@ -125,7 +223,15 @@ export default function Welcome(props) { Shop - + diff --git a/stubs/inertia-react/resources/js/app.js b/stubs/inertia-react/resources/js/app.js index 60b8e3576..cb900806a 100644 --- a/stubs/inertia-react/resources/js/app.js +++ b/stubs/inertia-react/resources/js/app.js @@ -1,18 +1,15 @@ require('./bootstrap'); // Import modules... -import React from "react"; -import { render } from "react-dom"; -import { App } from "@inertiajs/inertia-react"; +import React from 'react'; +import { render } from 'react-dom'; +import { App } from '@inertiajs/inertia-react'; import { InertiaProgress } from '@inertiajs/progress'; const el = document.getElementById('app'); render( - require(`./Pages/${name}`).default} - />, + require(`./Pages/${name}`).default} />, el ); From cc7040c6d688bf769517adef9bcf3aa99be0b519 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:52:02 -0500 Subject: [PATCH 11/16] wip --- stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js | 3 +-- stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js index 9e4687a38..b56736f99 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js @@ -24,8 +24,7 @@ export default function ForgotPassword({ status }) { return (
- Forgot your password? No problem. Just let us know your email address and we will email you a password - reset link that will allow you to choose a new one. + Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
{status &&
{status}
} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index 600088d38..e029b9700 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -16,8 +16,7 @@ export default function VerifyEmail({ status }) { return (
- Thanks for signing up! Before getting started, could you verify your email address by clicking on the - link we just emailed to you? If you didn't receive the email, we will gladly send you another. + Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
{status === 'verification-link-sent' && ( From ab6ca97ed6d89bbdbf3e9c48a647905faf8a49f3 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:52:19 -0500 Subject: [PATCH 12/16] Apply fixes from StyleCI (#74) --- stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js | 3 ++- stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js index b56736f99..9e4687a38 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.js @@ -24,7 +24,8 @@ export default function ForgotPassword({ status }) { return (
- Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one. + Forgot your password? No problem. Just let us know your email address and we will email you a password + reset link that will allow you to choose a new one.
{status &&
{status}
} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index e029b9700..600088d38 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -16,7 +16,8 @@ export default function VerifyEmail({ status }) { return (
- Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another. + Thanks for signing up! Before getting started, could you verify your email address by clicking on the + link we just emailed to you? If you didn't receive the email, we will gladly send you another.
{status === 'verification-link-sent' && ( From 70f7916f10e24002cf2eeb742e1ff233c7070358 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:53:52 -0500 Subject: [PATCH 13/16] wip --- stubs/inertia-react/resources/js/Pages/Auth/Login.js | 5 +---- stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js | 7 +------ 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js index febe6a771..3bce4a1b8 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Login.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.js @@ -75,10 +75,7 @@ export default function Login({ status, canResetPassword }) {
{canResetPassword && ( - + Forgot your password? )} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index 600088d38..33986a79c 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -30,12 +30,7 @@ export default function VerifyEmail({ status }) {
- + Log Out
From 3eaf14057b4519a3bcc3732ffb417763dea8230d Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Wed, 19 May 2021 15:54:17 -0500 Subject: [PATCH 14/16] Apply fixes from StyleCI (#75) --- stubs/inertia-react/resources/js/Pages/Auth/Login.js | 5 ++++- stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js | 7 ++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.js b/stubs/inertia-react/resources/js/Pages/Auth/Login.js index 3bce4a1b8..febe6a771 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/Login.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/Login.js @@ -75,7 +75,10 @@ export default function Login({ status, canResetPassword }) {
{canResetPassword && ( - + Forgot your password? )} diff --git a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js index 33986a79c..600088d38 100644 --- a/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js +++ b/stubs/inertia-react/resources/js/Pages/Auth/VerifyEmail.js @@ -30,7 +30,12 @@ export default function VerifyEmail({ status }) {
- + Log Out
From b2818733065496106ae90feb892d99ef362ff90c Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Thu, 20 May 2021 08:18:43 -0500 Subject: [PATCH 15/16] add transition / headless ui --- src/Console/InstallCommand.php | 1 + .../resources/js/Components/Dropdown.js | 99 ++++++++++++------- 2 files changed, 67 insertions(+), 33 deletions(-) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 2cddcfb82..4fb1c98cb 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -185,6 +185,7 @@ protected function installInertiaReactStack() // NPM Packages... $this->updateNodePackages(function ($packages) { return [ + '@headlessui/react' => '^1.2.0', '@inertiajs/inertia' => '^0.8.4', '@inertiajs/inertia-react' => '^0.5.12', '@inertiajs/progress' => '^0.2.4', diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.js b/stubs/inertia-react/resources/js/Components/Dropdown.js index 6c33f8f55..3b8a8b980 100644 --- a/stubs/inertia-react/resources/js/Components/Dropdown.js +++ b/stubs/inertia-react/resources/js/Components/Dropdown.js @@ -1,63 +1,96 @@ -import React, { useState, useContext } from 'react'; -import { InertiaLink } from '@inertiajs/inertia-react'; +import React, { useState, useContext } from "react"; +import { InertiaLink } from "@inertiajs/inertia-react"; +import { Transition } from "@headlessui/react"; const DropDownContext = React.createContext(); const Dropdown = ({ children }) => { + const [open, setOpen] = useState(false); const toggleOpen = () => { - setOpen((previousState) => !previousState); + setOpen((previousState) => ! previousState); }; return ( -
{children}
+
+ {children} +
); -}; +} const Trigger = ({ children }) => { - const { open, setOpen, toggleOpen } = useContext(DropDownContext); + const { open, setOpen, toggleOpen } = useContext(DropDownContext) return ( <> -
{children}
+
+ {children} +
- {open &&
setOpen(false)}>
} + {open && ( +
setOpen(false)}> +
+ )} - ); -}; + ) +} + +const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => { + + const { open, setOpen } = useContext(DropDownContext) + + let alignmentClasses = 'origin-top'; -const Content = ({ contentClasses = 'py-1 bg-white', children }) => { - const { open, setOpen } = useContext(DropDownContext); + if (align === 'left') { + alignmentClasses = 'origin-top-left left-0'; + } else if (align === 'right') { + alignmentClasses = 'origin-top-right right-0'; + } + + let widthClasses = ''; + + if (width === '48') { + widthClasses = 'w-48'; + } return ( <> - {open && ( -
setOpen(false)} - > -
{children}
-
- )} + + {open && ( +
setOpen(false)} + > +
+ {children} +
+
+ )} + - ); -}; + ) +} const Link = ({ href, method = 'post', as = 'a', children }) => { - return ( - - {children} - - ); -}; + return + {children} + +} Dropdown.Trigger = Trigger; Dropdown.Content = Content; From a8232598089bdce720dbde19763b45fb65ff5805 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Thu, 20 May 2021 08:19:12 -0500 Subject: [PATCH 16/16] Apply fixes from StyleCI (#76) --- .../resources/js/Components/Dropdown.js | 62 +++++++++---------- 1 file changed, 28 insertions(+), 34 deletions(-) diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.js b/stubs/inertia-react/resources/js/Components/Dropdown.js index 3b8a8b980..e1c24c184 100644 --- a/stubs/inertia-react/resources/js/Components/Dropdown.js +++ b/stubs/inertia-react/resources/js/Components/Dropdown.js @@ -1,46 +1,37 @@ -import React, { useState, useContext } from "react"; -import { InertiaLink } from "@inertiajs/inertia-react"; -import { Transition } from "@headlessui/react"; +import React, { useState, useContext } from 'react'; +import { InertiaLink } from '@inertiajs/inertia-react'; +import { Transition } from '@headlessui/react'; const DropDownContext = React.createContext(); const Dropdown = ({ children }) => { - const [open, setOpen] = useState(false); const toggleOpen = () => { - setOpen((previousState) => ! previousState); + setOpen((previousState) => !previousState); }; return ( -
- {children} -
+
{children}
 ); -} +}; const Trigger = ({ children }) => { - const { open, setOpen, toggleOpen } = useContext(DropDownContext) + const { open, setOpen, toggleOpen } = useContext(DropDownContext); return ( <> -
- {children} -
- - {open && ( -
setOpen(false)}> -
- )} +
{children}
+ + {open &&
setOpen(false)}>
} - ) -} + ); +}; const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => { - - const { open, setOpen } = useContext(DropDownContext) + const { open, setOpen } = useContext(DropDownContext); let alignmentClasses = 'origin-top'; @@ -68,7 +59,8 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit leaveTo="transform opacity-0 scale-95" > {open && ( -
setOpen(false)} >
@@ -78,19 +70,21 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit )} - ) -} + ); +}; const Link = ({ href, method = 'post', as = 'a', children }) => { - return - {children} - -} + return ( + + {children} + + ); +}; Dropdown.Trigger = Trigger; Dropdown.Content = Content;