Apply React best practices and resolve TypeScript issues (#58)

Author: pataar

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[];
 }