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

package/src/components/Login/LoginLinks.tsx

@@ -1,3 +1,4 @@
+import {Button, Card, Container, Flex, Heading, Stack} from '@sanity/ui'
 import {type ReactElement} from 'react'
 
 import {useAuthState} from '../../hooks/auth/useAuthState'
@@ -29,30 +30,44 @@ export const LoginLinks = (): ReactElement => {
   useHandleCallback()
 
   if (authState.type === 'logging-in') {
-    return <div className="sc-login-links__logging-in">Logging in...</div>
+    return <div>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>
+    return <div>You are logged in</div>
   }
 
   /**
    * Render provider selection UI
+   * Uses Sanity UI components for consistent styling
    */
   return (
-    <div className="sc-login-links">
-      <h2 className="sc-login-links__title">Choose login provider</h2>
+    <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>
 
-      <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>
+            <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>
   )
 }

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

@@ -1,10 +1,13 @@
-import {AuthStateType} from '@sanity/sdk'
-import {useAuthState} from '@sanity/sdk-react'
-import {screen, waitFor} from '@testing-library/react'
+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 {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', () => ({
@@ -35,6 +38,16 @@ 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,32 +3,16 @@ 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'
-
-// 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)
-}
+import type {LoginLayoutProps} from './LoginLayout'
 
 /**
- * @internal
+ * @alpha
  */
-interface AuthBoundaryProps extends LoginLayoutProps {
+export interface AuthBoundaryProps extends LoginLayoutProps {
   /**
    * Custom component to render the login screen.
    * Receives all login layout props. Defaults to {@link Login}.
@@ -68,7 +52,7 @@ interface AuthBoundaryProps extends LoginLayoutProps {
  * }
  * ```
  *
- * @internal
+ * @alpha
  */
 export function AuthBoundary({
   LoginErrorComponent = LoginError,

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

@@ -1,7 +1,11 @@
-import {screen} from '@testing-library/react'
+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 {describe, expect, it, vi} from 'vitest'
 
-import {renderWithWrappers} from './authTestHelpers'
+import {SanityProvider} from '../context/SanityProvider'
 import {Login} from './Login'
 
 vi.mock('../../hooks/auth/useLoginUrls', () => ({
@@ -11,6 +15,16 @@ 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,25 +1,46 @@
-import {type JSX, Suspense} from 'react'
+import {Button, Flex, Heading, Spinner} from '@sanity/ui'
+import {Suspense} from 'react'
+import styled from 'styled-components'
 
 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}>
-      <div className="sc-login">
-        <h1 className="sc-login__title">Choose login provider</h1>
+      <Flex direction="column" gap={4}>
+        <Heading as="h1" size={1} align="center">
+          Choose login provider
+        </Heading>
 
-        <Suspense fallback={<div className="sc-login__loading">Loading…</div>}>
+        <Suspense
+          fallback={
+            <FallbackRoot align="center" justify="center">
+              <Spinner />
+            </FallbackRoot>
+          }
+        >
           <Providers />
         </Suspense>
-      </div>
+      </Flex>
     </LoginLayout>
   )
 }
@@ -28,12 +49,10 @@ function Providers() {
   const loginUrls = useLoginUrls()
 
   return (
-    <div className="sc-login-providers">
+    <Flex direction="column" gap={3}>
       {loginUrls.map(({title, url}) => (
-        <a key={url} href={url}>
-          {title}
-        </a>
+        <Button key={url} text={title} as="a" href={url} mode="ghost" />
       ))}
-    </div>
+    </Flex>
   )
 }

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

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

package/src/components/auth/LoginCallback.tsx

@@ -1,9 +1,14 @@
+import {Flex, Spinner, Text} 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
@@ -27,10 +32,10 @@ export function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNo
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <div className="sc-login-callback">
-        <h1 className="sc-login-callback__title">Logging you in…</h1>
-        <div className="sc-login-callback__loading">Loading…</div>
-      </div>
+      <StyledFlex direction="column" justify="center" align="center" gap={4}>
+        <Text size={1}>Logging you in…</Text>
+        <Spinner size={4} />
+      </StyledFlex>
     </LoginLayout>
   )
 }

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

@@ -1,14 +1,29 @@
-import {fireEvent, screen, waitFor} from '@testing-library/react'
+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 {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,5 +1,7 @@
+import {Button, Flex, 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'
@@ -10,6 +12,10 @@ 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.
@@ -32,18 +38,17 @@ export function LoginError({
 
   return (
     <LoginLayout header={header} footer={footer}>
-      <div className="sc-login-error">
-        <div className="sc-login-error__content">
-          <h2 className="sc-login-error__title">Authentication Error</h2>
-          <p className="sc-login-error__description">
+      <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.
-          </p>
-        </div>
-
-        <button className="sc-login-error__button" onClick={handleRetry}>
-          Retry
-        </button>
-      </div>
+          </Text>
+        </Flex>
+        <Button text="Retry" tone="primary" onClick={handleRetry} />
+      </StyledFlex>
     </LoginLayout>
   )
 }

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

@@ -1,9 +1,23 @@
-import {screen} from '@testing-library/react'
+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 {describe, expect, it} from 'vitest'
 
-import {renderWithWrappers} from './authTestHelpers'
+import {SanityProvider} from '../context/SanityProvider'
 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,5 +1,7 @@
 import {SanityLogo} from '@sanity/logos'
+import {Flex, Text} from '@sanity/ui'
 import {Fragment} from 'react'
+import styled from 'styled-components'
 
 const LINKS = [
   {
@@ -24,6 +26,12 @@ const LINKS = [
   },
 ]
 
+const StyledText = styled(Text)`
+  a {
+    color: inherit;
+  }
+`
+
 /**
  * Default footer component for login screens showing Sanity branding and legal
  * links.
@@ -32,20 +40,28 @@ const LINKS = [
  */
 export function LoginFooter(): React.ReactNode {
   return (
-    <div className="sc-login-footer">
-      <SanityLogo className="sc-login-footer__logo" />
+    <Flex direction="column" gap={4} justify="center" align="center" paddingTop={2}>
+      <Text size={3}>
+        <SanityLogo />
+      </Text>
 
-      <ul className="sc-login-footer__links">
-        {LINKS.map((link) => (
+      <Flex align="center" gap={2}>
+        {LINKS.map((link, index) => (
           <Fragment key={link.title}>
-            <li className="sc-login-footer__link">
+            <StyledText muted size={1}>
               <a href={link.url} target="_blank" rel="noopener noreferrer">
                 {link.title}
               </a>
-            </li>
+            </StyledText>
+
+            {index < LINKS.length - 1 && (
+              <Text size={1} muted>
+                •
+              </Text>
+            )}
           </Fragment>
         ))}
-      </ul>
-    </div>
+      </Flex>
+    </Flex>
   )
 }

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

@@ -1,9 +1,23 @@
-import {screen} from '@testing-library/react'
+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 {describe, expect, it} from 'vitest'
 
-import {renderWithWrappers} from './authTestHelpers'
+import {SanityProvider} from '../context/SanityProvider'
 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,3 +1,6 @@
+import {Card, Flex} from '@sanity/ui'
+import styled from 'styled-components'
+
 import {LoginFooter} from './LoginFooter'
 
 /**
@@ -14,6 +17,23 @@ 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.
@@ -54,16 +74,26 @@ export function LoginLayout({
   header,
 }: LoginLayoutProps): React.ReactNode {
   return (
-    <div className="sc-login-layout">
-      <div className="sc-login-layout__container">
-        <div className="sc-login-layout__card">
-          {header && <div className="sc-login-layout__card-header">{header}</div>}
+    <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>
+            )}
 
-          {children && <div className="sc-login-layout__card-body">{children}</div>}
-        </div>
+            {children && (
+              <ChildrenFlex paddingX={4} direction="column">
+                {children}
+              </ChildrenFlex>
+            )}
+          </Flex>
+        </StyledCard>
 
         {footer}
-      </div>
-    </div>
+      </Container>
+    </Root>
   )
 }

package/src/{context → components/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', () => {
@@ -15,7 +15,7 @@ describe('SanityProvider', () => {
     }
 
     const {getByTestId} = render(
-      <SanityProvider sanityInstances={[sanityInstance]}>
+      <SanityProvider sanityInstance={sanityInstance}>
         <TestComponent />
       </SanityProvider>,
     )

package/src/components/context/SanityProvider.tsx

@@ -0,0 +1,42 @@
+import {type SanityInstance} from '@sanity/sdk'
+import {createContext, type ReactElement} from 'react'
+
+/**
+ * @public
+ */
+export interface SanityProviderProps {
+  children: React.ReactNode
+  sanityInstance: SanityInstance
+}
+
+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
+ * @param props - Sanity project and dataset configuration
+ * @returns Rendered component
+ * @example
+ * ```tsx
+ * import {createSanityInstance} from '@sanity/sdk'
+ * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
+ *
+ * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
+ *
+ * export default function MyApp() {
+ *   return (
+ *     <SanityProvider sanityInstance={sanityInstance}>
+ *      <ExampleComponent />
+ *     </SanityProvider>
+ *   )
+ * }
+ * ```
+ */
+export const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {
+  return (
+    <SanityInstanceContext.Provider value={sanityInstance}>
+      {children}
+    </SanityInstanceContext.Provider>
+  )
+}