refactor(SLB-385): simplify focalpoint typing

So its compatible with a simple `[Int!]` GraphQL type.

Author: pmelab

packages/npm/@amazeelabs/image/src/client.tsx

@@ -15,6 +15,7 @@ import {
   type ImageProps,
   type ImageSettings as ImageSettingsType,
   inferTargetDimensions,
+  validateFocus,
 } from './lib.js';
 
 function base64(content: string) {
@@ -95,7 +96,7 @@ export const Image = forwardRef(function Image(
       ref.current.style.backgroundPosition = calculateFocusPosition(
         ref.current.naturalWidth,
         ref.current.naturalHeight,
-        focalPoint || [
+        validateFocus(focalPoint) || [
           ref.current.naturalWidth / 2,
           ref.current.naturalHeight / 2,
         ],

packages/npm/@amazeelabs/image/src/lib.ts

@@ -30,7 +30,7 @@ export type ImageProps = Omit<
    * one is the x-coordinate, the second one is the y-coordinate. Both are
    * relative to the top-left corner of the *original* image.
    */
-  focalPoint?: [number, number];
+  focalPoint?: Array<number>;
   /**
    * A single property to switch between important and lazy-loaded images.
    * It controls the `loading` and `decoding` attributes.
@@ -113,6 +113,15 @@ export function inferTargetDimensions(
 
 export type Focus = [number, number];
 
+export function validateFocus(
+  focus: Array<number> | undefined,
+): Focus | undefined {
+  if (!focus || focus.length === 2) {
+    return focus as Focus;
+  }
+  console.warn('Invalid focus point:', focus);
+}
+
 export function calculateFocusExtraction(
   source: readonly [number, number],
   target: readonly [number, number],

packages/npm/@amazeelabs/image/src/server.tsx

@@ -18,6 +18,7 @@ import {
   ImageProps,
   ImageSettings as ImageSettingsType,
   inferTargetDimensions,
+  validateFocus,
 } from './lib.js';
 
 async function prepareFile(src: string) {
@@ -170,7 +171,12 @@ export async function Image({
       decoding={priority ? 'async' : 'auto'}
       // eslint-disable-next-line react/no-unknown-property
       fetchPriority={priority ? 'high' : 'auto'}
-      src={await transformSrc(filename, source, target, focalPoint)}
+      src={await transformSrc(
+        filename,
+        source,
+        target,
+        validateFocus(focalPoint),
+      )}
       srcSet={await transformSrcSet(
         filename,
         source,
@@ -180,7 +186,7 @@ export async function Image({
           target.width * 2,
           ...getSettings().resolutions.filter((w) => w < target.width),
         ],
-        focalPoint,
+        validateFocus(focalPoint),
       )}
       sizes={props.sizes || `(min-width: ${width}px) ${width}px, 100vw`}
       data-src={props.src}