sanity-plugin-media 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -54,7 +54,7 @@
     "watch": "pkg-utils watch"
   },
   "dependencies": {
-    "@hookform/resolvers": "2.9.11",
+    "@hookform/resolvers": "^3.1.1",
     "@reduxjs/toolkit": "^1.9.0",
     "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/ui": "^1.7.0",
@@ -69,14 +69,14 @@
     "pluralize": "^8.0.0",
     "react-dropzone": "^11.3.1",
     "react-file-icon": "^1.1.0",
-    "react-hook-form": "^6.15.1",
+    "react-hook-form": "^7.45.1",
     "react-redux": "^7.2.2",
     "react-select": "^5.3.2",
     "react-virtuoso": "^4.3.11",
     "redux": "^4.2.0",
     "redux-observable": "^2.0.0",
     "rxjs": "^7.0.0",
-    "yup": "^0.32.11"
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
@@ -94,7 +94,6 @@
     "@types/react-file-icon": "^1.0.1",
     "@types/react-redux": "^7.1.24",
     "@types/styled-components": "^5.1.7",
-    "@types/yup": "^0.29.14",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",

package/src/components/DialogAssetEdit/index.tsx

@@ -1,12 +1,12 @@
-import {yupResolver} from '@hookform/resolvers/yup'
+import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import {Asset, DialogAssetEditProps, ReactSelectOption} from '@types'
+import {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '@types'
 import groq from 'groq'
-import React, {ReactNode, useEffect, useRef, useState} from 'react'
-import {useForm} from 'react-hook-form'
+import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
-import * as yup from 'yup'
+import {assetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
 import {assetsActions, selectAssetById} from '../../modules/assets'
@@ -31,12 +31,6 @@ type Props = {
   dialog: DialogAssetEditProps
 }
 
-type FormData = yup.InferType<typeof formSchema>
-
-const formSchema = yup.object().shape({
-  originalFilename: yup.string().trim().required('Filename cannot be empty')
-})
-
 const DialogAssetEdit = (props: Props) => {
   const {
     children,
@@ -45,38 +39,34 @@ const DialogAssetEdit = (props: Props) => {
 
   const client = useVersionedClient()
 
-  // Redux
   const dispatch = useDispatch()
   const assetItem = useTypedSelector(state => selectAssetById(state, String(assetId))) // TODO: check casting
   const tags = useTypedSelector(selectTags)
 
-  // Refs
-  const isMounted = useRef(false)
+  const assetUpdatedPrev = useRef<string | null>(null)
 
-  // State
-  // - Generate a snapshot of the current asset
+  // Generate a snapshot of the current asset
   const [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset)
   const [tabSection, setTabSection] = useState<'details' | 'references'>('details')
 
   const currentAsset = assetItem ? assetItem?.asset : assetSnapshot
   const allTagOptions = getTagSelectOptions(tags)
 
-  // Redux
   const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset))
 
-  const generateDefaultValues = (asset?: Asset) => ({
-    altText: asset?.altText || '',
-    description: asset?.description || '',
-    originalFilename: asset?.originalFilename || '',
-    opt: {media: {tags: assetTagOptions}},
-    title: asset?.title || ''
-  })
-
-  // Generate a string from all current tag labels
-  // This is used purely to determine tag updates to then update the form in real time
-  const currentTagLabels = assetTagOptions?.map(tag => tag.label).join(',')
+  const generateDefaultValues = useCallback(
+    (asset?: Asset): AssetFormData => {
+      return {
+        altText: asset?.altText || '',
+        description: asset?.description || '',
+        originalFilename: asset?.originalFilename || '',
+        opt: {media: {tags: assetTagOptions}},
+        title: asset?.title || ''
+      }
+    },
+    [assetTagOptions]
+  )
 
-  // react-hook-form
   const {
     control,
     // Read the formState before render to subscribe the form state through Proxy
@@ -86,20 +76,19 @@ const DialogAssetEdit = (props: Props) => {
     register,
     reset,
     setValue
-  } = useForm({
+  } = useForm<AssetFormData>({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: 'onChange',
-    resolver: yupResolver(formSchema)
+    resolver: zodResolver(assetFormSchema)
   })
 
   const formUpdating = !assetItem || assetItem?.updating
 
-  // Callbacks
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     dispatch(dialogActions.remove({id}))
-  }
+  }, [dispatch, id])
 
-  const handleDelete = () => {
+  const handleDelete = useCallback(() => {
     if (!assetItem?.asset) {
       return
     }
@@ -110,63 +99,64 @@ const DialogAssetEdit = (props: Props) => {
         closeDialogId: assetItem?.asset._id
       })
     )
-  }
+  }, [assetItem, dispatch])
 
-  const handleAssetUpdate = (update: MutationEvent) => {
+  const handleAssetUpdate = useCallback((update: MutationEvent) => {
     const {result, transition} = update
-
     if (result && transition === 'update') {
       // Regenerate asset snapshot
       setAssetSnapshot(result as Asset)
-
-      // Reset react-hook-form
-      reset(generateDefaultValues(result as Asset))
-    }
-  }
-
-  const handleCreateTag = (tagName: string) => {
-    // Dispatch action to create new tag
-    dispatch(
-      tagsActions.createRequest({
-        assetId: currentAsset?._id,
-        name: tagName
-      })
-    )
-  }
-
-  // - submit react-hook-form
-  const onSubmit = async (formData: FormData) => {
-    if (!assetItem?.asset) {
-      return
     }
+  }, [])
 
-    const sanitizedFormData = sanitizeFormData(formData)
+  const handleCreateTag = useCallback(
+    (tagName: string) => {
+      // Dispatch action to create new tag
+      dispatch(
+        tagsActions.createRequest({
+          assetId: currentAsset?._id,
+          name: tagName
+        })
+      )
+    },
+    [currentAsset?._id, dispatch]
+  )
 
-    dispatch(
-      assetsActions.updateRequest({
-        asset: assetItem?.asset,
-        closeDialogId: assetItem?.asset._id,
-        formData: {
-          ...sanitizedFormData,
-          // Map tags to sanity references
-          opt: {
-            media: {
-              ...sanitizedFormData.opt.media,
-              tags:
-                sanitizedFormData.opt.media.tags?.map((tag: ReactSelectOption) => ({
-                  _ref: tag.value,
-                  _type: 'reference',
-                  _weak: true
-                })) || null
+  // Submit react-hook-form
+  const onSubmit: SubmitHandler<AssetFormData> = useCallback(
+    formData => {
+      if (!assetItem?.asset) {
+        return
+      }
+
+      const sanitizedFormData = sanitizeFormData(formData)
+
+      dispatch(
+        assetsActions.updateRequest({
+          asset: assetItem?.asset,
+          closeDialogId: assetItem?.asset._id,
+          formData: {
+            ...sanitizedFormData,
+            // Map tags to sanity references
+            opt: {
+              media: {
+                ...sanitizedFormData.opt.media,
+                tags:
+                  sanitizedFormData.opt.media.tags?.map((tag: TagSelectOption) => ({
+                    _ref: tag.value,
+                    _type: 'reference',
+                    _weak: true
+                  })) || null
+              }
             }
           }
-        }
-      })
-    )
-  }
+        })
+      )
+    },
+    [assetItem?.asset, dispatch]
+  )
 
-  // Effects
-  // - Listen for asset mutations and update snapshot
+  // Listen for asset mutations and update snapshot
   useEffect(() => {
     if (!assetItem?.asset) {
       return undefined
@@ -180,49 +170,36 @@ const DialogAssetEdit = (props: Props) => {
     return () => {
       subscriptionAsset?.unsubscribe()
     }
-  }, [])
+  }, [assetItem?.asset, client, handleAssetUpdate])
 
-  // - Partially reset form when current tags have changed (and after initial mount)
-  useEffect(() => {
-    if (isMounted.current) {
-      reset(
-        {
-          opt: {
-            media: {tags: assetTagOptions}
-          }
-        },
-        {
-          errors: true,
-          dirtyFields: true,
-          isDirty: true
-        }
-      )
-    }
-
-    // Mark as mounted
-    isMounted.current = true
-  }, [currentTagLabels])
-
-  // - Update tags form field (react-select) when a new _inline_ tag has been created
+  // Update tags form field (react-select) when a new _inline_ tag has been created
   useEffect(() => {
     if (lastCreatedTag) {
-      const existingTags = (getValues('opt.media.tags') as ReactSelectOption[]) || []
+      const existingTags = (getValues('opt.media.tags') as TagSelectOption[]) || []
       const updatedTags = existingTags.concat([lastCreatedTag])
       setValue('opt.media.tags', updatedTags, {shouldDirty: true})
     }
-  }, [lastCreatedTag])
+  }, [getValues, lastCreatedTag, setValue])
 
-  // - Update tags form field (react-select) when an _inline_ tag has been removed elsewhere
+  // Update tags form field (react-select) when an _inline_ tag has been removed elsewhere
   useEffect(() => {
     if (lastRemovedTagIds) {
-      const existingTags = (getValues('opt.media.tags') as ReactSelectOption[]) || []
+      const existingTags = (getValues('opt.media.tags') as TagSelectOption[]) || []
       const updatedTags = existingTags.filter(tag => {
         return !lastRemovedTagIds.includes(tag.value)
       })
 
       setValue('opt.media.tags', updatedTags, {shouldDirty: true})
     }
-  }, [lastRemovedTagIds])
+  }, [getValues, lastRemovedTagIds, setValue])
+
+  // Reset react-hook-form local state on mount and every time the asset has been updated elsewhere
+  useEffect(() => {
+    if (assetUpdatedPrev.current !== assetItem?.asset._updatedAt) {
+      reset(generateDefaultValues(assetItem?.asset))
+    }
+    assetUpdatedPrev.current = assetItem?.asset._updatedAt
+  }, [assetItem?.asset, generateDefaultValues, reset])
 
   const Footer = () => (
     <Box padding={3}>
@@ -306,7 +283,7 @@ const DialogAssetEdit = (props: Props) => {
                 <FormFieldInputTags
                   control={control}
                   disabled={formUpdating}
-                  error={errors?.opt?.media?.tags}
+                  error={errors?.opt?.media?.tags?.message}
                   label="Tags"
                   name="opt.media.tags"
                   onCreateTag={handleCreateTag}
@@ -316,38 +293,38 @@ const DialogAssetEdit = (props: Props) => {
                 />
                 {/* Filename */}
                 <FormFieldInputText
+                  {...register('originalFilename')}
                   disabled={formUpdating}
-                  error={errors?.originalFilename}
+                  error={errors?.originalFilename?.message}
                   label="Filename"
                   name="originalFilename"
-                  ref={register}
                   value={currentAsset?.originalFilename}
                 />
                 {/* Title */}
                 <FormFieldInputText
+                  {...register('title')}
                   disabled={formUpdating}
-                  error={errors?.title}
+                  error={errors?.title?.message}
                   label="Title"
                   name="title"
-                  ref={register}
                   value={currentAsset?.title}
                 />
                 {/* Alt text */}
                 <FormFieldInputText
+                  {...register('altText')}
                   disabled={formUpdating}
-                  error={errors?.altText}
+                  error={errors?.altText?.message}
                   label="Alt Text"
                   name="altText"
-                  ref={register}
                   value={currentAsset?.altText}
                 />
                 {/* Description */}
                 <FormFieldInputTextarea
+                  {...register('description')}
                   disabled={formUpdating}
-                  error={errors?.description}
+                  error={errors?.description?.message}
                   label="Description"
                   name="description"
-                  ref={register}
                   rows={3}
                   value={currentAsset?.description}
                 />

package/src/components/DialogTagCreate/index.tsx

@@ -1,10 +1,10 @@
-import {yupResolver} from '@hookform/resolvers/yup'
+import {zodResolver} from '@hookform/resolvers/zod'
 import {Box, Flex} from '@sanity/ui'
-import {DialogTagCreateProps} from '@types'
+import {DialogTagCreateProps, TagFormData} from '@types'
 import React, {ReactNode, useEffect} from 'react'
-import {useForm} from 'react-hook-form'
+import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
-import * as yup from 'yup'
+import {tagFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {dialogActions} from '../../modules/dialog'
 import {tagsActions} from '../../modules/tags'
@@ -18,62 +18,51 @@ type Props = {
   dialog: DialogTagCreateProps
 }
 
-type FormData = yup.InferType<typeof formSchema>
-
-const formSchema = yup.object().shape({
-  name: yup.string().required('Name cannot be empty')
-})
-
 const DialogTagCreate = (props: Props) => {
   const {
     children,
     dialog: {id}
   } = props
 
-  // Redux
   const dispatch = useDispatch()
 
-  // State
   const creating = useTypedSelector(state => state.tags.creating)
   const creatingError = useTypedSelector(state => state.tags.creatingError)
 
-  // react-hook-form
   const {
     // Read the formState before render to subscribe the form state through Proxy
     formState: {errors, isDirty, isValid},
     handleSubmit,
     register,
     setError
-  } = useForm({
+  } = useForm<TagFormData>({
     defaultValues: {
       name: ''
     },
     mode: 'onChange',
-    resolver: yupResolver(formSchema)
+    resolver: zodResolver(tagFormSchema)
   })
 
   const formUpdating = creating
 
-  // Callbacks
   const handleClose = () => {
     dispatch(dialogActions.clear())
   }
 
   // - submit react-hook-form
-  const onSubmit = async (formData: FormData) => {
+  const onSubmit: SubmitHandler<TagFormData> = formData => {
     const sanitizedFormData = sanitizeFormData(formData)
 
     dispatch(tagsActions.createRequest({name: sanitizedFormData.name}))
   }
 
-  // Effects
   useEffect(() => {
     if (creatingError) {
       setError('name', {
         message: creatingError?.message
       })
     }
-  }, [creatingError])
+  }, [creatingError, setError])
 
   const Footer = () => (
     <Box padding={3}>
@@ -97,11 +86,11 @@ const DialogTagCreate = (props: Props) => {
 
         {/* Title */}
         <FormFieldInputText
+          {...register('name')}
           disabled={formUpdating}
-          error={errors?.name}
+          error={errors?.name?.message}
           label="Name"
           name="name"
-          ref={register}
         />
       </Box>
 

package/src/components/DialogTagEdit/index.tsx

@@ -1,12 +1,12 @@
-import {yupResolver} from '@hookform/resolvers/yup'
+import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Flex, Text} from '@sanity/ui'
-import {DialogTagEditProps, Tag} from '@types'
+import {DialogTagEditProps, Tag, TagFormData} from '@types'
 import groq from 'groq'
-import React, {ReactNode, useEffect, useState} from 'react'
-import {useForm} from 'react-hook-form'
+import React, {ReactNode, useCallback, useEffect, useState} from 'react'
+import {SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
-import * as yup from 'yup'
+import {tagFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
 import {dialogActions} from '../../modules/dialog'
@@ -21,12 +21,6 @@ type Props = {
   dialog: DialogTagEditProps
 }
 
-type FormData = yup.InferType<typeof formSchema>
-
-const formSchema = yup.object().shape({
-  name: yup.string().required('Name cannot be empty')
-})
-
 const DialogTagEdit = (props: Props) => {
   const {
     children,
@@ -35,11 +29,9 @@ const DialogTagEdit = (props: Props) => {
 
   const client = useVersionedClient()
 
-  // Redux
   const dispatch = useDispatch()
   const tagItem = useTypedSelector(state => selectTagById(state, String(tagId))) // TODO: double check string cast
 
-  // State
   // - Generate a snapshot of the current tag
   const [tagSnapshot, setTagSnapshot] = useState(tagItem?.tag)
 
@@ -48,7 +40,6 @@ const DialogTagEdit = (props: Props) => {
     name: tag?.name?.current || ''
   })
 
-  // react-hook-form
   const {
     // Read the formState before render to subscribe the form state through Proxy
     formState: {errors, isDirty, isValid},
@@ -56,30 +47,24 @@ const DialogTagEdit = (props: Props) => {
     register,
     reset,
     setError
-  } = useForm({
-    // defaultValues: {
-    //   name: currentTag?.tag?.name?.current
-    // },
+  } = useForm<TagFormData>({
     defaultValues: generateDefaultValues(tagItem?.tag),
     mode: 'onChange',
-    resolver: yupResolver(formSchema)
+    resolver: zodResolver(tagFormSchema)
   })
 
   const formUpdating = !tagItem || tagItem?.updating
 
-  // Callbacks
   const handleClose = () => {
     dispatch(dialogActions.remove({id}))
   }
 
-  // - submit react-hook-form
-  const onSubmit = async (formData: FormData) => {
+  // Submit react-hook-form
+  const onSubmit: SubmitHandler<TagFormData> = formData => {
     if (!tagItem?.tag) {
       return
     }
-
     const sanitizedFormData = sanitizeFormData(formData)
-
     dispatch(
       tagsActions.updateRequest({
         closeDialogId: tagItem?.tag?._id,
@@ -107,26 +92,26 @@ const DialogTagEdit = (props: Props) => {
     )
   }
 
-  const handleTagUpdate = (update: MutationEvent) => {
-    const {result, transition} = update
-
-    if (result && transition === 'update') {
-      // Regenerate snapshot
-      setTagSnapshot(result as Tag)
-
-      // Reset react-hook-form
-      reset(generateDefaultValues(result as Tag))
-    }
-  }
+  const handleTagUpdate = useCallback(
+    (update: MutationEvent) => {
+      const {result, transition} = update
+      if (result && transition === 'update') {
+        // Regenerate snapshot
+        setTagSnapshot(result as Tag)
+        // Reset react-hook-form
+        reset(generateDefaultValues(result as Tag))
+      }
+    },
+    [reset]
+  )
 
-  // Effects
   useEffect(() => {
     if (tagItem?.error) {
       setError('name', {
         message: tagItem.error?.message
       })
     }
-  }, [tagItem?.error])
+  }, [setError, tagItem.error])
 
   // - Listen for asset mutations and update snapshot
   useEffect(() => {
@@ -142,7 +127,7 @@ const DialogTagEdit = (props: Props) => {
     return () => {
       subscriptionAsset?.unsubscribe()
     }
-  }, [])
+  }, [client, handleTagUpdate, tagItem?.tag])
 
   const Footer = () => (
     <Box padding={3}>
@@ -188,11 +173,11 @@ const DialogTagEdit = (props: Props) => {
 
         {/* Title */}
         <FormFieldInputText
+          {...register('name')}
           disabled={formUpdating}
-          error={errors?.name}
+          error={errors?.name?.message}
           label="Name"
           name="name"
-          ref={register}
         />
       </Box>
 

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,12 +1,11 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Inline, Text, Tooltip} from '@sanity/ui'
 import React from 'react'
-import {FieldError} from 'react-hook-form'
 import styled from 'styled-components'
 
 type Props = {
   description?: string
-  error?: FieldError
+  error?: string
   label: string
   name: string
 }
@@ -37,7 +36,7 @@ const FormFieldInputLabel = (props: Props) => {
                   <Box padding={2}>
                     <Text muted size={1}>
                       <StyledErrorOutlineIcon style={{marginRight: '0.1em'}} />
-                      {error.message}
+                      {error}
                     </Text>
                   </Box>
                 }