sanity-plugin-media 4.3.6 → 5.0.0

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

package/src/components/Image/index.tsx

@@ -1,41 +0,0 @@
-import type {ThemeColorSchemeKey} from '@sanity/ui'
-import type {MouseEvent} from 'react'
-import {styled, css} from 'styled-components'
-
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-type Props = {
-  onClick?: (e: MouseEvent) => void
-  $showCheckerboard?: boolean
-  $scheme?: ThemeColorSchemeKey
-  src: string
-  style?: any
-}
-
-const Image = styled.img<Props>`
-  --checkerboard-color: ${(props) =>
-    props.$scheme ? getSchemeColor(props.$scheme, 'bg2') : 'inherit'};
-
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-
-  ${(props) =>
-    props.$showCheckerboard &&
-    css`
-      background-image:
-        linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
-        linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
-        linear-gradient(-45deg, transparent 75%, var(--checkerboard-color) 75%);
-      background-size: 20px 20px;
-      background-position:
-        0 0,
-        0 10px,
-        10px -10px,
-        -10px 0;
-    `}
-`
-
-export default Image

package/src/components/Items/index.tsx

@@ -1,68 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import {useEffect} from 'react'
-import {useDispatch} from 'react-redux'
-
-import useBreakpointIndex from '../../hooks/useBreakpointIndex'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions} from '../../modules/assets'
-import {selectCombinedItems} from '../../modules/selectors'
-import {tagsActions} from '../../modules/tags'
-import AssetGridVirtualized from '../AssetGridVirtualized'
-import AssetTableVirtualized from '../AssetTableVirtualized'
-
-const Items = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const fetchCount = useTypedSelector((state) => state.assets.fetchCount)
-  const fetching = useTypedSelector((state) => state.assets.fetching)
-  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
-  const view = useTypedSelector((state) => state.assets.view)
-  const combinedItems = useTypedSelector(selectCombinedItems)
-
-  const breakpointIndex = useBreakpointIndex()
-
-  const hasFetchedOnce = fetchCount >= 0
-  const hasItems = combinedItems.length > 0
-
-  // Only load 1 page of items at a time.
-  const handleLoadMoreItems = () => {
-    if (!fetching) {
-      dispatch(assetsActions.loadNextPage())
-    }
-  }
-
-  // Effects
-
-  // - Hide tag panel on smaller breakpoints
-  useEffect(() => {
-    if (breakpointIndex <= 1 && tagsPanelVisible) {
-      dispatch(tagsActions.panelVisibleSet({panelVisible: false}))
-    }
-  }, [breakpointIndex, dispatch, tagsPanelVisible])
-
-  const isEmpty = !hasItems && hasFetchedOnce && !fetching
-
-  return (
-    <Box flex={1} style={{width: '100%'}}>
-      {isEmpty ? (
-        <Box padding={4}>
-          <Text size={1} weight="semibold">
-            No results for the current query
-          </Text>
-        </Box>
-      ) : (
-        <>
-          {view === 'grid' && (
-            <AssetGridVirtualized items={combinedItems} onLoadMore={handleLoadMoreItems} />
-          )}
-
-          {view === 'table' && (
-            <AssetTableVirtualized items={combinedItems} onLoadMore={handleLoadMoreItems} />
-          )}
-        </>
-      )}
-    </Box>
-  )
-}
-
-export default Items

package/src/components/Notifications/index.tsx

@@ -1,24 +0,0 @@
-import {useToast} from '@sanity/ui'
-import {useEffect} from 'react'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-
-const Notifications = () => {
-  const items = useTypedSelector((state) => state.notifications.items)
-  const toast = useToast()
-
-  useEffect(() => {
-    if (items.length > 0) {
-      const lastItem = items[items.length - 1]!
-      toast.push({
-        closable: true,
-        status: lastItem.status,
-        title: lastItem.title,
-      })
-    }
-  }, [items, toast])
-
-  return null
-}
-
-export default Notifications

package/src/components/OrderSelect/index.tsx

@@ -1,66 +0,0 @@
-import {SortIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import {getOrderTitle} from '../../config/orders'
-import {ORDER_OPTIONS} from '../../constants'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions} from '../../modules/assets'
-
-const OrderSelect = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const order = useTypedSelector((state) => state.assets.order)
-
-  const popoverProps = usePortalPopoverProps()
-
-  return (
-    <MenuButton
-      button={
-        <Button
-          fontSize={1}
-          icon={SortIcon}
-          mode="bleed"
-          padding={3}
-          text={getOrderTitle(order.field, order.direction)}
-        />
-      }
-      id="order"
-      menu={
-        <Menu>
-          {ORDER_OPTIONS?.map((item, index) => {
-            if (item) {
-              const selected = order.field === item.field && order.direction === item.direction
-              return (
-                <MenuItem
-                  disabled={selected}
-                  fontSize={1}
-                  iconRight={selected}
-                  key={index}
-                  onClick={() =>
-                    dispatch(
-                      assetsActions.orderSet({
-                        order: {direction: item.direction, field: item.field},
-                      }),
-                    )
-                  }
-                  padding={2}
-                  selected={selected}
-                  space={4}
-                  style={{minWidth: '200px'}}
-                  text={getOrderTitle(item.field, item.direction)}
-                />
-              )
-            }
-
-            return <MenuDivider key={index} />
-          })}
-        </Menu>
-      }
-      popover={popoverProps}
-    />
-  )
-}
-
-export default OrderSelect

package/src/components/PickedBar/index.tsx

@@ -1,77 +0,0 @@
-import {Box, Button, Flex, Label} from '@sanity/ui'
-import pluralize from 'pluralize'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-
-import {PANEL_HEIGHT} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions, selectAssetsPicked} from '../../modules/assets'
-import {dialogActions} from '../../modules/dialog'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-const PickedBar = () => {
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const assetsPicked = useTypedSelector(selectAssetsPicked)
-
-  // Callbacks
-  const handlePickClear = () => {
-    dispatch(assetsActions.pickClear())
-  }
-
-  const handleDeletePicked = () => {
-    dispatch(dialogActions.showConfirmDeleteAssets({assets: assetsPicked}))
-  }
-
-  if (assetsPicked.length === 0) {
-    return null
-  }
-
-  return (
-    <Flex
-      align="center"
-      justify="flex-start"
-      style={{
-        background: getSchemeColor(scheme, 'bg'),
-        borderBottom: '1px solid var(--card-border-color)',
-        height: `${PANEL_HEIGHT}px`,
-        position: 'relative',
-        width: '100%',
-      }}
-    >
-      <Flex align="center" paddingX={3}>
-        <Box paddingRight={2}>
-          <Label size={0} style={{color: 'inherit'}}>
-            {assetsPicked.length} {pluralize('asset', assetsPicked.length)} selected
-          </Label>
-        </Box>
-
-        {/* Deselect button */}
-        <Button
-          mode="bleed"
-          onClick={handlePickClear}
-          padding={2}
-          style={{background: 'none', boxShadow: 'none'}}
-          tone="default"
-        >
-          <Label size={0}>Deselect</Label>
-        </Button>
-
-        {/* Delete button */}
-        <Button
-          mode="bleed"
-          onClick={handleDeletePicked}
-          padding={2}
-          style={{background: 'none', boxShadow: 'none'}}
-          tone="critical"
-        >
-          <Label size={0}>Delete</Label>
-        </Button>
-      </Flex>
-    </Flex>
-  )
-}
-
-export default PickedBar

package/src/components/Progress/index.tsx

@@ -1,38 +0,0 @@
-import {Box} from '@sanity/ui'
-import {useNProgress} from '@tanem/react-nprogress'
-
-type Props = {
-  loading?: boolean
-}
-
-const Progress = (props: Props) => {
-  const {loading} = props
-
-  const {animationDuration, isFinished, progress} = useNProgress({
-    animationDuration: 300,
-    isAnimating: loading,
-  })
-
-  return (
-    <Box
-      style={{
-        opacity: isFinished ? 0 : 1,
-        transition: `opacity ${animationDuration}ms linear`,
-      }}
-    >
-      <Box
-        style={{
-          height: '1px',
-          background: 'rgba(255, 255, 255, 0.5)',
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          transition: `width ${animationDuration}ms linear`,
-          width: `${progress * 100}%`,
-        }}
-      />
-    </Box>
-  )
-}
-
-export default Progress