[1.x] Remove "Breeze" component prefix (laravel#179)

* Remove Breeze prefix from components * Standardize layout components * Rename components that conflict with HTML elements
slimani-dev · Jan 21, 2023 · 70d50b6 · 70d50b6
1 parent 11cd788
commit 70d50b6
Show file tree

Hide file tree

Showing 33 changed files with 212 additions and 212 deletions.
diff --git a/stubs/default/resources/views/auth/confirm-password.blade.php b/stubs/default/resources/views/auth/confirm-password.blade.php
@@ -18,18 +18,18 @@
 
             <!-- Password -->
             <div>
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
+                <x-text-input id="password" class="block mt-1 w-full"
                                 type="password"
                                 name="password"
                                 required autocomplete="current-password" />
             </div>
 
             <div class="flex justify-end mt-4">
-                <x-button>
+                <x-primary-button>
                     {{ __('Confirm') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>

diff --git a/stubs/default/resources/views/auth/forgot-password.blade.php b/stubs/default/resources/views/auth/forgot-password.blade.php
@@ -21,15 +21,15 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <x-button>
+                <x-primary-button>
                     {{ __('Email Password Reset Link') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>

diff --git a/stubs/default/resources/views/auth/login.blade.php b/stubs/default/resources/views/auth/login.blade.php
@@ -17,16 +17,16 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
+                <x-text-input id="password" class="block mt-1 w-full"
                                 type="password"
                                 name="password"
                                 required autocomplete="current-password" />
@@ -47,9 +47,9 @@
                     </a>
                 @endif
 
-                <x-button class="ml-3">
+                <x-primary-button class="ml-3">
                     {{ __('Log in') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>

diff --git a/stubs/default/resources/views/auth/register.blade.php b/stubs/default/resources/views/auth/register.blade.php
@@ -14,33 +14,33 @@
 
             <!-- Name -->
             <div>
-                <x-label for="name" :value="__('Name')" />
+                <x-input-label for="name" :value="__('Name')" />
 
-                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
+                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
             </div>
 
             <!-- Email Address -->
             <div class="mt-4">
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full"
+                <x-text-input id="password" class="block mt-1 w-full"
                                 type="password"
                                 name="password"
                                 required autocomplete="new-password" />
             </div>
 
             <!-- Confirm Password -->
             <div class="mt-4">
-                <x-label for="password_confirmation" :value="__('Confirm Password')" />
+                <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
 
-                <x-input id="password_confirmation" class="block mt-1 w-full"
+                <x-text-input id="password_confirmation" class="block mt-1 w-full"
                                 type="password"
                                 name="password_confirmation" required />
             </div>
@@ -50,9 +50,9 @@
                     {{ __('Already registered?') }}
                 </a>
 
-                <x-button class="ml-4">
+                <x-primary-button class="ml-4">
                     {{ __('Register') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>

diff --git a/stubs/default/resources/views/auth/reset-password.blade.php b/stubs/default/resources/views/auth/reset-password.blade.php
@@ -17,31 +17,31 @@
 
             <!-- Email Address -->
             <div>
-                <x-label for="email" :value="__('Email')" />
+                <x-input-label for="email" :value="__('Email')" />
 
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus />
+                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus />
             </div>
 
             <!-- Password -->
             <div class="mt-4">
-                <x-label for="password" :value="__('Password')" />
+                <x-input-label for="password" :value="__('Password')" />
 
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required />
+                <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required />
             </div>
 
             <!-- Confirm Password -->
             <div class="mt-4">
-                <x-label for="password_confirmation" :value="__('Confirm Password')" />
+                <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
 
-                <x-input id="password_confirmation" class="block mt-1 w-full"
+                <x-text-input id="password_confirmation" class="block mt-1 w-full"
                                     type="password"
                                     name="password_confirmation" required />
             </div>
 
             <div class="flex items-center justify-end mt-4">
-                <x-button>
+                <x-primary-button>
                     {{ __('Reset Password') }}
-                </x-button>
+                </x-primary-button>
             </div>
         </form>
     </x-auth-card>

diff --git a/stubs/default/resources/views/auth/verify-email.blade.php b/stubs/default/resources/views/auth/verify-email.blade.php
@@ -21,9 +21,9 @@
                 @csrf
 
                 <div>
-                    <x-button>
+                    <x-primary-button>
                         {{ __('Resend Verification Email') }}
-                    </x-button>
+                    </x-primary-button>
                 </div>
             </form>
 

diff --git a/...esources/views/components/label.blade.php → ...es/views/components/input-label.blade.php b/...esources/views/components/label.blade.php → ...es/views/components/input-label.blade.php
diff --git a/...sources/views/components/button.blade.php → ...views/components/primary-button.blade.php b/...sources/views/components/button.blade.php → ...views/components/primary-button.blade.php
diff --git a/...esources/views/components/input.blade.php → ...ces/views/components/text-input.blade.php b/...esources/views/components/input.blade.php → ...ces/views/components/text-input.blade.php
diff --git a/...a-react/resources/js/Components/Label.jsx → ...ct/resources/js/Components/InputLabel.jsx b/...a-react/resources/js/Components/Label.jsx → ...ct/resources/js/Components/InputLabel.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function Label({ forInput, value, className, children }) {
+export default function InputLabel({ forInput, value, className, children }) {
     return (
         <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 ` + className}>
             {value ? value : children}

diff --git a/...-react/resources/js/Components/Button.jsx → ...resources/js/Components/PrimaryButton.jsx b/...-react/resources/js/Components/Button.jsx → ...resources/js/Components/PrimaryButton.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function Button({ type = 'submit', className = '', processing, children }) {
+export default function PrimaryButton({ type = 'submit', className = '', processing, children }) {
     return (
         <button
             type={type}

diff --git a/...a-react/resources/js/Components/Input.jsx → ...act/resources/js/Components/TextInput.jsx b/...a-react/resources/js/Components/Input.jsx → ...act/resources/js/Components/TextInput.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-export default function Input({
+export default function TextInput({
     type = 'text',
     name,
     id,

diff --git a/...ct/resources/js/Layouts/Authenticated.jsx → ...ources/js/Layouts/AuthenticatedLayout.jsx b/...ct/resources/js/Layouts/Authenticated.jsx → ...ources/js/Layouts/AuthenticatedLayout.jsx
diff --git a/...rtia-react/resources/js/Layouts/Guest.jsx → ...eact/resources/js/Layouts/GuestLayout.jsx b/...rtia-react/resources/js/Layouts/Guest.jsx → ...eact/resources/js/Layouts/GuestLayout.jsx
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ConfirmPassword.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
-import Label from '@/Components/Label';
+import InputLabel from '@/Components/InputLabel';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ConfirmPassword() {
@@ -28,7 +28,7 @@ export default function ConfirmPassword() {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Confirm Password" />
 
             <div className="mb-4 text-sm text-gray-600">
@@ -37,9 +37,9 @@ export default function ConfirmPassword() {
 
             <form onSubmit={submit}>
                 <div className="mt-4">
-                    <Label forInput="password" value="Password" />
+                    <InputLabel forInput="password" value="Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         name="password"
                         value={data.password}
@@ -52,11 +52,11 @@ export default function ConfirmPassword() {
                 </div>
 
                 <div className="flex items-center justify-end mt-4">
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Confirm
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx b/stubs/inertia-react/resources/js/Pages/Auth/ForgotPassword.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Button from '@/Components/Button';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, useForm } from '@inertiajs/inertia-react';
 
 export default function ForgotPassword({ status }) {
@@ -21,7 +21,7 @@ export default function ForgotPassword({ status }) {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Forgot Password" />
 
             <div className="mb-4 text-sm text-gray-500 leading-normal">
@@ -32,7 +32,7 @@ export default function ForgotPassword({ status }) {
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
-                <Input
+                <TextInput
                     type="text"
                     name="email"
                     value={data.email}
@@ -44,11 +44,11 @@ export default function ForgotPassword({ status }) {
                 <InputError message={errors.email} className="mt-2" />
 
                 <div className="flex items-center justify-end mt-4">
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Email Password Reset Link
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }
diff --git a/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx b/stubs/inertia-react/resources/js/Pages/Auth/Login.jsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
-import Button from '@/Components/Button';
 import Checkbox from '@/Components/Checkbox';
-import Guest from '@/Layouts/Guest';
-import Input from '@/Components/Input';
+import GuestLayout from '@/Layouts/GuestLayout';
 import InputError from '@/Components/InputError';
-import Label from '@/Components/Label';
+import InputLabel from '@/Components/InputLabel';
+import PrimaryButton from '@/Components/PrimaryButton';
+import TextInput from '@/Components/TextInput';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
 
 export default function Login({ status, canResetPassword }) {
@@ -31,16 +31,16 @@ export default function Login({ status, canResetPassword }) {
     };
 
     return (
-        <Guest>
+        <GuestLayout>
             <Head title="Log in" />
 
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
                 <div>
-                    <Label forInput="email" value="Email" />
+                    <InputLabel forInput="email" value="Email" />
 
-                    <Input
+                    <TextInput
                         type="text"
                         id="email"
                         name="email"
@@ -55,9 +55,9 @@ export default function Login({ status, canResetPassword }) {
                 </div>
 
                 <div className="mt-4">
-                    <Label forInput="password" value="Password" />
+                    <InputLabel forInput="password" value="Password" />
 
-                    <Input
+                    <TextInput
                         type="password"
                         id="password"
                         name="password"
@@ -88,11 +88,11 @@ export default function Login({ status, canResetPassword }) {
                         </Link>
                     )}
 
-                    <Button className="ml-4" processing={processing}>
+                    <PrimaryButton className="ml-4" processing={processing}>
                         Log in
-                    </Button>
+                    </PrimaryButton>
                 </div>
             </form>
-        </Guest>
+        </GuestLayout>
     );
 }