sanity-plugin-media 4.3.5 → 5.0.0

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

package/src/components/FormFieldInputTags/index.tsx

@@ -1,98 +0,0 @@
-import {Box} from '@sanity/ui'
-import {Controller} from 'react-hook-form'
-import CreatableSelect from 'react-select/creatable'
-import {useColorSchemeValue} from 'sanity'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/creatable'
-import type {TagSelectOption} from '../../types'
-import FormFieldInputLabel from '../FormFieldInputLabel'
-
-type Props = {
-  control: any
-  description?: string
-  disabled?: boolean
-  error?: string
-  label: string
-  name: string
-  onCreateTag: (tagName: string) => void
-  options: {
-    label: string
-    value: string
-  }[]
-  placeholder?: string
-  value?: TagSelectOption[] | null
-}
-
-const FormFieldInputTags = (props: Props) => {
-  const {
-    control,
-    description,
-    disabled,
-    error,
-    label,
-    name,
-    onCreateTag,
-    options,
-    placeholder,
-    value,
-  } = props
-
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const creating = useTypedSelector((state) => state.tags.creating)
-  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
-
-  return (
-    <Box
-      // HACK: force stacking context to ensure react-select dropdown sits above other fields
-      style={{zIndex: 2}}
-    >
-      {/* Label */}
-      <FormFieldInputLabel description={description} error={error} label={label} name={name} />
-
-      {/* Select */}
-      <Controller
-        control={control}
-        defaultValue={value}
-        name={name}
-        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
-          // setting it to an empty array (which is currently causing false positives in denoting whether the form is dirty)
-          //
-          // To illustrate this issue:
-          // - Edit an asset with no tags
-          // - Add a new tag (either an existing one, or create one inline)
-          // - Remove the tag you've just created
-          //
-          // At this point, the form will still be marked as dirty when it shouldnt be
-          return (
-            <CreatableSelect
-              components={reactSelectComponents}
-              instanceId="tags"
-              isClearable={false} // TODO: re-enable when we're able to correctly (manually) re-validate on clear
-              isDisabled={creating || disabled || tagsFetching}
-              isLoading={creating}
-              isMulti
-              name={name}
-              noOptionsMessage={() => 'No tags'}
-              onBlur={onBlur}
-              onChange={onChange}
-              onCreateOption={onCreateTag}
-              options={options}
-              placeholder={tagsFetching ? 'Loading...' : placeholder}
-              styles={reactSelectStyles(scheme)}
-              value={controllerValue}
-            />
-          )
-        }}
-      />
-    </Box>
-  )
-}
-
-export default FormFieldInputTags

package/src/components/FormFieldInputText/index.tsx

@@ -1,41 +0,0 @@
-import {Box, TextInput} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-import FormFieldInputLabel from '../FormFieldInputLabel'
-
-type Props = {
-  description?: string
-  disabled?: boolean
-  error?: string
-  label: string
-  name: string
-  placeholder?: string
-  value?: string
-}
-
-type Ref = HTMLInputElement
-
-const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
-  const {description, disabled, error, label, name, placeholder, value, ...rest} = props
-
-  return (
-    <Box>
-      {/* Label */}
-      <FormFieldInputLabel description={description} error={error} label={label} name={name} />
-      {/* Input */}
-      <TextInput
-        {...rest}
-        autoComplete="off"
-        autoFocus
-        defaultValue={value}
-        disabled={disabled}
-        id={name}
-        name={name}
-        placeholder={placeholder}
-        ref={ref}
-      />
-    </Box>
-  )
-})
-
-export default FormFieldInputText

package/src/components/FormFieldInputTextarea/index.tsx

@@ -1,43 +0,0 @@
-import {Box, TextArea} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-import FormFieldInputLabel from '../FormFieldInputLabel'
-
-type Props = {
-  description?: string
-  disabled?: boolean
-  error?: string
-  label: string
-  name: string
-  placeholder?: string
-  rows?: number
-  value?: string
-}
-
-type Ref = HTMLTextAreaElement
-
-const FormFieldInputTextarea = forwardRef<Ref, Props>((props: Props, ref) => {
-  const {description, disabled, error, label, name, placeholder, rows, value, ...rest} = props
-
-  return (
-    <Box>
-      {/* Label */}
-      <FormFieldInputLabel description={description} error={error} label={label} name={name} />
-
-      {/* Input */}
-      <TextArea
-        {...rest}
-        autoComplete="off"
-        defaultValue={value}
-        disabled={disabled}
-        id={name}
-        name={name}
-        placeholder={placeholder}
-        ref={ref}
-        rows={rows}
-      />
-    </Box>
-  )
-})
-
-export default FormFieldInputTextarea

package/src/components/FormSubmitButton/index.tsx

@@ -1,59 +0,0 @@
-import {Box, Button, Text, Tooltip} from '@sanity/ui'
-import {format} from 'date-fns'
-import {type ReactNode} from 'react'
-
-type Props = {
-  disabled: boolean
-  isValid: boolean
-  lastUpdated?: string
-  onClick: () => void
-}
-
-const FormSubmitButton = (props: Props) => {
-  const {disabled, isValid, lastUpdated, onClick} = props
-
-  let content: ReactNode
-  if (isValid) {
-    if (lastUpdated) {
-      content = (
-        <>
-          Last updated
-          <br /> {format(new Date(lastUpdated), 'PPp')}
-        </>
-      )
-    } else {
-      content = 'No unpublished changes'
-    }
-  } else {
-    content =
-      'There are validation errors that need to be fixed before this document can be published'
-  }
-
-  return (
-    <Tooltip
-      animate
-      content={
-        <Box padding={3} style={{maxWidth: '185px'}}>
-          <Text muted size={1}>
-            {content}
-          </Text>
-        </Box>
-      }
-      disabled={'ontouchstart' in window}
-      placement="top"
-      portal
-    >
-      <Box>
-        <Button
-          disabled={disabled}
-          fontSize={1}
-          onClick={onClick}
-          text="Save and close"
-          tone="primary"
-        />
-      </Box>
-    </Tooltip>
-  )
-}
-
-export default FormSubmitButton

package/src/components/Header/index.tsx

@@ -1,80 +0,0 @@
-import {CloseIcon, Icon, UploadIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Text} from '@sanity/ui'
-import pluralize from 'pluralize'
-
-import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
-import {useDropzoneActions} from '../../contexts/DropzoneDispatchContext'
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
-import useTypedSelector from '../../hooks/useTypedSelector'
-
-type Props = {
-  onClose?: () => void
-}
-
-const Header = (props: Props) => {
-  const {onClose} = props
-
-  const {open} = useDropzoneActions()
-  const {onSelect} = useAssetSourceActions()
-
-  // Redux
-  const assetTypes = useTypedSelector((state) => state.assets.assetTypes)
-  const selectedDocument = useTypedSelector((state) => state.selected.document)
-
-  const {directUploads} = useToolOptions()
-
-  // Row: Current document / close button
-  return (
-    <Box paddingY={2}>
-      <Flex align="center" justify="space-between">
-        {/* Label */}
-        <Box flex={1} marginX={3}>
-          <Inline style={{whiteSpace: 'nowrap'}}>
-            <Text textOverflow="ellipsis" weight="semibold">
-              <span>{onSelect ? `Insert ${assetTypes.join(' or ')}` : 'Browse Assets'}</span>
-            </Text>
-
-            {selectedDocument && (
-              <Box display={['none', 'none', 'block']}>
-                <Text>
-                  <span style={{margin: '0 0.5em'}}>
-                    <Icon symbol="arrow-right" />
-                  </span>
-                  <span style={{textTransform: 'capitalize'}}>{selectedDocument._type}</span>
-                </Text>
-              </Box>
-            )}
-          </Inline>
-        </Box>
-
-        <Flex marginX={2}>
-          {/* Upload */}
-          {directUploads && (
-            <Button
-              fontSize={1}
-              icon={UploadIcon}
-              mode="bleed"
-              onClick={open}
-              text={`Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : 'assets'}`}
-            />
-          )}
-
-          {/* Close */}
-          {onClose && (
-            <Box style={{flexShrink: 0}}>
-              <Button
-                disabled={!onClose}
-                icon={CloseIcon}
-                mode="bleed"
-                onClick={onClose}
-                radius={2}
-              />
-            </Box>
-          )}
-        </Flex>
-      </Flex>
-    </Box>
-  )
-}
-
-export default Header