@terreno/ui 0.14.1 → 0.15.0

package/src/Signature.native.tsx

@@ -1,6 +1,7 @@
-import {type FC, useRef} from "react";
+import {Canvas, ImageFormat, Path, Skia, useCanvasRef} from "@shopify/react-native-skia";
+import {type FC, useCallback, useMemo, useRef, useState} from "react";
 import {Text, View} from "react-native";
-import SignatureScreen, {type SignatureViewRef} from "react-native-signature-canvas";
+import {Gesture, GestureDetector} from "react-native-gesture-handler";
 
 import {useTheme} from "./Theme";
 
@@ -10,44 +11,160 @@ interface Props {
   onEnd?: () => void;
 }
 
-const style = `.m-signature-pad--footer {display: none; margin: 0px;}`;
+const SIGNATURE_PAD_HEIGHT_PX = 180;
+const STROKE_WIDTH_PX = 2.5;
+// Snapshot after the released stroke has painted to the Skia canvas.
+const SNAPSHOT_DELAY_MS = 60;
 
+/**
+ * Native (iOS + Android) signature pad backed by Skia — no WebView.
+ *
+ * Replaces the previous react-native-signature-canvas WebView, which on iOS
+ * stayed on `about:blank` (its signature_pad script never loaded, so onOK
+ * never fired). Skia draws strokes natively and exports a PNG via
+ * makeImageSnapshot, which behaves consistently across both platforms.
+ *
+ * Touches are captured with react-native-gesture-handler rather than
+ * PanResponder because the Skia <Canvas> renders a native view that swallows
+ * React Native's JS touch responder.
+ *
+ * Reports the signature to the parent as a base64 PNG data URL via onChange,
+ * and pushes "" on clear so "signature required" gating resets immediately.
+ */
 export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
-  const ref = useRef<SignatureViewRef>(null);
   const {theme} = useTheme();
+  const canvasRef = useCanvasRef();
+  const snapshotTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Completed strokes as SVG path strings; the active stroke is tracked separately.
+  const [completedStrokes, setCompletedStrokes] = useState<string[]>([]);
+  const [activeStroke, setActiveStroke] = useState<string | null>(null);
+  const activeStrokeRef = useRef<string | null>(null);
 
-  const handleClear = () => {
-    ref.current?.clearSignature();
-    // `clearSignature` on the underlying canvas does not fire `onOK`, so the
-    // parent never learns the signature is gone. Push an empty value so any
-    // "signature required" gating reflects the cleared state immediately.
-    onChange("");
-  };
+  const clearSnapshotTimer = useCallback((): void => {
+    if (snapshotTimerRef.current !== null) {
+      clearTimeout(snapshotTimerRef.current);
+      snapshotTimerRef.current = null;
+    }
+  }, []);
+
+  /**
+   * Snapshots the Skia canvas and reports a PNG data URL. Runs after a short
+   * delay so the just-completed stroke is painted before the snapshot.
+   */
+  const captureSignature = useCallback((): void => {
+    clearSnapshotTimer();
+    snapshotTimerRef.current = setTimeout(() => {
+      const image = canvasRef.current?.makeImageSnapshot();
+      if (!image) {
+        return;
+      }
+      const base64 = image.encodeToBase64(ImageFormat.PNG, 100);
+      if (base64 && base64.length > 0) {
+        onChange(`data:image/png;base64,${base64}`);
+      }
+    }, SNAPSHOT_DELAY_MS);
+  }, [canvasRef, clearSnapshotTimer, onChange]);
+
+  const beginStroke = useCallback(
+    (x: number, y: number): void => {
+      const next = `M${x.toFixed(2)} ${y.toFixed(2)}`;
+      activeStrokeRef.current = next;
+      setActiveStroke(next);
+      onStart?.();
+    },
+    [onStart]
+  );
 
-  const onBegin = () => {
-    onStart?.();
-  };
+  const extendStroke = useCallback((x: number, y: number): void => {
+    const prev = activeStrokeRef.current;
+    if (prev === null) {
+      return;
+    }
+    const next = `${prev} L${x.toFixed(2)} ${y.toFixed(2)}`;
+    activeStrokeRef.current = next;
+    setActiveStroke(next);
+  }, []);
 
-  // Called after end of stroke. Kind of goofy if you ask me,
-  // but you need this in order to trigger the 'onOK' callback that gives us the actual image.
-  const handleEnd = () => {
-    ref.current?.readSignature();
+  const endStroke = useCallback((): void => {
+    const finished = activeStrokeRef.current;
+    activeStrokeRef.current = null;
+    setActiveStroke(null);
+    // A tap without movement has no line segment, so there is nothing to capture.
+    if (finished === null || !finished.includes("L")) {
+      return;
+    }
+    setCompletedStrokes((prev) => [...prev, finished]);
+    captureSignature();
     onEnd?.();
-  };
+  }, [captureSignature, onEnd]);
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .runOnJS(true)
+        .minDistance(0)
+        .onBegin((event) => {
+          beginStroke(event.x, event.y);
+        })
+        .onUpdate((event) => {
+          extendStroke(event.x, event.y);
+        })
+        .onEnd(() => {
+          endStroke();
+        })
+        .onFinalize(() => {
+          // Covers cancellation paths where onEnd does not fire.
+          if (activeStrokeRef.current !== null) {
+            endStroke();
+          }
+        }),
+    [beginStroke, extendStroke, endStroke]
+  );
+
+  const skiaPaths = useMemo(() => {
+    const allStrokes = activeStroke ? [...completedStrokes, activeStroke] : completedStrokes;
+    return allStrokes
+      .map((svg) => Skia.Path.MakeFromSVGString(svg))
+      .filter((path): path is NonNullable<typeof path> => path !== null);
+  }, [completedStrokes, activeStroke]);
+
+  const handleClear = useCallback((): void => {
+    clearSnapshotTimer();
+    activeStrokeRef.current = null;
+    setActiveStroke(null);
+    setCompletedStrokes([]);
+    // clearing must reset parent gating, mirroring the web Signature variant.
+    onChange("");
+  }, [clearSnapshotTimer, onChange]);
 
   return (
     <View style={{minWidth: 220}}>
-      <View style={{borderColor: theme.border.dark, borderWidth: 1, minHeight: 90}}>
-        <SignatureScreen
-          backgroundColor={theme.surface.base}
-          onBegin={onBegin}
-          onEnd={handleEnd}
-          onOK={(img) => onChange(img)}
-          ref={ref}
-          trimWhitespace
-          webStyle={style}
-        />
-      </View>
+      <GestureDetector gesture={panGesture}>
+        <View
+          style={{
+            backgroundColor: theme.surface.base,
+            borderColor: theme.border.dark,
+            borderWidth: 1,
+            height: SIGNATURE_PAD_HEIGHT_PX,
+            overflow: "hidden",
+          }}
+        >
+          <Canvas ref={canvasRef} style={{flex: 1}}>
+            {skiaPaths.map((path, index) => (
+              <Path
+                color={theme.text.secondaryDark}
+                // Strokes are append-only, so the index is a stable key here.
+                key={index}
+                path={path}
+                strokeCap="round"
+                strokeJoin="round"
+                strokeWidth={STROKE_WIDTH_PX}
+                style="stroke"
+              />
+            ))}
+          </Canvas>
+        </View>
+      </GestureDetector>
       <View style={{flexDirection: "row"}}>
         <Text
           onPress={handleClear}

package/src/Signature.test.tsx

@@ -1,29 +1,9 @@
-// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
-import {forwardRef, useImperativeHandle} from "react";
-import {View} from "react-native";
 
 import {Signature} from "./Signature";
 import {renderWithTheme} from "./test-utils";
 
-const clearMock = mock(() => {});
-let toDataURLReturn: string = "";
-const toDataURLMock = mock(() => toDataURLReturn);
-let lastOnEnd: (() => void) | undefined;
-
-// Mock react-signature-canvas so we can exercise the ref methods and onEnd callback.
-mock.module("react-signature-canvas", () => ({
-  default: forwardRef(({backgroundColor, onEnd}: any, ref) => {
-    lastOnEnd = onEnd;
-    useImperativeHandle(ref, () => ({
-      clear: clearMock,
-      toDataURL: toDataURLMock,
-    }));
-    return <View style={{backgroundColor}} testID="signature-canvas" />;
-  }),
-}));
-
 describe("Signature", () => {
   it("renders correctly", () => {
     const mockOnChange = mock(() => {});
@@ -42,39 +22,12 @@ describe("Signature", () => {
     expect(getByText("Clear")).toBeTruthy();
   });
 
-  it("calls clear on the signature canvas when Clear is pressed", () => {
-    clearMock.mockClear();
-    const mockOnChange = mock(() => {});
-    const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
-    fireEvent.press(getByText("Clear"));
-    expect(clearMock).toHaveBeenCalledTimes(1);
-  });
-
   it("notifies the parent with an empty value when Clear is pressed", () => {
-    clearMock.mockClear();
     const mockOnChange = mock(() => {});
     const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
     fireEvent.press(getByText("Clear"));
-    // Without this, "signature required" gating in parents would never reset
-    // because the underlying canvas clear() does not fire onEnd/onOK.
+    // Clearing the canvas emits no draw event, so the component must push ""
+    // directly or "signature required" gating in parents would never reset.
     expect(mockOnChange).toHaveBeenCalledWith("");
   });
-
-  it("calls onChange with the data URL when a stroke ends", () => {
-    toDataURLReturn = "data:image/png;base64,abc";
-    const mockOnChange = mock(() => {});
-    renderWithTheme(<Signature onChange={mockOnChange} />);
-    expect(lastOnEnd).toBeDefined();
-    lastOnEnd?.();
-    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,abc");
-  });
-
-  it("does not call onChange when toDataURL returns an empty value", () => {
-    toDataURLReturn = "";
-    const mockOnChange = mock(() => {});
-    renderWithTheme(<Signature onChange={mockOnChange} />);
-    expect(lastOnEnd).toBeDefined();
-    lastOnEnd?.();
-    expect(mockOnChange).not.toHaveBeenCalled();
-  });
 });

package/src/Signature.tsx

@@ -1,6 +1,11 @@
-import {type ReactElement, useRef} from "react";
+import {
+  type ReactElement,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import {Text, View} from "react-native";
-import SignatureCanvas from "react-signature-canvas";
 
 import {useTheme} from "./Theme";
 
@@ -11,35 +16,136 @@ export interface SignatureProps {
   value?: string; // note this
 }
 
-export const Signature = ({onChange}: SignatureProps): ReactElement | null => {
-  const ref = useRef<SignatureCanvas>(null);
+const SIGNATURE_WIDTH_PX = 300;
+const SIGNATURE_HEIGHT_PX = 180;
+const STROKE_WIDTH_PX = 2.5;
+
+/**
+ * Web signature pad backed by a raw HTML5 <canvas> — no third-party library.
+ *
+ * Pointer events capture strokes and the canvas is exported as a base64 PNG
+ * data URL via onChange. Clearing pushes "" so "signature required" gating in
+ * parents resets immediately, since clearing the canvas emits no draw event.
+ */
+export const Signature = ({onChange, onStart, onEnd}: SignatureProps): ReactElement => {
   const {theme} = useTheme();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const isDrawingRef = useRef(false);
+  const hasDrawnRef = useRef(false);
 
-  const onClear = () => {
-    ref.current?.clear();
-    // `clear()` on the underlying canvas does not fire `onEnd`, so the parent
-    // never learns the signature is gone. Push an empty value so any
-    // "signature required" gating reflects the cleared state immediately.
-    onChange("");
-  };
+  const getContext = useCallback((): CanvasRenderingContext2D | null => {
+    const canvas = canvasRef.current;
+    if (!canvas || typeof canvas.getContext !== "function") {
+      return null;
+    }
+    return canvas.getContext("2d");
+  }, []);
 
-  const onUpdatedSignature = () => {
-    if (ref.current?.toDataURL()) {
-      onChange(ref.current.toDataURL());
+  /**
+   * Paints the opaque background and configures stroke styling. Re-runs when
+   * the theme changes so the pad matches the active light/dark colors.
+   */
+  const resetCanvas = useCallback((): void => {
+    const canvas = canvasRef.current;
+    const ctx = getContext();
+    if (!canvas || !ctx) {
+      return;
     }
-  };
+    ctx.fillStyle = theme.surface.base;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = theme.text.secondaryDark;
+    ctx.lineWidth = STROKE_WIDTH_PX;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+  }, [getContext, theme.surface.base, theme.text.secondaryDark]);
+
+  // Initialize the canvas background and stroke styling once the element mounts.
+  useEffect((): void => {
+    resetCanvas();
+  }, [resetCanvas]);
+
+  const handlePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>): void => {
+      const ctx = getContext();
+      if (!ctx) {
+        return;
+      }
+      canvasRef.current?.setPointerCapture?.(event.pointerId);
+      isDrawingRef.current = true;
+      ctx.beginPath();
+      ctx.moveTo(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+      onStart?.();
+    },
+    [getContext, onStart]
+  );
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>): void => {
+      if (!isDrawingRef.current) {
+        return;
+      }
+      const ctx = getContext();
+      if (!ctx) {
+        return;
+      }
+      ctx.lineTo(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+      ctx.stroke();
+      hasDrawnRef.current = true;
+    },
+    [getContext]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>): void => {
+      if (!isDrawingRef.current) {
+        return;
+      }
+      isDrawingRef.current = false;
+      canvasRef.current?.releasePointerCapture?.(event.pointerId);
+      const canvas = canvasRef.current;
+      if (hasDrawnRef.current && canvas) {
+        onChange(canvas.toDataURL("image/png"));
+      }
+      onEnd?.();
+    },
+    [onChange, onEnd]
+  );
+
+  const handleClear = useCallback((): void => {
+    hasDrawnRef.current = false;
+    isDrawingRef.current = false;
+    resetCanvas();
+    // Clearing the canvas emits no draw event, so notify the parent directly
+    // to reset any "signature required" gating.
+    onChange("");
+  }, [resetCanvas, onChange]);
+
   return (
     <View>
-      <View style={{borderColor: theme.border.dark, borderWidth: 1, maxWidth: 300, width: "100%"}}>
-        <SignatureCanvas
-          backgroundColor={theme.surface.base}
-          onEnd={onUpdatedSignature}
-          penColor={theme.text.secondaryDark}
-          ref={ref}
+      <View
+        style={{
+          borderColor: theme.border.dark,
+          borderWidth: 1,
+          maxWidth: SIGNATURE_WIDTH_PX,
+          width: "100%",
+        }}
+      >
+        <canvas
+          height={SIGNATURE_HEIGHT_PX}
+          onPointerDown={handlePointerDown}
+          onPointerLeave={handlePointerUp}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          ref={canvasRef}
+          style={{height: SIGNATURE_HEIGHT_PX, touchAction: "none", width: SIGNATURE_WIDTH_PX}}
+          width={SIGNATURE_WIDTH_PX}
         />
       </View>
       <View>
-        <Text onPress={onClear} style={{color: theme.text.link, textDecorationLine: "underline"}}>
+        <Text
+          onPress={handleClear}
+          style={{color: theme.text.link, textDecorationLine: "underline"}}
+        >
           Clear
         </Text>
       </View>

package/src/SignatureField.test.tsx

@@ -1,18 +1,9 @@
 import {describe, expect, it, mock} from "bun:test";
-import {forwardRef} from "react";
-import {View} from "react-native";
 import type {ReactTestInstance} from "react-test-renderer";
 
 import {SignatureField} from "./SignatureField";
 import {renderWithTheme} from "./test-utils";
 
-// Mock react-signature-canvas (used by Signature component)
-mock.module("react-signature-canvas", () => ({
-  default: forwardRef<View, {backgroundColor?: string}>(({backgroundColor}, ref) => (
-    <View ref={ref} style={{backgroundColor}} testID="signature-canvas" />
-  )),
-}));
-
 describe("SignatureField", () => {
   const defaultProps = {
     onChange: () => {},