Update eslint rules to use interface instead of type

This updates our custom eslint config for `consistent-type-definitions`
to match the default for eslint.  This is also the recommended rule from
typescript iself, saying:

> use interface until you need to use features from type.

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Also, especially when building extendible React components, using type
intersection (e.g. type Props = X & Y), is significantly slower than
using interface and extends.

Therefore, to fit with standards, we will stick to using interface
everywhere possible

.eslintrc.js

@@ -53,7 +53,6 @@ module.exports = {
     }
   },
   rules: {
-    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
     "@typescript-eslint/consistent-type-imports": [
       "error",
       { prefer: "type-imports", fixStyle: "separate-type-imports" }

app/(auth)/layout.tsx

@@ -5,7 +5,7 @@ import { ThemePickerProvider } from "@/components/theme-picker/theme-picker-prov
 
 import type { ReactNode } from "react"
 
-type Props = {
+interface Props {
   children?: ReactNode
 }
 

app/(legal)/layout.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 
 import type { ReactNode } from "react"
 
-type Props = {
+interface Props {
   children?: ReactNode
 }
 

app/(marketing)/layout.tsx

@@ -4,7 +4,7 @@ import { Header } from "@/components/layout/header"
 
 import type { ReactNode } from "react"
 
-type Props = {
+interface Props {
   children?: ReactNode
 }
 

app/api/ping/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server"
 import { env } from "@/env"
 import { handler } from "@/lib/api-fns"
 
-type ResponseData = {
+interface ResponseData {
   pong: string
 }
 

app/layout.tsx

@@ -11,7 +11,7 @@ import type { ReactNode } from "react"
 
 const inter = Inter({ variable: "--font-inter", subsets: ["latin"] })
 
-type Props = {
+interface Props {
   children: ReactNode
 }
 

components/auth/external-auth-button.tsx

@@ -19,7 +19,7 @@ const PROVIDERS = {
   }
 }
 
-type Props = {
+interface Props {
   provider: keyof typeof PROVIDERS
   isLoading?: boolean
   setIsLoading?: (isLoading: boolean) => void

components/layout/header.tsx

@@ -6,7 +6,7 @@ import { Logo } from "@/components/icons/brand/logo"
 import { Button } from "@/components/ui/button"
 import { siteConfig } from "@/config"
 
-type Props = {
+interface Props {
   user?: { id?: string | null }
 }
 

components/spinner/spinner.tsx

@@ -2,7 +2,7 @@ import { cls } from "@/lib/utils"
 
 import styles from "./spinner.module.css"
 
-type Props = {
+interface Props {
   className?: string
 }
 

components/ui/badge.tsx

@@ -23,8 +23,9 @@ const badgeVariants = cva(
   }
 )
 
-export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof badgeVariants>
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (

components/ui/button.tsx

@@ -33,10 +33,11 @@ const buttonVariants = cva(
   }
 )
 
-export type ButtonProps = {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean
-} & React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof buttonVariants>
+}
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {

components/ui/form.tsx

@@ -10,10 +10,10 @@ import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form"
 
 const Form = FormProvider
 
-type FormFieldContextValue<
+interface FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
+> {
   name: TName
 }
 
@@ -58,7 +58,7 @@ const useFormField = () => {
   }
 }
 
-type FormItemContextValue = {
+interface FormItemContextValue {
   id: string
 }
 

components/ui/toast.tsx

@@ -22,15 +22,14 @@ const ToastViewport = React.forwardRef<
 ))
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
-// eslint-disable-next-line tailwindcss/no-custom-classname
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
         default: "border bg-background text-foreground",
         destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground"
+          "group border-destructive bg-destructive text-destructive-foreground"
       }
     },
     defaultVariants: {

components/ui/use-toast.ts

@@ -47,7 +47,7 @@ type Action =
       toastId?: ToasterToast["id"]
     }
 
-type State = {
+interface State {
   toasts: ToasterToast[]
 }
 

lib/api-fns/types.ts

@@ -5,13 +5,13 @@ import type { NextRequest, NextResponse } from "next/server"
 /**
  * The API Error response
  */
-export type ApiResponseError = {
+export interface ApiResponseError {
   ok: false
   error: string
   issues?: ZodIssue[]
 }
 
-export type ApiResponseSuccess<T> = {
+export interface ApiResponseSuccess<T> {
   ok: true
   data: T
 }
@@ -24,7 +24,7 @@ export type ApiResponse<T> = ApiResponseSuccess<T> | ApiResponseError
 /**
  *
  */
-export type NextRequestContext<T> = {
+export interface NextRequestContext<T> {
   params: T
 }
 
@@ -34,7 +34,7 @@ export type NextRequestContext<T> = {
  *
  * See: https://nextjs.org/docs/app/api-reference/file-conventions/route#context-optional
  */
-export type NextRouteContext<T = undefined> = {
+export interface NextRouteContext<T = undefined> {
   params: T
 }