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

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'

package/src/components/context/SanityProvider.tsx

@@ -1,42 +0,0 @@
-import {type SanityInstance} from '@sanity/sdk'
-import {createContext, type ReactElement} from 'react'
-
-/**
- * @public
- */
-export interface SanityProviderProps {
-  children: React.ReactNode
-  sanityInstance: SanityInstance
-}
-
-export const SanityInstanceContext = createContext<SanityInstance | null>(null)
-
-/**
- * Top-level context provider that provides a Sanity configuration instance.
- * This must wrap any Sanity SDK React component.
- * @public
- * @param props - Sanity project and dataset configuration
- * @returns Rendered component
- * @example
- * ```tsx
- * import {createSanityInstance} from '@sanity/sdk'
- * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
- *
- * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
- *
- * export default function MyApp() {
- *   return (
- *     <SanityProvider sanityInstance={sanityInstance}>
- *      <ExampleComponent />
- *     </SanityProvider>
- *   )
- * }
- * ```
- */
-export const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {
-  return (
-    <SanityInstanceContext.Provider value={sanityInstance}>
-      {children}
-    </SanityInstanceContext.Provider>
-  )
-}

package/src/css/css.config.js

@@ -1,220 +0,0 @@
-export default {
-  color: {
-    spots: {
-      'tint-0': 'hsla(0, 0%, 100%, 0.035)',
-      'tint-1': 'hsla(0, 0%, 100%, 0.1)',
-      'tint-2': 'hsla(0, 0%, 100%, 0.19)',
-      'tint-3': 'hsla(0, 0%, 100%, 0.28)',
-      'tint-4': 'hsla(0, 0%, 100%, 0.36)',
-      'tint-5': 'hsla(0, 0%, 100%, 0.45)',
-      'tint-6': 'hsla(0, 0%, 100%, 0.55)',
-      'tint-7': 'hsla(0, 0%, 100%, 0.64)',
-      'tint-8': 'hsla(0, 0%, 100%, 0.73)',
-      'tint-9': 'hsla(0, 0%, 100%, 0.815)',
-      'tint-10': 'hsla(0, 0%, 100%, 0.895)',
-      'tint-11': 'hsla(0, 0%, 100%, 0.94)',
-
-      'shade-0': 'hsla(0, 0%, 0%, 0.94)',
-      'shade-1': 'hsla(0, 0%, 0%, 0.899)',
-      'shade-2': 'hsla(0, 0%, 0%, 0.8)',
-      'shade-3': 'hsla(0, 0%, 0%, 0.69)',
-      'shade-4': 'hsla(0, 0%, 0%, 0.6)',
-      'shade-5': 'hsla(0, 0%, 0%, 0.5)',
-      'shade-6': 'hsla(0, 0%, 0%, 0.41)',
-      'shade-7': 'hsla(0, 0%, 0%, 0.32)',
-      'shade-8': 'hsla(0, 0%, 0%, 0.24)',
-      'shade-9': 'hsla(0, 0%, 0%, 0.16)',
-      'shade-10': 'hsla(0, 0%, 0%, 0.07)',
-      'shade-11': 'hsla(0, 0%, 0%, 0.035)',
-
-      'gray-0': '#000000',
-      'gray-1': '#1a1a1a',
-      'gray-2': '#353535',
-      'gray-3': '#4e4e4e',
-      'gray-4': '#686868',
-      'gray-5': '#808080',
-      'gray-6': '#979797',
-      'gray-7': '#adadad',
-      'gray-8': '#c2c2c2',
-      'gray-9': '#d7d7d7',
-      'gray-10': '#ebebeb',
-      'gray-11': '#ffffff',
-
-      'slate-gray-0': '#0c0c0e',
-      'slate-gray-1': '#26262c',
-      'slate-gray-2': '#403f49',
-      'slate-gray-3': '#595865',
-      'slate-gray-4': '#71707f',
-      'slate-gray-5': '#878697',
-      'slate-gray-6': '#9d9cad',
-      'slate-gray-7': '#b1b0c0',
-      'slate-gray-8': '#c4c4d0',
-      'slate-gray-9': '#d7d6e0',
-      'slate-gray-10': '#e8e8ee',
-      'slate-gray-11': '#fafafb',
-
-      'blue-0': '#060c16',
-      'blue-1': '#122443',
-      'blue-2': '#1f3c6f',
-      'blue-3': '#2e5397',
-      'blue-4': '#3e6aba',
-      'blue-5': '#5180d7',
-      'blue-6': '#6696ec',
-      'blue-7': '#7faaf9',
-      'blue-8': '#99beff',
-      'blue-9': '#b6d2ff',
-      'blue-10': '#d4e4ff',
-      'blue-11': '#f2f7ff',
-
-      'indigo-0': '#0d0a18',
-      'indigo-1': '#271f4b',
-      'indigo-2': '#41337b',
-      'indigo-3': '#5b48a6',
-      'indigo-4': '#735dcc',
-      'indigo-5': '#8a72ea',
-      'indigo-6': '#a088ff',
-      'indigo-7': '#b39eff',
-      'indigo-8': '#c6b3ff',
-      'indigo-9': '#d7c9ff',
-      'indigo-10': '#e8e0ff',
-      'indigo-11': '#f8f6ff',
-
-      'violet-0': '#160a1b',
-      'violet-1': '#3b1a47',
-      'violet-2': '#5e2a72',
-      'violet-3': '#7f3c98',
-      'violet-4': '#9d4eba',
-      'violet-5': '#b662d6',
-      'violet-6': '#cb77eb',
-      'violet-7': '#db8ef8',
-      'violet-8': '#e7a6ff',
-      'violet-9': '#f0c0ff',
-      'violet-10': '#f7daff',
-      'violet-11': '#fdf4ff',
-
-      'magenta-0': '#130811',
-      'magenta-1': '#381831',
-      'magenta-2': '#5c2850',
-      'magenta-3': '#803870',
-      'magenta-4': '#a4488f',
-      'magenta-5': '#c858af',
-      'magenta-6': '#db6ec3',
-      'magenta-7': '#e289ce',
-      'magenta-8': '#e8a4d9',
-      'magenta-9': '#efbfe4',
-      'magenta-10': '#f6daf0',
-      'magenta-11': '#fdf5fb',
-
-      'red-0': '#130707',
-      'red-1': '#3b1516',
-      'red-2': '#632325',
-      'red-3': '#8b3233',
-      'red-4': '#b34042',
-      'red-5': '#db4e51',
-      'red-6': '#f06467',
-      'red-7': '#f28183',
-      'red-8': '#f59d9f',
-      'red-9': '#f8babb',
-      'red-10': '#fbd7d7',
-      'red-11': '#fef3f3',
-
-      'red-orange-0': '#120705',
-      'red-orange-1': '#371410',
-      'red-orange-2': '#5c221a',
-      'red-orange-3': '#813025',
-      'red-orange-4': '#a63e2f',
-      'red-orange-5': '#cc4c3a',
-      'red-orange-6': '#e06150',
-      'red-orange-7': '#e67f70',
-      'red-orange-8': '#eb9c91',
-      'red-orange-9': '#f1b9b1',
-      'red-orange-10': '#f7d6d1',
-      'red-orange-11': '#fdf3f2',
-
-      'orange-0': '#201307',
-      'orange-1': '#43240f',
-      'orange-2': '#693612',
-      'orange-3': '#8f4812',
-      'orange-4': '#b05710',
-      'orange-5': '#d1660c',
-      'orange-6': '#f47603',
-      'orange-7': '#ff8f32',
-      'orange-8': '#ffa960',
-      'orange-9': '#ffc28c',
-      'orange-10': '#ffdab8',
-      'orange-11': '#fff2e7',
-
-      'yellow-0': '#000000',
-      'yellow-1': '#413b15',
-      'yellow-2': '#655c19',
-      'yellow-3': '#857a1a',
-      'yellow-4': '#a1941a',
-      'yellow-5': '#c0b017',
-      'yellow-6': '#eedb0b',
-      'yellow-7': '#feee45',
-      'yellow-8': '#fdf377',
-      'yellow-9': '#fdf8a2',
-      'yellow-10': '#fdfcca',
-      'yellow-11': '#fffff1',
-
-      'green-0': '#011409',
-      'green-1': '#0a311e',
-      'green-2': '#134d33',
-      'green-3': '#1b6846',
-      'green-4': '#238158',
-      'green-5': '#2b9968',
-      'green-6': '#34b379',
-      'green-7': '#45dc8f',
-      'green-8': '#58f19c',
-      'green-9': '#9ef4c4',
-      'green-10': '#c5f9dd',
-      'green-11': '#effff9',
-
-      'teal-0': '#080e0c',
-      'teal-1': '#152621',
-      'teal-2': '#1d3f35',
-      'teal-3': '#25594a',
-      'teal-4': '#2b7560',
-      'teal-5': '#309178',
-      'teal-6': '#48a98e',
-      'teal-7': '#6eb9a1',
-      'teal-8': '#90c9b6',
-      'teal-9': '#b0d8ca',
-      'teal-10': '#d0e8df',
-      'teal-11': '#f0f8f5',
-
-      'cyan-0': '#000000',
-      'cyan-1': '#132223',
-      'cyan-2': '#1b3f41',
-      'cyan-3': '#205e62',
-      'cyan-4': '#237f84',
-      'cyan-5': '#21a2a8',
-      'cyan-6': '#45bbc1',
-      'cyan-7': '#74c9cd',
-      'cyan-8': '#9ad6d9',
-      'cyan-9': '#bde4e6',
-      'cyan-10': '#def2f2',
-      'cyan-11': '#ffffff',
-    },
-  },
-  fonts: {
-    sans: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
-  },
-  grid: {
-    steps: 12,
-  },
-  spaceScale: {
-    steps: 6,
-    baseMin: 16,
-    baseMax: 16,
-    scaleMin: 'minor-third',
-    scaleMax: 'minor-third',
-  },
-  typeScale: {
-    steps: 6,
-    baseMin: 16,
-    baseMax: 16,
-    scaleMin: 'minor-third',
-    scaleMax: 'minor-third',
-  },
-}