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

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

@@ -1,13 +1,9 @@
 import {AuthStateType, createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
+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 {useAuthState} from '../../hooks/auth/useAuthState'
-import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
-import {SanityProvider} from '../context/SanityProvider'
 import {LoginLinks} from './LoginLinks'
 
 // Mock the hooks and SDK functions
@@ -40,12 +36,10 @@ 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(),
 }))
 
-const theme = buildTheme({})
-
 describe('LoginLinks', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -53,11 +47,7 @@ describe('LoginLinks', () => {
 
   const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
   const renderWithWrappers = (ui: React.ReactElement) => {
-    return render(
-      <ThemeProvider theme={theme}>
-        <SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>
-      </ThemeProvider>,
-    )
+    return render(<SanityProvider sanityInstances={[sanityInstance]}>{ui}</SanityProvider>)
   }
 
   it('renders auth provider links correctly when not authenticated', () => {

package/src/components/Login/LoginLinks.tsx

@@ -1,8 +1,7 @@
-import {Button, Card, Container, Flex, Heading, Stack} from '@sanity/ui'
 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'
 
 /**
@@ -27,47 +26,33 @@ 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>Logging in...</div>
+    return <div className="sc-login-links__logging-in">Logging in...</div>
   }
 
   // Show success state after authentication
   if (authState.type === 'logged-in') {
-    return <div>You are logged in</div>
+    return <div className="sc-login-links__logged-in">You are logged in</div>
   }
 
   /**
    * Render provider selection UI
-   * Uses Sanity UI components for consistent styling
    */
   return (
-    <Card height="fill" overflow="auto" paddingX={4}>
-      <Flex height="fill" direction="column" align="center" justify="center" paddingTop={4}>
-        <Container width={0}>
-          <Stack space={4}>
-            <Heading align="center" size={1}>
-              Choose login provider
-            </Heading>
+    <div className="sc-login-links">
+      <h2 className="sc-login-links__title">Choose login provider</h2>
 
-            <Stack space={2}>
-              {loginUrls.map((provider, index) => (
-                <Button
-                  key={`${provider.url}_${index}`}
-                  as="a"
-                  href={provider.url}
-                  mode="ghost"
-                  tone="default"
-                  space={3}
-                  padding={3}
-                  text={provider.title}
-                />
-              ))}
-            </Stack>
-          </Stack>
-        </Container>
-      </Flex>
-    </Card>
+      <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

@@ -0,0 +1,156 @@
+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'
+
+vi.mock('@sanity/sdk', async () => {
+  const actual = await vi.importActual('@sanity/sdk')
+  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', () => {
+  const mockSanityConfig: SanityConfig = {
+    projectId: 'test-project',
+    dataset: 'test-dataset',
+  }
+
+  it('renders children correctly', async () => {
+    const testMessage = 'Test Child Component'
+    render(
+      <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

@@ -0,0 +1,90 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, useEffect} from 'react'
+
+import {SDKProvider} from './SDKProvider'
+import {isInIframe, isLocalUrl} from './utils'
+
+/**
+ * @public
+ */
+export interface SanityAppProps {
+  sanityConfigs: SanityConfig[]
+  children: React.ReactNode
+  fallback: React.ReactNode
+}
+
+const CORE_URL = 'https://core.sanity.io'
+
+/**
+ * @public
+ *
+ * The SanityApp component provides your Sanity application with access to your Sanity configuration,
+ * as well as application context and state which is used by the Sanity React hooks. Your application
+ * must be wrapped with the SanityApp component to function properly.
+ *
+ * @param props - Your Sanity configuration and the React children to render
+ * @returns Your Sanity application, integrated with your Sanity configuration and application context
+ *
+ * @example
+ * ```tsx
+ * import { SanityApp } from '@sanity/sdk-react'
+ *
+ * import MyAppRoot from './Root'
+ *
+ * // 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 sanityConfigs={mySanityConfigs}>
+ *       <MyAppRoot />
+ *     </SanityApp>
+ *   )
+ * }
+ * ```
+ */
+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 (
+    <SDKProvider sanityConfigs={sanityConfigs} fallback={fallback}>
+      {children}
+    </SDKProvider>
+  )
+}

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

@@ -1,13 +1,10 @@
-import {AuthStateType, createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {render, screen, waitFor} from '@testing-library/react'
-import React from 'react'
+import {AuthStateType} from '@sanity/sdk'
+import {useAuthState} from '@sanity/sdk-react'
+import {screen, waitFor} from '@testing-library/react'
 import {beforeEach, describe, expect, it, type MockInstance, vi} from 'vitest'
 
-import {useAuthState} from '../../hooks/auth/useAuthState'
-import {SanityProvider} from '../context/SanityProvider'
 import {AuthBoundary} from './AuthBoundary'
+import {renderWithWrappers} from './authTestHelpers'
 
 // Mock hooks
 vi.mock('../../hooks/auth/useAuthState', () => ({
@@ -16,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 () => {}),
@@ -38,16 +35,6 @@ vi.mock('./AuthError', async (importOriginal) => {
   }
 })
 
-const theme = buildTheme({})
-const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
-const renderWithWrappers = (ui: React.ReactElement) => {
-  return render(
-    <ThemeProvider theme={theme}>
-      <SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>
-    </ThemeProvider>,
-  )
-}
-
 describe('AuthBoundary', () => {
   let consoleErrorSpy: MockInstance
   beforeEach(() => {

package/src/components/auth/AuthBoundary.tsx

@@ -3,16 +3,32 @@ 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'
 import {LoginError, type LoginErrorProps} from './LoginError'
-import type {LoginLayoutProps} from './LoginLayout'
+import {type LoginLayoutProps} from './LoginLayout'
+
+// Only import bridge if we're in an iframe. This assumes that the app is
+// 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)
+}
 
 /**
- * @alpha
+ * @internal
  */
-export interface AuthBoundaryProps extends LoginLayoutProps {
+interface AuthBoundaryProps extends LoginLayoutProps {
   /**
    * Custom component to render the login screen.
    * Receives all login layout props. Defaults to {@link Login}.
@@ -52,7 +68,7 @@ export interface AuthBoundaryProps extends LoginLayoutProps {
  * }
  * ```
  *
- * @alpha
+ * @internal
  */
 export function AuthBoundary({
   LoginErrorComponent = LoginError,

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

@@ -1,11 +1,7 @@
-import {createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {render, screen} from '@testing-library/react'
-import React from 'react'
+import {screen} from '@testing-library/react'
 import {describe, expect, it, vi} from 'vitest'
 
-import {SanityProvider} from '../context/SanityProvider'
+import {renderWithWrappers} from './authTestHelpers'
 import {Login} from './Login'
 
 vi.mock('../../hooks/auth/useLoginUrls', () => ({
@@ -15,16 +11,6 @@ vi.mock('../../hooks/auth/useLoginUrls', () => ({
   ]),
 }))
 
-const theme = buildTheme({})
-const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
-const renderWithWrappers = (ui: React.ReactElement) => {
-  return render(
-    <ThemeProvider theme={theme}>
-      <SanityProvider sanityInstance={sanityInstance}>{ui}</SanityProvider>
-    </ThemeProvider>,
-  )
-}
-
 describe('Login', () => {
   it('renders login providers', () => {
     renderWithWrappers(<Login />)

package/src/components/auth/Login.tsx

@@ -1,46 +1,25 @@
-import {Button, Flex, Heading, Spinner} from '@sanity/ui'
-import {Suspense} from 'react'
-import styled from 'styled-components'
+import {type JSX, Suspense} from 'react'
 
 import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
 import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 
-/**
- * @alpha
- */
-export interface LoginProps {
-  header?: React.ReactNode
-  footer?: React.ReactNode
-}
-
-const FallbackRoot = styled(Flex)`
-  height: 123px;
-`
-
 /**
  * Login component that displays available authentication providers.
  * Renders a list of login options with a loading fallback while providers load.
  *
  * @alpha
+ * @internal
  */
 export function Login({header, footer}: LoginLayoutProps): JSX.Element {
   return (
     <LoginLayout header={header} footer={footer}>
-      <Flex direction="column" gap={4}>
-        <Heading as="h1" size={1} align="center">
-          Choose login provider
-        </Heading>
+      <div className="sc-login">
+        <h1 className="sc-login__title">Choose login provider</h1>
 
-        <Suspense
-          fallback={
-            <FallbackRoot align="center" justify="center">
-              <Spinner />
-            </FallbackRoot>
-          }
-        >
+        <Suspense fallback={<div className="sc-login__loading">Loading…</div>}>
           <Providers />
         </Suspense>
-      </Flex>
+      </div>
     </LoginLayout>
   )
 }
@@ -49,10 +28,12 @@ function Providers() {
   const loginUrls = useLoginUrls()
 
   return (
-    <Flex direction="column" gap={3}>
+    <div className="sc-login-providers">
       {loginUrls.map(({title, url}) => (
-        <Button key={url} text={title} as="a" href={url} mode="ghost" />
+        <a key={url} href={url}>
+          {title}
+        </a>
       ))}
-    </Flex>
+    </div>
   )
 }