types: Refactor global types and add Paginator interfaces for improved type safety

Author: SamuelBisberg

resources/js/types/global.d.ts

@@ -1,5 +1,14 @@
 import type { route as routeFn } from 'ziggy-js';
 
 declare global {
-    const route: typeof routeFn;
+  const route: typeof routeFn;
+
+  // Props for pages that use Inertia
+  type PageProps<T = unknown> = App.Data.InertiaRequestData & T;
+
+  // Props for authenticated pages
+  type AuthenticatedPageProps<T = unknown> = App.Data.InertiaRequestData &
+    T & {
+      user: App.Data.UserData;
+    };
 }

resources/js/types/index.d.ts

@@ -1,43 +1,18 @@
 import { LucideIcon } from 'lucide-react';
-import type { Config } from 'ziggy-js';
-
-export interface Auth {
-    user: User;
-}
 
 export interface BreadcrumbItem {
-    title: string;
-    href: string;
+  title: string;
+  href: string;
 }
 
 export interface NavGroup {
-    title: string;
-    items: NavItem[];
+  title: string;
+  items: NavItem[];
 }
 
 export interface NavItem {
-    title: string;
-    href: string;
-    icon?: LucideIcon | null;
-    isActive?: boolean;
-}
-
-export interface SharedData {
-    name: string;
-    quote: { message: string; author: string };
-    auth: Auth;
-    ziggy: Config & { location: string };
-    sidebarOpen: boolean;
-    [key: string]: unknown;
-}
-
-export interface User {
-    id: number;
-    name: string;
-    email: string;
-    avatar?: string;
-    email_verified_at: string | null;
-    created_at: string;
-    updated_at: string;
-    [key: string]: unknown; // This allows for additional properties...
+  title: string;
+  href: string;
+  icon?: LucideIcon | null;
+  isActive?: boolean;
 }

resources/js/types/laravel.d.ts

@@ -0,0 +1,44 @@
+namespace App {
+  /**
+   * Represents a link in a paginator.
+   * Each link has a URL, label, and an active state.
+   */
+  export interface PaginatorLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+  }
+
+  /**
+   * Represents a paginated response.
+   * It contains the current page, data items, and pagination links.
+   */
+  export interface Paginator<T = unknown> {
+    current_page: number;
+    data: T[];
+    first_page_url: string;
+    from: number | null;
+    last_page: number;
+    last_page_url: string;
+    links: PaginatorLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number | null;
+    total: number;
+  }
+
+  /**
+   * @see https://vscode.dev/github/SamuelBisberg/react-starter-kit/blob/main/app/Traits/EnumTrait.php#L12
+   *
+   * Represents a collection of enum values with additional properties.
+   * Each item in the collection has a `value`, `label`, `description`, and `color`.
+   */
+  export type EnumCollection = Array<{
+    value: string;
+    label: string;
+    description?: string;
+    color?: string;
+  }>;
+}