@sanity/sdk-react 1.0.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -42,7 +42,7 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/client": "^7.0.0",
+    "@sanity/client": "^7.2.1",
     "@sanity/message-protocol": "^0.12.0",
     "@sanity/types": "^3.83.0",
     "@types/lodash-es": "^4.17.12",
@@ -51,11 +51,11 @@
     "react-compiler-runtime": "19.1.0-rc.1",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "1.0.0"
+    "@sanity/sdk": "2.0.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/comlink": "^3.0.2",
+    "@sanity/comlink": "^3.0.4",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
     "@testing-library/jest-dom": "^6.6.3",
@@ -74,11 +74,11 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
-    "@repo/config-test": "0.0.1",
+    "@repo/config-eslint": "0.0.0",
     "@repo/package.bundle": "3.82.0",
+    "@repo/config-test": "0.0.1",
     "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1",
-    "@repo/config-eslint": "0.0.0"
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/_exports/sdk-react.ts

@@ -27,6 +27,7 @@ export {
   type WindowMessageHandler,
 } from '../hooks/comlink/useWindowConnection'
 export {useSanityInstance} from '../hooks/context/useSanityInstance'
+export {useDashboardNavigate} from '../hooks/dashboard/useDashboardNavigate'
 export {useManageFavorite} from '../hooks/dashboard/useManageFavorite'
 export {
   type NavigateToStudioResult,

package/src/hooks/dashboard/useDashboardNavigate.test.ts

@@ -0,0 +1,44 @@
+import {type PathChangeMessage} from '@sanity/message-protocol'
+import {renderHook} from '@testing-library/react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {useDashboardNavigate} from './useDashboardNavigate'
+
+const mockOnMessage = vi.fn()
+let mockMessageHandler: ((data: PathChangeMessage['data']) => void) | undefined
+
+vi.mock('../comlink/useWindowConnection', () => {
+  return {
+    useWindowConnection: ({
+      onMessage,
+    }: {
+      onMessage: Record<string, (data: PathChangeMessage['data']) => void>
+    }) => {
+      mockMessageHandler = onMessage['dashboard/v1/history/change-path']
+      return {
+        onMessage: mockOnMessage,
+      }
+    },
+  }
+})
+
+describe('useDashboardNavigate', () => {
+  const mockNavigateFn = vi.fn()
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+    mockMessageHandler = undefined
+  })
+
+  it('calls navigate function with correct data when message is received', () => {
+    renderHook(() => useDashboardNavigate(mockNavigateFn))
+
+    const mockNavigationData = {
+      path: '/test-path',
+      type: 'push' as const,
+    }
+    mockMessageHandler?.(mockNavigationData)
+
+    expect(mockNavigateFn).toHaveBeenCalledWith(mockNavigationData)
+  })
+})

package/src/hooks/dashboard/useDashboardNavigate.ts

@@ -0,0 +1,60 @@
+import {type PathChangeMessage, SDK_CHANNEL_NAME, SDK_NODE_NAME} from '@sanity/message-protocol'
+
+import {useWindowConnection} from '../comlink/useWindowConnection'
+
+/**
+ * @public
+ *
+ * A helper hook designed to be injected into routing components for apps within the Dashboard.
+ * While the Dashboard can usually handle navigation, there are special cases when you
+ * are already within a target app, and need to navigate to another route inside of that app.
+ *
+ * For example, your user might "favorite" a document inside of your application.
+ * If they click on the Dashboard favorites item in the sidebar, and are already within your application,
+ * there needs to be some way for the dashboard to signal to your application to reroute to where that document was favorited.
+ *
+ * This hook is intended to receive those messages, and takes a function to route to the correct path.
+ *
+ * @param navigateFn - Function to handle navigation; should accept:
+ * - `path`: a string, which will be a relative path (for example, 'my-route')
+ * - `type`: 'push', 'replace', or 'pop', which will be the type of navigation to perform
+ *
+ * @example
+ * ```tsx
+ * import {useDashboardNavigate} from '@sanity/sdk-react'
+ * import {BrowserRouter, useNavigate} from 'react-router'
+ * import {Suspense} from 'react'
+ *
+ * function DashboardNavigationHandler() {
+ *   const navigate = useNavigate()
+ *   useDashboardNavigate(({path, type}) => {
+ *     navigate(path, {replace: type === 'replace'})
+ *   })
+ *   return null
+ * }
+ *
+ * // Wrap the component with Suspense since the hook may suspend
+ * function MyApp() {
+ *   return (
+ *     <BrowserRouter>
+ *       <Suspense>
+ *         <DashboardNavigationHandler />
+ *       </Suspense>
+ *     </BrowserRouter>
+ *   )
+ * }
+ * ```
+ */
+export function useDashboardNavigate(
+  navigateFn: (options: PathChangeMessage['data']) => void,
+): void {
+  useWindowConnection<PathChangeMessage, never>({
+    name: SDK_NODE_NAME,
+    connectTo: SDK_CHANNEL_NAME,
+    onMessage: {
+      'dashboard/v1/history/change-path': (data: PathChangeMessage['data']) => {
+        navigateFn(data)
+      },
+    },
+  })
+}

package/src/hooks/dashboard/useManageFavorite.ts

@@ -44,20 +44,18 @@ interface UseManageFavoriteProps extends DocumentHandle {
  * - `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 Dashboard UI is established
  *
  * @example
  * ```tsx
  * function FavoriteButton(props: DocumentActionProps) {
  *   const {documentId, documentType} = props
- *   const {favorite, unfavorite, isFavorited, isConnected} = useManageFavorite({
+ *   const {favorite, unfavorite, isFavorited} = useManageFavorite({
  *     documentId,
  *     documentType
  *   })
  *
  *   return (
  *     <Button
- *       disabled={!isConnected}
  *       onClick={() => isFavorited ? unfavorite() : favorite()}
  *       text={isFavorited ? 'Remove from favorites' : 'Add to favorites'}
  *     />

package/src/hooks/dashboard/useNavigateToStudioDocument.ts

@@ -33,7 +33,6 @@ export interface NavigateToStudioResult {
  * studios with the same projectId and dataset
  * @returns An object containing:
  * - `navigateToStudioDocument` - Function that when called will navigate to the studio document
- * - `isConnected` - Boolean indicating if connection to Dashboard is established
  *
  * @example
  * ```tsx
@@ -42,10 +41,9 @@ export interface NavigateToStudioResult {
  * import {Suspense} from 'react'
  *
  * function NavigateButton({documentHandle}: {documentHandle: DocumentHandle}) {
- *   const {navigateToStudioDocument, isConnected} = useNavigateToStudioDocument(documentHandle)
+ *   const {navigateToStudioDocument} = useNavigateToStudioDocument(documentHandle)
  *   return (
  *     <Button
- *       disabled={!isConnected}
  *       onClick={navigateToStudioDocument}
  *       text="Navigate to Studio Document"
  *     />

package/src/hooks/dashboard/useRecordDocumentHistoryEvent.ts

@@ -36,7 +36,6 @@ interface UseRecordDocumentHistoryEventProps extends DocumentHandle {
  * @param documentHandle - The document handle containing document ID and type, like `{_id: '123', _type: 'book'}`
  * @returns An object containing:
  * - `recordEvent` - Function to record document interactions
- * - `isConnected` - Boolean indicating if connection to Studio is established
  *
  * @example
  * ```tsx
@@ -46,7 +45,7 @@ interface UseRecordDocumentHistoryEventProps extends DocumentHandle {
  *
  * function RecordEventButton(props: DocumentActionProps) {
  *   const {documentId, documentType, resourceType, resourceId} = props
- *   const {recordEvent, isConnected} = useRecordDocumentHistoryEvent({
+ *   const {recordEvent} = useRecordDocumentHistoryEvent({
  *     documentId,
  *     documentType,
  *     resourceType,
@@ -54,7 +53,6 @@ interface UseRecordDocumentHistoryEventProps extends DocumentHandle {
  *   })
  *   return (
  *     <Button
- *       disabled={!isConnected}
  *       onClick={() => recordEvent('viewed')}
  *       text="Viewed"
  *     />