sanity-plugin-media 2.1.0 → 2.1.1

package/src/components/FormFieldInputTags/index.tsx

@@ -1,17 +1,17 @@
 import {Box} from '@sanity/ui'
 import React from 'react'
-import {Controller, FieldError} from 'react-hook-form'
+import {Controller} from 'react-hook-form'
 import CreatableSelect from 'react-select/creatable'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable'
-import type {ReactSelectOption} from '../../types'
+import type {TagSelectOption} from '../../types'
 import FormFieldInputLabel from '../FormFieldInputLabel'
 
 type Props = {
   control: any
   description?: string
   disabled?: boolean
-  error?: FieldError
+  error?: string
   label: string
   name: string
   onCreateTag: (tagName: string) => void
@@ -20,7 +20,7 @@ type Props = {
     value: string
   }[]
   placeholder?: string
-  value?: ReactSelectOption[] | null
+  value?: TagSelectOption[] | null
 }
 
 const FormFieldInputTags = (props: Props) => {
@@ -54,7 +54,8 @@ const FormFieldInputTags = (props: Props) => {
         control={control}
         defaultValue={value}
         name={name}
-        render={({onBlur, onChange, value: controllerValue}) => {
+        render={({field}) => {
+          const {onBlur, onChange, value: controllerValue} = field
           // TODO: investigate overriding `onChange` and updating form state manually.
           // `opt.media.tags` is initialised with `null` as a defaultValue in react-hook-form
           // Ideally, we'd be able to set `opt.media.tags` as null when all items are cleared, rather than

package/src/components/FormFieldInputText/index.tsx

@@ -1,13 +1,12 @@
 import {Box, TextInput} from '@sanity/ui'
 import React, {forwardRef} from 'react'
-import {FieldError} from 'react-hook-form'
 
 import FormFieldInputLabel from '../FormFieldInputLabel'
 
 type Props = {
   description?: string
   disabled?: boolean
-  error?: FieldError
+  error?: string
   label: string
   name: string
   placeholder?: string
@@ -17,7 +16,7 @@ type Props = {
 type Ref = HTMLInputElement
 
 const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
-  const {description, disabled, error, label, name, placeholder, value} = props
+  const {description, disabled, error, label, name, placeholder, value, ...rest} = props
 
   return (
     <Box>
@@ -25,6 +24,7 @@ const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
       <FormFieldInputLabel description={description} error={error} label={label} name={name} />
       {/* Input */}
       <TextInput
+        {...rest}
         autoComplete="off"
         autoFocus
         defaultValue={value}

package/src/components/FormFieldInputTextarea/index.tsx

@@ -1,13 +1,12 @@
 import {Box, TextArea} from '@sanity/ui'
 import React, {forwardRef} from 'react'
-import {FieldError} from 'react-hook-form'
 
 import FormFieldInputLabel from '../FormFieldInputLabel'
 
 type Props = {
   description?: string
   disabled?: boolean
-  error?: FieldError
+  error?: string
   label: string
   name: string
   placeholder?: string

package/src/components/SearchFacetTags/index.tsx

@@ -1,7 +1,7 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
 import {
-  ReactSelectOption,
+  TagSelectOption,
   SearchFacetInputSearchableProps,
   SearchFacetOperatorType,
   WithId
@@ -31,7 +31,7 @@ const SearchFacetTags = ({facet}: Props) => {
 
   const popoverProps = usePortalPopoverProps()
 
-  const handleChange = (option: ReactSelectOption) => {
+  const handleChange = (option: TagSelectOption) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
@@ -100,7 +100,7 @@ const SearchFacetTags = ({facet}: Props) => {
             isSearchable
             name="tags"
             noOptionsMessage={() => 'No tags'}
-            onChange={value => handleChange(value as ReactSelectOption)}
+            onChange={value => handleChange(value as TagSelectOption)}
             options={allTagOptions}
             placeholder={tagsFetching ? 'Loading...' : 'Select...'}
             styles={reactSelectStyles}

package/src/formSchema/index.ts

@@ -0,0 +1,22 @@
+import * as z from 'zod'
+
+export const tagOptionSchema = z.object({
+  label: z.string().trim().min(1, {message: 'Label cannot be empty'}),
+  value: z.string().trim().min(1, {message: 'Value cannot be empty'})
+})
+
+export const assetFormSchema = z.object({
+  altText: z.string().trim().optional(),
+  description: z.string().trim().optional(),
+  opt: z.object({
+    media: z.object({
+      tags: z.array(tagOptionSchema).nullable()
+    })
+  }),
+  originalFilename: z.string().trim().min(1, {message: 'Filename cannot be empty'}),
+  title: z.string().trim().optional()
+})
+
+export const tagFormSchema = z.object({
+  name: z.string().min(1, {message: 'Name cannot be empty'})
+})

package/src/modules/tags/index.ts

@@ -1,6 +1,6 @@
 import {createSelector, createSlice, PayloadAction} from '@reduxjs/toolkit'
 import type {ClientError, Transaction} from '@sanity/client'
-import type {Asset, HttpError, MyEpic, ReactSelectOption, Tag, TagItem} from '@types'
+import type {Asset, HttpError, MyEpic, TagSelectOption, Tag, TagItem} from '@types'
 import groq from 'groq'
 import {Selector} from 'react-redux'
 import {ofType} from 'redux-observable'
@@ -523,7 +523,7 @@ export const selectTagById = createSelector(
 // Map tag references to react-select options, skipping over items with no linked tags
 export const selectTagSelectOptions =
   (asset?: Asset) =>
-  (state: RootReducerState): ReactSelectOption[] | null => {
+  (state: RootReducerState): TagSelectOption[] | null => {
     const tags = asset?.opt?.media?.tags?.reduce((acc: TagItem[], v) => {
       const tagItem = state.tags.byIds[v._ref]
       if (tagItem?.tag) {

package/src/types/index.ts

@@ -6,6 +6,8 @@ import type {
   SanityImageAssetDocument
 } from '@sanity/client'
 import type {Epic} from 'redux-observable'
+import * as z from 'zod'
+import {assetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
 import {RootReducerState} from '../modules/types'
 
 type CustomFields = {
@@ -30,6 +32,8 @@ type SearchFacetInputCommon = {
 
 export type Asset = FileAsset | ImageAsset
 
+export type AssetFormData = z.infer<typeof assetFormSchema>
+
 export type AssetItem = {
   _type: 'asset'
   asset: Asset
@@ -164,11 +168,6 @@ export type Order = {
 
 export type OrderDirection = 'asc' | 'desc'
 
-export type ReactSelectOption = {
-  label: string
-  value: string
-}
-
 export type SanityReference = {
   _ref: string
   _type: 'reference'
@@ -210,7 +209,7 @@ export type SearchFacetInputSearchableProps = SearchFacetInputCommon & {
   name: string
   options?: SearchFacetInputSelectListItemProps[]
   type: 'searchable'
-  value?: ReactSelectOption
+  value?: TagSelectOption
 }
 
 export type SearchFacetInputSelectProps = SearchFacetInputCommon & {
@@ -312,6 +311,8 @@ export type Tag = SanityDocument & {
 
 export type TagActions = 'applyAll' | 'delete' | 'edit' | 'removeAll' | 'search'
 
+export type TagFormData = z.infer<typeof tagFormSchema>
+
 export type TagItem = {
   _type: 'tag'
   tag: Tag
@@ -320,6 +321,8 @@ export type TagItem = {
   updating: boolean
 }
 
+export type TagSelectOption = z.infer<typeof tagOptionSchema>
+
 export type UploadItem = {
   _type: 'upload'
   assetType: AssetType

package/src/utils/getTagSelectOptions.ts

@@ -1,7 +1,7 @@
-import {ReactSelectOption, TagItem} from '@types'
+import {TagSelectOption, TagItem} from '@types'
 
-const getTagSelectOptions = (tags: TagItem[]): ReactSelectOption[] => {
-  return tags.reduce((acc: ReactSelectOption[], val) => {
+const getTagSelectOptions = (tags: TagItem[]): TagSelectOption[] => {
+  return tags.reduce((acc: TagSelectOption[], val) => {
     const tag = val?.tag
     if (tag) {
       acc.push({