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

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'

package/src/components/DocumentPreviewLayout/DocumentPreviewLayout.md

@@ -1,49 +0,0 @@
-# DocumentPreviewLayout
-
-The DocumentPreviewLayout component is used to render a compact representation of a [document](#). These previews are often rendered for each document within a [DocumentListUI component](#), but can also be rendered as standalone components.
-
-Document previews surface the following information about each document:
-
-- The document's title
-- A subtitle (optional)
-- A piece of media, such as an icon or image (optional)
-- The document type (optional)
-- The document’s state, such as draft or published (optional)
-
-Additionally, each document preview can take a `url` prop to enable navigation changes when selecting the document, and a `selected` prop to indicate that a given document has been selected.
-
-![An image of the stock preview component]()
-
-```jsx
-<DocumentPreviewLayout
-  title={doc.title}
-  subtitle={doc.subtitle}
-  media={doc.media}
-  docType={doc.type}
-  docState={doc.published ? 'published' : 'draft'}
-  url={doc.url}
-  selected={true}
-/>
-```
-
-## Installation
-
-```shell
-npm install @sanity/sdk
-```
-
-```javascript
-import DocumentPreviewLayout from `@sanity/sdk/react/DocumentPreviewLayout`
-```
-
-## Props
-
-| Name       | Type                 | Description                                                 |
-| ---------- | -------------------- | ----------------------------------------------------------- |
-| `title`    | `string`             | The title to display for the document                       |
-| `subtitle` | `string` (optional)  | The subtitle to display for the document                    |
-| `media`    | `node` (optional)    | The image, icon, or other node to display with the document |
-| `docType`  | `string` (optional)  | The document type                                           |
-| `docState` | `string` (optional)  | The state of the document, such as 'published' or 'draft'   |
-| `url`      | `string` (optional)  | The URL to navigate to when selecting the document          |
-| `selected` | `boolean` (optional) | The `selected` state of the document; defaults to `false`   |

package/src/components/DocumentPreviewLayout/DocumentPreviewLayout.stories.tsx

@@ -1,39 +0,0 @@
-import {type Meta, type StoryObj} from '@storybook/react'
-
-import {DocumentPreviewLayout} from './DocumentPreviewLayout'
-
-const meta: Meta<typeof DocumentPreviewLayout> = {
-  title: 'DocumentPreviewLayout',
-  component: DocumentPreviewLayout,
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Basic: Story = {
-  args: {
-    title: 'Hello World',
-  },
-  render: (props) => {
-    return <DocumentPreviewLayout {...props} />
-  },
-}
-
-export const AllProps: Story = {
-  args: {
-    title: 'Hello World',
-    subtitle: 'It’s nice to meet you',
-    onClick: () => {
-      alert('Hello World!')
-    },
-    media: {
-      type: 'image-asset',
-      url: 'https://picsum.photos/80/80',
-    },
-    docType: 'article',
-    status: 'published',
-  },
-  render: (props) => {
-    return <DocumentPreviewLayout {...props} />
-  },
-}

package/src/components/DocumentPreviewLayout/DocumentPreviewLayout.test.tsx

@@ -1,30 +0,0 @@
-import {render, screen} from '../../../test/test-utils.tsx'
-import {DocumentPreviewLayout} from './DocumentPreviewLayout'
-
-describe('DocumentPreviewLayout', () => {
-  it('renders the data it receives via props', () => {
-    render(<DocumentPreviewLayout title="Test Preview" subtitle="It works" />)
-    expect(screen.getByText('Test Preview')).toBeVisible()
-    expect(screen.getByText('It works')).toBeVisible()
-  })
-
-  it('renders empty when no title is provided (todo)', () => {
-    const {container} = render(<DocumentPreviewLayout title="" />)
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it('renders the doctype when one is provided', () => {
-    render(<DocumentPreviewLayout title="Test Preview" docType="article" />)
-    expect(screen.getByText('article')).toBeVisible()
-  })
-
-  it('renders the published status when provided', () => {
-    render(<DocumentPreviewLayout title="Test Preview" status="published" />)
-    expect(screen.getByText('published')).toBeVisible()
-  })
-
-  it('renders the draft status when provided', () => {
-    render(<DocumentPreviewLayout title="Test Preview" status="draft" />)
-    expect(screen.getByText('draft')).toBeVisible()
-  })
-})

package/src/components/DocumentPreviewLayout/DocumentPreviewLayout.tsx

@@ -1,171 +0,0 @@
-import 'inter-ui/inter.css'
-import '../../css/styles.css'
-
-import {DocumentIcon} from '@sanity/icons'
-import {forwardRef} from 'react'
-
-/**
- * @public
- */
-export interface DocumentPreviewLayoutProps {
-  docType?: string
-  media?: {type: string; url: string} | null | undefined
-  onClick?: () => void
-  selected?: boolean
-  status?: string
-  subtitle?: string
-  title: string
-}
-
-/**
- * This is a component that renders a document preview.
- *
- * @public
- *
- * @param props - The props for the DocumentPreviewLayout component.
- * @returns - The DocumentPreviewLayout component.
- */
-export const DocumentPreviewLayout = forwardRef(
-  (
-    {
-      docType,
-      media,
-      onClick,
-      selected = false,
-      status = '',
-      subtitle = '',
-      title,
-    }: DocumentPreviewLayoutProps,
-    ref: React.Ref<HTMLElement>,
-  ): JSX.Element => {
-    // @TODO: empty state
-    if (!title) {
-      return <></>
-    }
-
-    let PreviewMedia
-
-    if (media?.url) {
-      const baseUrl = new URL(media.url)
-      baseUrl.searchParams.set('h', '66')
-      baseUrl.searchParams.set('w', '66')
-      baseUrl.searchParams.set('fit', 'crop')
-      const mediaUrl = baseUrl.toString()
-      // media url string params for sanity img
-      PreviewMedia = <img src={mediaUrl} alt="" />
-    } else {
-      PreviewMedia = <DocumentIcon />
-    }
-
-    return (
-      <>
-        <style>{`
-          .DocumentPreviewLayout {
-            --_hoverFocusBg: light-dark(var(--shade-11), var(--tint-1));
-            --_selectedBg: light-dark(var(--blue-10), var(--blue-2));
-            --_selectedFg: light-dark(var(--gray-1), var(--gray-10));
-            --_titleFg: light-dark(var(--gray-1), var(--gray-10));
-            --_subtitleFg: light-dark(var(--gray-4), var(--gray-7));
-            --_docTypeFg: light-dark(var(--gray-1), var(--gray-10));
-            --_docTypeBg: light-dark(var(--shade-10), var(--tint-1));
-            --_publishedFg: light-dark(var(--gray-1), var(--gray-10));
-            --_publishedBg: light-dark(var(--green-10), var(--green-2));
-            --_draftFg: light-dark(var(--gray-1), var(--gray-10));
-            --_draftBg: light-dark(var(--yellow-6), var(--yellow-2));
-
-            appearance: none;
-
-            &:has(:hover, focus) {
-              background-color: var(--hoverFocusBg, var(--_hoverFocusBg));
-            }
-
-            &.selected {
-              background-color: var(--selectedBg, var(--_selectedBg));
-              color: var(--selectedFg, var(--_selectedFg));
-            }
-
-            .Title {
-              color: var(--titleFg, var(--_titleFg));
-            }
-
-            &:not(.selected) .Subtitle {
-              color: var(--subtitleFg, var(--_subtitleFg));
-            }
-
-            .Media {
-              aspect-ratio: 1;
-              inline-size: 33px;
-              border-color: var(--gray-8);
-            }
-
-            .DocType {
-              color: var(--docTypeFg, var(--_docTypeFg));
-              background-color: var(--docTypeBg, var(--_docTypeBg));
-            }
-
-            .Published {
-              color: var(--publishedFg, var(--_publishedFg));
-              background-color: var(--publishedBg, var(--_publishedBg));
-            }
-
-            .Draft {
-              color: var(--draftFg, var(--_draftFg));
-              background-color: var(--draftBg, var(--_draftBg));
-            }
-
-            :is(.Published, .Draft) figcaption {
-              @container (width < 52ch) {
-                clip: rect(0 0 0 0);
-                clip-path: inset(50%);
-                height: 1px;
-                overflow: hidden;
-                position: absolute;
-                white-space: nowrap;
-                width: 1px;
-              }
-            }
-
-          }
-        `}</style>
-        <button
-          onClick={onClick}
-          ref={ref as React.Ref<HTMLButtonElement>}
-          className={`DocumentPreviewLayout block si-100 text-start p-1 radius1 ${selected ? 'selected' : ''}`}
-        >
-          <div className="container-inline flex align-items-center gap-2 font-sans">
-            <figure className="Media border0 border-solid flex-none flex align-items-center justify-content-center object-cover">
-              {PreviewMedia}
-            </figure>
-
-            <div className="leading2 flex-grow overflow-hidden">
-              <p className="Title text-1 font-medium truncate">{title}</p>
-              {subtitle && <p className="Subtitle text-1 truncate">{subtitle}</p>}
-            </div>
-
-            {docType && (
-              <figure className="DocType inline-block pb-5 pi-3 radius-pill text-2">
-                <figcaption className="inline">{docType}</figcaption>
-              </figure>
-            )}
-
-            {/* @TODO: finalize UI for this */}
-            {status === 'published' && (
-              <figure className="Published inline-block pb-5 pi-3 radius-pill text-2">
-                ✔︎ <figcaption className="inline">published</figcaption>
-              </figure>
-            )}
-
-            {/* @TODO: finalize UI for this */}
-            {status === 'draft' && (
-              <figure className="Draft inline-block pb-5 pi-3 radius-pill text-2">
-                ⛑︎ <figcaption className="inline">draft</figcaption>
-              </figure>
-            )}
-          </div>
-        </button>
-      </>
-    )
-  },
-)
-
-DocumentPreviewLayout.displayName = 'DocumentPreviewLayout'