@sanity/sdk-react 0.0.0-alpha.1

package/dist/hooks.d.ts

@@ -0,0 +1,145 @@
+import {AuthProvider} from '@sanity/sdk'
+import {AuthState} from '@sanity/sdk'
+import {AuthStore} from '@sanity/sdk'
+import {CurrentUser} from '@sanity/sdk'
+import type {SanityInstance} from '@sanity/sdk'
+
+/**
+ * A React hook that subscribes to authentication state changes.
+ *
+ * This hook provides access to the current authentication state type from the Sanity auth store.
+ * It automatically re-renders the component when the authentication state changes.
+ *
+ * @remarks
+ * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes
+ * and ensure consistency between server and client rendering.
+ *
+ * @returns The current authentication state type
+ *
+ * @example
+ * ```tsx
+ * function AuthStatus() {
+ *   const authState = useAuthState()
+ *   return <div>Current auth state: {authState}</div>
+ * }
+ * ```
+ *
+ * @public
+ */
+export declare function useAuthState(): AuthState
+
+/**
+ * Hook to get the currently logged in user
+ * @public
+ * @returns The current user or null if not authenticated
+ */
+export declare const useAuthToken: () => string | null
+
+/**
+ * Hook to get the currently logged in user
+ * @public
+ * @returns The current user or null if not authenticated
+ */
+export declare const useCurrentUser: () => CurrentUser | null
+
+/**
+ * A React hook that returns a function for handling authentication callbacks.
+ *
+ * @remarks
+ * This hook provides access to the authentication store's callback handler,
+ * which processes auth redirects by extracting the session ID and fetching the
+ * authentication token. If fetching the long-lived token is successful,
+ * `handleCallback` will return a Promise that resolves a new location that
+ * removes the short-lived token from the URL. Use this in combination with
+ * `history.replaceState` or your own router's `replace` function to update the
+ * current location without triggering a reload.
+ *
+ * @example
+ * ```tsx
+ * function AuthCallback() {
+ *   const handleCallback = useHandleCallback()
+ *   const router = useRouter() // Example router
+ *
+ *   useEffect(() => {
+ *     async function processCallback() {
+ *       // Handle the callback and get the cleaned URL
+ *       const newUrl = await handleCallback(window.location.href)
+ *
+ *       if (newUrl) {
+ *         // Replace URL without triggering navigation
+ *         router.replace(newUrl, {shallow: true})
+ *       }
+ *     }
+ *
+ *     processCallback().catch(console.error)
+ *   }, [handleCallback, router])
+ *
+ *   return <div>Completing login...</div>
+ * }
+ * ```
+ *
+ * @returns A callback handler function that processes OAuth redirects
+ * @public
+ */
+export declare function useHandleCallback(): AuthStore['handleCallback']
+
+/**
+ * A React hook that retrieves the available authentication provider URLs for login.
+ *
+ * @remarks
+ * This hook fetches the login URLs from the Sanity auth store when the component mounts.
+ * Each provider object contains information about an authentication method, including its URL.
+ * The hook will suspend if the login URLs have not yet loaded.
+ *
+ * @example
+ * ```tsx
+ * // LoginProviders component that uses the hook
+ * function LoginProviders() {
+ *   const providers = useLoginUrls()
+ *
+ *   return (
+ *     <div>
+ *       {providers.map((provider) => (
+ *         <a key={provider.name} href={provider.url}>
+ *           Login with {provider.title}
+ *         </a>
+ *       ))}
+ *     </div>
+ *   )
+ * }
+ *
+ * // Parent component with Suspense boundary
+ * function LoginPage() {
+ *   return (
+ *     <Suspense fallback={<div>Loading authentication providers...</div>}>
+ *       <LoginProviders />
+ *     </Suspense>
+ *   )
+ * }
+ * ```
+ *
+ * @returns An array of {@link AuthProvider} objects containing login URLs and provider information
+ * @public
+ */
+export declare function useLoginUrls(): AuthProvider[]
+
+/**
+ * Hook to log out of the current session
+ * @public
+ * @returns A function to log out of the current session
+ */
+export declare const useLogOut: () => AuthStore['logout']
+
+/**
+ * Hook that provides the current Sanity instance from the context.
+ * This must be called from within a `SanityProvider` component.
+ * @public
+ * @returns the current Sanity instance
+ * @example
+ * ```tsx
+ * const instance = useSanityInstance()
+ * ```
+ */
+export declare const useSanityInstance: () => SanityInstance
+
+export {}

package/dist/hooks.js

@@ -0,0 +1,27 @@
+import { useSanityInstance } from "./_chunks-es/useLogOut.js";
+import { useAuthState, useHandleCallback, useLogOut, useLoginUrls } from "./_chunks-es/useLogOut.js";
+import { getAuthStore } from "@sanity/sdk";
+import { useStore } from "zustand";
+const useAuthToken = () => {
+  const instance = useSanityInstance(), { tokenState } = getAuthStore(instance);
+  return useStore(tokenState);
+}, useCurrentUser = () => {
+  const instance = useSanityInstance(), { currentUserState } = getAuthStore(instance);
+  if (!currentUserState.getState())
+    throw new Promise((resolve) => {
+      const unsubscribe = currentUserState.subscribe((currentUser) => {
+        currentUser && (unsubscribe(), resolve());
+      });
+    });
+  return useStore(currentUserState);
+};
+export {
+  useAuthState,
+  useAuthToken,
+  useCurrentUser,
+  useHandleCallback,
+  useLogOut,
+  useLoginUrls,
+  useSanityInstance
+};
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx"],"sourcesContent":["import {getAuthStore} from '@sanity/sdk'\nimport {useStore} from 'zustand'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useAuthToken = (): string | null => {\n  const instance = useSanityInstance()\n  const {tokenState} = getAuthStore(instance)\n\n  return useStore(tokenState)\n}\n","import {type CurrentUser, type CurrentUserSlice, getAuthStore} from '@sanity/sdk'\nimport {useStore} from 'zustand'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * Hook to get the currently logged in user\n * @public\n * @returns The current user or null if not authenticated\n */\nexport const useCurrentUser = (): CurrentUser | null => {\n  const instance = useSanityInstance()\n  const {currentUserState} = getAuthStore(instance)\n\n  // TODO: update this hook so it can never return null\n  if (!currentUserState.getState())\n    throw new Promise<void>((resolve) => {\n      const unsubscribe = currentUserState.subscribe((currentUser) => {\n        if (currentUser) {\n          unsubscribe()\n          resolve()\n        }\n      })\n    })\n\n  return useStore<CurrentUserSlice>(currentUserState)\n}\n"],"names":[],"mappings":";;;;AAUO,MAAM,eAAe,MAAqB;AAC/C,QAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAU,IAAI,aAAa,QAAQ;AAE1C,SAAO,SAAS,UAAU;AAC5B,GCLa,iBAAiB,MAA0B;AACtD,QAAM,WAAW,kBAAkB,GAC7B,EAAC,iBAAgB,IAAI,aAAa,QAAQ;AAG5C,MAAA,CAAC,iBAAiB,SAAS;AACvB,UAAA,IAAI,QAAc,CAAC,YAAY;AACnC,YAAM,cAAc,iBAAiB,UAAU,CAAC,gBAAgB;AAC1D,wBACF,eACA;MAAQ,CAEX;AAAA,IAAA,CACF;AAEH,SAAO,SAA2B,gBAAgB;AACpD;"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * An example function that will be removed.
+ * @public
+ */
+export declare function main(): void
+
+export {}

package/dist/index.js

@@ -0,0 +1,6 @@
+function main() {
+}
+export {
+  main
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/_exports/index.ts"],"sourcesContent":["/**\n * An example function that will be removed.\n * @public\n */\nexport function main(): void {\n  //\n}\n\n// export * from './components'\n// export * from './hooks'\n"],"names":[],"mappings":"AAIO,SAAS,OAAa;AAE7B;"}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@sanity/sdk-react",
+  "version": "0.0.0-alpha.1",
+  "private": false,
+  "description": "Sanity SDK React toolkit for Content OS",
+  "keywords": [],
+  "homepage": "https://github.com/sanity-io/sdk#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/sdk/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/sdk.git"
+  },
+  "license": "MIT",
+  "author": "Sanity <developers@sanity.io>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/_exports/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "source": "./src/_exports/components.ts",
+      "import": "./dist/components.js",
+      "default": "./dist/components.js"
+    },
+    "./hooks": {
+      "source": "./src/_exports/hooks.ts",
+      "import": "./dist/hooks.js",
+      "default": "./dist/hooks.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "components": [
+        "./dist/components.d.ts"
+      ],
+      "hooks": [
+        "./dist/hooks.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "lint-staged": {
+    "*": [
+      "prettier --write --cache --ignore-unknown"
+    ]
+  },
+  "browserslist": "extends @sanity/browserslist-config",
+  "prettier": "@sanity/prettier-config",
+  "dependencies": {
+    "@sanity/logos": "^2.1.13",
+    "@sanity/ui": "^2.8.19",
+    "react-error-boundary": "^4.1.2",
+    "rxjs": "^7.8.1",
+    "styled-components": "^6.1.13",
+    "zustand": "^5.0.1",
+    "@sanity/sdk": "0.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@sanity/client": "^6.24.1",
+    "@sanity/pkg-utils": "^6.11.14",
+    "@sanity/prettier-config": "^1.0.3",
+    "@storybook/react": "^8.4.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.13",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "2.1.8",
+    "eslint": "^9.16.0",
+    "jsdom": "^25.0.1",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "@repo/config-eslint": "0.0.0",
+    "@repo/package.config": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "pkg build --strict --clean --check",
+    "clean": "rimraf dist",
+    "dev": "pkg watch",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "ts:check": "tsc --noEmit"
+  }
+}

package/src/_exports/components.ts

@@ -0,0 +1,12 @@
+export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
+export {Login} from '../components/auth/Login'
+export {LoginCallback} from '../components/auth/LoginCallback'
+export {LoginError, type LoginErrorProps} from '../components/auth/LoginError'
+export {LoginLayout, type LoginLayoutProps} from '../components/auth/LoginLayout'
+export type {SanityProviderProps} from '../components/context/SanityProvider'
+export {SanityProvider} from '../components/context/SanityProvider'
+export {DocumentGridLayout} from '../components/DocumentGridLayout/DocumentGridLayout'
+export {DocumentListLayout} from '../components/DocumentListLayout/DocumentListLayout'
+export {DocumentPreviewLayout} from '../components/DocumentPreviewLayout/DocumentPreviewLayout'
+export {type DocumentPreviewLayoutProps} from '../components/DocumentPreviewLayout/DocumentPreviewLayout'
+export {LoginLinks} from '../components/Login/LoginLinks'

package/src/_exports/hooks.ts

@@ -0,0 +1,7 @@
+export {useAuthState} from '../hooks/auth/useAuthState'
+export {useAuthToken} from '../hooks/auth/useAuthToken'
+export {useCurrentUser} from '../hooks/auth/useCurrentUser'
+export {useHandleCallback} from '../hooks/auth/useHandleCallback'
+export {useLoginUrls} from '../hooks/auth/useLoginUrls'
+export {useLogOut} from '../hooks/auth/useLogOut'
+export {useSanityInstance} from '../hooks/context/useSanityInstance'

package/src/_exports/index.ts

@@ -0,0 +1,10 @@
+/**
+ * An example function that will be removed.
+ * @public
+ */
+export function main(): void {
+  //
+}
+
+// export * from './components'
+// export * from './hooks'

package/src/components/DocumentGridLayout/DocumentGridLayout.stories.tsx

@@ -0,0 +1,95 @@
+import {type Meta, type StoryObj} from '@storybook/react'
+
+import {DocumentPreviewLayout} from '../DocumentPreviewLayout/DocumentPreviewLayout.tsx'
+import {DocumentGridLayout} from './DocumentGridLayout.tsx'
+
+const meta: Meta<typeof DocumentGridLayout> = {
+  title: 'DocumentGridLayout',
+  component: DocumentGridLayout,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockDocs = [
+  {id: '1', title: 'Just a title', url: '#', docType: 'article', status: 'published'},
+  {
+    id: '2',
+    title: 'A title, but also',
+    subtitle: 'A subtitle',
+    url: '#',
+    docType: 'article',
+    status: 'draft',
+  },
+  {
+    id: '3',
+    title: 'Hello World',
+    subtitle: 'What a nice list I get to live in',
+    url: '#',
+    docType: 'image',
+    status: 'published',
+  },
+  {
+    id: '4',
+    title: 'I’ve been selected',
+    subtitle: 'I feel special',
+    selected: true,
+    url: '#',
+    docType: 'video',
+    status: 'draft',
+  },
+  {
+    id: '5',
+    title: 'A very long title that at some point might get truncated if it goes for long enough',
+    subtitle:
+      'Along with a subtitle that is quite long as well, in order to demonstrate the truncation of its text',
+    url: '#',
+    docType: 'audio',
+    status: 'published',
+  },
+  {
+    id: '6',
+    title: 'Hello World',
+    subtitle: 'What a nice list I get to live in',
+    url: '#',
+    docType: 'pdf',
+    status: 'published',
+  },
+  {id: '7', title: 'Just a title', url: '#', docType: 'note', status: 'published,'},
+  {
+    id: '8',
+    title: 'A title, but also',
+    subtitle: 'A subtitle',
+    url: '#',
+    docType: 'document',
+    status: 'draft',
+  },
+  {
+    id: '9',
+    title: 'Hello World',
+    subtitle: 'What a nice list I get to live in',
+    url: '#',
+    docType: 'biography',
+    status: 'published',
+  },
+]
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <DocumentGridLayout>
+        {mockDocs.map((doc) => (
+          <li key={doc.id}>
+            <DocumentPreviewLayout
+              title={doc.title}
+              subtitle={doc.subtitle}
+              docType={doc.docType}
+              status={doc.status}
+              url={doc.url}
+            />
+          </li>
+        ))}
+      </DocumentGridLayout>
+    )
+  },
+}

package/src/components/DocumentGridLayout/DocumentGridLayout.test.tsx

@@ -0,0 +1,42 @@
+import {describe, expect, it} from 'vitest'
+
+import {render, screen} from '../../../test/test-utils.tsx'
+import {DocumentGridLayout} from './DocumentGridLayout.tsx'
+
+describe('DocumentGridLayout', () => {
+  const mockDocuments = [
+    {
+      id: '1',
+      title: 'Test Document 1',
+      subtitle: 'Subtitle 1',
+      docType: 'post',
+      status: 'published',
+      url: '/doc/1',
+    },
+    {
+      id: '2',
+      title: 'Test Document 2',
+      subtitle: 'Subtitle 2',
+      docType: 'page',
+      status: 'draft',
+      url: '/doc/2',
+    },
+  ]
+
+  it('renders the expected content', () => {
+    render(
+      <DocumentGridLayout>
+        {mockDocuments.map((doc) => (
+          <li key={doc.id}>{doc.title}</li>
+        ))}
+      </DocumentGridLayout>,
+    )
+    const list = screen.getByRole('list')
+    expect(list.tagName).toBe('OL')
+    expect(list.dataset['ui']).toBe('DocumentGridLayout')
+
+    const items = screen.getAllByRole('listitem')
+    expect(items[0]).toContainHTML('Test Document 1')
+    expect(items[1]).toContainHTML('Test Document 2')
+  })
+})

package/src/components/DocumentGridLayout/DocumentGridLayout.tsx

@@ -0,0 +1,23 @@
+import type {PropsWithChildren, ReactElement} from 'react'
+import styled from 'styled-components'
+
+const DocumentGrid = styled.div`
+  display: grid;
+  list-style: none;
+  margin: unset;
+  padding: unset;
+  grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));
+`
+
+/**
+ * @public
+ */
+export const DocumentGridLayout = (props: PropsWithChildren): ReactElement => {
+  return (
+    <DocumentGrid as="ol" data-ui="DocumentGridLayout">
+      {props.children}
+    </DocumentGrid>
+  )
+}
+
+DocumentGridLayout.displayName = 'DocumentGridLayout'

package/src/components/DocumentListLayout/DocumentListLayout.stories.tsx

@@ -0,0 +1,95 @@
+import {type Meta, type StoryObj} from '@storybook/react'
+
+import {DocumentPreviewLayout} from '../DocumentPreviewLayout/DocumentPreviewLayout.tsx'
+import {DocumentListLayout} from './DocumentListLayout.tsx'
+
+const meta: Meta<typeof DocumentListLayout> = {
+  title: 'DocumentListLayout',
+  component: DocumentListLayout,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockDocs = [
+  {id: '1', title: 'Just a title', url: '#', docType: 'article', status: 'published'},
+  {
+    id: '2',
+    title: 'A title, but also',
+    subtitle: 'A subtitle',
+    url: '#',
+    docType: 'article',
+    status: 'draft',
+  },
+  {
+    id: '3',
+    title: 'Hello World',
+    subtitle: 'What a nice list I get to live in',
+    url: '#',
+    docType: 'image',
+    status: 'published',
+  },
+  {
+    id: '4',
+    title: 'I’ve been selected',
+    subtitle: 'I feel special',
+    selected: true,
+    url: '#',
+    docType: 'video',
+    status: 'draft',
+  },
+  {
+    id: '5',
+    title: 'A very long title that at some point might get truncated if it goes for long enough',
+    subtitle:
+      'Along with a subtitle that is quite long as well, in order to demonstrate the truncation of its text',
+    url: '#',
+    docType: 'audio',
+    status: 'published',
+  },
+  {
+    id: '6',
+    title: 'Hello World',
+    subtitle: 'What a nice list I get to live in',
+    url: '#',
+    docType: 'pdf',
+    status: 'published',
+  },
+  {id: '7', title: 'Just a title', url: '#', docType: 'note', status: 'published,'},
+  {
+    id: '8',
+    title: 'A title, but also',
+    subtitle: 'A subtitle',
+    url: '#',
+    docType: 'document',
+    status: 'draft',
+  },
+  {
+    id: '9',
+    title: 'Hello World',
+    subtitle: 'What a nice list I get to live in',
+    url: '#',
+    docType: 'biography',
+    status: 'published',
+  },
+]
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <DocumentListLayout>
+        {mockDocs.map((doc) => (
+          <li key={doc.id}>
+            <DocumentPreviewLayout
+              title={doc.title}
+              subtitle={doc.subtitle}
+              docType={doc.docType}
+              status={doc.status}
+              url={doc.url}
+            />
+          </li>
+        ))}
+      </DocumentListLayout>
+    )
+  },
+}

package/src/components/DocumentListLayout/DocumentListLayout.test.tsx

@@ -0,0 +1,42 @@
+import {describe, expect, it} from 'vitest'
+
+import {render, screen} from '../../../test/test-utils.tsx'
+import {DocumentListLayout} from './DocumentListLayout.tsx'
+
+describe('DocumentListLayout', () => {
+  const mockDocuments = [
+    {
+      id: '1',
+      title: 'Test Document 1',
+      subtitle: 'Subtitle 1',
+      docType: 'post',
+      status: 'published',
+      url: '/doc/1',
+    },
+    {
+      id: '2',
+      title: 'Test Document 2',
+      subtitle: 'Subtitle 2',
+      docType: 'page',
+      status: 'draft',
+      url: '/doc/2',
+    },
+  ]
+
+  it('renders the expected content', () => {
+    render(
+      <DocumentListLayout>
+        {mockDocuments.map((doc) => (
+          <li key={doc.id}>{doc.title}</li>
+        ))}
+      </DocumentListLayout>,
+    )
+    const list = screen.getByRole('list')
+    expect(list.tagName).toBe('OL')
+    expect(list.dataset['ui']).toBe('DocumentListLayout')
+
+    const items = screen.getAllByRole('listitem')
+    expect(items[0]).toContainHTML('Test Document 1')
+    expect(items[1]).toContainHTML('Test Document 2')
+  })
+})

package/src/components/DocumentListLayout/DocumentListLayout.tsx

@@ -0,0 +1,15 @@
+import {Stack} from '@sanity/ui'
+import type {PropsWithChildren, ReactElement} from 'react'
+
+/**
+ * @public
+ */
+export const DocumentListLayout = (props: PropsWithChildren): ReactElement => {
+  return (
+    <Stack as="ol" data-ui="DocumentListLayout">
+      {props.children}
+    </Stack>
+  )
+}
+
+DocumentListLayout.displayName = 'DocumentListLayout'