@userflow-tech/react-native 0.1.1 → 0.2.0

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,69 @@
+import * as React from 'react';
+import { StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
+
+import { useUserflowSafeAreaInsets } from '../../surfaces/safeArea';
+
+import { chromeColors, chromeShadows, chromeSpace, chromeText } from './tokens';
+
+export interface ChromeBottomSheetProps {
+  children: React.ReactNode;
+  helperText?: string | undefined;
+  onMeasureHeight?: (height: number) => void;
+  testID?: string;
+}
+
+/**
+ * Full-bleed authoring bottom bar. Content is top-aligned; bottom padding
+ * includes the home-indicator inset.
+ */
+export function ChromeBottomSheet({
+  children,
+  helperText,
+  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, { paddingBottom: chromeSpace[24] + insets.bottom }]}
+    >
+      {helperText ? (
+        <Text style={[chromeText.labelSmBold, styles.helper, { color: chromeColors.invertedText }]}>
+          {helperText}
+        </Text>
+      ) : null}
+      <View style={styles.row}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    backgroundColor: chromeColors.primaryText,
+    paddingTop: chromeSpace[24],
+    paddingHorizontal: chromeSpace[24],
+    gap: chromeSpace[16],
+  },
+  helper: {
+    alignSelf: 'stretch',
+    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,103 @@
+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 tint = variant === 'primary' ? chromeColors.invertedText : chromeColors.blue500;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+      style={({ pressed }) => [
+        iconOnly ? styles.icon : styles.pill,
+        variant === 'primary' ? styles.primary : styles.secondary,
+        variant === 'primary' ? chromeShadows.button : chromeShadows.buttonSubtle,
+        flex ? styles.flex : null,
+        { opacity: 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,
+  },
+  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,40 @@
+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 xmark from './icons/xmark.png';
+
+export type ChromeIconName = 'arrow-left-from-bracket' | 'arrow-rotate-left' | 'xmark';
+
+const SOURCES: Record<ChromeIconName, number> = {
+  'arrow-left-from-bracket': arrowLeftFromBracket,
+  'arrow-rotate-left': arrowRotateLeft,
+  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,
+  },
+});

package/src/authoring/chrome/ChromeTopBar.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Image, StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
+
+import { useUserflowSafeAreaInsets } from '../../surfaces/safeArea';
+
+import logomark from './icons/userflow-logomark.png';
+import { chromeColors, chromeShadows, chromeSpace, chromeText } from './tokens';
+
+export type ChromeTopBarTone = 'default' | 'error';
+
+export interface ChromeTopBarProps {
+  label: string;
+  tone?: ChromeTopBarTone;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  /** Laid-out height of the bar including safe-area padding. */
+  onMeasureHeight?: (height: number) => void;
+  /** Error-tone labels wrap on narrow devices. Default 1. */
+  numberOfLines?: number;
+  /** Hide the bar from VoiceOver/TalkBack while a dialog is open above it. */
+  accessibilityElementsHidden?: boolean | undefined;
+  importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined;
+  testID?: string;
+}
+
+/**
+ * Full-bleed authoring top bar. Height comes from safe-area + content, not
+ * the 120pt Figma frame (that number already includes the status bar).
+ *
+ * Measured on the Pro Max reference: 4pt below the status bar, 16pt above
+ * the bottom edge of the bar.
+ */
+export function ChromeTopBar({
+  label,
+  tone = 'default',
+  left,
+  right,
+  onMeasureHeight,
+  numberOfLines = 1,
+  accessibilityElementsHidden,
+  importantForAccessibility,
+  testID = 'userflow-chrome-top-bar',
+}: ChromeTopBarProps): React.ReactElement {
+  const insets = useUserflowSafeAreaInsets();
+
+  const onLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      onMeasureHeight?.(event.nativeEvent.layout.height);
+    },
+    [onMeasureHeight],
+  );
+
+  return (
+    <View
+      accessibilityElementsHidden={accessibilityElementsHidden}
+      importantForAccessibility={importantForAccessibility}
+      testID={testID}
+      onLayout={onLayout}
+      style={[
+        styles.bar,
+        chromeShadows.card,
+        {
+          backgroundColor: tone === 'error' ? chromeColors.danger : chromeColors.primaryText,
+          paddingTop: insets.top + CONTENT_TOP_GAP,
+        },
+      ]}
+    >
+      <View style={styles.row}>
+        <View style={styles.slot}>{left}</View>
+        <View style={styles.labelRow} pointerEvents="none">
+          <Image
+            accessibilityIgnoresInvertColors
+            source={logomark}
+            style={styles.logomark}
+            testID="userflow-chrome-logomark"
+          />
+          <Text numberOfLines={numberOfLines} style={[chromeText.barTitle, styles.label]}>
+            {label}
+          </Text>
+        </View>
+        <View style={styles.slot}>{right}</View>
+      </View>
+    </View>
+  );
+}
+
+const SLOT = 40;
+/** Gap between the status-bar inset and the content row (Figma: 5pt / we use 4). */
+const CONTENT_TOP_GAP = 4;
+
+const styles = StyleSheet.create({
+  bar: {
+    paddingHorizontal: chromeSpace[24],
+    paddingBottom: chromeSpace[16],
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: SLOT,
+  },
+  slot: {
+    width: SLOT,
+    height: SLOT,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  labelRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+    paddingHorizontal: chromeSpace[8],
+  },
+  label: {
+    color: chromeColors.invertedText,
+    textAlign: 'center',
+    flexShrink: 1,
+  },
+  logomark: {
+    // Figma `Warstwa_1` stacked-card mark. Not the Made-with-Userflow footer glyph.
+    width: 24,
+    height: 22,
+    tintColor: chromeColors.invertedText,
+  },
+});