[1.x] Prop consistency (#272)

* Mark Checkbox checked prop as required * Remove unnecessary props * Improve prop definition consistency * Pass user object directly to authenticated layout * Destructure all used props * Formatting
laravel · Mar 8, 2023 · 8df9bc5 · 8df9bc5
1 parent e7b8757
commit 8df9bc5
Show file tree

Hide file tree

Showing 21 changed files with 106 additions and 57 deletions.
diff --git a/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx b/stubs/inertia-react/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -5,7 +5,7 @@ import NavLink from '@/Components/NavLink';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
 import { Link } from '@inertiajs/react';
 
-export default function Authenticated({ auth, header, children }) {
+export default function Authenticated({ user, header, children }) {
     const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
 
     return (
@@ -36,7 +36,7 @@ export default function Authenticated({ auth, header, children }) {
                                                 type="button"
                                                 className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
                                             >
-                                                {auth.user.name}
+                                                {user.name}
 
                                                 <svg
                                                     className="ml-2 -mr-0.5 h-4 w-4"
@@ -99,10 +99,8 @@ export default function Authenticated({ auth, header, children }) {
 
                     <div className="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
                         <div className="px-4">
-                            <div className="font-medium text-base text-gray-800 dark:text-gray-200">
-                                {auth.user.name}
-                            </div>
-                            <div className="font-medium text-sm text-gray-500">{auth.user.email}</div>
+                            <div className="font-medium text-base text-gray-800 dark:text-gray-200">{user.name}</div>
+                            <div className="font-medium text-sm text-gray-500">{user.email}</div>
                         </div>
 
                         <div className="mt-3 space-y-1">

diff --git a/stubs/inertia-react/resources/js/Pages/Dashboard.jsx b/stubs/inertia-react/resources/js/Pages/Dashboard.jsx
@@ -1,11 +1,10 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head } from '@inertiajs/react';
 
-export default function Dashboard(props) {
+export default function Dashboard({ auth }) {
     return (
         <AuthenticatedLayout
-            auth={props.auth}
-            errors={props.errors}
+            user={auth.user}
             header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>}
         >
             <Head title="Dashboard" />

diff --git a/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx b/stubs/inertia-react/resources/js/Pages/Profile/Edit.jsx
@@ -7,7 +7,7 @@ import { Head } from '@inertiajs/react';
 export default function Edit({ auth, mustVerifyEmail, status }) {
     return (
         <AuthenticatedLayout
-            auth={auth}
+            user={auth.user}
             header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>}
         >
             <Head title="Profile" />

diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.jsx b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
@@ -1,12 +1,12 @@
 import { Link, Head } from '@inertiajs/react';
 
-export default function Welcome(props) {
+export default function Welcome({ auth, laravelVersion, phpVersion }) {
     return (
         <>
             <Head title="Welcome" />
             <div className="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
                 <div className="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
-                    {props.auth.user ? (
+                    {auth.user ? (
                         <Link
                             href={route('dashboard')}
                             className="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
@@ -316,7 +316,7 @@ export default function Welcome(props) {
                         </div>
 
                         <div className="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
-                            Laravel v{props.laravelVersion} (PHP v{props.phpVersion})
+                            Laravel v{laravelVersion} (PHP v{phpVersion})
                         </div>
                     </div>
                 </div>

diff --git a/stubs/inertia-vue/resources/js/Components/Checkbox.vue b/stubs/inertia-vue/resources/js/Components/Checkbox.vue
@@ -6,7 +6,7 @@ const emit = defineEmits(['update:checked']);
 const props = defineProps({
     checked: {
         type: [Array, Boolean],
-        default: false,
+        required: true,
     },
     value: {
         default: null,

diff --git a/stubs/inertia-vue/resources/js/Components/DangerButton.vue b/stubs/inertia-vue/resources/js/Components/DangerButton.vue
@@ -1,15 +1,5 @@
-<script setup>
-defineProps({
-    type: {
-        type: String,
-        default: 'submit',
-    },
-});
-</script>
-
 <template>
     <button
-        :type="type"
         class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
     >
         <slot />

diff --git a/stubs/inertia-vue/resources/js/Components/Dropdown.vue b/stubs/inertia-vue/resources/js/Components/Dropdown.vue
@@ -3,13 +3,16 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 const props = defineProps({
     align: {
+        type: String,
         default: 'right',
     },
     width: {
+        type: String,
         default: '48',
     },
     contentClasses: {
-        default: () => ['py-1', 'bg-white dark:bg-gray-700'],
+        type: String,
+        default: 'py-1 bg-white dark:bg-gray-700',
     },
 });
 

diff --git a/stubs/inertia-vue/resources/js/Components/DropdownLink.vue b/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
@@ -1,9 +1,17 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
+
+defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+});
 </script>
 
 <template>
     <Link
+        :href="href"
         class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
     >
         <slot />

diff --git a/stubs/inertia-vue/resources/js/Components/InputError.vue b/stubs/inertia-vue/resources/js/Components/InputError.vue
@@ -1,5 +1,9 @@
 <script setup>
-defineProps(['message']);
+defineProps({
+    message: {
+        type: String,
+    },
+});
 </script>
 
 <template>

diff --git a/stubs/inertia-vue/resources/js/Components/InputLabel.vue b/stubs/inertia-vue/resources/js/Components/InputLabel.vue
@@ -1,5 +1,9 @@
 <script setup>
-defineProps(['value']);
+defineProps({
+    value: {
+        type: String,
+    },
+});
 </script>
 
 <template>

diff --git a/stubs/inertia-vue/resources/js/Components/NavLink.vue b/stubs/inertia-vue/resources/js/Components/NavLink.vue
@@ -2,7 +2,15 @@
 import { computed } from 'vue';
 import { Link } from '@inertiajs/vue3';
 
-const props = defineProps(['href', 'active']);
+const props = defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+    active: {
+        type: Boolean,
+    },
+});
 
 const classes = computed(() =>
     props.active

diff --git a/stubs/inertia-vue/resources/js/Components/PrimaryButton.vue b/stubs/inertia-vue/resources/js/Components/PrimaryButton.vue
@@ -1,15 +1,5 @@
-<script setup>
-defineProps({
-    type: {
-        type: String,
-        default: 'submit',
-    },
-});
-</script>
-
 <template>
     <button
-        :type="type"
         class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
     >
         <slot />

diff --git a/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue b/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
@@ -2,7 +2,15 @@
 import { computed } from 'vue';
 import { Link } from '@inertiajs/vue3';
 
-const props = defineProps(['href', 'active']);
+const props = defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+    active: {
+        type: Boolean,
+    },
+});
 
 const classes = computed(() =>
     props.active

diff --git a/stubs/inertia-vue/resources/js/Components/TextInput.vue b/stubs/inertia-vue/resources/js/Components/TextInput.vue
@@ -1,7 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 
-defineProps(['modelValue']);
+defineProps({
+    modelValue: {
+        type: String,
+        required: true,
+    },
+});
 
 defineEmits(['update:modelValue']);
 

diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
@@ -7,7 +7,9 @@ import TextInput from '@/Components/TextInput.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 
 defineProps({
-    status: String,
+    status: {
+        type: String,
+    },
 });
 
 const form = useForm({

diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
@@ -8,8 +8,12 @@ import TextInput from '@/Components/TextInput.vue';
 import { Head, Link, useForm } from '@inertiajs/vue3';
 
 defineProps({
-    canResetPassword: Boolean,
-    status: String,
+    canResetPassword: {
+        type: Boolean,
+    },
+    status: {
+        type: String,
+    },
 });
 
 const form = useForm({

diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
@@ -7,8 +7,14 @@ import TextInput from '@/Components/TextInput.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 
 const props = defineProps({
-    email: String,
-    token: String,
+    email: {
+        type: String,
+        required: true,
+    },
+    token: {
+        type: String,
+        required: true,
+    },
 });
 
 const form = useForm({

diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue b/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
@@ -5,7 +5,9 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { Head, Link, useForm } from '@inertiajs/vue3';
 
 const props = defineProps({
-    status: String,
+    status: {
+        type: String,
+    },
 });
 
 const form = useForm({});

diff --git a/stubs/inertia-vue/resources/js/Pages/Profile/Edit.vue b/stubs/inertia-vue/resources/js/Pages/Profile/Edit.vue
@@ -6,8 +6,12 @@ import UpdateProfileInformationForm from './Partials/UpdateProfileInformationFor
 import { Head } from '@inertiajs/vue3';
 
 defineProps({
-    mustVerifyEmail: Boolean,
-    status: String,
+    mustVerifyEmail: {
+        type: Boolean,
+    },
+    status: {
+        type: String,
+    },
 });
 </script>
 

diff --git a/stubs/inertia-vue/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/stubs/inertia-vue/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -5,9 +5,13 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
 import { Link, useForm, usePage } from '@inertiajs/vue3';
 
-const props = defineProps({
-    mustVerifyEmail: Boolean,
-    status: String,
+defineProps({
+    mustVerifyEmail: {
+        type: Boolean,
+    },
+    status: {
+        type: String,
+    },
 });
 
 const user = usePage().props.auth.user;
@@ -60,7 +64,7 @@ const form = useForm({
                 <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
-            <div v-if="props.mustVerifyEmail && user.email_verified_at === null">
+            <div v-if="mustVerifyEmail && user.email_verified_at === null">
                 <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
                     Your email address is unverified.
                     <Link
@@ -74,7 +78,7 @@ const form = useForm({
                 </p>
 
                 <div
-                    v-show="props.status === 'verification-link-sent'"
+                    v-show="status === 'verification-link-sent'"
                     class="mt-2 font-medium text-sm text-green-600 dark:text-green-400"
                 >
                     A new verification link has been sent to your email address.

diff --git a/stubs/inertia-vue/resources/js/Pages/Welcome.vue b/stubs/inertia-vue/resources/js/Pages/Welcome.vue
@@ -2,10 +2,20 @@
 import { Head, Link } from '@inertiajs/vue3';
 
 defineProps({
-    canLogin: Boolean,
-    canRegister: Boolean,
-    laravelVersion: String,
-    phpVersion: String,
+    canLogin: {
+        type: Boolean,
+    },
+    canRegister: {
+        type: Boolean,
+    },
+    laravelVersion: {
+        type: String,
+        required: true,
+    },
+    phpVersion: {
+        type: String,
+        required: true,
+    },
 });
 </script>