@sanity/sdk-react 0.0.0-alpha.20 → 0.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.0-alpha.20",
+  "version": "0.0.0-alpha.21",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -43,11 +43,11 @@
   "prettier": "@sanity/prettier-config",
   "dependencies": {
     "@sanity/logos": "^2.1.13",
-    "@sanity/message-protocol": "^0.1.0",
+    "@sanity/message-protocol": "^0.6.0",
     "@sanity/types": "^3.78.1",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.1",
-    "@sanity/sdk": "0.0.0-alpha.19"
+    "@sanity/sdk": "0.0.0-alpha.20"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",

package/src/_exports/index.ts

@@ -7,7 +7,7 @@ export {useAuthState} from '../hooks/auth/useAuthState'
 export {useAuthToken} from '../hooks/auth/useAuthToken'
 export {useCurrentUser} from '../hooks/auth/useCurrentUser'
 export {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganizationId'
-export {useHandleCallback} from '../hooks/auth/useHandleCallback'
+export {useHandleAuthCallback} from '../hooks/auth/useHandleAuthCallback'
 export {useLoginUrls} from '../hooks/auth/useLoginUrls'
 export {useLogOut} from '../hooks/auth/useLogOut'
 export {useClient} from '../hooks/client/useClient'
@@ -29,22 +29,22 @@ export {useSanityInstance} from '../hooks/context/useSanityInstance'
 export {useNavigateToStudioDocument} from '../hooks/dashboard/useNavigateToStudioDocument'
 export {useStudioWorkspacesByResourceId} from '../hooks/dashboard/useStudioWorkspacesByResourceId'
 export {useDatasets} from '../hooks/datasets/useDatasets'
-export {useApplyActions} from '../hooks/document/useApplyActions'
+export {useApplyDocumentActions} from '../hooks/document/useApplyDocumentActions'
 export {useDocument} from '../hooks/document/useDocument'
 export {useDocumentEvent} from '../hooks/document/useDocumentEvent'
+export {useDocumentPermissions} from '../hooks/document/useDocumentPermissions'
 export {useDocumentSyncStatus} from '../hooks/document/useDocumentSyncStatus'
 export {useEditDocument} from '../hooks/document/useEditDocument'
-export {usePermissions} from '../hooks/document/usePermissions'
 export {
-  type InfiniteList,
-  type InfiniteListOptions,
-  useInfiniteList,
-} from '../hooks/infiniteList/useInfiniteList'
+  type DocumentsOptions,
+  type DocumentsResponse,
+  useDocuments,
+} from '../hooks/documents/useDocuments'
 export {
-  type PaginatedList,
-  type PaginatedListOptions,
-  usePaginatedList,
-} from '../hooks/paginatedList/usePaginatedList'
+  type PaginatedDocumentsOptions,
+  type PaginatedDocumentsResponse,
+  usePaginatedDocuments,
+} from '../hooks/paginatedDocuments/usePaginatedDocuments'
 export {
   usePreview,
   type UsePreviewOptions,

package/src/components/Login/LoginLinks.test.tsx

@@ -36,8 +36,8 @@ vi.mock('../../hooks/auth/useAuthState', () => ({
   useAuthState: vi.fn(() => 'logged-out'),
 }))
 
-vi.mock('../../hooks/auth/useHandleCallback', () => ({
-  useHandleCallback: vi.fn(),
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(),
 }))
 
 describe('LoginLinks', () => {

package/src/components/Login/LoginLinks.tsx

@@ -1,7 +1,7 @@
 import {type ReactElement} from 'react'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
-import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
+import {useHandleAuthCallback} from '../../hooks/auth/useHandleAuthCallback'
 import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
 
 /**
@@ -26,7 +26,7 @@ import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
 export const LoginLinks = (): ReactElement => {
   const loginUrls = useLoginUrls()
   const authState = useAuthState()
-  useHandleCallback()
+  useHandleAuthCallback()
 
   if (authState.type === 'logging-in') {
     return <div className="sc-login-links__logging-in">Logging in...</div>

package/src/components/auth/AuthBoundary.test.tsx

@@ -13,8 +13,8 @@ vi.mock('../../hooks/auth/useAuthState', () => ({
 vi.mock('../../hooks/auth/useLoginUrls', () => ({
   useLoginUrls: vi.fn(() => [{title: 'Provider A', url: 'https://provider-a.com/auth'}]),
 }))
-vi.mock('../../hooks/auth/useHandleCallback', () => ({
-  useHandleCallback: vi.fn(() => async () => {}),
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(() => async () => {}),
 }))
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),

package/src/components/auth/LoginCallback.test.tsx

@@ -3,9 +3,9 @@ import {afterAll, beforeAll, beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {renderWithWrappers} from './authTestHelpers'
 
-// Mock `useHandleCallback`
-vi.mock('../../hooks/auth/useHandleCallback', () => ({
-  useHandleCallback: vi.fn(() => async (url: string) => {
+// Mock `useHandleAuthCallback`
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(() => async (url: string) => {
     const parsedUrl = new URL(url)
     const sid = new URLSearchParams(parsedUrl.hash.slice(1)).get('sid')
     if (sid === 'valid') {

package/src/components/auth/LoginCallback.tsx

@@ -1,6 +1,6 @@
 import {useEffect} from 'react'
 
-import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
+import {useHandleAuthCallback} from '../../hooks/auth/useHandleAuthCallback'
 import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 
 /**
@@ -12,18 +12,18 @@ import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
  * @alpha
  */
 export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {
-  const handleCallback = useHandleCallback()
+  const handleAuthCallback = useHandleAuthCallback()
 
   useEffect(() => {
     const url = new URL(location.href)
-    handleCallback(url.toString()).then((replacementLocation) => {
+    handleAuthCallback(url.toString()).then((replacementLocation) => {
       if (replacementLocation) {
         // history API with `replaceState` is used to prevent a reload but still
         // remove the short-lived token from the URL
         history.replaceState(null, '', replacementLocation)
       }
     })
-  }, [handleCallback])
+  }, [handleAuthCallback])
 
   return (
     <LoginLayout header={header} footer={footer}>

package/src/hooks/auth/useCurrentUser.tsx

@@ -28,6 +28,7 @@ type UseCurrentUser = {
 
 /**
  * @public
+ * @function
  * @TODO This should not return null — users of a custom app will always be authenticated via Core
  */
 export const useCurrentUser: UseCurrentUser = createStateSourceHook(getCurrentUserState)

package/src/hooks/auth/useHandleAuthCallback.test.tsx

@@ -0,0 +1,16 @@
+import {handleAuthCallback} from '@sanity/sdk'
+import {identity} from 'rxjs'
+import {describe, it} from 'vitest'
+
+import {createCallbackHook} from '../helpers/createCallbackHook'
+
+vi.mock('../helpers/createCallbackHook', () => ({createCallbackHook: vi.fn(identity)}))
+vi.mock('@sanity/sdk', () => ({handleAuthCallback: vi.fn()}))
+
+describe('useHandleAuthCallback', () => {
+  it('calls `createCallbackHook` with `handleAuthCallback`', async () => {
+    const {useHandleAuthCallback} = await import('./useHandleAuthCallback')
+    expect(createCallbackHook).toHaveBeenCalledWith(handleAuthCallback)
+    expect(useHandleAuthCallback).toBe(handleAuthCallback)
+  })
+})

package/src/hooks/auth/{useHandleCallback.tsx → useHandleAuthCallback.tsx}

@@ -1,4 +1,4 @@
-import {handleCallback} from '@sanity/sdk'
+import {handleAuthCallback} from '@sanity/sdk'
 
 import {createCallbackHook} from '../helpers/createCallbackHook'
 
@@ -10,7 +10,7 @@ import {createCallbackHook} from '../helpers/createCallbackHook'
  * This hook provides access to the authentication store's callback handler,
  * which processes auth redirects by extracting the session ID and fetching the
  * authentication token. If fetching the long-lived token is successful,
- * `handleCallback` will return a Promise that resolves a new location that
+ * `handleAuthCallback` will return a Promise that resolves a new location that
  * removes the short-lived token from the URL. Use this in combination with
  * `history.replaceState` or your own router's `replace` function to update the
  * current location without triggering a reload.
@@ -18,13 +18,13 @@ import {createCallbackHook} from '../helpers/createCallbackHook'
  * @example
  * ```tsx
  * function AuthCallback() {
- *   const handleCallback = useHandleCallback()
+ *   const handleAuthCallback = useHandleAuthCallback()
  *   const router = useRouter() // Example router
  *
  *   useEffect(() => {
  *     async function processCallback() {
  *       // Handle the callback and get the cleaned URL
- *       const newUrl = await handleCallback(window.location.href)
+ *       const newUrl = await handleAuthCallback(window.location.href)
  *
  *       if (newUrl) {
  *         // Replace URL without triggering navigation
@@ -33,7 +33,7 @@ import {createCallbackHook} from '../helpers/createCallbackHook'
  *     }
  *
  *     processCallback().catch(console.error)
- *   }, [handleCallback, router])
+ *   }, [handleAuthCallback, router])
  *
  *   return <div>Completing login...</div>
  * }
@@ -42,4 +42,4 @@ import {createCallbackHook} from '../helpers/createCallbackHook'
  * @returns A callback handler function that processes OAuth redirects
  * @public
  */
-export const useHandleCallback = createCallbackHook(handleCallback)
+export const useHandleAuthCallback = createCallbackHook(handleAuthCallback)

package/src/hooks/auth/useLogOut.test.tsx

@@ -7,8 +7,8 @@ import {createCallbackHook} from '../helpers/createCallbackHook'
 vi.mock('../helpers/createCallbackHook', () => ({createCallbackHook: vi.fn(identity)}))
 vi.mock('@sanity/sdk', () => ({logout: vi.fn()}))
 
-describe('useHandleCallback', () => {
-  it('calls `createCallbackHook` with `handleCallback`', async () => {
+describe('useLogOut', () => {
+  it('calls `createCallbackHook` with `logout`', async () => {
     const {useLogOut} = await import('./useLogOut')
     expect(createCallbackHook).toHaveBeenCalledWith(logout)
     expect(useLogOut).toBe(logout)

package/src/hooks/client/useClient.ts

@@ -27,6 +27,7 @@ import {createStateSourceHook} from '../helpers/createStateSourceHook'
  * ```
  *
  * @public
+ * @function
  */
 export const useClient = createStateSourceHook({
   getState: getClientState,

package/src/hooks/comlink/useManageFavorite.test.ts

@@ -19,8 +19,9 @@ describe('useManageFavorite', () => {
   let statusCallback: ((status: Status) => void) | null = null
 
   const mockDocumentHandle = {
-    _id: 'mock-id',
-    _type: 'mock-type',
+    documentId: 'mock-id',
+    documentType: 'mock-type',
+    resourceType: 'studio' as const,
   }
 
   function createMockNode() {
@@ -55,10 +56,12 @@ describe('useManageFavorite', () => {
       result.current.favorite()
     })
 
-    expect(node.post).toHaveBeenCalledWith('core/v1/events/favorite', {
+    expect(node.post).toHaveBeenCalledWith('dashboard/v1/events/favorite/mutate', {
       documentId: 'mock-id',
       documentType: 'mock-type',
       eventType: 'added',
+      resourceType: 'studio',
+      resourceId: undefined,
     })
     expect(result.current.isFavorited).toBe(true)
   })
@@ -70,10 +73,12 @@ describe('useManageFavorite', () => {
       result.current.unfavorite()
     })
 
-    expect(node.post).toHaveBeenCalledWith('core/v1/events/favorite', {
+    expect(node.post).toHaveBeenCalledWith('dashboard/v1/events/favorite/mutate', {
       documentId: 'mock-id',
       documentType: 'mock-type',
       eventType: 'removed',
+      resourceType: 'studio',
+      resourceId: undefined,
     })
     expect(result.current.isFavorited).toBe(false)
   })

package/src/hooks/comlink/useManageFavorite.ts

@@ -1,6 +1,13 @@
 import {type Status} from '@sanity/comlink'
-import {type Events, SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
-import {type DocumentHandle, type FrameMessage} from '@sanity/sdk'
+import {
+  type CanvasResource,
+  type Events,
+  type MediaResource,
+  SDK_CHANNEL_NAME,
+  SDK_NODE_NAME,
+  type StudioResource,
+} from '@sanity/message-protocol'
+import {type FrameMessage} from '@sanity/sdk'
 import {useCallback, useState} from 'react'
 
 import {useWindowConnection} from './useWindowConnection'
@@ -14,27 +21,34 @@ interface ManageFavorite {
   isConnected: boolean
 }
 
+interface UseManageFavoriteProps {
+  documentId: string
+  documentType: string
+  resourceId?: string
+  resourceType: StudioResource['type'] | MediaResource['type'] | CanvasResource['type']
+}
+
 /**
  * @beta
  *
  * ## useManageFavorite
  * This hook provides functionality to add and remove documents from favorites,
  * and tracks the current favorite status of the document.
- * @category Core UI Communication
+ * @category Dashboard Communication
  * @param documentHandle - The document handle containing document ID and type, like `{_id: '123', _type: 'book'}`
  * @returns An object containing:
  * - `favorite` - Function to add document to favorites
  * - `unfavorite` - Function to remove document from favorites
  * - `isFavorited` - Boolean indicating if document is currently favorited
- * - `isConnected` - Boolean indicating if connection to Core UI is established
+ * - `isConnected` - Boolean indicating if connection to Dashboard UI is established
  *
  * @example
  * ```tsx
  * function MyDocumentAction(props: DocumentActionProps) {
- *   const {_id, _type} = props
+ *   const {documentId, documentType} = props
  *   const {favorite, unfavorite, isFavorited, isConnected} = useManageFavorite({
- *     _id,
- *     _type
+ *     documentId,
+ *     documentType
  *   })
  *
  *   return (
@@ -47,7 +61,12 @@ interface ManageFavorite {
  * }
  * ```
  */
-export function useManageFavorite({_id, _type}: DocumentHandle): ManageFavorite {
+export function useManageFavorite({
+  documentId,
+  documentType,
+  resourceId,
+  resourceType,
+}: UseManageFavoriteProps): ManageFavorite {
   const [isFavorited, setIsFavorited] = useState(false) // should load this from a comlink fetch
   const [status, setStatus] = useState<Status>('idle')
   const {sendMessage} = useWindowConnection<Events.FavoriteMessage, FrameMessage>({
@@ -56,17 +75,27 @@ export function useManageFavorite({_id, _type}: DocumentHandle): ManageFavorite
     onStatus: setStatus,
   })
 
+  if (resourceType !== 'studio' && !resourceId) {
+    throw new Error('resourceId is required for media-library and canvas resources')
+  }
+
   const handleFavoriteAction = useCallback(
     (action: 'added' | 'removed', setFavoriteState: boolean) => {
-      if (!_id || !_type) return
+      if (!documentId || !documentType || !resourceType) return
 
       try {
         const message: Events.FavoriteMessage = {
-          type: 'core/v1/events/favorite',
+          type: 'dashboard/v1/events/favorite/mutate',
           data: {
             eventType: action,
-            documentId: _id,
-            documentType: _type,
+            documentId,
+            documentType,
+            resourceType,
+            // Resource Id should exist for media-library and canvas resources
+            resourceId: resourceId!,
+          },
+          response: {
+            success: true,
           },
         }
 
@@ -82,7 +111,7 @@ export function useManageFavorite({_id, _type}: DocumentHandle): ManageFavorite
         throw error
       }
     },
-    [_id, _type, sendMessage],
+    [documentId, documentType, resourceId, resourceType, sendMessage],
   )
 
   const favorite = useCallback(() => handleFavoriteAction('added', true), [handleFavoriteAction])

package/src/hooks/comlink/useRecordDocumentHistoryEvent.test.ts

@@ -19,8 +19,10 @@ describe('useRecordDocumentHistoryEvent', () => {
   let statusCallback: ((status: Status) => void) | null = null
 
   const mockDocumentHandle = {
-    _id: 'mock-id',
-    _type: 'mock-type',
+    documentId: 'mock-id',
+    documentType: 'mock-type',
+    resourceType: 'studio' as const,
+    resourceId: 'mock-resource-id',
   }
 
   function createMockNode() {
@@ -58,10 +60,12 @@ describe('useRecordDocumentHistoryEvent', () => {
 
     result.current.recordEvent('viewed')
 
-    expect(node.post).toHaveBeenCalledWith('core/v1/events/history', {
+    expect(node.post).toHaveBeenCalledWith('dashboard/v1/events/history', {
       eventType: 'viewed',
       documentId: 'mock-id',
       documentType: 'mock-type',
+      resourceType: 'studio',
+      resourceId: 'mock-resource-id',
     })
   })
 

package/src/hooks/comlink/useRecordDocumentHistoryEvent.ts

@@ -1,6 +1,13 @@
 import {type Status} from '@sanity/comlink'
-import {type Events, SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
-import {type DocumentHandle, type FrameMessage} from '@sanity/sdk'
+import {
+  type CanvasResource,
+  type Events,
+  type MediaResource,
+  SDK_CHANNEL_NAME,
+  SDK_NODE_NAME,
+  type StudioResource,
+} from '@sanity/message-protocol'
+import {type FrameMessage} from '@sanity/sdk'
 import {useCallback, useState} from 'react'
 
 import {useWindowConnection} from './useWindowConnection'
@@ -10,6 +17,16 @@ interface DocumentInteractionHistory {
   isConnected: boolean
 }
 
+/**
+ * @public
+ */
+interface UseRecordDocumentHistoryEventProps {
+  documentId: string
+  documentType: string
+  resourceType: StudioResource['type'] | MediaResource['type'] | CanvasResource['type']
+  resourceId?: string
+}
+
 /**
  * @public
  * Hook for managing document interaction history in Sanity Studio.
@@ -23,10 +40,12 @@ interface DocumentInteractionHistory {
  * @example
  * ```tsx
  * function MyDocumentAction(props: DocumentActionProps) {
- *   const {_id, _type} = props
+ *   const {documentId, documentType, resourceType, resourceId} = props
  *   const {recordEvent, isConnected} = useRecordDocumentHistoryEvent({
- *     _id,
- *     _type
+ *     documentId,
+ *     documentType,
+ *     resourceType,
+ *     resourceId,
  *   })
  *
  *   return (
@@ -40,9 +59,11 @@ interface DocumentInteractionHistory {
  * ```
  */
 export function useRecordDocumentHistoryEvent({
-  _id,
-  _type,
-}: DocumentHandle): DocumentInteractionHistory {
+  documentId,
+  documentType,
+  resourceType,
+  resourceId,
+}: UseRecordDocumentHistoryEventProps): DocumentInteractionHistory {
   const [status, setStatus] = useState<Status>('idle')
   const {sendMessage} = useWindowConnection<Events.HistoryMessage, FrameMessage>({
     name: SDK_NODE_NAME,
@@ -50,15 +71,21 @@ export function useRecordDocumentHistoryEvent({
     onStatus: setStatus,
   })
 
+  if (resourceType !== 'studio' && !resourceId) {
+    throw new Error('resourceId is required for media-library and canvas resources')
+  }
+
   const recordEvent = useCallback(
     (eventType: 'viewed' | 'edited' | 'created' | 'deleted') => {
       try {
         const message: Events.HistoryMessage = {
-          type: 'core/v1/events/history',
+          type: 'dashboard/v1/events/history',
           data: {
             eventType,
-            documentId: _id,
-            documentType: _type,
+            documentId,
+            documentType,
+            resourceType,
+            resourceId: resourceId!,
           },
         }
 
@@ -69,7 +96,7 @@ export function useRecordDocumentHistoryEvent({
         throw error
       }
     },
-    [_id, _type, sendMessage],
+    [documentId, documentType, resourceId, resourceType, sendMessage],
   )
 
   return {