@sanity/sdk-react 0.0.0-alpha.1 → 0.0.0-alpha.10

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

@@ -1,13 +1,10 @@
-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 {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(() => {
@@ -60,16 +47,22 @@ describe('AuthBoundary', () => {
   })
 
   it('renders the Login component when authState="logged-out"', () => {
-    vi.mocked(useAuthState).mockReturnValue({type: 'logged-out', isDestroyingSession: false})
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGED_OUT,
+      isDestroyingSession: false,
+    })
     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()
   })
 
   it('renders the LoginCallback component when authState="logging-in"', () => {
-    vi.mocked(useAuthState).mockReturnValue({type: 'logging-in', isExchangingToken: false})
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.LOGGING_IN,
+      isExchangingToken: false,
+    })
     renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
 
     // The callback screen shows "Logging you in…"
@@ -78,7 +71,7 @@ describe('AuthBoundary', () => {
 
   it('renders children when authState="logged-in"', () => {
     vi.mocked(useAuthState).mockReturnValue({
-      type: 'logged-in',
+      type: AuthStateType.LOGGED_IN,
       currentUser: null,
       token: 'exampleToken',
     })
@@ -88,7 +81,10 @@ describe('AuthBoundary', () => {
   })
 
   it('shows the LoginError (via ErrorBoundary) when authState="error"', async () => {
-    vi.mocked(useAuthState).mockReturnValue({type: 'error', error: new Error('test error')})
+    vi.mocked(useAuthState).mockReturnValue({
+      type: AuthStateType.ERROR,
+      error: new Error('test error'),
+    })
     renderWithWrappers(<AuthBoundary>Protected Content</AuthBoundary>)
 
     // The AuthBoundary should throw an AuthError internally

package/src/components/auth/AuthBoundary.tsx

@@ -1,3 +1,4 @@
+import {AuthStateType} from '@sanity/sdk'
 import {useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
@@ -6,12 +7,18 @@ 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 withing SanityOS if it is in an iframe.
+if (typeof window !== 'undefined' && window.self !== window.top) {
+  import('@sanity/os/bridge')
+}
 
 /**
- * @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}.
@@ -51,7 +58,7 @@ export interface AuthBoundaryProps extends LoginLayoutProps {
  * }
  * ```
  *
- * @alpha
+ * @internal
  */
 export function AuthBoundary({
   LoginErrorComponent = LoginError,
@@ -85,13 +92,13 @@ function AuthSwitch({
   const authState = useAuthState()
 
   switch (authState.type) {
-    case 'error': {
+    case AuthStateType.ERROR: {
       throw new AuthError(authState.error)
     }
-    case 'logging-in': {
+    case AuthStateType.LOGGING_IN: {
       return <CallbackComponent {...props} />
     }
-    case 'logged-in': {
+    case AuthStateType.LOGGED_IN: {
       return children
     }
     default: {

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,46 +1,34 @@
-import {Button, Flex, Heading, Spinner} from '@sanity/ui'
-import {Suspense} from 'react'
-import styled from 'styled-components'
+import {Box, Button, Flex, Heading, Spinner, Stack} from '@sanity/ui'
+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>
+      <Heading as="h6" align="center">
+        Choose login provider:
+      </Heading>
 
-        <Suspense
-          fallback={
-            <FallbackRoot align="center" justify="center">
+      <Suspense
+        fallback={
+          <Box padding={5}>
+            <Flex align="center" justify="center">
               <Spinner />
-            </FallbackRoot>
-          }
-        >
-          <Providers />
-        </Suspense>
-      </Flex>
+            </Flex>
+          </Box>
+        }
+      >
+        <Providers />
+      </Suspense>
     </LoginLayout>
   )
 }
@@ -49,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,14 +1,10 @@
-import {Flex, Spinner, Text} from '@sanity/ui'
+import {Flex, Heading, Spinner} from '@sanity/ui'
 import {useEffect} from 'react'
-import styled from 'styled-components'
 
 import {useHandleCallback} from '../../hooks/auth/useHandleCallback'
 import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
 
-const StyledFlex = styled(Flex)`
-  margin: auto;
-`
-
+/**
 /**
  * Component shown during auth callback processing that handles login completion.
  * Automatically processes the auth callback when mounted and updates the URL
@@ -32,10 +28,12 @@ export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNo
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <StyledFlex direction="column" justify="center" align="center" gap={4}>
-        <Text size={1}>Logging you in…</Text>
-        <Spinner size={4} />
-      </StyledFlex>
+      <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,7 +1,6 @@
-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'
-import styled from 'styled-components'
 
 import {useLogOut} from '../../hooks/auth/useLogOut'
 import {AuthError} from './AuthError'
@@ -12,10 +11,6 @@ import {LoginLayout, type LoginLayoutProps} from './LoginLayout'
  */
 export type LoginErrorProps = FallbackProps & LoginLayoutProps
 
-const StyledFlex = styled(Flex)`
-  margin: auto;
-`
-
 /**
  * Displays authentication error details and provides retry functionality.
  * Only handles {@link AuthError} instances - rethrows other error types.
@@ -38,17 +33,13 @@ export function LoginError({
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <StyledFlex direction="column" gap={4}>
-        <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} />
-      </StyledFlex>
+      <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,7 +1,5 @@
 import {SanityLogo} from '@sanity/logos'
-import {Flex, Text} from '@sanity/ui'
-import {Fragment} from 'react'
-import styled from 'styled-components'
+import {Box, Flex, Inline, Text} from '@sanity/ui'
 
 const LINKS = [
   {
@@ -26,12 +24,6 @@ const LINKS = [
   },
 ]
 
-const StyledText = styled(Text)`
-  a {
-    color: inherit;
-  }
-`
-
 /**
  * Default footer component for login screens showing Sanity branding and legal
  * links.
@@ -40,28 +32,27 @@ const StyledText = styled(Text)`
  */
 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}>
-            <StyledText muted size={1}>
-              <a href={link.url} target="_blank" rel="noopener noreferrer">
+      <Flex justify="center">
+        <Inline space={2} paddingY={3}>
+          {LINKS.map((link) => (
+            <Text size={0} key={link.url}>
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{color: 'inherit'}}
+              >
                 {link.title}
               </a>
-            </StyledText>
-
-            {index < LINKS.length - 1 && (
-              <Text size={1} muted>
-                •
-              </Text>
-            )}
-          </Fragment>
-        ))}
+            </Text>
+          ))}
+        </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,10 +1,10 @@
-import {Card, Flex} from '@sanity/ui'
-import styled from 'styled-components'
+import {Card, Container} from '@sanity/ui'
 
 import {LoginFooter} from './LoginFooter'
 
 /**
  * @alpha
+ * @internal
  */
 export interface LoginLayoutProps {
   /** Optional header content rendered at top of card */
@@ -17,23 +17,6 @@ export interface LoginLayoutProps {
   children?: React.ReactNode
 }
 
-const Root = styled.div`
-  width: 100%;
-  display: flex;
-`
-
-const Container = styled(Flex)`
-  width: 320px;
-  margin: auto;
-  display: flex;
-`
-
-const StyledCard = styled(Card)``
-
-const ChildrenFlex = styled(Flex)`
-  min-height: 154px;
-`
-
 /**
  * Layout component for login-related screens providing consistent styling and structure.
  * Renders content in a centered card with optional header and footer sections.
@@ -74,26 +57,14 @@ export function LoginLayout({
   header,
 }: LoginLayoutProps): React.ReactNode {
   return (
-    <Root>
-      <Container direction="column" gap={4}>
-        <StyledCard 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 && (
-              <ChildrenFlex paddingX={4} direction="column">
-                {children}
-              </ChildrenFlex>
-            )}
-          </Flex>
-        </StyledCard>
+        {children && children}
 
         {footer}
-      </Container>
-    </Root>
+      </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/{components/context → context}/SanityProvider.tsx

@@ -12,22 +12,28 @@ export interface SanityProviderProps {
 export const SanityInstanceContext = createContext<SanityInstance | null>(null)
 
 /**
- * Top-level context provider that provides a Sanity configuration instance.
- * This must wrap any Sanity SDK React component.
- * @public
+ * Top-level context provider that provides access to the Sanity configuration instance.
+ * This must wrap any components making use of the Sanity SDK React hooks.
+ * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.
+ * @internal
  * @param props - Sanity project and dataset configuration
  * @returns Rendered component
  * @example
  * ```tsx
  * import {createSanityInstance} from '@sanity/sdk'
- * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
+ * import {SanityProvider} from '@sanity/sdk-react'
+ *
+ * import MyAppRoot from './Root'
  *
- * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
+ * const sanityInstance = createSanityInstance({
+ *   projectId: 'your-project-id',
+ *   dataset: 'production',
+ * })
  *
  * export default function MyApp() {
  *   return (
  *     <SanityProvider sanityInstance={sanityInstance}>
- *      <ExampleComponent />
+ *       <MyAppRoot />
  *     </SanityProvider>
  *   )
  * }