sanity-plugin-media 4.3.5 → 5.0.0

package/src/contexts/ToolOptionsContext.tsx

@@ -1,65 +0,0 @@
-import {type PropsWithChildren, createContext, useContext, useMemo} from 'react'
-import type {DropzoneOptions} from 'react-dropzone'
-
-import type {MediaToolOptions, Locale} from '../types'
-
-type ContextProps = {
-  dropzone: Pick<DropzoneOptions, 'maxSize'>
-  components: MediaToolOptions['components']
-  createTagsOnUpload: boolean
-  creditLine: MediaToolOptions['creditLine']
-  directUploads: MediaToolOptions['directUploads']
-  locales?: Locale[]
-}
-
-const ToolOptionsContext = createContext<ContextProps | null>(null)
-
-type Props = {
-  options?: MediaToolOptions | void
-}
-
-export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
-  const value = useMemo<ContextProps>(() => {
-    let creditLineExcludeSources
-
-    if (options?.creditLine?.excludeSources) {
-      creditLineExcludeSources = Array.isArray(options?.creditLine?.excludeSources)
-        ? options.creditLine.excludeSources
-        : [options?.creditLine?.excludeSources]
-    }
-
-    return {
-      dropzone: {maxSize: options?.maximumUploadSize},
-      components: {
-        details: options?.components?.details,
-      },
-      createTagsOnUpload: options?.createTagsOnUpload ?? true,
-      creditLine: {
-        enabled: options?.creditLine?.enabled || false,
-        excludeSources: creditLineExcludeSources,
-      },
-      directUploads: options?.directUploads ?? true,
-      locales: options?.locales,
-    }
-  }, [
-    options?.creditLine?.enabled,
-    options?.components,
-    options?.createTagsOnUpload,
-    options?.creditLine?.excludeSources,
-    options?.maximumUploadSize,
-    options?.directUploads,
-    options?.locales,
-  ])
-
-  return <ToolOptionsContext.Provider value={value}>{children}</ToolOptionsContext.Provider>
-}
-
-export const useToolOptions = () => {
-  const context = useContext(ToolOptionsContext)
-
-  if (!context) {
-    throw new Error('useToolOptions must be used within an ToolOptionsProvider')
-  }
-
-  return context
-}

package/src/formSchema/index.test.ts

@@ -1,56 +0,0 @@
-// @vitest-environment node
-
-import {describe, expect, it} from 'vitest'
-
-import {assetFormSchema, tagFormSchema, tagOptionSchema} from './index'
-
-describe('tagOptionSchema', () => {
-  it('accepts trimmed non-empty label and value', () => {
-    expect(tagOptionSchema.safeParse({label: 'A', value: 'b'}).success).toBe(true)
-  })
-
-  it('rejects empty label or value after trim', () => {
-    expect(tagOptionSchema.safeParse({label: '  ', value: 'x'}).success).toBe(false)
-    expect(tagOptionSchema.safeParse({label: 'x', value: ''}).success).toBe(false)
-  })
-})
-
-describe('tagFormSchema', () => {
-  it('requires non-empty name', () => {
-    expect(tagFormSchema.safeParse({name: 'x'}).success).toBe(true)
-    expect(tagFormSchema.safeParse({name: ''}).success).toBe(false)
-  })
-})
-
-describe('assetFormSchema', () => {
-  const base = {
-    altText: '',
-    creditLine: '',
-    description: '',
-    opt: {media: {tags: null}},
-    originalFilename: 'file.png',
-    title: '',
-  }
-
-  it('accepts valid asset form payload', () => {
-    expect(assetFormSchema.safeParse(base).success).toBe(true)
-  })
-
-  it('rejects empty originalFilename', () => {
-    expect(
-      assetFormSchema.safeParse({
-        ...base,
-        originalFilename: '   ',
-      }).success,
-    ).toBe(false)
-  })
-
-  it('validates nested tag options', () => {
-    expect(
-      assetFormSchema.safeParse({
-        ...base,
-        opt: {media: {tags: [{label: '', value: 'v'}]}},
-      }).success,
-    ).toBe(false)
-  })
-})

package/src/formSchema/index.ts

@@ -1,39 +0,0 @@
-import * as z from 'zod'
-
-// Helper to generate localized string schema
-export function localizedStringSchema(locales?: {id: string}[]) {
-  if (!locales || locales.length === 0) {
-    return z.string().trim().optional()
-  }
-  const shape: Record<string, z.ZodTypeAny> = {}
-  for (const locale of locales) {
-    shape[locale.id] = z.string().trim().optional()
-  }
-  return z.object(shape).passthrough()
-}
-
-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 function getAssetFormSchema(locales?: {id: string}[]) {
-  return z.object({
-    altText: localizedStringSchema(locales),
-    creditLine: localizedStringSchema(locales),
-    description: localizedStringSchema(locales),
-    opt: z.object({
-      media: z.object({
-        tags: z.array(tagOptionSchema).nullable(),
-      }),
-    }),
-    originalFilename: z.string().trim().min(1, {message: 'Filename cannot be empty'}),
-    title: localizedStringSchema(locales),
-  })
-}
-
-export const assetFormSchema = getAssetFormSchema()
-
-export const tagFormSchema = z.object({
-  name: z.string().min(1, {message: 'Name cannot be empty'}),
-})

package/src/hooks/useBreakpointIndex.ts

@@ -1,49 +0,0 @@
-import {studioTheme} from '@sanity/ui'
-import {useEffect, useState} from 'react'
-
-// Determine the current breakpoint index
-// - create MediaQueryLists from every breakpoint defined in our sanity studio theme
-// - for each MQL, listen to change events and return the selected breakpoint index
-const useBreakpointIndex = (): number => {
-  const mediaQueryLists = studioTheme?.container?.map((width) =>
-    window.matchMedia(`(max-width: ${width}px)`),
-  )
-
-  const getBreakpointIndex = () => mediaQueryLists.findIndex((mql) => mql.matches)
-
-  const [value, setValue] = useState(getBreakpointIndex())
-
-  useEffect(() => {
-    const handleBreakpoint = () => {
-      setValue(getBreakpointIndex)
-    }
-
-    // NOTE: older versions of Safari use the older `addListener` and `removeListener` methods
-    mediaQueryLists.forEach((mql) => {
-      try {
-        mql.addEventListener('change', handleBreakpoint)
-      } catch (err) {
-        try {
-          mql.addListener(handleBreakpoint)
-        } catch (_err) {
-          // Do nothing
-        }
-      }
-    })
-    return () => {
-      try {
-        mediaQueryLists.forEach((mql) => mql.removeEventListener('change', handleBreakpoint))
-      } catch (err) {
-        try {
-          mediaQueryLists.forEach((mql) => mql.removeListener(handleBreakpoint))
-        } catch (_err) {
-          // Do nothing
-        }
-      }
-    }
-  }, [])
-
-  return value
-}
-
-export default useBreakpointIndex

package/src/hooks/useKeyPress.ts

@@ -1,39 +0,0 @@
-import {isHotkey} from 'is-hotkey-esm'
-import {type RefObject, useCallback, useEffect, useRef} from 'react'
-
-const useKeyPress = (hotkey: string, onPress?: () => void): RefObject<boolean> => {
-  const keyPressed = useRef(false)
-
-  // If pressed key is our target key then set to true
-  const downHandler = useCallback(
-    (e: KeyboardEvent) => {
-      if (isHotkey(hotkey, e)) {
-        keyPressed.current = true
-        if (onPress) {
-          onPress()
-        }
-      }
-    },
-    [hotkey, onPress],
-  )
-
-  // If released key is our target key then set to false
-  const upHandler = useCallback(() => {
-    keyPressed.current = false
-  }, [])
-
-  // Add event listeners
-  useEffect(() => {
-    window.addEventListener('keydown', downHandler)
-    window.addEventListener('keyup', upHandler)
-    // Remove event listeners on cleanup
-    return () => {
-      window.removeEventListener('keydown', downHandler)
-      window.removeEventListener('keyup', upHandler)
-    }
-  }, [downHandler, upHandler])
-
-  return keyPressed
-}
-
-export default useKeyPress

package/src/hooks/useOnScreen.ts

@@ -1,34 +0,0 @@
-import {type RefObject, useEffect, useState} from 'react'
-
-const useOnScreen = (ref: RefObject<HTMLElement>, options = {}, once: boolean) => {
-  const [isIntersecting, setIntersecting] = useState(false)
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(([entry]: IntersectionObserverEntry[]) => {
-      // Update state when observer callback fires
-      setIntersecting(entry.isIntersecting)
-
-      // Stop observing
-      if (once && entry.isIntersecting) {
-        if (ref.current && observer) {
-          observer.unobserve(ref.current)
-        }
-      }
-    }, options)
-
-    if (ref.current && observer) {
-      observer.observe(ref.current)
-    }
-
-    // Stop observing on unmount
-    return () => {
-      if (ref.current && observer) {
-        observer.unobserve(ref.current)
-      }
-    }
-  }, [])
-
-  return isIntersecting
-}
-
-export default useOnScreen

package/src/hooks/usePortalPopoverProps.ts

@@ -1,13 +0,0 @@
-import {type PopoverProps, usePortal} from '@sanity/ui'
-
-export function usePortalPopoverProps(): PopoverProps {
-  const portal = usePortal()
-
-  return {
-    animate: true,
-    constrainSize: true,
-    floatingBoundary: portal.element,
-    portal: true,
-    referenceBoundary: portal.element,
-  }
-}

package/src/hooks/useTypedSelector.ts

@@ -1,7 +0,0 @@
-import {type TypedUseSelectorHook, useSelector} from 'react-redux'
-
-import type {RootReducerState} from '../modules/types'
-
-const useTypedSelector: TypedUseSelectorHook<RootReducerState> = useSelector
-
-export default useTypedSelector

package/src/hooks/useVersionedClient.ts

@@ -1,6 +0,0 @@
-import type {SanityClient} from '@sanity/client'
-import {useClient} from 'sanity'
-
-const useVersionedClient = (): SanityClient => useClient({apiVersion: '2025-10-02'})
-
-export default useVersionedClient

package/src/index.ts

@@ -1,5 +0,0 @@
-export {media, mediaAssetSource} from './plugin'
-export {AutoTagInput} from './components/AutoTagInputWrapper'
-export type {AutoTagInputProps} from './components/AutoTagInputWrapper'
-export {mediaField} from './utils/mediaField'
-export type {MediaTagsOptions, MediaToolOptions} from './types'

package/src/modules/assets/actions.ts

@@ -1,42 +0,0 @@
-import {createAction} from '@reduxjs/toolkit'
-
-import type {AssetItem, HttpError, Tag} from '../../types'
-
-export const ASSETS_ACTIONS = {
-  tagsAddComplete: createAction(
-    'actions/tagsAddComplete',
-    function prepare({assets, tag}: {assets: AssetItem[]; tag: Tag}) {
-      return {payload: {assets, tag}}
-    },
-  ),
-  tagsAddError: createAction(
-    'actions/tagsAddError',
-    function prepare({assets, error, tag}: {assets: AssetItem[]; error: HttpError; tag: Tag}) {
-      return {payload: {assets, error, tag}}
-    },
-  ),
-  tagsAddRequest: createAction(
-    'actions/tagsAddRequest',
-    function prepare({assets, tag}: {assets: AssetItem[]; tag: Tag}) {
-      return {payload: {assets, tag}}
-    },
-  ),
-  tagsRemoveComplete: createAction(
-    'actions/tagsRemoveComplete',
-    function prepare({assets, tag}: {assets: AssetItem[]; tag: Tag}) {
-      return {payload: {assets, tag}}
-    },
-  ),
-  tagsRemoveError: createAction(
-    'actions/tagsRemoveError',
-    function prepare({assets, error, tag}: {assets: AssetItem[]; error: HttpError; tag: Tag}) {
-      return {payload: {assets, error, tag}}
-    },
-  ),
-  tagsRemoveRequest: createAction(
-    'actions/tagsRemoveRequest',
-    function prepare({assets, tag}: {assets: AssetItem[]; tag: Tag}) {
-      return {payload: {assets, tag}}
-    },
-  ),
-}

package/src/modules/assets/deleteAndUpdateEpics.test.ts

@@ -1,87 +0,0 @@
-// @vitest-environment node
-
-import {of} from 'rxjs'
-import {describe, expect, it, vi} from 'vitest'
-
-import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
-import {createMockSanityClient, mockPatchChain} from '../../__tests__/fixtures/mockSanityClient'
-import type {ImageAsset} from '../../types'
-import {
-  assetsActions,
-  assetsDeleteEpic,
-  assetsUpdateEpic,
-  initialState as assetsInitialState,
-} from './index'
-
-const sampleAsset = {
-  _id: 'a1',
-  _type: 'sanity.imageAsset',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r',
-  originalFilename: 'x.png',
-  size: 1,
-  mimeType: 'image/png',
-  url: '',
-} as ImageAsset
-
-describe('assetsDeleteEpic', () => {
-  it('dispatches deleteComplete when observable.delete succeeds', async () => {
-    const client = createMockSanityClient({
-      observable: {
-        delete: vi.fn(() => of({})),
-      },
-    })
-
-    const store = createEpicTestStore(assetsDeleteEpic, client, {
-      assets: {
-        ...assetsInitialState,
-        assetTypes: ['image'],
-        allIds: ['a1'],
-        byIds: {
-          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false},
-        },
-      },
-    })
-
-    store.dispatch(assetsActions.deleteRequest({assets: [sampleAsset]}))
-
-    await vi.waitFor(() => {
-      expect(store.getState().assets.byIds.a1).toBeUndefined()
-      expect(client.observable.delete).toHaveBeenCalled()
-    })
-  })
-})
-
-describe('assetsUpdateEpic', () => {
-  it('commits patch and dispatches updateComplete', async () => {
-    const updated = {...sampleAsset, title: 'Updated'}
-    const chain = mockPatchChain(updated)
-    const client = createMockSanityClient({
-      patch: vi.fn(() => chain),
-    })
-
-    const store = createEpicTestStore(assetsUpdateEpic, client, {
-      assets: {
-        ...assetsInitialState,
-        assetTypes: ['image'],
-        allIds: ['a1'],
-        byIds: {
-          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false},
-        },
-      },
-    })
-
-    store.dispatch(
-      assetsActions.updateRequest({
-        asset: sampleAsset,
-        formData: {title: 'Updated'},
-      }),
-    )
-
-    await vi.waitFor(() => {
-      expect(chain.commit).toHaveBeenCalled()
-      expect(store.getState().assets.byIds.a1.asset.title).toBe('Updated')
-    })
-  })
-})

package/src/modules/assets/fetchEpic.test.ts

@@ -1,73 +0,0 @@
-// @vitest-environment node
-
-import {of, throwError} from 'rxjs'
-import {describe, expect, it, vi} from 'vitest'
-
-import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
-import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
-import type {ImageAsset} from '../../types'
-import {assetsActions, assetsFetchEpic} from './index'
-
-function assertFetchSucceeded(store: ReturnType<typeof createEpicTestStore>, asset: ImageAsset) {
-  expect(store.getState().assets.byIds.a1?.asset).toEqual(asset)
-  expect(store.getState().assets.fetching).toBe(false)
-}
-
-function assertFetchFailed(store: ReturnType<typeof createEpicTestStore>) {
-  expect(store.getState().assets.fetchingError?.message).toBe('boom')
-}
-
-const sampleAsset = {
-  _id: 'a1',
-  _type: 'sanity.imageAsset',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r',
-  originalFilename: 'x.png',
-  size: 1,
-  mimeType: 'image/png',
-  url: '',
-} as ImageAsset
-
-describe('assetsFetchEpic', () => {
-  it('dispatches fetchComplete when observable.fetch succeeds', async () => {
-    const client = createMockSanityClient({
-      observable: {
-        fetch: vi.fn(() => of({items: [sampleAsset]})),
-      },
-    })
-
-    const store = createEpicTestStore(assetsFetchEpic, client)
-    store.dispatch(
-      assetsActions.fetchRequest({
-        params: {},
-        queryFilter: '_type == "sanity.imageAsset"',
-        selector: '',
-        sort: '',
-      }),
-    )
-
-    await vi.waitFor(() => assertFetchSucceeded(store, sampleAsset))
-  })
-
-  it('dispatches fetchError when fetch fails', async () => {
-    const fetchErr = throwError(() => ({message: 'boom', statusCode: 500}))
-    const client = createMockSanityClient({
-      observable: {
-        fetch: vi.fn(() => fetchErr),
-      },
-    })
-
-    const store = createEpicTestStore(assetsFetchEpic, client)
-    store.dispatch(
-      assetsActions.fetchRequest({
-        params: {},
-        queryFilter: '_type == "sanity.imageAsset"',
-        selector: '',
-        sort: '',
-      }),
-    )
-
-    await vi.waitFor(() => assertFetchFailed(store))
-  })
-})