@userflow-tech/react-native 0.1.0

package/src/surfaces/ModalSurface.tsx

@@ -0,0 +1,215 @@
+import type { FlowSessionEngine } from '@userflow-tech/core';
+import type {
+  EndFlowReasonInput,
+  FlowSessionFragment,
+  FlowStepFragment,
+  ThemeFragment,
+} from '@userflow-tech/protocol';
+import * as React from 'react';
+import { Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
+
+import { RichContentRenderer } from '../content/RichContentRenderer';
+import type { LookupAttribute } from '../content/types';
+
+import { CloseButton } from './CloseButton';
+import { resolveCloseButtonColor } from './resolveCloseButtonColor';
+import { MadeWithUserflow } from './MadeWithUserflow';
+import { ProgressBar } from './ProgressBar';
+import { ABSOLUTE_FILL } from './absoluteFill';
+import { parseBackdropOpacity } from './parseBackdropOpacity';
+import { resolveStepProgress } from './progress';
+import { useUserflowSafeAreaInsets } from './safeArea';
+import {
+  resolveModalButtonsAlign,
+  resolveModalCardMaxHeight,
+  resolveModalCardMaxWidth,
+  resolveModalCenterPadding,
+} from './resolveModalLayout';
+import { resolveBubbleChrome } from './themeChrome';
+
+export interface ModalSurfaceProps {
+  engine: FlowSessionEngine;
+  session: FlowSessionFragment;
+  currentStep: FlowStepFragment;
+  theme: ThemeFragment;
+  lookupAttribute: LookupAttribute;
+}
+
+/**
+ * Modal chrome: full-screen backdrop + centered themed card with TreeDoc body.
+ * Also used as a temporary fallback for BUBBLE/HIDDEN until dedicated surfaces.
+ *
+ * Touch model: backdrop is a full-screen Pressable; the centering wrapper is
+ * `box-none` so taps outside the card hit the backdrop, while the card itself
+ * uses default `auto` pointer events so children (buttons, scroll) keep working.
+ * Do not put `onStartShouldSetResponder` on the card — it steals touches from
+ * nested Pressables.
+ */
+export function ModalSurface({
+  engine,
+  session,
+  currentStep,
+  theme,
+  lookupAttribute,
+}: ModalSurfaceProps): React.ReactElement {
+  const version = session.version;
+  const chrome = resolveBubbleChrome(theme, 'modal');
+  const progress = resolveStepProgress(version, currentStep.id);
+  const showClose = !version.closeDisabled;
+  const backdropOpacity = parseBackdropOpacity(theme.backdropOpacity);
+  const canDismissBackdrop = theme.modalBackdropOnclick === 'DISMISS' && showClose;
+
+  const endAsUserClosed = React.useCallback(() => {
+    void engine.endFlow('USER_CLOSED' as EndFlowReasonInput);
+  }, [engine]);
+
+  const insets = useUserflowSafeAreaInsets();
+  const windowDims = useWindowDimensions();
+  const centerPadding = resolveModalCenterPadding(insets);
+  const cardMaxWidth = resolveModalCardMaxWidth(theme, currentStep.width, windowDims.width);
+  const cardMaxHeight = resolveModalCardMaxHeight(windowDims.height, centerPadding);
+  const buttonsAlign = resolveModalButtonsAlign(theme, windowDims.width);
+  const progressTop = theme.progressBarEnabled && theme.progressBarPosition === 'TOP';
+  const progressBottom = theme.progressBarEnabled && theme.progressBarPosition === 'BOTTOM';
+  const showBranding = session.flow.company.flowBranding;
+  const contentPadding = chrome.contentPadding;
+
+  return (
+    <View style={styles.root} testID="userflow-modal-surface" pointerEvents="box-none">
+      <Pressable
+        testID="userflow-modal-backdrop"
+        accessibilityRole={canDismissBackdrop ? 'button' : 'none'}
+        accessibilityLabel={canDismissBackdrop ? 'Dismiss' : undefined}
+        accessibilityElementsHidden={!canDismissBackdrop}
+        importantForAccessibility={canDismissBackdrop ? 'yes' : 'no-hide-descendants'}
+        disabled={!canDismissBackdrop}
+        onPress={canDismissBackdrop ? endAsUserClosed : undefined}
+        style={[
+          ABSOLUTE_FILL,
+          {
+            backgroundColor: theme.backdropColor,
+            opacity: backdropOpacity,
+          },
+        ]}
+      />
+
+      <View style={[styles.center, centerPadding]} pointerEvents="box-none">
+        <View
+          testID="userflow-modal-card"
+          accessibilityViewIsModal
+          pointerEvents="auto"
+          style={[
+            chrome.cardStyle,
+            styles.cardShadow,
+            {
+              maxWidth: cardMaxWidth,
+              maxHeight: cardMaxHeight,
+              width: '100%',
+              borderRadius: chrome.borderRadius,
+            },
+          ]}
+        >
+          <View
+            testID="userflow-modal-card-fill"
+            style={[
+              chrome.fillStyle,
+              styles.cardFill,
+              {
+                borderRadius: chrome.borderRadius,
+              },
+            ]}
+          >
+            {showClose ? (
+              <CloseButton onPress={endAsUserClosed} color={resolveCloseButtonColor(theme)} />
+            ) : null}
+
+            {progressTop ? (
+              <ProgressBar
+                enabled
+                fraction={progress.fraction}
+                position="TOP"
+                theme={theme}
+                totalSteps={progress.total}
+                contentPadding={contentPadding}
+              />
+            ) : null}
+
+            <ScrollView
+              testID="userflow-flow-scroll"
+              style={styles.scroll}
+              contentContainerStyle={[
+                styles.scrollContent,
+                {
+                  paddingHorizontal: contentPadding,
+                  paddingTop: contentPadding,
+                  paddingBottom: showBranding ? 0 : contentPadding,
+                },
+              ]}
+              keyboardShouldPersistTaps="handled"
+              nestedScrollEnabled
+              bounces={false}
+              showsVerticalScrollIndicator
+            >
+              <RichContentRenderer
+                content={currentStep.content}
+                buttons={currentStep.buttons}
+                theme={theme}
+                sessionData={session.data}
+                lookupAttribute={lookupAttribute}
+                defaultButtonsAlign={buttonsAlign}
+                onActions={(actions) => {
+                  void engine.handleActions(actions);
+                }}
+              />
+              <MadeWithUserflow
+                company={session.flow.company}
+                color={theme.fontColor}
+                contentPadding={contentPadding}
+                embedded
+              />
+            </ScrollView>
+
+            {progressBottom ? (
+              <ProgressBar
+                enabled
+                fraction={progress.fraction}
+                position="BOTTOM"
+                theme={theme}
+                totalSteps={progress.total}
+                contentPadding={contentPadding}
+              />
+            ) : null}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    ...ABSOLUTE_FILL,
+  },
+  center: {
+    ...ABSOLUTE_FILL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cardFill: {
+    flexShrink: 1,
+    minHeight: 0,
+    width: '100%',
+    position: 'relative',
+  },
+  cardShadow: {
+    flexShrink: 1,
+  },
+  scroll: {
+    flexGrow: 0,
+    flexShrink: 1,
+    minHeight: 0,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+});

package/src/surfaces/ProgressBar.tsx

@@ -0,0 +1,142 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { foregroundAlpha } from '../content/themeColor';
+
+export type ProgressBarPlacement = 'TOP' | 'BOTTOM';
+
+const PROGRESS_BAR_NUMBERED = 'NUMBERED';
+
+export interface ProgressBarProps {
+  enabled: boolean;
+  fraction: number;
+  position: ProgressBarPlacement;
+  theme: ThemeFragment;
+  /** Visible step count (HIDDEN excluded), for NUMBERED progress. */
+  totalSteps?: number;
+  /** Inner card padding — NUMBERED label aligns with content inset. */
+  contentPadding?: number;
+}
+
+function progressBarType(theme: ThemeFragment): string {
+  return String(theme.progressBarType ?? 'DEFAULT').toUpperCase();
+}
+
+function numberedStepLabel(fraction: number, totalSteps: number): string {
+  const maxSteps = Math.max(0, totalSteps);
+  if (maxSteps === 0) return '';
+  const selected = Math.min(Math.floor(fraction * maxSteps), maxSteps);
+  return `${selected} of ${maxSteps}`;
+}
+
+/**
+ * Web bubble progress (`BubbleProgress` / bubble-frame.styl).
+ * DEFAULT: 2px track flush to the card edge. NUMBERED: "1 of 3" step label.
+ */
+export function ProgressBar({
+  enabled,
+  fraction,
+  position,
+  theme,
+  totalSteps = 0,
+  contentPadding = 0,
+}: ProgressBarProps): React.ReactElement | null {
+  if (!enabled) return null;
+
+  const clamped = Math.min(1, Math.max(0, fraction));
+  const type = progressBarType(theme);
+  const testId = `userflow-progress-${position === 'TOP' ? 'top' : 'bottom'}`;
+
+  if (type === PROGRESS_BAR_NUMBERED) {
+    const label = numberedStepLabel(clamped, totalSteps);
+    if (!label) return null;
+
+    return (
+      <View
+        testID={testId}
+        style={[
+          styles.numberedTrack,
+          position === 'TOP' ? styles.top : styles.bottomNumbered,
+          contentPadding > 0
+            ? { paddingHorizontal: contentPadding, alignItems: 'flex-start' }
+            : styles.numberedCentered,
+        ]}
+        accessibilityRole="text"
+        accessibilityLabel={label}
+        pointerEvents="none"
+      >
+        <Text
+          testID="userflow-progress-numbered"
+          style={[
+            styles.numberedLabel,
+            {
+              color: foregroundAlpha(theme.fontColor, 0.55),
+              fontFamily: theme.fontFamily || undefined,
+              fontSize: Math.max(12, Math.round(theme.fontSize * 0.875)),
+            },
+          ]}
+        >
+          {label}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID={testId}
+      style={[styles.track, position === 'TOP' ? styles.top : styles.bottom]}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: 100, now: Math.round(clamped * 100) }}
+      pointerEvents="none"
+    >
+      <View
+        testID="userflow-progress-fill"
+        style={[
+          styles.fill,
+          {
+            width: `${clamped * 100}%`,
+            backgroundColor: theme.defaultButtonBackgroundColor,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 2,
+    backgroundColor: 'rgba(0,0,0,0.08)',
+    overflow: 'hidden',
+    zIndex: 1,
+  },
+  numberedTrack: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  numberedCentered: {
+    alignItems: 'center',
+  },
+  top: {
+    top: 0,
+  },
+  bottom: {
+    bottom: 0,
+  },
+  bottomNumbered: {
+    bottom: 8,
+  },
+  fill: {
+    height: '100%',
+  },
+  numberedLabel: {
+    fontWeight: '600',
+  },
+});