@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/content/BannerStepButton.tsx

@@ -0,0 +1,91 @@
+import { interpolateSessionData } from '@userflow-tech/core';
+import type {
+  FlowActionFragment,
+  FlowButtonFragment,
+  ThemeFragment,
+} from '@userflow-tech/protocol';
+import * as React from 'react';
+import type { TextStyle } from 'react-native';
+import { Platform, Pressable, StyleSheet, Text } from 'react-native';
+
+import {
+  resolveBannerBackgroundColor,
+  resolveBannerForegroundColor,
+} from '../surfaces/resolveBannerTheme';
+
+import { resolveBannerButtonChrome } from './resolveBannerButtonChrome';
+import { stepButtonContainerStyle } from './resolveStepButtonChrome';
+
+export interface BannerStepButtonProps {
+  button: FlowButtonFragment;
+  theme: ThemeFragment;
+  sessionData: { name: string; value: string | string[] }[];
+  onActions: (actions: FlowActionFragment[]) => void;
+}
+
+/** Step actions on the embed banner bar (Figma SDK Embed Banner). */
+export function BannerStepButton({
+  button,
+  theme,
+  sessionData,
+  onActions,
+}: BannerStepButtonProps): React.ReactElement {
+  const label = interpolateSessionData(button.text, sessionData);
+  const bannerBackground = resolveBannerBackgroundColor(theme);
+  const bannerForeground = resolveBannerForegroundColor(theme);
+  const chrome = resolveBannerButtonChrome(
+    theme,
+    button.appearance,
+    bannerBackground,
+    bannerForeground,
+  );
+
+  return (
+    <Pressable
+      testID={`userflow-button-${button.cvid}`}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={() => onActions(button.actions)}
+      style={({ pressed }) => [
+        styles.button,
+        stepButtonContainerStyle(chrome),
+        { opacity: pressed ? 0.88 : 1 },
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            color: chrome.fontColor,
+            fontFamily: theme.fontFamily || undefined,
+            fontSize: chrome.fontSize,
+            fontWeight: chrome.fontWeight,
+            ...labelMetrics(chrome.lineHeight),
+          } satisfies TextStyle,
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function labelMetrics(lineHeight: number): TextStyle {
+  if (Platform.OS === 'android') {
+    return {
+      includeFontPadding: false,
+      textAlignVertical: 'center',
+    };
+  }
+  return { lineHeight };
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    textAlign: 'center',
+  },
+});

package/src/content/RichContentRenderer.tsx

@@ -68,6 +68,10 @@ export interface RichContentRendererProps {
    * Web: modal → center, tooltip/bubble → end.
    */
   defaultButtonsAlign?: JustifyContent;
+  /** Override H1 weight (modal uses `normal`; tooltip keeps the default bold). */
+  heading1FontWeight?: TextStyle['fontWeight'];
+  /** Extra H1 styles (callers that need per-heading layout). */
+  heading1Style?: TextStyle;
 }
 
 export function RichContentRenderer({
@@ -78,6 +82,8 @@ export function RichContentRenderer({
   lookupAttribute,
   onActions,
   defaultButtonsAlign,
+  heading1FontWeight,
+  heading1Style,
 }: RichContentRendererProps): React.ReactElement {
   const doc = React.useMemo(() => {
     const raw =
@@ -95,6 +101,8 @@ export function RichContentRenderer({
         lookupAttribute={lookupAttribute}
         onActions={onActions}
         {...(defaultButtonsAlign !== undefined ? { defaultButtonsAlign } : {})}
+        {...(heading1FontWeight !== undefined ? { heading1FontWeight } : {})}
+        {...(heading1Style !== undefined ? { heading1Style } : {})}
       />
     </View>
   );
@@ -107,6 +115,8 @@ interface RenderContext {
   lookupAttribute: LookupAttribute;
   onActions: (actions: FlowActionFragment[]) => void;
   defaultButtonsAlign?: JustifyContent;
+  heading1FontWeight?: TextStyle['fontWeight'];
+  heading1Style?: TextStyle;
 }
 
 function RenderedNodeList({
@@ -155,7 +165,18 @@ function RenderedElement({
     case 'paragraph':
       return <TextBlock node={node} style={styles.paragraph} {...ctx} />;
     case 'heading1':
-      return <TextBlock node={node} style={styles.heading1} accessibilityRole="header" {...ctx} />;
+      return (
+        <TextBlock
+          node={node}
+          style={StyleSheet.flatten([
+            styles.heading1,
+            ctx.heading1Style,
+            ctx.heading1FontWeight ? { fontWeight: ctx.heading1FontWeight } : null,
+          ])}
+          accessibilityRole="header"
+          {...ctx}
+        />
+      );
     case 'heading2':
       return <TextBlock node={node} style={styles.heading2} accessibilityRole="header" {...ctx} />;
     case 'quote':

package/src/content/StepButton.tsx

@@ -47,9 +47,8 @@ export function StepButton({
             color: chrome.fontColor,
             fontFamily: theme.fontFamily || undefined,
             fontSize: chrome.fontSize,
-            lineHeight: chrome.lineHeight,
             fontWeight: chrome.fontWeight,
-            ...(Platform.OS === 'android' ? { includeFontPadding: false } : null),
+            ...labelMetrics(chrome.lineHeight),
           } satisfies TextStyle,
         ]}
       >
@@ -59,6 +58,22 @@ export function StepButton({
   );
 }
 
+/**
+ * iOS/SF can sit in the theme line box. Android/Roboto descenders (g, y, p)
+ * are taller; `includeFontPadding: false` plus that same `lineHeight` clips
+ * them. Skip lineHeight on Android and let font metrics size the label — the
+ * pressable already centers via `justifyContent`.
+ */
+function labelMetrics(lineHeight: number): TextStyle {
+  if (Platform.OS === 'android') {
+    return {
+      includeFontPadding: false,
+      textAlignVertical: 'center',
+    };
+  }
+  return { lineHeight };
+}
+
 const styles = StyleSheet.create({
   button: {
     alignItems: 'center',

package/src/content/buttonAppearance.ts

@@ -9,3 +9,19 @@ export function isPrimaryButtonAppearance(appearance: string | null | undefined)
   const normalized = appearance.toLowerCase();
   return normalized === 'primary' || normalized === 'banner-primary';
 }
+
+/** Figma / web `userflowjs-bubble-button--banner-primary` (inverted CTA on the bar). */
+export function isBannerPrimaryAppearance(appearance: string | null | undefined): boolean {
+  if (!appearance) return false;
+  const normalized = appearance.toLowerCase();
+  return normalized === 'banner-primary' || normalized === 'primary';
+}
+
+/** Figma / web `userflowjs-bubble-button--banner-secondary` (outline on the bar). */
+export function isBannerSecondaryAppearance(appearance: string | null | undefined): boolean {
+  if (!appearance) return false;
+  const normalized = appearance.toLowerCase();
+  return (
+    normalized === 'banner-secondary' || normalized === 'default' || normalized === 'secondary'
+  );
+}

package/src/content/resolveBannerButtonChrome.ts

@@ -0,0 +1,49 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+import { BANNER_BUTTON_PADDING_HORIZONTAL } from '../surfaces/bannerBarTokens';
+
+import {
+  isBannerPrimaryAppearance,
+  isBannerSecondaryAppearance,
+  isPrimaryButtonAppearance,
+} from './buttonAppearance';
+import { resolveStepButtonChrome, type StepButtonChrome } from './resolveStepButtonChrome';
+
+/**
+ * Banner bar buttons (`userflowjs-bubble-button--banner-primary` /
+ * `--banner-secondary`). Primary is inverted on the bar; secondary is an outline.
+ */
+export function resolveBannerButtonChrome(
+  theme: ThemeFragment,
+  appearance: string | null | undefined,
+  bannerBackground: string,
+  bannerForeground: string,
+): StepButtonChrome {
+  const metrics = resolveStepButtonChrome(theme, false);
+  if (isBannerPrimaryAppearance(appearance)) {
+    const primaryMetrics = resolveStepButtonChrome(theme, true);
+    return {
+      ...primaryMetrics,
+      minWidth: 0,
+      backgroundColor: bannerForeground,
+      fontColor: bannerBackground,
+      borderColor: bannerForeground,
+      borderWidth: 0,
+      paddingHorizontal: BANNER_BUTTON_PADDING_HORIZONTAL,
+    };
+  }
+
+  if (isBannerSecondaryAppearance(appearance) || appearance == null || appearance === '') {
+    return {
+      ...metrics,
+      minWidth: 0,
+      backgroundColor: bannerBackground,
+      fontColor: bannerForeground,
+      borderColor: bannerForeground,
+      borderWidth: 1,
+      paddingHorizontal: BANNER_BUTTON_PADDING_HORIZONTAL,
+    };
+  }
+
+  return { ...resolveStepButtonChrome(theme, isPrimaryButtonAppearance(appearance)), minWidth: 0 };
+}

package/src/content/resolveStepButtonChrome.ts

@@ -81,15 +81,21 @@ export function resolveStepButtonChrome(
     borderWidth = Math.max(0, readNumber(theme, 'primaryButtonBorderWidth', 0));
     fontWeight = readNumber(theme, 'primaryButtonFontWeight', fontWeightBold);
   } else {
-    backgroundColor = readString(theme, 'defaultButtonBackgroundColor', mainBackground);
-    fontColor = readString(theme, 'defaultButtonFontColor', widgetBackground);
-    borderColor = readString(theme, 'defaultButtonBorderColor', fontColor);
-    borderWidth = Math.max(0, readNumber(theme, 'defaultButtonBorderWidth', 1));
-    fontWeight = readNumber(theme, 'defaultButtonFontWeight', fontWeightBold);
+    // Mobile secondary is a neutral outline (white + gray border + body text),
+    // not the web brand-colored ghost (`defaultButtonFontColor` = widget blue).
+    backgroundColor = firstString(
+      theme,
+      ['defaultButtonBackgroundColor', 'mainBackgroundColor', 'backgroundColor'],
+      mainBackground,
+    );
+    fontColor = readString(theme, 'fontColor', '#111827');
+    borderColor = '#d1d5db';
+    borderWidth = 1;
+    fontWeight = readNumber(theme, 'defaultButtonFontWeight', 500);
   }
 
   const paddingVertical = Math.max(0, (buttonHeight - lineHeight) / 2 - borderWidth);
-  const paddingHorizontal = fontSize;
+  const paddingHorizontal = isPrimary ? fontSize : Math.max(fontSize, 20);
 
   return {
     backgroundColor,

package/src/content/themeColor.ts

@@ -88,6 +88,31 @@ export function foregroundAlpha(color: string | null | undefined, alpha: number)
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
 }
 
+function byteToHex(n: number): string {
+  return clampByte(n).toString(16).padStart(2, '0');
+}
+
+/** Linear blend between two theme colors (web hover/active approximations). */
+export function mixThemeColors(base: string, overlay: string, overlayWeight: number): string {
+  const b = parseThemeRgb(base) ?? FALLBACK_FG;
+  const o = parseThemeRgb(overlay) ?? FALLBACK_FG;
+  const w = Math.max(0, Math.min(1, overlayWeight));
+  const r = clampByte(b.r + (o.r - b.r) * w);
+  const g = clampByte(b.g + (o.g - b.g) * w);
+  const bCh = clampByte(b.b + (o.b - b.b) * w);
+  return `#${byteToHex(r)}${byteToHex(g)}${byteToHex(bCh)}`;
+}
+
+/**
+ * Web's default `backdropHighlightColor` is `#ffffff`. An opaque white stroke
+ * on a dimmed backdrop reads as a thick frame, not the mobile focus ring.
+ */
+export function isNearWhite(color: string | null | undefined): boolean {
+  const rgb = parseThemeRgb(color);
+  if (!rgb) return false;
+  return rgb.r >= 245 && rgb.g >= 245 && rgb.b >= 245;
+}
+
 /**
  * Extra margin below quote/code so that with {@link ROOT_CONTENT_GAP} the
  * visual spacing matches web `margin-bottom: $padding-16`.

package/src/content/types.ts

@@ -101,6 +101,7 @@ export interface ColumnGroupElement {
 
 export interface ContainerElement {
   type: 'container';
+  className?: string;
   children: RichContentBlockElement[];
 }
 

package/src/deepLinking.ts

@@ -1,10 +1,10 @@
 /**
  * Inbound deep-link handling for builder preview.
  *
- * Host apps register their environment's `scheme_id` (e.g. `userflow-257587`) as
- * a URL scheme at build time. The SDK matches inbound URLs by prefix + root
- * query (no init config) and starts a draft flow via `StartFlowWithToken` once
- * a user is identified.
+ * Host apps register their environment's `scheme_id` (e.g.
+ * `userflow-v7twv2fw2ja2jaco7kesvowmem`) as a URL scheme at build time. The SDK
+ * matches inbound URLs by prefix + root query (no init config) and starts a
+ * draft flow via `StartFlowWithToken` once a user is identified.
  */
 
 import { Linking } from 'react-native';

package/src/deviceContext.ts

@@ -0,0 +1,168 @@
+/**
+ * Resolve mobile platform metadata for Userflow user attributes.
+ *
+ * Cached once during {@link Userflow.init} and merged into identify attributes
+ * (same lifecycle as {@link hostAppVersion.ts}).
+ */
+
+export type SdkPlatform = 'react_native';
+export type DeviceOs = 'ios' | 'android';
+export type DeviceType = 'phone' | 'tablet';
+
+export interface DeviceContext {
+  sdk: SdkPlatform;
+  deviceOs?: DeviceOs;
+  deviceType?: DeviceType;
+}
+
+/** Android `smallestScreenWidthDp` tablet threshold (sw600dp). */
+export const ANDROID_TABLET_SMALLEST_WIDTH_DP = 600;
+
+export const SDK_USER_ATTRIBUTE = 'sdk';
+export const DEVICE_OS_USER_ATTRIBUTE = 'device_os';
+export const DEVICE_TYPE_USER_ATTRIBUTE = 'device_type';
+
+interface PlatformShape {
+  OS?: string;
+  isPad?: boolean;
+}
+
+interface ScreenShape {
+  width: number;
+  height: number;
+}
+
+/** Visible for tests: map `Platform.OS` to a supported device OS value. */
+export function resolveDeviceOs(platformOs: string | undefined): DeviceOs | undefined {
+  if (platformOs === 'ios') return 'ios';
+  if (platformOs === 'android') return 'android';
+  return undefined;
+}
+
+/** Visible for tests: smallest screen width. `Dimensions` values are already dp. */
+export function smallestScreenWidthDp(screen: ScreenShape): number {
+  return Math.min(screen.width, screen.height);
+}
+
+/** Visible for tests: classify phone vs tablet for the current platform. */
+export function resolveDeviceTypeFromSources(sources: {
+  platform?: PlatformShape;
+  screen?: ScreenShape;
+}): DeviceType | undefined {
+  const os = sources.platform?.OS;
+  if (os === 'ios') {
+    return sources.platform?.isPad ? 'tablet' : 'phone';
+  }
+  if (os === 'android') {
+    const screen = sources.screen;
+    if (!screen) return undefined;
+    return smallestScreenWidthDp(screen) >= ANDROID_TABLET_SMALLEST_WIDTH_DP ? 'tablet' : 'phone';
+  }
+  return undefined;
+}
+
+/** Visible for tests: build the cached device context from RN platform APIs. */
+export function resolveDeviceContextFromSources(sources: {
+  platform?: PlatformShape;
+  screen?: ScreenShape;
+}): DeviceContext {
+  const deviceOs = resolveDeviceOs(sources.platform?.OS);
+  const deviceType = resolveDeviceTypeFromSources(sources);
+  return {
+    sdk: 'react_native',
+    ...(deviceOs ? { deviceOs } : {}),
+    ...(deviceType ? { deviceType } : {}),
+  };
+}
+
+function loadReactNativePlatformApis(): {
+  platform?: PlatformShape;
+  screen?: ScreenShape;
+} {
+  try {
+    // Lazy require so Node unit tests can inject sources without loading RN.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+    const rn = require('react-native') as {
+      Platform?: PlatformShape;
+      Dimensions?: { get: (kind: 'screen' | 'window') => ScreenShape };
+    };
+    const platform = rn.Platform;
+    const screen = rn.Dimensions?.get('screen');
+    return {
+      ...(platform ? { platform } : {}),
+      ...(screen ? { screen } : {}),
+    };
+  } catch {
+    return {};
+  }
+}
+
+export function resolveDeviceContext(): DeviceContext {
+  return resolveDeviceContextFromSources(loadReactNativePlatformApis());
+}
+
+/** `undefined` until the first {@link cacheDeviceContextAtInit}; then resolved. */
+let cachedDeviceContext: DeviceContext | undefined;
+
+/**
+ * Resolve and cache device metadata during {@link Userflow.init}.
+ * Re-running init replaces the cache.
+ */
+export function cacheDeviceContextAtInit(): DeviceContext {
+  cachedDeviceContext = resolveDeviceContext();
+  return cachedDeviceContext;
+}
+
+/** Returns the context cached at init, or `null` before init. */
+export function getCachedDeviceContext(): DeviceContext | null {
+  return cachedDeviceContext ?? null;
+}
+
+/** Returns cached device fields for UpsertUser, or `{}` before init. */
+export function deviceContextUserAttributes(): Record<string, string> {
+  const cached = getCachedDeviceContext();
+  if (!cached) return {};
+  return {
+    [SDK_USER_ATTRIBUTE]: cached.sdk,
+    ...(cached.deviceOs ? { [DEVICE_OS_USER_ATTRIBUTE]: cached.deviceOs } : {}),
+    ...(cached.deviceType ? { [DEVICE_TYPE_USER_ATTRIBUTE]: cached.deviceType } : {}),
+  };
+}
+
+/** Optional user-attribute keys added by {@link mergeDeviceContextUserAttributes}. */
+export type DeviceContextUserAttributeMap = Partial<{
+  [SDK_USER_ATTRIBUTE]: SdkPlatform;
+  [DEVICE_OS_USER_ATTRIBUTE]: DeviceOs;
+  [DEVICE_TYPE_USER_ATTRIBUTE]: DeviceType;
+}>;
+
+/** Merges cached device attrs into identify attributes; caller values win on key conflicts. */
+export function mergeDeviceContextUserAttributes<T extends Record<string, unknown>>(
+  attributes?: T,
+): (T & DeviceContextUserAttributeMap) | undefined {
+  const system = deviceContextUserAttributes();
+  if (Object.keys(system).length === 0) {
+    return attributes as (T & DeviceContextUserAttributeMap) | undefined;
+  }
+  return { ...system, ...(attributes ?? {}) } as T & DeviceContextUserAttributeMap;
+}
+
+export function formatDeviceContextLog(resolved: DeviceContext | null): string {
+  if (!resolved) {
+    return '[Userflow] device context is unavailable — call Userflow.init() first.';
+  }
+  const os = resolved.deviceOs ?? 'unknown';
+  const type = resolved.deviceType ?? 'unknown';
+  return `[Userflow] device context sdk=${resolved.sdk} device_os=${os} device_type=${type}`;
+}
+
+/** Log cached user-attribute values. Requires {@link cacheDeviceContextAtInit}. */
+export function logDeviceContext(): void {
+  // eslint-disable-next-line no-console -- public logDeviceContext()
+  console.log(formatDeviceContextLog(getCachedDeviceContext()));
+}
+
+/** @internal Resets init cache between tests. */
+export function resetCachedDeviceContextForTests(): void {
+  cachedDeviceContext = undefined;
+}