sanity-plugin-media 4.3.6 → 5.0.0

package/src/components/CardAsset/CardAsset.test.tsx

@@ -1,323 +0,0 @@
-import {screen} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import type {RefObject} from 'react'
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
-import {initialState as assetsInitialState} from '../../modules/assets'
-import type {AssetItem, AssetType, FileAsset, ImageAsset} from '../../types'
-import CardAsset from './index'
-
-const SHIFT_FLAG = '__CARD_ASSET_TEST_SHIFT__'
-
-function setShiftPressed(on: boolean) {
-  const g = globalThis as unknown as Record<string, boolean | undefined>
-  if (on) {
-    g[SHIFT_FLAG] = true
-  } else {
-    delete g[SHIFT_FLAG]
-  }
-}
-
-vi.mock('../../hooks/useKeyPress', () => ({
-  default: (): RefObject<boolean> =>
-    ({
-      get current() {
-        return Boolean((globalThis as unknown as Record<string, unknown>)[SHIFT_FLAG])
-      },
-    }) as RefObject<boolean>,
-}))
-
-vi.mock('../Image', () => ({
-  default: () => <div data-testid="card-image" />,
-}))
-
-vi.mock('../FileIcon', () => ({
-  default: ({extension}: {extension?: string}) => (
-    <div data-testid="card-file-icon" data-extension={extension ?? ''} />
-  ),
-}))
-
-vi.mock('sanity', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('sanity')>()
-  return {
-    ...actual,
-    useColorSchemeValue: () => 'light',
-  }
-})
-
-const imageAsset = {
-  _id: 'img-1',
-  _type: 'sanity.imageAsset',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  originalFilename: 'photo.png',
-  size: 1,
-  mimeType: 'image/png',
-  url: 'https://example.com/photo.png',
-  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true},
-} as ImageAsset
-
-const fileAsset = {
-  _id: 'file-1',
-  _type: 'sanity.fileAsset',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  originalFilename: 'doc.pdf',
-  extension: 'pdf',
-  size: 1,
-  mimeType: 'application/pdf',
-  url: 'https://example.com/doc.pdf',
-} as FileAsset
-
-function assetItem(asset: ImageAsset | FileAsset, partial?: Partial<AssetItem>): AssetItem {
-  return {
-    _type: 'asset',
-    asset,
-    picked: false,
-    updating: false,
-    ...partial,
-  }
-}
-
-function assetsState(byIds: Record<string, AssetItem>, extra?: Partial<typeof assetsInitialState>) {
-  return {
-    ...assetsInitialState,
-    assetTypes: ['file', 'image'] as AssetType[],
-    allIds: Object.keys(byIds),
-    byIds,
-    ...extra,
-  }
-}
-
-function clickPreview() {
-  const imgs = screen.getAllByTestId('card-image')
-  const img = imgs.at(-1)
-  if (!img) {
-    throw new Error('card-image missing')
-  }
-  const target = img.parentElement
-  if (!target) {
-    throw new Error('preview wrapper missing')
-  }
-  return target
-}
-
-function clickFooterFilename(text: string) {
-  const nodes = screen.getAllByText(text)
-  const el = nodes.at(-1)
-  if (!el) {
-    throw new Error(`footer text missing: ${text}`)
-  }
-  return el
-}
-
-beforeEach(() => {
-  setShiftPressed(false)
-})
-
-describe('CardAsset', () => {
-  it('renders nothing when the asset id is not in the store', () => {
-    renderWithProviders(<CardAsset id="missing" selected={false} />, {
-      preloaded: {
-        assets: assetsState({}),
-      },
-    })
-    expect(screen.queryAllByTestId('card-image')).toHaveLength(0)
-    expect(screen.queryAllByTestId('card-file-icon')).toHaveLength(0)
-  })
-
-  it('renders image preview and original filename for an image asset', () => {
-    renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)}),
-      },
-    })
-    expect(screen.getAllByTestId('card-image').length).toBeGreaterThan(0)
-    expect(screen.getAllByText('photo.png').length).toBeGreaterThan(0)
-  })
-
-  it('renders file icon with extension for a file asset', () => {
-    renderWithProviders(<CardAsset id="file-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'file-1': assetItem(fileAsset)}),
-      },
-    })
-    const icon = screen.getAllByTestId('card-file-icon').at(-1)!
-    expect(icon).toHaveAttribute('data-extension', 'pdf')
-    expect(screen.getAllByText('doc.pdf').length).toBeGreaterThan(0)
-  })
-
-  it('opens the asset edit dialog when the preview is clicked in browse mode', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)}),
-      },
-    })
-
-    await user.click(clickPreview())
-
-    expect(
-      store.getState().dialog.items.some((d) => d.type === 'assetEdit' && d.assetId === 'img-1'),
-    ).toBe(true)
-  })
-
-  it('calls onSelect with the asset document id when the preview is clicked in picker mode', async () => {
-    const user = userEvent.setup()
-    const onSelect = vi.fn()
-    renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      onSelect,
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)}),
-      },
-    })
-
-    await user.click(clickPreview())
-
-    expect(onSelect).toHaveBeenCalledWith([
-      {
-        kind: 'assetDocumentId',
-        value: 'img-1',
-      },
-    ])
-  })
-
-  it('toggles pick when the footer is clicked in browse mode', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {picked: false})}),
-      },
-    })
-
-    await user.click(clickFooterFilename('photo.png'))
-
-    expect(store.getState().assets.byIds['img-1']!.picked).toBe(true)
-  })
-
-  it('opens asset edit from the footer when in picker mode', async () => {
-    const user = userEvent.setup()
-    const onSelect = vi.fn()
-    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      onSelect,
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset)}),
-      },
-    })
-
-    await user.click(clickFooterFilename('photo.png'))
-
-    expect(onSelect).not.toHaveBeenCalled()
-    expect(
-      store.getState().dialog.items.some((d) => d.type === 'assetEdit' && d.assetId === 'img-1'),
-    ).toBe(true)
-  })
-
-  it('shift-clicks on preview to unpick when the asset is already picked', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {picked: true})}),
-      },
-    })
-
-    setShiftPressed(true)
-    await user.click(clickPreview())
-    setShiftPressed(false)
-
-    expect(store.getState().assets.byIds['img-1']!.picked).toBe(false)
-  })
-
-  it('shift-clicks on preview to pick a range when not picked and lastPicked is set', async () => {
-    const user = userEvent.setup()
-    const prevAsset = {...imageAsset, _id: 'prev-1', originalFilename: 'prev.png'} as ImageAsset
-    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState(
-          {
-            'prev-1': assetItem(prevAsset),
-            'img-1': assetItem(imageAsset, {picked: false}),
-          },
-          {lastPicked: 'prev-1'},
-        ),
-      },
-    })
-
-    setShiftPressed(true)
-    await user.click(clickPreview())
-    setShiftPressed(false)
-
-    expect(store.getState().assets.byIds['img-1']!.picked).toBe(true)
-    expect(store.getState().assets.byIds['prev-1']!.picked).toBe(true)
-  })
-
-  it('shift-clicks on footer to pick a range when not picked', async () => {
-    const user = userEvent.setup()
-    const anchorAsset = {
-      ...imageAsset,
-      _id: 'anchor-9',
-      originalFilename: 'anchor.png',
-    } as ImageAsset
-    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState(
-          {
-            'anchor-9': assetItem(anchorAsset),
-            'img-1': assetItem(imageAsset, {picked: false}),
-          },
-          {lastPicked: 'anchor-9'},
-        ),
-      },
-    })
-
-    setShiftPressed(true)
-    await user.click(clickFooterFilename('photo.png'))
-    setShiftPressed(false)
-
-    expect(store.getState().assets.byIds['img-1']!.picked).toBe(true)
-    expect(store.getState().assets.byIds['anchor-9']!.picked).toBe(true)
-  })
-
-  it('shows the selection checkmark when selected and not updating', () => {
-    const {container} = renderWithProviders(<CardAsset id="img-1" selected />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {updating: false})}),
-      },
-    })
-    expect(
-      container.querySelectorAll('[data-sanity-icon="checkmark-circle"]').length,
-    ).toBeGreaterThan(0)
-  })
-
-  it('does not show the checkmark overlay while updating even if selected', () => {
-    const {container} = renderWithProviders(<CardAsset id="img-1" selected />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})}),
-      },
-    })
-    expect(container.querySelectorAll('[data-sanity-icon="checkmark-circle"]')).toHaveLength(0)
-  })
-
-  it('shows a spinner while updating', () => {
-    renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})}),
-      },
-    })
-    expect(document.body.querySelectorAll('[data-ui="Spinner"]').length).toBeGreaterThan(0)
-  })
-
-  it('shows a warning icon when the asset item has an error', () => {
-    const {container} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
-      preloaded: {
-        assets: assetsState({'img-1': assetItem(imageAsset, {error: 'Upload failed'})}),
-      },
-    })
-    expect(
-      container.querySelectorAll('[data-sanity-icon="warning-filled"]').length,
-    ).toBeGreaterThan(0)
-  })
-})

package/src/components/CardAsset/index.tsx

@@ -1,290 +0,0 @@
-import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
-import {
-  Box,
-  Checkbox,
-  Container,
-  Flex,
-  Spinner,
-  Text,
-  type Theme,
-  type ThemeColorSchemeKey,
-  Tooltip,
-} from '@sanity/ui'
-import {memo, type MouseEvent, type RefObject} from 'react'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-import {styled, css} from 'styled-components'
-
-import {PANEL_HEIGHT} from '../../constants'
-import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
-import useKeyPress from '../../hooks/useKeyPress'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions, selectAssetById} from '../../modules/assets'
-import {dialogActions} from '../../modules/dialog'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-import imageDprUrl from '../../utils/imageDprUrl'
-import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
-import FileIcon from '../FileIcon'
-import Image from '../Image'
-
-type Props = {
-  id: string
-  selected: boolean
-}
-
-const CardWrapper = styled(Flex)`
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-`
-
-const CardContainer = styled(Flex)<{$picked?: boolean; theme: Theme; $updating?: boolean}>(({
-  $picked,
-  theme,
-  $updating,
-}) => {
-  return css`
-    border: 1px solid transparent;
-    height: 100%;
-    pointer-events: ${$updating ? 'none' : 'auto'};
-    position: relative;
-    transition: all 300ms;
-    user-select: none;
-    width: 100%;
-
-    border: ${$picked
-      ? `1px solid ${theme.sanity.color.spot.orange} !important`
-      : '1px solid inherit'};
-
-    ${!$updating &&
-    css`
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          border: 1px solid var(--card-border-color);
-        }
-      }
-    `}
-  `
-})
-
-const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(({
-  $scheme,
-}) => {
-  return css`
-    cursor: pointer;
-    height: ${PANEL_HEIGHT}px;
-    transition: all 300ms;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor($scheme, 'bg')};
-      }
-    }
-  `
-})
-
-const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
-  return {
-    color: theme.sanity.color.spot.red,
-  }
-})
-
-const CardAsset = (props: Props) => {
-  const {id, selected} = props
-
-  const scheme = useColorSchemeValue()
-
-  // Refs
-  const shiftPressed: RefObject<boolean> = useKeyPress('shift')
-
-  // Redux
-  const dispatch = useDispatch()
-  const lastPicked = useTypedSelector((state) => state.assets.lastPicked)
-  const item = useTypedSelector((state) => selectAssetById(state, id))
-
-  const asset = item?.asset
-  const error = item?.error
-  const isOpaque = item?.asset?.metadata?.isOpaque
-  const picked = item?.picked
-  const updating = item?.updating
-
-  const {onSelect} = useAssetSourceActions()
-
-  // Short circuit if no asset is available
-  if (!asset) {
-    return null
-  }
-
-  // Callbacks
-  const handleAssetClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-
-    if (onSelect) {
-      onSelect([
-        {
-          kind: 'assetDocumentId',
-          value: asset._id,
-        },
-      ])
-    } else if (shiftPressed.current) {
-      if (picked) {
-        dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
-      } else {
-        dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
-      }
-    } else {
-      dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
-    }
-  }
-
-  const handleContextActionClick = (e: MouseEvent) => {
-    e.stopPropagation()
-
-    if (onSelect) {
-      dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
-    } else if (shiftPressed.current && !picked) {
-      dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
-    } else {
-      dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
-    }
-  }
-
-  const opacityContainer = updating ? 0.5 : 1
-  const opacityPreview = selected || updating ? 0.25 : 1
-
-  return (
-    <CardWrapper padding={1}>
-      <CardContainer direction="column" $picked={picked} $updating={item.updating}>
-        {/* Image */}
-        <Box
-          flex={1}
-          style={{
-            cursor: selected ? 'default' : 'pointer',
-            position: 'relative',
-          }}
-        >
-          <div onClick={handleAssetClick} style={{height: '100%', opacity: opacityPreview}}>
-            {/* File icon */}
-            {isFileAsset(asset) && <FileIcon extension={asset.extension} width="80px" />}
-
-            {/* Image */}
-            {isImageAsset(asset) && (
-              <Image
-                draggable={false}
-                $scheme={scheme}
-                $showCheckerboard={!isOpaque}
-                src={imageDprUrl(asset, {height: 250, width: 250})}
-                style={{
-                  draggable: false,
-                  transition: 'opacity 1000ms',
-                }}
-              />
-            )}
-          </div>
-
-          {/* Selected check icon */}
-          {selected && !updating && (
-            <Flex
-              align="center"
-              justify="center"
-              style={{
-                height: '100%',
-                left: 0,
-                opacity: opacityContainer,
-                position: 'absolute',
-                top: 0,
-                width: '100%',
-              }}
-            >
-              <Text size={2}>
-                <CheckmarkCircleIcon />
-              </Text>
-            </Flex>
-          )}
-
-          {/* Spinner */}
-          {updating && (
-            <Flex
-              align="center"
-              justify="center"
-              style={{
-                height: '100%',
-                left: 0,
-                position: 'absolute',
-                top: 0,
-                width: '100%',
-              }}
-            >
-              <Spinner />
-            </Flex>
-          )}
-        </Box>
-
-        {/* Footer */}
-        <ContextActionContainer
-          align="center"
-          onClick={handleContextActionClick}
-          paddingX={1}
-          $scheme={scheme}
-          style={{opacity: opacityContainer}}
-        >
-          {onSelect ? (
-            <EditIcon
-              style={{
-                flexShrink: 0,
-                opacity: 0.5,
-              }}
-            />
-          ) : (
-            <Checkbox
-              checked={picked}
-              readOnly
-              style={{
-                flexShrink: 0,
-                pointerEvents: 'none',
-                transform: 'scale(0.8)',
-              }}
-            />
-          )}
-
-          <Box marginLeft={2}>
-            <Text muted size={0} textOverflow="ellipsis">
-              {asset.originalFilename}
-            </Text>
-          </Box>
-        </ContextActionContainer>
-
-        {/* TODO: DRY */}
-        {/* Error button */}
-        {error && (
-          <Box
-            padding={3}
-            style={{
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            }}
-          >
-            <Tooltip
-              animate
-              content={
-                <Container padding={2} width={0}>
-                  <Text size={1}>{error}</Text>
-                </Container>
-              }
-              placement="left"
-              portal
-            >
-              <Text size={1}>
-                <StyledWarningOutlineIcon color="critical" />
-              </Text>
-            </Tooltip>
-          </Box>
-        )}
-      </CardContainer>
-    </CardWrapper>
-  )
-}
-
-export default memo(CardAsset)