refactor: replace interface with type

Author: matthiasweiss

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'> {
+type AppContentProps = React.ComponentProps<'div'> & {
     variant?: 'header' | 'sidebar';
 }
 

resources/js/components/app-header.tsx

@@ -38,7 +38,7 @@ const rightNavItems: NavItem[] = [
 
 const activeItemStyles = 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
 
-interface AppHeaderProps {
+type AppHeaderProps = {
     breadcrumbs?: BreadcrumbItem[];
 }
 

resources/js/components/app-shell.tsx

@@ -1,7 +1,7 @@
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { useState } from 'react';
 
-interface AppShellProps {
+type AppShellProps = {
     children: React.ReactNode;
     variant?: 'header' | 'sidebar';
 }

resources/js/components/icon.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { type LucideProps } from 'lucide-react';
 
-interface IconProps extends Omit<LucideProps, 'ref'> {
+type IconProps = Omit<LucideProps, 'ref'> & {
     iconNode: React.ComponentType<LucideProps>;
 }
 

resources/js/components/ui/badge.tsx

@@ -20,7 +20,7 @@ const badgeVariants = cva(
     },
 );
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
 
 function Badge({ className, variant, ...props }: BadgeProps) {
     return <div className={cn(badgeVariants({ variant }), className)} {...props} />;

resources/js/components/ui/button.tsx

@@ -30,7 +30,7 @@ const buttonVariants = cva(
     },
 );
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }
 

resources/js/components/ui/icon.tsx

@@ -1,6 +1,6 @@
 import { LucideIcon } from 'lucide-react';
 
-interface IconProps {
+type IconProps = {
     iconNode?: LucideIcon | null;
     className?: string;
 }

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

@@ -1,6 +1,6 @@
 import { useId } from 'react';
 
-interface PlaceholderPatternProps {
+type PlaceholderPatternProps = {
     className?: string;
 }
 

resources/js/components/ui/sheet.tsx

@@ -46,7 +46,7 @@ const sheetVariants = cva(
     },
 );
 
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {}
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & VariantProps<typeof sheetVariants>
 
 const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
     ({ side = 'right', className, children, ...props }, ref) => (

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

@@ -5,7 +5,7 @@ import { type User } from '@/types';
 import { Link } from '@inertiajs/react';
 import { LogOut, Settings } from 'lucide-react';
 
-interface UserMenuContentProps {
+type UserMenuContentProps = {
     user: User;
 }
 

resources/js/layouts/app-layout.tsx

@@ -1,7 +1,7 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import { type BreadcrumbItem } from '@/types';
 
-interface AppLayoutProps {
+type AppLayoutProps = {
     children: React.ReactNode;
     breadcrumbs?: BreadcrumbItem[];
 }

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

@@ -3,7 +3,7 @@ import { AppHeader } from '@/components/app-header';
 import { AppShell } from '@/components/app-shell';
 import { type BreadcrumbItem } from '@/types';
 
-interface AppHeaderLayoutProps {
+type AppHeaderLayoutProps = {
     children: React.ReactNode;
     breadcrumbs?: BreadcrumbItem[];
 }

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

@@ -1,7 +1,7 @@
 import AppLogoIcon from '@/components/app-logo-icon';
 import { Link } from '@inertiajs/react';
 
-interface AuthLayoutProps {
+type AuthLayoutProps = {
     children: React.ReactNode;
     name?: string;
     title?: string;

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

@@ -2,7 +2,7 @@ import AppLogoIcon from '@/components/app-logo-icon';
 import { type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 
-interface AuthLayoutProps {
+type AuthLayoutProps = {
     children: React.ReactNode;
     title?: string;
     description?: string;

resources/js/pages/auth/login.tsx

@@ -10,13 +10,13 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface LoginForm {
+type LoginForm = {
     email: string;
     password: string;
     remember: boolean;
 }
 
-interface LoginProps {
+type LoginProps = {
     status?: string;
     canResetPassword: boolean;
 }

resources/js/pages/auth/register.tsx

@@ -9,7 +9,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface RegisterForm {
+type RegisterForm = {
     name: string;
     email: string;
     password: string;

resources/js/pages/auth/reset-password.tsx

@@ -8,12 +8,12 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface ResetPasswordProps {
+type ResetPasswordProps = {
     token: string;
     email: string;
 }
 
-interface ResetPasswordForm {
+type ResetPasswordForm = {
     token: string;
     email: string;
     password: string;

resources/js/types/index.ts

@@ -1,34 +1,34 @@
 import { LucideIcon } from 'lucide-react';
 
-export interface Auth {
+export type Auth = {
     user: User;
 }
 
-export interface BreadcrumbItem {
+export type BreadcrumbItem = {
     title: string;
     href: string;
 }
 
-export interface NavGroup {
+export type NavGroup = {
     title: string;
     items: NavItem[];
 }
 
-export interface NavItem {
+export type NavItem = {
     title: string;
     url: string;
     icon?: LucideIcon | null;
     isActive?: boolean;
 }
 
-export interface SharedData {
+export type SharedData = {
     name: string;
     quote: { message: string; author: string };
     auth: Auth;
     [key: string]: unknown;
 }
 
-export interface User {
+export type User = {
     id: number;
     name: string;
     email: string;