@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/authoring/capturePickerScreenshot.ts

@@ -0,0 +1,90 @@
+import { Dimensions } from 'react-native';
+
+import type { ElementPickerScreenshot } from './elementPickerController';
+import type { HitRect } from './hitTest';
+
+const MAX_CAPTURE_WIDTH = 480;
+
+const MISSING_VIEW_SHOT_WARNING =
+  '[Userflow] Required peer react-native-view-shot is not installed; ' +
+  'skipping picker screenshot. Install react-native-view-shot (>=5.0.0) and rebuild native.';
+
+interface ViewShotModule {
+  captureScreen: (options: {
+    format?: 'jpg' | 'png';
+    quality?: number;
+    result?: 'tmpfile' | 'base64' | 'data-uri';
+    width?: number;
+    height?: number;
+  }) => Promise<string>;
+}
+
+let didWarnMissingViewShot = false;
+
+function warnMissingViewShot(): void {
+  if (didWarnMissingViewShot) return;
+  didWarnMissingViewShot = true;
+  if (__DEV__) {
+    // eslint-disable-next-line no-console -- intentional missing-required-peer diagnostic
+    console.warn(MISSING_VIEW_SHOT_WARNING);
+  }
+}
+
+function loadViewShot(): ViewShotModule | null {
+  try {
+    // Required peer; degrade if unlinked or the JS package is missing.
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
+    return require('react-native-view-shot') as ViewShotModule;
+  } catch {
+    warnMissingViewShot();
+    return null;
+  }
+}
+
+/**
+ * Capture a downscaled JPEG of the current screen and map `rect` (window DIP)
+ * onto the captured pixel grid. Returns null when the native module is missing
+ * or capture fails.
+ */
+export async function capturePickerScreenshot(
+  rect: HitRect,
+): Promise<ElementPickerScreenshot | null> {
+  const viewShot = loadViewShot();
+  if (!viewShot?.captureScreen) return null;
+
+  try {
+    const window = Dimensions.get('window');
+    const winW = window.width || 1;
+    const winH = window.height || 1;
+    const captureWidth = Math.min(Math.round(winW), MAX_CAPTURE_WIDTH);
+    const captureHeight = Math.max(1, Math.round(winH * (captureWidth / winW)));
+
+    const dataUrl = await viewShot.captureScreen({
+      format: 'jpg',
+      quality: 0.55,
+      result: 'data-uri',
+      width: captureWidth,
+      height: captureHeight,
+    });
+    if (typeof dataUrl !== 'string' || dataUrl.length === 0) return null;
+
+    const sx = captureWidth / winW;
+    const sy = captureHeight / winH;
+    return {
+      dataUrl,
+      width: captureWidth,
+      height: captureHeight,
+      targetX1: Math.round(rect.x * sx),
+      targetY1: Math.round(rect.y * sy),
+      targetX2: Math.round((rect.x + rect.width) * sx),
+      targetY2: Math.round((rect.y + rect.height) * sy),
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** @internal */
+export function resetViewShotWarningForTests(): void {
+  didWarnMissingViewShot = false;
+}

package/src/authoring/chrome/ChromeBarTransition.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { Animated, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+
+/** Bars enter with web's `250ms` feel and leave a touch faster. */
+export const CHROME_BAR_ENTER_MS = 220;
+export const CHROME_BAR_EXIT_MS = 160;
+
+export type ChromeBarEdge = 'top' | 'bottom';
+
+export interface ChromeBarTransitionProps {
+  /** Drives the animation: true slides/fades in, false slides/fades out. */
+  visible: boolean;
+  /** Which screen edge the bar docks to — it translates off that edge. */
+  edge: ChromeBarEdge;
+  style?: StyleProp<ViewStyle>;
+  pointerEvents?: ViewProps['pointerEvents'];
+  children: React.ReactNode;
+  testID?: string;
+}
+
+/**
+ * Slides + fades an authoring chrome bar on and off screen. The bar translates
+ * by its own measured height toward {@link ChromeBarTransitionProps.edge}, so it
+ * leaves fully off-screen instead of shrinking in place.
+ *
+ * This only drives the animation; the parent keeps the bar mounted across the
+ * exit with {@link useChromeBarMounted} and drops it once the exit has run.
+ */
+export function ChromeBarTransition({
+  visible,
+  edge,
+  style,
+  pointerEvents,
+  children,
+  testID,
+}: ChromeBarTransitionProps): React.ReactElement {
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const [height, setHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    // Pin the start point: a native-driven ramp is computed from the JS value,
+    // which the previous native animation left behind.
+    progress.setValue(visible ? 0 : 1);
+    const animation = Animated.timing(progress, {
+      toValue: visible ? 1 : 0,
+      duration: visible ? CHROME_BAR_ENTER_MS : CHROME_BAR_EXIT_MS,
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [progress, visible]);
+
+  const onLayout = React.useCallback((event: { nativeEvent: { layout: { height: number } } }) => {
+    const next = event.nativeEvent.layout.height;
+    setHeight((prev) => (Math.abs(prev - next) < 0.5 ? prev : next));
+  }, []);
+
+  // Until the bar is measured, fade only — the slide engages on the next frame
+  // once the height is known, while opacity is still near zero.
+  const transform =
+    height > 0
+      ? [
+          {
+            translateY: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [edge === 'top' ? -height : height, 0],
+            }),
+          },
+        ]
+      : undefined;
+
+  return (
+    <Animated.View
+      testID={testID}
+      pointerEvents={visible ? pointerEvents : 'none'}
+      onLayout={onLayout}
+      style={[style, transform ? { opacity: progress, transform } : { opacity: progress }]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+/**
+ * Keeps a bar mounted while `visible` and for {@link CHROME_BAR_EXIT_MS} after
+ * it flips false, so {@link ChromeBarTransition} can run its exit before the
+ * parent drops it.
+ */
+export function useChromeBarMounted(visible: boolean): boolean {
+  const [mounted, setMounted] = React.useState(visible);
+
+  React.useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setMounted(false), CHROME_BAR_EXIT_MS);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [visible]);
+
+  return mounted;
+}

package/src/authoring/chrome/ChromeBottomSheet.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
+
+import { useUserflowSafeAreaInsets } from '../../surfaces/safeArea';
+
+import { ChromeIcon, type ChromeIconName } from './ChromeIcon';
+import { chromeColors, chromeShadows, chromeSpace, chromeText } from './tokens';
+
+export interface ChromeBottomSheetIcon {
+  name: ChromeIconName;
+  tintColor: string;
+}
+
+export interface ChromeBottomSheetProps {
+  children: React.ReactNode;
+  helperText?: string | undefined;
+  /** Shown beside the helper. Top-aligned so a two-line warning stays even. */
+  helperIcon?: ChromeBottomSheetIcon;
+  tone?: 'default' | 'error';
+  onMeasureHeight?: (height: number) => void;
+  testID?: string;
+}
+
+/**
+ * Full-bleed authoring bottom bar. Content is top-aligned.
+ *
+ * On the Pro Max reference the actions end 48pt above the screen edge: 14pt
+ * above the 34pt home indicator. Without a bottom inset (iPhone 8, Android
+ * button nav) the bar falls back to its 24pt top padding so it stays balanced.
+ */
+export function ChromeBottomSheet({
+  children,
+  helperText,
+  helperIcon,
+  tone = 'default',
+  onMeasureHeight,
+  testID = 'userflow-chrome-bottom-sheet',
+}: ChromeBottomSheetProps): React.ReactElement {
+  const insets = useUserflowSafeAreaInsets();
+
+  const onLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      onMeasureHeight?.(event.nativeEvent.layout.height);
+    },
+    [onMeasureHeight],
+  );
+
+  return (
+    <View
+      testID={testID}
+      onLayout={onLayout}
+      style={[
+        styles.bar,
+        chromeShadows.card,
+        {
+          backgroundColor: tone === 'error' ? chromeColors.danger : chromeColors.primaryText,
+          paddingBottom: Math.max(chromeSpace[24], insets.bottom + GAP_ABOVE_HOME_INDICATOR),
+        },
+      ]}
+    >
+      {helperText ? (
+        <View style={styles.helperRow}>
+          {helperIcon ? (
+            <ChromeIcon
+              name={helperIcon.name}
+              size={16}
+              testID="userflow-chrome-bottom-sheet-icon"
+              tintColor={helperIcon.tintColor}
+            />
+          ) : null}
+          <Text
+            style={[chromeText.labelSmBold, styles.helper, { color: chromeColors.invertedText }]}
+          >
+            {helperText}
+          </Text>
+        </View>
+      ) : null}
+      <View style={styles.row}>{children}</View>
+    </View>
+  );
+}
+
+const GAP_ABOVE_HOME_INDICATOR = 14;
+
+const styles = StyleSheet.create({
+  bar: {
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    gap: chromeSpace[16],
+  },
+  helperRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    gap: chromeSpace[8],
+  },
+  helper: {
+    flex: 1,
+    flexShrink: 1,
+    textAlign: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+  },
+});

package/src/authoring/chrome/ChromeButton.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { ChromeIcon, type ChromeIconName } from './ChromeIcon';
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from './tokens';
+
+export type ChromeButtonVariant = 'primary' | 'secondary' | 'icon';
+
+export interface ChromeButtonProps {
+  variant?: ChromeButtonVariant;
+  label?: string;
+  icon?: ChromeIconName;
+  onPress: () => void;
+  disabled?: boolean;
+  accessibilityLabel: string;
+  testID?: string;
+  /** Stretch to fill a dialog footer row. */
+  flex?: boolean;
+}
+
+/**
+ * Pill button. `primary` / `secondary` take an optional leading icon;
+ * `icon` is the 40×40 circular control used in the preview top bar.
+ */
+export function ChromeButton({
+  variant = 'primary',
+  label,
+  icon,
+  onPress,
+  disabled = false,
+  accessibilityLabel,
+  testID,
+  flex = false,
+}: ChromeButtonProps): React.ReactElement {
+  const iconOnly = variant === 'icon';
+  const primary = variant === 'primary';
+  const disabledPrimary = disabled && primary;
+  const tint = primary ? chromeColors.invertedText : chromeColors.blue500;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+      style={({ pressed }) => [
+        iconOnly ? styles.icon : styles.pill,
+        disabledPrimary ? styles.disabled : primary ? styles.primary : styles.secondary,
+        disabledPrimary ? null : primary ? chromeShadows.button : chromeShadows.buttonSubtle,
+        flex ? styles.flex : null,
+        { opacity: disabledPrimary ? 1 : disabled ? 0.5 : pressed ? 0.75 : 1 },
+      ]}
+    >
+      {icon ? (
+        <View style={styles.iconWrap} pointerEvents="none">
+          <ChromeIcon name={icon} tintColor={tint} size={16} />
+        </View>
+      ) : null}
+      {label && !iconOnly ? (
+        <Text numberOfLines={1} style={[chromeText.buttonLabel, styles.label, { color: tint }]}>
+          {label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pill: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+    paddingHorizontal: chromeSpace[24],
+    paddingVertical: chromeSpace[12],
+    borderRadius: chromeRadius.fullyRounded,
+  },
+  label: {
+    flexShrink: 1,
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: chromeRadius.fullyRounded,
+  },
+  primary: {
+    backgroundColor: chromeColors.blue500,
+  },
+  disabled: {
+    backgroundColor: chromeColors.disabledFill,
+  },
+  secondary: {
+    backgroundColor: chromeColors.white,
+    borderWidth: 1,
+    borderColor: chromeColors.blue500,
+  },
+  flex: {
+    flex: 1,
+  },
+  iconWrap: {
+    width: 16,
+    height: 16,
+  },
+});

package/src/authoring/chrome/ChromeDialog.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { ABSOLUTE_FILL } from '../../surfaces/absoluteFill';
+
+import { ChromeIcon } from './ChromeIcon';
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from './tokens';
+
+export interface ChromeDialogProps {
+  title: string;
+  body: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  testID?: string;
+}
+
+/**
+ * Centered authoring dialog with scrim, header, body, footer slot, and close.
+ * Footer `children` are typically a pair of `ChromeButton`s with `flex`.
+ */
+export function ChromeDialog({
+  title,
+  body,
+  onClose,
+  children,
+  testID = 'userflow-chrome-dialog',
+}: ChromeDialogProps): React.ReactElement {
+  return (
+    <View accessibilityViewIsModal pointerEvents="auto" style={styles.root} testID={testID}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Dismiss"
+        onPress={onClose}
+        style={styles.scrim}
+        testID="userflow-chrome-dialog-scrim"
+      />
+      {/* Padding lives here, not on `root`, so the scrim stays full-bleed. */}
+      <View
+        pointerEvents="box-none"
+        style={styles.cardSlot}
+        testID="userflow-chrome-dialog-card-slot"
+      >
+        <View style={[styles.card, chromeShadows.dialog]}>
+          <View style={styles.header}>
+            <Text style={[chromeText.dialogTitle, { color: chromeColors.primaryText }]}>
+              {title}
+            </Text>
+          </View>
+          <View style={styles.body}>
+            <Text style={[chromeText.dialogBody, { color: chromeColors.primaryText }]}>{body}</Text>
+          </View>
+          <View style={styles.footer}>{children}</View>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            hitSlop={8}
+            onPress={onClose}
+            style={styles.close}
+            testID="userflow-chrome-dialog-close"
+          >
+            <ChromeIcon name="xmark" size={14} tintColor={chromeColors.primaryText} />
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    ...ABSOLUTE_FILL,
+    alignItems: 'center',
+    // Vertically centered — Figma's y:444 on the Pro Max frame is a snap to the
+    // example element, not a placement spec.
+    justifyContent: 'center',
+  },
+  scrim: {
+    ...ABSOLUTE_FILL,
+    backgroundColor: chromeColors.overlay,
+  },
+  cardSlot: {
+    alignSelf: 'stretch',
+    paddingHorizontal: chromeSpace[24],
+  },
+  card: {
+    width: '100%',
+    maxWidth: 382,
+    alignSelf: 'center',
+    backgroundColor: chromeColors.bgMiddle,
+    borderRadius: chromeRadius.lg,
+  },
+  header: {
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[16],
+    paddingRight: chromeSpace[24] + 16,
+  },
+  body: {
+    paddingHorizontal: chromeSpace[24],
+    paddingVertical: chromeSpace[8],
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: chromeSpace[8],
+    paddingTop: chromeSpace[16],
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[24],
+  },
+  close: {
+    position: 'absolute',
+    top: chromeSpace[8],
+    right: chromeSpace[8],
+    width: 32,
+    height: 32,
+    borderRadius: chromeRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/authoring/chrome/ChromeIcon.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Image, type ImageStyle, type StyleProp } from 'react-native';
+
+import arrowLeftFromBracket from './icons/arrow-left-from-bracket.png';
+import arrowRotateLeft from './icons/arrow-rotate-left.png';
+import circleExclamation from './icons/circle-exclamation.png';
+import triangleExclamation from './icons/triangle-exclamation.png';
+import xmark from './icons/xmark.png';
+
+export type ChromeIconName =
+  | 'arrow-left-from-bracket'
+  | 'arrow-rotate-left'
+  | 'circle-exclamation'
+  | 'triangle-exclamation'
+  | 'xmark';
+
+const SOURCES: Record<ChromeIconName, number> = {
+  'arrow-left-from-bracket': arrowLeftFromBracket,
+  'arrow-rotate-left': arrowRotateLeft,
+  'circle-exclamation': circleExclamation,
+  'triangle-exclamation': triangleExclamation,
+  xmark,
+};
+
+export interface ChromeIconProps {
+  name: ChromeIconName;
+  tintColor: string;
+  size?: number;
+  style?: StyleProp<ImageStyle>;
+  testID?: string;
+}
+
+/** Monochrome PNG glyph tinted via `tintColor` (white source assets). */
+export function ChromeIcon({
+  name,
+  tintColor,
+  size = 16,
+  style,
+  testID,
+}: ChromeIconProps): React.ReactElement {
+  return (
+    <Image
+      accessibilityIgnoresInvertColors
+      source={SOURCES[name]}
+      style={[{ width: size, height: size, tintColor }, style]}
+      testID={testID}
+    />
+  );
+}

package/src/authoring/chrome/ChromeTooltip.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { TooltipNotch, tooltipNotchDiamondSide } from '../../surfaces/tooltip/TooltipNotch';
+
+import { chromeColors, chromeRadius, chromeShadows, chromeSpace, chromeText } from './tokens';
+
+export const CHROME_TOOLTIP_NOTCH_SIZE = 8;
+export const CHROME_TOOLTIP_DEFAULT_DURATION_MS = 5000;
+
+export interface ChromeTooltipProps {
+  children: string;
+  visible?: boolean;
+  /** Auto-dismiss delay. `0` keeps the bubble until the parent hides it. */
+  durationMs?: number;
+  onDismiss?: () => void;
+  testID?: string;
+}
+
+/**
+ * Onboarding bubble with an upward notch. Pointer-events none so it does not
+ * steal the double-tap that shows/hides authoring chrome.
+ */
+export function ChromeTooltip({
+  children,
+  visible = true,
+  durationMs = CHROME_TOOLTIP_DEFAULT_DURATION_MS,
+  onDismiss,
+  testID = 'userflow-chrome-tooltip',
+}: ChromeTooltipProps): React.ReactElement | null {
+  const [dismissed, setDismissed] = React.useState(false);
+  const onDismissRef = React.useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
+  React.useEffect(() => {
+    if (!visible) {
+      setDismissed(false);
+      return;
+    }
+    if (durationMs <= 0) return;
+    const id = setTimeout(() => {
+      setDismissed(true);
+      onDismissRef.current?.();
+    }, durationMs);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [visible, durationMs]);
+
+  if (!visible || dismissed) return null;
+
+  const diamond = tooltipNotchDiamondSide(CHROME_TOOLTIP_NOTCH_SIZE);
+
+  return (
+    <View pointerEvents="none" style={styles.root} testID={testID}>
+      <View style={styles.notchClip}>
+        <TooltipNotch
+          left={(16 - diamond) / 2}
+          notchColor={chromeColors.primaryText}
+          notchSize={CHROME_TOOLTIP_NOTCH_SIZE}
+          top={CHROME_TOOLTIP_NOTCH_SIZE - diamond / 2}
+        />
+      </View>
+      <View style={[styles.bubble, chromeShadows.tooltip]}>
+        <Text style={[chromeText.tooltip, { color: chromeColors.invertedText }]}>{children}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    maxWidth: 300,
+  },
+  notchClip: {
+    width: 16,
+    height: CHROME_TOOLTIP_NOTCH_SIZE,
+    overflow: 'hidden',
+    marginBottom: -1,
+    position: 'relative',
+  },
+  bubble: {
+    backgroundColor: chromeColors.primaryText,
+    borderRadius: chromeRadius.lg,
+    padding: chromeSpace[12],
+    maxWidth: 300,
+  },
+});