@sanity/sdk-react 0.0.0-alpha.3 → 0.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.0-alpha.3",
+  "version": "0.0.0-alpha.30",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -30,31 +30,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./components": {
-      "source": "./src/_exports/components.ts",
-      "import": "./dist/components.js",
-      "default": "./dist/components.js"
-    },
-    "./hooks": {
-      "source": "./src/_exports/hooks.ts",
-      "import": "./dist/hooks.js",
-      "default": "./dist/hooks.js"
-    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "components": [
-        "./dist/components.d.ts"
-      ],
-      "hooks": [
-        "./dist/hooks.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -62,37 +42,43 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@paramour/css": "1.0.0-rc.2",
-    "@sanity/icons": "^3.5.2",
-    "@sanity/logos": "^2.1.13",
-    "@sanity/ui": "^2.8.19",
-    "inter-ui": "^4.1.0",
-    "react-error-boundary": "^4.1.2",
-    "rollup-plugin-import-css": "^3.5.7",
-    "rxjs": "^7.8.1",
-    "@sanity/sdk": "0.0.0-alpha.3"
+    "@sanity/client": "^7.0.0",
+    "@sanity/message-protocol": "^0.8.0",
+    "@sanity/types": "^3.83.0",
+    "@types/lodash-es": "^4.17.12",
+    "groq": "3.86.2-experimental.0",
+    "lodash-es": "^4.17.21",
+    "react-compiler-runtime": "19.0.0-beta-ebf51a3-20250411",
+    "react-error-boundary": "^5.0.0",
+    "rxjs": "^7.8.2",
+    "@sanity/sdk": "0.0.0-alpha.30"
   },
   "devDependencies": {
-    "@sanity/client": "^6.24.1",
-    "@sanity/pkg-utils": "^6.12.2",
+    "@sanity/browserslist-config": "^1.0.5",
+    "@sanity/comlink": "^3.0.2",
+    "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@storybook/react": "^8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@types/react": "^19.0.3",
-    "@types/react-dom": "^19.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "2.1.8",
-    "eslint": "^9.17.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/coverage-v8": "3.1.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "eslint": "^9.22.0",
     "jsdom": "^25.0.1",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.8",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.4",
+    "vitest": "^3.1.2",
     "@repo/config-eslint": "0.0.0",
-    "@repo/package.config": "0.0.1"
+    "@repo/config-test": "0.0.1",
+    "@repo/package.bundle": "3.82.0",
+    "@repo/package.config": "0.0.1",
+    "@repo/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -102,16 +88,16 @@
     "node": ">=20.0.0"
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "scripts": {
     "build": "pkg build --strict --clean --check",
+    "build:bundle": "vite build --configLoader runner --config package.bundle.ts",
     "clean": "rimraf dist",
     "dev": "pkg watch",
-    "docs": "typedoc --out docs --tsconfig ../../tsconfig.tsdoc.json",
+    "docs": "typedoc --json docs/typedoc.json --tsconfig ./tsconfig.dist.json",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "paramour": "npx paramour --config=./src/css/css.config.js --output=./src/css/paramour.css",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",

package/src/_exports/index.ts

@@ -1,10 +1,2 @@
-/**
- * An example function that will be removed.
- * @public
- */
-export function main(): void {
-  //
-}
-
-// export * from './components'
-// export * from './hooks'
+export * from './sdk-react.ts'
+export * from '@sanity/sdk'

package/src/_exports/sdk-react.ts

@@ -0,0 +1,73 @@
+/**
+ * @module exports
+ */
+export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
+export {SanityApp, type SanityAppProps} from '../components/SanityApp'
+export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
+export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
+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 {useHandleAuthCallback} from '../hooks/auth/useHandleAuthCallback'
+export {useLoginUrl} from '../hooks/auth/useLoginUrl'
+export {useLogOut} from '../hooks/auth/useLogOut'
+export {useVerifyOrgProjects} from '../hooks/auth/useVerifyOrgProjects'
+export {useClient} from '../hooks/client/useClient'
+export {
+  type FrameConnection,
+  type FrameMessageHandler as MessageHandler,
+  useFrameConnection,
+  type UseFrameConnectionOptions,
+} from '../hooks/comlink/useFrameConnection'
+export {useManageFavorite} from '../hooks/comlink/useManageFavorite'
+export {useRecordDocumentHistoryEvent} from '../hooks/comlink/useRecordDocumentHistoryEvent'
+export {
+  useWindowConnection,
+  type UseWindowConnectionOptions,
+  type WindowConnection,
+  type WindowMessageHandler,
+} from '../hooks/comlink/useWindowConnection'
+export {useSanityInstance} from '../hooks/context/useSanityInstance'
+export {
+  type NavigateToStudioResult,
+  useNavigateToStudioDocument,
+} from '../hooks/dashboard/useNavigateToStudioDocument'
+export {useStudioWorkspacesByProjectIdDataset} from '../hooks/dashboard/useStudioWorkspacesByProjectIdDataset'
+export {useDatasets} from '../hooks/datasets/useDatasets'
+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 {
+  type DocumentsOptions,
+  type DocumentsResponse,
+  useDocuments,
+} from '../hooks/documents/useDocuments'
+export {
+  type PaginatedDocumentsOptions,
+  type PaginatedDocumentsResponse,
+  usePaginatedDocuments,
+} from '../hooks/paginatedDocuments/usePaginatedDocuments'
+export {
+  usePreview,
+  type UsePreviewOptions,
+  type UsePreviewResults,
+} from '../hooks/preview/usePreview'
+export {
+  useProjection,
+  type UseProjectionOptions,
+  type UseProjectionResults,
+} from '../hooks/projection/useProjection'
+export {useProject} from '../hooks/projects/useProject'
+export {type ProjectWithoutMembers, useProjects} from '../hooks/projects/useProjects'
+export {useQuery} from '../hooks/query/useQuery'
+export {useActiveReleases} from '../hooks/releases/useActiveReleases'
+export {usePerspective} from '../hooks/releases/usePerspective'
+export {type UsersResult, useUsers} from '../hooks/users/useUsers'
+export {REACT_SDK_VERSION} from '../version'
+export {type DatasetsResponse, type SanityProjectMember} from '@sanity/client'
+export type {Status as ComlinkStatus} from '@sanity/comlink'
+export {type SanityDocument, type SortOrderingItem} from '@sanity/types'

package/src/components/SDKProvider.test.tsx

@@ -0,0 +1,103 @@
+import {render} from '@testing-library/react'
+import React from 'react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {SDKProvider} from './SDKProvider'
+
+// Mock ResourceProvider to test nesting behavior
+vi.mock('../context/ResourceProvider', () => ({
+  ResourceProvider: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode
+    projectId?: string
+    dataset?: string
+  }) => {
+    return (
+      <div
+        data-testid="resource-provider"
+        data-config={JSON.stringify({
+          projectId: props.projectId,
+          dataset: props.dataset,
+        })}
+      >
+        {children}
+      </div>
+    )
+  },
+}))
+
+// Mock AuthBoundary
+vi.mock('./auth/AuthBoundary', () => ({
+  AuthBoundary: ({children}: {children: React.ReactNode}) => {
+    return <div data-testid="auth-boundary">{children}</div>
+  },
+}))
+
+describe('SDKProvider', () => {
+  it('renders single ResourceProvider with AuthBoundary for a single config', () => {
+    const config = {
+      projectId: 'test-project',
+      dataset: 'production',
+    }
+
+    const {getAllByTestId, getByTestId} = render(
+      <SDKProvider config={[config]} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    // Should create a single ResourceProvider
+    const providers = getAllByTestId('resource-provider')
+    expect(providers.length).toBe(1)
+
+    // Should create an AuthBoundary inside
+    expect(getByTestId('auth-boundary')).toBeInTheDocument()
+
+    // Verify provider has the correct config
+    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual({
+      projectId: 'test-project',
+      dataset: 'production',
+    })
+  })
+
+  it('renders nested ResourceProviders with AuthBoundary for multiple configs', () => {
+    const configs = [
+      {
+        projectId: 'project-1',
+        dataset: 'production',
+      },
+      {
+        projectId: 'project-2',
+        dataset: 'staging',
+      },
+    ]
+
+    const {getAllByTestId, getByTestId} = render(
+      <SDKProvider config={configs} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    // Should create two nested ResourceProviders
+    const providers = getAllByTestId('resource-provider')
+    expect(providers.length).toBe(2)
+
+    // Should create an AuthBoundary inside the innermost provider
+    expect(getByTestId('auth-boundary')).toBeInTheDocument()
+
+    // Verify each provider has the correct config - order is based on how SDKProvider creates nestings
+    // The first provider contains config[1]
+    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual({
+      projectId: 'project-2',
+      dataset: 'staging',
+    })
+
+    // The second provider contains config[0]
+    expect(JSON.parse(providers[1].getAttribute('data-config') || '{}')).toEqual({
+      projectId: 'project-1',
+      dataset: 'production',
+    })
+  })
+})

package/src/components/SDKProvider.tsx

@@ -0,0 +1,52 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, type ReactNode} from 'react'
+
+import {ResourceProvider} from '../context/ResourceProvider'
+import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
+
+/**
+ * @internal
+ */
+export interface SDKProviderProps extends AuthBoundaryProps {
+  children: ReactNode
+  config: SanityConfig | SanityConfig[]
+  fallback: ReactNode
+}
+
+/**
+ * @internal
+ *
+ * Top-level context provider that provides access to the Sanity SDK.
+ * Creates a hierarchy of ResourceProviders, each providing a SanityInstance that can be
+ * accessed by hooks. The first configuration in the array becomes the default instance.
+ */
+export function SDKProvider({
+  children,
+  config,
+  fallback,
+  ...props
+}: SDKProviderProps): ReactElement {
+  // reverse because we want the first config to be the default, but the
+  // ResourceProvider nesting makes the last one the default
+  const configs = (Array.isArray(config) ? config : [config]).slice().reverse()
+  const projectIds = configs.map((c) => c.projectId).filter((id): id is string => !!id)
+
+  // Create a nested structure of ResourceProviders for each config
+  const createNestedProviders = (index: number): ReactElement => {
+    if (index >= configs.length) {
+      return (
+        <AuthBoundary {...props} projectIds={projectIds}>
+          {children}
+        </AuthBoundary>
+      )
+    }
+
+    return (
+      <ResourceProvider {...configs[index]} fallback={fallback}>
+        {createNestedProviders(index + 1)}
+      </ResourceProvider>
+    )
+  }
+
+  return createNestedProviders(0)
+}

package/src/components/SanityApp.test.tsx

@@ -0,0 +1,244 @@
+import {AuthStateType, type SanityConfig} from '@sanity/sdk'
+import {render, screen} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {SanityApp} from './SanityApp'
+import {type SDKProviderProps} from './SDKProvider'
+
+// Hoist the mock function definition
+// Rely on vi.fn type inference
+const mockSDKProviderComponent = vi.hoisted(() =>
+  vi.fn((_props: SDKProviderProps) => (
+    // Simplified mock, doesn't access config directly to avoid type issues
+    <div data-testid="sdk-provider">SDKProvider Mock</div>
+  )),
+)
+
+// Use the hoisted mock in the factory
+vi.mock('./SDKProvider', () => ({
+  SDKProvider: mockSDKProviderComponent,
+}))
+
+// Mock useEffect to prevent redirect logic from running in tests
+vi.mock('react', async () => {
+  const actual = await vi.importActual('react')
+  return {
+    ...actual,
+    createSanityInstance: vi.fn(() => ({
+      config: {},
+      auth: {
+        getSession: vi.fn(),
+        signIn: vi.fn(),
+        signOut: vi.fn(),
+      },
+      identity: {
+        projectId: 'test-project',
+        dataset: 'test-dataset',
+      },
+      dispose: vi.fn(),
+    })),
+  }
+})
+
+vi.mock('../hooks/auth/useAuthState', () => ({
+  useAuthState: () => ({
+    type: AuthStateType.LOGGED_IN,
+    session: {
+      user: {
+        id: 'test-user',
+      },
+    },
+  }),
+}))
+
+describe('SanityApp', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Access the mock instance correctly
+    mockSDKProviderComponent.mockClear()
+  })
+
+  it('renders SDKProvider with a single config', () => {
+    const singleConfig = {
+      projectId: 'test-project',
+      dataset: 'production',
+    }
+
+    render(
+      <SanityApp config={singleConfig} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SanityApp>,
+    )
+
+    // Check that the SDKProvider is rendered
+    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
+
+    // Verify SDKProvider was called with the correct props
+    expect(mockSDKProviderComponent).toHaveBeenCalledTimes(1)
+    const sdkProviderCalls = mockSDKProviderComponent.mock.calls
+    const firstCallArgs1 = sdkProviderCalls[0]
+    expect(firstCallArgs1).toBeDefined()
+    expect(firstCallArgs1.length).toBeGreaterThan(0)
+    const props = firstCallArgs1[0] as unknown as SDKProviderProps
+    const config = props?.config
+
+    // Config is now passed directly as an object for single configs
+    expect(config).toEqual(singleConfig)
+    expect(props.fallback).toBeTruthy()
+  })
+
+  it('renders SDKProvider with multiple configs in original order', () => {
+    const multipleConfigs = [
+      {
+        projectId: 'project-1',
+        dataset: 'production',
+      },
+      {
+        projectId: 'project-2',
+        dataset: 'staging',
+      },
+      {
+        projectId: 'project-3',
+        dataset: 'development',
+      },
+    ]
+
+    render(
+      <SanityApp config={multipleConfigs} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SanityApp>,
+    )
+
+    // Check that the SDKProvider is rendered
+    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
+
+    // Verify SDKProvider was called with the correct props
+    expect(mockSDKProviderComponent).toHaveBeenCalledTimes(1)
+    const sdkProviderCalls = mockSDKProviderComponent.mock.calls
+    const firstCallArgs2 = sdkProviderCalls[0]
+    expect(firstCallArgs2).toBeDefined()
+    expect(firstCallArgs2.length).toBeGreaterThan(0)
+    const props = firstCallArgs2[0] as unknown as SDKProviderProps
+    const config = props?.config
+
+    // Config should be passed directly to SDKProvider
+    expect(config).toEqual(multipleConfigs)
+  })
+
+  it('handles iframe environment correctly', async () => {
+    // Mock window.self and window.top to simulate iframe environment
+    const originalTop = window.top
+    const originalSelf = window.self
+
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
+
+    const mockTop = {}
+    Object.defineProperty(window, 'top', {
+      value: mockTop,
+      writable: true,
+    })
+    Object.defineProperty(window, 'self', {
+      value: window,
+      writable: true,
+    })
+
+    render(
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SanityApp>,
+    )
+
+    // Wait for 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1010))
+
+    // Add assertions based on your iframe-specific behavior
+    expect(window.location.href).toBe('http://localhost:3000/')
+
+    // Clean up the mock
+    Object.defineProperty(window, 'top', {
+      value: originalTop,
+      writable: true,
+    })
+    Object.defineProperty(window, 'self', {
+      value: originalSelf,
+      writable: true,
+    })
+  })
+
+  it('redirects to core if not inside iframe and not local url', async () => {
+    const originalLocation = window.location
+
+    const mockLocation = {
+      replace: vi.fn(),
+      href: 'http://sanity-test.app',
+    }
+
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
+
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+
+    render(
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SanityApp>,
+    )
+
+    // Wait for 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1010))
+
+    // Add assertions based on your iframe-specific behavior
+    expect(mockLocation.replace).toHaveBeenCalledWith('https://sanity.io/welcome')
+
+    // Clean up the mock
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+    })
+  })
+
+  it('does not redirect to core if not inside iframe and local url', async () => {
+    const originalLocation = window.location
+
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
+
+    const mockLocation = {
+      replace: vi.fn(),
+      href: 'http://localhost:3000',
+    }
+
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+
+    render(
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SanityApp>,
+    )
+
+    // Wait for 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1010))
+
+    // Add assertions based on your iframe-specific behavior
+    expect(mockLocation.replace).not.toHaveBeenCalled()
+
+    // Clean up the mock
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+    })
+  })
+})