update deps last version (#24)

- new auth and prisma versions - address the type safety on new version adapter - address migration to eslint 9+ - some new eslint rules and necessary changes - several other updates
zenWai · Nov 25, 2024 · 003b678 · 003b678
1 parent fdc4f93
commit 003b678
Show file tree

Hide file tree

Showing 22 changed files with 1,467 additions and 1,201 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -1,11 +1,9 @@
-export default function AuthLayout({ children }: { children: React.ReactNode }) {
+import type { ReactNode } from 'react';
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <div
-        className='flex h-full items-center justify-center
-        bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]
-        from-sky-400 to-blue-800'
-      >
+      <div className='flex h-full items-center justify-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800'>
         {children}
       </div>
     </>

diff --git a/app/(protected)/client/client-component.tsx b/app/(protected)/client/client-component.tsx
@@ -16,7 +16,8 @@ export default function ClientComponent() {
   const userSession: Session['user'] | undefined = useCurrentUser();
   return (
     <div className=''>
-      {/* This userInfo component is what we call a hybrid component, as children of a client component, is a client component */}
+      {/* This userInfo component is what we call a hybrid component,
+      as children of a client component, it is a client component */}
       <UserInfo label='💃Client component' user={userSession} />
     </div>
   );

diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
@@ -2,12 +2,11 @@ import { Navbar } from '@/components/layout/Navbar';
 import { NavigationMenu } from '@/components/layout/navbar/NavigationMenu';
 import { UserAvatarMenu } from '@/components/layout/navbar/UserAvatarMenu';
 
-export default function ProtectedLayout(props: { children: React.ReactNode }) {
+import type { ReactNode } from 'react';
+
+export default function ProtectedLayout(props: { children: ReactNode }) {
   return (
-    <div
-      className='flex min-h-svh w-full flex-col items-center gap-y-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]
-        from-sky-400 to-blue-800 py-5'
-    >
+    <div className='flex min-h-svh w-full flex-col items-center gap-y-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800 py-5'>
       <Navbar>
         <NavigationMenu />
         <UserAvatarMenu />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import { Toaster } from '@/components/ui/sonner';
 
 import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
 
 import './globals.css';
 
@@ -16,7 +17,7 @@ export const metadata: Metadata = {
 export default async function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <html lang='en'>

diff --git a/app/page.tsx b/app/page.tsx
@@ -10,10 +10,7 @@ const font = Poppins({
 });
 export default function Home() {
   return (
-    <main
-      className='flex h-full flex-col items-center justify-center
-    bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800'
-    >
+    <main className='flex h-full flex-col items-center justify-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800'>
       <div className='space-y-6 text-center'>
         <h1 className={cn('text-6xl font-semibold text-white drop-shadow-md', font.className)}>
           <span aria-label='icon' role='img'>

diff --git a/auth.config.ts b/auth.config.ts
@@ -24,11 +24,9 @@ const adapter = {
    * Used when sending magic links
    *
    * @note If it fails, the email will still be sent, a bug, or intended? Did not bother much.
-   * @note Remove id and hashedIp from the return object to match PrismaAdapter original patterns
+   * @note Remove id from the return object to match PrismaAdapter original patterns, we do not have id tho, currently.
    */
-  async createVerificationToken(
-    data: VerificationToken
-  ): Promise<{ identifier: string; expires: Date; token: string }> {
+  async createVerificationToken(data: VerificationToken): Promise<VerificationToken & { hashedIp: string }> {
     const hashedIp = await getHashedUserIpFromHeaders();
 
     const token = await db.verificationToken.create({
@@ -43,18 +41,18 @@ const adapter = {
     if ('id' in token) {
       delete (token as any).id;
     }
-    if ('hashedIp' in token) {
-      delete (token as any).hashedIp;
-    }
 
     return token;
   },
   // Follow PrismaAdapter pattern of removing id
-  createUser: ({ id, ...data }: AdapterUser) => {
+  createUser: (data: AdapterUser) => {
     const userData = {
       ...data,
       name: data.name || 'your pretty fake name',
     };
+    if ('id' in userData) {
+      delete (userData as any).id;
+    }
 
     return db.user.create({
       data: userData,

diff --git a/components/access-control/RoleGate.tsx b/components/access-control/RoleGate.tsx
@@ -3,8 +3,10 @@ import { UserRole } from '@prisma/client';
 import { FormError } from '@/components/forms/messages/FormError';
 import { currentSessionRole } from '@/lib/auth/auth-utils';
 
+import type { ReactNode } from 'react';
+
 interface RoleGateProps {
-  children: React.ReactNode;
+  children: ReactNode;
   allowedRole: UserRole;
 }
 

diff --git a/components/auth/buttons/LoginButton.tsx b/components/auth/buttons/LoginButton.tsx
@@ -5,8 +5,10 @@ import { useRouter } from 'next/navigation';
 import { LoginForm } from '@/components/auth/forms/LoginForm';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 
+import type { ReactNode } from 'react';
+
 interface LoginButtonProps {
-  children: React.ReactNode;
+  children: ReactNode;
   mode?: 'modal' | 'redirect';
   asChild?: boolean;
 }

diff --git a/components/auth/shared/CardWrapper.tsx b/components/auth/shared/CardWrapper.tsx
@@ -5,8 +5,10 @@ import { SocialButtons } from '@/components/auth/buttons/SocialButtons';
 import { AuthFormHeader } from '@/components/auth/shared/AuthFormHeader';
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
 
+import type { ReactNode } from 'react';
+
 interface CardWrapperProps {
-  children: React.ReactNode;
+  children: ReactNode;
   headerLabel: string;
   backButtonLabel: string;
   backButtonHref: string;

diff --git a/components/forms/SettingsForm.tsx b/components/forms/SettingsForm.tsx
@@ -5,7 +5,7 @@ import { UserRole } from '@prisma/client';
 import { useRouter } from 'next/navigation';
 import { type Session } from 'next-auth';
 import { useState, useTransition } from 'react';
-import { useForm, UseFormReturn } from 'react-hook-form';
+import { useForm, type UseFormReturn } from 'react-hook-form';
 import * as zod from 'zod';
 
 import { settingsAction } from '@/actions/settings';

diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -1,4 +1,6 @@
-export const Navbar = ({ children }: { children: React.ReactNode }) => {
+import type { ReactNode } from 'react';
+
+export const Navbar = ({ children }: { children: ReactNode }) => {
   return (
     <nav className='flex w-[600px] items-center justify-between rounded-xl bg-secondary p-4 shadow-sm'>{children}</nav>
   );

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     ref={ref}

diff --git a/components/ui/form.tsx b/components/ui/form.tsx
@@ -1,11 +1,13 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+
 const Form = FormProvider;
 
 type FormFieldContextValue<

diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
@@ -3,7 +3,9 @@
 import { useTheme } from 'next-themes';
 import { Toaster as Sonner } from 'sonner';
 
-type ToasterProps = React.ComponentProps<typeof Sonner>;
+import type { ComponentProps } from 'react';
+
+type ToasterProps = ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();

diff --git a/components/user/actions/LogoutButton.tsx b/components/user/actions/LogoutButton.tsx
@@ -2,7 +2,9 @@
 
 import { logoutAction } from '@/actions/logout';
 
-export const LogoutButton = (props: { children: React.ReactNode }) => {
+import type { ReactNode } from 'react';
+
+export const LogoutButton = (props: { children: ReactNode }) => {
   return (
     <span
       className='cursor-pointer'