sanity-plugin-media 4.3.6 → 5.0.0

package/src/styled/react-select/creatable.tsx

@@ -1,184 +0,0 @@
-import {AddIcon, ChevronDownIcon, CloseIcon} from '@sanity/icons'
-import {Box, Card, Flex, rem, studioTheme, Text, type ThemeColorSchemeKey} from '@sanity/ui'
-import {components, type StylesConfig} from 'react-select'
-import {Virtuoso} from 'react-virtuoso'
-
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-const {radius: themeRadius, space: themeSpace} = studioTheme
-
-export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
-  return {
-    control: (styles, {isFocused}) => {
-      let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
-      if (isFocused) {
-        boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputEnabledBorder')},
-        0 0 0 1px var(--card-bg-color),
-        0 0 0 3px var(--card-focus-ring-color) !important`
-      }
-
-      return {
-        ...styles,
-        'backgroundColor': 'var(--card-bg-color)',
-        'color': 'inherit',
-        'border': 'none',
-        'borderRadius': themeRadius[1],
-        boxShadow,
-        'margin': 0,
-        'minHeight': '35px',
-        'outline': 'none',
-        'padding': rem(themeSpace[1]!),
-        'transition': 'none',
-        '&:hover': {
-          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`,
-        },
-      }
-    },
-    indicatorsContainer: (styles, {isDisabled}) => ({
-      ...styles,
-      opacity: isDisabled ? 0.25 : 1,
-    }),
-    input: (styles) => ({
-      ...styles,
-      color: 'var(--card-fg-color)',
-      fontFamily: studioTheme.fonts.text.family,
-      marginLeft: rem(themeSpace[2]!),
-    }),
-    menuList: (styles) => ({
-      ...styles,
-    }),
-    multiValue: (styles, {isDisabled}) => ({
-      ...styles,
-      backgroundColor: getSchemeColor(scheme, 'mutedHoveredBg'),
-      borderRadius: themeRadius[2],
-      opacity: isDisabled ? 0.5 : 1,
-    }),
-    multiValueLabel: () => ({
-      color: getSchemeColor(scheme, 'mutedHoveredFg'),
-      fontSize: 'inherit',
-      padding: 0,
-    }),
-    multiValueRemove: (styles) => ({
-      ...styles,
-      'borderTopLeftRadius': 0,
-      'borderBottomLeftRadius': 0,
-      'svg': {color: getSchemeColor(scheme, 'mutedHoveredFg')},
-      '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'mutedSelectedBg'),
-      },
-    }),
-    noOptionsMessage: (styles) => ({
-      ...styles,
-      fontFamily: studioTheme.fonts.text.family,
-      lineHeight: '1em',
-    }),
-    option: (styles, {isFocused}) => ({
-      ...styles,
-      'backgroundColor': isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
-      'borderRadius': themeRadius[2],
-      'color': isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
-      'padding': `${rem(themeSpace[1]!)} ${rem(themeSpace[2]!)}`,
-      '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'spotBlue'),
-        color: getSchemeColor(scheme, 'bg'),
-      },
-    }),
-    placeholder: (styles) => ({
-      ...styles,
-      marginLeft: rem(themeSpace[2]!),
-    }),
-    valueContainer: (styles) => ({
-      ...styles,
-      margin: 0,
-      padding: 0,
-    }),
-  }
-}
-
-const DropdownIndicator = (props: any) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <Box paddingX={2}>
-        <Text size={1}>
-          <ChevronDownIcon />
-        </Text>
-      </Box>
-    </components.DropdownIndicator>
-  )
-}
-
-const Menu = (props: any) => {
-  return (
-    <components.Menu {...props}>
-      <Card radius={1} shadow={2}>
-        {props.children}
-      </Card>
-    </components.Menu>
-  )
-}
-
-const MenuList = (props: any) => {
-  const {children} = props
-
-  const MAX_ROWS = 5
-  const OPTION_HEIGHT = 37
-
-  if (Array.isArray(children)) {
-    const height =
-      children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT
-
-    return (
-      <Virtuoso
-        className="media__custom-scrollbar"
-        itemContent={(index) => {
-          const item = children[index]
-          return <Option {...item.props} />
-        }}
-        style={{height}}
-        totalCount={children.length}
-      />
-    )
-  }
-  return <components.MenuList {...props}>{children}</components.MenuList>
-}
-
-const MultiValueLabel = (props: any) => {
-  return (
-    <Box padding={2} paddingRight={1}>
-      <Text size={1} weight="medium">
-        <components.MultiValueLabel {...props} />
-      </Text>
-    </Box>
-  )
-}
-
-const MultiValueRemove = (props: any) => {
-  return (
-    <components.MultiValueRemove {...props}>
-      <CloseIcon color="#1f2123" />
-    </components.MultiValueRemove>
-  )
-}
-
-const Option = (props: any) => {
-  return (
-    <Box paddingX={1} paddingY={1}>
-      <components.Option {...props}>
-        <Flex align="center">
-          {props.data.__isNew__ && <AddIcon style={{marginRight: '3px'}} />}
-          {props.children}
-        </Flex>
-      </components.Option>
-    </Box>
-  )
-}
-
-export const reactSelectComponents = {
-  DropdownIndicator,
-  IndicatorSeparator: null,
-  Menu,
-  MenuList,
-  MultiValueLabel,
-  MultiValueRemove,
-  Option,
-}

package/src/styled/react-select/single.tsx

@@ -1,184 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Card, rem, studioTheme, Text, type ThemeColorSchemeKey} from '@sanity/ui'
-import {components, type StylesConfig} from 'react-select'
-import {Virtuoso} from 'react-virtuoso'
-
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-const {
-  fonts: {
-    text: {sizes: themeTextSizes},
-  },
-  radius: themeRadius,
-  space: themeSpace,
-} = studioTheme
-
-export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
-  return {
-    control: (styles, {isDisabled, isFocused}) => {
-      let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
-      if (isFocused) {
-        boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputEnabledBorder')},
-        0 0 0 1px ${getSchemeColor(scheme, 'bg2')},
-        0 0 0 3px var(--card-focus-ring-color) !important`
-      }
-
-      return {
-        ...styles,
-        'backgroundColor': 'var(--card-bg-color)',
-        'color': 'inherit',
-        'border': 'none',
-        'borderRadius': themeRadius[2],
-        boxShadow,
-        'fontSize': themeTextSizes[1]!.fontSize,
-        'minHeight': '25px',
-        'opacity': isDisabled ? 0.5 : 'inherit',
-        'outline': 'none',
-        'transition': 'none',
-        '&:hover': {
-          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`,
-        },
-      }
-    },
-    input: (styles) => ({
-      ...styles,
-      color: 'var(--card-fg-color)',
-      fontFamily: studioTheme.fonts.text.family,
-      fontSize: themeTextSizes[1]!.fontSize,
-      marginLeft: rem(themeSpace[2]!),
-    }),
-    menuList: (styles) => ({
-      ...styles,
-      padding: 0,
-    }),
-    noOptionsMessage: (styles) => ({
-      ...styles,
-      fontFamily: studioTheme.fonts.text.family,
-      fontSize: themeTextSizes[1]!.fontSize,
-      lineHeight: '1em',
-    }),
-    option: (styles, {isFocused}) => ({
-      ...styles,
-      'backgroundColor': isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
-      'borderRadius': themeRadius[2],
-      'color': isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
-      'fontSize': themeTextSizes[1]!.fontSize,
-      'lineHeight': '1em',
-      'margin': 0,
-      'padding': rem(themeSpace[1]!),
-      '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'spotBlue'),
-        color: getSchemeColor(scheme, 'bg'),
-      },
-    }),
-    placeholder: (styles) => ({
-      ...styles,
-      fontSize: themeTextSizes[1]!.fontSize,
-      marginLeft: rem(themeSpace[2]!),
-      paddingLeft: 0,
-    }),
-    singleValue: (styles) => ({
-      ...styles,
-      alignItems: 'center',
-      display: 'inline-flex',
-      height: '100%',
-      marginLeft: rem(themeSpace[2]!),
-    }),
-    valueContainer: (styles) => ({
-      ...styles,
-      margin: 0,
-      padding: 0,
-    }),
-  }
-}
-
-const ClearIndicator = (props: any) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <Box
-        paddingRight={1}
-        style={{
-          transform: 'scale(0.85)',
-        }}
-      >
-        <Text muted size={0}>
-          <CloseIcon />
-        </Text>
-      </Box>
-    </components.ClearIndicator>
-  )
-}
-
-const Menu = (props: any) => {
-  return (
-    <components.Menu {...props}>
-      <Card radius={1} shadow={2}>
-        {props.children}
-      </Card>
-    </components.Menu>
-  )
-}
-
-const MenuList = (props: any) => {
-  const {children} = props
-
-  const MAX_ROWS = 5
-  const OPTION_HEIGHT = 33
-
-  if (Array.isArray(children)) {
-    const height =
-      children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT
-
-    return (
-      <Virtuoso
-        className="media__custom-scrollbar"
-        itemContent={(index) => {
-          const item = children[index]
-          return <Option {...item.props} />
-        }}
-        style={{height}}
-        totalCount={children.length}
-      />
-    )
-  }
-  return <components.MenuList {...props}>{children}</components.MenuList>
-}
-
-const NoOptionsMessage = (props: any) => {
-  return <components.NoOptionsMessage {...props}>{props.children}</components.NoOptionsMessage>
-}
-
-const Option = (props: any) => {
-  return (
-    <Box padding={1}>
-      <components.Option {...props}>
-        <Box paddingY={1}>
-          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis">
-            {props.children}
-          </Text>
-        </Box>
-      </components.Option>
-    </Box>
-  )
-}
-
-const SingleValue = (props: any) => {
-  return (
-    <components.SingleValue {...props}>
-      <Text size={1} textOverflow="ellipsis">
-        {props.children}
-      </Text>
-    </components.SingleValue>
-  )
-}
-
-export const reactSelectComponents = {
-  ClearIndicator,
-  DropdownIndicator: null,
-  IndicatorSeparator: null,
-  Menu,
-  MenuList,
-  NoOptionsMessage,
-  Option,
-  SingleValue,
-}

package/src/types/index.ts

@@ -1,346 +0,0 @@
-import type {Action} from '@reduxjs/toolkit'
-import type {
-  SanityAssetDocument,
-  SanityClient,
-  SanityDocument,
-  SanityImageAssetDocument,
-} from '@sanity/client'
-import type {ComponentType, JSX} from 'react'
-import type {Epic} from 'redux-observable'
-import * as z from 'zod'
-
-import type {DetailsProps} from '../components/DialogAssetEdit/Details'
-import {getAssetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
-import type {RootReducerState} from '../modules/types'
-
-export type MediaTagsOptions = {
-  mediaTags?: string[]
-}
-
-export type MediaToolOptions = {
-  maximumUploadSize?: number
-  createTagsOnUpload?: boolean
-  components?: {
-    details?: ComponentType<
-      DetailsProps & {renderDefaultDetails: (props: DetailsProps) => JSX.Element}
-    >
-  }
-  creditLine?: {
-    enabled: boolean
-    excludeSources?: string | string[]
-  }
-  directUploads?: boolean
-  /**
-   * Optional locales following Sanity recommended scheme: [{ id, title }]
-   * https://www.sanity.io/docs/studio/localization#k4da239411955
-   */
-  locales?: Locale[]
-}
-
-export type Locale = {
-  title: string
-  id: string
-  [key: string]: unknown
-}
-
-type LocalizedString = string | Record<string, string>
-
-type CustomFields = {
-  altText?: LocalizedString
-  description?: LocalizedString
-  opt?: {
-    media?: {
-      tags?: SanityReference[]
-    }
-  }
-  title?: LocalizedString
-}
-
-type SearchFacetInputCommon = {
-  assetTypes: AssetType[]
-  name: string
-  operatorType: SearchFacetOperatorType
-  operatorTypes?: (SearchFacetOperatorType | null)[]
-  selectOnly?: boolean
-  title: string
-}
-
-export type Asset = FileAsset | ImageAsset
-
-export type AssetFormData = z.infer<ReturnType<typeof getAssetFormSchema>>
-
-export type AssetItem = {
-  _type: 'asset'
-  asset: Asset
-  error?: string
-  picked: boolean
-  updating: boolean
-}
-
-export type AssetType = 'file' | 'image'
-
-export type Block = {
-  _type: string
-  _key: string
-  children: Span[]
-  markDefs: MarkDef[]
-}
-
-export type BrowserView = 'grid' | 'table'
-
-// TODO: rename
-export type CardAssetData = {
-  id: string
-  type: 'asset'
-}
-
-export type CardUploadData = {
-  id: string
-  type: 'upload'
-}
-
-export type Dialog =
-  | DialogAssetEditProps
-  | DialogConfirmProps
-  | DialogSearchFacetsProps
-  | DialogTagCreateProps
-  | DialogTagEditProps
-  | DialogTagsProps
-
-export type DialogAssetEditProps = {
-  assetId?: string
-  closeDialogId?: string
-  id: string
-  lastCreatedTag?: {
-    label: string
-    value: string
-  }
-  lastRemovedTagIds?: string[]
-  type: 'assetEdit'
-}
-
-export type DialogConfirmProps = {
-  closeDialogId?: string
-  confirmCallbackAction: Action // TODO: reconsider
-  confirmText: string
-  description?: string
-  headerTitle: string
-  id: string
-  title: string
-  tone: 'critical' | 'primary'
-  type: 'confirm'
-}
-
-export type DialogSearchFacetsProps = {
-  closeDialogId?: string
-  id: string
-  type: 'searchFacets'
-}
-
-export type DialogTagsProps = {
-  closeDialogId?: string
-  id: string
-  type: 'tags'
-}
-
-export type DialogTagCreateProps = {
-  closeDialogId?: string
-  id: string
-  type: 'tagCreate'
-}
-
-export type DialogTagEditProps = {
-  closeDialogId?: string
-  id: string
-  tagId?: string
-  type: 'tagEdit'
-}
-
-export type HttpError = {
-  message: string
-  statusCode: number
-}
-
-export type FileAsset = SanityAssetDocument &
-  CustomFields & {
-    _type: 'sanity.fileAsset'
-  }
-
-export type ImageAsset = SanityImageAssetDocument &
-  CustomFields & {
-    _type: 'sanity.imageAsset'
-    creditLine?: LocalizedString
-  }
-
-export type MarkDef = {_key: string; _type: string}
-
-export type MyEpic = Epic<
-  Action,
-  Action,
-  RootReducerState,
-  {
-    client: SanityClient
-  }
->
-
-export type Order = {
-  direction: OrderDirection
-  field: string
-}
-
-export type OrderDirection = 'asc' | 'desc'
-
-export type SanityReference = {
-  _ref: string
-  _type: 'reference'
-  _weak?: boolean
-}
-
-export type SearchFacetInputProps =
-  | SearchFacetInputNumberProps
-  | SearchFacetInputSearchableProps
-  | SearchFacetInputSelectProps
-  | SearchFacetInputStringProps
-
-export type SearchFacetDivider = {
-  type: 'divider'
-}
-
-export type SearchFacetGroup = {
-  facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[]
-  title: string
-  type: 'group'
-}
-
-export type SearchFacetInputNumberModifier = {
-  fieldModifier?: (fieldName: string) => string
-  name: string
-  title: string
-}
-
-export type SearchFacetInputNumberProps = SearchFacetInputCommon & {
-  field: string
-  modifier?: string
-  modifiers?: SearchFacetInputNumberModifier[]
-  type: 'number'
-  value?: number
-}
-
-export type SearchFacetInputSearchableProps = SearchFacetInputCommon & {
-  field: string
-  name: string
-  options?: SearchFacetInputSelectListItemProps[]
-  type: 'searchable'
-  value?: TagSelectOption
-}
-
-export type SearchFacetInputSelectProps = SearchFacetInputCommon & {
-  field?: string
-  options: SearchFacetInputSelectListItemProps[]
-  type: 'select'
-  value: string
-}
-
-export type SearchFacetInputSelectListItemProps = {
-  name: string
-  title: string
-  value: string
-}
-
-export type SearchFacetInputStringProps = SearchFacetInputCommon & {
-  field: string
-  modifier?: string
-  type: 'string'
-  value?: string
-}
-
-export type SearchFacetName =
-  | 'altText'
-  | 'creditLine'
-  | 'description'
-  | 'fileName'
-  | 'height'
-  | 'inCurrentDocument'
-  | 'inUse'
-  | 'isOpaque'
-  | 'orientation'
-  | 'size'
-  | 'tag'
-  | 'title'
-  | 'type'
-  | 'width'
-
-export type SearchFacetOperatorType =
-  | 'doesNotInclude'
-  | 'doesNotReference'
-  | 'empty'
-  | 'equalTo'
-  | 'greaterThan'
-  | 'greaterThanOrEqualTo'
-  | 'includes'
-  | 'is'
-  | 'isNot'
-  | 'lessThan'
-  | 'lessThanOrEqualTo'
-  | 'notEmpty'
-  | 'references'
-
-export type SearchFacetOperators = Record<
-  SearchFacetOperatorType,
-  {
-    fn: (value: number | string | undefined, field?: string) => string | undefined
-    hideInput?: boolean
-    label: string
-  }
->
-
-export type SanityUploadProgressEvent = {
-  lengthComputable: boolean
-  loaded: number
-  percent: number
-  stage: 'download' | 'upload'
-  total: number
-  type: 'progress'
-}
-
-export type Span = {
-  _key: string
-  text: string
-  marks: string[]
-}
-
-export type Tag = SanityDocument & {
-  name: {
-    _type: 'slug'
-    current: string
-  }
-}
-
-export type TagActions = 'applyAll' | 'delete' | 'edit' | 'removeAll' | 'search'
-
-export type TagFormData = z.infer<typeof tagFormSchema>
-
-export type TagItem = {
-  _type: 'tag'
-  tag: Tag
-  error?: HttpError
-  picked: boolean
-  updating: boolean
-}
-
-export type TagSelectOption = z.infer<typeof tagOptionSchema>
-
-export type UploadItem = {
-  _type: 'upload'
-  assetType: AssetType
-  hash: string
-  name: string
-  objectUrl?: string
-  percent?: number
-  size: number
-  status: 'complete' | 'queued' | 'uploading'
-}
-
-export type WithId<T extends SearchFacetInputProps> = T & {
-  id: string
-}

package/src/types/sanity-ui.d.ts

@@ -1,5 +0,0 @@
-import {type Theme} from '@sanity/ui'
-
-declare module 'styled-components' {
-  interface DefaultTheme extends Theme {}
-}