@sanity/assist 5.0.4 → 6.0.0

package/src/_lib/form/DocumentForm.tsx

@@ -1,201 +0,0 @@
-import {Box, type BoxProps, Flex, focusFirstDescendant, Spinner, Text} from '@sanity/ui'
-import type React from 'react'
-import {type HTMLProps, useEffect, useMemo, useRef} from 'react'
-import {tap} from 'rxjs/operators'
-import {
-  createPatchChannel,
-  type DocumentMutationEvent,
-  type DocumentRebaseEvent,
-  FormBuilder,
-  fromMutationPatches,
-  type PatchMsg,
-  useDocumentPresence,
-  useDocumentStore,
-} from 'sanity'
-import {useDocumentPane} from 'sanity/structure'
-
-import {assistFormId} from './constants'
-
-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={assistFormId}
-            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 as any}
-            hasUpstreamVersion={false}
-          />
-        )
-      ) : (
-        <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/constants.ts

@@ -1 +0,0 @@
-export const assistFormId = 'assist'

package/src/_lib/form/helpers.ts

@@ -1,32 +0,0 @@
-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

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

package/src/_lib/randomKey.ts

@@ -1,29 +0,0 @@
-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

@@ -1,62 +0,0 @@
-import {useEffect, useRef, useState} from 'react'
-import isEqual from 'react-fast-compare'
-import {catchError, distinctUntilChanged} from 'rxjs/operators'
-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

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

package/src/assistConnectors/AssistConnectorsOverlay.tsx

@@ -1,133 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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('')
-}

package/src/assistConnectors/draw/connectorPath.ts

@@ -1,142 +0,0 @@
-import {ConnectorLine, ConnectorOptions} from '../../_lib/connector'
-
-export function drawArrowPath(
-  options: ConnectorOptions,
-  x: number,
-  y: number,
-  dir: number,
-): 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('')
-}
-
-function moveTo(x: number, y: number) {
-  return `M${x} ${y}`
-}
-
-function lineTo(x: number, y: number) {
-  return `L${x} ${y}`
-}
-
-function join(strings: string[], delim = '') {
-  return strings.join(delim)
-}
-
-function quadCurve(x1: number, y1: number, x: number, y: number) {
-  return `Q${x1} ${y1} ${x} ${y}`
-}
-
-export function drawConnectorPath(options: ConnectorOptions, line: ConnectorLine): string {
-  const {cornerRadius} = options.path
-  const {from, to} = line
-  const {x: fromX, y: fromY} = from
-  const {x: _toX, y: toY} = to
-
-  const toX = _toX - 1
-
-  // Calculate divider position
-  const dividerX = to.bounds.x + options.divider.offsetX
-
-  // Calculate connector FROM path X position
-  const fromPathX = from.isAbove || from.isBelow ? fromX + options.arrow.marginX : fromX
-
-  // Calculate maximum corner radius
-  const r0 = Math.min(cornerRadius, Math.abs(fromPathX - dividerX) / 2)
-  const r1 = Math.min(cornerRadius, Math.abs(fromY - toY) / 2)
-
-  const cmds: string[] = []
-
-  // FROM
-  if (from.isAbove) {
-    cmds.push(
-      moveTo(
-        fromX + options.arrow.marginX,
-        fromY - options.arrow.threshold + options.arrow.marginY,
-      ),
-      lineTo(fromX + options.arrow.marginX, fromY - r0),
-      quadCurve(fromX + options.arrow.marginX, fromY, fromX + options.arrow.marginX + r0, fromY),
-    )
-  } else if (from.isBelow) {
-    cmds.push(
-      moveTo(
-        fromX + options.arrow.marginX,
-        fromY + options.arrow.threshold - options.arrow.marginY,
-      ),
-      lineTo(fromX + options.arrow.marginX, fromY + r0),
-      quadCurve(fromX + options.arrow.marginX, fromY, fromX + options.arrow.marginX + r0, fromY),
-    )
-  } else {
-    cmds.push(moveTo(fromX, fromY))
-  }
-
-  // TO
-  if (to.isAbove) {
-    if (fromY < to.bounds.y) {
-      cmds.push(
-        lineTo(dividerX - r1, fromY),
-        quadCurve(dividerX, fromY, dividerX, fromY + r1),
-        lineTo(dividerX, toY - r1),
-        quadCurve(dividerX, toY, dividerX + r1, toY),
-        lineTo(dividerX - cornerRadius, toY),
-        quadCurve(dividerX, toY, dividerX, toY - cornerRadius),
-        lineTo(dividerX, toY - options.arrow.threshold + options.arrow.marginY),
-      )
-    } else {
-      cmds.push(
-        lineTo(dividerX - cornerRadius, fromY),
-        quadCurve(dividerX, fromY, dividerX, fromY - cornerRadius),
-        lineTo(dividerX, toY - options.arrow.threshold + options.arrow.marginY),
-      )
-    }
-  } else if (to.isBelow) {
-    if (fromY > to.bounds.y + to.bounds.h) {
-      // curl around
-      cmds.push(
-        lineTo(dividerX - options.arrow.marginX - r1, fromY),
-        quadCurve(
-          dividerX - options.arrow.marginX,
-          fromY,
-          dividerX - options.arrow.marginX,
-          fromY - r1,
-        ),
-        lineTo(dividerX - options.arrow.marginX, toY + r1),
-        quadCurve(
-          dividerX - options.arrow.marginX,
-          toY,
-          dividerX - options.arrow.marginX + r1,
-          toY,
-        ),
-        lineTo(dividerX - cornerRadius, toY),
-        quadCurve(dividerX, toY, dividerX, toY + cornerRadius),
-        lineTo(dividerX, toY + options.arrow.threshold - options.arrow.marginY),
-      )
-    } else {
-      cmds.push(
-        lineTo(dividerX - cornerRadius, fromY),
-        quadCurve(dividerX, fromY, dividerX, fromY + cornerRadius),
-        lineTo(dividerX, toY + options.arrow.threshold - options.arrow.marginY),
-      )
-    }
-  } else if (fromY < toY) {
-    cmds.push(
-      lineTo(dividerX - r0, fromY),
-      quadCurve(dividerX, fromY, dividerX, fromY + r1),
-      lineTo(dividerX, toY - r1),
-      quadCurve(dividerX, toY, dividerX + r1, toY),
-      lineTo(toX, toY),
-    )
-  } else {
-    cmds.push(
-      lineTo(dividerX - Math.min(r0, r1), fromY),
-      quadCurve(dividerX, fromY, dividerX, fromY - Math.min(r0, r1)),
-      lineTo(dividerX, toY + r1),
-      quadCurve(dividerX, toY, dividerX + r1, toY),
-      lineTo(toX, toY),
-    )
-  }
-
-  return join(cmds)
-}

package/src/assistConnectors/index.ts

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