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

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/hooks'
+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', () => ({
@@ -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(() => {
@@ -67,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

@@ -7,12 +7,12 @@ 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'
 
 /**
  * @alpha
  */
-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}.

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,20 +11,10 @@ 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 />)
-    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,4 @@
-import {Button, Flex, Heading, Spinner} from '@sanity/ui'
+import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'
 import {type JSX, Suspense} from 'react'
 
 import {useLoginUrls} from '../../hooks/auth/useLoginUrls'
@@ -9,25 +9,26 @@ import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
  * 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>
+      <Heading as="h6" align="center">
+        Choose login provider:
+      </Heading>
 
-        <Suspense
-          fallback={
-            <Flex align="center" justify="center" style={{height: '123px'}}>
+      <Suspense
+        fallback={
+          <Box padding={5}>
+            <Flex align="center" justify="center">
               <Spinner />
             </Flex>
-          }
-        >
-          <Providers />
-        </Suspense>
-      </Flex>
+          </Box>
+        }
+      >
+        <Providers />
+      </Suspense>
     </LoginLayout>
   )
 }
@@ -36,10 +37,18 @@ function Providers() {
   const loginUrls = useLoginUrls()
 
   return (
-    <Flex direction="column" gap={3}>
+    <Stack space={3} marginY={5}>
       {loginUrls.map(({title, url}) => (
-        <Button key={url} text={title} as="a" href={url} mode="ghost" />
+        <Button
+          key={url}
+          as="a"
+          href={url}
+          mode="ghost"
+          text={title}
+          textAlign="center"
+          fontSize={2}
+        ></Button>
       ))}
-    </Flex>
+    </Stack>
   )
 }

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

@@ -1,22 +1,7 @@
-import {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 {screen, waitFor} from '@testing-library/react'
 import {afterAll, beforeAll, beforeEach, describe, expect, it, vi} from 'vitest'
 
-import {SanityProvider} from '../context/SanityProvider'
-
-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>,
-  )
-}
+import {renderWithWrappers} from './authTestHelpers'
 
 // Mock `useHandleCallback`
 vi.mock('../../hooks/auth/useHandleCallback', () => ({

package/src/components/auth/LoginCallback.tsx

@@ -1,4 +1,4 @@
-import {Flex, Spinner, Text} from '@sanity/ui'
+import {Flex, Heading, Spinner} from '@sanity/ui'
 import {useEffect} from 'react'
 
 import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
@@ -28,9 +28,11 @@ export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNo
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <Flex direction="column" justify="center" align="center" gap={4} style={{margin: 'auto'}}>
-        <Text size={1}>Logging you in…</Text>
-        <Spinner size={4} />
+      <Heading as="h6" align="center">
+        Logging you in…
+      </Heading>
+      <Flex paddingY={5} align="center" justify="center">
+        <Spinner />
       </Flex>
     </LoginLayout>
   )

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

@@ -1,29 +1,14 @@
-import {createSanityInstance} from '@sanity/sdk'
-import {ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {fireEvent, render, screen, waitFor} from '@testing-library/react'
-import React from 'react'
+import {fireEvent, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, vi} from 'vitest'
 
-import {SanityProvider} from '../context/SanityProvider'
 import {AuthError} from './AuthError'
+import {renderWithWrappers} from './authTestHelpers'
 import {LoginError} from './LoginError'
 
 vi.mock('../../hooks/auth/useLogOut', () => ({
   useLogOut: vi.fn(() => async () => {}),
 }))
 
-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('LoginError', () => {
   it('shows authentication error and retry button', async () => {
     const mockReset = vi.fn()

package/src/components/auth/LoginError.tsx

@@ -1,4 +1,4 @@
-import {Button, Flex, Text} from '@sanity/ui'
+import {Button, Heading, Stack, Text} from '@sanity/ui'
 import {useCallback} from 'react'
 import {type FallbackProps} from 'react-error-boundary'
 
@@ -33,17 +33,13 @@ export function LoginError({
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <Flex direction="column" gap={4} style={{margin: 'auto'}}>
-        <Flex direction="column" gap={3}>
-          <Text as="h2" align="center" weight="bold" size={3}>
-            Authentication Error
-          </Text>
-          <Text size={1} align="center">
-            Please try again or contact support if the problem persists.
-          </Text>
-        </Flex>
-        <Button text="Retry" tone="primary" onClick={handleRetry} />
-      </Flex>
+      <Stack space={5} marginBottom={5}>
+        <Heading as="h6" align="center">
+          Authentication Error
+        </Heading>
+        <Text align="center">Please try again or contact support if the problem persists.</Text>
+        <Button mode="ghost" onClick={handleRetry} text="Retry" fontSize={2} />
+      </Stack>
     </LoginLayout>
   )
 }

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

@@ -1,23 +1,9 @@
-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} from 'vitest'
 
-import {SanityProvider} from '../context/SanityProvider'
+import {renderWithWrappers} from './authTestHelpers'
 import {LoginFooter} from './LoginFooter'
 
-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('LoginFooter', () => {
   it('renders footer links', () => {
     renderWithWrappers(<LoginFooter />)

package/src/components/auth/LoginFooter.tsx

@@ -1,6 +1,5 @@
 import {SanityLogo} from '@sanity/logos'
-import {Flex, Text} from '@sanity/ui'
-import {Fragment} from 'react'
+import {Box, Flex, Inline, Text} from '@sanity/ui'
 
 const LINKS = [
   {
@@ -33,15 +32,15 @@ const LINKS = [
  */
 export function LoginFooter(): React.ReactNode {
   return (
-    <Flex direction="column" gap={4} justify="center" align="center" paddingTop={2}>
-      <Text size={3}>
+    <Box>
+      <Flex justify="center">
         <SanityLogo />
-      </Text>
+      </Flex>
 
-      <Flex align="center" gap={2}>
-        {LINKS.map((link, index) => (
-          <Fragment key={link.title}>
-            <Text muted size={1}>
+      <Flex justify="center">
+        <Inline space={2} paddingY={3}>
+          {LINKS.map((link) => (
+            <Text size={0} key={link.url}>
               <a
                 href={link.url}
                 target="_blank"
@@ -51,15 +50,9 @@ export function LoginFooter(): React.ReactNode {
                 {link.title}
               </a>
             </Text>
-
-            {index < LINKS.length - 1 && (
-              <Text size={1} muted>
-                •
-              </Text>
-            )}
-          </Fragment>
-        ))}
+          ))}
+        </Inline>
       </Flex>
-    </Flex>
+    </Box>
   )
 }

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

@@ -1,23 +1,9 @@
-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} from 'vitest'
 
-import {SanityProvider} from '../context/SanityProvider'
+import {renderWithWrappers} from './authTestHelpers'
 import {LoginLayout} from './LoginLayout'
 
-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('LoginLayout', () => {
   it('renders header, children, and footer', () => {
     renderWithWrappers(

package/src/components/auth/LoginLayout.tsx

@@ -1,9 +1,10 @@
-import {Card, Flex} from '@sanity/ui'
+import {Card, Container} from '@sanity/ui'
 
 import {LoginFooter} from './LoginFooter'
 
 /**
  * @alpha
+ * @internal
  */
 export interface LoginLayoutProps {
   /** Optional header content rendered at top of card */
@@ -56,26 +57,14 @@ export function LoginLayout({
   header,
 }: LoginLayoutProps): React.ReactNode {
   return (
-    <div style={{width: '100%', display: 'flex'}}>
-      <Flex direction="column" gap={4} style={{width: '320px', margin: 'auto', display: 'flex'}}>
-        <Card border radius={2} paddingY={4}>
-          <Flex direction="column" gap={4}>
-            {header && (
-              <Card borderBottom paddingX={4} paddingBottom={3}>
-                {header}
-              </Card>
-            )}
+    <Container width={0}>
+      <Card shadow={1} radius={2} padding={4}>
+        {header && header}
 
-            {children && (
-              <Flex paddingX={4} direction="column" style={{minHeight: '154px'}}>
-                {children}
-              </Flex>
-            )}
-          </Flex>
-        </Card>
+        {children && children}
 
         {footer}
-      </Flex>
-    </div>
+      </Card>
+    </Container>
   )
 }

package/src/components/auth/authTestHelpers.tsx

@@ -0,0 +1,18 @@
+import {createSanityInstance} from '@sanity/sdk'
+import {ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
+import {render, type RenderResult} from '@testing-library/react'
+import React from 'react'
+
+import {SanityProvider} from '../../context/SanityProvider'
+
+const sanityInstance = createSanityInstance({projectId: 'test-project-id', dataset: 'production'})
+const theme = buildTheme()
+
+export const renderWithWrappers = (ui: React.ReactElement): RenderResult => {
+  return render(
+    <SanityProvider sanityInstance={sanityInstance}>
+      <ThemeProvider theme={theme}>{ui}</ThemeProvider>
+    </SanityProvider>,
+  )
+}

package/src/{components/context → context}/SanityProvider.test.tsx

@@ -2,7 +2,7 @@ import {createSanityInstance} from '@sanity/sdk'
 import {render} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 
-import {useSanityInstance} from '../../hooks/context/useSanityInstance'
+import {useSanityInstance} from '../hooks/context/useSanityInstance'
 import {SanityProvider} from './SanityProvider'
 
 describe('SanityProvider', () => {

package/src/hooks/client/useClient.test.tsx

@@ -1,6 +1,6 @@
 import {type SanityClient} from '@sanity/client'
 import {act} from '@testing-library/react'
-import type {Subscribable, Subscriber} from 'rxjs'
+import {type Subscribable, type Subscriber} from 'rxjs'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {renderHook} from '../../../test/test-utils'

package/src/hooks/comlink/useFrameConnection.test.tsx

@@ -0,0 +1,122 @@
+import {type ChannelInstance, type Controller} from '@sanity/comlink'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {renderHook} from '../../../test/test-utils'
+import {useFrameConnection} from './useFrameConnection'
+
+vi.mock(import('@sanity/sdk'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    getOrCreateChannel: vi.fn(),
+    getOrCreateController: vi.fn(),
+    releaseChannel: vi.fn(),
+  }
+})
+
+const {getOrCreateChannel, getOrCreateController, releaseChannel} = await import('@sanity/sdk')
+
+interface TestControllerMessage {
+  type: 'TEST_MESSAGE'
+  data: {
+    someData: string
+  }
+}
+
+interface TestNodeMessage {
+  type: 'NODE_MESSAGE'
+  data: {
+    someData: string
+  }
+}
+
+function createMockChannel() {
+  return {
+    on: vi.fn(() => () => {}),
+    post: vi.fn(),
+    stop: vi.fn(),
+  } as unknown as ChannelInstance<TestControllerMessage, TestNodeMessage>
+}
+
+describe('useFrameController', () => {
+  let channel: ChannelInstance<TestControllerMessage, TestNodeMessage>
+  let controller: Controller
+  let removeTargetMock: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    channel = createMockChannel()
+    removeTargetMock = vi.fn()
+    controller = {
+      addTarget: vi.fn(() => removeTargetMock),
+      destroy: vi.fn(),
+    } as unknown as Controller
+    vi.mocked(getOrCreateChannel).mockReturnValue(channel)
+    vi.mocked(getOrCreateController).mockReturnValue(controller)
+  })
+
+  it('should register and execute message handlers', () => {
+    const mockHandler = vi.fn()
+    const mockData = {someData: 'test'}
+    renderHook(() =>
+      useFrameConnection({
+        name: 'test',
+        connectTo: 'iframe',
+        targetOrigin: '*',
+        onMessage: {
+          TEST_MESSAGE: mockHandler,
+        },
+      }),
+    )
+
+    const onCallback = vi.mocked(channel.on).mock.calls[0][1]
+    onCallback(mockData)
+    expect(mockHandler).toHaveBeenCalledWith(mockData)
+  })
+
+  it('should handle connecting frames and cleanup on disconnect', () => {
+    const {result} = renderHook(() =>
+      useFrameConnection({
+        name: 'test',
+        connectTo: 'iframe',
+        targetOrigin: '*',
+      }),
+    )
+
+    const mockWindow = {} as Window
+    const cleanup = result.current.connect(mockWindow)
+
+    expect(controller.addTarget).toHaveBeenCalledWith(mockWindow)
+
+    // Test cleanup
+    cleanup()
+    expect(removeTargetMock).toHaveBeenCalled()
+  })
+
+  it('should send messages correctly', () => {
+    const {result} = renderHook(() =>
+      useFrameConnection<TestControllerMessage, TestNodeMessage>({
+        name: 'test',
+        connectTo: 'iframe',
+        targetOrigin: '*',
+      }),
+    )
+
+    const mockData = {someData: 'test'}
+    result.current.sendMessage('TEST_MESSAGE', mockData)
+
+    expect(channel.post).toHaveBeenCalledWith('TEST_MESSAGE', mockData)
+  })
+
+  it('should cleanup on unmount', () => {
+    const {unmount} = renderHook(() =>
+      useFrameConnection({
+        name: 'test',
+        connectTo: 'iframe',
+        targetOrigin: '*',
+      }),
+    )
+
+    unmount()
+    expect(releaseChannel).toHaveBeenCalled()
+  })
+})