sanity-plugin-media 4.3.6 → 5.0.0

package/src/components/DialogTagEdit/index.tsx

@@ -1,201 +0,0 @@
-import type {MutationEvent} from '@sanity/client'
-import {Box, Button, Card, Flex, Text} from '@sanity/ui'
-import groq from 'groq'
-import {type ReactNode, useCallback, useEffect, useState} from 'react'
-import {type SubmitHandler, useForm} from 'react-hook-form'
-import {useDispatch} from 'react-redux'
-
-import {tagFormSchema} from '../../formSchema'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import {dialogActions} from '../../modules/dialog'
-import {selectTagById, tagsActions} from '../../modules/tags'
-import type {DialogTagEditProps, Tag, TagFormData} from '../../types'
-import sanitizeFormData from '../../utils/sanitizeFormData'
-import zodFormResolver from '../../utils/zodFormResolver'
-import Dialog from '../Dialog'
-import FormFieldInputText from '../FormFieldInputText'
-import FormSubmitButton from '../FormSubmitButton'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogTagEditProps
-}
-
-const DialogTagEdit = (props: Props) => {
-  const {
-    children,
-    dialog: {id, tagId},
-  } = props
-
-  const client = useVersionedClient()
-
-  const dispatch = useDispatch()
-  const tagItem = useTypedSelector((state) => selectTagById(state, String(tagId))) // TODO: double check string cast
-
-  // - Generate a snapshot of the current tag
-  const [tagSnapshot, setTagSnapshot] = useState(tagItem?.tag)
-
-  const currentTag = tagItem ? tagItem?.tag : tagSnapshot
-  const generateDefaultValues = useCallback(
-    (tag?: Tag) => ({
-      name: tag?.name?.current || '',
-    }),
-    [],
-  )
-
-  const {
-    // Read the formState before render to subscribe the form state through Proxy
-    formState: {errors, isDirty, isValid},
-    handleSubmit,
-    register,
-    reset,
-    setError,
-  } = useForm<TagFormData>({
-    defaultValues: generateDefaultValues(tagItem?.tag),
-    mode: 'onChange',
-    resolver: zodFormResolver<TagFormData>(tagFormSchema),
-  })
-
-  const formUpdating = !tagItem || tagItem?.updating
-
-  const handleClose = () => {
-    dispatch(dialogActions.remove({id}))
-  }
-
-  // Submit react-hook-form
-  const onSubmit: SubmitHandler<TagFormData> = (formData) => {
-    if (!tagItem?.tag) {
-      return
-    }
-    const sanitizedFormData = sanitizeFormData(formData)
-    dispatch(
-      tagsActions.updateRequest({
-        closeDialogId: tagItem?.tag?._id,
-        formData: {
-          name: {
-            _type: 'slug',
-            current: sanitizedFormData['name'],
-          },
-        },
-        tag: tagItem?.tag,
-      }),
-    )
-  }
-
-  const handleDelete = () => {
-    if (!tagItem?.tag) {
-      return
-    }
-
-    dispatch(
-      dialogActions.showConfirmDeleteTag({
-        closeDialogId: tagItem?.tag?._id,
-        tag: tagItem?.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, generateDefaultValues],
-  )
-
-  useEffect(() => {
-    if (tagItem?.error) {
-      setError('name', {
-        message: tagItem.error?.message,
-      })
-    }
-  }, [setError, tagItem?.error])
-
-  // - Listen for asset mutations and update snapshot
-  useEffect(() => {
-    if (!tagItem?.tag) {
-      return undefined
-    }
-
-    // Remember that Sanity listeners ignore joins, order clauses and projections
-    const subscriptionAsset = client
-      .listen(groq`*[_id == $id]`, {id: tagItem?.tag._id})
-      .subscribe(handleTagUpdate)
-
-    return () => {
-      subscriptionAsset?.unsubscribe()
-    }
-  }, [client, handleTagUpdate, tagItem?.tag])
-
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify="space-between">
-        {/* Delete button */}
-        <Button
-          disabled={formUpdating}
-          fontSize={1}
-          mode="bleed"
-          onClick={handleDelete}
-          text="Delete"
-          tone="critical"
-        />
-
-        {/* Submit button */}
-        <FormSubmitButton
-          disabled={formUpdating || !isDirty || !isValid}
-          isValid={isValid}
-          lastUpdated={tagItem?.tag?._updatedAt}
-          onClick={handleSubmit(onSubmit)}
-        />
-      </Flex>
-    </Box>
-  )
-
-  if (!currentTag) {
-    return null
-  }
-
-  return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      header="Edit Tag"
-      id={id}
-      onClose={handleClose}
-      width={1}
-    >
-      {/* Form fields */}
-      <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
-        {/* Deleted notification */}
-        {!tagItem && (
-          <Card marginBottom={3} padding={3} radius={2} shadow={1} tone="critical">
-            <Text size={1}>This tag cannot be found – it may have been deleted.</Text>
-          </Card>
-        )}
-
-        {/* Hidden button to enable enter key submissions */}
-        <button style={{display: 'none'}} tabIndex={-1} type="submit" />
-
-        {/* Title */}
-        <FormFieldInputText
-          {...register('name')}
-          disabled={formUpdating}
-          error={errors?.name?.message}
-          label="Name"
-          name="name"
-        />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogTagEdit

package/src/components/DialogTags/index.tsx

@@ -1,45 +0,0 @@
-import {Box} from '@sanity/ui'
-import {type ReactNode, useCallback} from 'react'
-import {useDispatch} from 'react-redux'
-
-import {dialogActions} from '../../modules/dialog'
-import type {DialogTagsProps} from '../../types'
-import Dialog from '../Dialog'
-import TagView from '../TagView'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogTagsProps
-}
-
-const DialogTags = (props: Props) => {
-  const {
-    children,
-    dialog: {id},
-  } = props
-
-  // Redux
-  const dispatch = useDispatch()
-
-  // Callbacks
-  const handleClose = useCallback(() => {
-    dispatch(dialogActions.clear())
-  }, [dispatch])
-
-  return (
-    <Dialog animate header="All Tags" id={id} onClose={handleClose} width={1}>
-      <Box
-        style={{
-          height: '100%',
-          minHeight: '420px', // explicit height required as <TagView> is virtualized
-        }}
-      >
-        <TagView />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogTags

package/src/components/Dialogs/index.tsx

@@ -1,76 +0,0 @@
-import useTypedSelector from '../../hooks/useTypedSelector'
-import type {Dialog} from '../../types'
-import DialogAssetEdit from '../DialogAssetEdit'
-import DialogConfirm from '../DialogConfirm'
-import DialogSearchFacets from '../DialogSearchFacets'
-import DialogTagCreate from '../DialogTagCreate'
-import DialogTagEdit from '../DialogTagEdit'
-import DialogTags from '../DialogTags'
-
-const Dialogs = () => {
-  // Redux
-  const currentDialogs = useTypedSelector((state) => state.dialog.items)
-
-  const renderDialogs = (dialogs: Dialog[], index: number) => {
-    if (dialogs.length === 0 || index >= dialogs.length) {
-      return null
-    }
-
-    const dialog = dialogs[index]!
-    const childDialogs = renderDialogs(dialogs, index + 1)
-
-    if (dialog.type === 'assetEdit') {
-      return (
-        <DialogAssetEdit dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogAssetEdit>
-      )
-    }
-
-    if (dialog.type === 'confirm') {
-      return (
-        <DialogConfirm dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogConfirm>
-      )
-    }
-
-    if (dialog.type === 'searchFacets') {
-      return (
-        <DialogSearchFacets dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogSearchFacets>
-      )
-    }
-
-    if (dialog.type === 'tagCreate') {
-      return (
-        <DialogTagCreate dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogTagCreate>
-      )
-    }
-
-    if (dialog.type === 'tagEdit') {
-      return (
-        <DialogTagEdit dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogTagEdit>
-      )
-    }
-
-    if (dialog.type === 'tags') {
-      return (
-        <DialogTags dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogTags>
-      )
-    }
-
-    return null
-  }
-
-  return renderDialogs(currentDialogs, 0)
-}
-
-export default Dialogs

package/src/components/DocumentList/index.tsx

@@ -1,62 +0,0 @@
-import type {SanityDocument} from '@sanity/client'
-import {Box, Button, Card, Stack, Text} from '@sanity/ui'
-import {Preview, type SchemaType, useSchema} from 'sanity'
-import {useIntentLink} from 'sanity/router'
-
-type Props = {
-  documents: SanityDocument[]
-  isLoading: boolean
-}
-
-const DocumentList = ({documents, isLoading}: Props) => {
-  const schema = useSchema()
-
-  if (isLoading) {
-    return (
-      <Text muted size={1}>
-        Loading...
-      </Text>
-    )
-  }
-
-  if (documents.length === 0) {
-    return (
-      <Text muted size={1}>
-        No documents are referencing this asset
-      </Text>
-    )
-  }
-
-  return (
-    <Card flex={1} marginBottom={2} padding={2} radius={2} shadow={1}>
-      <Stack space={2}>
-        {documents?.map((doc) => (
-          <ReferringDocument doc={doc} key={doc._id} schemaType={schema.get(doc._type)} />
-        ))}
-      </Stack>
-    </Card>
-  )
-}
-
-const ReferringDocument = (props: {doc: SanityDocument; schemaType?: SchemaType}) => {
-  const {doc, schemaType} = props
-
-  const {onClick} = useIntentLink({
-    intent: 'edit',
-    params: {id: doc._id},
-  })
-
-  return schemaType ? (
-    <Button key={doc._id} mode="bleed" onClick={onClick} padding={2} style={{width: '100%'}}>
-      <Preview layout="default" schemaType={schemaType} value={doc} />
-    </Button>
-  ) : (
-    <Box padding={2}>
-      <Text size={1}>
-        A document of the unknown type <em>{doc._type}</em>
-      </Text>
-    </Box>
-  )
-}
-
-export default DocumentList

package/src/components/FileAssetPreview/index.tsx

@@ -1,37 +0,0 @@
-import {Flex} from '@sanity/ui'
-
-import type {Asset} from '../../types'
-import FileIcon from '../FileIcon'
-
-type Props = {
-  asset: Asset
-}
-
-const FileAssetPreview = (props: Props) => {
-  const {asset} = props
-
-  if (asset.mimeType.search('audio') === 0) {
-    return (
-      <Flex align="center" justify="center" style={{height: '100%'}}>
-        <audio controls src={asset.url} style={{width: '100%'}} />
-      </Flex>
-    )
-  }
-
-  if (asset.mimeType.search('video') === 0) {
-    return (
-      <video
-        controls
-        src={asset.url}
-        style={{
-          height: '100%',
-          width: '100%',
-        }}
-      />
-    )
-  }
-
-  return <FileIcon extension={asset.extension} width="50%" />
-}
-
-export default FileAssetPreview

package/src/components/FileIcon/index.tsx

@@ -1,43 +0,0 @@
-import {Box, Flex, type Theme} from '@sanity/ui'
-import {type MouseEvent} from 'react'
-import {defaultStyles, FileIcon as ReactFileIcon} from 'react-file-icon'
-import type {DefaultExtensionType} from 'react-file-icon'
-import {styled, css} from 'styled-components'
-
-type Props = {
-  extension?: string
-  onClick?: (e: MouseEvent) => void
-  width: string
-}
-
-// Force react-file-icon styles
-const Container = styled(Box)(({theme}: {theme: Theme}) => {
-  return css`
-    text {
-      font-family: ${theme.sanity.fonts.text.family} !important;
-      font-size: 8px !important;
-      font-weight: 500 !important;
-    }
-  `
-})
-
-const FileIcon = (props: Props) => {
-  const {extension, onClick, width} = props
-
-  return (
-    <Flex align="center" justify="center" onClick={onClick} style={{height: '100%'}}>
-      <Container style={{width}}>
-        {extension ? (
-          <ReactFileIcon
-            extension={extension}
-            {...defaultStyles[extension as DefaultExtensionType]}
-          />
-        ) : (
-          <ReactFileIcon />
-        )}
-      </Container>
-    </Flex>
-  )
-}
-
-export default FileIcon

package/src/components/FormBuilderTool/FormBuilderTool.test.tsx

@@ -1,63 +0,0 @@
-import {LayerProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {render, screen, waitFor} from '@testing-library/react'
-import {of} from 'rxjs'
-import {ColorSchemeProvider} from 'sanity'
-import {describe, expect, it, vi, beforeEach} from 'vitest'
-
-import {createListenMock} from '../../__tests__/fixtures/listenMock'
-import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
-import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import FormBuilderTool from './index'
-
-vi.mock('../../hooks/useVersionedClient', () => ({
-  default: vi.fn(),
-}))
-
-vi.mock('sanity', async (importOriginal) => {
-  const mod = await importOriginal<typeof import('sanity')>()
-  return {
-    ...mod,
-    useFormValue: () => ({_id: 'doc-1', _type: 'article'}),
-  }
-})
-
-describe('FormBuilderTool', () => {
-  beforeEach(() => {
-    const fetch = vi.fn().mockReturnValue(of({items: []}))
-    vi.mocked(useVersionedClient).mockReturnValue(
-      createMockSanityClient({
-        listen: createListenMock(),
-        observable: {fetch},
-      }),
-    )
-  })
-
-  it('renders picker header for image asset type', async () => {
-    render(
-      <ColorSchemeProvider scheme="light">
-        <ThemeProvider theme={studioTheme}>
-          <ToastProvider>
-            <LayerProvider>
-              <ToolOptionsProvider options={{creditLine: {enabled: false}}}>
-                <FormBuilderTool
-                  {...({
-                    assetType: 'image',
-                    onClose: vi.fn(),
-                    onSelect: vi.fn(),
-                    schemaType: {},
-                    selectedAssets: undefined,
-                  } as any)}
-                />
-              </ToolOptionsProvider>
-            </LayerProvider>
-          </ToastProvider>
-        </ThemeProvider>
-      </ColorSchemeProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText(/Insert image/i)).toBeInTheDocument()
-    })
-  })
-})

package/src/components/FormBuilderTool/index.tsx

@@ -1,69 +0,0 @@
-import {Box, Portal, PortalProvider, useLayer} from '@sanity/ui'
-import {type SyntheticEvent, useEffect, useState} from 'react'
-import {type AssetSourceComponentProps, type SanityDocument, useFormValue} from 'sanity'
-
-import useKeyPress from '../../hooks/useKeyPress'
-import Browser from '../Browser'
-
-const FormBuilderTool = (props: AssetSourceComponentProps) => {
-  const {onClose} = props
-
-  const portalElement = useRootPortalElement()
-
-  // Get current Sanity document
-  const currentDocument = useFormValue([]) as SanityDocument
-
-  // Close on escape key press
-  useKeyPress('escape', onClose)
-
-  // Stop propagation and prevent document mouse events from firing.
-  // This is a bit of a hack to make this work with `editModal = 'popover'` and prevent Sanity's <Popover /> component from
-  // prematurely closing, as it attaches events on `document` to detect outside clicks.
-  const handleStopPropagation = (event: SyntheticEvent) => {
-    event.nativeEvent.stopImmediatePropagation()
-    event.stopPropagation()
-  }
-
-  const {zIndex} = useLayer()
-
-  return (
-    <PortalProvider element={portalElement}>
-      <Portal>
-        <Box
-          onDragEnter={handleStopPropagation}
-          onDragLeave={handleStopPropagation}
-          onDragOver={handleStopPropagation}
-          onDrop={handleStopPropagation}
-          onMouseUp={handleStopPropagation}
-          style={{
-            bottom: 0,
-            height: 'auto',
-            left: 0,
-            position: 'fixed',
-            top: 0,
-            width: '100%',
-            zIndex,
-          }}
-        >
-          <Browser document={currentDocument} schemaType={props.schemaType} {...props} />
-        </Box>
-      </Portal>
-    </PortalProvider>
-  )
-}
-
-export default FormBuilderTool
-
-const useRootPortalElement = () => {
-  const [container] = useState(() => document.createElement('div'))
-
-  useEffect(() => {
-    container.classList.add('media-portal')
-    document.body.appendChild(container)
-    return () => {
-      document.body.removeChild(container)
-    }
-  }, [container])
-
-  return container
-}

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,66 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Box, Inline, Text, Tooltip} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-type Props = {
-  description?: string
-  error?: string
-  label: string
-  name: string
-}
-
-const StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(({theme}) => {
-  return {
-    color: theme.sanity.color.spot.red,
-  }
-})
-
-const FormFieldInputLabel = (props: Props) => {
-  const {description, error, label, name} = props
-
-  return (
-    <>
-      {/* Label */}
-      <Box marginY={3}>
-        <Inline space={2}>
-          <Text as="label" htmlFor={name} size={1} weight="semibold">
-            {label}
-          </Text>
-
-          {/* Error icon + tooltip */}
-          {error && (
-            <Text size={1}>
-              <Tooltip
-                animate
-                content={
-                  <Box padding={2}>
-                    <Text muted size={1}>
-                      <StyledErrorOutlineIcon style={{marginRight: '0.1em'}} />
-                      {error}
-                    </Text>
-                  </Box>
-                }
-                fallbackPlacements={['top', 'left']}
-                placement="right"
-                portal
-              >
-                <StyledErrorOutlineIcon />
-              </Tooltip>
-            </Text>
-          )}
-        </Inline>
-      </Box>
-
-      {/* Description */}
-      {description && (
-        <Box marginY={3}>
-          <Text htmlFor={name} muted size={1}>
-            {description}
-          </Text>
-        </Box>
-      )}
-    </>
-  )
-}
-
-export default FormFieldInputLabel