Inertia globals (#276)

Co-authored-by: WendellAdriel <[email protected]>
Co-authored-by: Arthur Grand <[email protected]>

Author: 3 people

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=@inertiajs/core

resources/js/components/app-header.tsx

@@ -32,7 +32,7 @@ import { useCurrentUrl } from '@/hooks/use-current-url';
 import { useInitials } from '@/hooks/use-initials';
 import { cn, toUrl } from '@/lib/utils';
 import { dashboard } from '@/routes';
-import type { BreadcrumbItem, NavItem, SharedData } from '@/types';
+import type { BreadcrumbItem, NavItem } from '@/types';
 import AppLogo from './app-logo';
 import AppLogoIcon from './app-logo-icon';
 
@@ -65,7 +65,7 @@ const activeItemStyles =
     'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
 
 export function AppHeader({ breadcrumbs = [] }: Props) {
-    const page = usePage<SharedData>();
+    const page = usePage();
     const { auth } = page.props;
     const getInitials = useInitials();
     const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();

resources/js/components/app-shell.tsx

@@ -1,15 +1,14 @@
 import { usePage } from '@inertiajs/react';
 import type { ReactNode } from 'react';
 import { SidebarProvider } from '@/components/ui/sidebar';
-import type { SharedData } from '@/types';
 
 type Props = {
     children: ReactNode;
     variant?: 'header' | 'sidebar';
 };
 
 export function AppShell({ children, variant = 'header' }: Props) {
-    const isOpen = usePage<SharedData>().props.sidebarOpen;
+    const isOpen = usePage().props.sidebarOpen;
 
     if (variant === 'header') {
         return (

resources/js/components/nav-user.tsx

@@ -14,10 +14,9 @@ import {
 import { UserInfo } from '@/components/user-info';
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useIsMobile } from '@/hooks/use-mobile';
-import type { SharedData } from '@/types';
 
 export function NavUser() {
-    const { auth } = usePage<SharedData>().props;
+    const { auth } = usePage().props;
     const { state } = useSidebar();
     const isMobile = useIsMobile();
 

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

@@ -1,14 +1,14 @@
 import { Link, usePage } from '@inertiajs/react';
 import AppLogoIcon from '@/components/app-logo-icon';
 import { home } from '@/routes';
-import type { AuthLayoutProps, SharedData } from '@/types';
+import type { AuthLayoutProps } from '@/types';
 
 export default function AuthSplitLayout({
     children,
     title,
     description,
 }: AuthLayoutProps) {
-    const { name } = usePage<SharedData>().props;
+    const { name } = usePage().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">

resources/js/pages/settings/profile.tsx

@@ -11,7 +11,7 @@ import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { edit } from '@/routes/profile';
 import { send } from '@/routes/verification';
-import type { BreadcrumbItem, SharedData } from '@/types';
+import type { BreadcrumbItem } from '@/types';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -27,7 +27,7 @@ export default function Profile({
     mustVerifyEmail: boolean;
     status?: string;
 }) {
-    const { auth } = usePage<SharedData>().props;
+    const { auth } = usePage().props;
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>

resources/js/pages/welcome.tsx

@@ -1,13 +1,12 @@
 import { Head, Link, usePage } from '@inertiajs/react';
 import { dashboard, login, register } from '@/routes';
-import type { SharedData } from '@/types';
 
 export default function Welcome({
     canRegister = true,
 }: {
     canRegister?: boolean;
 }) {
-    const { auth } = usePage<SharedData>().props;
+    const { auth } = usePage().props;
 
     return (
         <>

resources/js/types/global.d.ts

@@ -0,0 +1,12 @@
+import type { Auth } from '@/types/auth';
+
+declare module '@inertiajs/core' {
+    export interface InertiaConfig {
+        sharedPageProps: {
+            name: string;
+            auth: Auth;
+            sidebarOpen: boolean;
+            [key: string]: unknown;
+        };
+    }
+}

resources/js/types/index.ts

@@ -1,12 +1,3 @@
 export type * from './auth';
 export type * from './navigation';
 export type * from './ui';
-
-import type { Auth } from './auth';
-
-export type SharedData = {
-    name: string;
-    auth: Auth;
-    sidebarOpen: boolean;
-    [key: string]: unknown;
-};