chore(eslint) correct rules

apps/web/src/components/DialogButton.tsx

@@ -18,7 +18,7 @@ const InfoTableSchema = z.object({
   Date: z.string().refine((value) => {
     const currentDate = new Date().toISOString().split('T')[0]
     return value >= currentDate
-    }, 'Must be today or a future Date'),
+  }, 'Must be today or a future Date'),
   Hour: z.string(),
   Client: z
     .string()
@@ -92,7 +92,7 @@ export default function DialogButton({
         })
       },
     })
-     reset()
+    reset()
   }
 
   const handleEdit = ({
@@ -103,35 +103,33 @@ export default function DialogButton({
     Service,
   }: InfoTableSchemaData) => {
     closeModal(),
-    edit({
-      variables: {
-        appointmentId: Id,
-        date: Date,
-        hour: Hour,
-        clientName: Client,
-        graphicLocation: Graphic,
-        service: Service,
-      },
-
-      updater: updaterEdit,
+      edit({
+        variables: {
+          appointmentId: Id,
+          date: Date,
+          hour: Hour,
+          clientName: Client,
+          graphicLocation: Graphic,
+          service: Service,
+        },
 
-      onError(error) {
-        toast({
-          title: 'Something went wrong',
-          description: error.message,
-        })
-      },
-    })
+        updater: updaterEdit,
+
+        onError(error) {
+          toast({
+            title: 'Something went wrong',
+            description: error.message,
+          })
+        },
+      })
   }
 
   const [isOpenModal, setIsOpenModal] = useState(false)
 
-
   const closeModal = () => {
     setIsOpenModal(false)
   }
 
-
   return (
     <Dialog.Root open={isOpenModal} onOpenChange={setIsOpenModal}>
       <Dialog.Trigger asChild>
@@ -266,11 +264,9 @@ export default function DialogButton({
               )}
             </fieldset>
             <div className="mt-6 flex justify-end">
-                <button
-                  className="inline-flex h-9 items-center justify-center rounded bg-[#b8f3ff] px-4 text-base font-medium transition-all hover:bg-[#8ac6d0] disabled:cursor-not-allowed"
-                >
-                  Save changes
-                </button>
+              <button className="inline-flex h-9 items-center justify-center rounded bg-[#b8f3ff] px-4 text-base font-medium transition-all hover:bg-[#8ac6d0] disabled:cursor-not-allowed">
+                Save changes
+              </button>
             </div>
             <DialogClose asChild>
               <button
@@ -285,4 +281,4 @@ export default function DialogButton({
       </Dialog.Portal>
     </Dialog.Root>
   )
-}
+}

apps/web/src/components/Logout.tsx

@@ -19,7 +19,7 @@ export default function Logout() {
       onClick={handleLogout}
       className="flex items-center rounded bg-blue-400 px-3 py-3 transition-all hover:bg-blue-500"
     >
-      <LogOut size={20}/>
+      <LogOut size={20} />
       Logout
     </button>
   )

apps/web/src/components/Toast.tsx

@@ -3,13 +3,15 @@ import * as ToastPrimitives from '@radix-ui/react-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '../lib/utils'
- import { X } from 'lucide-react'
+import { X } from 'lucide-react'
 
 const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+  {
+    className?: string
+  } & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
@@ -40,7 +42,9 @@ const toastVariants = cva(
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+  {
+    className?: string
+  } & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
     VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
@@ -55,7 +59,9 @@ Toast.displayName = ToastPrimitives.Root.displayName
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+  {
+    className?: string
+  } & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Action
     ref={ref}
@@ -70,7 +76,9 @@ ToastAction.displayName = ToastPrimitives.Action.displayName
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+  {
+    className?: string
+  } & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
@@ -88,7 +96,9 @@ ToastClose.displayName = ToastPrimitives.Close.displayName
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+  {
+    className?: string
+  } & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
@@ -100,7 +110,9 @@ ToastTitle.displayName = ToastPrimitives.Title.displayName
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+  {
+    className?: string
+  } & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}

apps/web/src/components/appointments/AppointmentDetails.tsx

@@ -1,9 +1,8 @@
 import { DeleteModal } from '../DeleteModal'
 import { graphql } from 'relay-runtime'
 import { useFragment } from 'react-relay'
-import { AppointmentDetails_appointment$data, AppointmentDetails_appointment$key } from '../../__generated__/AppointmentDetails_appointment.graphql'
+import { AppointmentDetails_appointment$key } from '../../__generated__/AppointmentDetails_appointment.graphql'
 import DialogButton from '../DialogButton'
-import React, { useState } from 'react'
 
 interface AppointmentProps {
   appointmentDetails: AppointmentDetails_appointment$key

apps/web/src/components/providers/Providers.tsx

@@ -1,17 +1,17 @@
-import { Theme } from '@radix-ui/themes';
-import React from 'react';
-import { RelayEnvironmentProvider, useRelayEnvironment } from 'react-relay';
+import { Theme } from '@radix-ui/themes'
+import React from 'react'
+import { RelayEnvironmentProvider, useRelayEnvironment } from 'react-relay'
 
-type ProvidersProps = { children: React.ReactNode };
+type ProvidersProps = { children: React.ReactNode }
 
 const Providers = ({ children }: ProvidersProps) => {
-  const environment = useRelayEnvironment();
+  const environment = useRelayEnvironment()
 
   return (
     <RelayEnvironmentProvider environment={environment}>
       <Theme>{children}</Theme>
     </RelayEnvironmentProvider>
-  );
-};
+  )
+}
 
-export default Providers;
+export default Providers

apps/web/src/components/providers/RelayProvider.tsx

@@ -1,6 +1,6 @@
-import { RelayEnvironmentProvider } from 'react-relay';
-import type { FetchFunction } from 'relay-runtime';
-import { Environment, Network, RecordSource, Store } from 'relay-runtime';
+import { RelayEnvironmentProvider } from 'react-relay'
+import type { FetchFunction } from 'relay-runtime'
+import { Environment, Network, RecordSource, Store } from 'relay-runtime'
 
 /**
  *
@@ -22,22 +22,26 @@ const fetchQuery: FetchFunction = async (
       query: operation.text,
       variables,
     }),
-  });
+  })
 
-  return await response.json();
-};
+  return await response.json()
+}
 
 /**
  * Create a network layer from the fetch function
  */
-const network = Network.create(fetchQuery);
-const store = new Store(new RecordSource());
+const network = Network.create(fetchQuery)
+const store = new Store(new RecordSource())
 
 const environment = new Environment({
   network,
   store,
-});
+})
 
 export const RelayProvider = ({ children }: { children: React.ReactNode }) => {
-  return <RelayEnvironmentProvider environment={environment}>{children}</RelayEnvironmentProvider>;
-};
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      {children}
+    </RelayEnvironmentProvider>
+  )
+}

apps/web/src/context/AuthContext.tsx

@@ -1,33 +1,34 @@
-import { Maybe } from '@/interfaces/Maybe';
-import { destroyCookie, setCookie } from 'nookies';
+import { Maybe } from '@/interfaces/Maybe'
+import { destroyCookie, setCookie } from 'nookies'
 import { getAuthToken } from '@/utils/getToken'
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback } from 'react'
 
 interface AuthContextValue {
-  token: Maybe<string>;
-  signIn: (token: Maybe<string>) => void;
-  signout: () => void;
+  token: Maybe<string>
+  signIn: (token: Maybe<string>) => void
+  signout: () => void
 }
 
 const AUTH_COOKIE = 'graphic-token'
-export const AuthContext = React.createContext({} as AuthContextValue);
-
+export const AuthContext = React.createContext({} as AuthContextValue)
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [userToken, setUserToken] = useState<AuthContextValue['token']>(() => getAuthToken());
+  const [userToken, setUserToken] = useState<AuthContextValue['token']>(() =>
+    getAuthToken(),
+  )
   const signIn = useCallback<AuthContextValue['signIn']>((token) => {
     setCookie(undefined, AUTH_COOKIE, token, {
       maxAge: 3600 * 24 * 7,
       path: '/',
     })
-    setUserToken(token);
-  }, []);
+    setUserToken(token)
+  }, [])
 
   const signout = useCallback<AuthContextValue['signout']>(() => {
-    setUserToken(null);
+    setUserToken(null)
     destroyCookie(undefined, AUTH_COOKIE)
-  }, []);
+  }, [])
 
   const value = useMemo<AuthContextValue>(
     () => ({
@@ -36,7 +37,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       signout,
     }),
     [userToken, signIn, signout],
-  );
+  )
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}

apps/web/src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import '@/styles/globals.css'
-import '@radix-ui/themes/styles.css';
+import '@radix-ui/themes/styles.css'
 import type { AppProps } from 'next/app'
 import { Suspense } from 'react'
 import { ReactRelayContainer } from '../relay/ReactRelayContainer'

apps/web/src/pages/auth/signin.tsx

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from 'react-relay'
 

apps/web/src/pages/auth/signup.tsx

@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { useMutation } from 'react-relay'
 import { useRouter } from 'next/router'
 

apps/web/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import DialogButton from '../components/DialogButton'
-import React, { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 import { PreloadedQuery, graphql, usePreloadedQuery } from 'react-relay'
 import { GetServerSideProps } from 'next'
 import { getPreloadedQuery } from '../relay/network'
@@ -35,7 +35,6 @@ export default function Home({ queryRefs }: HomeProps) {
         <Logout />
       </div>
       <div className="ml-40 mr-40 mt-10 flex items-center justify-between">
-
         <DialogButton />
 
         <form className="flex items-center">