sanity-plugin-media 4.3.6 → 5.0.0

package/src/components/ReduxProvider/index.tsx

@@ -1,96 +0,0 @@
-import {type AnyAction, configureStore, type Store} from '@reduxjs/toolkit'
-import type {SanityClient} from '@sanity/client'
-import {Component, type ReactNode} from 'react'
-import {Provider} from 'react-redux'
-import {createEpicMiddleware} from 'redux-observable'
-import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
-
-import {rootEpic, rootReducer} from '../../modules'
-import {initialState as assetsInitialState} from '../../modules/assets'
-// import {assetsActions} from '../../modules/assets'
-// import {searchActions} from '../../modules/search'
-// import {uploadsActions} from '../../modules/uploads'
-import type {RootReducerState} from '../../modules/types'
-import getDocumentAssetIds from '../../utils/getDocumentAssetIds'
-import {isSupportedAssetType} from '../../utils/isSupportedAssetType'
-
-type Props = {
-  assetType?: AssetSourceComponentProps['assetType']
-  children?: ReactNode
-  client: SanityClient
-  document?: SanityDocument
-  selectedAssets?: AssetSourceComponentProps['selectedAssets']
-}
-
-class ReduxProvider extends Component<Props> {
-  store: Store
-
-  constructor(props: Props) {
-    super(props)
-
-    // Initialize redux store + middleware
-    const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, RootReducerState>({
-      dependencies: {
-        client: props.client, // inject sanity client as a dependency to all epics
-      },
-    })
-    this.store = configureStore({
-      reducer: rootReducer,
-      middleware: (getDefaultMiddleware) =>
-        getDefaultMiddleware({
-          /*
-          serializableCheck: {
-            ignoredActions: [
-              assetsActions.deleteError.type,
-              uploadsActions.uploadRequest.type,
-              uploadsActions.uploadStart.type,
-            ]
-          },
-          */
-          // TODO: remove once we're no longer storing non-serializable data in the store
-          serializableCheck: false,
-          thunk: false,
-        }).prepend(epicMiddleware),
-      devTools: true,
-      preloadedState: {
-        assets: {
-          ...assetsInitialState,
-          assetTypes: isSupportedAssetType(props?.assetType)
-            ? [props.assetType]
-            : ['file', 'image'],
-        },
-        debug: {
-          badConnection: false,
-          enabled: false,
-        },
-        dialog: {items: []},
-        notifications: {items: []},
-        search: {facets: [], query: ''},
-        selected: {
-          assets: props.selectedAssets || [],
-          document: props.document,
-          documentAssetIds: props.document ? getDocumentAssetIds(props.document) : [],
-        },
-        tags: {
-          allIds: [],
-          byIds: {},
-          creating: false,
-          fetchCount: -1,
-          fetching: false,
-          panelVisible: true,
-        },
-        uploads: {
-          allIds: [],
-          byIds: {},
-        },
-      },
-    })
-    epicMiddleware.run(rootEpic)
-  }
-
-  override render() {
-    return <Provider store={this.store}>{this.props.children}</Provider>
-  }
-}
-
-export default ReduxProvider

package/src/components/SearchFacet/index.tsx

@@ -1,66 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Flex, Label, rem, Text, type ThemeColorSchemeKey} from '@sanity/ui'
-import {type ReactNode} from 'react'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-import {styled, css} from 'styled-components'
-
-import {searchActions} from '../../modules/search'
-import type {SearchFacetInputProps, WithId} from '../../types'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-type Props = {
-  children: ReactNode
-  facet: WithId<SearchFacetInputProps>
-}
-
-const Container = styled<typeof Box, {$scheme: ThemeColorSchemeKey}>(Box)(({$scheme, theme}) => {
-  return css`
-    background: ${getSchemeColor($scheme, 'bg')};
-    border-radius: ${rem(theme.sanity.radius[2]!)};
-  `
-})
-
-const SearchFacet = (props: Props) => {
-  const {children, facet} = props
-
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-
-  const handleClose = () => {
-    dispatch(searchActions.facetsRemoveById({facetId: facet.id}))
-  }
-
-  return (
-    <Container padding={[2, 2, 1]} $scheme={scheme}>
-      <Flex align={['flex-start', 'flex-start', 'center']} direction={['column', 'column', 'row']}>
-        {/* Title */}
-        <Box paddingBottom={[3, 3, 0]} paddingLeft={1} paddingRight={2} paddingTop={[1, 1, 0]}>
-          <Label
-            size={0}
-            style={{
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {facet.title}
-          </Label>
-        </Box>
-
-        <Flex align="center">
-          {children}
-
-          {/* Close button */}
-          <Box marginLeft={1} paddingX={2}>
-            <Text muted size={0}>
-              <CloseIcon onClick={handleClose} />
-            </Text>
-          </Box>
-        </Flex>
-      </Flex>
-    </Container>
-  )
-}
-
-export default SearchFacet

package/src/components/SearchFacetNumber/index.tsx

@@ -1,133 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import {operators} from '../../config/searchFacets'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import {searchActions} from '../../modules/search'
-import type {
-  SearchFacetInputNumberModifier,
-  SearchFacetInputNumberProps,
-  SearchFacetOperatorType,
-  WithId,
-} from '../../types'
-import SearchFacet from '../SearchFacet'
-import TextInputNumber from '../TextInputNumber'
-
-type Props = {
-  facet: WithId<SearchFacetInputNumberProps>
-}
-
-const SearchFacetNumber = ({facet}: Props) => {
-  // Redux
-  const dispatch = useDispatch()
-
-  const popoverProps = usePortalPopoverProps()
-
-  const modifiers = facet?.modifiers
-  const selectedModifier = facet?.modifier
-    ? modifiers?.find((modifier) => modifier.name === facet?.modifier)
-    : modifiers?.[0]
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
-  }
-
-  const handleModifierClick = (modifier: SearchFacetInputNumberModifier) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, modifier: modifier.name}))
-  }
-
-  const handleValueChange = (value: number) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, value}))
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet.operatorType ?? 'greaterThan'
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2}
-              text={operators[selectedOperatorType].label}
-            />
-          }
-          id="operators"
-          menu={
-            <Menu>
-              {facet.operatorTypes.map((operatorType, index) => {
-                if (operatorType) {
-                  const selected = operatorType === selectedOperatorType
-                  return (
-                    <MenuItem
-                      disabled={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* Value */}
-      <Box marginX={1} style={{maxWidth: '50px'}}>
-        <TextInputNumber
-          fontSize={1}
-          onValueChange={handleValueChange}
-          padding={2}
-          radius={2}
-          width={2}
-          value={facet?.value}
-        />
-      </Box>
-
-      {/* Modifiers */}
-      {modifiers && (
-        <MenuButton
-          button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2}
-              text={selectedModifier?.title}
-            />
-          }
-          id="modifier"
-          menu={
-            <Menu>
-              {modifiers.map((modifier) => {
-                const selected = modifier.name === facet.modifier
-                return (
-                  <MenuItem
-                    disabled={selected}
-                    fontSize={1}
-                    key={modifier.name}
-                    onClick={() => handleModifierClick(modifier)}
-                    padding={2}
-                    text={modifier.title}
-                  />
-                )
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetNumber

package/src/components/SearchFacetSelect/index.tsx

@@ -1,110 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import {operators} from '../../config/searchFacets'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import {searchActions} from '../../modules/search'
-import type {
-  SearchFacetInputSelectListItemProps,
-  SearchFacetInputSelectProps,
-  SearchFacetOperatorType,
-  WithId,
-} from '../../types'
-import SearchFacet from '../SearchFacet'
-
-type Props = {
-  facet: WithId<SearchFacetInputSelectProps>
-}
-
-const SearchFacetSelect = ({facet}: Props) => {
-  // Redux
-  const dispatch = useDispatch()
-
-  const popoverProps = usePortalPopoverProps()
-
-  const options = facet?.options
-
-  const selectedItem = options?.find((v) => v.name === facet?.value)
-
-  const handleListItemClick = (option: SearchFacetInputSelectListItemProps) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, value: option.name}))
-  }
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdate({name: facet.name, operatorType}))
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet?.operatorType ?? 'is'
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <Box marginRight={1}>
-              <Button
-                fontSize={1}
-                iconRight={SelectIcon}
-                padding={2}
-                text={operators[selectedOperatorType].label}
-              />
-            </Box>
-          }
-          id="operators"
-          menu={
-            <Menu>
-              {facet.operatorTypes.map((operatorType, index) => {
-                if (operatorType) {
-                  const selected = operatorType === selectedOperatorType
-                  return (
-                    <MenuItem
-                      disabled={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* List */}
-      <MenuButton
-        button={
-          <Button fontSize={1} iconRight={SelectIcon} padding={2} text={selectedItem?.title} />
-        }
-        id="list"
-        menu={
-          <Menu>
-            {options?.map((item) => {
-              const selected = item.name === selectedItem?.name
-              return (
-                <MenuItem
-                  disabled={selected}
-                  fontSize={1}
-                  key={item.name}
-                  onClick={() => handleListItemClick(item)}
-                  padding={2}
-                  text={item.title}
-                />
-              )
-            })}
-          </Menu>
-        }
-        popover={popoverProps}
-      />
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetSelect

package/src/components/SearchFacetString/index.tsx

@@ -1,88 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, TextInput} from '@sanity/ui'
-import {type ChangeEvent} from 'react'
-import {useDispatch} from 'react-redux'
-
-import {operators} from '../../config/searchFacets'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import {searchActions} from '../../modules/search'
-import type {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '../../types'
-import SearchFacet from '../SearchFacet'
-
-type Props = {
-  facet: WithId<SearchFacetInputStringProps>
-}
-
-const SearchFacetString = ({facet}: Props) => {
-  // Redux
-  const dispatch = useDispatch()
-
-  const popoverProps = usePortalPopoverProps()
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, operatorType}))
-  }
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    dispatch(searchActions.facetsUpdateById({id: facet.id, value: e.target.value}))
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet.operatorType
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2}
-              text={operators[selectedOperatorType].label}
-            />
-          }
-          id="operators"
-          menu={
-            <Menu>
-              {facet.operatorTypes.map((operatorType, index) => {
-                if (operatorType) {
-                  const selected = operatorType === selectedOperatorType
-                  return (
-                    <MenuItem
-                      disabled={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* Value */}
-      {!operators[selectedOperatorType].hideInput && (
-        <Box marginLeft={1} style={{maxWidth: '125px'}}>
-          <TextInput
-            fontSize={1}
-            onChange={handleChange}
-            padding={2}
-            radius={2}
-            width={2}
-            value={facet?.value}
-          />
-        </Box>
-      )}
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetString

package/src/components/SearchFacetTags/index.tsx

@@ -1,121 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-import Select from 'react-select'
-import {useColorSchemeValue} from 'sanity'
-
-import {operators} from '../../config/searchFacets'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {searchActions} from '../../modules/search'
-import {selectTags} from '../../modules/tags'
-import {reactSelectComponents, reactSelectStyles} from '../../styled/react-select/single'
-import type {
-  TagSelectOption,
-  SearchFacetInputSearchableProps,
-  SearchFacetOperatorType,
-  WithId,
-} from '../../types'
-import getTagSelectOptions from '../../utils/getTagSelectOptions'
-import SearchFacet from '../SearchFacet'
-
-type Props = {
-  facet: WithId<SearchFacetInputSearchableProps>
-}
-
-const SearchFacetTags = ({facet}: Props) => {
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const tags = useTypedSelector((state) => selectTags(state))
-  const tagsFetching = useTypedSelector((state) => state.tags.fetching)
-  const allTagOptions = getTagSelectOptions(tags)
-
-  const popoverProps = usePortalPopoverProps()
-
-  const handleChange = (option: TagSelectOption) => {
-    dispatch(
-      searchActions.facetsUpdateById({
-        id: facet.id,
-        value: option,
-      }),
-    )
-  }
-
-  const handleOperatorItemClick = (operatorType: SearchFacetOperatorType) => {
-    dispatch(
-      searchActions.facetsUpdateById({
-        id: facet.id,
-        operatorType,
-      }),
-    )
-  }
-
-  const selectedOperatorType: SearchFacetOperatorType = facet.operatorType
-
-  return (
-    <SearchFacet facet={facet}>
-      {/* Optional operators */}
-      {facet?.operatorTypes && (
-        <MenuButton
-          button={
-            <Button
-              fontSize={1}
-              iconRight={SelectIcon}
-              padding={2}
-              text={operators[selectedOperatorType].label}
-            />
-          }
-          id="operators"
-          menu={
-            <Menu>
-              {facet.operatorTypes.map((operatorType, index) => {
-                if (operatorType) {
-                  const selected = operatorType === selectedOperatorType
-                  return (
-                    <MenuItem
-                      disabled={selected}
-                      fontSize={1}
-                      key={operatorType}
-                      onClick={() => handleOperatorItemClick(operatorType)}
-                      padding={2}
-                      space={4}
-                      style={{minWidth: '150px'}}
-                      text={operators[operatorType].label}
-                    />
-                  )
-                }
-
-                return <MenuDivider key={index} />
-              })}
-            </Menu>
-          }
-          popover={popoverProps}
-        />
-      )}
-
-      {/* Value */}
-      {!operators[selectedOperatorType].hideInput && (
-        <Box marginX={1} style={{width: '160px'}}>
-          <Select
-            components={reactSelectComponents}
-            instanceId="facet-searchable"
-            isClearable
-            isDisabled={tagsFetching}
-            isSearchable
-            name="tags"
-            noOptionsMessage={() => 'No tags'}
-            onChange={(value: any) => handleChange(value as TagSelectOption)}
-            options={allTagOptions}
-            placeholder={tagsFetching ? 'Loading...' : 'Select...'}
-            styles={reactSelectStyles(scheme)}
-            value={facet?.value}
-          />
-        </Box>
-      )}
-    </SearchFacet>
-  )
-}
-
-export default SearchFacetTags

package/src/components/SearchFacets/index.tsx

@@ -1,72 +0,0 @@
-import {Box, Flex, Inline, rem, type Theme} from '@sanity/ui'
-import {styled, css} from 'styled-components'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import SearchFacetNumber from '../SearchFacetNumber'
-import SearchFacetSelect from '../SearchFacetSelect'
-import SearchFacetString from '../SearchFacetString'
-import SearchFacetTags from '../SearchFacetTags'
-
-type Props = {
-  layout?: 'inline' | 'stack'
-}
-
-const StackContainer = styled(Flex)(({theme}: {theme: Theme}) => {
-  return css`
-    > * {
-      margin-bottom: ${rem(theme.sanity.space[2]!)};
-    }
-  `
-})
-
-const SearchFacets = (props: Props) => {
-  const {layout = 'inline'} = props
-
-  // Redux
-  const searchFacets = useTypedSelector((state) => state.search.facets)
-
-  const Items = searchFacets.map((facet) => {
-    const key = facet.id
-    if (facet.type === 'number') {
-      return <SearchFacetNumber facet={facet} key={key} />
-    }
-
-    if (facet.type === 'searchable') {
-      return <SearchFacetTags facet={facet} key={key} />
-    }
-
-    if (facet.type === 'select') {
-      return <SearchFacetSelect facet={facet} key={key} />
-    }
-
-    if (facet.type === 'string') {
-      return <SearchFacetString facet={facet} key={key} />
-    }
-
-    return null
-  })
-
-  if (layout === 'inline') {
-    if (searchFacets.length === 0) {
-      return null
-    }
-
-    return (
-      <Box marginBottom={2}>
-        <Inline space={2}>{Items}</Inline>
-      </Box>
-    )
-  }
-
-  if (layout === 'stack') {
-    return (
-      <StackContainer align="flex-start" direction="column">
-        {Items}
-      </StackContainer>
-    )
-  }
-
-  throw Error('Invalid layout')
-}
-
-export default SearchFacets