@sanity/assist 1.0.0

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@sanity/assist",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "sanity",
+    "sanity-plugin",
+    "ai"
+  ],
+  "homepage": "https://github.com/sanity-io/assist#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity/assist/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/assist.git"
+  },
+  "license": "MIT",
+  "author": "Sanity <hello@sanity.io>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint src/**/* --ext .tsx,.ts",
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict",
+    "compile": "tsc --noEmit",
+    "test": "vitest",
+    "release": "semantic-release"
+  },
+  "dependencies": {
+    "@sanity/icons": "^2.4.0",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^1.6.0",
+    "react-fast-compare": "^3.2.1",
+    "rxjs": "^7.8.0",
+    "rxjs-exhaustmap-with-trailing": "^2.1.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
+    "@rollup/plugin-image": "^3.0.2",
+    "@sanity/pkg-utils": "^2.2.13",
+    "@sanity/plugin-kit": "^3.1.7",
+    "@sanity/semantic-release-preset": "^4.1.1",
+    "@types/react": "^18.0.28",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^4.4.0",
+    "sanity": "3.13.0",
+    "semantic-release": "^21.0.5",
+    "styled-components": "^5.3.9",
+    "typescript": "^5.1.3",
+    "vitest": "^0.32.2"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "3.13.0"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/_lib/connector/ConnectFromRegion.tsx

@@ -0,0 +1,24 @@
+import {HTMLProps, useEffect, useState} from 'react'
+import {useConnectorsStore} from './useConnectorsStore'
+import {ConnectorRegionRects} from './types'
+import {ConnectorRegion} from './ConnectorRegion'
+
+export function ConnectFromRegion(
+  props: {_key: string; zIndex: number} & HTMLProps<HTMLDivElement>
+) {
+  const {children, _key: key, zIndex, ...restProps} = props
+  const store = useConnectorsStore()
+  const [rects, setRects] = useState<ConnectorRegionRects | null>(null)
+
+  useEffect(() => store.from.subscribe(key, {zIndex}), [key, store, zIndex])
+
+  useEffect(() => {
+    if (rects) store.from.next(key, rects)
+  }, [key, rects, store])
+
+  return (
+    <ConnectorRegion {...restProps} onRectsChange={setRects}>
+      {children}
+    </ConnectorRegion>
+  )
+}

package/src/_lib/connector/ConnectToRegion.tsx

@@ -0,0 +1,22 @@
+import {HTMLProps, useEffect, useState} from 'react'
+import {ConnectorRegion} from './ConnectorRegion'
+import {ConnectorRegionRects} from './types'
+import {useConnectorsStore} from './useConnectorsStore'
+
+export function ConnectToRegion(props: {_key: string} & HTMLProps<HTMLDivElement>) {
+  const {children, _key: key, ...restProps} = props
+  const aiConnectors = useConnectorsStore()
+  const [rects, setRects] = useState<ConnectorRegionRects | null>(null)
+
+  useEffect(() => aiConnectors.to.subscribe(key), [aiConnectors, key])
+
+  useEffect(() => {
+    if (rects) aiConnectors.to.next(key, rects)
+  }, [aiConnectors, key, rects])
+
+  return (
+    <ConnectorRegion {...restProps} onRectsChange={setRects}>
+      {children}
+    </ConnectorRegion>
+  )
+}

package/src/_lib/connector/ConnectorRegion.tsx

@@ -0,0 +1,23 @@
+import {HTMLProps, useEffect} from 'react'
+import {ConnectorRegionRects} from './types'
+import {useRegionRects} from './useRegionRects'
+
+export function ConnectorRegion(
+  props: {
+    onRectsChange?: (rects: ConnectorRegionRects | null) => void
+  } & HTMLProps<HTMLDivElement>
+) {
+  const {children, onRectsChange, ...restProps} = props
+
+  const {bounds, element, ref} = useRegionRects()
+
+  useEffect(() => {
+    onRectsChange?.(bounds && element ? {bounds, element} : null)
+  }, [bounds, element, onRectsChange])
+
+  return (
+    <div {...restProps} ref={ref}>
+      {children}
+    </div>
+  )
+}

package/src/_lib/connector/ConnectorsProvider.tsx

@@ -0,0 +1,19 @@
+import {ReactNode, useEffect, useMemo} from 'react'
+import {ConnectorsStore, createConnectorsStore} from './ConnectorsStore'
+import {ConnectorsStoreContext} from './ConnectorsStoreContext'
+import {Connector} from './types'
+
+export function ConnectorsProvider(props: {
+  children?: ReactNode
+  onConnectorsChange?: (connectors: Connector[]) => void
+}) {
+  const {children, onConnectorsChange} = props
+  const store: ConnectorsStore = useMemo(() => createConnectorsStore(), [])
+
+  useEffect(
+    () => onConnectorsChange && store.connectors.subscribe(onConnectorsChange),
+    [onConnectorsChange, store]
+  )
+
+  return <ConnectorsStoreContext.Provider value={store}>{children}</ConnectorsStoreContext.Provider>
+}

package/src/_lib/connector/ConnectorsStore.ts

@@ -0,0 +1,122 @@
+import {Connector, ConnectorRegionRects} from './types'
+
+export interface ConnectorsStore {
+  connectors: {
+    subscribe: (observer: (connectors: Connector[]) => void) => () => void
+  }
+
+  from: {
+    subscribe: (key: string, payload?: Record<string, unknown>) => () => void
+    next: (key: string, rects: ConnectorRegionRects) => void
+  }
+
+  to: {
+    subscribe: (key: string, payload?: Record<string, unknown>) => () => void
+    next: (key: string, rects: ConnectorRegionRects) => void
+  }
+}
+
+export function createConnectorsStore(): ConnectorsStore {
+  const configKeys: string[] = []
+  const fieldKeys: string[] = []
+
+  const channels = {
+    from: new Map<string, ConnectorRegionRects | null>(),
+    to: new Map<string, ConnectorRegionRects | null>(),
+  }
+
+  const payloads = {
+    from: new Map<string, Record<string, unknown> | undefined>(),
+    to: new Map<string, Record<string, unknown> | undefined>(),
+  }
+
+  const observers: ((connectors: Connector[]) => void)[] = []
+
+  function notifyObservers() {
+    const connectors: Connector[] = []
+
+    for (const key of configKeys) {
+      const toRects = channels.to.get(key)
+      const toPayload = payloads.from.get(key)
+
+      const fromRects = channels.from.get(key)
+      const fromPayload = payloads.from.get(key)
+
+      if (toRects && fromRects) {
+        connectors.push({
+          key,
+          from: {...fromRects, payload: fromPayload},
+          to: {...toRects, payload: toPayload},
+        })
+      }
+    }
+
+    for (const observer of observers) {
+      observer(connectors)
+    }
+  }
+
+  return {
+    to: {
+      subscribe(key, payload) {
+        channels.to.set(key, null)
+        payloads.to.set(key, payload)
+
+        configKeys.push(key)
+
+        return () => {
+          channels.to.delete(key)
+          payloads.to.delete(key)
+
+          const idx = configKeys.indexOf(key)
+
+          if (idx > -1) configKeys.splice(idx, 1)
+
+          notifyObservers()
+        }
+      },
+      next(key, rects) {
+        channels.to.set(key, rects)
+
+        if (fieldKeys.includes(key)) notifyObservers()
+      },
+    },
+
+    connectors: {
+      subscribe(observer) {
+        observers.push(observer)
+
+        return () => {
+          const idx = observers.indexOf(observer)
+
+          if (idx > -1) observers.splice(idx, 1)
+        }
+      },
+    },
+
+    from: {
+      subscribe(key, payload) {
+        channels.from.set(key, null)
+        payloads.from.set(key, payload)
+
+        fieldKeys.push(key)
+
+        return () => {
+          channels.from.delete(key)
+          payloads.from.delete(key)
+
+          const idx = fieldKeys.indexOf(key)
+
+          if (idx > -1) fieldKeys.splice(idx, 1)
+
+          notifyObservers()
+        }
+      },
+      next(key, rects) {
+        channels.from.set(key, rects)
+
+        if (configKeys.includes(key)) notifyObservers()
+      },
+    },
+  }
+}

package/src/_lib/connector/ConnectorsStoreContext.ts

@@ -0,0 +1,4 @@
+import {createContext} from 'react'
+import {ConnectorsStore} from './ConnectorsStore'
+
+export const ConnectorsStoreContext = createContext<ConnectorsStore | null>(null)

package/src/_lib/connector/helpers.ts

@@ -0,0 +1,5 @@
+export function hasOverflowScroll(el: HTMLElement): boolean {
+  const overflow = getComputedStyle(el).overflow
+
+  return overflow.includes('auto') || overflow.includes('hidden') || overflow.includes('scroll')
+}

package/src/_lib/connector/index.ts

@@ -0,0 +1,9 @@
+export * from './ConnectFromRegion'
+export * from './ConnectToRegion'
+export * from './ConnectorRegion'
+export * from './ConnectorsProvider'
+export * from './ConnectorsStore'
+export * from './ConnectorsStoreContext'
+export * from './mapConnectorToLine'
+export * from './types'
+export * from './useConnectorsStore'

package/src/_lib/connector/mapConnectorToLine.ts

@@ -0,0 +1,83 @@
+import {
+  ConnectorLine,
+  ConnectorLinePoint,
+  ConnectorOptions,
+  ConnectorRegionRects,
+  Rect,
+} from './types'
+
+function getConnectorLinePoint(
+  options: ConnectorOptions,
+  rect: Rect,
+  bounds: Rect
+): ConnectorLinePoint {
+  const centerY = rect.y + rect.h / 2
+  const isAbove = rect.y + rect.h < bounds.y + options.arrow.marginY
+  const isBelow = rect.y > bounds.y + bounds.h - options.arrow.marginY
+
+  return {
+    bounds,
+    x: rect.x,
+    y: centerY,
+    centerY,
+    startY: rect.y + options.path.marginY,
+    endY: rect.y + rect.h - options.path.marginY,
+    isAbove,
+    isBelow,
+    outOfBounds: isAbove || isBelow,
+  }
+}
+
+export function mapConnectorToLine(
+  options: ConnectorOptions,
+  connector: {from: ConnectorRegionRects; to: ConnectorRegionRects}
+): ConnectorLine {
+  const fromBounds: Rect = {
+    y: connector.from.bounds.y + options.arrow.threshold,
+    // bottom: connector.from.bounds.y + connector.from.bounds.h - options.arrow.threshold,
+    x: connector.from.bounds.x,
+    // right: connector.from.bounds.x + connector.from.bounds.w,
+    w: connector.from.bounds.w,
+    h: connector.from.bounds.h - options.arrow.threshold * 2,
+  }
+
+  const from = getConnectorLinePoint(options, connector.from.element, fromBounds)
+  from.x = connector.from.element.x + connector.from.element.w // + 1
+
+  const fromBottom = fromBounds.y + fromBounds.h
+
+  const toBounds: Rect = {
+    y: connector.to.bounds.y + options.arrow.threshold,
+    // bottom: connector.to.bounds.y + connector.to.bounds.h - options.arrow.threshold,
+    x: connector.to.bounds.x,
+    // right: connector.to.bounds.x + connector.to.bounds.w,
+    w: connector.to.bounds.w,
+    h: connector.to.bounds.h - options.arrow.threshold * 2,
+  }
+
+  const toBottom = toBounds.y + toBounds.h
+
+  const to = getConnectorLinePoint(options, connector.to.element, toBounds)
+
+  const maxStartY = Math.max(to.startY, from.startY)
+
+  // Align from <-> to vertically
+  from.y = Math.min(maxStartY, from.endY)
+  if (from.y < toBounds.y) {
+    from.y = Math.min(toBounds.y, from.endY)
+  } else if (from.y > toBottom) {
+    from.y = Math.max(toBottom, from.startY)
+  }
+  to.y = Math.min(maxStartY, to.endY)
+  if (to.y < fromBounds.y) {
+    to.y = Math.min(fromBounds.y, to.endY)
+  } else if (to.y > fromBottom) {
+    to.y = Math.max(fromBottom, to.startY)
+  }
+
+  // Keep within bounds
+  from.y = Math.min(Math.max(from.y, fromBounds.y), fromBottom)
+  to.y = Math.min(Math.max(to.y, toBounds.y), toBottom)
+
+  return {from, to}
+}

package/src/_lib/connector/types.ts

@@ -0,0 +1,56 @@
+export interface Rect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface Scroll {
+  x: number
+  y: number
+}
+
+export interface ConnectorLinePoint {
+  bounds: Rect
+  x: number
+  y: number
+  startY: number
+  centerY: number
+  endY: number
+  isAbove: boolean
+  isBelow: boolean
+  outOfBounds: boolean
+}
+
+export interface ConnectorLine {
+  from: ConnectorLinePoint
+  to: ConnectorLinePoint
+}
+
+export interface ConnectorOptions {
+  arrow: {
+    marginX: number
+    marginY: number
+    size: number
+    threshold: number
+  }
+  divider: {
+    offsetX: number
+  }
+  path: {
+    cornerRadius: number
+    marginY: number
+    strokeWidth: number
+  }
+}
+
+export interface ConnectorRegionRects {
+  bounds: Rect
+  element: Rect
+}
+
+export interface Connector {
+  key: string
+  from: ConnectorRegionRects & {payload?: Record<string, unknown>}
+  to: ConnectorRegionRects & {payload?: Record<string, unknown>}
+}

package/src/_lib/connector/useConnectorsStore.ts

@@ -0,0 +1,13 @@
+import {useContext} from 'react'
+import {ConnectorsStoreContext} from './ConnectorsStoreContext'
+import {ConnectorsStore} from './ConnectorsStore'
+
+export function useConnectorsStore(): ConnectorsStore {
+  const store = useContext(ConnectorsStoreContext)
+
+  if (!store) {
+    throw new Error('Missing connectors store context')
+  }
+
+  return store
+}

package/src/_lib/connector/useRegionRects.ts

@@ -0,0 +1,141 @@
+import {useEffect, useMemo, useRef, useState} from 'react'
+import {Rect, Scroll} from './types'
+import {hasOverflowScroll} from './helpers'
+
+export function useRegionRects() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [relativeBoundsRect, setRelativeBoundsRect] = useState<Rect | null>(null)
+  const [relativeElementRect, setRelativeElementRect] = useState<Rect | null>(null)
+  const [boundsScroll, setBoundsScroll] = useState<Scroll>({x: 0, y: 0})
+  const [scroll, setScroll] = useState<Scroll>({x: 0, y: 0})
+
+  const boundsScrollXRef = useRef(0)
+  const boundsScrollYRef = useRef(0)
+
+  const elementScrollXRef = useRef(0)
+  const elementScrollYRef = useRef(0)
+
+  useEffect(() => {
+    const el = ref.current
+
+    if (!el) return undefined
+
+    const scrollParents: HTMLElement[] = []
+    let parent = el.parentElement
+
+    while (parent && parent !== document.body) {
+      if (
+        hasOverflowScroll(parent)
+        // || parent.scrollHeight > parent.clientHeight
+      ) {
+        scrollParents.push(parent)
+      }
+
+      parent = parent.parentElement
+    }
+
+    function handleResize() {
+      const scrollParent = scrollParents[0]
+
+      const boundsRect = scrollParent?.getBoundingClientRect() || {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      }
+
+      const domRect = el!.getBoundingClientRect()
+
+      setRelativeBoundsRect({
+        x: boundsRect.x + boundsScrollXRef.current,
+        y: boundsRect.y + boundsScrollYRef.current,
+        w: boundsRect.width,
+        h: boundsRect.height,
+      })
+
+      setRelativeElementRect({
+        x: domRect.x + elementScrollXRef.current,
+        y: domRect.y + elementScrollYRef.current,
+        w: domRect.width,
+        h: domRect.height,
+      })
+    }
+
+    function handleScroll() {
+      let scrollX = window.scrollX
+      let scrollY = window.scrollY
+
+      for (const scrollParent of scrollParents) {
+        scrollX += scrollParent.scrollLeft
+        scrollY += scrollParent.scrollTop
+      }
+
+      const scrollParent = scrollParents[0]
+
+      boundsScrollXRef.current = scrollX - (scrollParent?.scrollLeft || window.scrollX)
+
+      boundsScrollYRef.current = scrollY - (scrollParent?.scrollTop || window.scrollY)
+
+      setBoundsScroll({
+        x: boundsScrollXRef.current,
+        y: boundsScrollYRef.current,
+      })
+
+      elementScrollXRef.current = scrollX
+      elementScrollYRef.current = scrollY
+
+      setScroll({x: scrollX, y: scrollY})
+    }
+
+    window.addEventListener('scroll', handleScroll, {passive: true})
+
+    const ro = new ResizeObserver(handleResize)
+
+    ro.observe(el)
+
+    for (const scrollParent of scrollParents) {
+      scrollParent.addEventListener('scroll', handleScroll, {passive: true})
+      ro.observe(scrollParent)
+    }
+
+    handleScroll()
+
+    return () => {
+      ro.unobserve(el)
+
+      for (const scrollParent of scrollParents) {
+        ro.unobserve(scrollParent)
+        scrollParent.removeEventListener('scroll', handleScroll)
+      }
+
+      ro.disconnect()
+
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  const bounds: Rect | null = useMemo(
+    () =>
+      relativeBoundsRect && {
+        x: relativeBoundsRect.x - boundsScroll.x,
+        y: relativeBoundsRect.y - boundsScroll.y,
+        w: relativeBoundsRect.w,
+        h: relativeBoundsRect.h,
+      },
+    [relativeBoundsRect, boundsScroll]
+  )
+
+  const element: Rect | null = useMemo(
+    () =>
+      relativeElementRect && {
+        x: relativeElementRect.x - scroll.x,
+        y: relativeElementRect.y - scroll.y,
+        w: relativeElementRect.w,
+        h: relativeElementRect.h,
+      },
+    [relativeElementRect, scroll]
+  )
+
+  return {bounds, element, ref}
+}