Apply React best practices and resolve TypeScript issues

package.json

@@ -7,7 +7,8 @@
         "dev": "vite",
         "format": "prettier --write resources/",
         "format:check": "prettier --check resources/",
-        "lint": "eslint . --fix"
+        "lint": "eslint . --fix",
+        "types": "tsc --noEmit"
     },
     "devDependencies": {
         "@eslint/js": "^9.19.0",

resources/js/components/app-content.tsx

@@ -1,7 +1,7 @@
 import { SidebarInset } from '@/components/ui/sidebar';
 import * as React from 'react';
 
-interface AppContentProps extends React.ComponentProps<'div'> {
+interface AppContentProps extends React.ComponentProps<'main'> {
     variant?: 'header' | 'sidebar';
 }
 

resources/js/components/heading.tsx

@@ -1,10 +1,8 @@
 export default function Heading({ title, description }: { title: string; description?: string }) {
     return (
-        <>
-            <div className="mb-8 space-y-0.5">
-                <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
-                {description && <p className="text-muted-foreground text-sm">{description}</p>}
-            </div>
-        </>
+        <div className="mb-8 space-y-0.5">
+            <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+            {description && <p className="text-muted-foreground text-sm">{description}</p>}
+        </div>
     );
 }

resources/js/components/icon.tsx

@@ -1,8 +1,9 @@
 import { cn } from '@/lib/utils';
 import { type LucideProps } from 'lucide-react';
+import { type ComponentType } from 'react';
 
 interface IconProps extends Omit<LucideProps, 'ref'> {
-    iconNode: React.ComponentType<LucideProps>;
+    iconNode: ComponentType<LucideProps>;
 }
 
 export function Icon({ iconNode: IconComponent, className, ...props }: IconProps) {

resources/js/components/input-error.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils';
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 
 export default function InputError({ message, className = '', ...props }: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
     return message ? (

resources/js/components/nav-footer.tsx

@@ -1,12 +1,13 @@
 import { Icon } from '@/components/icon';
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
+import { type ComponentPropsWithoutRef } from 'react';
 
 export function NavFooter({
     items,
     className,
     ...props
-}: React.ComponentPropsWithoutRef<typeof SidebarGroup> & {
+}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
     items: NavItem[];
 }) {
     return (

resources/js/hooks/use-appearance.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export type Appearance = 'light' | 'dark' | 'system';
 
@@ -29,18 +29,18 @@ export function initializeTheme() {
 export function useAppearance() {
     const [appearance, setAppearance] = useState<Appearance>('system');
 
-    const updateAppearance = (mode: Appearance) => {
+    const updateAppearance = useCallback((mode: Appearance) => {
         setAppearance(mode);
         localStorage.setItem('appearance', mode);
         applyTheme(mode);
-    };
+    }, []);
 
     useEffect(() => {
         const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
         updateAppearance(savedAppearance || 'system');
 
         return () => mediaQuery.removeEventListener('change', handleSystemThemeChange);
-    }, []);
+    }, [updateAppearance]);
 
-    return { appearance, updateAppearance };
+    return { appearance, updateAppearance } as const;
 }

resources/js/hooks/use-initials.tsx

@@ -1,5 +1,7 @@
+import { useCallback } from 'react';
+
 export function useInitials() {
-    const getInitials = (fullName: string): string => {
+    const getInitials = useCallback((fullName: string): string => {
         const names = fullName.trim().split(' ');
 
         if (names.length === 0) return '';
@@ -9,7 +11,7 @@ export function useInitials() {
         const lastInitial = names[names.length - 1].charAt(0);
 
         return `${firstInitial}${lastInitial}`.toUpperCase();
-    };
+    }, []);
 
     return getInitials;
 }

resources/js/hooks/use-mobile.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-    const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+    const [isMobile, setIsMobile] = useState<boolean>();
 
     useEffect(() => {
         const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);

resources/js/layouts/app-layout.tsx

@@ -1,8 +1,9 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import { type BreadcrumbItem } from '@/types';
+import { type ReactNode } from 'react';
 
 interface AppLayoutProps {
-    children: React.ReactNode;
+    children: ReactNode;
     breadcrumbs?: BreadcrumbItem[];
 }
 

resources/js/layouts/app/app-header-layout.tsx

@@ -2,13 +2,9 @@ import { AppContent } from '@/components/app-content';
 import { AppHeader } from '@/components/app-header';
 import { AppShell } from '@/components/app-shell';
 import { type BreadcrumbItem } from '@/types';
+import type { PropsWithChildren } from 'react';
 
-interface AppHeaderLayoutProps {
-    children: React.ReactNode;
-    breadcrumbs?: BreadcrumbItem[];
-}
-
-export default function AppHeaderLayout({ children, breadcrumbs }: AppHeaderLayoutProps) {
+export default function AppHeaderLayout({ children, breadcrumbs }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
     return (
         <AppShell>
             <AppHeader breadcrumbs={breadcrumbs} />

resources/js/layouts/app/app-sidebar-layout.tsx

@@ -3,8 +3,9 @@ import { AppShell } from '@/components/app-shell';
 import { AppSidebar } from '@/components/app-sidebar';
 import { AppSidebarHeader } from '@/components/app-sidebar-header';
 import { type BreadcrumbItem } from '@/types';
+import { type PropsWithChildren } from 'react';
 
-export default function AppSidebarLayout({ children, breadcrumbs = [] }: { children: React.ReactNode; breadcrumbs?: BreadcrumbItem[] }) {
+export default function AppSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
     return (
         <AppShell variant="sidebar">
             <AppSidebar />

resources/js/layouts/auth/auth-card-layout.tsx

@@ -1,17 +1,17 @@
 import AppLogoIcon from '@/components/app-logo-icon';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Link } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
 
 export default function AuthCardLayout({
     children,
     title,
     description,
-}: {
-    children: React.ReactNode;
+}: PropsWithChildren<{
     name?: string;
     title?: string;
     description?: string;
-}) {
+}>) {
     return (
         <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div className="flex w-full max-w-md flex-col gap-6">

resources/js/layouts/auth/auth-simple-layout.tsx

@@ -1,14 +1,14 @@
 import AppLogoIcon from '@/components/app-logo-icon';
 import { Link } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
 
 interface AuthLayoutProps {
-    children: React.ReactNode;
     name?: string;
     title?: string;
     description?: string;
 }
 
-export default function AuthSimpleLayout({ children, title, description }: AuthLayoutProps) {
+export default function AuthSimpleLayout({ children, title, description }: PropsWithChildren<AuthLayoutProps>) {
     return (
         <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div className="w-full max-w-sm">

resources/js/layouts/auth/auth-split-layout.tsx

@@ -1,14 +1,14 @@
 import AppLogoIcon from '@/components/app-logo-icon';
 import { type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
 
 interface AuthLayoutProps {
-    children: React.ReactNode;
     title?: string;
     description?: string;
 }
 
-export default function AuthSplitLayout({ children, title, description }: AuthLayoutProps) {
+export default function AuthSplitLayout({ children, title, description }: PropsWithChildren<AuthLayoutProps>) {
     const { name, quote } = usePage<SharedData>().props;
 
     return (

resources/js/layouts/settings/layout.tsx

@@ -4,6 +4,7 @@ import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
 
 const sidebarNavItems: NavItem[] = [
     {
@@ -23,7 +24,7 @@ const sidebarNavItems: NavItem[] = [
     },
 ];
 
-export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+export default function SettingsLayout({ children }: PropsWithChildren) {
     const currentPath = window.location.pathname;
 
     return (

resources/js/pages/auth/login.tsx

@@ -10,11 +10,11 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface LoginForm {
+type LoginForm = {
     email: string;
     password: string;
     remember: boolean;
-}
+};
 
 interface LoginProps {
     status?: string;

resources/js/pages/auth/register.tsx

@@ -9,12 +9,12 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface RegisterForm {
+type RegisterForm = {
     name: string;
     email: string;
     password: string;
     password_confirmation: string;
-}
+};
 
 export default function Register() {
     const { data, setData, post, processing, errors, reset } = useForm<RegisterForm>({

resources/js/pages/auth/reset-password.tsx

@@ -13,12 +13,12 @@ interface ResetPasswordProps {
     email: string;
 }
 
-interface ResetPasswordForm {
+type ResetPasswordForm = {
     token: string;
     email: string;
     password: string;
     password_confirmation: string;
-}
+};
 
 export default function ResetPassword({ token, email }: ResetPasswordProps) {
     const { data, setData, post, processing, errors, reset } = useForm<ResetPasswordForm>({

resources/js/pages/settings/profile.tsx

@@ -79,13 +79,13 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
 
                         {mustVerifyEmail && auth.user.email_verified_at === null && (
                             <div>
-                                <p className="-mt-4 text-sm text-muted-foreground">
+                                <p className="text-muted-foreground -mt-4 text-sm">
                                     Your email address is unverified.{' '}
                                     <Link
                                         href={route('verification.send')}
                                         method="post"
                                         as="button"
-                                        className="hover:decoration-current! text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
+                                        className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
                                     >
                                         Click here to resend the verification email.
                                     </Link>

resources/js/pages/welcome.tsx

@@ -218,6 +218,7 @@ export default function Welcome() {
                                     />
                                 </g>
                                 <g
+                                    /** @ts-expect-error 'plus-darker' doesn't seem to be defined in the 'csstype' module */
                                     style={{ mixBlendMode: 'plus-darker' }}
                                     className="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
                                 >