sanity-plugin-hotspot-array 4.0.0 → 5.0.0

package/src/Spot.tsx

@@ -1,201 +0,0 @@
-import {Box, Text, Tooltip} from '@sanity/ui'
-import {motion, useMotionValue} from 'framer-motion'
-import {get} from 'lodash-es'
-import {
-  ComponentType,
-  createElement,
-  CSSProperties,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
-import {type ObjectSchemaType, type RenderPreviewCallback} from 'sanity'
-
-import {FnHotspotMove, HotspotItem} from './ImageHotspotArray'
-
-const dragStyle: CSSProperties = {
-  width: '1.4rem',
-  height: '1.4rem',
-  position: 'absolute',
-  boxSizing: 'border-box',
-  top: 0,
-  left: 0,
-  margin: '-0.7rem 0 0 -0.7rem',
-  cursor: 'pointer',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '50%',
-  background: '#000',
-  color: 'white',
-}
-
-const dragStyleWhileDrag: CSSProperties = {
-  background: 'rgba(0, 0, 0, 0.1)',
-  border: '1px solid #fff',
-  cursor: 'none',
-}
-
-const dragStyleWhileHover: CSSProperties = {
-  background: 'rgba(0, 0, 0, 0.1)',
-  border: '1px solid #fff',
-}
-
-const dotStyle: CSSProperties = {
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  height: '0.2rem',
-  width: '0.2rem',
-  margin: '-0.1rem 0 0 -0.1rem',
-  background: '#fff',
-  visibility: 'hidden',
-  borderRadius: '50%',
-  // make sure pointer events only run on the parent
-  pointerEvents: 'none',
-}
-
-const dotStyleWhileActive: CSSProperties = {
-  visibility: 'visible',
-}
-
-const labelStyle: CSSProperties = {
-  color: 'white',
-  fontSize: '0.7rem',
-  fontWeight: 600,
-  lineHeight: '1',
-}
-
-const labelStyleWhileActive: CSSProperties = {
-  visibility: 'hidden',
-}
-
-const round = (num: number) => Math.round(num * 100) / 100
-
-export interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {
-  value: HotspotItem<HotspotFields>
-  schemaType: ObjectSchemaType
-  renderPreview: RenderPreviewCallback
-}
-
-interface HotspotProps<HotspotFields = {[key: string]: unknown}> {
-  value: HotspotItem
-  bounds: DOMRectReadOnly
-  update: FnHotspotMove
-  hotspotDescriptionPath?: string
-  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>
-  index: number
-  schemaType: ObjectSchemaType
-  renderPreview: RenderPreviewCallback
-}
-
-export default function Spot({
-  value,
-  bounds,
-  update,
-  hotspotDescriptionPath,
-  tooltip,
-  index,
-  schemaType,
-  renderPreview,
-}: HotspotProps): ReactNode {
-  const [isDragging, setIsDragging] = useState(false)
-  const [isHovering, setIsHovering] = useState(false)
-
-  // x/y are stored as % but need to be converted to px
-  const x = useMotionValue(round(bounds.width * (value.x / 100)))
-  const y = useMotionValue(round(bounds.height * (value.y / 100)))
-
-  /**
-   * update x/y if the bounds change when resizing the window
-   */
-  useEffect(() => {
-    x.set(round(bounds.width * (value.x / 100)))
-    y.set(round(bounds.height * (value.y / 100)))
-  }, [x, y, value, bounds])
-
-  const handleDragEnd = useCallback(() => {
-    setIsDragging(false)
-
-    // get current values for x/y in px
-    const currentX = x.get()
-    const currentY = y.get()
-
-    // Which we need to convert back to `%` to patch the document
-    const newX = round((currentX * 100) / bounds.width)
-    const newY = round((currentY * 100) / bounds.height)
-
-    // Don't go below 0 or above 100
-    const safeX = Math.max(0, Math.min(100, newX))
-    const safeY = Math.max(0, Math.min(100, newY))
-
-    update(value._key, safeX, safeY)
-  }, [x, y, value, update, bounds])
-  const handleDragStart = useCallback(() => setIsDragging(true), [])
-
-  const handleHoverStart = useCallback(() => setIsHovering(true), [])
-  const handleHoverEnd = useCallback(() => setIsHovering(false), [])
-
-  if (!x || !y) {
-    return null
-  }
-
-  return (
-    <motion.div
-      drag
-      dragConstraints={bounds}
-      dragElastic={0}
-      dragMomentum={false}
-      onDragEnd={handleDragEnd}
-      onDragStart={handleDragStart}
-      onHoverStart={handleHoverStart}
-      onHoverEnd={handleHoverEnd}
-      style={{
-        ...dragStyle,
-        x,
-        y,
-        ...(isDragging && {...dragStyleWhileDrag}),
-        ...(isHovering && {...dragStyleWhileHover}),
-      }}
-    >
-      <Tooltip
-        key={value._key}
-        disabled={isDragging}
-        portal
-        content={
-          tooltip && typeof tooltip === 'function' ? (
-            createElement(tooltip, {value, renderPreview, schemaType})
-          ) : (
-            <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>
-              <Text textOverflow="ellipsis">
-                {hotspotDescriptionPath
-                  ? (get(value, hotspotDescriptionPath) as string)
-                  : `${value.x}% x ${value.y}%`}
-              </Text>
-            </Box>
-          )
-        }
-      >
-        <div>
-          {/* Dot */}
-          <Box
-            style={{
-              ...dotStyle,
-              ...((isDragging || isHovering) && {...dotStyleWhileActive}),
-            }}
-          />
-          {/* Label */}
-          <div
-            style={{
-              ...labelStyle,
-              ...((isDragging || isHovering) && {...labelStyleWhileActive}),
-            }}
-          >
-            {index + 1}
-          </div>
-        </div>
-      </Tooltip>
-    </motion.div>
-  )
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export {type HotspotItem, ImageHotspotArray} from './ImageHotspotArray'
-export {imageHotspotArrayPlugin, type ImageHotspotOptions} from './plugin'
-export {type HotspotTooltipProps} from './Spot'

package/src/plugin.tsx

@@ -1,40 +0,0 @@
-import {ComponentType} from 'react'
-import {type ArrayOfObjectsInputProps, definePlugin} from 'sanity'
-
-import {type HotspotItem, ImageHotspotArray} from './ImageHotspotArray'
-import {type HotspotTooltipProps} from './Spot'
-
-export interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {
-  pathRoot?: 'document' | 'parent'
-  imagePath: string
-  descriptionPath?: string
-  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>
-}
-
-declare module 'sanity' {
-  export interface ArrayOptions {
-    imageHotspot?: ImageHotspotOptions
-  }
-}
-
-export const imageHotspotArrayPlugin = definePlugin({
-  name: 'image-hotspot-array',
-  form: {
-    components: {
-      input: (props) => {
-        if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {
-          const imageHotspotOptions = props.schemaType.options?.imageHotspot
-          if (imageHotspotOptions) {
-            return (
-              <ImageHotspotArray
-                {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}
-                imageHotspotOptions={imageHotspotOptions}
-              />
-            )
-          }
-        }
-        return props.renderDefault(props)
-      },
-    },
-  },
-})

package/src/useDebouncedCallback.ts

@@ -1,102 +0,0 @@
-// copied from react-hookz/web
-// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useDebouncedCallback/index.ts
-import {type DependencyList, useEffect, useMemo, useRef} from 'react'
-
-/**
- * Run effect only when component is unmounted.
- *
- * @param effect Effector to run on unmount
- */
-export function useUnmountEffect(effect: CallableFunction): void {
-  const effectRef = useRef(effect)
-  effectRef.current = effect
-  useEffect(() => () => effectRef.current(), [])
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type DebouncedFunction<Fn extends (...args: any[]) => any> = (
-  this: ThisParameterType<Fn>,
-  ...args: Parameters<Fn>
-) => void
-
-/**
- * Makes passed function debounced, otherwise acts like `useCallback`.
- *
- * @param callback Function that will be debounced.
- * @param deps Dependencies list when to update callback. It also replaces invoked
- * 	callback for scheduled debounced invocations.
- * @param delay Debounce delay.
- * @param maxWait The maximum time `callback` is allowed to be delayed before
- * it's invoked. 0 means no max wait.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useDebouncedCallback<Fn extends (...args: any[]) => any>(
-  callback: Fn,
-  deps: DependencyList,
-  delay: number,
-  maxWait = 0,
-): DebouncedFunction<Fn> {
-  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)
-  const waitTimeout = useRef<ReturnType<typeof setTimeout>>(undefined)
-  const cb = useRef(callback)
-  const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>(undefined)
-
-  const clear = () => {
-    if (timeout.current) {
-      clearTimeout(timeout.current)
-      timeout.current = undefined
-    }
-
-    if (waitTimeout.current) {
-      clearTimeout(waitTimeout.current)
-      waitTimeout.current = undefined
-    }
-  }
-
-  // Cancel scheduled execution on unmount
-  useUnmountEffect(clear)
-
-  useEffect(() => {
-    cb.current = callback
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
-
-  return useMemo(() => {
-    const execute = () => {
-      clear()
-
-      // Barely possible to test this line
-      /* istanbul ignore next */
-      if (!lastCall.current) return
-
-      const context = lastCall.current
-      lastCall.current = undefined
-
-      cb.current.apply(context.this, context.args)
-    }
-
-    const wrapped = function (this, ...args) {
-      if (timeout.current) {
-        clearTimeout(timeout.current)
-      }
-
-      lastCall.current = {args, this: this}
-
-      // Plan regular execution
-      timeout.current = setTimeout(execute, delay)
-
-      // Plan maxWait execution if required
-      if (maxWait > 0 && !waitTimeout.current) {
-        waitTimeout.current = setTimeout(execute, maxWait)
-      }
-    } as DebouncedFunction<Fn>
-
-    Object.defineProperties(wrapped, {
-      length: {value: callback.length},
-      name: {value: `${callback.name || 'anonymous'}__debounced__${delay}`},
-    })
-
-    return wrapped
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delay, maxWait, ...deps])
-}

package/src/useResizeObserver.ts

@@ -1,123 +0,0 @@
-// copied from react-hookz/web
-// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useResizeObserver/index.ts
-import {type RefObject, useEffect, useRef} from 'react'
-
-const isBrowser =
-  typeof window !== 'undefined' &&
-  typeof navigator !== 'undefined' &&
-  typeof document !== 'undefined'
-
-export type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void
-
-type ResizeObserverSingleton = {
-  observer: ResizeObserver
-  subscribe: (target: Element, callback: UseResizeObserverCallback) => void
-  unsubscribe: (target: Element, callback: UseResizeObserverCallback) => void
-}
-
-let observerSingleton: ResizeObserverSingleton
-
-function getResizeObserver(): ResizeObserverSingleton | undefined {
-  if (!isBrowser) return undefined
-
-  if (observerSingleton) return observerSingleton
-
-  const callbacks = new Map<Element, Set<UseResizeObserverCallback>>()
-
-  const observer = new ResizeObserver((entries) => {
-    for (const entry of entries)
-      callbacks.get(entry.target)?.forEach((cb) =>
-        setTimeout(() => {
-          cb(entry)
-        }, 0),
-      )
-  })
-
-  observerSingleton = {
-    observer,
-    subscribe(target, callback) {
-      let cbs = callbacks.get(target)
-
-      if (!cbs) {
-        // If target has no observers yet - register it
-        cbs = new Set<UseResizeObserverCallback>()
-        callbacks.set(target, cbs)
-        observer.observe(target)
-      }
-
-      // As Set is duplicate-safe - simply add callback on each call
-      cbs.add(callback)
-    },
-    unsubscribe(target, callback) {
-      const cbs = callbacks.get(target)
-
-      // Else branch should never occur in case of normal execution
-      // because callbacks map is hidden in closure - it is impossible to
-      // simulate situation with non-existent `cbs` Set
-      /* istanbul ignore else */
-      if (cbs) {
-        // Remove current observer
-        cbs.delete(callback)
-
-        if (cbs.size === 0) {
-          // If no observers left unregister target completely
-          callbacks.delete(target)
-          observer.unobserve(target)
-        }
-      }
-    },
-  }
-
-  return observerSingleton
-}
-
-/**
- * Invokes a callback whenever ResizeObserver detects a change to target's size.
- *
- * @param target React reference or Element to track.
- * @param callback Callback that will be invoked on resize.
- * @param enabled Whether resize observer is enabled or not.
- */
-export function useResizeObserver<T extends Element>(
-  target: RefObject<T | null>,
-  callback: UseResizeObserverCallback,
-  enabled = true,
-): void {
-  const ro = enabled && getResizeObserver()
-  const cb = useRef(callback)
-  cb.current = callback
-
-  const tgt = target && 'current' in target ? target.current : target
-
-  useEffect(() => {
-    // This secondary target resolve required for case when we receive ref object, which, most
-    // likely, contains null during render stage, but already populated with element during
-    // effect stage.
-
-    const _tgt = target && 'current' in target ? target.current : target
-
-    if (!ro || !_tgt) return undefined
-
-    // As unsubscription in internals of our ResizeObserver abstraction can
-    // happen a bit later than effect cleanup invocation - we need a marker,
-    // that this handler should not be invoked anymore
-    let subscribed = true
-
-    const handler: UseResizeObserverCallback = (...args) => {
-      // It is reinsurance for the highly asynchronous invocations, almost
-      // impossible to achieve in tests, thus excluding from LOC
-      /* istanbul ignore else */
-      if (subscribed) {
-        cb.current(...args)
-      }
-    }
-
-    ro.subscribe(_tgt, handler)
-
-    return () => {
-      subscribed = false
-      ro.unsubscribe(_tgt, handler)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tgt, ro])
-}