Adding a few more fixes to the React Starter kit

Author: tnylea

package-lock.json

@@ -11,6 +11,7 @@
     },
     "devDependencies": {
         "@inertiajs/react": "^2.0.0",
+        "@types/react": "^19.0.3",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.4",
@@ -49,4 +50,4 @@
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7"
     }
-}
+}

package.json

@@ -1,4 +1,4 @@
-import { Github, BookOpenText } from "lucide-react"
+import { BookOpenText, FolderGit2, LayoutDashboard, type LucideIcon } from "lucide-react"
 import { Link } from "@inertiajs/react"
 import { NavMain } from "@/components/nav-main"
 import { NavFooter } from "@/components/nav-footer"
@@ -17,14 +17,23 @@ import ApplicationLogo from "./application-logo"
 interface NavItem {
     title: string
     url: string
-    icon: React.ComponentType
+    icon: LucideIcon
+    isActive?: boolean
 }
 
+const mainNavItems: NavItem[] = [
+    {
+        title: "Dashboard",
+        url: "/dashboard",
+        icon: LayoutDashboard,
+    },
+]
+
 const footerNavItems: NavItem[] = [
     {
-        title: "Github Repo",
+        title: "Repository",
         url: "https://github.com/laravel/react-starter-kit",
-        icon: Github,
+        icon: FolderGit2,
     },
     {
         title: "Documentation",
@@ -55,7 +64,7 @@ export function AppSidebar() {
             </SidebarHeader>
 
             <SidebarContent>
-                <NavMain />
+                <NavMain items={mainNavItems} />
             </SidebarContent>
 
             <SidebarFooter>

resources/js/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { LayoutDashboard, type LucideIcon } from "lucide-react"
+import { type LucideIcon } from "lucide-react"
 import { Link } from "@inertiajs/react"
 import {
     SidebarGroup,
@@ -24,14 +24,6 @@ export function NavMain({ items = [] }: NavMainProps) {
     return (
         <SidebarGroup>
             <SidebarMenu>
-                <SidebarMenuItem>
-                    <SidebarMenuButton asChild isActive>
-                        <Link href={route('dashboard')} prefetch>
-                            <LayoutDashboard />
-                            <span>Dashboard</span>
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
                 {items.map((item) => (
                     <SidebarMenuItem key={item.title}>
                         <SidebarMenuButton asChild isActive={item.isActive}>

resources/js/components/nav-main.tsx

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -25,9 +25,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "ESNext",                                  /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "bundler",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -46,7 +46,7 @@
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
@@ -56,7 +56,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    "noEmit": true,                                      /* Disable emitting files from a compilation. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
@@ -74,7 +74,7 @@
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 
     /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "isolatedModules": true,                             /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
@@ -109,8 +109,10 @@
     "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["resources/js/*"]
+        "@/*": ["./resources/js/*"],
+        "ziggy-js": ["./vendor/tightenco/ziggy"]
     },
-    "jsx": "react"
-  }
+    "jsx": "react-jsx"
+  },
+  "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"]
 }

tsconfig.json

@@ -12,4 +12,7 @@ export default defineConfig({
         }),
         react(),
     ],
+    esbuild: {
+        jsx: 'automatic'
+    }
 });