sanity-plugin-media 4.3.5 → 5.0.0

package/src/components/Tag/index.tsx

@@ -1,200 +0,0 @@
-import {ArrowDownIcon, ArrowUpIcon, CloseIcon, EditIcon, SearchIcon, TrashIcon} from '@sanity/icons'
-import {Box, Button, Container, Flex, Text, Tooltip} from '@sanity/ui'
-import {type ReactNode} from 'react'
-import {useDispatch} from 'react-redux'
-import {styled} from 'styled-components'
-
-import {inputs} from '../../config/searchFacets'
-import {PANEL_HEIGHT} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {selectAssetsPicked} from '../../modules/assets'
-import {dialogActions} from '../../modules/dialog'
-import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
-import {searchActions, selectIsSearchFacetTag} from '../../modules/search'
-import type {SearchFacetInputSearchableProps, TagActions, TagItem} from '../../types'
-
-type Props = {
-  actions?: TagActions[]
-  tag: TagItem
-}
-
-const TagContainer = styled(Flex)`
-  height: ${PANEL_HEIGHT}px;
-`
-
-const ButtonContainer = styled(Flex)`
-  @media (pointer: fine) {
-    visibility: hidden;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    ${TagContainer}:hover & {
-      visibility: visible;
-    }
-  }
-`
-
-type TagButtonProps = {
-  disabled?: boolean
-  icon: ReactNode
-  onClick: () => void
-  tone?: 'critical' | 'primary'
-  tooltip: string
-}
-
-const TagButton = (props: TagButtonProps) => {
-  const {disabled, icon, onClick, tone, tooltip} = props
-
-  return (
-    <Tooltip
-      animate
-      content={
-        <Container padding={2} width={0}>
-          <Text muted size={1}>
-            {tooltip}
-          </Text>
-        </Container>
-      }
-      disabled={'ontouchstart' in window}
-      placement="top"
-      portal
-    >
-      <Button
-        disabled={disabled}
-        fontSize={1}
-        icon={icon}
-        mode="bleed"
-        onClick={onClick}
-        padding={2}
-        tone={tone}
-      />
-    </Tooltip>
-  )
-}
-
-const Tag = (props: Props) => {
-  const {actions, tag} = props
-
-  // Redux
-  const dispatch = useDispatch()
-  const assetsPicked = useTypedSelector(selectAssetsPicked)
-  const isSearchFacetTag = useTypedSelector((state) => selectIsSearchFacetTag(state, tag?.tag?._id))
-
-  // Callbacks
-  const handleSearchFacetTagRemove = () => {
-    dispatch(searchActions.facetsRemoveByTag({tagId: tag.tag._id}))
-  }
-
-  const handleShowAddTagToAssetsDialog = () => {
-    dispatch(dialogActions.showConfirmAssetsTagAdd({assetsPicked, tag: tag.tag}))
-  }
-
-  const handleShowRemoveTagFromAssetsDialog = () => {
-    dispatch(dialogActions.showConfirmAssetsTagRemove({assetsPicked, tag: tag.tag}))
-  }
-
-  const handleShowTagDeleteDialog = () => {
-    dispatch(dialogActions.showConfirmDeleteTag({tag: tag.tag}))
-  }
-
-  const handleShowTagEditDialog = () => {
-    dispatch(DIALOG_ACTIONS.showTagEdit({tagId: tag?.tag?._id}))
-  }
-
-  const handleSearchFacetTagAddOrUpdate = () => {
-    const searchFacet = {
-      ...inputs.tag,
-      value: {
-        label: tag?.tag?.name?.current,
-        value: tag?.tag?._id,
-      },
-    } as SearchFacetInputSearchableProps
-
-    if (isSearchFacetTag) {
-      dispatch(
-        searchActions.facetsUpdate({
-          name: 'tag',
-          operatorType: 'references',
-          value: searchFacet.value,
-        }),
-      )
-    } else {
-      dispatch(searchActions.facetsAdd({facet: searchFacet}))
-    }
-  }
-
-  return (
-    <TagContainer align="center" flex={1} justify="space-between" paddingLeft={3}>
-      <Box flex={1}>
-        <Text
-          muted
-          size={1}
-          style={{
-            opacity: tag?.updating ? 0.5 : 1.0,
-            userSelect: 'none',
-          }}
-          textOverflow="ellipsis"
-        >
-          {tag?.tag?.name?.current}
-        </Text>
-      </Box>
-
-      <ButtonContainer align="center" style={{flexShrink: 0}}>
-        {/* Search facet toggle */}
-        {actions?.includes('search') && (
-          <TagButton
-            disabled={tag?.updating}
-            icon={isSearchFacetTag ? <CloseIcon /> : <SearchIcon />}
-            onClick={
-              isSearchFacetTag ? handleSearchFacetTagRemove : handleSearchFacetTagAddOrUpdate
-            }
-            tooltip={isSearchFacetTag ? 'Remove filter' : 'Filter by tag'}
-          />
-        )}
-        {/* Edit icon */}
-        {actions?.includes('edit') && (
-          <TagButton
-            disabled={tag?.updating}
-            icon={<EditIcon />}
-            onClick={handleShowTagEditDialog}
-            tone="primary"
-            tooltip="Edit tag"
-          />
-        )}
-        {/* Apply to all */}
-        {actions?.includes('applyAll') && (
-          <TagButton
-            disabled={tag?.updating}
-            icon={<ArrowUpIcon />}
-            onClick={handleShowAddTagToAssetsDialog}
-            tone="primary"
-            tooltip="Add tag to selected assets"
-          />
-        )}
-        {/* Remove from all */}
-        {actions?.includes('removeAll') && (
-          <TagButton
-            disabled={tag?.updating}
-            icon={<ArrowDownIcon />}
-            onClick={handleShowRemoveTagFromAssetsDialog}
-            tone="critical"
-            tooltip="Remove tag from selected assets"
-          />
-        )}
-
-        {/* Delete icon */}
-        {actions?.includes('delete') && (
-          <TagButton
-            disabled={tag?.updating}
-            icon={<TrashIcon />}
-            onClick={handleShowTagDeleteDialog}
-            tone="critical"
-            tooltip="Delete tag"
-          />
-        )}
-      </ButtonContainer>
-    </TagContainer>
-  )
-}
-
-export default Tag

package/src/components/TagIcon/index.tsx

@@ -1,22 +0,0 @@
-const TagIcon = () => (
-  <svg
-    data-sanity-icon="media__tag" // For icon usage with @sanity/ui <Button />
-    fill="currentColor"
-    height="1em"
-    stroke="currentColor"
-    strokeWidth="0"
-    viewBox="0 0 512 512"
-    width="1em"
-  >
-    <path
-      d="M435.25 48h-122.9a14.46 14.46 0 00-10.2 4.2L56.45 297.9a28.85 28.85 0 000 40.7l117 117a28.85 28.85 0 0040.7 0L459.75 210a14.46 14.46 0 004.2-10.2v-123a28.66 28.66 0 00-28.7-28.8z"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="32"
-    />
-    <path d="M384 160a32 32 0 1132-32 32 32 0 01-32 32z" />
-  </svg>
-)
-
-export default TagIcon

package/src/components/TagView/index.tsx

@@ -1,39 +0,0 @@
-import {Box, Flex, Text} from '@sanity/ui'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {selectAssetsPickedLength} from '../../modules/assets'
-import {selectTags} from '../../modules/tags'
-import TagsVirtualized from '../TagsVirtualized'
-import TagViewHeader from '../TagViewHeader'
-
-const TagView = () => {
-  const numPickedAssets = useTypedSelector(selectAssetsPickedLength)
-  const tags = useTypedSelector(selectTags)
-  const fetching = useTypedSelector((state) => state.tags.fetching)
-  const fetchCount = useTypedSelector((state) => state.tags.fetchCount)
-  const fetchComplete = fetchCount !== -1
-  const hasTags = !fetching && tags?.length > 0
-  const hasPicked = !!(numPickedAssets > 0)
-
-  return (
-    <Flex direction="column" flex={1} height="fill">
-      <TagViewHeader
-        allowCreate
-        light={hasPicked}
-        title={hasPicked ? 'Tags (in selection)' : 'Tags'}
-      />
-
-      {fetchComplete && !hasTags && (
-        <Box padding={3}>
-          <Text muted size={1}>
-            <em>No tags</em>
-          </Text>
-        </Box>
-      )}
-
-      {hasTags && <TagsVirtualized />}
-    </Flex>
-  )
-}
-
-export default TagView

package/src/components/TagViewHeader/index.tsx

@@ -1,70 +0,0 @@
-import {ComposeIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Label} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-
-import {PANEL_HEIGHT} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {DIALOG_ACTIONS} from '../../modules/dialog/actions'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-type Props = {
-  allowCreate?: boolean
-  light?: boolean
-  title: string
-}
-
-const TagViewHeader = ({allowCreate, light, title}: Props) => {
-  const scheme = useColorSchemeValue()
-
-  const dispatch = useDispatch()
-  const tagsCreating = useTypedSelector((state) => state.tags.creating)
-  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
-
-  const handleTagCreate = () => {
-    dispatch(DIALOG_ACTIONS.showTagCreate())
-  }
-
-  return (
-    <>
-      <Flex
-        align="center"
-        justify="space-between"
-        paddingLeft={3}
-        style={{
-          background: light ? getSchemeColor(scheme, 'bg') : 'inherit',
-          borderBottom: '1px solid var(--card-border-color)',
-          flexShrink: 0,
-          height: `${PANEL_HEIGHT}px`,
-        }}
-      >
-        <Inline space={2}>
-          <Label size={0}>{title}</Label>
-          {tagsFetching && (
-            <Label size={0} style={{opacity: 0.3}}>
-              Loading...
-            </Label>
-          )}
-        </Inline>
-        {/* Create new tag button */}
-        {allowCreate && (
-          <Box marginRight={1}>
-            <Button
-              disabled={tagsCreating}
-              fontSize={1} //
-              icon={ComposeIcon}
-              mode="bleed"
-              onClick={handleTagCreate}
-              style={{
-                background: 'transparent',
-                boxShadow: 'none',
-              }}
-            />
-          </Box>
-        )}
-      </Flex>
-    </>
-  )
-}
-
-export default TagViewHeader

package/src/components/TagsPanel/index.tsx

@@ -1,40 +0,0 @@
-import {Box} from '@sanity/ui'
-
-import {TAGS_PANEL_WIDTH} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import TagView from '../TagView'
-
-const TagsPanel = () => {
-  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
-
-  if (!tagsPanelVisible) {
-    return null
-  }
-
-  return (
-    <Box
-      style={{
-        position: 'relative',
-        width: TAGS_PANEL_WIDTH,
-      }}
-    >
-      <Box
-        className="media__custom-scrollbar"
-        style={{
-          borderLeft: '1px solid var(--card-border-color)',
-          height: '100%',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          width: '100%',
-        }}
-      >
-        <TagView />
-      </Box>
-    </Box>
-  )
-}
-
-export default TagsPanel

package/src/components/TagsVirtualized/index.tsx

@@ -1,160 +0,0 @@
-import {Flex, Label} from '@sanity/ui'
-import {memo, useState} from 'react'
-import {Virtuoso} from 'react-virtuoso'
-
-import {PANEL_HEIGHT} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {selectAssetsPicked} from '../../modules/assets'
-import {selectTags} from '../../modules/tags'
-import type {TagActions, TagItem} from '../../types'
-import Tag from '../Tag'
-
-const VirtualRow = memo(
-  ({
-    isScrolling,
-    item,
-  }: {
-    isScrolling?: boolean
-    item:
-      | string
-      | (TagItem & {
-          actions: TagActions[]
-        })
-  }) => {
-    // Render label
-    if (typeof item === 'string') {
-      return (
-        <Flex
-          align="center"
-          justify="space-between"
-          key={item}
-          paddingX={3}
-          style={{height: `${PANEL_HEIGHT}px`}}
-        >
-          <Label size={0}>{item}</Label>
-        </Flex>
-      )
-    }
-
-    // Render tag - only display actions if we're not in the process of scrolling
-    return <Tag actions={isScrolling ? undefined : item.actions} key={item.tag?._id} tag={item} />
-  },
-)
-
-const TagsVirtualized = () => {
-  const assetsPicked = useTypedSelector(selectAssetsPicked)
-  const tags = useTypedSelector(selectTags)
-
-  // State
-  const [isScrolling, setIsScrolling] = useState(false)
-
-  // TODO: refactor, there's most certainly a more performant way to do this
-
-  // Filter out all tag IDS used (across all) and dedupe
-  const pickedTagIds = assetsPicked?.reduce((acc: string[], val) => {
-    const assetTagIds = val?.asset?.opt?.media?.tags?.map((tag) => tag._ref) || []
-    acc = acc.concat(assetTagIds)
-    return acc
-  }, [])
-  const pickedTagIdsUnique = [...new Set(pickedTagIds)]
-
-  // Segment tags into two buckets:
-  // 1. those which exist in all picked assets ('applied to all')
-  // 2. those which exist in some picked assets ('applied to some')
-  const tagIdsSegmented = pickedTagIdsUnique.reduce(
-    (acc: {appliedToAll: string[]; appliedToSome: string[]}, tagId) => {
-      const tagIsInEveryAsset = assetsPicked.every((assetItem) => {
-        const tagIndex =
-          assetItem.asset.opt?.media?.tags?.findIndex((tag) => tag._ref === tagId) ?? -1
-        return tagIndex >= 0
-      })
-
-      if (tagIsInEveryAsset) {
-        acc.appliedToAll.push(tagId)
-      } else {
-        acc.appliedToSome.push(tagId)
-      }
-
-      return acc
-    },
-    {
-      appliedToAll: [],
-      appliedToSome: [],
-    },
-  )
-
-  const tagsAppliedToAll = tags
-    .filter((tag) => tagIdsSegmented.appliedToAll.includes(tag.tag._id))
-    .map((tagItem) => ({
-      ...tagItem,
-      actions: ['delete', 'edit', 'removeAll', 'search'] as TagActions[],
-    }))
-  const tagsAppliedToSome = tags
-    .filter((tag) => tagIdsSegmented.appliedToSome.includes(tag.tag._id))
-    .map((tagItem) => ({
-      ...tagItem,
-      actions: ['applyAll', 'delete', 'edit', 'removeAll', 'search'] as TagActions[],
-    }))
-  const tagsUnused = tags
-    .filter((tag) => !pickedTagIdsUnique.includes(tag.tag._id))
-    .map((tagItem) => ({
-      ...tagItem,
-      actions: ['applyAll', 'delete', 'edit', 'search'] as TagActions[],
-    }))
-
-  let items: (
-    | string
-    | (TagItem & {
-        actions: TagActions[]
-      })
-  )[] = []
-  if (assetsPicked.length === 0) {
-    items = tags.map((tagItem) => ({
-      ...tagItem,
-      actions: ['delete', 'edit', 'search'] as TagActions[],
-    }))
-  } else {
-    if (tagsAppliedToAll?.length > 0) {
-      items = [
-        ...items, //
-        assetsPicked.length === 1 ? 'Used' : 'Used by all',
-        ...tagsAppliedToAll,
-      ]
-    }
-    if (tagsAppliedToSome?.length > 0) {
-      items = [
-        ...items, //
-        'Used by some',
-        ...tagsAppliedToSome,
-      ]
-    }
-    if (tagsUnused?.length > 0) {
-      items = [
-        ...items, //
-        'Unused',
-        ...tagsUnused,
-      ]
-    }
-  }
-
-  return (
-    <Virtuoso
-      className="media__custom-scrollbar"
-      computeItemKey={(index) => {
-        const item = items[index]
-        if (typeof item === 'string') {
-          return item
-        }
-        return item.tag._id
-      }}
-      isScrolling={setIsScrolling}
-      itemContent={(index) => {
-        return <VirtualRow isScrolling={isScrolling} item={items[index]} />
-      }}
-      style={{flex: 1, overflowX: 'hidden'}}
-      totalCount={items.length}
-    />
-  )
-}
-
-export default TagsVirtualized

package/src/components/TextInputNumber/index.tsx

@@ -1,32 +0,0 @@
-import {TextInput} from '@sanity/ui'
-import {type ChangeEvent} from 'react'
-
-// TODO: use correct type
-type Props = any & {
-  onValueChange: (value: number) => void
-  value?: number
-}
-
-const TextInputNumber = (props: Props) => {
-  const {onValueChange, value, ...remainingProps} = props
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value
-    const regex = /^[0-9\b]+$/
-
-    // Test for number and strip leading zeroes
-    if (val === '' || regex.test(val)) {
-      onValueChange(parseInt(val, 10) || '')
-    }
-  }
-
-  return (
-    <TextInput
-      {...remainingProps}
-      onChange={handleChange} //
-      value={value ?? ''}
-    />
-  )
-}
-
-export default TextInputNumber

package/src/components/TextInputSearch/index.tsx

@@ -1,60 +0,0 @@
-import {CloseIcon, SearchIcon} from '@sanity/icons'
-import {Box, Flex, TextInput} from '@sanity/ui'
-import {type ChangeEvent} from 'react'
-import {useDispatch} from 'react-redux'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {searchActions} from '../../modules/search'
-
-const TextInputSearch = () => {
-  // Redux
-  const searchQuery = useTypedSelector((state) => state.search.query)
-
-  // Redux
-  const dispatch = useDispatch()
-
-  // Callbacks
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(searchActions.querySet({searchQuery: e.currentTarget.value}))
-  }
-
-  const handleClear = () => {
-    dispatch(searchActions.querySet({searchQuery: ''}))
-  }
-
-  return (
-    <Box style={{position: 'relative'}}>
-      <TextInput
-        fontSize={1}
-        icon={SearchIcon}
-        onChange={handleChange}
-        placeholder="Search"
-        radius={2}
-        value={searchQuery}
-      />
-
-      {/* Clear form button */}
-      {searchQuery.length > 0 && (
-        <Flex
-          align="center"
-          justify="center"
-          onClick={handleClear}
-          style={{
-            cursor: 'pointer',
-            height: '100%',
-            opacity: 0.75,
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            width: '2em',
-            zIndex: 1, // force stacking context
-          }}
-        >
-          <CloseIcon />
-        </Flex>
-      )}
-    </Box>
-  )
-}
-
-export default TextInputSearch

package/src/components/Tool/index.tsx

@@ -1,13 +0,0 @@
-import {Flex} from '@sanity/ui'
-
-import Browser from '../Browser'
-
-const Tool = () => {
-  return (
-    <Flex direction="column" height="fill" flex={1}>
-      <Browser />
-    </Flex>
-  )
-}
-
-export default Tool

package/src/components/UploadDropzone/UploadDropzone.test.tsx

@@ -1,40 +0,0 @@
-import {describe, expect, it} from 'vitest'
-
-import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
-import {initialState as assetsInitialState} from '../../modules/assets'
-import UploadDropzone from './index'
-
-describe('UploadDropzone', () => {
-  it('still renders file input when directUploads is false (dropzone in disabled mode)', () => {
-    const {container} = renderWithProviders(
-      <UploadDropzone>
-        <div />
-      </UploadDropzone>,
-      {
-        toolOptions: {creditLine: {enabled: false}, directUploads: false},
-        preloaded: {
-          assets: {...assetsInitialState, assetTypes: ['image', 'file']},
-        },
-      },
-    )
-
-    expect(container.querySelector('input[type="file"]')).toBeTruthy()
-  })
-
-  it('enables file input when directUploads is true', () => {
-    const {container} = renderWithProviders(
-      <UploadDropzone>
-        <div />
-      </UploadDropzone>,
-      {
-        toolOptions: {creditLine: {enabled: false}, directUploads: true},
-        preloaded: {
-          assets: {...assetsInitialState, assetTypes: ['image', 'file']},
-        },
-      },
-    )
-
-    const input = container.querySelector('input[type="file"]')
-    expect(input).not.toHaveAttribute('disabled')
-  })
-})