sanity-plugin-hotspot-array 0.0.7 → 0.1.0-v3-studio.1

package/package.json

@@ -1,75 +1,89 @@
 {
   "name": "sanity-plugin-hotspot-array",
-  "version": "0.0.7",
+  "version": "0.1.0-v3-studio.1",
   "description": "A configurable Custom Input for Arrays that will add and update items by clicking on an Image",
-  "main": "lib/HotspotArray.js",
-  "scripts": {
-    "build": "sanipack build",
-    "watch": "sanipack build --watch",
-    "_postinstall": "husky install",
-    "prepublishOnly": "pinst --disable && sanipack build && sanipack verify",
-    "postpublish": "pinst --enable",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint:fix"
+  "author": "Simeon Griggs <simeon@sanity.io>",
+  "license": "MIT",
+  "main": "./lib/cjs/index.js",
+  "source": "./src/index.tsx",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
     }
   },
+  "files": [
+    "src",
+    "lib",
+    "v2-incompatible.js",
+    "sanity.json"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "scripts": {
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint src/**/*",
+    "lint:fix": "eslint . --fix",
+    "clean": "rimraf lib",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent",
+    "link-watch": "plugin-kit link-watch",
+    "prepare": "husky install"
+  },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/SimeonGriggs/sanity-plugin-hotspot-array.git"
+    "url": "git@github.com:sanity-io/sanity-plugin-hotspot-array.git"
   },
   "keywords": [
     "sanity",
     "sanity-plugin"
   ],
-  "author": "Simeon Griggs <simeon@sanity.io>",
-  "license": "MIT",
   "dependencies": {
     "@react-hookz/web": "^14.2.2",
     "@sanity/asset-utils": "^1.2.3",
-    "@sanity/base": "^2.30.1",
-    "@sanity/form-builder": "^2.30.1",
-    "@sanity/ui": "^0.37.12",
-    "framer-motion": "^6.3.11",
-    "husky": "^8.0.1"
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^1.0.0-beta.31",
+    "@sanity/util": "dev-preview || 3.0.0-dev-preview.22",
+    "framer-motion": "^6.3.11"
   },
   "devDependencies": {
-    "eslint": "^8.17.0",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@parcel/packager-ts": "^2.6.2",
+    "@parcel/transformer-typescript-types": "^2.6.2",
+    "@sanity/plugin-kit": "^1.0.2",
+    "@sanity/semantic-release-preset": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "parcel": "~2.6.0",
     "pinst": "^2.1.6",
-    "prettier": "^2.7.0",
-    "sanipack": "^2.1.0"
+    "prettier": "^2.7.1",
+    "react": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanipack": "^2.1.0",
+    "sanity": "dev-preview || 3.0.0-dev-preview.22",
+    "typescript": "~4.7.0"
   },
   "peerDependencies": {
     "@sanity/image-url": "1.0.1",
-    "@sanity/util": "2.29.5",
     "lodash": "4.17.21",
-    "react": "^17.0.2"
+    "react": "^18.0.0",
+    "sanity": "dev-preview || 3.0.0-dev-preview.22"
   },
   "bugs": {
-    "url": "https://github.com/SimeonGriggs/sanity-plugin-hotspot-array/issues"
-  },
-  "homepage": "https://github.com/SimeonGriggs/sanity-plugin-hotspot-array#readme",
-  "prettier": {
-    "semi": false,
-    "printWidth": 100,
-    "bracketSpacing": false,
-    "singleQuote": true
+    "url": "https://github.com/sanity-io/sanity-plugin-hotspot-array/issues"
   },
-  "eslintConfig": {
-    "parser": "sanipack/babel/eslint-parser",
-    "extends": [
-      "sanity",
-      "sanity/react",
-      "prettier"
-    ],
-    "ignorePatterns": [
-      "lib/**/"
-    ]
-  }
+  "homepage": "https://github.com/sanity-io/sanity-plugin-hotspot-array#readme"
 }

package/sanity.json

@@ -1,7 +1,8 @@
 {
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
-  "parts": []
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
 }

package/src/Feedback.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, {ReactNode} from 'react'
 import {Card, Text} from '@sanity/ui'
 
-export default function Feedback({children}) {
+export default function Feedback({children}: {children: ReactNode}) {
   return (
     <Card padding={4} radius={2} shadow={1} tone="caution">
       <Text>{children}</Text>

package/src/ImageHotspotArray.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable react/display-name */
+
+import {getImageDimensions} from '@sanity/asset-utils'
+import {
+  ArrayOfObjectsInputProps,
+  ImageValue,
+  insert,
+  ObjectSchemaType,
+  PatchEvent,
+  set,
+  setIfMissing,
+  useClient,
+  useFormValue,
+} from 'sanity'
+import imageUrlBuilder from '@sanity/image-url'
+import {Card, Flex, Stack} from '@sanity/ui'
+import {randomKey} from '@sanity/util/content'
+import get from 'lodash/get'
+import React, {useCallback, useMemo, useRef, useState} from 'react'
+
+import {IUseResizeObserverCallback, useDebouncedCallback, useResizeObserver} from '@react-hookz/web'
+import Feedback from './Feedback'
+import Spot from './Spot'
+import {ImageHotspotOptions} from './index'
+
+const imageStyle = {width: `100%`, height: `auto`}
+
+const VALID_ROOT_PATHS = ['document', 'parent']
+
+export type FnHotspotMove = (key: string, x: number, y: number) => void
+
+export type HotspotItem<HotspotFields = {[key: string]: unknown}> = {
+  _key: string
+  _type: string
+  x: number
+  y: number
+} & HotspotFields
+
+export function ImageHotspotArray(
+  props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions}
+) {
+  const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props
+
+  const sanityClient = useClient({apiVersion: '2022-01-01'})
+
+  const imageHotspotPathRoot = useMemo(() => {
+    const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')
+      ? imageHotspotOptions.pathRoot
+      : 'document'
+    return pathRoot === 'document' ? [] : props.path.slice(0, -1)
+  }, [imageHotspotOptions.pathRoot, props.path])
+
+  const rootObject = useFormValue(imageHotspotPathRoot)
+
+  /**
+   * Finding the image from the imageHotspotPathRoot (defaults to document),
+   * using the path from the hotspot's `options` field
+   *
+   * when changes in imageHotspotPathRoot (e.g. document) occur,
+   * check if there are any changes to the hotspotImage and update the reference
+   */
+  const hotspotImage = useMemo(() => {
+    return get(rootObject, imageHotspotOptions.imagePath) as ImageValue | undefined
+  }, [rootObject, imageHotspotOptions.imagePath])
+
+  const displayImage = useMemo(() => {
+    const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')
+    const urlFor = (source: ImageValue) => builder.image(source)
+
+    if (hotspotImage?.asset?._ref) {
+      const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)
+      const width = 1200
+      const height = Math.round(width / aspectRatio)
+      const url = urlFor(hotspotImage).width(width).url()
+
+      return {width, height, url}
+    }
+
+    return null
+  }, [hotspotImage, sanityClient])
+
+  const handleHotspotImageClick = useCallback(
+    (event: any) => {
+      const {nativeEvent} = event
+
+      // Calculate the x/y percentage of the click position
+      const x = Number(((nativeEvent.offsetX * 100) / nativeEvent.srcElement.width).toFixed(2))
+      const y = Number(((nativeEvent.offsetY * 100) / nativeEvent.srcElement.height).toFixed(2))
+      const description = `New Hotspot at ${x}% x ${y}%`
+
+      const newRow: HotspotItem = {
+        _key: randomKey(12),
+        _type: schemaType.of[0].name,
+        x,
+        y,
+      }
+
+      if (imageHotspotOptions?.descriptionPath) {
+        newRow[imageHotspotOptions.descriptionPath] = description
+      }
+
+      onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))
+    },
+    [imageHotspotOptions, onChange, schemaType]
+  )
+
+  const handleHotspotMove: FnHotspotMove = useCallback(
+    (key, x, y) => {
+      onChange(
+        PatchEvent.from([
+          // Set the `x` value of this array key item
+          set(x, [{_key: key}, 'x']),
+          // Set the `y` value of this array key item
+          set(y, [{_key: key}, 'y']),
+        ])
+      )
+    },
+    [onChange]
+  )
+
+  const hotspotImageRef = useRef<HTMLImageElement | null>(null)
+
+  const [imageRect, setImageRect] = useState<DOMRectReadOnly>()
+  const updateImageRectCallback = useDebouncedCallback(
+    ((e) => setImageRect(e.contentRect)) as IUseResizeObserverCallback,
+    [setImageRect],
+    200
+  )
+  useResizeObserver(hotspotImageRef, updateImageRectCallback)
+
+  return (
+    <Stack space={[2, 2, 3]}>
+      {displayImage?.url ? (
+        <div style={{position: `relative`}}>
+          {imageRect &&
+            (value?.length ?? 0) > 0 &&
+            value?.map((spot, index) => (
+              <Spot
+                index={index}
+                key={spot._key}
+                value={spot}
+                bounds={imageRect}
+                update={handleHotspotMove}
+                hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}
+                tooltip={imageHotspotOptions?.tooltip}
+                renderPreview={renderPreview}
+                schemaType={schemaType.of[0] as ObjectSchemaType}
+              />
+            ))}
+
+          <Card __unstable_checkered shadow={1}>
+            <Flex align="center" justify="center">
+              <img
+                ref={hotspotImageRef}
+                src={displayImage.url}
+                width={displayImage.width}
+                height={displayImage.height}
+                alt=""
+                style={imageStyle}
+                onClick={handleHotspotImageClick}
+              />
+            </Flex>
+          </Card>
+        </div>
+      ) : (
+        <Feedback>
+          {imageHotspotOptions.imagePath ? (
+            <>
+              No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>
+            </>
+          ) : (
+            <>
+              Define a path in this field using to the image field in this document at{' '}
+              <code>options.hotspotImagePath</code>
+            </>
+          )}
+        </Feedback>
+      )}
+      {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (
+        <Feedback>
+          The supplied imageHotspotPathRoot "{imageHotspotOptions.pathRoot}" is not valid, falling
+          back to "document". Available values are "{VALID_ROOT_PATHS.join(', ')}".
+        </Feedback>
+      )}
+      {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}
+    </Stack>
+  )
+}

package/src/Spot.tsx

@@ -1,13 +1,16 @@
+/* eslint-disable */
 import {Box, Text, Tooltip} from '@sanity/ui'
 import {motion, useMotionValue} from 'framer-motion'
 import get from 'lodash/get'
-import React, {CSSProperties, ReactElement, useEffect} from 'react'
-import {FnHotspotMove, TSpot} from './HotspotArray'
+import React, {ComponentType, CSSProperties, ReactElement, useEffect} from 'react'
+import {FnHotspotMove, HotspotItem} from './ImageHotspotArray'
+import {ObjectSchemaType, RenderPreviewCallback} from 'sanity'
 
 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',
@@ -60,39 +63,49 @@ const labelStyleWhileActive: CSSProperties = {
   visibility: 'hidden',
 }
 
-const round = (num) => Math.round(num * 100) / 100
+const round = (num: number) => Math.round(num * 100) / 100
 
-interface IHotspot {
-  spot: TSpot
+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?: ReactElement
+  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>
   index: number
+  schemaType: ObjectSchemaType
+  renderPreview: RenderPreviewCallback
 }
 
 export default function Spot({
-  spot,
+  value,
   bounds,
   update,
   hotspotDescriptionPath,
   tooltip,
   index,
-}: IHotspot) {
+  schemaType,
+  renderPreview,
+}: HotspotProps) {
   const [isDragging, setIsDragging] = React.useState(false)
   const [isHovering, setIsHovering] = React.useState(false)
 
   // x/y are stored as % but need to be converted to px
-  const x = useMotionValue(round(bounds.width * (spot.x / 100)))
-  const y = useMotionValue(round(bounds.height * (spot.y / 100)))
+  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 * (spot.x / 100)))
-    y.set(round(bounds.height * (spot.y / 100)))
-  }, [bounds])
+    x.set(round(bounds.width * (value.x / 100)))
+    y.set(round(bounds.height * (value.y / 100)))
+  }, [x, y, value, bounds])
 
   const handleDragEnd = React.useCallback(() => {
     setIsDragging(false)
@@ -109,8 +122,8 @@ export default function Spot({
     const safeX = Math.max(0, Math.min(100, newX))
     const safeY = Math.max(0, Math.min(100, newY))
 
-    update(spot._key, safeX, safeY)
-  }, [spot])
+    update(value._key, safeX, safeY)
+  }, [x, y, value, update, bounds])
   const handleDragStart = React.useCallback(() => setIsDragging(true), [])
 
   const handleHoverStart = React.useCallback(() => setIsHovering(true), [])
@@ -122,18 +135,18 @@ export default function Spot({
 
   return (
     <Tooltip
-      key={spot._key}
+      key={value._key}
       disabled={isDragging}
       portal
       content={
         tooltip && typeof tooltip === 'function' ? (
-          React.createElement(tooltip, {spot})
+          React.createElement(tooltip, {value, renderPreview, schemaType})
         ) : (
           <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>
             <Text textOverflow="ellipsis">
               {hotspotDescriptionPath
-                ? (get(spot, hotspotDescriptionPath) as string)
-                : `${spot.x}% x ${spot.y}%`}
+                ? (get(value, hotspotDescriptionPath) as string)
+                : `${value.x}% x ${value.y}%`}
             </Text>
           </Box>
         )

package/src/index.tsx

@@ -0,0 +1,42 @@
+import {ImageHotspotArray, type HotspotItem} from './ImageHotspotArray'
+import React, {ComponentType} from 'react'
+import {ArrayOfObjectsInputProps, createPlugin} from 'sanity'
+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/types' {
+  export interface ArrayOptions {
+    imageHotspot?: ImageHotspotOptions
+  }
+}
+
+export {ImageHotspotArray}
+export type {HotspotTooltipProps, HotspotItem}
+
+export const imageHotspotArrayPlugin = createPlugin({
+  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/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "extends": "sanipack/babel"
-}

package/lib/Feedback.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Feedback;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ui = require("@sanity/ui");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function Feedback(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    padding: 4,
-    radius: 2,
-    shadow: 1,
-    tone: "caution"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Text, null, children));
-}
-//# sourceMappingURL=Feedback.js.map

package/lib/Feedback.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Feedback.js","names":["Feedback","children"],"sources":["../src/Feedback.tsx"],"sourcesContent":["import React from 'react'\nimport {Card, Text} from '@sanity/ui'\n\nexport default function Feedback({children}) {\n  return (\n    <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n      <Text>{children}</Text>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,QAAT,OAA8B;EAAA,IAAXC,QAAW,QAAXA,QAAW;EAC3C,oBACE,6BAAC,QAAD;IAAM,OAAO,EAAE,CAAf;IAAkB,MAAM,EAAE,CAA1B;IAA6B,MAAM,EAAE,CAArC;IAAwC,IAAI,EAAC;EAA7C,gBACE,6BAAC,QAAD,QAAOA,QAAP,CADF,CADF;AAKD"}