@terreno/ui 0.14.2 → 0.15.1

package/src/Signature.test.tsx

@@ -1,30 +1,51 @@
-// 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 {afterEach, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
 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" />;
-  }),
-}));
+const createMockContext = (): Record<string, ReturnType<typeof mock>> => ({
+  beginPath: mock(() => {}),
+  fillRect: mock(() => {}),
+  lineTo: mock(() => {}),
+  moveTo: mock(() => {}),
+  stroke: mock(() => {}),
+});
+
+const patchCanvasRefs = (
+  container: {
+    findAll: (
+      predicate: (node: {type: string}) => boolean
+    ) => Array<{props: Record<string, unknown>}>;
+  },
+  ctx: Record<string, ReturnType<typeof mock>>
+): HTMLCanvasElement => {
+  const canvasNodes = container.findAll((node: {type: string}) => node.type === "canvas");
+  const canvasNode = canvasNodes[0];
+  const canvas = {
+    getContext: mock(() => ctx),
+    height: 180,
+    releasePointerCapture: mock(() => {}),
+    setPointerCapture: mock(() => {}),
+    toDataURL: mock(() => "data:image/png;base64,AAAA"),
+    width: 300,
+  } as unknown as HTMLCanvasElement;
+
+  const ref = canvasNode.props.ref;
+  if (typeof ref === "function") {
+    ref(canvas);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    (ref as {current: unknown}).current = canvas;
+  }
+  return canvas;
+};
 
 describe("Signature", () => {
+  afterEach(() => {
+    mock.restore();
+  });
+
   it("renders correctly", () => {
     const mockOnChange = mock(() => {});
     const {toJSON} = renderWithTheme(<Signature onChange={mockOnChange} />);
@@ -42,39 +63,303 @@ describe("Signature", () => {
     expect(getByText("Clear")).toBeTruthy();
   });
 
-  it("calls clear on the signature canvas when Clear is pressed", () => {
-    clearMock.mockClear();
+  it("scales the web canvas to the available container width", () => {
     const mockOnChange = mock(() => {});
-    const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
-    fireEvent.press(getByText("Clear"));
-    expect(clearMock).toHaveBeenCalledTimes(1);
+    const {UNSAFE_getByType} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    const canvas = UNSAFE_getByType("canvas");
+    expect(canvas.props.style).toMatchObject({maxWidth: "100%", width: "100%"});
+  });
+
+  it("allows the signature box to fill its parent", () => {
+    const mockOnChange = mock(() => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(<Signature fullWidth onChange={mockOnChange} />);
+    const wrapper = UNSAFE_getAllByType(View)[1];
+    expect(wrapper.props.style).toMatchObject({maxWidth: undefined, width: "100%"});
+  });
+
+  it("maps scaled canvas pointer coordinates to the canvas buffer", () => {
+    const mockOnChange = mock(() => {});
+    const moveTo = mock(() => {});
+    const lineTo = mock(() => {});
+    const {UNSAFE_getByType} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    const canvas = UNSAFE_getByType("canvas");
+    canvas.props.ref.current = {
+      clientHeight: 180,
+      clientWidth: 150,
+      getBoundingClientRect: () => ({height: 180, width: 150}),
+      getContext: () => ({
+        beginPath: mock(() => {}),
+        fillRect: mock(() => {}),
+        lineCap: "round",
+        lineJoin: "round",
+        lineTo,
+        moveTo,
+        stroke: mock(() => {}),
+      }),
+      height: 180,
+      setPointerCapture: mock(() => {}),
+      width: 300,
+    } as unknown as HTMLCanvasElement;
+
+    canvas.props.onPointerDown({
+      nativeEvent: {offsetX: 75, offsetY: 90},
+      pointerId: 1,
+    });
+    canvas.props.onPointerMove({
+      nativeEvent: {offsetX: 90, offsetY: 120},
+      pointerId: 1,
+    });
+
+    expect(moveTo).toHaveBeenCalledWith(150, 90);
+    expect(lineTo).toHaveBeenCalledWith(180, 120);
   });
 
   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.
     expect(mockOnChange).toHaveBeenCalledWith("");
   });
 
-  it("calls onChange with the data URL when a stroke ends", () => {
-    toDataURLReturn = "data:image/png;base64,abc";
+  it("calls onStart when pointer down is fired on the canvas", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnStart = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(
+      <Signature onChange={mockOnChange} onStart={mockOnStart} />
+    );
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 10, offsetY: 20},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnStart).toHaveBeenCalledTimes(1);
+    expect(ctx.beginPath).toHaveBeenCalled();
+    expect(ctx.moveTo).toHaveBeenCalledWith(10, 20);
+  });
+
+  it("draws a stroke on pointerMove after pointerDown", () => {
     const mockOnChange = mock(() => {});
-    renderWithTheme(<Signature onChange={mockOnChange} />);
-    expect(lastOnEnd).toBeDefined();
-    lastOnEnd?.();
-    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,abc");
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(ctx.lineTo).toHaveBeenCalledWith(50, 50);
+    expect(ctx.stroke).toHaveBeenCalled();
   });
 
-  it("does not call onChange when toDataURL returns an empty value", () => {
-    toDataURLReturn = "";
+  it("ignores pointerMove when not drawing", () => {
     const mockOnChange = mock(() => {});
-    renderWithTheme(<Signature onChange={mockOnChange} />);
-    expect(lastOnEnd).toBeDefined();
-    lastOnEnd?.();
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(ctx.lineTo).not.toHaveBeenCalled();
+  });
+
+  it("exports the signature as a data URL on pointerUp after drawing", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnEnd = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} onEnd={mockOnEnd} />);
+
+    const canvas = patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // Start drawing
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    // Move to draw
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    // Lift the pointer
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,AAAA");
+    expect(mockOnEnd).toHaveBeenCalledTimes(1);
+    expect(
+      (canvas as unknown as {releasePointerCapture: ReturnType<typeof mock>}).releasePointerCapture
+    ).toHaveBeenCalledWith(1);
+  });
+
+  it("does not call onChange on pointerUp if nothing was drawn", () => {
+    const mockOnChange = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // pointerDown without any move (no drawing)
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+
+    // onChange should not be called with a data URL (no strokes were made)
     expect(mockOnChange).not.toHaveBeenCalled();
   });
+
+  it("ignores pointerUp when not drawing", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnEnd = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} onEnd={mockOnEnd} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnEnd).not.toHaveBeenCalled();
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
+  it("handles pointerLeave the same as pointerUp", () => {
+    const mockOnChange = mock(() => {});
+    const mockOnEnd = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root} = renderWithTheme(<Signature onChange={mockOnChange} onEnd={mockOnEnd} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // Draw something
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    // Leave triggers pointerUp handler
+    act(() => {
+      canvasProps.onPointerLeave({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,AAAA");
+    expect(mockOnEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it("resets canvas and notifies parent on clear after drawing", () => {
+    const mockOnChange = mock(() => {});
+    const ctx = createMockContext();
+    const {UNSAFE_root, getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
+
+    patchCanvasRefs(UNSAFE_root, ctx);
+
+    const canvasNodes = UNSAFE_root.findAll((node: {type: string}) => node.type === "canvas");
+    const canvasProps = canvasNodes[0].props as Record<string, (...args: unknown[]) => void>;
+
+    // Draw
+    act(() => {
+      canvasProps.onPointerDown({
+        nativeEvent: {offsetX: 5, offsetY: 5},
+        pointerId: 1,
+      });
+    });
+    act(() => {
+      canvasProps.onPointerMove({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+    act(() => {
+      canvasProps.onPointerUp({
+        nativeEvent: {offsetX: 50, offsetY: 50},
+        pointerId: 1,
+      });
+    });
+
+    mockOnChange.mockClear();
+
+    // Clear
+    fireEvent.press(getByText("Clear"));
+
+    expect(mockOnChange).toHaveBeenCalledWith("");
+    expect(ctx.fillRect).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";
 
@@ -8,38 +13,182 @@ export interface SignatureProps {
   onChange: (signature: string) => void;
   onStart?: () => void;
   onEnd?: () => void;
+  fullWidth?: boolean;
   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;
+
+interface CanvasPoint {
+  x: number;
+  y: number;
+}
+
+type DrawingEvent = ReactPointerEvent<HTMLCanvasElement>;
+
+/**
+ * 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 = ({
+  fullWidth = false,
+  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 getCanvasPoint = useCallback((event: DrawingEvent): CanvasPoint | null => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return null;
+    }
+
+    const rect = canvas.getBoundingClientRect?.();
+    const displayWidth = rect?.width ?? canvas.clientWidth ?? canvas.width;
+    const displayHeight = rect?.height ?? canvas.clientHeight ?? canvas.height;
+    if (displayWidth <= 0 || displayHeight <= 0) {
+      return {
+        x: event.nativeEvent.offsetX,
+        y: event.nativeEvent.offsetY,
+      };
+    }
+
+    return {
+      x: (event.nativeEvent.offsetX / displayWidth) * canvas.width,
+      y: (event.nativeEvent.offsetY / displayHeight) * canvas.height,
+    };
+  }, []);
 
-  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: DrawingEvent): void => {
+      const ctx = getContext();
+      const point = getCanvasPoint(event);
+      if (!ctx || !point) {
+        return;
+      }
+      canvasRef.current?.setPointerCapture?.(event.pointerId);
+      isDrawingRef.current = true;
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+      onStart?.();
+    },
+    [getCanvasPoint, getContext, onStart]
+  );
+
+  const handlePointerMove = useCallback(
+    (event: DrawingEvent): void => {
+      if (!isDrawingRef.current) {
+        return;
+      }
+      const ctx = getContext();
+      const point = getCanvasPoint(event);
+      if (!ctx || !point) {
+        return;
+      }
+      ctx.lineTo(point.x, point.y);
+      ctx.stroke();
+      hasDrawnRef.current = true;
+    },
+    [getCanvasPoint, getContext]
+  );
+
+  const handlePointerUp = useCallback(
+    (event: DrawingEvent): 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: fullWidth ? undefined : SIGNATURE_WIDTH_PX,
+          width: "100%",
+        }}
+      >
+        <canvas
+          height={SIGNATURE_HEIGHT_PX}
+          onPointerDown={handlePointerDown}
+          onPointerLeave={handlePointerUp}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          ref={canvasRef}
+          style={{
+            display: "block",
+            height: SIGNATURE_HEIGHT_PX,
+            maxWidth: "100%",
+            touchAction: "none",
+            width: "100%",
+          }}
+          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: () => {},

package/src/SignatureField.tsx

@@ -20,6 +20,7 @@ export const SignatureField = ({
   onEnd,
   disabledText,
   errorText,
+  fullWidth = false,
 }: SignatureFieldProps): ReactElement => {
   const {theme} = useTheme();
   if (disabled) {
@@ -62,6 +63,7 @@ export const SignatureField = ({
       )}
       <View style={{marginVertical: 8}}>
         <Signature
+          fullWidth={fullWidth}
           onChange={onChange}
           onEnd={() => {
             onEnd?.();

package/src/SignatureSizing.ts

@@ -0,0 +1,10 @@
+export const SIGNATURE_PAD_HEIGHT_PX = 180;
+export const IOS_SIGNATURE_PAD_HEIGHT_PX = 120;
+
+export const getSignaturePadHeight = (platformOS: string): number => {
+  if (platformOS === "ios") {
+    return IOS_SIGNATURE_PAD_HEIGHT_PX;
+  }
+
+  return SIGNATURE_PAD_HEIGHT_PX;
+};