fix: extract blurhash on new uploads, move @sanity/client and rxjs to…

… peer deps

.d.ts

@@ -1,3 +1,4 @@
 declare module 'part:@sanity/*'
 declare module 'part:sanity-plugin-media/*'
 declare module 'react-file-icon'
+declare module 'theme-ui'

.husky/commit-msg

@@ -1,8 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-<<<<<<< HEAD
-npx --no -- commitlint --edit "$1"
-=======
-npx --no -- commitlint --edit ""
->>>>>>> 890df56 (build: add lint-staged, bump husky + commitlint deps)
+npx --no -- commitlint --edit ""

package.json

@@ -40,7 +40,6 @@
   "dependencies": {
     "@hookform/resolvers": "2.0.0-beta.3",
     "@reduxjs/toolkit": "^1.8.1",
-    "@sanity/client": "2.16.0",
     "@tanem/react-nprogress": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
@@ -57,17 +56,17 @@
     "react-virtuoso": "^2.11.0",
     "redux": "^4.0.5",
     "redux-observable": "^1.2.0",
-    "rxjs": "6.6.3",
     "theme-ui": "0.3.5",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@commitlint/cli": "16.1.0",
     "@commitlint/config-conventional": "15.0.0",
     "@sanity/base": "2.1.3",
+    "@sanity/client": "^3.3.0",
     "@sanity/color": "^2.1.8",
     "@sanity/icons": "^1.2.5",
-    "@sanity/types": "^2.28.0",
+    "@sanity/types": "2.29.5",
     "@sanity/ui": "^0.37.5",
     "@types/is-hotkey": "0.1.2",
     "@types/pluralize": "0.0.29",
@@ -77,7 +76,6 @@
     "@types/react-redux": "7.1.15",
     "@types/react-select": "3.1.2",
     "@types/styled-components": "5.1.7",
-    "@types/theme-ui": "0.3.7",
     "@types/yup": "0.29.11",
     "@typescript-eslint/eslint-plugin": "5.12.0",
     "@typescript-eslint/parser": "5.12.0",
@@ -93,18 +91,21 @@
     "prettier": "2.2.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "rxjs": "^6.5.3",
     "standard-version": "9.1.0",
     "styled-components": "^5.3.3",
     "typescript": "4.1.3"
   },
   "peerDependencies": {
     "@sanity/base": ">= 2.0.2",
+    "@sanity/client": "^3.3.0",
     "@sanity/color": "^2.1.8",
     "@sanity/icons": "^1.2.5",
     "@sanity/types": "^2.28.0",
     "@sanity/ui": "^0.37.5",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
+    "rxjs": "^6.5.3",
     "styled-components": "^5.3.3"
   },
   "config": {

src/app.tsx

@@ -7,7 +7,7 @@ import {
   ThemeProvider,
   ToastProvider
 } from '@sanity/ui'
-import {AssetSourceComponentProps} from '@types'
+import {AssetSourceComponentProps} from '@sanity/types'
 import React, {FC, forwardRef, MouseEvent, Ref} from 'react'
 import {ThemeProvider as LegacyThemeProvider} from 'theme-ui'
 import Browser from './components/Browser'
@@ -43,11 +43,7 @@ const AssetBrowser: FC<Props> = forwardRef((props: Props, ref: Ref<HTMLDivElemen
               <AssetBrowserDispatchProvider onSelect={onSelect}>
                 <GlobalStyle />
 
-                {!onClose ? (
-                  <Flex direction="column" ref={ref}>
-                    <Browser />
-                  </Flex>
-                ) : (
+                {onClose ? (
                   <Portal>
                     <Box
                       onDragEnter={handleStopPropagation}
@@ -69,6 +65,10 @@ const AssetBrowser: FC<Props> = forwardRef((props: Props, ref: Ref<HTMLDivElemen
                       <Browser onClose={onClose} />
                     </Box>
                   </Portal>
+                ) : (
+                  <Flex direction="column" ref={ref}>
+                    <Browser />
+                  </Flex>
                 )}
               </AssetBrowserDispatchProvider>
             </ToastProvider>

src/components/CardAsset/index.tsx

@@ -100,12 +100,10 @@ const CardAsset = (props: Props) => {
     e.stopPropagation()
 
     if (onSelect) {
-      onSelect([
-        {
-          kind: 'assetDocumentId',
-          value: asset._id
-        }
-      ])
+      onSelect({
+        kind: 'assetDocumentId',
+        value: asset._id
+      })
     } else if (shiftPressed.current) {
       if (picked) {
         dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))

src/components/ReduxProvider/index.tsx

@@ -1,6 +1,6 @@
 import {AnyAction, configureStore, Store} from '@reduxjs/toolkit'
-import {AssetSourceComponentProps} from '@types'
-import React, {Component, ReactNode} from 'react'
+import {AssetSourceComponentProps} from '@sanity/types'
+import React, {Component} from 'react'
 import {Provider} from 'react-redux'
 import {createEpicMiddleware} from 'redux-observable'
 import {rootEpic, rootReducer} from '../../modules'
@@ -54,7 +54,8 @@ class ReduxProvider extends Component<Props> {
     epicMiddleware.run(rootEpic)
   }
 
-  render(): ReactNode {
+  render() {
+    // @ts-ignore
     return <Provider store={this.store}>{this.props.children}</Provider>
   }
 }

src/components/TableRowAsset/index.tsx

@@ -99,12 +99,10 @@ const TableRowAsset = (props: Props) => {
     e.stopPropagation()
 
     if (onSelect) {
-      onSelect([
-        {
-          kind: 'assetDocumentId',
-          value: asset._id
-        }
-      ])
+      onSelect({
+        kind: 'assetDocumentId',
+        value: asset._id
+      })
     } else if (shiftPressed.current) {
       if (picked) {
         dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))

src/contexts/AssetSourceDispatchContext.tsx

@@ -2,12 +2,12 @@ import React, {ReactNode, createContext, useContext} from 'react'
 import type {AssetFromSource} from '@sanity/types'
 
 type ContextProps = {
-  onSelect?: (assets: AssetFromSource[]) => void
+  onSelect?: (assetFromSource: AssetFromSource) => void
 }
 
 type Props = {
   children: ReactNode
-  onSelect?: (assets: AssetFromSource[]) => void
+  onSelect?: (assetFromSource: AssetFromSource) => void
 }
 
 const AssetSourceDispatchContext = createContext<ContextProps | undefined>(undefined)

src/types/index.ts

@@ -1,6 +1,5 @@
 import {AnyAction} from '@reduxjs/toolkit'
 import type {SanityAssetDocument, SanityDocument, SanityImageAssetDocument} from '@sanity/client'
-import type {AssetFromSource} from '@sanity/types'
 
 type CustomFields = {
   altText?: string
@@ -34,17 +33,6 @@ export type AssetItem = {
 
 export type AssetType = 'file' | 'image'
 
-// TODO: use correct type from @sanity/types once it uses the correct signature for `onSelect`
-export type AssetSourceComponentProps = {
-  assetType?: 'file' | 'image'
-  document: SanityDocument
-  dialogHeaderTitle?: string
-  selectedAssets: Asset[]
-  selectionType: 'single' | 'multiple'
-  onClose: () => void
-  onSelect: (assets: AssetFromSource[]) => void
-}
-
 export type Block = {
   _type: string
   _key: string

src/utils/uploadSanityAsset.ts

@@ -2,21 +2,13 @@
 // https://github.com/sanity-io/sanity/blob/ccb777e115a8cdf20d81a9a2bc9d8c228568faff/packages/%40sanity/form-builder/src/sanity/inputs/client-adapters/assets.ts
 
 import type {SanityAssetDocument, SanityImageAssetDocument} from '@sanity/client'
-import {
-  HttpError,
-  SanityUploadCompleteEvent,
-  SanityUploadProgressEvent,
-  SanityUploadResponseEvent
-} from '@types'
+import {HttpError} from '@types'
 import {Observable, of, throwError} from 'rxjs'
 import {map, mergeMap} from 'rxjs/operators'
 import {client} from '../client'
 import {withMaxConcurrency} from './withMaxConcurrency'
 
-const fetchExisting$ = (
-  type: string,
-  hash: string
-): Observable<SanityAssetDocument | SanityImageAssetDocument | null> => {
+const fetchExisting$ = (type: string, hash: string) => {
   return client.observable.fetch('*[_type == $documentType && sha1hash == $hash][0]', {
     documentType: type,
     hash
@@ -56,16 +48,11 @@ export const hashFile$ = (file: File): Observable<string | null> => {
   )
 }
 
-const uploadSanityAsset$ = (
-  assetType: 'file' | 'image',
-  file: File,
-  hash: string
-): Observable<
-  SanityUploadCompleteEvent | SanityUploadProgressEvent | SanityUploadResponseEvent | null
-> => {
+const uploadSanityAsset$ = (assetType: 'file' | 'image', file: File, hash: string) => {
   return of(null).pipe(
     // NOTE: the sanity api will still dedupe unique files, but this saves us from uploading the asset file entirely
     mergeMap(() => fetchExisting$(`sanity.${assetType}Asset`, hash)),
+    // Cancel if the asset already exists
     mergeMap((existingAsset: SanityAssetDocument | SanityImageAssetDocument | null) => {
       if (existingAsset) {
         return throwError({
@@ -80,23 +67,21 @@ const uploadSanityAsset$ = (
       // Begin upload if no existing asset found
       return client.observable.assets
         .upload(assetType, file, {
-          extract: ['exif', 'location', 'lqip', 'palette'],
+          extract: ['blurhash', 'exif', 'location', 'lqip', 'palette'],
           preserveFilename: true
         })
         .pipe(
           map(event =>
             event.type === 'response'
               ? {
                   // rewrite to a 'complete' event
-                  type: 'complete',
+                  asset: event.body.document,
                   id: event.body.document._id,
-                  asset: event.body.document
+                  type: 'complete'
                 }
               : event
           )
-        ) as Observable<
-        SanityUploadCompleteEvent | SanityUploadProgressEvent | SanityUploadResponseEvent
-      >
+        )
     })
   )
 }