@smileid/usesmileid 12.0.2 → 12.1.0

package/src/presentation/components/use_smile_id_captured_image_oval.tsx

@@ -1,151 +0,0 @@
-import { useId, useState, type ReactNode } from "react";
-import { StyleSheet, View, type LayoutChangeEvent } from "react-native";
-import Svg, {
-  ClipPath,
-  Defs,
-  Ellipse,
-  Image as SvgImage,
-} from "react-native-svg";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { computeScaledOvalGeometry } from "./helpers/scaled_oval_geometry";
-
-export type UseSmileIDCapturedImageOvalProps = {
-  /**
-   * Full screen width. The oval proportions are sized against the
-   * screen (not this region) so they match the live capture screen.
-   */
-  readonly screenWidth: number;
-  /** Full screen height. */
-  readonly screenHeight: number;
-  /** Local file URI (`file:///…`) of the captured selfie. */
-  readonly uri?: string;
-  /** Marks the rendered image element for tests. */
-  readonly imageTestID?: string;
-  /**
-   * Accessible name for the captured image. When set, the image is
-   * exposed to screen readers under this label; otherwise it stays
-   * decorative (the surrounding card text carries the meaning).
-   */
-  readonly imageAccessibilityLabel?: string;
-  /**
-   * Content centered on the oval rect — e.g. the processing-screen
-   * status badge. Positioned once the region has measured.
-   */
-  readonly overlayChild?: ReactNode;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Layout region that holds the captured selfie clipped to the face
- * oval. The region fills the leftover vertical space above the bottom
- * card (`flex: 1`) and measures its own height; the oval is then
- * scaled to fit so the card below it is never overlapped.
- *
- * The image is drawn through `react-native-svg` (`<Image>` constrained
- * to the oval bounds, clipped by an `<Ellipse>`) — RN's `borderRadius`
- * can't express the ~1:1.26 ellipse on Android. Outside the oval is
- * the uniform page background; no scrim is painted.
- */
-export function UseSmileIDCapturedImageOval(
-  props: UseSmileIDCapturedImageOvalProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const [regionHeight, setRegionHeight] = useState(0);
-  // Unique per instance so the SVG clip-path id never collides when two
-  // ovals are mounted at once (e.g. preview + processing during a
-  // navigation transition, or on React Native Web where SVG ids are
-  // document-global). `useId()` contains ':' which isn't valid in an id,
-  // so strip it.
-  const clipId = `si_oval_clip_${useId().replace(/:/g, "")}`;
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    // Re-measure on rotation / split-screen so the oval scale tracks
-    // the new region height rather than freezing on first layout.
-    setRegionHeight(event.nativeEvent.layout.height);
-  };
-
-  const ready =
-    props.screenWidth > 0 && props.screenHeight > 0 && regionHeight > 0;
-  const geometry = ready
-    ? computeScaledOvalGeometry(
-        props.screenWidth,
-        props.screenHeight,
-        regionHeight,
-        theme.spacing.medium,
-      )
-    : null;
-  const visible = geometry !== null && geometry.scale > 0;
-  const ovalRect = geometry
-    ? {
-        width: geometry.ovalWidth,
-        height: geometry.ovalHeight,
-        left: geometry.ovalLeft,
-        top: geometry.ovalTop,
-      }
-    : { width: 0, height: 0, left: 0, top: 0 };
-
-  return (
-    <View style={styles.region} onLayout={onLayout} testID={props.testID}>
-      {props.uri ? (
-        <View
-          pointerEvents="none"
-          style={[styles.oval, ovalRect]}
-          testID={props.imageTestID}
-          {...(props.imageAccessibilityLabel
-            ? {
-                accessible: true,
-                accessibilityRole: "image" as const,
-                accessibilityLabel: props.imageAccessibilityLabel,
-              }
-            : {})}
-        >
-          {visible && geometry ? (
-            <Svg
-              width="100%"
-              height="100%"
-              viewBox={`0 0 ${geometry.ovalWidth} ${geometry.ovalHeight}`}
-            >
-              <Defs>
-                <ClipPath id={clipId}>
-                  <Ellipse
-                    cx={geometry.ovalWidth / 2}
-                    cy={geometry.ovalHeight / 2}
-                    rx={geometry.ovalWidth / 2}
-                    ry={geometry.ovalHeight / 2}
-                  />
-                </ClipPath>
-              </Defs>
-              <SvgImage
-                href={{ uri: props.uri }}
-                x={0}
-                y={0}
-                width={geometry.ovalWidth}
-                height={geometry.ovalHeight}
-                preserveAspectRatio="xMidYMid slice"
-                clipPath={`url(#${clipId})`}
-              />
-            </Svg>
-          ) : null}
-        </View>
-      ) : null}
-      {props.overlayChild && visible ? (
-        <View pointerEvents="box-none" style={[styles.overlay, ovalRect]}>
-          {props.overlayChild}
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  region: { flex: 1 },
-  oval: { position: "absolute" },
-  overlay: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/use_smile_id_card_surface.tsx

@@ -1,54 +0,0 @@
-import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import type { ReactNode } from "react";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-
-export type UseSmileIDCardSurfaceProps = {
-  readonly children: ReactNode;
-  readonly style?: StyleProp<ViewStyle>;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const SIDE_MARGIN = 24;
-// Soft upward shadow — the card lifts off the page toward the oval
-// above it. A negative Y offset is required; Android `elevation` can
-// only cast downward, so the `boxShadow` style prop is used instead.
-// `boxShadow` renders on iOS + Android under the New Architecture
-// (RN 0.81+, enabled here); on the legacy renderer it degrades to no
-// shadow rather than an incorrect downward one.
-const UPWARD_SHADOW = "0px -12px 24px rgba(0,0,0,0.06)";
-
-/**
- * White rounded card pinned at the bottom of the capture review
- * surfaces (preview + processing). Carries the soft upward shadow and
- * 24dp side margins. Intentionally has no `overflow: "hidden"` so the
- * confirmation tiles and buttons inside keep their own press feedback.
- */
-export function UseSmileIDCardSurface(props: UseSmileIDCardSurfaceProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  return (
-    <View
-      testID={props.testID}
-      style={[
-        styles.card,
-        {
-          backgroundColor: theme.colors.cardBackground,
-          borderRadius: theme.shapes.cardRadius,
-          padding: theme.spacing.large,
-        },
-        props.style,
-      ]}
-    >
-      {props.children}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    marginHorizontal: SIDE_MARGIN,
-    boxShadow: UPWARD_SHADOW,
-  },
-});

package/src/presentation/components/use_smile_id_confirmation_buttons.tsx

@@ -1,123 +0,0 @@
-import type { ReactNode } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import type { UseSmileIDTheme, UseSmileIDTypography } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { SiOutlineCheck, SiRetake } from "./icons";
-
-export type UseSmileIDConfirmationButtonsProps = {
-  readonly onAccept: () => void;
-  readonly onReject: () => void;
-  /** Visible + accessible labels (default "Retake" / "Confirm"). */
-  readonly acceptLabel?: string;
-  readonly rejectLabel?: string;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const TILE = 70;
-const TILE_RADIUS = 24;
-const RETAKE_ICON = 28;
-const CONFIRM_ICON = 36;
-const ICON_LABEL_GAP = 6;
-const TILE_GAP = 40;
-
-/**
- * Retake / Confirm pair below the preview card: two 70dp rounded tiles
- * (icon centered) each above a caption. Retake uses the slate reject palette,
- * Confirm the green accept palette. The tile's accessible name is the visible
- * label; the caption is decorative.
- */
-export function UseSmileIDConfirmationButtons(
-  props: UseSmileIDConfirmationButtonsProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  return (
-    <View testID={props.testID} style={styles.row}>
-      <ConfirmationButton
-        onPress={props.onReject}
-        label={props.rejectLabel ?? "Retake"}
-        testID="si_preview_reject_button"
-        background={theme.colors.previewRejectBackground}
-        border={theme.colors.previewRejectBorder}
-        contentColor={theme.colors.previewRejectIcon}
-        caption={theme.typography.buttonCaption}
-        icon={
-          <SiRetake size={RETAKE_ICON} color={theme.colors.previewRejectIcon} />
-        }
-      />
-      <ConfirmationButton
-        onPress={props.onAccept}
-        label={props.acceptLabel ?? "Confirm"}
-        testID="si_preview_accept_button"
-        background={theme.colors.previewAcceptBackground}
-        border={theme.colors.previewAcceptBorder}
-        contentColor={theme.colors.previewAcceptIcon}
-        caption={theme.typography.buttonCaption}
-        icon={
-          <SiOutlineCheck
-            size={CONFIRM_ICON}
-            color={theme.colors.previewAcceptIcon}
-          />
-        }
-      />
-    </View>
-  );
-}
-
-function ConfirmationButton(props: {
-  readonly onPress: () => void;
-  readonly label: string;
-  readonly testID: string;
-  readonly background: string;
-  readonly border: string;
-  readonly contentColor: string;
-  readonly caption: UseSmileIDTypography["buttonCaption"];
-  readonly icon: ReactNode;
-}) {
-  return (
-    <View style={styles.item}>
-      <Pressable
-        onPress={props.onPress}
-        accessibilityRole="button"
-        accessibilityLabel={props.label}
-        testID={props.testID}
-        style={({ pressed }) => [
-          styles.tile,
-          {
-            backgroundColor: props.background,
-            borderColor: props.border,
-            opacity: pressed ? 0.85 : 1,
-          },
-        ]}
-      >
-        {props.icon}
-      </Pressable>
-      {/* Caption is decorative — the tile already carries the accessible name. */}
-      <Text
-        importantForAccessibility="no"
-        accessibilityElementsHidden
-        style={{
-          ...props.caption,
-          color: props.contentColor,
-          marginTop: ICON_LABEL_GAP,
-        }}
-      >
-        {props.label}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: { flexDirection: "row", justifyContent: "center", columnGap: TILE_GAP },
-  item: { alignItems: "center" },
-  tile: {
-    width: TILE,
-    height: TILE,
-    borderRadius: TILE_RADIUS,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/use_smile_id_consent_row.tsx

@@ -1,58 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import type { ReactNode } from "react";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-
-export type UseSmileIDConsentRowProps = {
-  readonly label: string;
-  /** Optional leading icon — partner can pass any React node. */
-  readonly icon?: ReactNode;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Single consent line — icon + descriptor text. Listed under
- * "This may include processing:" on the consent screen.
- *
- * Layout uses `marginStart` so the icon-to-text gap mirrors in RTL
- * locales without conditional logic at the call site.
- */
-export function UseSmileIDConsentRow(props: UseSmileIDConsentRowProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  return (
-    <View
-      testID={props.testID}
-      style={[styles.row, { paddingVertical: theme.spacing.small }]}
-    >
-      {props.icon ? (
-        <View style={[styles.iconSlot, { marginEnd: theme.spacing.small }]}>
-          {props.icon}
-        </View>
-      ) : null}
-      <Text
-        style={{
-          ...theme.typography.body,
-          color: theme.colors.titleText,
-          flex: 1,
-        }}
-      >
-        {props.label}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  iconSlot: {
-    width: 24,
-    height: 24,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/use_smile_id_content_card.tsx

@@ -1,65 +0,0 @@
-import {
-  Platform,
-  StyleSheet,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import type { ReactNode } from "react";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-
-export type UseSmileIDContentCardProps = {
-  readonly children: ReactNode;
-  /** When true, the card surface uses the instruction-card tint (warm beige in light mode). */
-  readonly variant?: "card" | "instruction";
-  readonly style?: StyleProp<ViewStyle>;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Generic card container — rounded background + soft shadow. Used by
- * instruction cards, the bottom card on preview / processing screens,
- * etc.
- *
- * Shadow is platform-conditional (`elevation` on Android,
- * `shadowOffset/Opacity/Radius` on iOS) — RN doesn't unify these and
- * blindly setting both makes Android render a double shadow.
- */
-export function UseSmileIDContentCard(props: UseSmileIDContentCardProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const variant = props.variant ?? "card";
-  return (
-    <View
-      style={[
-        styles.shadow,
-        {
-          padding: theme.spacing.medium,
-          borderRadius: theme.shapes.cardRadius,
-          backgroundColor:
-            variant === "instruction"
-              ? theme.colors.instructionCardBackground
-              : theme.colors.cardBackground,
-        },
-        props.style,
-      ]}
-    >
-      {props.children}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  shadow:
-    Platform.select({
-      ios: {
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.08,
-        shadowRadius: 4,
-      },
-      android: { elevation: 2 },
-      default: {},
-    }) ?? {},
-});

package/src/presentation/components/use_smile_id_document_capture_controls.tsx

@@ -1,219 +0,0 @@
-import { Pressable, StyleSheet, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { defaultLightTheme } from "../theme/theme";
-import { SiGallery, SiOutlineClose } from "./icons";
-
-export type UseSmileIDDocumentCaptureControlsProps = {
-  /** Manual shutter — taps capture a still through the document pipeline. */
-  readonly showManualShutter: boolean;
-  /** Gallery upload — taps open the photo library to import a document. */
-  readonly showGallery: boolean;
-  /**
-   * Landscape → trailing-edge lane (✕ top, controls centred); portrait →
-   * centred bottom row (✕ in the top chrome). From the measured canvas aspect.
-   */
-  readonly isLandscape: boolean;
-  /** Disables presses (e.g. a delivery is already in flight). */
-  readonly enabled: boolean;
-  /**
-   * Close/cancel the whole flow. Rendered at the top of the landscape lane so it
-   * shares the shutter's centre-x; in portrait the top chrome renders it instead.
-   */
-  readonly onClose?: (() => void) | undefined;
-  readonly onManualShutter: () => void;
-  readonly onGallery: () => void;
-  /** Localized screen-reader label for the shutter (`si_cd_document_capture_shutter`). */
-  readonly shutterAccessibilityLabel: string;
-  /** Localized screen-reader label for the gallery button (`si_cd_document_gallery`). */
-  readonly galleryAccessibilityLabel: string;
-  /** Localized screen-reader label for the close button (`si_cd_close`). */
-  readonly closeAccessibilityLabel: string;
-};
-
-const SHUTTER_SIZE = 64;
-const SHUTTER_INNER_SIZE = 46;
-const GALLERY_SIZE = 56;
-const CONTROL_GAP = 24;
-const CLOSE_SIZE = 40;
-/** Trailing-edge inset for the landscape lane (spacing.large). */
-const LANE_EDGE = 24;
-/** Bottom inset for the portrait control row above the safe area (spacing.large). */
-const PORTRAIT_ROW_BOTTOM = 24;
-/** Top/bottom inset bounding the ✕ and the centred controls inside the lane. */
-const LANE_VERTICAL_PADDING = 16;
-
-/**
- * Document capture controls — manual shutter + gallery upload, plus the close ✕
- * in landscape (laid out as a trailing-edge lane; portrait is a centred bottom
- * row with the ✕ in the top chrome).
- */
-export function UseSmileIDDocumentCaptureControls(
-  props: UseSmileIDDocumentCaptureControlsProps,
-) {
-  // Light-palette forced: overlay is locked to light mode so brand-blue reads over the dim feed.
-  const theme = defaultLightTheme;
-
-  const controlsVisible = props.showManualShutter || props.showGallery;
-  // The lane keeps the ✕ even when shutter/gallery hide (during capture); portrait
-  // renders nothing here once the controls are hidden.
-  const showCloseInLane = props.isLandscape && props.onClose !== undefined;
-  if (!controlsVisible && !showCloseInLane) {
-    return null;
-  }
-
-  const closeButton = props.onClose ? (
-    <Pressable
-      onPress={props.onClose}
-      accessibilityRole="button"
-      accessibilityLabel={props.closeAccessibilityLabel}
-      testID="si_document_close_button"
-      style={({ pressed }) => [
-        styles.closeButton,
-        {
-          backgroundColor: theme.colors.offBlack,
-          borderColor: theme.colors.backButtonBorder,
-          opacity: pressed ? 0.7 : 1,
-        },
-      ]}
-    >
-      <SiOutlineClose size={20} color={theme.colors.offWhite} />
-    </Pressable>
-  ) : null;
-
-  const shutter = props.showManualShutter ? (
-    <Pressable
-      onPress={props.onManualShutter}
-      disabled={!props.enabled}
-      accessibilityRole="button"
-      accessibilityLabel={props.shutterAccessibilityLabel}
-      accessibilityState={{ disabled: !props.enabled }}
-      testID="si_document_manual_shutter"
-      style={({ pressed }) => [
-        styles.shutterOuter,
-        { opacity: pressed || !props.enabled ? 0.6 : 1 },
-      ]}
-    >
-      <View style={styles.shutterInner} />
-    </Pressable>
-  ) : null;
-
-  const gallery = props.showGallery ? (
-    <Pressable
-      onPress={props.onGallery}
-      disabled={!props.enabled}
-      accessibilityRole="button"
-      accessibilityLabel={props.galleryAccessibilityLabel}
-      accessibilityState={{ disabled: !props.enabled }}
-      testID="si_document_gallery_upload"
-      style={({ pressed }) => [
-        styles.galleryButton,
-        {
-          backgroundColor: theme.colors.primary,
-          opacity: pressed || !props.enabled ? 0.6 : 1,
-        },
-      ]}
-    >
-      <SiGallery size={24} color={theme.colors.primaryForeground} />
-    </Pressable>
-  ) : null;
-
-  if (props.isLandscape) {
-    // Trailing-edge lane: ✕ at the top, shutter/gallery vertically centred
-    // between two flex spacers so the controls hold the lane's vertical centre.
-    return (
-      <SafeAreaView
-        edges={["top", "right", "bottom", "left"]}
-        style={styles.landscapeLane}
-        pointerEvents="box-none"
-        testID="si_document_capture_controls"
-      >
-        {/* Fixed-width slot keeps the ✕ on the shutter's centre-x even when the
-            shutter/gallery hide during capture (matches the native lane width). */}
-        <View style={styles.laneSlot}>{closeButton}</View>
-        <View style={styles.laneSpacer} />
-        {controlsVisible ? (
-          <View style={styles.landscapeControls}>
-            {shutter}
-            {gallery}
-          </View>
-        ) : null}
-        <View style={styles.laneSpacer} />
-      </SafeAreaView>
-    );
-  }
-
-  // Portrait: centred bottom row (gallery left of shutter).
-  return (
-    <SafeAreaView
-      edges={["top", "right", "bottom", "left"]}
-      style={styles.portraitRow}
-      pointerEvents="box-none"
-      testID="si_document_capture_controls"
-    >
-      {gallery}
-      {shutter}
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  // No fixed width: the lane sizes to its (≤ SHUTTER_SIZE-wide) content so the
-  // additive horizontal safe-area inset SHIFTS it inward instead of squeezing the
-  // controls (RN is border-box; padding inside a fixed width would clip them).
-  landscapeLane: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    end: LANE_EDGE,
-    flexDirection: "column",
-    alignItems: "center",
-    paddingVertical: LANE_VERTICAL_PADDING,
-  },
-  laneSpacer: { flex: 1 },
-  laneSlot: { width: SHUTTER_SIZE, alignItems: "center" },
-  landscapeControls: {
-    flexDirection: "column",
-    alignItems: "center",
-    gap: CONTROL_GAP,
-  },
-  portraitRow: {
-    position: "absolute",
-    start: 0,
-    end: 0,
-    bottom: PORTRAIT_ROW_BOTTOM,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: CONTROL_GAP * 1.6,
-  },
-  closeButton: {
-    width: CLOSE_SIZE,
-    height: CLOSE_SIZE,
-    borderRadius: CLOSE_SIZE / 2,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  shutterOuter: {
-    width: SHUTTER_SIZE,
-    height: SHUTTER_SIZE,
-    borderRadius: SHUTTER_SIZE / 2,
-    borderWidth: 4,
-    borderColor: "#FFFFFF",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  shutterInner: {
-    width: SHUTTER_INNER_SIZE,
-    height: SHUTTER_INNER_SIZE,
-    borderRadius: SHUTTER_INNER_SIZE / 2,
-    backgroundColor: "#FFFFFF",
-  },
-  galleryButton: {
-    width: GALLERY_SIZE,
-    height: GALLERY_SIZE,
-    borderRadius: GALLERY_SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});