@sanity/assist 1.0.0

package/src/_lib/fixedListenQuery.ts

@@ -0,0 +1,101 @@
+import {SanityClient} from '@sanity/client'
+import {defer, delay, merge, Observable, of, partition, switchMap, throwError} from 'rxjs'
+import {filter, mergeMap, share, take} from 'rxjs/operators'
+import {exhaustMapToWithTrailing} from 'rxjs-exhaustmap-with-trailing'
+import {MutationEvent, ReconnectEvent, WelcomeEvent} from 'sanity'
+
+/** @internal */
+export type ListenQueryParams = Record<string, string | number | boolean | string[]>
+
+/** @beta */
+export interface ListenQueryOptions {
+  tag?: string
+  apiVersion?: string
+  throttleTime?: number
+  transitions?: ('update' | 'appear' | 'disappear')[]
+}
+
+const fetch = (
+  client: SanityClient,
+  query: string,
+  params: ListenQueryParams,
+  options: ListenQueryOptions
+) =>
+  defer(() =>
+    // getVersionedClient(options.apiVersion)
+    client.observable.fetch(query, params, {
+      tag: options.tag,
+      filterResponse: true,
+    })
+  )
+
+const listen = (
+  client: SanityClient,
+  query: string,
+  params: ListenQueryParams,
+  options: ListenQueryOptions
+) =>
+  defer(() =>
+    // getVersionedClient(options.apiVersion)
+    client.listen(query, params, {
+      events: ['welcome', 'mutation', 'reconnect'],
+      includeResult: false,
+      visibility: 'query',
+      tag: options.tag,
+    })
+  ) as Observable<ReconnectEvent | WelcomeEvent | MutationEvent>
+
+function isWelcomeEvent(
+  event: MutationEvent | ReconnectEvent | WelcomeEvent
+): event is WelcomeEvent {
+  return event.type === 'welcome'
+}
+
+/** @internal */
+export const listenQuery = (
+  client: SanityClient,
+  query: string | {fetch: string; listen: string},
+  params: ListenQueryParams = {},
+  options: ListenQueryOptions = {}
+) => {
+  const fetchQuery = typeof query === 'string' ? query : query.fetch
+  const listenerQuery = typeof query === 'string' ? query : query.listen
+
+  const fetchOnce$ = fetch(client, fetchQuery, params, options)
+
+  const events$ = listen(client, listenerQuery, params, options).pipe(
+    mergeMap((ev, i) => {
+      const isFirst = i === 0
+      if (isFirst && !isWelcomeEvent(ev)) {
+        // if the first event is not welcome, it is most likely a reconnect and
+        // if it's not a reconnect something is very wrong
+        return throwError(
+          new Error(
+            ev.type === 'reconnect'
+              ? 'Could not establish EventSource connection'
+              : `Received unexpected type of first event "${ev.type}"`
+          )
+        )
+      }
+      return of(ev)
+    }),
+    share()
+  )
+
+  const [welcome$, mutationAndReconnect$] = partition(events$, isWelcomeEvent)
+  const isRelevantEvent = (event: MutationEvent | ReconnectEvent | WelcomeEvent): boolean => {
+    if (!options.transitions || event.type !== 'mutation') {
+      return true
+    }
+
+    return options.transitions.includes(event.transition)
+  }
+
+  return merge(
+    welcome$.pipe(take(1)),
+    mutationAndReconnect$.pipe(
+      filter(isRelevantEvent),
+      switchMap((event) => merge(of(event), of(event).pipe(delay(options.throttleTime || 1000))))
+    )
+  ).pipe(exhaustMapToWithTrailing(fetchOnce$))
+}

package/src/_lib/form/DocumentForm.tsx

@@ -0,0 +1,197 @@
+import {Box, BoxProps, Flex, focusFirstDescendant, Spinner, Text} from '@sanity/ui'
+import React, {HTMLProps, useEffect, useMemo, useRef} from 'react'
+import {tap} from 'rxjs/operators'
+import {
+  createPatchChannel,
+  DocumentMutationEvent,
+  DocumentRebaseEvent,
+  FormBuilder,
+  fromMutationPatches,
+  PatchMsg,
+  useDocumentPresence,
+  useDocumentStore,
+} from 'sanity'
+import {useDocumentPane} from 'sanity/desk'
+
+const preventDefault = (ev: React.FormEvent) => ev.preventDefault()
+
+export function DocumentForm(
+  props: Omit<BoxProps, 'as'> & Omit<HTMLProps<HTMLDivElement>, 'as' | 'onSubmit' | 'ref'>
+) {
+  const {
+    collapsedFieldSets,
+    collapsedPaths,
+    displayed: value,
+    documentId,
+    documentType,
+    editState,
+    formState,
+    onBlur,
+    onChange,
+    onFocus,
+    onPathOpen,
+    onSetActiveFieldGroup,
+    onSetCollapsedFieldSet,
+    onSetCollapsedPath,
+    ready,
+    validation,
+  } = useDocumentPane()
+
+  const documentStore = useDocumentStore()
+  const presence = useDocumentPresence(documentId)
+
+  // The `patchChannel` is an INTERNAL publish/subscribe channel that we use to notify form-builder
+  // nodes about both remote and local patches.
+  // - Used by the Portable Text input to modify selections.
+  // - Used by `withDocument` to reset value.
+  const patchChannel = useMemo(() => createPatchChannel(), [])
+
+  const isLocked = editState?.transactionSyncLock?.enabled
+
+  useEffect(() => {
+    const sub = documentStore.pair
+      .documentEvents(documentId, documentType)
+      .pipe(
+        tap((event) => {
+          if (event.type === 'mutation') {
+            patchChannel.publish(prepareMutationEvent(event))
+          }
+
+          if (event.type === 'rebase') {
+            patchChannel.publish(prepareRebaseEvent(event))
+          }
+        })
+      )
+      .subscribe()
+
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [documentId, documentStore, documentType, patchChannel])
+
+  const hasRev = Boolean(value?._rev)
+  useEffect(() => {
+    if (hasRev) {
+      // this is a workaround for an issue that caused the document pushed to withDocument to get
+      // stuck at the first initial value.
+      // This effect is triggered only when the document goes from not having a revision, to getting one
+      // so it will kick in as soon as the document is received from the backend
+      patchChannel.publish({
+        type: 'mutation',
+        patches: [],
+        snapshot: value,
+      })
+    }
+    // React to changes in hasRev only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasRev])
+
+  const formRef = useRef<null | HTMLDivElement>(null)
+
+  useEffect(() => {
+    focusFirstDescendant(formRef.current!)
+  }, [])
+
+  if (isLocked) {
+    return (
+      <Box as="form" {...props} ref={formRef}>
+        <Flex
+          align="center"
+          direction="column"
+          height="fill"
+          justify="center"
+          padding={3}
+          sizing="border"
+        >
+          <Text size={1}>
+            Please hold tight while the document is synced. This usually happens right after the
+            document has been published, and it shouldn’t take more than a few seconds
+          </Text>
+        </Flex>
+      </Box>
+    )
+  }
+
+  return (
+    <Box as="form" {...props} onSubmit={preventDefault} ref={formRef}>
+      {ready ? (
+        formState === null ? (
+          <Flex
+            align="center"
+            direction="column"
+            height="fill"
+            justify="center"
+            padding={3}
+            sizing="border"
+          >
+            <Text size={1}>This form is hidden</Text>
+          </Flex>
+        ) : (
+          <FormBuilder
+            __internal_patchChannel={patchChannel}
+            collapsedFieldSets={collapsedFieldSets}
+            collapsedPaths={collapsedPaths}
+            focusPath={formState.focusPath}
+            changed={formState.changed}
+            focused={formState.focused}
+            groups={formState.groups}
+            id="root"
+            members={formState.members}
+            onChange={onChange}
+            onFieldGroupSelect={onSetActiveFieldGroup}
+            onPathBlur={onBlur}
+            onPathFocus={onFocus}
+            onPathOpen={onPathOpen}
+            onSetFieldSetCollapsed={onSetCollapsedFieldSet}
+            onSetPathCollapsed={onSetCollapsedPath}
+            presence={presence}
+            readOnly={formState.readOnly}
+            schemaType={formState.schemaType}
+            validation={validation}
+            value={formState.value}
+          />
+        )
+      ) : (
+        <Flex
+          align="center"
+          direction="column"
+          height="fill"
+          justify="center"
+          padding={3}
+          sizing="border"
+        >
+          <Spinner muted />
+
+          <Box marginTop={3}>
+            <Text align="center" muted size={1}>
+              Loading document
+            </Text>
+          </Box>
+        </Flex>
+      )}
+    </Box>
+  )
+}
+
+function prepareMutationEvent(event: DocumentMutationEvent): PatchMsg {
+  const patches = event.mutations.map((mut) => mut.patch).filter(Boolean)
+
+  return {
+    type: 'mutation',
+    snapshot: event.document,
+    patches: fromMutationPatches(event.origin, patches),
+  }
+}
+
+function prepareRebaseEvent(event: DocumentRebaseEvent): PatchMsg {
+  const remotePatches = event.remoteMutations.map((mut) => mut.patch).filter(Boolean)
+  const localPatches = event.localMutations.map((mut) => mut.patch).filter(Boolean)
+
+  return {
+    type: 'rebase',
+    snapshot: event.document,
+    patches: fromMutationPatches('remote', remotePatches).concat(
+      fromMutationPatches('local', localPatches)
+    ),
+  }
+}

package/src/_lib/form/helpers.ts

@@ -0,0 +1,31 @@
+import {isArraySchemaType, isObjectSchemaType, ObjectItem, SchemaType} from 'sanity'
+import {randomKey} from '../randomKey'
+
+export function createProtoValue(type: SchemaType): any {
+  if (isObjectSchemaType(type)) {
+    return type.name === 'object' ? {} : {_type: type.name}
+  }
+  if (isArraySchemaType(type)) {
+    return []
+  }
+  if (type.jsonType === 'string') {
+    return ''
+  }
+  if (type.jsonType === 'number') {
+    return 0
+  }
+  if (type.jsonType === 'boolean') {
+    return false
+  }
+  return undefined
+}
+
+export function createProtoArrayValue<Item extends ObjectItem>(type: SchemaType): Item {
+  if (!isObjectSchemaType(type)) {
+    throw new Error(
+      `Invalid item type: "${type.type}". Default array input can only contain objects (for now)`
+    )
+  }
+
+  return {...createProtoValue(type), _key: randomKey(12)} as Item
+}

package/src/_lib/form/index.ts

@@ -0,0 +1 @@
+export * from './DocumentForm'

package/src/_lib/randomKey.ts

@@ -0,0 +1,29 @@
+import getRandomValues from 'get-random-values-esm'
+
+// WHATWG crypto RNG - https://w3c.github.io/webcrypto/Overview.html
+function whatwgRNG(length = 16) {
+  const rnds8 = new Uint8Array(length)
+  getRandomValues(rnds8)
+  return rnds8
+}
+
+const getByteHexTable = (() => {
+  let table: string[]
+  return () => {
+    if (table) {
+      return table
+    }
+    table = []
+    for (let i = 0; i < 256; ++i) {
+      table[i] = (i + 0x100).toString(16).substring(1)
+    }
+    return table
+  }
+})()
+
+export function randomKey(length?: number) {
+  const table = getByteHexTable()
+  return whatwgRNG(length)
+    .reduce((str, n) => str + table[n], '')
+    .slice(0, length)
+}

package/src/_lib/useListeningQuery.ts

@@ -0,0 +1,61 @@
+import {useEffect, useRef, useState} from 'react'
+import {catchError, distinctUntilChanged} from 'rxjs/operators'
+import isEqual from 'react-fast-compare'
+import {ListenQueryOptions, useClient} from 'sanity'
+import {listenQuery} from './fixedListenQuery'
+
+type Params = Record<string, string | number | boolean | string[]>
+
+type ReturnShape<T> = {
+  loading: boolean
+  error: boolean
+  data: T | null
+}
+
+type Observable = {
+  unsubscribe: () => void
+}
+
+const DEFAULT_PARAMS = {}
+const DEFAULT_OPTIONS: ListenQueryOptions = {apiVersion: `v2022-05-09`}
+
+export function useListeningQuery<T>(
+  query: string,
+  params: Params = DEFAULT_PARAMS,
+  options: ListenQueryOptions = DEFAULT_OPTIONS
+): ReturnShape<T> {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const [data, setData] = useState<T | null>(null)
+  const subscription = useRef<null | Observable>(null)
+
+  const client = useClient({apiVersion: `v2022-05-09`})
+
+  useEffect(() => {
+    if (query) {
+      subscription.current = listenQuery(client, query, params, options)
+        .pipe(
+          distinctUntilChanged(isEqual),
+          catchError((err) => {
+            console.error(err)
+            setError(err)
+            setLoading(false)
+            setData(null)
+
+            return err
+          })
+        )
+        .subscribe((documents) => {
+          setData((current) => (isEqual(current, documents) ? current : documents))
+          setLoading(false)
+          setError(false)
+        })
+    }
+
+    return () => {
+      return subscription.current ? subscription.current.unsubscribe() : undefined
+    }
+  }, [query, params, options, client])
+
+  return {loading, error, data}
+}

package/src/_lib/usePrevious.ts

@@ -0,0 +1,9 @@
+import {useEffect, useRef} from 'react'
+
+export function usePrevious<T>(value: T) {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+  return ref.current
+}

package/src/assistConnectors/AssistConnectorsOverlay.tsx

@@ -0,0 +1,132 @@
+import {Fragment, useEffect, useState} from 'react'
+import {Connector, ConnectorOptions} from '../_lib/connector'
+import {ConnectorPath} from './ConnectorPath'
+
+const DEBUG = false
+
+const options: ConnectorOptions = {
+  arrow: {
+    marginX: 10.5,
+    marginY: 5,
+    size: 4,
+    threshold: 16.5,
+  },
+  divider: {
+    offsetX: -10.5,
+  },
+  path: {
+    cornerRadius: 3,
+    marginY: 10.5,
+    strokeWidth: 1,
+  },
+}
+
+export function AssistConnectorsOverlay(props: {connectors: Connector[]}) {
+  const {connectors} = props
+  // const zIndexes = connectors.map((connector) => {
+  //   const zIndex = connector.from.payload?.zIndex
+
+  //   if (typeof zIndex === 'number') {
+  //     return zIndex
+  //   }
+
+  //   return 1
+  // })
+  const [, setRedraw] = useState(false)
+  useEffect(() => {
+    // hacky workaround to force redraw for connectors on initial render
+    // this seem to improve initial measurements of elements
+    setRedraw(true)
+  }, [])
+
+  // const zIndex = zIndexes.length ? Math.max(...zIndexes) : 1
+
+  return (
+    <>
+      <svg
+        fill="none"
+        width={window.innerWidth}
+        height={window.innerHeight}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          zIndex: 150,
+          // zIndex,
+        }}
+      >
+        {connectors.map((connector) => (
+          <ConnectorPath
+            from={connector.from}
+            key={connector.key}
+            options={options}
+            to={connector.to}
+          />
+        ))}
+      </svg>
+      {DEBUG &&
+        connectors.map(({key, from, to}) => {
+          return (
+            <Fragment key={key}>
+              <div
+                style={{
+                  position: 'fixed',
+                  top: from.bounds.y,
+                  left: from.bounds.x,
+                  width: from.bounds.w,
+                  height: from.bounds.h,
+                  pointerEvents: 'none',
+                  overflow: 'hidden',
+                  outline: '1px dotted red',
+                  outlineOffset: -1,
+                  zIndex: 10000000 - 1,
+                }}
+              >
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: from.element.y - from.bounds.y,
+                    left: from.element.x - from.bounds.x,
+                    width: from.element.w,
+                    height: from.element.h,
+                    border: '1px solid red',
+                    boxSizing: 'border-box',
+                  }}
+                />
+              </div>
+
+              <div
+                style={{
+                  position: 'fixed',
+                  top: to.bounds.y,
+                  left: to.bounds.x,
+                  width: to.bounds.w,
+                  height: to.bounds.h,
+                  pointerEvents: 'none',
+                  overflow: 'hidden',
+                  outline: '1px dotted teal',
+                  outlineOffset: -1,
+                  zIndex: 10000000 - 1,
+                }}
+              >
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: to.element.y - to.bounds.y,
+                    left: to.element.x - to.bounds.x,
+                    width: to.element.w,
+                    height: to.element.h,
+                    border: '1px solid teal',
+                    boxSizing: 'border-box',
+                  }}
+                />
+              </div>
+            </Fragment>
+          )
+        })}
+    </>
+  )
+}

package/src/assistConnectors/ConnectorPath.tsx

@@ -0,0 +1,62 @@
+import {rgba, useTheme} from '@sanity/ui'
+import {useMemo} from 'react'
+import {ConnectorOptions, mapConnectorToLine, Rect} from '../_lib/connector'
+import {arrowPath} from './draw/arrowPath'
+import {drawConnectorPath} from './draw/connectorPath'
+
+export function ConnectorPath(props: {
+  from: {bounds: Rect; element: Rect}
+  to: {bounds: Rect; element: Rect}
+  options: ConnectorOptions
+}) {
+  const {from, options, to} = props
+  const {strokeWidth} = options.path
+  const theme = useTheme()
+
+  const line = useMemo(() => mapConnectorToLine(options, {from, to}), [from, options, to])
+
+  return (
+    <>
+      <path
+        d={drawConnectorPath(options, line)}
+        stroke={theme.sanity.color.base.bg}
+        strokeWidth={strokeWidth + 4}
+      />
+
+      <path
+        d={drawConnectorPath(options, line)}
+        stroke={rgba(theme.sanity.color.base.border, 0.5)}
+        strokeWidth={strokeWidth}
+      />
+
+      {line.from.isAbove && (
+        <path
+          d={arrowPath(
+            options,
+            line.from.x + options.arrow.marginX,
+            line.from.bounds.y - options.arrow.threshold + options.arrow.marginY,
+            -1
+          )}
+          stroke={theme.sanity.color.base.border}
+          strokeWidth={strokeWidth}
+        />
+      )}
+
+      {line.from.isBelow && (
+        <path
+          d={arrowPath(
+            options,
+            line.from.x + options.arrow.marginX,
+            line.from.bounds.y +
+              line.from.bounds.h +
+              options.arrow.threshold -
+              options.arrow.marginY,
+            1
+          )}
+          stroke={theme.sanity.color.base.border}
+          strokeWidth={strokeWidth}
+        />
+      )}
+    </>
+  )
+}

package/src/assistConnectors/draw/arrowPath.ts

@@ -0,0 +1,9 @@
+import {ConnectorOptions} from '../../_lib/connector'
+
+export function arrowPath(options: ConnectorOptions, x: number, y: number, dir: 1 | -1): string {
+  return [
+    `M ${x - options.arrow.size} ${y - options.arrow.size * dir} `,
+    `L ${x} ${y}`,
+    `L ${x + options.arrow.size} ${y - options.arrow.size * dir}`,
+  ].join('')
+}