sanity-plugin-dashboard-widget-vercel 3.1.0 → 3.1.2

package/src/components/DialogForm/index.tsx

@@ -1,10 +1,8 @@
-// @ts-expect-error - fix typings later
 import {yupResolver} from '@hookform/resolvers/yup'
 import {Box, Button, Dialog, Flex, Stack} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import {useMachine} from '@xstate/react'
 import React, {FC} from 'react'
-// @ts-expect-error - fix typings later
 import {useForm} from 'react-hook-form'
 import * as yup from 'yup'
 
@@ -105,20 +103,20 @@ const DialogForm: FC<Props> = (props: Props) => {
   const formUpdating =
     formState.matches('creating') || formState.matches('deleting') || formState.matches('updating')
 
-  // react-hook-form
+  // react-hook-form v7
   const {
-    // Read the formState before render to subscribe the form state through Proxy
     formState: {errors, isDirty, isValid},
     handleSubmit,
     register,
-  } = useForm({
+  } = useForm<FormData>({
+    // @ts-expect-error - fix typings later
     defaultValues: {
       deployHook: deploymentTarget?.deployHook || '',
       deployLimit: deploymentTarget?.deployLimit || 5,
-      name: deploymentTarget?.name,
-      projectId: deploymentTarget?.projectId,
+      name: deploymentTarget?.name || '',
+      projectId: deploymentTarget?.projectId || '',
       teamId: deploymentTarget?.teamId || '',
-      token: deploymentTarget?.token,
+      token: deploymentTarget?.token || '',
     },
     mode: 'onChange',
     resolver: yupResolver(formSchema),
@@ -186,24 +184,24 @@ const DialogForm: FC<Props> = (props: Props) => {
             description="Name displayed in this plugin (e.g. production, staging)"
             error={errors?.name}
             label="Name"
-            name="name"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('name')}
           />
 
           <FormFieldInputText
             disabled={formUpdating}
             error={errors?.token}
             label="Vercel Account Token"
-            name="token"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('token')}
           />
 
           <FormFieldInputText
             disabled={formUpdating}
             error={errors?.projectId}
             label="Vercel Project ID"
-            name="projectId"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('projectId')}
           />
 
           <FormFieldInputText
@@ -211,8 +209,8 @@ const DialogForm: FC<Props> = (props: Props) => {
             disabled={formUpdating}
             error={errors?.teamId}
             label="Vercel Team ID (optional)"
-            name="teamId"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('teamId')}
           />
 
           <FormFieldInputText
@@ -220,16 +218,16 @@ const DialogForm: FC<Props> = (props: Props) => {
             disabled={formUpdating}
             error={errors?.deployHook}
             label="Vercel Deploy Hook (optional)"
-            name="deployHook"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('deployHook')}
           />
 
           <FormFieldInputText
             disabled={formUpdating}
             error={errors?.deployLimit}
             label="Number of deploys to display"
-            name="deployLimit"
-            ref={register({valueAsNumber: true})}
+            // @ts-expect-error - fix typings later
+            {...register('deployLimit', {valueAsNumber: true})}
           />
         </Stack>
       </Box>

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,7 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Inline, Text, Tooltip} from '@sanity/ui'
 import React, {FC} from 'react'
-// @ts-expect-error - fix typings later
 import {FieldError} from 'react-hook-form'
 import {styled} from 'styled-components'
 

package/src/components/FormFieldInputText/index.tsx

@@ -1,6 +1,5 @@
 import {Box, TextInput} from '@sanity/ui'
 import React, {forwardRef} from 'react'
-// @ts-expect-error - fix typings later
 import {FieldError} from 'react-hook-form'
 
 import FormFieldInputLabel from '../FormFieldInputLabel'
@@ -13,12 +12,12 @@ type Props = {
   name: string
   placeholder?: string
   value?: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
 }
 
-type Ref = HTMLInputElement
-
-const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
-  const {description, disabled, error, label, name, placeholder, value} = props
+const FormFieldInputText = forwardRef<HTMLInputElement, Props>((props: Props, ref) => {
+  const {description, disabled, error, label, name, placeholder, value, onChange, onBlur} = props
 
   return (
     <Box>
@@ -33,6 +32,8 @@ const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
         id={name}
         name={name}
         placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
         ref={ref}
       />
     </Box>

package/src/hooks/useDeployments.ts

@@ -1,5 +1,5 @@
 import hash from 'object-hash'
-import {useQuery} from 'react-query'
+import {useQuery} from '@tanstack/react-query'
 
 import fetcher from '../utils/fetcher'
 import {API_ENDPOINT_ALIASES, API_ENDPOINT_DEPLOYMENTS} from '../constants'
@@ -22,19 +22,17 @@ const useDeployments = (deploymentTarget: Sanity.DeploymentTarget, options?: Opt
     isSuccess: deploymentsIsSuccess,
     error: deploymentsError,
     refetch,
-  } = useQuery<{deployments: Vercel.Deployment[]}, Error>(
-    hash(deploymentTarget), // key
-    () => fetchUrl(API_ENDPOINT_DEPLOYMENTS, deployParams),
-    {
-      enabled: options?.enabled ?? true,
-      refetchInterval: 20000, // ms
-      refetchIntervalInBackground: false,
-      refetchOnMount: true,
-      refetchOnReconnect: 'always',
-      refetchOnWindowFocus: false,
-      retry: false,
-    }
-  )
+  } = useQuery<{deployments: Vercel.Deployment[]}, Error>({
+    queryKey: [hash(deploymentTarget)],
+    queryFn: () => fetchUrl(API_ENDPOINT_DEPLOYMENTS, deployParams),
+    enabled: options?.enabled ?? true,
+    refetchInterval: 20000, // ms
+    refetchIntervalInBackground: false,
+    refetchOnMount: true,
+    refetchOnReconnect: 'always',
+    refetchOnWindowFocus: false,
+    retry: false,
+  })
 
   // Fetch aliases (only if deployments have been retrieved)
   const aliasParams = new URLSearchParams()
@@ -55,17 +53,15 @@ const useDeployments = (deploymentTarget: Sanity.DeploymentTarget, options?: Opt
       }
     },
     Error
-  >(
-    `${hash(deploymentTarget)}-aliases`, // key
-    () => fetchUrl(API_ENDPOINT_ALIASES, aliasParams),
-    {
-      enabled: !!deploymentsData,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      retry: false,
-    }
-  )
+  >({
+    queryKey: [hash(deploymentTarget), 'aliases'],
+    queryFn: () => fetchUrl(API_ENDPOINT_ALIASES, aliasParams),
+    enabled: !!deploymentsData,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    retry: false,
+  })
 
   const aliases = aliasesData?.aliases as Vercel.Alias[]