Refactor: Rename interfaces to use "I" prefix and extract Component Props into separate interfaces

resources/js/components/app-content.tsx

@@ -1,11 +1,11 @@
 import { SidebarInset } from '@/components/ui/sidebar';
 import * as React from 'react';
 
-interface AppContentProps extends React.ComponentProps<'div'> {
+interface IAppContentProps extends React.ComponentProps<'div'> {
     variant?: 'header' | 'sidebar';
 }
 
-export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
+export function AppContent({ variant = 'header', children, ...props }: IAppContentProps) {
     if (variant === 'sidebar') {
         return <SidebarInset {...props}>{children}</SidebarInset>;
     }

resources/js/components/app-header.tsx

@@ -9,21 +9,21 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useInitials } from '@/hooks/use-initials';
 import { cn } from '@/lib/utils';
-import { type BreadcrumbItem, type NavItem, type SharedData } from '@/types';
+import { type IBreadcrumbItem, type INavItem, type ISharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-react';
 import AppLogo from './app-logo';
 import AppLogoIcon from './app-logo-icon';
 
-const mainNavItems: NavItem[] = [
+const mainNavItems: INavItem[] = [
     {
         title: 'Dashboard',
         url: '/dashboard',
         icon: LayoutGrid,
     },
 ];
 
-const rightNavItems: NavItem[] = [
+const rightNavItems: INavItem[] = [
     {
         title: 'Repository',
         url: 'https://github.com/laravel/react-starter-kit',
@@ -38,12 +38,12 @@ const rightNavItems: NavItem[] = [
 
 const activeItemStyles = 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
 
-interface AppHeaderProps {
-    breadcrumbs?: BreadcrumbItem[];
+interface IAppHeaderProps {
+    breadcrumbs?: IBreadcrumbItem[];
 }
 
-export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
-    const page = usePage<SharedData>();
+export function AppHeader({ breadcrumbs = [] }: IAppHeaderProps) {
+    const page = usePage<ISharedData>();
     const { auth } = page.props;
     const getInitials = useInitials();
     return (

resources/js/components/app-shell.tsx

@@ -1,12 +1,12 @@
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { useState } from 'react';
 
-interface AppShellProps {
+interface IAppShellProps {
     children: React.ReactNode;
     variant?: 'header' | 'sidebar';
 }
 
-export function AppShell({ children, variant = 'header' }: AppShellProps) {
+export function AppShell({ children, variant = 'header' }: IAppShellProps) {
     const [isOpen, setIsOpen] = useState(() => (typeof window !== 'undefined' ? localStorage.getItem('sidebar') !== 'false' : true));
 
     const handleSidebarChange = (open: boolean) => {

resources/js/components/app-sidebar-header.tsx

@@ -1,8 +1,12 @@
 import { Breadcrumbs } from '@/components/breadcrumbs';
 import { SidebarTrigger } from '@/components/ui/sidebar';
-import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
-export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
+interface IAppSidebarHeaderProps {
+    breadcrumbs?: IBreadcrumbItem[];
+}
+
+export function AppSidebarHeader({ breadcrumbs = [] }: IAppSidebarHeaderProps) {
     return (
         <header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
             <div className="flex items-center gap-2">

resources/js/components/app-sidebar.tsx

@@ -2,20 +2,20 @@ import { NavFooter } from '@/components/nav-footer';
 import { NavMain } from '@/components/nav-main';
 import { NavUser } from '@/components/nav-user';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
 import { Link } from '@inertiajs/react';
 import { BookOpen, Folder, LayoutGrid } from 'lucide-react';
 import AppLogo from './app-logo';
 
-const mainNavItems: NavItem[] = [
+const mainNavItems: INavItem[] = [
     {
         title: 'Dashboard',
         url: '/dashboard',
         icon: LayoutGrid,
     },
 ];
 
-const footerNavItems: NavItem[] = [
+const footerNavItems: INavItem[] = [
     {
         title: 'Repository',
         url: 'https://github.com/laravel/react-starter-kit',

resources/js/components/breadcrumbs.tsx

@@ -1,8 +1,12 @@
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
-import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { type IBreadcrumbItem  } from '@/types';
 import { Fragment } from 'react';
 
-export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
+interface IBreadcrumbsProps {
+    breadcrumbs: IBreadcrumbItem[];
+}
+
+export function Breadcrumbs({ breadcrumbs }: IBreadcrumbsProps) {
     return (
         <>
             {breadcrumbs.length > 0 && (

resources/js/components/heading-small.tsx

@@ -1,4 +1,9 @@
-export default function HeadingSmall({ title, description }: { title: string; description?: string }) {
+interface IHeadingSmallProps {
+    title: string;
+    description?: string;
+}
+
+export default function HeadingSmall({ title, description }: IHeadingSmallProps) {
     return (
         <header>
             <h3 className="mb-0.5 text-base font-medium">{title}</h3>

resources/js/components/heading.tsx

@@ -1,4 +1,9 @@
-export default function Heading({ title, description }: { title: string; description?: string }) {
+interface IHeadingProps {
+    title: string;
+    description?: string;
+}
+
+export default function Heading({ title, description }: IHeadingProps) {
     return (
         <>
             <div className="mb-8 space-y-0.5">

resources/js/components/icon.tsx

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

resources/js/components/input-error.tsx

@@ -1,7 +1,11 @@
 import { cn } from '@/lib/utils';
 import { HTMLAttributes } from 'react';
 
-export default function InputError({ message, className = '', ...props }: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
+interface IInputErrorProps extends HTMLAttributes<HTMLParagraphElement> {
+    message?: string;
+}
+
+export default function InputError({ message, className = '', ...props }: IInputErrorProps) {
     return message ? (
         <p {...props} className={cn('text-sm text-red-600 dark:text-red-400', className)}>
             {message}

resources/js/components/nav-footer.tsx

@@ -1,16 +1,19 @@
 import { Icon } from '@/components/icon';
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
+import { cn } from '../lib/utils';
+
+interface INavFooter extends React.ComponentPropsWithoutRef<typeof SidebarGroup>  {
+    items: INavItem[];
+}
 
 export function NavFooter({
     items,
     className,
     ...props
-}: React.ComponentPropsWithoutRef<typeof SidebarGroup> & {
-    items: NavItem[];
-}) {
+}: INavFooter) {
     return (
-        <SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
+        <SidebarGroup {...props} className={cn(`group-data-[collapsible=icon]:p-0`, className)}>
             <SidebarGroupContent>
                 <SidebarMenu>
                     {items.map((item) => (

resources/js/components/nav-main.tsx

@@ -1,8 +1,12 @@
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 
-export function NavMain({ items = [] }: { items: NavItem[] }) {
+interface INavMainProps {
+    items: INavItem[];
+}
+
+export function NavMain({ items = [] }: INavMainProps) {
     const page = usePage();
     return (
         <SidebarGroup className="px-2 py-0">

resources/js/components/nav-user.tsx

@@ -3,12 +3,12 @@ import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/c
 import { UserInfo } from '@/components/user-info';
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useIsMobile } from '@/hooks/use-mobile';
-import { type SharedData } from '@/types';
+import { type ISharedData } from '@/types';
 import { usePage } from '@inertiajs/react';
 import { ChevronsUpDown } from 'lucide-react';
 
 export function NavUser() {
-    const { auth } = usePage<SharedData>().props;
+    const { auth } = usePage<ISharedData>().props;
     const { state } = useSidebar();
     const isMobile = useIsMobile();
 

resources/js/components/ui/placeholder-pattern.tsx

@@ -11,7 +11,7 @@ export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
         <svg className={className} fill="none">
             <defs>
                 <pattern id={patternId} x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
-                    <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
+                    <path d="M-1 5L5 -1M3 9L8.5 3.5" strokeWidth={0.5}></path>
                 </pattern>
             </defs>
             <rect stroke="none" fill={`url(#${patternId})`} width="100%" height="100%"></rect>

resources/js/components/user-info.tsx

@@ -1,8 +1,13 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/hooks/use-initials';
-import { type User } from '@/types';
+import { type IUser } from '@/types';
 
-export function UserInfo({ user, showEmail = false }: { user: User; showEmail?: boolean }) {
+interface IUserInfoProps {
+    user: IUser;
+    showEmail?: boolean;
+}
+
+export function UserInfo({ user, showEmail = false }: IUserInfoProps) {
     const getInitials = useInitials();
 
     return (

resources/js/components/user-menu-content.tsx

@@ -1,15 +1,15 @@
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
 import { UserInfo } from '@/components/user-info';
 import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
-import { type User } from '@/types';
+import { type IUser } from '@/types';
 import { Link } from '@inertiajs/react';
 import { LogOut, Settings } from 'lucide-react';
 
-interface UserMenuContentProps {
-    user: User;
+interface IUserMenuContentProps {
+    user: IUser;
 }
 
-export function UserMenuContent({ user }: UserMenuContentProps) {
+export function UserMenuContent({ user }: IUserMenuContentProps) {
     const cleanup = useMobileNavigation();
 
     return (

resources/js/layouts/app-layout.tsx

@@ -1,12 +1,12 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
-interface AppLayoutProps {
+interface IAppLayoutProps {
     children: React.ReactNode;
-    breadcrumbs?: BreadcrumbItem[];
+    breadcrumbs?: IBreadcrumbItem[];
 }
 
-export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
+export default ({ children, breadcrumbs, ...props }: IAppLayoutProps) => (
     <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
         {children}
     </AppLayoutTemplate>

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

@@ -1,14 +1,14 @@
 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 IBreadcrumbItem } from '@/types';
 
-interface AppHeaderLayoutProps {
+interface IAppHeaderLayoutProps {
     children: React.ReactNode;
-    breadcrumbs?: BreadcrumbItem[];
+    breadcrumbs?: IBreadcrumbItem[];
 }
 
-export default function AppHeaderLayout({ children, breadcrumbs }: AppHeaderLayoutProps) {
+export default function AppHeaderLayout({ children, breadcrumbs }: IAppHeaderLayoutProps) {
     return (
         <AppShell>
             <AppHeader breadcrumbs={breadcrumbs} />

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

@@ -2,9 +2,14 @@ import { AppContent } from '@/components/app-content';
 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 IBreadcrumbItem } from '@/types';
 
-export default function AppSidebarLayout({ children, breadcrumbs = [] }: { children: React.ReactNode; breadcrumbs?: BreadcrumbItem[] }) {
+interface IAppSidebarLayoutProps {
+    children: React.ReactNode;
+    breadcrumbs?: IBreadcrumbItem[];
+}
+
+export default function AppSidebarLayout({ children, breadcrumbs = [] }: IAppSidebarLayoutProps) {
     return (
         <AppShell variant="sidebar">
             <AppSidebar />

resources/js/layouts/auth-layout.tsx

@@ -1,6 +1,12 @@
 import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
 
-export default function AuthLayout({ children, title, description, ...props }: { children: React.ReactNode; title: string; description: string }) {
+interface IAuthLayoutProps {
+    children: React.ReactNode;
+    title: string;
+    description: string;
+}
+
+export default function AuthLayout({ children, title, description, ...props }: IAuthLayoutProps) {
     return (
         <AuthLayoutTemplate title={title} description={description} {...props}>
             {children}

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

@@ -2,16 +2,14 @@ import AppLogoIcon from '@/components/app-logo-icon';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Link } from '@inertiajs/react';
 
-export default function AuthCardLayout({
-    children,
-    title,
-    description,
-}: {
+interface IAuthCardLayoutProps {
     children: React.ReactNode;
     name?: string;
     title?: string;
     description?: string;
-}) {
+}
+
+export default function AuthCardLayout({ children, title, description }: IAuthCardLayoutProps) {
     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';
 
-interface AuthLayoutProps {
+interface IAuthLayoutProps {
     children: React.ReactNode;
     name?: string;
     title?: string;
     description?: string;
 }
 
-export default function AuthSimpleLayout({ children, title, description }: AuthLayoutProps) {
+export default function AuthSimpleLayout({ children, title, description }: IAuthLayoutProps) {
     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,5 +1,5 @@
 import AppLogoIcon from '@/components/app-logo-icon';
-import { type SharedData } from '@/types';
+import { type ISharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 
 interface AuthLayoutProps {
@@ -9,7 +9,7 @@ interface AuthLayoutProps {
 }
 
 export default function AuthSplitLayout({ children, title, description }: AuthLayoutProps) {
-    const { name, quote } = usePage<SharedData>().props;
+    const { name, quote } = usePage<ISharedData>().props;
 
     return (
         <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">