@sanity/sdk-react 0.0.0-alpha.8 → 0.0.0-chore-react-18-compat.0

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

@@ -0,0 +1,90 @@
+import {AuthStateType, createSanityInstance} from '@sanity/sdk'
+import {SanityProvider, useAuthState, useLoginUrls} from '@sanity/sdk-react'
+import {render, screen} from '@testing-library/react'
+import React from 'react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {LoginLinks} from './LoginLinks'
+
+// Mock the hooks and SDK functions
+vi.mock('../../hooks/auth/useLoginUrls', () => ({
+  useLoginUrls: vi.fn(() => [
+    {
+      name: 'google',
+      title: 'Google',
+      url: 'https://google.com/auth',
+    },
+    {
+      name: 'github',
+      title: 'GitHub',
+      url: 'https://github.com/auth',
+    },
+  ]),
+}))
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+
+  return {
+    ...actual,
+    tradeTokenForSession: vi.fn(),
+    getSidUrlHash: vi.fn().mockReturnValue(null),
+    getSidUrlSearch: vi.fn(),
+  }
+})
+
+vi.mock('../../hooks/auth/useAuthState', () => ({
+  useAuthState: vi.fn(() => 'logged-out'),
+}))
+
+vi.mock('../../hooks/auth/useHandleAuthCallback', () => ({
+  useHandleAuthCallback: vi.fn(),
+}))
+
+describe('LoginLinks', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
+  const renderWithWrappers = (ui: React.ReactElement) => {
+    return render(<SanityProvider sanityInstances={[sanityInstance]}>{ui}</SanityProvider>)
+  }
+
+  it('renders auth provider links correctly when not authenticated', () => {
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGED_OUT,
+      isDestroyingSession: false,
+    })
+    renderWithWrappers(<LoginLinks />)
+
+    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
+
+    const authProviders = useLoginUrls()
+    authProviders.forEach((provider) => {
+      const button = screen.getByRole('link', {name: provider.title})
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveAttribute('href', provider.url)
+    })
+  })
+
+  it('shows loading state while logging in', () => {
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGING_IN,
+      isExchangingToken: false,
+    })
+    renderWithWrappers(<LoginLinks />)
+
+    expect(screen.getByText('Logging in...')).toBeInTheDocument()
+  })
+
+  it('shows success message when logged in', () => {
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGED_IN,
+      token: 'test-token',
+      currentUser: null,
+    })
+    renderWithWrappers(<LoginLinks />)
+
+    expect(screen.getByText('You are logged in')).toBeInTheDocument()
+  })
+})

package/src/components/Login/LoginLinks.tsx

@@ -0,0 +1,58 @@
+import {type ReactElement} from 'react'
+
+import {useAuthState} from '../../hooks/auth/useAuthState'
+import {useHandleAuthCallback} from '../../hooks/auth/useHandleAuthCallback'
+import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
+
+/**
+ * Component that handles Sanity authentication flow and renders login provider options
+ *
+ * @public
+ *
+ * @returns Rendered component
+ *
+ * @remarks
+ * The component handles three states:
+ * 1. Loading state during token exchange
+ * 2. Success state after successful authentication
+ * 3. Provider selection UI when not authenticated
+ *
+ * @example
+ * ```tsx
+ * const config = { projectId: 'your-project-id', dataset: 'production' }
+ * return <LoginLinks sanityInstance={config} />
+ * ```
+ */
+export const LoginLinks = (): ReactElement => {
+  const loginUrls = useLoginUrls()
+  const authState = useAuthState()
+  useHandleAuthCallback()
+
+  if (authState.type === 'logging-in') {
+    return <div className="sc-login-links__logging-in">Logging in...</div>
+  }
+
+  // Show success state after authentication
+  if (authState.type === 'logged-in') {
+    return <div className="sc-login-links__logged-in">You are logged in</div>
+  }
+
+  /**
+   * Render provider selection UI
+   */
+  return (
+    <div className="sc-login-links">
+      <h2 className="sc-login-links__title">Choose login provider</h2>
+
+      <ul className="sc-login-links__list">
+        {loginUrls.map((provider, index) => (
+          <li key={`${provider.url}_${index}`} className="sc-login-links__item">
+            <a href={provider.url} className="sc-login-links__link">
+              {provider.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/components/SDKProvider.test.tsx

@@ -0,0 +1,79 @@
+import * as SanitySDK from '@sanity/sdk'
+import {render} from '@testing-library/react'
+import {type ReactNode} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {type SanityProviderProps} from '../context/SanityProvider'
+import {SDKProvider} from './SDKProvider'
+
+// Mock the SDK module
+vi.mock('@sanity/sdk', () => ({
+  createSanityInstance: vi.fn(() => ({
+    // Mock return value of createSanityInstance
+    id: 'mock-instance',
+  })),
+}))
+
+// Mock the SanityProvider context to verify the instance is passed correctly
+vi.mock('../context/SanityProvider', () => ({
+  SanityProvider: ({children, sanityInstances}: SanityProviderProps) => (
+    <div data-testid="sanity-provider" data-instances={JSON.stringify(sanityInstances)}>
+      {children}
+    </div>
+  ),
+  useSanity: vi.fn(),
+}))
+
+// Mock the AuthBoundary component
+vi.mock('./auth/AuthBoundary', () => ({
+  AuthBoundary: ({children}: {children: ReactNode}) => (
+    <div data-testid="auth-boundary">{children}</div>
+  ),
+}))
+
+describe('SDKProvider', () => {
+  const mockConfig = {
+    projectId: 'test-project',
+    dataset: 'test-dataset',
+  }
+
+  it('creates a Sanity instance with the provided config', () => {
+    render(
+      <SDKProvider sanityConfigs={[mockConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SDKProvider>,
+    )
+
+    expect(SanitySDK.createSanityInstance).toHaveBeenCalledWith(mockConfig)
+  })
+
+  it('renders children within SanityProvider and AuthBoundary', () => {
+    const {getByText, getByTestId} = render(
+      <SDKProvider sanityConfigs={[mockConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SDKProvider>,
+    )
+
+    // Verify the component hierarchy
+    const sanityProvider = getByTestId('sanity-provider')
+    const authBoundary = getByTestId('auth-boundary')
+    const childElement = getByText('Test Child')
+
+    expect(sanityProvider).toBeInTheDocument()
+    expect(authBoundary).toBeInTheDocument()
+    expect(childElement).toBeInTheDocument()
+  })
+
+  it('passes the created Sanity instance to SanityProvider', () => {
+    const {getByTestId} = render(
+      <SDKProvider sanityConfigs={[mockConfig]} fallback={<div>Fallback</div>}>
+        <div>Test Child</div>
+      </SDKProvider>,
+    )
+
+    const sanityProvider = getByTestId('sanity-provider')
+    const passedInstances = JSON.parse(sanityProvider.dataset['instances'] || '[]')
+
+    expect(passedInstances).toEqual([{id: 'mock-instance'}])
+  })
+})

package/src/components/SDKProvider.tsx

@@ -0,0 +1,42 @@
+import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, type ReactNode, Suspense, useMemo} from 'react'
+
+import {SanityProvider} from '../context/SanityProvider'
+import {AuthBoundary} from './auth/AuthBoundary'
+
+const DEFAULT_FALLBACK = (
+  <>
+    Warning: No fallback provided. Please supply a fallback prop to ensure proper Suspense handling.
+  </>
+)
+
+/**
+ * @internal
+ */
+export interface SDKProviderProps {
+  children: ReactNode
+  sanityConfigs: SanityConfig[]
+  fallback: ReactNode
+}
+
+/**
+ * @internal
+ *
+ * Top-level context provider that provides access to the Sanity SDK.
+ */
+export function SDKProvider({children, sanityConfigs, fallback}: SDKProviderProps): ReactElement {
+  const sanityInstances = useMemo(() => {
+    return sanityConfigs.map((sanityConfig: SanityConfig) => createSanityInstance(sanityConfig))
+  }, [sanityConfigs])
+
+  return (
+    <SanityProvider sanityInstances={sanityInstances}>
+      {/* This Suspense boundary is necessary because some hooks may suspend.
+      It ensures that the Sanity instance state created above remains stable
+      before rendering the AuthBoundary and its children. */}
+      <Suspense fallback={fallback ?? DEFAULT_FALLBACK}>
+        <AuthBoundary>{children}</AuthBoundary>
+      </Suspense>
+    </SanityProvider>
+  )
+}

package/src/components/SanityApp.test.tsx

@@ -1,6 +1,6 @@
 import {AuthStateType, type SanityConfig} from '@sanity/sdk'
 import {render, screen} from '@testing-library/react'
-import {describe, expect, it} from 'vitest'
+import {describe, expect, it, vi} from 'vitest'
 
 import {SanityApp} from './SanityApp'
 
@@ -44,11 +44,113 @@ describe('SanityApp', () => {
   it('renders children correctly', async () => {
     const testMessage = 'Test Child Component'
     render(
-      <SanityApp sanityConfig={mockSanityConfig}>
+      <SanityApp sanityConfigs={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>{testMessage}</div>
       </SanityApp>,
     )
 
     expect(await screen.findByText(testMessage)).toBeInTheDocument()
   })
+
+  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 mockTop = {}
+    Object.defineProperty(window, 'top', {
+      value: mockTop,
+      writable: true,
+    })
+    Object.defineProperty(window, 'self', {
+      value: window,
+      writable: true,
+    })
+
+    render(
+      <SanityApp sanityConfigs={[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',
+    }
+
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+
+    render(
+      <SanityApp sanityConfigs={[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://core.sanity.io')
+
+    // 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 mockLocation = {
+      replace: vi.fn(),
+      href: 'http://localhost:3000',
+    }
+
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+
+    render(
+      <SanityApp sanityConfigs={[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,
+    })
+  })
 })

package/src/components/SanityApp.tsx

@@ -1,17 +1,20 @@
-import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
-import {type ReactElement} from 'react'
+import {type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, useEffect} from 'react'
 
-import {SanityProvider} from '../context/SanityProvider'
-import {AuthBoundary} from './auth/AuthBoundary'
+import {SDKProvider} from './SDKProvider'
+import {isInIframe, isLocalUrl} from './utils'
 
 /**
  * @public
  */
 export interface SanityAppProps {
-  sanityConfig: SanityConfig
+  sanityConfigs: SanityConfig[]
   children: React.ReactNode
+  fallback: React.ReactNode
 }
 
+const CORE_URL = 'https://core.sanity.io'
+
 /**
  * @public
  *
@@ -23,31 +26,65 @@ export interface SanityAppProps {
  * @returns Your Sanity application, integrated with your Sanity configuration and application context
  *
  * @example
- * ```
- * import { SanityApp } from '@sanity/sdk-react
+ * ```tsx
+ * import { SanityApp } from '@sanity/sdk-react'
  *
  * import MyAppRoot from './Root'
  *
- * const mySanityConfig = {
- *   procectId: 'my-project-id',
- *   dataset: 'production',
- * }
+ * // Single project configuration
+ * const mySanityConfigs = [
+ *   {
+ *     projectId: 'my-project-id',
+ *     dataset: 'production',
+ *   },
+ * ]
+ *
+ * // Or multiple project configurations
+ * const multipleConfigs = [
+ *   // Configuration for your main project. This will be used as the default project for all hooks if no resource ID override is provided.
+ *   {
+ *     projectId: 'marketing-website-project',
+ *     dataset: 'production',
+ *   },
+ *   // Configuration for a separate blog project
+ *   {
+ *     projectId: 'blog-project',
+ *     dataset: 'production',
+ *   },
+ *   // Configuration for a separate ecommerce project
+ *   {
+ *     projectId: 'ecommerce-project',
+ *     dataset: 'production',
+ *   }
+ * ]
  *
  * export default function MyApp() {
  *   return (
- *     <SanityApp sanityConfig={mySanityConfig}>
+ *     <SanityApp sanityConfigs={mySanityConfigs}>
  *       <MyAppRoot />
  *     </SanityApp>
  *   )
  * }
  * ```
  */
-export function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement {
-  const sanityInstance = createSanityInstance(sanityConfig)
+export function SanityApp({sanityConfigs, children, fallback}: SanityAppProps): ReactElement {
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined
+
+    if (!isInIframe() && !isLocalUrl(window)) {
+      // If the app is not running in an iframe and is not a local url, redirect to core.
+      timeout = setTimeout(() => {
+        // eslint-disable-next-line no-console
+        console.warn('Redirecting to core', CORE_URL)
+        window.location.replace(CORE_URL)
+      }, 1000)
+    }
+    return () => clearTimeout(timeout)
+  }, [sanityConfigs])
 
   return (
-    <SanityProvider sanityInstance={sanityInstance}>
-      <AuthBoundary>{children}</AuthBoundary>
-    </SanityProvider>
+    <SDKProvider sanityConfigs={sanityConfigs} fallback={fallback}>
+      {children}
+    </SDKProvider>
   )
 }

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

@@ -1,5 +1,5 @@
 import {AuthStateType} from '@sanity/sdk'
-import {useAuthState} from '@sanity/sdk-react/hooks'
+import {useAuthState} from '@sanity/sdk-react'
 import {screen, waitFor} from '@testing-library/react'
 import {beforeEach, describe, expect, it, type MockInstance, vi} from 'vitest'
 
@@ -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 () => {}),
@@ -54,7 +54,7 @@ describe('AuthBoundary', () => {
     renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
 
     // The login screen should show "Choose login provider" by default
-    expect(screen.getByText('Choose login provider:')).toBeInTheDocument()
+    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
     expect(screen.queryByText('Protected Content')).not.toBeInTheDocument()
   })
 

package/src/components/auth/AuthBoundary.tsx

@@ -3,6 +3,7 @@ import {useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
+import {isInIframe} from '../utils'
 import {AuthError} from './AuthError'
 import {Login} from './Login'
 import {LoginCallback} from './LoginCallback'
@@ -10,9 +11,18 @@ import {LoginError, type LoginErrorProps} from './LoginError'
 import {type LoginLayoutProps} from './LoginLayout'
 
 // Only import bridge if we're in an iframe. This assumes that the app is
-// running withing SanityOS if it is in an iframe.
-if (typeof window !== 'undefined' && window.self !== window.top) {
-  import('@sanity/os/bridge')
+// running within SanityOS if it is in an iframe.
+if (isInIframe()) {
+  const parsedUrl = new URL(window.location.href)
+  const mode = new URLSearchParams(parsedUrl.hash.slice(1)).get('mode')
+  const script = document.createElement('script')
+  script.src =
+    mode === 'core-ui--staging'
+      ? 'https://core.sanity-cdn.work/bridge.js'
+      : 'https://core.sanity-cdn.com/bridge.js'
+  script.type = 'module'
+  script.async = true
+  document.head.appendChild(script)
 }
 
 /**

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

@@ -14,7 +14,7 @@ vi.mock('../../hooks/auth/useLoginUrls', () => ({
 describe('Login', () => {
   it('renders login providers', () => {
     renderWithWrappers(<Login />)
-    expect(screen.getByText('Choose login provider:')).toBeInTheDocument()
+    expect(screen.getByText('Choose login provider')).toBeInTheDocument()
     expect(screen.getByRole('link', {name: 'Provider A'})).toHaveAttribute(
       'href',
       'https://provider-a.com/auth',

package/src/components/auth/Login.tsx

@@ -1,4 +1,3 @@
-import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'
 import {type JSX, Suspense} from 'react'
 
 import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
@@ -14,21 +13,13 @@ import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 export function Login({header, footer}: LoginLayoutProps): JSX.Element {
   return (
     <LoginLayout header={header} footer={footer}>
-      <Heading as="h6" align="center">
-        Choose login provider:
-      </Heading>
+      <div className="sc-login">
+        <h1 className="sc-login__title">Choose login provider</h1>
 
-      <Suspense
-        fallback={
-          <Box padding={5}>
-            <Flex align="center" justify="center">
-              <Spinner />
-            </Flex>
-          </Box>
-        }
-      >
-        <Providers />
-      </Suspense>
+        <Suspense fallback={<div className="sc-login__loading">Loading…</div>}>
+          <Providers />
+        </Suspense>
+      </div>
     </LoginLayout>
   )
 }
@@ -37,18 +28,12 @@ function Providers() {
   const loginUrls = useLoginUrls()
 
   return (
-    <Stack space={3} marginY={5}>
+    <div className="sc-login-providers">
       {loginUrls.map(({title, url}) => (
-        <Button
-          key={url}
-          as="a"
-          href={url}
-          mode="ghost"
-          text={title}
-          textAlign="center"
-          fontSize={2}
-        ></Button>
+        <a key={url} href={url}>
+          {title}
+        </a>
       ))}
-    </Stack>
+    </div>
   )
 }

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,7 +1,6 @@
-import {Flex, Heading, Spinner} from '@sanity/ui'
 import {useEffect} from 'react'
 
-import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
+import {useHandleAuthCallback} from '../../hooks/auth/useHandleAuthCallback'
 import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 
 /**
@@ -13,27 +12,25 @@ 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}>
-      <Heading as="h6" align="center">
-        Logging you in…
-      </Heading>
-      <Flex paddingY={5} align="center" justify="center">
-        <Spinner />
-      </Flex>
+      <div className="sc-login-callback">
+        <h1 className="sc-login-callback__title">Logging you in…</h1>
+        <div className="sc-login-callback__loading">Loading…</div>
+      </div>
     </LoginLayout>
   )
 }