@sanity/sdk-react 0.0.0-alpha.20 → 0.0.0-alpha.4

package/README.md

@@ -7,62 +7,101 @@
 
 React hooks for creating Sanity applications.
 
-## 💻 Installation
+## Installation
 
 ```bash
 npm i @sanity/sdk-react @sanity/sdk
 ```
 
-> 💡 Looking to build a Sanity application? Check out the [Quick Start](#quick-start) section.
-
-## 📚 SDK Documentation
+## SDK Documentation
 
 See the [SDK Documentation](https://sdk-docs.sanity.dev) for more information.
 
-## 🚀 Quick Start
+## Quick Start
 
 Here's how to implement your Sanity application:
 
-1. Create a new React TypeScript project using the Sanity template
-
 ```bash
-pnpx sanity@latest init --template app-quickstart
+# Create a new Vite React TypeScript project
+npm create vite@latest my-content-os-app -- --template react-ts -y
 cd my-content-os-app
+# Install Sanity dependencies
+npm i @sanity/sdk-react @sanity/sdk @sanity/ui
+# Run the app
+npm run dev
 ```
 
-2. Install dependencies
-
-```bash
-npm i
+```tsx
+// src/App.tsx
+import {createSanityInstance} from '@sanity/sdk'
+import {SanityProvider} from '@sanity/sdk-react/context'
+import {useCurrentUser, useLogOut} from '@sanity/sdk-react/hooks'
+import {Button, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
+import {Suspense} from 'react'
+
+const theme = buildTheme({})
+const sanityInstance = createSanityInstance({
+  projectId: '<your-project-id>',
+  dataset: '<your-dataset>',
+  // optional auth config set projectId and dataset to '' and authScope to 'org' for a global token
+  // auth: {
+  //   authScope: 'org',
+  //   ...
+  // },
+})
+
+export function App(): JSX.Element {
+  return (
+    <ThemeProvider theme={theme}>
+      <Suspense fallback={<Spinner />}>
+        <SanityProvider sanityInstance={sanityInstance}>
+          {/* You will need to implement an auth boundary */}
+          <AuthBoundary header={<Text>My Sanity App</Text>}>
+            <Authenticated />
+          </AuthBoundary>
+        </SanityProvider>
+      </Suspense>
+    </ThemeProvider>
+  )
+}
+
+function Authenticated() {
+  const currentUser = useCurrentUser()
+  const logout = useLogOut()
+
+  return (
+    <Flex direction="column" gap={2}>
+      <Text>Hello, {currentUser?.name}!</Text>
+      <Button text="Logout" onClick={logout} mode="ghost" />
+    </Flex>
+  )
+}
+
+export default App
 ```
 
-3. Run the app
-
-```bash
-npm run dev
-```
+## Available Hooks
 
-4. Open the App in Sanity Dashboard with your organization ID
+- `useAuthState` - Get current authentication state
+- `useCurrentUser` - Access the currently authenticated user
+- `useAuthToken` - Access the authentication token
+- `useLoginUrls` - Get OAuth login URLs
+- `useLogOut` - Handle user logout
+- `useSanityInstance` - Access the Sanity client instance
+- and more...
 
-```
-https://core.sanity.io/<your-organization-id>?dev=http://localhost:3333
-```
+## TypeScript Support
 
-5. Update the `src/App.tsx` file with your Sanity project and dataset
+This package includes TypeScript definitions. You can import types like:
 
 ```tsx
-// src/App.tsx
-import {createSanityInstance} from '@sanity/sdk'
-...
-
-const sanityConfig: SanityConfigs = [
-  {
-    projectId: 'abc123',
-    dataset: 'production',
-  },
-]
-
-...
+import type {
+  SanityProviderProps,
+  AuthBoundaryProps,
+  LoginLayoutProps,
+  LoginErrorProps,
+} from '@sanity/react'
 ```
 
 ## License

package/dist/_chunks-es/context.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children });
+export {
+  SanityInstanceContext,
+  SanityProvider
+};
+//# sourceMappingURL=context.js.map

package/dist/_chunks-es/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../src/context/SanityProvider.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @public\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * Top-level context provider that provides a Sanity configuration instance.\n * This must wrap any Sanity SDK React component.\n * @public\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'\n *\n * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})\n *\n * export default function MyApp() {\n *   return (\n *     <SanityProvider sanityInstance={sanityInstance}>\n *      <ExampleComponent />\n *     </SanityProvider>\n *   )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {\n  return (\n    <SanityInstanceContext.Provider value={sanityInstance}>\n      {children}\n    </SanityInstanceContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GAwBjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}

package/dist/_chunks-es/useLogOut.js

@@ -0,0 +1,44 @@
+import { getAuthState, handleCallback, getLoginUrlsState, fetchLoginUrls, logout } from "@sanity/sdk";
+import { useContext, useMemo, useSyncExternalStore, useCallback } from "react";
+import { SanityInstanceContext } from "./context.js";
+const useSanityInstance = () => {
+  const sanityInstance = useContext(SanityInstanceContext);
+  if (!sanityInstance)
+    throw new Error("useSanityInstance must be called from within the SanityProvider");
+  return sanityInstance;
+};
+function createStateSourceHook(stateSourceFactory) {
+  function useHook(...params) {
+    const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(
+      () => stateSourceFactory(instance, ...params),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [instance, ...params]
+    );
+    return useSyncExternalStore(subscribe, getCurrent);
+  }
+  return useHook;
+}
+const useAuthState = createStateSourceHook(getAuthState);
+function createCallbackHook(callback) {
+  function useHook() {
+    const instance = useSanityInstance();
+    return useCallback((...params) => callback(instance, ...params), [instance]);
+  }
+  return useHook;
+}
+const useHandleCallback = createCallbackHook(handleCallback);
+function useLoginUrls() {
+  const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(() => getLoginUrlsState(instance), [instance]);
+  if (!getCurrent()) throw fetchLoginUrls(instance);
+  return useSyncExternalStore(subscribe, getCurrent);
+}
+const useLogOut = createCallbackHook(logout);
+export {
+  createStateSourceHook,
+  useAuthState,
+  useHandleCallback,
+  useLogOut,
+  useLoginUrls,
+  useSanityInstance
+};
+//# sourceMappingURL=useLogOut.js.map

package/dist/_chunks-es/useLogOut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLogOut.js","sources":["../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../context/SanityProvider'\n\n/**\n * Hook that provides the current Sanity instance from the context.\n * This must be called from within a `SanityProvider` component.\n * @public\n * @returns the current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance()\n * ```\n */\nexport const useSanityInstance = (): SanityInstance => {\n  const sanityInstance = useContext(SanityInstanceContext)\n  if (!sanityInstance) {\n    throw new Error('useSanityInstance must be called from within the SanityProvider')\n  }\n\n  return sanityInstance\n}\n","import {type SanityInstance, type StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n  stateSourceFactory: (instance: SanityInstance, ...params: TParams) => StateSource<TState>,\n): (...params: TParams) => TState {\n  function useHook(...params: TParams) {\n    const instance = useSanityInstance()\n    const {subscribe, getCurrent} = useMemo(\n      () => stateSourceFactory(instance, ...params),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [instance, ...params],\n    )\n\n    return useSyncExternalStore(subscribe, getCurrent)\n  }\n\n  return useHook\n}\n","import {getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders the component when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n *   const authState = useAuthState()\n *   return <div>Current auth state: {authState}</div>\n * }\n * ```\n *\n * @public\n */\nexport const useAuthState = createStateSourceHook(getAuthState)\n","import {type SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n  callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n  function useHook() {\n    const instance = useSanityInstance()\n    return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n  }\n\n  return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n *   const handleCallback = useHandleCallback()\n *   const router = useRouter() // Example router\n *\n *   useEffect(() => {\n *     async function processCallback() {\n *       // Handle the callback and get the cleaned URL\n *       const newUrl = await handleCallback(window.location.href)\n *\n *       if (newUrl) {\n *         // Replace URL without triggering navigation\n *         router.replace(newUrl, {shallow: true})\n *       }\n *     }\n *\n *     processCallback().catch(console.error)\n *   }, [handleCallback, router])\n *\n *   return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n *   const providers = useLoginUrls()\n *\n *   return (\n *     <div>\n *       {providers.map((provider) => (\n *         <a key={provider.name} href={provider.url}>\n *           Login with {provider.title}\n *         </a>\n *       ))}\n *     </div>\n *   )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n *   return (\n *     <Suspense fallback={<div>Loading authentication providers...</div>}>\n *       <LoginProviders />\n *     </Suspense>\n *   )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n  const instance = useSanityInstance()\n  const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n  if (!getCurrent()) throw fetchLoginUrls(instance)\n\n  return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @public\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACjBO,SAAS,sBACd,oBACgC;AAChC,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAW,WAAc,IAAA;AAAA,MAC9B,MAAM,mBAAmB,UAAU,GAAG,MAAM;AAAA;AAAA,MAE5C,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AAEO,WAAA,qBAAqB,WAAW,UAAU;AAAA,EAAA;AAG5C,SAAA;AACT;ACMa,MAAA,eAAe,sBAAsB,YAAY;ACrBvD,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC6Ba,MAAA,oBAAoB,mBAAmB,cAAc;ACA3D,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;ACzCa,MAAA,YAAY,mBAAmB,MAAM;"}

package/dist/components.d.ts

@@ -0,0 +1,83 @@
+import {FallbackProps} from 'react-error-boundary'
+import {JSX} from 'react'
+import {SanityConfig} from '@sanity/sdk'
+
+/**
+ * A component that handles authentication flow and error boundaries for a
+ * protected section of the application.
+ *
+ * @remarks
+ * This component manages different authentication states and renders the
+ * appropriate components based on that state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <AuthBoundary header={<MyLogo />}>
+ *       <ProtectedContent />
+ *     </AuthBoundary>
+ *   )
+ * }
+ * ```
+ *
+ * @alpha
+ */
+export declare function AuthBoundary({
+  LoginErrorComponent,
+  ...props
+}: AuthBoundaryProps): React.ReactNode
+
+/**
+ * @alpha
+ */
+declare interface AuthBoundaryProps extends LoginLayoutProps {
+  /**
+   * Custom component to render the login screen.
+   * Receives all login layout props. Defaults to {@link Login}.
+   */
+  LoginComponent?: React.ComponentType<LoginLayoutProps>
+  /**
+   * Custom component to render during OAuth callback processing.
+   * Receives all login layout props. Defaults to {@link LoginCallback}.
+   */
+  CallbackComponent?: React.ComponentType<LoginLayoutProps>
+  /**
+   * Custom component to render when authentication errors occur.
+   * Receives login layout props and error boundary props. Defaults to
+   * {@link LoginError}
+   */
+  LoginErrorComponent?: React.ComponentType<LoginErrorProps>
+}
+
+/**
+ * @alpha
+ */
+declare type LoginErrorProps = FallbackProps & LoginLayoutProps
+
+/**
+ * @alpha
+ */
+declare interface LoginLayoutProps {
+  /** Optional header content rendered at top of card */
+  header?: React.ReactNode
+  /** Optional footer content rendered below card. Defaults to an internal login footer */
+  footer?: React.ReactNode
+  /** Main content rendered in card body */
+  children?: React.ReactNode
+}
+
+/**
+ * @public
+ *
+ * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary
+ */
+export declare function SanityApp({
+  sanityConfig,
+  children,
+}: {
+  children: React.ReactNode
+  sanityConfig: SanityConfig
+}): JSX.Element
+
+export {}

package/dist/components.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AuthStateType, createSanityInstance } from "@sanity/sdk";
+import { Fragment, Suspense, useEffect, useCallback, useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { useLoginUrls, useHandleCallback, useLogOut, useAuthState } from "./_chunks-es/useLogOut.js";
+import { SanityLogo } from "@sanity/logos";
+import { SanityProvider } from "./_chunks-es/context.js";
+class AuthError extends Error {
+  constructor(error) {
+    typeof error == "object" && error && "message" in error && typeof error.message == "string" ? super(error.message) : super(), this.cause = error;
+  }
+}
+const LINKS = [
+  {
+    url: "https://slack.sanity.io/",
+    i18nKey: "workspaces.community-title",
+    title: "Community"
+  },
+  {
+    url: "https://www.sanity.io/docs",
+    i18nKey: "workspaces.docs-title",
+    title: "Docs"
+  },
+  {
+    url: "https://www.sanity.io/legal/privacy",
+    i18nKey: "workspaces.privacy-title",
+    title: "Privacy"
+  },
+  {
+    url: "https://www.sanity.io",
+    i18nKey: "workspaces.sanity-io-title",
+    title: "sanity.io"
+  }
+];
+function LoginFooter() {
+  return /* @__PURE__ */ jsxs("div", { className: "sc-login-footer", children: [
+    /* @__PURE__ */ jsx(SanityLogo, { className: "sc-login-footer__logo" }),
+    /* @__PURE__ */ jsx("ul", { className: "sc-login-footer__links", children: LINKS.map((link) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { className: "sc-login-footer__link", children: /* @__PURE__ */ jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title }) }) }, link.title)) })
+  ] });
+}
+function LoginLayout({
+  children,
+  footer = /* @__PURE__ */ jsx(LoginFooter, {}),
+  header
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "sc-login-layout", children: /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__card", children: [
+      header && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-header", children: header }),
+      children && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-body", children })
+    ] }),
+    footer
+  ] }) });
+}
+function Login({ header, footer }) {
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login", children: [
+    /* @__PURE__ */ jsx("h1", { className: "sc-login__title", children: "Choose login provider" }),
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "sc-login__loading", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Providers, {}) })
+  ] }) });
+}
+function Providers() {
+  const loginUrls = useLoginUrls();
+  return /* @__PURE__ */ jsx("div", { className: "sc-login-providers", children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx("a", { href: url, children: title }, url)) });
+}
+function LoginCallback({ header, footer }) {
+  const handleCallback = useHandleCallback();
+  return useEffect(() => {
+    const url = new URL(location.href);
+    handleCallback(url.toString()).then((replacementLocation) => {
+      replacementLocation && history.replaceState(null, "", replacementLocation);
+    });
+  }, [handleCallback]), /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-callback", children: [
+    /* @__PURE__ */ jsx("h1", { className: "sc-login-callback__title", children: "Logging you in\u2026" }),
+    /* @__PURE__ */ jsx("div", { className: "sc-login-callback__loading", children: "Loading\u2026" })
+  ] }) });
+}
+function LoginError({
+  error,
+  resetErrorBoundary,
+  header,
+  footer
+}) {
+  if (!(error instanceof AuthError)) throw error;
+  const logout = useLogOut(), handleRetry = useCallback(async () => {
+    await logout(), resetErrorBoundary();
+  }, [logout, resetErrorBoundary]);
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-error", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sc-login-error__content", children: [
+      /* @__PURE__ */ jsx("h2", { className: "sc-login-error__title", children: "Authentication Error" }),
+      /* @__PURE__ */ jsx("p", { className: "sc-login-error__description", children: "Please try again or contact support if the problem persists." })
+    ] }),
+    /* @__PURE__ */ jsx("button", { className: "sc-login-error__button", onClick: handleRetry, children: "Retry" })
+  ] }) });
+}
+function AuthBoundary({
+  LoginErrorComponent = LoginError,
+  ...props
+}) {
+  const { header, footer } = props, FallbackComponent = useMemo(() => function(fallbackProps) {
+    return /* @__PURE__ */ jsx(LoginErrorComponent, { ...fallbackProps, header, footer });
+  }, [header, footer, LoginErrorComponent]);
+  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent, children: /* @__PURE__ */ jsx(AuthSwitch, { ...props }) });
+}
+function AuthSwitch({
+  LoginComponent = Login,
+  CallbackComponent = LoginCallback,
+  children,
+  ...props
+}) {
+  const authState = useAuthState();
+  switch (authState.type) {
+    case AuthStateType.ERROR:
+      throw new AuthError(authState.error);
+    case AuthStateType.LOGGING_IN:
+      return /* @__PURE__ */ jsx(CallbackComponent, { ...props });
+    case AuthStateType.LOGGED_IN:
+      return children;
+    default:
+      return /* @__PURE__ */ jsx(LoginComponent, { ...props });
+  }
+}
+function SanityApp({
+  sanityConfig,
+  children
+}) {
+  const sanityInstance = createSanityInstance(sanityConfig);
+  return /* @__PURE__ */ jsx(SanityProvider, { sanityInstance, children: /* @__PURE__ */ jsx(AuthBoundary, { children }) });
+}
+export {
+  AuthBoundary,
+  SanityApp
+};
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/SanityApp.tsx"],"sourcesContent":["/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n  constructor(error: unknown) {\n    if (\n      typeof error === 'object' &&\n      !!error &&\n      'message' in error &&\n      typeof error.message === 'string'\n    ) {\n      super(error.message)\n    } else {\n      super()\n    }\n\n    this.cause = error\n  }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Fragment} from 'react'\n\nconst LINKS = [\n  {\n    url: 'https://slack.sanity.io/',\n    i18nKey: 'workspaces.community-title',\n    title: 'Community',\n  },\n  {\n    url: 'https://www.sanity.io/docs',\n    i18nKey: 'workspaces.docs-title',\n    title: 'Docs',\n  },\n  {\n    url: 'https://www.sanity.io/legal/privacy',\n    i18nKey: 'workspaces.privacy-title',\n    title: 'Privacy',\n  },\n  {\n    url: 'https://www.sanity.io',\n    i18nKey: 'workspaces.sanity-io-title',\n    title: 'sanity.io',\n  },\n]\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n  return (\n    <div className=\"sc-login-footer\">\n      <SanityLogo className=\"sc-login-footer__logo\" />\n\n      <ul className=\"sc-login-footer__links\">\n        {LINKS.map((link) => (\n          <Fragment key={link.title}>\n            <li className=\"sc-login-footer__link\">\n              <a href={link.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                {link.title}\n              </a>\n            </li>\n          </Fragment>\n        ))}\n      </ul>\n    </div>\n  )\n}\n","import {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n */\nexport interface LoginLayoutProps {\n  /** Optional header content rendered at top of card */\n  header?: React.ReactNode\n\n  /** Optional footer content rendered below card. Defaults to an internal login footer */\n  footer?: React.ReactNode\n\n  /** Main content rendered in card body */\n  children?: React.ReactNode\n}\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n *   return (\n *     <LoginLayout\n *       header={header}\n *       footer={footer}\n *     >\n *       <CustomLoginContent />\n *     </LoginLayout>\n *   )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n *   LoginComponent={CustomLogin}\n *   header={<Logo />}\n * >\n *   <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n  children,\n  footer = <LoginFooter />,\n  header,\n}: LoginLayoutProps): React.ReactNode {\n  return (\n    <div className=\"sc-login-layout\">\n      <div className=\"sc-login-layout__container\">\n        <div className=\"sc-login-layout__card\">\n          {header && <div className=\"sc-login-layout__card-header\">{header}</div>}\n\n          {children && <div className=\"sc-login-layout__card-body\">{children}</div>}\n        </div>\n\n        {footer}\n      </div>\n    </div>\n  )\n}\n","import {type JSX, Suspense} from 'react'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login\">\n        <h1 className=\"sc-login__title\">Choose login provider</h1>\n\n        <Suspense fallback={<div className=\"sc-login__loading\">Loading…</div>}>\n          <Providers />\n        </Suspense>\n      </div>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <div className=\"sc-login-providers\">\n      {loginUrls.map(({title, url}) => (\n        <a key={url} href={url}>\n          {title}\n        </a>\n      ))}\n    </div>\n  )\n}\n","import {useEffect} from 'react'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n  const handleCallback = useHandleCallback()\n\n  useEffect(() => {\n    const url = new URL(location.href)\n    handleCallback(url.toString()).then((replacementLocation) => {\n      if (replacementLocation) {\n        // history API with `replaceState` is used to prevent a reload but still\n        // remove the short-lived token from the URL\n        history.replaceState(null, '', replacementLocation)\n      }\n    })\n  }, [handleCallback])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-callback\">\n        <h1 className=\"sc-login-callback__title\">Logging you in…</h1>\n        <div className=\"sc-login-callback__loading\">Loading…</div>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n  error,\n  resetErrorBoundary,\n  header,\n  footer,\n}: LoginErrorProps): React.ReactNode {\n  if (!(error instanceof AuthError)) throw error\n  const logout = useLogOut()\n\n  const handleRetry = useCallback(async () => {\n    await logout()\n    resetErrorBoundary()\n  }, [logout, resetErrorBoundary])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <div className=\"sc-login-error\">\n        <div className=\"sc-login-error__content\">\n          <h2 className=\"sc-login-error__title\">Authentication Error</h2>\n          <p className=\"sc-login-error__description\">\n            Please try again or contact support if the problem persists.\n          </p>\n        </div>\n\n        <button className=\"sc-login-error__button\" onClick={handleRetry}>\n          Retry\n        </button>\n      </div>\n    </LoginLayout>\n  )\n}\n","import {AuthStateType} from '@sanity/sdk'\nimport {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport {type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\ninterface AuthBoundaryProps extends LoginLayoutProps {\n  /**\n   * Custom component to render the login screen.\n   * Receives all login layout props. Defaults to {@link Login}.\n   */\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render during OAuth callback processing.\n   * Receives all login layout props. Defaults to {@link LoginCallback}.\n   */\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render when authentication errors occur.\n   * Receives login layout props and error boundary props. Defaults to\n   * {@link LoginError}\n   */\n  LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <AuthBoundary header={<MyLogo />}>\n *       <ProtectedContent />\n *     </AuthBoundary>\n *   )\n * }\n * ```\n *\n * @alpha\n */\nexport function AuthBoundary({\n  LoginErrorComponent = LoginError,\n  ...props\n}: AuthBoundaryProps): React.ReactNode {\n  const {header, footer} = props\n  const FallbackComponent = useMemo(() => {\n    return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n    }\n  }, [header, footer, LoginErrorComponent])\n\n  return (\n    <ErrorBoundary FallbackComponent={FallbackComponent}>\n      <AuthSwitch {...props} />\n    </ErrorBoundary>\n  )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n  LoginComponent = Login,\n  CallbackComponent = LoginCallback,\n  children,\n  ...props\n}: AuthSwitchProps) {\n  const authState = useAuthState()\n\n  switch (authState.type) {\n    case AuthStateType.ERROR: {\n      throw new AuthError(authState.error)\n    }\n    case AuthStateType.LOGGING_IN: {\n      return <CallbackComponent {...props} />\n    }\n    case AuthStateType.LOGGED_IN: {\n      return children\n    }\n    default: {\n      return <LoginComponent {...props} />\n    }\n  }\n}\n","import {createSanityInstance, type SanityConfig} from '@sanity/sdk'\nimport {type JSX} from 'react'\n\nimport {SanityProvider} from '../context/SanityProvider'\nimport {AuthBoundary} from './auth/AuthBoundary'\n\n/**\n * @public\n *\n * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary\n */\nexport function SanityApp({\n  sanityConfig,\n  children,\n}: {\n  children: React.ReactNode\n  sanityConfig: SanityConfig\n}): JSX.Element {\n  const sanityInstance = createSanityInstance(sanityConfig)\n\n  return (\n    <SanityProvider sanityInstance={sanityInstance}>\n      <AuthBoundary>{children}</AuthBoundary>\n    </SanityProvider>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/context.d.ts

@@ -0,0 +1,39 @@
+import {ReactElement} from 'react'
+import {SanityInstance} from '@sanity/sdk'
+
+/**
+ * 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 declare const SanityProvider: ({
+  children,
+  sanityInstance,
+}: SanityProviderProps) => ReactElement
+
+/**
+ * @public
+ */
+export declare interface SanityProviderProps {
+  children: React.ReactNode
+  sanityInstance: SanityInstance
+}
+
+export {}

package/dist/context.js

@@ -0,0 +1,5 @@
+import { SanityProvider } from "./_chunks-es/context.js";
+export {
+  SanityProvider
+};
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}