@smileid/usesmileid 12.0.2 → 12.1.0

package/src/presentation/components/use_smile_id_expandable_icon.tsx

@@ -1,102 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing, Pressable, StyleSheet } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { SiExpandMore } from "./icons";
-
-export type UseSmileIDExpandableIconProps = {
-  readonly expanded: boolean;
-  /**
-   * Optional toggle callback. When provided, the icon renders inside
-   * a `Pressable` so the disc itself owns the expand / collapse
-   * interaction. When omitted, the icon is purely visual and
-   * partner code drives the `expanded` state externally.
-   */
-  readonly onChange?: (next: boolean) => void;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const SIZE = 20;
-const CHEVRON_WIDTH = 12;
-const ROTATION_DURATION_MS = 200;
-
-/**
- * Filled circular disc carrying a downward chevron. Used in the
- * consent screen's "Learn more" row — partners tap the disc to
- * toggle the explainer panel. The chevron rotates 180° (animated
- * over 200 ms with ease-in-out) when `expanded` flips, so the same
- * artwork serves both states with a smooth transition.
- */
-export function UseSmileIDExpandableIcon(props: UseSmileIDExpandableIconProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const accessibilityLabel = props.expanded ? "Collapse" : "Expand";
-
-  const rotationProgress = useRef(
-    new Animated.Value(props.expanded ? 1 : 0),
-  ).current;
-  useEffect(() => {
-    Animated.timing(rotationProgress, {
-      toValue: props.expanded ? 1 : 0,
-      duration: ROTATION_DURATION_MS,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true,
-    }).start();
-  }, [props.expanded, rotationProgress]);
-
-  const rotate = rotationProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "180deg"],
-  });
-
-  const inner = (
-    <Animated.View
-      style={[
-        styles.disc,
-        {
-          backgroundColor: theme.colors.offBlack,
-          transform: [{ rotate }],
-        },
-      ]}
-    >
-      <SiExpandMore size={CHEVRON_WIDTH} color={theme.colors.offWhite} />
-    </Animated.View>
-  );
-
-  if (props.onChange) {
-    const onChange = props.onChange;
-    return (
-      <Pressable
-        testID={props.testID}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ expanded: props.expanded }}
-        onPress={() => onChange(!props.expanded)}
-        hitSlop={8}
-      >
-        {inner}
-      </Pressable>
-    );
-  }
-
-  return (
-    <Animated.View
-      testID={props.testID}
-      accessibilityRole="image"
-      accessibilityLabel={accessibilityLabel}
-    >
-      {inner}
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  disc: {
-    width: SIZE,
-    height: SIZE,
-    borderRadius: SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/use_smile_id_face_oval_image.tsx

@@ -1,90 +0,0 @@
-import Svg, {
-  ClipPath,
-  Defs,
-  Ellipse,
-  Image as SvgImage,
-} from "react-native-svg";
-import { StyleSheet, View } from "react-native";
-import { computeFaceOvalGeometry } from "./face_oval_defaults";
-
-export type UseSmileIDFaceOvalImageProps = {
-  /** Local file URI (`file:///…`) of the captured selfie. */
-  readonly uri: string;
-  /** Container size from the parent canvas's `onLayout`. */
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  readonly testID?: string;
-};
-
-/**
- * Renders the captured selfie at the canonical face-oval rect,
- * clipped to an ellipse.
- *
- * Implementation: draws an SVG `<Image>` element constrained to the
- * oval bounds and clipped through a `<ClipPath>` containing an
- * `<Ellipse>`. Going through `react-native-svg` (already a peer
- * dep) gives us a true ellipse on both iOS and Android — RN's
- * `borderRadius` can't express asymmetric corner radii, so a plain
- * `<Image>` with `borderRadius: ovalWidth/2` would render as a
- * pill on Android when the oval isn't a perfect circle (face-oval
- * default is roughly 1:1.26).
- *
- * Returns `null` until the canvas has measured (avoids a one-frame
- * flash where the SVG renders at zero-size).
- */
-export function UseSmileIDFaceOvalImage(props: UseSmileIDFaceOvalImageProps) {
-  if (props.containerWidth <= 0 || props.containerHeight <= 0) return null;
-  if (props.uri.length === 0) return null;
-
-  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(
-    props.containerWidth,
-    props.containerHeight,
-  );
-  const clipId = "si_face_oval_image_clip";
-
-  return (
-    <View
-      pointerEvents="none"
-      style={[
-        styles.container,
-        {
-          width: ovalWidth,
-          height: ovalHeight,
-          left: ovalLeft,
-          top: ovalTop,
-        },
-      ]}
-      testID={props.testID}
-    >
-      <Svg
-        width="100%"
-        height="100%"
-        viewBox={`0 0 ${ovalWidth} ${ovalHeight}`}
-      >
-        <Defs>
-          <ClipPath id={clipId}>
-            <Ellipse
-              cx={ovalWidth / 2}
-              cy={ovalHeight / 2}
-              rx={ovalWidth / 2}
-              ry={ovalHeight / 2}
-            />
-          </ClipPath>
-        </Defs>
-        <SvgImage
-          href={{ uri: props.uri }}
-          x={0}
-          y={0}
-          width={ovalWidth}
-          height={ovalHeight}
-          preserveAspectRatio="xMidYMid slice"
-          clipPath={`url(#${clipId})`}
-        />
-      </Svg>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { position: "absolute" },
-});

package/src/presentation/components/use_smile_id_face_overlay.tsx

@@ -1,387 +0,0 @@
-import { memo, useEffect, useRef } from "react";
-import { Animated, Easing, StyleSheet, View } from "react-native";
-import Svg, { ClipPath, Defs, Ellipse, Path, Rect } from "react-native-svg";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { UseSmileIDMotion } from "../theme/use_smile_id_motion";
-import {
-  isDirectional,
-  UseSmileIDOverlayState,
-  type UseSmileIDOverlayState as OverlayState,
-} from "../state/use_smile_id_overlay_state";
-import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
-import {
-  computeFaceOvalGeometry,
-  FaceOvalDefaults,
-} from "./face_oval_defaults";
-import { UseSmileIDOvalBorderPalette } from "./use_smile_id_oval_border_palette";
-
-export type UseSmileIDFaceOverlayProps = {
-  readonly state: OverlayState;
-  /** 0..1 — bottom-to-top fill progress during READY/CAPTURING. */
-  readonly progress?: number;
-  /** Container size — partner passes from `onLayout` of the camera preview. */
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  /** Keeps the rim neutral through CAPTURING/PROCESSING — ESS has no green oval treatment. */
-  readonly enableEnhancedLiveness?: boolean;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const STROKE_WIDTH = FaceOvalDefaults.strokeWidth;
-
-const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
-
-/** Oval edge a directional hint highlights. */
-type ArcEdge = "top" | "bottom" | "left" | "right";
-
-/**
- * Oval edge the arc hugs, or null when non-directional. ML-derived,
- * never layout-direction-derived (RTL-safe; the oval is never mirrored).
- */
-function arcEdgeFor(state: OverlayState): ArcEdge | null {
-  switch (state) {
-    case UseSmileIDOverlayState.MOVE_UP:
-      return "top";
-    case UseSmileIDOverlayState.MOVE_DOWN:
-      return "bottom";
-    case UseSmileIDOverlayState.MOVE_LEFT:
-      return "left";
-    case UseSmileIDOverlayState.MOVE_RIGHT:
-      return "right";
-    default:
-      return null;
-  }
-}
-
-/**
- * Face capture oval — dimmed scrim with a transparent cutout plus a
- * state-driven border. Colours resolve through
- * `UseSmileIDOvalBorderPalette`; timings come from `UseSmileIDMotion`.
- * Directional `MOVE_*` states suppress the progress ring and draw a
- * red arc on the crowded oval edge. See docs/Face-Oval-State-Flows.md.
- */
-export function UseSmileIDFaceOverlay(props: UseSmileIDFaceOverlayProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const loc = useUseSmileIDLocalizations();
-  const enableEnhancedLiveness = props.enableEnhancedLiveness ?? false;
-  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(
-    props.containerWidth,
-    props.containerHeight,
-  );
-  const borderColor =
-    theme.colors[
-      UseSmileIDOvalBorderPalette.tokenFor(props.state, enableEnhancedLiveness)
-    ];
-  const overlayColor = theme.colors.captureOverlayBackground;
-  const trackColor = theme.colors.ovalDefault;
-  const fillColor = theme.colors.ovalActive;
-  const directionalColor = theme.colors.ovalDirectionalIndicator;
-  const progress = clamp01(props.progress ?? 0);
-  const directional = isDirectional(props.state);
-
-  const ovalCx = ovalLeft + ovalWidth / 2;
-  const ovalCy = ovalTop + ovalHeight / 2;
-  const ovalRx = ovalWidth / 2;
-  const ovalRy = ovalHeight / 2;
-
-  // Animated.Value can't tween colour strings — cross-fade via opacity
-  // on each borderColor change instead.
-  const borderOpacity = useRef(new Animated.Value(1)).current;
-  useEffect(() => {
-    borderOpacity.setValue(0);
-    Animated.timing(borderOpacity, {
-      toValue: 1,
-      duration: UseSmileIDMotion.stateTransition,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true,
-    }).start();
-  }, [borderColor, borderOpacity]);
-
-  // The renderer reads this animated value, never the raw target, so
-  // per-frame native progress jumps rise smoothly.
-  const animatedProgress = useRef(new Animated.Value(progress)).current;
-  useEffect(() => {
-    Animated.timing(animatedProgress, {
-      toValue: progress,
-      duration: UseSmileIDMotion.progressFill,
-      easing: Easing.linear,
-      useNativeDriver: false,
-    }).start();
-  }, [progress, animatedProgress]);
-
-  // The arc fades rather than popping; the last edge is remembered so
-  // the fade-out stays anchored where the hint was.
-  const lastArcEdgeRef = useRef<ArcEdge | null>(arcEdgeFor(props.state));
-  const arcEdge = arcEdgeFor(props.state) ?? lastArcEdgeRef.current;
-  useEffect(() => {
-    const edge = arcEdgeFor(props.state);
-    if (edge !== null) lastArcEdgeRef.current = edge;
-  }, [props.state]);
-  const arcAlpha = useRef(new Animated.Value(directional ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.timing(arcAlpha, {
-      toValue: directional ? 1 : 0,
-      duration: UseSmileIDMotion.stateTransition,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: true,
-    }).start();
-  }, [directional, arcAlpha]);
-
-  if (props.containerWidth <= 0 || props.containerHeight <= 0) {
-    return null;
-  }
-
-  // Key the clip id by edge: react-native-svg on Android never
-  // re-resolves an existing ClipPath's contents, so reusing one id
-  // would leave the first-rendered clip band stuck on its edge.
-  const arcClipId = `si_face_overlay_arc_clip_${arcEdge ?? "none"}`;
-  const arcClipRect = arcEdge
-    ? computeArcClipRect(
-        arcEdge,
-        { ovalWidth, ovalHeight, ovalLeft, ovalTop },
-        props.containerWidth,
-        props.containerHeight,
-      )
-    : null;
-  const progressPercent = Math.round(progress * 100);
-
-  return (
-    <View
-      testID={props.testID}
-      style={StyleSheet.absoluteFill}
-      pointerEvents="none"
-    >
-      {/* Static scrim in its own <Svg> so dynamic-layer changes never
-          invalidate it. The cutout is one even-odd path rather than a
-          <Mask> — masks rasterize the full-screen layer to a bitmap on
-          the UI thread per invalidation, freezing the camera preview. */}
-      <ScrimWithOvalCutout
-        containerWidth={props.containerWidth}
-        containerHeight={props.containerHeight}
-        ovalCx={ovalCx}
-        ovalCy={ovalCy}
-        ovalRx={ovalRx}
-        ovalRy={ovalRy}
-        color={overlayColor}
-      />
-      <Svg
-        width="100%"
-        height="100%"
-        viewBox={`0 0 ${props.containerWidth} ${props.containerHeight}`}
-        preserveAspectRatio="none"
-        style={StyleSheet.absoluteFill}
-      >
-        <Defs>
-          {arcClipRect ? (
-            <ClipPath id={arcClipId}>
-              <Rect
-                x={arcClipRect.x}
-                y={arcClipRect.y}
-                width={arcClipRect.width}
-                height={arcClipRect.height}
-              />
-            </ClipPath>
-          ) : null}
-        </Defs>
-        {/* Progress ring is suppressed while a directional hint is active. */}
-        {progress > 0 && !directional ? (
-          <Ellipse
-            cx={ovalCx}
-            cy={ovalCy}
-            rx={ovalRx}
-            ry={ovalRy}
-            stroke={trackColor}
-            strokeWidth={STROKE_WIDTH}
-            fill="none"
-          />
-        ) : (
-          <AnimatedEllipse
-            cx={ovalCx}
-            cy={ovalCy}
-            rx={ovalRx}
-            ry={ovalRy}
-            stroke={borderColor}
-            strokeWidth={STROKE_WIDTH}
-            fill="none"
-            opacity={borderOpacity}
-          />
-        )}
-        {/* Red directional arc — stays mounted after the state clears so
-            the fade-out remains anchored. */}
-        {arcClipRect ? (
-          <AnimatedEllipse
-            cx={ovalCx}
-            cy={ovalCy}
-            rx={ovalRx}
-            ry={ovalRy}
-            stroke={directionalColor}
-            strokeWidth={STROKE_WIDTH}
-            fill="none"
-            clipPath={`url(#${arcClipId})`}
-            opacity={arcAlpha}
-            testID="si_face_overlay_directional_arc"
-          />
-        ) : null}
-      </Svg>
-      {/* Green fill revealed by a bottom-anchored view window — Android
-          never re-resolves animated SVG clipPath contents, so the clip
-          must happen at the View layer. */}
-      {progress > 0 && !directional ? (
-        <View style={StyleSheet.absoluteFill} pointerEvents="none">
-          <Animated.View
-            style={{
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: 0,
-              overflow: "hidden",
-              height: animatedProgress.interpolate({
-                inputRange: [0, 1],
-                outputRange: [
-                  props.containerHeight - (ovalTop + ovalHeight + STROKE_WIDTH),
-                  props.containerHeight - (ovalTop - STROKE_WIDTH),
-                ],
-              }),
-            }}
-          >
-            <Svg
-              width={props.containerWidth}
-              height={props.containerHeight}
-              viewBox={`0 0 ${props.containerWidth} ${props.containerHeight}`}
-              preserveAspectRatio="none"
-              style={[
-                styles.fillSvg,
-                {
-                  width: props.containerWidth,
-                  height: props.containerHeight,
-                },
-              ]}
-            >
-              <Ellipse
-                cx={ovalCx}
-                cy={ovalCy}
-                rx={ovalRx}
-                ry={ovalRy}
-                stroke={fillColor}
-                strokeWidth={STROKE_WIDTH}
-                fill="none"
-              />
-            </Svg>
-          </Animated.View>
-        </View>
-      ) : null}
-      {/* Accessibility-only node reporting capture progress as a labelled percent. */}
-      {progress > 0 ? (
-        <View
-          accessible
-          accessibilityLabel={loc.siAccessibilityCaptureProgress}
-          accessibilityValue={{ text: `${progressPercent}%` }}
-          style={StyleSheet.absoluteFill}
-          testID="si_face_overlay_progress_semantics"
-        />
-      ) : null}
-    </View>
-  );
-}
-
-/**
- * Dimmed scrim with a transparent elliptical cutout, drawn as one
- * even-odd path (outer rect winding + inner ellipse winding). Memoised:
- * geometry and colour only change on layout/theme changes, so per-frame
- * overlay updates never touch this native view.
- */
-const ScrimWithOvalCutout = memo(function ScrimWithOvalCutout(props: {
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  readonly ovalCx: number;
-  readonly ovalCy: number;
-  readonly ovalRx: number;
-  readonly ovalRy: number;
-  readonly color: string;
-}) {
-  const { containerWidth, containerHeight, ovalCx, ovalCy, ovalRx, ovalRy } =
-    props;
-  const path =
-    `M0 0H${containerWidth}V${containerHeight}H0Z ` +
-    `M${ovalCx - ovalRx} ${ovalCy}` +
-    `a${ovalRx} ${ovalRy} 0 1 0 ${2 * ovalRx} 0` +
-    `a${ovalRx} ${ovalRy} 0 1 0 ${-2 * ovalRx} 0Z`;
-  return (
-    <Svg
-      width="100%"
-      height="100%"
-      viewBox={`0 0 ${containerWidth} ${containerHeight}`}
-      preserveAspectRatio="none"
-      style={StyleSheet.absoluteFill}
-    >
-      <Path d={path} fill={props.color} fillRule="evenodd" />
-    </Svg>
-  );
-});
-
-/**
- * Clip band spanning `directionalArcEdgeFraction` of the oval extent
- * from the crowded edge, stroke-padded so the arc isn't shaved off.
- */
-function computeArcClipRect(
-  edge: ArcEdge,
-  oval: {
-    ovalWidth: number;
-    ovalHeight: number;
-    ovalLeft: number;
-    ovalTop: number;
-  },
-  containerWidth: number,
-  containerHeight: number,
-): { x: number; y: number; width: number; height: number } {
-  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = oval;
-  const ovalRight = ovalLeft + ovalWidth;
-  const ovalBottom = ovalTop + ovalHeight;
-  const verticalBand = ovalHeight * FaceOvalDefaults.directionalArcEdgeFraction;
-  const horizontalBand =
-    ovalWidth * FaceOvalDefaults.directionalArcEdgeFraction;
-  switch (edge) {
-    case "top":
-      return {
-        x: 0,
-        y: ovalTop - STROKE_WIDTH,
-        width: containerWidth,
-        height: verticalBand + STROKE_WIDTH,
-      };
-    case "bottom":
-      return {
-        x: 0,
-        y: ovalBottom - verticalBand,
-        width: containerWidth,
-        height: verticalBand + STROKE_WIDTH,
-      };
-    case "left":
-      return {
-        x: ovalLeft - STROKE_WIDTH,
-        y: 0,
-        width: horizontalBand + STROKE_WIDTH,
-        height: containerHeight,
-      };
-    case "right":
-      return {
-        x: ovalRight - horizontalBand,
-        y: 0,
-        width: horizontalBand + STROKE_WIDTH,
-        height: containerHeight,
-      };
-  }
-}
-
-const styles = StyleSheet.create({
-  // Bottom-anchored so the ring stays aligned as the reveal window grows.
-  fillSvg: { position: "absolute", left: 0, bottom: 0 },
-});
-
-function clamp01(value: number): number {
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
-}

package/src/presentation/components/use_smile_id_failed_content.tsx

@@ -1,94 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { UseSmileIDButton } from "./use_smile_id_button";
-import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
-
-export type UseSmileIDFailedContentProps = {
-  readonly title?: string;
-  readonly errorMessage?: string;
-  readonly retryLabel?: string;
-  readonly exitLabel?: string;
-  readonly onRetry?: () => void;
-  readonly onExit?: () => void;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Failure-state body of the processing screen's bottom card —
- * title, error message, and the Retry / Exit buttons. The warning
- * ✕ indicator is rendered separately, centered inside the face
- * oval by the screen itself, so it doesn't appear twice.
- */
-export function UseSmileIDFailedContent(props: UseSmileIDFailedContentProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const loc = useUseSmileIDLocalizations();
-  const title = props.title ?? loc.siProcessingFailedTitle;
-  const message = props.errorMessage ?? loc.siProcessingFailedMessage;
-  const retryLabel = props.retryLabel ?? loc.siProcessingRetry;
-  const exitLabel = props.exitLabel ?? loc.siProcessingExit;
-  return (
-    <View
-      testID={props.testID}
-      style={[styles.container, { paddingVertical: theme.spacing.small }]}
-    >
-      <Text
-        style={{
-          ...theme.typography.cardTitle,
-          color: theme.colors.primary,
-          textAlign: "center",
-        }}
-      >
-        {title}
-      </Text>
-      <Text
-        style={{
-          ...theme.typography.body,
-          color: theme.colors.cardText,
-          marginTop: theme.spacing.small,
-          textAlign: "center",
-        }}
-      >
-        {message}
-      </Text>
-      <View
-        style={[
-          styles.buttons,
-          { marginTop: theme.spacing.large, gap: theme.spacing.small },
-        ]}
-      >
-        {props.onRetry ? (
-          <UseSmileIDButton
-            label={retryLabel}
-            onClick={props.onRetry}
-            variant="primary"
-            theme={theme}
-            testID="si_processing_retry_button"
-          />
-        ) : null}
-        {props.onExit ? (
-          <UseSmileIDButton
-            label={exitLabel}
-            onClick={props.onExit}
-            variant="secondary"
-            theme={theme}
-            testID="si_processing_exit_button"
-          />
-        ) : null}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  // Without `alignSelf: "stretch"` the centering card hugs the text
-  // and the buttons collapse to their label widths.
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "stretch",
-  },
-  buttons: { alignSelf: "stretch" },
-});