sanity-plugin-media 4.3.6 → 5.0.1

package/src/components/CardUpload/index.tsx

@@ -1,161 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text} from '@sanity/ui'
-import filesize from 'filesize'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-import {styled} from 'styled-components'
-
-import {PANEL_HEIGHT} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {selectUploadById, uploadsActions} from '../../modules/uploads'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-import FileIcon from '../FileIcon'
-import Image from '../Image'
-
-type Props = {
-  id: string
-}
-
-const CardWrapper = styled(Flex)`
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-`
-
-const CardUpload = (props: Props) => {
-  const {id} = props
-
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const item = useTypedSelector((state) => selectUploadById(state, id))
-
-  if (!item) {
-    return null
-  }
-
-  const fileSize = filesize(item.size, {base: 10, round: 0})
-  const percentLoaded = Math.round(item.percent || 0) // (0 - 100)
-
-  const isComplete = item.status === 'complete'
-  const isUploading = item.status === 'uploading'
-  const isQueued = item.status === 'queued'
-
-  let status
-  if (isComplete) {
-    status = 'Verifying'
-  }
-  if (isUploading) {
-    status = `${percentLoaded}%`
-  }
-  if (isQueued) {
-    status = 'Queued'
-  }
-
-  // Callbacks
-  const handleCancelUpload = () => {
-    dispatch(uploadsActions.uploadCancel({hash: item.hash}))
-  }
-
-  return (
-    <CardWrapper padding={1}>
-      <Flex
-        direction="column"
-        flex={1}
-        style={{
-          background: getSchemeColor(scheme, 'bg'),
-          border: '1px solid transparent',
-          height: '100%',
-          position: 'relative',
-        }}
-      >
-        {/* Progress bar */}
-        <div
-          style={{
-            background: 'var(--card-fg-color)',
-            bottom: 0,
-            height: '1px',
-            left: 0,
-            position: 'absolute',
-            width: '100%',
-            transform: `scaleX(${percentLoaded * 0.01})`,
-            transformOrigin: 'bottom left',
-            transition: 'all 1000ms ease-out',
-          }}
-        />
-
-        <Box flex={1} style={{position: 'relative'}}>
-          {item.assetType === 'image' && item?.objectUrl && (
-            <Image
-              draggable={false}
-              $scheme={scheme}
-              src={item.objectUrl}
-              style={{
-                opacity: 0.4,
-              }}
-            />
-          )}
-
-          {item.assetType === 'file' && (
-            <div style={{height: '100%', opacity: 0.1}}>
-              <FileIcon width="80px" />
-            </div>
-          )}
-
-          {/*
-          Cancel upload button.
-          Assets will only have a `complete` status _after_ it has been created on your dataset.
-          As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset
-          has been fully uploaded (even with a status of `progress`) won't stop the asset from being created.
-        */}
-          {!isComplete && percentLoaded !== 100 && (
-            <Flex
-              align="center"
-              direction="column"
-              justify="center"
-              style={{
-                height: '100%',
-                left: 0,
-                position: 'absolute',
-                top: 0,
-                width: '100%',
-              }}
-            >
-              <Button
-                fontSize={4}
-                icon={CloseIcon}
-                mode="bleed"
-                onClick={handleCancelUpload}
-                padding={2}
-                style={{background: 'none', boxShadow: 'none'}}
-                tone="critical"
-              />
-            </Flex>
-          )}
-        </Box>
-
-        {/* Footer */}
-        <Flex
-          align="center"
-          justify="space-between"
-          paddingX={2}
-          style={{height: `${PANEL_HEIGHT}px`}}
-        >
-          <Box flex={1} marginRight={1}>
-            <Text size={0} textOverflow="ellipsis">
-              {item.name} ({fileSize})
-            </Text>
-          </Box>
-          <Text size={0} style={{flexShrink: 0}} weight="semibold">
-            {status}
-          </Text>
-        </Flex>
-      </Flex>
-    </CardWrapper>
-  )
-}
-
-export default CardUpload

package/src/components/Controls/index.tsx

@@ -1,136 +0,0 @@
-import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {dialogActions} from '../../modules/dialog'
-import {tagsActions} from '../../modules/tags'
-import ButtonViewGroup from '../ButtonViewGroup'
-import OrderSelect from '../OrderSelect'
-import Progress from '../Progress'
-import SearchFacets from '../SearchFacets'
-import SearchFacetsControl from '../SearchFacetsControl'
-import TagIcon from '../TagIcon'
-import TextInputSearch from '../TextInputSearch'
-
-const Controls = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const fetching = useTypedSelector((state) => state.assets.fetching)
-  const pageIndex = useTypedSelector((state) => state.assets.pageIndex)
-  const searchFacets = useTypedSelector((state) => state.search.facets)
-  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
-
-  const mediaIndex = useMediaIndex()
-
-  // Callbacks
-  const handleShowSearchFacetDialog = () => {
-    dispatch(dialogActions.showSearchFacets())
-  }
-
-  const handleShowTagsDialog = () => {
-    dispatch(dialogActions.showTags())
-  }
-
-  const toggleTagsPanelToggle = () => {
-    dispatch(tagsActions.panelVisibleSet({panelVisible: !tagsPanelVisible}))
-  }
-
-  return (
-    <Box
-      paddingY={2}
-      style={{
-        borderBottom: '1px solid var(--card-border-color)',
-        zIndex: 2,
-      }}
-    >
-      {/* Rows: search / filters / orders  */}
-      <Box marginBottom={2}>
-        <Flex
-          align="flex-start"
-          direction={['column', 'column', 'column', 'column', 'row']}
-          justify="space-between"
-        >
-          {/* Search + Filters */}
-          <Flex
-            flex={1}
-            style={{
-              alignItems: 'flex-start',
-              flex: 1,
-              height: '100%',
-              justifyContent: mediaIndex < 2 ? 'space-between' : 'flex-start',
-              position: 'relative',
-              width: '100%',
-            }}
-          >
-            <Box marginX={2} style={{minWidth: '200px'}}>
-              {/* Search */}
-              <TextInputSearch />
-            </Box>
-
-            <Box display={['none', 'none', 'block']}>
-              <SearchFacets />
-
-              {/* Search Facets Control (add / clear) */}
-              <SearchFacetsControl />
-            </Box>
-
-            <Box display={['block', 'block', 'none']} marginX={2}>
-              <Inline space={2} style={{whiteSpace: 'nowrap'}}>
-                {/* Filters button (small) */}
-                <Button
-                  fontSize={1}
-                  mode="ghost"
-                  onClick={handleShowSearchFacetDialog}
-                  text={`Filters${searchFacets.length > 0 ? ` (${searchFacets.length})` : ''}`}
-                  tone="primary"
-                />
-
-                {/* Tags button (small) */}
-                <Button
-                  fontSize={1}
-                  mode="ghost"
-                  onClick={handleShowTagsDialog}
-                  text={`Tags`}
-                  tone="primary"
-                />
-              </Inline>
-            </Box>
-          </Flex>
-        </Flex>
-      </Box>
-
-      <Box>
-        <Flex align="center" justify={['space-between']}>
-          {/* Views */}
-          <Box marginX={2}>
-            <ButtonViewGroup />
-          </Box>
-
-          <Flex marginX={2}>
-            {/* Orders */}
-            <OrderSelect />
-            {/* Tags panel toggle */}
-            <Box display={['none', 'none', 'block']} marginLeft={2}>
-              <Button
-                fontSize={1}
-                icon={
-                  <Box style={{transform: 'scale(0.75)'}}>
-                    <TagIcon />
-                  </Box>
-                }
-                onClick={toggleTagsPanelToggle}
-                mode={tagsPanelVisible ? 'default' : 'ghost'}
-                text={tagsPanelVisible ? 'Tags' : ''}
-              />
-            </Box>
-          </Flex>
-        </Flex>
-      </Box>
-
-      {/* Progress bar */}
-      <Progress key={pageIndex} loading={fetching} />
-    </Box>
-  )
-}
-
-export default Controls

package/src/components/DebugControls/index.tsx

@@ -1,80 +0,0 @@
-import {PlugIcon} from '@sanity/icons'
-import {Box, Flex, Switch, Text, Tooltip} from '@sanity/ui'
-import {type ChangeEvent} from 'react'
-import {useDispatch} from 'react-redux'
-
-import useKeyPress from '../../hooks/useKeyPress'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {debugActions} from '../../modules/debug'
-
-const DebugControls = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const badConnection = useTypedSelector((state) => state.debug.badConnection)
-  const debugEnabled = useTypedSelector((state) => state.debug.enabled)
-
-  // Callbacks
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const checked = e.target.checked
-
-    dispatch(debugActions.setBadConnection(checked))
-  }
-
-  const handleToggleControls = () => {
-    dispatch(debugActions.toggleEnabled())
-  }
-
-  // Close on escape key press
-  useKeyPress('alt+ctrl+shift+/', handleToggleControls)
-
-  if (!debugEnabled) {
-    return null
-  }
-
-  return (
-    <Box
-      padding={4}
-      style={{
-        bottom: 0,
-        left: 0,
-        pointerEvents: 'none',
-        position: 'fixed',
-        width: '100%',
-      }}
-    >
-      {/* Bad connection toggle */}
-      <Flex align="center">
-        <Box marginRight={3}>
-          <Text muted size={1}>
-            <PlugIcon />
-          </Text>
-        </Box>
-        <Tooltip
-          animate
-          content={
-            <Box padding={2}>
-              <Text muted size={1}>
-                {badConnection
-                  ? 'Bad connection: +3000ms & 50% chance to fail'
-                  : 'No connection throttling'}
-              </Text>
-            </Box>
-          }
-          fallbackPlacements={['right', 'left']}
-          placement="bottom"
-          portal
-        >
-          <Switch
-            checked={badConnection}
-            onChange={handleChange}
-            style={{
-              pointerEvents: 'auto',
-            }}
-          />
-        </Tooltip>
-      </Flex>
-    </Box>
-  )
-}
-
-export default DebugControls

package/src/components/Dialog/index.tsx

@@ -1,11 +0,0 @@
-import {Dialog as SanityDialog} from '@sanity/ui'
-import {type ComponentProps} from 'react'
-
-const Dialog = (props: ComponentProps<typeof SanityDialog>) => {
-  // HACK: Temporarily force fixed positioning on all @sanity/ui <Dialog /> components.
-  // The studio is currently setting absolute positioning on all root-level dialogs on the mobile breakpoint,
-  // causing unwanted scroll behaviour.
-  return <SanityDialog {...props} style={{position: 'fixed'}} />
-}
-
-export default Dialog

package/src/components/DialogAssetEdit/Details.tsx

@@ -1,181 +0,0 @@
-import {Card, Stack, Tab, TabList, TabPanel} from '@sanity/ui'
-import {useState} from 'react'
-import {type Control, type FieldErrors, type UseFormRegister} from 'react-hook-form'
-
-import type {Asset, AssetFormData, Locale, TagSelectOption} from '../../types'
-import FormFieldInputTags from '../FormFieldInputTags'
-import FormFieldInputText from '../FormFieldInputText'
-import FormFieldInputTextarea from '../FormFieldInputTextarea'
-
-type LocalizedErrors = Record<string, {message?: string} | undefined>
-
-// When locales are not configured, extract a plain string from a potentially localized field
-function toStringField(value: unknown): string | undefined {
-  if (typeof value === 'string') return value
-  if (typeof value === 'object' && value !== null) {
-    const found = Object.values(value as Record<string, string>).find((v) => v)
-    return found || undefined
-  }
-  return undefined
-}
-
-export type DetailsProps = {
-  formUpdating: boolean
-  handleCreateTag: (title: string) => void
-  control: Control<AssetFormData>
-  errors: FieldErrors<AssetFormData>
-  register: UseFormRegister<AssetFormData>
-  allTagOptions: TagSelectOption[]
-  assetTagOptions: TagSelectOption[] | null
-  currentAsset: Asset
-  creditLine?: {
-    enabled: boolean
-    excludeSources?: string | string[] | undefined
-  }
-  locales?: Locale[]
-}
-
-export default function Details({
-  formUpdating,
-  handleCreateTag,
-  control,
-  errors,
-  register,
-  allTagOptions,
-  assetTagOptions,
-  currentAsset,
-  creditLine,
-  locales,
-}: DetailsProps) {
-  const hasLocales = locales && locales.length > 0
-  const [activeLocaleTab, setActiveLocaleTab] = useState(0)
-  return (
-    <Stack space={3}>
-      {/* Tags */}
-      <FormFieldInputTags
-        control={control}
-        disabled={formUpdating}
-        error={errors?.opt?.media?.tags?.message}
-        label="Tags"
-        name="opt.media.tags"
-        onCreateTag={handleCreateTag}
-        options={allTagOptions}
-        placeholder="Select or create..."
-        value={assetTagOptions}
-      />
-      {/* Filename */}
-      <FormFieldInputText
-        {...register('originalFilename')}
-        disabled={formUpdating}
-        error={errors?.originalFilename?.message}
-        label="Filename"
-        name="originalFilename"
-        value={currentAsset?.originalFilename}
-      />
-      {/* Localized fields grouped by language */}
-      {hasLocales ? (
-        <Card marginTop={2} shadow={1} padding={3} radius={1}>
-          <Stack space={2}>
-            <TabList space={2}>
-              {locales.map((locale, idx) => (
-                <Tab
-                  key={locale.id}
-                  id={`locale-tab-${locale.id}`}
-                  aria-controls={`locale-panel-${locale.id}`}
-                  selected={activeLocaleTab === idx}
-                  onClick={() => setActiveLocaleTab(idx)}
-                  label={locale.title}
-                />
-              ))}
-            </TabList>
-            {locales.map((locale, idx) => (
-              <TabPanel
-                key={locale.id}
-                id={`locale-panel-${locale.id}`}
-                aria-labelledby={`locale-tab-${locale.id}`}
-                hidden={activeLocaleTab !== idx}
-              >
-                <Stack space={3}>
-                  <FormFieldInputText
-                    {...register(`title.${locale.id}` as const)}
-                    disabled={formUpdating}
-                    error={(errors?.title as LocalizedErrors)?.[locale.id]?.message}
-                    label="Title"
-                    name={`title.${locale.id}`}
-                  />
-                  <FormFieldInputText
-                    {...register(`altText.${locale.id}` as const)}
-                    disabled={formUpdating}
-                    error={(errors?.altText as LocalizedErrors)?.[locale.id]?.message}
-                    label="Alt Text"
-                    name={`altText.${locale.id}`}
-                  />
-                  <FormFieldInputTextarea
-                    {...register(`description.${locale.id}` as const)}
-                    disabled={formUpdating}
-                    error={(errors?.description as LocalizedErrors)?.[locale.id]?.message}
-                    label="Description"
-                    name={`description.${locale.id}`}
-                    rows={5}
-                  />
-                  {creditLine?.enabled && (
-                    <FormFieldInputText
-                      {...register(`creditLine.${locale.id}` as const)}
-                      error={(errors?.creditLine as LocalizedErrors)?.[locale.id]?.message}
-                      label="Credit"
-                      name={`creditLine.${locale.id}`}
-                      disabled={
-                        formUpdating ||
-                        creditLine?.excludeSources?.includes(currentAsset?.['source']?.name)
-                      }
-                    />
-                  )}
-                </Stack>
-              </TabPanel>
-            ))}
-          </Stack>
-        </Card>
-      ) : (
-        <>
-          <FormFieldInputText
-            {...register('title')}
-            disabled={formUpdating}
-            error={errors?.title?.message}
-            label="Title"
-            name="title"
-            value={toStringField(currentAsset?.title)}
-          />
-          <FormFieldInputText
-            {...register('altText')}
-            disabled={formUpdating}
-            error={errors?.altText?.message}
-            label="Alt Text"
-            name="altText"
-            value={toStringField(currentAsset?.altText)}
-          />
-          <FormFieldInputTextarea
-            {...register('description')}
-            disabled={formUpdating}
-            error={errors?.description?.message}
-            label="Description"
-            name="description"
-            rows={5}
-            value={toStringField(currentAsset?.description)}
-          />
-          {creditLine?.enabled && (
-            <FormFieldInputText
-              {...register('creditLine')}
-              error={errors?.creditLine?.message}
-              label="Credit"
-              name="creditLine"
-              value={toStringField(currentAsset?.creditLine)}
-              disabled={
-                formUpdating || creditLine?.excludeSources?.includes(currentAsset?.['source']?.name)
-              }
-            />
-          )}
-        </>
-      )}
-    </Stack>
-  )
-}