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

package/dist/hooks.d.ts

@@ -1,186 +0,0 @@
-import {AuthProvider} from '@sanity/sdk'
-import {AuthState} from '@sanity/sdk'
-import {CurrentUser} from '@sanity/types'
-import {DocumentHandle} from '@sanity/sdk'
-import {DocumentListOptions} from '@sanity/sdk'
-import {PreviewValue} 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 const 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
-
-/**
- * @public
- */
-export declare interface UseDocuments {
-  loadMore: () => void
-  results: DocumentHandle[]
-  isPending: boolean
-  hasMore: boolean
-  count: number
-}
-
-/**
- * Hook to get the list of documents for specified options
- *
- * @public
- *
- * @param options - options for the document list
- * @returns result of the document list and function to load more
- */
-export declare function useDocuments(options?: DocumentListOptions): UseDocuments
-
-/**
- * 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 const useHandleCallback: () => (
-  locationHref?: string | undefined,
-) => Promise<string | false>
-
-/**
- * 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: () => () => Promise<void>
-
-/**
- * @alpha
- */
-export declare function usePreview({
-  document: {_id, _type},
-  ref,
-}: UsePreviewOptions): [PreviewValue, boolean]
-
-/**
- * @alpha
- */
-export declare interface UsePreviewOptions {
-  document: DocumentHandle
-  ref: HTMLElement | null
-}
-
-/**
- * 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

@@ -1,81 +0,0 @@
-import { createStateSourceHook, useSanityInstance } from "./_chunks-es/useLogOut.js";
-import { useAuthState, useHandleCallback, useLogOut, useLoginUrls } from "./_chunks-es/useLogOut.js";
-import { getTokenState, getCurrentUserState, createDocumentListStore, getPreviewState, resolvePreview } from "@sanity/sdk";
-import { useState, useEffect, useCallback, useSyncExternalStore, useMemo } from "react";
-import { Observable, startWith, distinctUntilChanged, switchMap, EMPTY } from "rxjs";
-const useAuthToken = createStateSourceHook(getTokenState), useCurrentUser = createStateSourceHook(getCurrentUserState), STABLE_EMPTY = {
-  results: [],
-  isPending: !1,
-  hasMore: !1,
-  count: 0
-};
-function useDocuments(options = {}) {
-  const instance = useSanityInstance(), [ref] = useState(() => ({
-    storeInstance: null,
-    getCurrent: () => STABLE_EMPTY,
-    initialOptions: options
-  })), serializedOptions = JSON.stringify(options);
-  useEffect(() => {
-    ref.storeInstance?.setOptions(JSON.parse(serializedOptions));
-  }, [ref, serializedOptions]);
-  const subscribe = useCallback(
-    (onStoreChanged) => {
-      ref.storeInstance = createDocumentListStore(instance), ref.storeInstance.setOptions(ref.initialOptions);
-      const state2 = ref.storeInstance.getState();
-      ref.getCurrent = state2.getCurrent;
-      const unsubscribe = state2.subscribe(onStoreChanged);
-      return () => {
-        unsubscribe(), ref.storeInstance?.dispose();
-      };
-    },
-    [instance, ref]
-  ), getSnapshot = useCallback(() => ref.getCurrent(), [ref]), state = useSyncExternalStore(subscribe, getSnapshot);
-  return { loadMore: useCallback(() => {
-    ref.storeInstance?.loadMore();
-  }, [ref]), ...state };
-}
-function usePreview({
-  document: { _id, _type },
-  ref
-}) {
-  const instance = useSanityInstance(), stateSource = useMemo(
-    () => getPreviewState(instance, { document: { _id, _type } }),
-    [instance, _id, _type]
-  ), subscribe = useCallback(
-    (onStoreChanged) => {
-      const subscription = new Observable((observer) => {
-        if (typeof IntersectionObserver > "u") return;
-        const intersectionObserver = new IntersectionObserver(
-          ([entry]) => observer.next(entry.isIntersecting),
-          { rootMargin: "0px", threshold: 0 }
-        );
-        return ref && intersectionObserver.observe(ref), () => intersectionObserver.disconnect();
-      }).pipe(
-        startWith(!1),
-        distinctUntilChanged(),
-        switchMap(
-          (isVisible) => isVisible ? new Observable((obs) => stateSource.subscribe(() => obs.next())) : EMPTY
-        )
-      ).subscribe({ next: onStoreChanged });
-      return () => subscription.unsubscribe();
-    },
-    [stateSource, ref]
-  ), getSnapshot = useCallback(() => {
-    const previewTuple = stateSource.getCurrent();
-    if (!previewTuple[0]) throw resolvePreview(instance, { document: { _id, _type } });
-    return previewTuple;
-  }, [_id, _type, instance, stateSource]);
-  return useSyncExternalStore(subscribe, getSnapshot);
-}
-export {
-  useAuthState,
-  useAuthToken,
-  useCurrentUser,
-  useDocuments,
-  useHandleCallback,
-  useLogOut,
-  useLoginUrls,
-  usePreview,
-  useSanityInstance
-};
-//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.js","sources":["../src/hooks/auth/useAuthToken.tsx","../src/hooks/auth/useCurrentUser.tsx","../src/hooks/documentCollection/useDocuments.ts","../src/hooks/preview/usePreview.tsx"],"sourcesContent":["import {getTokenState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\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 = createStateSourceHook(getTokenState)\n","import {getCurrentUserState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\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 = createStateSourceHook(getCurrentUserState)\n","import {createDocumentListStore, type DocumentHandle, type DocumentListOptions} from '@sanity/sdk'\nimport {useCallback, useEffect, useState, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @public\n */\nexport interface UseDocuments {\n  loadMore: () => void\n  results: DocumentHandle[]\n  isPending: boolean\n  hasMore: boolean\n  count: number\n}\n\ntype DocumentListStore = ReturnType<typeof createDocumentListStore>\ntype DocumentListState = ReturnType<DocumentListStore['getState']>['getCurrent']\nconst STABLE_EMPTY = {\n  results: [],\n  isPending: false,\n  hasMore: false,\n  count: 0,\n}\n\n/**\n * Hook to get the list of documents for specified options\n *\n * @public\n *\n * @param options - options for the document list\n * @returns result of the document list and function to load more\n */\nexport function useDocuments(options: DocumentListOptions = {}): UseDocuments {\n  const instance = useSanityInstance()\n\n  // NOTE: useState is used because it guaranteed to return a stable reference\n  // across renders\n  const [ref] = useState<{\n    storeInstance: DocumentListStore | null\n    getCurrent: DocumentListState\n    initialOptions: DocumentListOptions\n  }>(() => ({\n    storeInstance: null,\n    getCurrent: () => STABLE_EMPTY,\n    initialOptions: options,\n  }))\n\n  // serialize options to ensure it only calls `setOptions` when the values\n  // themselves changes (in cases where devs put config inline)\n  const serializedOptions = JSON.stringify(options)\n  useEffect(() => {\n    ref.storeInstance?.setOptions(JSON.parse(serializedOptions))\n  }, [ref, serializedOptions])\n\n  const subscribe = useCallback(\n    (onStoreChanged: () => void) => {\n      // to match the lifecycle of `useSyncExternalState`, we create the store\n      // instance after subscribe and mutate the ref to connect everything\n      ref.storeInstance = createDocumentListStore(instance)\n      ref.storeInstance.setOptions(ref.initialOptions)\n      const state = ref.storeInstance.getState()\n      ref.getCurrent = state.getCurrent\n      const unsubscribe = state.subscribe(onStoreChanged)\n\n      return () => {\n        // unsubscribe to clean up the state subscriptions\n        unsubscribe()\n        // dispose of the instance\n        ref.storeInstance?.dispose()\n      }\n    },\n    [instance, ref],\n  )\n\n  const getSnapshot = useCallback(() => {\n    return ref.getCurrent()\n  }, [ref])\n\n  const state = useSyncExternalStore(subscribe, getSnapshot)\n\n  const loadMore = useCallback(() => {\n    ref.storeInstance?.loadMore()\n  }, [ref])\n\n  return {loadMore, ...state}\n}\n","import {type DocumentHandle, getPreviewState, type PreviewValue, resolvePreview} from '@sanity/sdk'\nimport {useCallback, useMemo, useSyncExternalStore} from 'react'\nimport {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxjs'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @alpha\n */\nexport interface UsePreviewOptions {\n  document: DocumentHandle\n  ref: HTMLElement | null\n}\n\n/**\n * @alpha\n */\nexport function usePreview({\n  document: {_id, _type},\n  ref,\n}: UsePreviewOptions): [PreviewValue, boolean] {\n  const instance = useSanityInstance()\n\n  const stateSource = useMemo(\n    () => getPreviewState(instance, {document: {_id, _type}}),\n    [instance, _id, _type],\n  )\n\n  // Create subscribe function for useSyncExternalStore\n  const subscribe = useCallback(\n    (onStoreChanged: () => void) => {\n      const subscription = new Observable<boolean>((observer) => {\n        // for environments that don't have an intersection observer\n        if (typeof IntersectionObserver === 'undefined') return\n\n        const intersectionObserver = new IntersectionObserver(\n          ([entry]) => observer.next(entry.isIntersecting),\n          {rootMargin: '0px', threshold: 0},\n        )\n        if (ref) intersectionObserver.observe(ref)\n        return () => intersectionObserver.disconnect()\n      })\n        .pipe(\n          startWith(false),\n          distinctUntilChanged(),\n          switchMap((isVisible) =>\n            isVisible\n              ? new Observable<void>((obs) => {\n                  return stateSource.subscribe(() => obs.next())\n                })\n              : EMPTY,\n          ),\n        )\n        .subscribe({next: onStoreChanged})\n\n      return () => subscription.unsubscribe()\n    },\n    [stateSource, ref],\n  )\n\n  // Create getSnapshot function to return current state\n  const getSnapshot = useCallback(() => {\n    const previewTuple = stateSource.getCurrent()\n    if (!previewTuple[0]) throw resolvePreview(instance, {document: {_id, _type}})\n    return previewTuple as [PreviewValue, boolean]\n  }, [_id, _type, instance, stateSource])\n\n  return useSyncExternalStore(subscribe, getSnapshot)\n}\n"],"names":["state"],"mappings":";;;;;AASa,MAAA,eAAe,sBAAsB,aAAa,GCAlD,iBAAiB,sBAAsB,mBAAmB,GCSjE,eAAe;AAAA,EACnB,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AACT;AAUgB,SAAA,aAAa,UAA+B,IAAkB;AAC5E,QAAM,WAAW,kBAAkB,GAI7B,CAAC,GAAG,IAAI,SAIX,OAAO;AAAA,IACR,eAAe;AAAA,IACf,YAAY,MAAM;AAAA,IAClB,gBAAgB;AAAA,EAChB,EAAA,GAII,oBAAoB,KAAK,UAAU,OAAO;AAChD,YAAU,MAAM;AACd,QAAI,eAAe,WAAW,KAAK,MAAM,iBAAiB,CAAC;AAAA,EAAA,GAC1D,CAAC,KAAK,iBAAiB,CAAC;AAE3B,QAAM,YAAY;AAAA,IAChB,CAAC,mBAA+B;AAG1B,UAAA,gBAAgB,wBAAwB,QAAQ,GACpD,IAAI,cAAc,WAAW,IAAI,cAAc;AACzCA,YAAAA,SAAQ,IAAI,cAAc,SAAS;AACzC,UAAI,aAAaA,OAAM;AACjB,YAAA,cAAcA,OAAM,UAAU,cAAc;AAElD,aAAO,MAAM;AAEC,uBAEZ,IAAI,eAAe,QAAQ;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,GAAG;AAAA,EAGV,GAAA,cAAc,YAAY,MACvB,IAAI,WAAW,GACrB,CAAC,GAAG,CAAC,GAEF,QAAQ,qBAAqB,WAAW,WAAW;AAMlD,SAAA,EAAC,UAJS,YAAY,MAAM;AACjC,QAAI,eAAe,SAAS;AAAA,KAC3B,CAAC,GAAG,CAAC,GAEU,GAAG,MAAK;AAC5B;ACrEO,SAAS,WAAW;AAAA,EACzB,UAAU,EAAC,KAAK,MAAK;AAAA,EACrB;AACF,GAA+C;AACvC,QAAA,WAAW,qBAEX,cAAc;AAAA,IAClB,MAAM,gBAAgB,UAAU,EAAC,UAAU,EAAC,KAAK,MAAK,GAAE;AAAA,IACxD,CAAC,UAAU,KAAK,KAAK;AAAA,KAIjB,YAAY;AAAA,IAChB,CAAC,mBAA+B;AAC9B,YAAM,eAAe,IAAI,WAAoB,CAAC,aAAa;AAErD,YAAA,OAAO,uBAAyB,IAAa;AAEjD,cAAM,uBAAuB,IAAI;AAAA,UAC/B,CAAC,CAAC,KAAK,MAAM,SAAS,KAAK,MAAM,cAAc;AAAA,UAC/C,EAAC,YAAY,OAAO,WAAW,EAAC;AAAA,QAClC;AACA,eAAI,OAAK,qBAAqB,QAAQ,GAAG,GAClC,MAAM,qBAAqB,WAAW;AAAA,MAC9C,CAAA,EACE;AAAA,QACC,UAAU,EAAK;AAAA,QACf,qBAAqB;AAAA,QACrB;AAAA,UAAU,CAAC,cACT,YACI,IAAI,WAAiB,CAAC,QACb,YAAY,UAAU,MAAM,IAAI,KAAK,CAAC,CAC9C,IACD;AAAA,QAAA;AAAA,MAGP,EAAA,UAAU,EAAC,MAAM,gBAAe;AAE5B,aAAA,MAAM,aAAa,YAAY;AAAA,IACxC;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,EAAA,GAIb,cAAc,YAAY,MAAM;AAC9B,UAAA,eAAe,YAAY,WAAW;AAC5C,QAAI,CAAC,aAAa,CAAC,EAAS,OAAA,eAAe,UAAU,EAAC,UAAU,EAAC,KAAK,SAAO;AACtE,WAAA;AAAA,KACN,CAAC,KAAK,OAAO,UAAU,WAAW,CAAC;AAE/B,SAAA,qBAAqB,WAAW,WAAW;AACpD;"}

package/src/_exports/components.ts

@@ -1,13 +0,0 @@
-export {AuthBoundary, type AuthBoundaryProps} from '../components/auth/AuthBoundary'
-export {AuthError} from '../components/auth/AuthError'
-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

@@ -1,9 +0,0 @@
-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'
-export {type UseDocuments, useDocuments} from '../hooks/documentCollection/useDocuments'
-export {usePreview, type UsePreviewOptions} from '../hooks/preview/usePreview'

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

@@ -1,113 +0,0 @@
-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',
-    docType: 'article',
-    status: 'draft',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/75/75',
-    },
-  },
-  {
-    id: '3',
-    title: 'Hello World',
-    subtitle: 'What a nice list I get to live in',
-    docType: 'image',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/80/80',
-    },
-  },
-  {
-    id: '4',
-    title: 'I’ve been selected',
-    subtitle: 'I feel special',
-    selected: true,
-    docType: 'video',
-    status: 'draft',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/100/100',
-    },
-  },
-  {
-    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',
-    docType: 'audio',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/75/75',
-    },
-  },
-  {
-    id: '6',
-    title: 'Hello World',
-    subtitle: 'What a nice list I get to live in',
-    docType: 'pdf',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/75/75',
-    },
-  },
-  {id: '7', title: 'Just a title', url: '#', docType: 'note', status: 'published,'},
-  {
-    id: '8',
-    title: 'A title, but also',
-    subtitle: 'A subtitle',
-    docType: 'document',
-    status: 'draft',
-  },
-  {
-    id: '9',
-    title: 'Hello World',
-    subtitle: 'What a nice list I get to live in',
-    docType: 'biography',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/200/200',
-    },
-  },
-]
-
-export const Default: Story = {
-  render: () => {
-    return (
-      <DocumentGridLayout>
-        {mockDocs.map((doc) => (
-          <li key={doc.id}>
-            <DocumentPreviewLayout
-              title={doc.title}
-              subtitle={doc.subtitle}
-              media={doc.media}
-              selected={doc.selected}
-              docType={doc.docType}
-              status={doc.status}
-            />
-          </li>
-        ))}
-      </DocumentGridLayout>
-    )
-  },
-}

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

@@ -1,42 +0,0 @@
-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.classList).toContain('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

@@ -1,21 +0,0 @@
-import '../../css/styles.css'
-
-import type {PropsWithChildren, ReactElement} from 'react'
-
-/**
- * @public
- */
-export const DocumentGridLayout = (props: PropsWithChildren): ReactElement => {
-  return (
-    <>
-      <style>{`
-        .DocumentGridLayout {
-          grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));
-        }
-      `}</style>
-      <ol className="DocumentGridLayout list-none grid">{props.children}</ol>
-    </>
-  )
-}
-
-DocumentGridLayout.displayName = 'DocumentGridLayout'

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

@@ -1,105 +0,0 @@
-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',
-    docType: 'article',
-    status: 'draft',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/75/75',
-    },
-  },
-  {
-    id: '3',
-    title: 'Hello World',
-    subtitle: 'What a nice list I get to live in',
-    docType: 'image',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/100/100',
-    },
-  },
-  {
-    id: '4',
-    title: 'I’ve been selected',
-    subtitle: 'I feel special',
-    selected: true,
-    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',
-    docType: 'audio',
-    status: 'published',
-  },
-  {
-    id: '6',
-    title: 'Hello World',
-    subtitle: 'What a nice list I get to live in',
-    docType: 'pdf',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/80/80',
-    },
-  },
-  {id: '7', title: 'Just a title', url: '#', docType: 'note', status: 'published,'},
-  {
-    id: '8',
-    title: 'A title, but also',
-    subtitle: 'A subtitle',
-    docType: 'document',
-    status: 'draft',
-  },
-  {
-    id: '9',
-    title: 'Hello World',
-    subtitle: 'What a nice list I get to live in',
-    docType: 'biography',
-    status: 'published',
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/200/200',
-    },
-  },
-]
-
-export const Default: Story = {
-  render: () => {
-    return (
-      <DocumentListLayout>
-        {mockDocs.map((doc) => (
-          <li key={doc.id}>
-            <DocumentPreviewLayout
-              title={doc.title}
-              subtitle={doc.subtitle}
-              media={doc.media}
-              selected={doc.selected}
-              docType={doc.docType}
-              status={doc.status}
-            />
-          </li>
-        ))}
-      </DocumentListLayout>
-    )
-  },
-}

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

@@ -1,42 +0,0 @@
-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.classList).toContain('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

@@ -1,12 +0,0 @@
-import '../../css/styles.css'
-
-import type {PropsWithChildren, ReactElement} from 'react'
-
-/**
- * @public
- */
-export const DocumentListLayout = (props: PropsWithChildren): ReactElement => {
-  return <ol className="DocumentListLayout list-none">{props.children}</ol>
-}
-
-DocumentListLayout.displayName = 'DocumentListLayout'