@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/surfaces/bannerWebView/bannerWebFrameCss.ts

@@ -0,0 +1,145 @@
+/**
+ * Banner + bubble-button subset of web `bubble-frame.styl` for custom-banner WebViews.
+ * Custom theme CSS targets the same class names as userflow.js.
+ */
+export const BANNER_WEB_FRAME_CSS = `
+.userflowjs-theme-root {
+  line-height: var(--userflow-line-height, 24px);
+  color: var(--userflow-main-foreground-color, inherit);
+  font-weight: var(--userflow-font-weight-normal, 400);
+}
+.userflowjs-theme-root, .userflowjs-theme-root button {
+  font-family: var(--userflow-font-family, system-ui, sans-serif);
+  font-size: var(--userflow-font-size, 16px);
+}
+.userflowjs-theme-root b, .userflowjs-theme-root strong {
+  font-weight: var(--userflow-font-weight-bold, 600);
+}
+.userflowjs-theme-root a {
+  color: var(--userflow-link-color, inherit);
+  text-decoration: underline;
+}
+.userflowjs-theme-root h1 {
+  font-size: var(--userflow-h1-font-size, 1.25em);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  margin: 0 0 16px;
+}
+.userflowjs-theme-root h2 {
+  font-size: var(--userflow-h2-font-size, 1.125em);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  margin: 0 0 16px;
+}
+.userflowjs-theme-root p {
+  margin: 0 0 16px;
+}
+.userflowjs-button-reset {
+  outline: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.userflowjs-bubble-button-base {
+  display: inline-block;
+  padding: calc((var(--userflow-button-height, 32px) - var(--userflow-line-height, 24px)) / 2) var(--userflow-font-size, 16px);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0.375em;
+  font-size: var(--userflow-font-size, 16px);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  height: var(--userflow-button-height, 32px);
+  line-height: var(--userflow-line-height, 24px);
+  border: 0;
+  cursor: pointer;
+}
+.userflowjs-bubble-button {
+  display: inline-flex;
+  align-items: center;
+}
+.userflowjs-bubble-button--primary,
+.userflowjs-bubble-button--default,
+.userflowjs-bubble-button--banner-primary,
+.userflowjs-bubble-button--banner-secondary {
+  font-family: var(--userflow-font-family, system-ui, sans-serif);
+  border-radius: var(--userflow-button-border-radius, 0.375em);
+  min-width: var(--userflow-button-min-width, 0);
+  white-space: normal;
+  max-width: 100%;
+}
+.userflowjs-bubble-button--banner-primary {
+  background-color: var(--userflow-banner-foreground-color);
+  color: var(--userflow-banner-background-color);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.userflowjs-bubble-button--banner-secondary {
+  background-color: var(--userflow-banner-background-color);
+  color: var(--userflow-banner-foreground-color);
+  border: 1px solid var(--userflow-banner-foreground-color);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.userflowjs-banner-root {
+  position: relative;
+  background: var(--userflow-banner-background-color);
+  color: var(--userflow-banner-foreground-color);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.userflowjs-banner-root--content-layout-START .userflowjs-banner-inner {
+  justify-content: flex-start;
+}
+.userflowjs-banner-root--content-layout-CENTER .userflowjs-banner-inner {
+  justify-content: center;
+}
+.userflowjs-banner-root--content-layout-SPACE_BETWEEN .userflowjs-banner-inner {
+  justify-content: space-between;
+}
+.userflowjs-banner-inner {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 8px;
+  margin: 0 8px;
+  min-width: 0;
+}
+.userflowjs-banner-content {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.userflowjs-banner-buttons {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.userflowjs-banner-start-spacer {
+  flex: 1 1 0;
+  max-width: var(--userflow-button-height, 32px);
+  height: var(--userflow-button-height, 32px);
+}
+.userflowjs-banner-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--userflow-button-height, 32px);
+  height: var(--userflow-button-height, 32px);
+  color: var(--userflow-banner-foreground-color);
+  background: transparent;
+  padding: 0;
+  border-radius: 4px;
+}
+.userflowjs-banner-close:hover {
+  background-color: var(--userflow-banner-hover-background-color, rgba(0,0,0,0.08));
+}
+`;

package/src/surfaces/bannerWebView/buildCustomBannerHtml.ts

@@ -0,0 +1,178 @@
+import { interpolateVariables } from '@userflow-tech/core';
+import type { BannerFragment, BannerSessionFragment } from '@userflow-tech/protocol';
+import { BannerContentLayout } from '@userflow-tech/protocol';
+
+import { buildBootstrapHtml, wrapCode } from '../../evalJs/bootstrap';
+import type { EvalJsContext } from '../../evalJs/types';
+
+import { collectBannerAutoRunEvalCodes } from './bannerAutoRunEvalJs';
+import { bannerThemeStyleAttribute } from './bannerThemeStyles';
+import { BANNER_WEB_FRAME_CSS } from './bannerWebFrameCss';
+import { buttonClassName } from './buttonClassName';
+import { resolveCustomStylesheetUrl } from './resolveCdnHost';
+import { richContentDocToHtml } from './richContentDocToHtml';
+
+function contentLayoutClass(layout: BannerContentLayout): string {
+  switch (layout) {
+    case BannerContentLayout.CENTER:
+      return 'userflowjs-banner-root--content-layout-CENTER';
+    case BannerContentLayout.SPACE_BETWEEN:
+      return 'userflowjs-banner-root--content-layout-SPACE_BETWEEN';
+    case BannerContentLayout.START:
+    default:
+      return 'userflowjs-banner-root--content-layout-START';
+  }
+}
+
+function layoutMeasureScript(): string {
+  return `
+(function(){
+  function postLayout(){
+    var root=document.querySelector('.userflowjs-banner-root');
+    if(!root||!window.ReactNativeWebView||!window.ReactNativeWebView.postMessage)return;
+    var rectH=root.getBoundingClientRect().height;
+    var scrollH=root.scrollHeight;
+    var h=Math.ceil(Math.max(scrollH,rectH));
+    var vh=window.innerHeight||0;
+    if(vh>0&&h>=vh-2){
+      var sum=0;
+      for(var i=0;i<root.childNodes.length;i++){
+        var node=root.childNodes[i];
+        if(node&&node.nodeType===1){
+          var el=node;
+          sum+=el.scrollHeight||el.offsetHeight||0;
+        }
+      }
+      if(sum>0&&sum<h) h=Math.ceil(sum);
+    }
+    window.ReactNativeWebView.postMessage(JSON.stringify({__userflow:1,type:'bannerLayout',height:h}));
+  }
+  window.__userflowBannerLayout=postLayout;
+  if(typeof ResizeObserver!=='undefined'){
+    var root=document.querySelector('.userflowjs-banner-root');
+    if(root){new ResizeObserver(postLayout).observe(root);}
+  }
+  window.addEventListener('load',postLayout);
+  setTimeout(postLayout,0);
+})();
+`;
+}
+
+function bannerInteractionScript(): string {
+  return `
+(function(){
+  function post(msg){
+    if(window.ReactNativeWebView&&window.ReactNativeWebView.postMessage){
+      window.ReactNativeWebView.postMessage(JSON.stringify(Object.assign({__userflow:1},msg)));
+    }
+  }
+  document.addEventListener('click',function(ev){
+    var t=ev.target;
+    if(!t||!t.closest)return;
+    var btn=t.closest('[data-userflow-banner-button]');
+    if(btn){
+      ev.preventDefault();
+      post({type:'bannerButton',buttonId:btn.getAttribute('data-userflow-banner-button')});
+      return;
+    }
+    var close=t.closest('[data-userflow-banner-dismiss]');
+    if(close){
+      ev.preventDefault();
+      window.__userflowBannerEvalDismissed=true;
+      post({type:'bannerDismiss'});
+    }
+  });
+})();
+`;
+}
+
+/** Runs eval-only button scripts once the banner document (and `window.userflow`) exists. */
+function bannerAutoRunEvalScript(
+  banner: BannerFragment,
+  lookupAttribute: (fqn: string) => string | null,
+): string {
+  const codes = collectBannerAutoRunEvalCodes(banner, lookupAttribute);
+  if (codes.length === 0) {
+    return '';
+  }
+  const runs = codes.map((code) => wrapCode(code)).join('');
+  return `
+(function(){
+  if(window.__userflowBannerEvalDismissed||window.__userflowBannerEvalRan)return;
+  window.__userflowBannerEvalRan=true;
+  function run(){
+    if(window.__userflowBannerEvalDismissed)return;
+    ${runs}
+  }
+  if(document.readyState==='loading'){
+    document.addEventListener('DOMContentLoaded',run,{once:true});
+  }else{
+    run();
+  }
+})();
+`;
+}
+
+export interface BuildCustomBannerBodyOptions {
+  /** When true, omit eval-only auto-run (e.g. WebView remount while session is still active). */
+  skipAutoRunEval?: boolean;
+}
+
+export function buildCustomBannerBodyHtml(
+  session: BannerSessionFragment,
+  lookupAttribute: (fqn: string) => string | null,
+  serverEndpoint: string,
+  options?: BuildCustomBannerBodyOptions,
+): string {
+  const banner = session.version.banner as BannerFragment;
+  const theme = session.version.theme;
+  const layoutClass = contentLayoutClass(banner.contentLayout);
+  const themeStyle = bannerThemeStyleAttribute(theme);
+  const customCssUrl = resolveCustomStylesheetUrl(serverEndpoint, theme);
+  const maxInner =
+    banner.maxContentWidth != null ? ` style="max-width:${banner.maxContentWidth}px"` : '';
+  const contentHtml = richContentDocToHtml(banner.content, lookupAttribute);
+  const buttonsHtml = banner.buttons
+    .map((button) => {
+      const label = escapeAttr(interpolateVariables(button.text, lookupAttribute));
+      const classes = escapeAttr(buttonClassName(button.appearance));
+      return `<button type="button" class="${classes}" data-userflow-banner-button="${escapeAttr(button.id)}"><span class="userflowjs-bubble-button-text">${label}</span></button>`;
+    })
+    .join('');
+  const closeHtml = session.version.closeDisabled
+    ? '<div class="userflowjs-banner-start-spacer"></div>'
+    : '<button type="button" class="userflowjs-banner-close userflowjs-button-reset" data-userflow-banner-dismiss="1" aria-label="Dismiss">×</button>';
+
+  const customLink = customCssUrl
+    ? `<link rel="stylesheet" href="${escapeAttr(customCssUrl)}" />`
+    : '';
+
+  return `
+<style>${BANNER_WEB_FRAME_CSS}</style>
+${customLink}
+<div class="userflowjs-banner-root userflowjs-theme-root ${layoutClass}" style="${themeStyle}">
+  <div class="userflowjs-banner-start-spacer"></div>
+  <div class="userflowjs-banner-inner"${maxInner}>
+    <div class="userflowjs-banner-content">${contentHtml}</div>
+    ${buttonsHtml ? `<div class="userflowjs-banner-buttons">${buttonsHtml}</div>` : ''}
+  </div>
+  ${closeHtml}
+</div>
+<script>${layoutMeasureScript()}${bannerInteractionScript()}${options?.skipAutoRunEval ? '' : bannerAutoRunEvalScript(banner, lookupAttribute)}</script>
+`;
+}
+
+export function buildCustomBannerHtml(
+  context: EvalJsContext,
+  session: BannerSessionFragment,
+  lookupAttribute: (fqn: string) => string | null,
+  serverEndpoint: string,
+  options?: BuildCustomBannerBodyOptions,
+): string {
+  const body = buildCustomBannerBodyHtml(session, lookupAttribute, serverEndpoint, options);
+  return buildBootstrapHtml(context, body);
+}
+
+function escapeAttr(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}

package/src/surfaces/bannerWebView/buttonClassName.ts

@@ -0,0 +1,15 @@
+/** Mirrors web `TreeDoc.buttonClassName`. */
+export function buttonClassName(appearance: string | null | undefined): string {
+  const value = appearance || 'default';
+  const known =
+    value === 'primary' ||
+    value === 'PRIMARY' ||
+    value === 'default' ||
+    value === 'DEFAULT' ||
+    value === 'banner-primary' ||
+    value === 'banner-secondary';
+  return (
+    'userflowjs-bubble-button ' +
+    (known ? `userflowjs-bubble-button--${value.toLowerCase()}` : value)
+  );
+}

package/src/surfaces/bannerWebView/resolveCdnHost.ts

@@ -0,0 +1,47 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+/**
+ * Map the end-user websocket host to the theme stylesheet CDN host
+ * (same convention as web userflow.js).
+ */
+export function resolveCdnHost(serverEndpoint: string): string {
+  const trimmed = serverEndpoint.replace(/\/$/, '');
+  let host = trimmed;
+  if (host.startsWith('https://')) {
+    host = host.slice('https://'.length);
+  } else if (host.startsWith('http://')) {
+    host = host.slice('http://'.length);
+  }
+  if (host.startsWith('e.')) {
+    return `cdn.${host.slice(2)}`;
+  }
+  if (host.includes('localhost') || host.includes('127.0.0.1')) {
+    return 'cdn.userflow.com';
+  }
+  return `cdn.${host}`;
+}
+
+export function themePublishedCssVersion(theme: ThemeFragment): string | null {
+  const cssVersion = theme.cssVersion;
+  if (typeof cssVersion !== 'string' && typeof cssVersion !== 'number') {
+    return null;
+  }
+  const version = String(cssVersion);
+  return version ? version : null;
+}
+
+export function themeHasPublishedCustomCss(theme: ThemeFragment): boolean {
+  return themePublishedCssVersion(theme) != null;
+}
+
+export function resolveCustomStylesheetUrl(
+  serverEndpoint: string,
+  theme: ThemeFragment,
+): string | null {
+  const version = themePublishedCssVersion(theme);
+  if (!version) {
+    return null;
+  }
+  const cdnHost = resolveCdnHost(serverEndpoint);
+  return `https://${cdnHost}/themes/${theme.id}/stylesheets/${version}/custom.css`;
+}

package/src/surfaces/bannerWebView/richContentDocToHtml.ts

@@ -0,0 +1,99 @@
+import { interpolateVariables } from '@userflow-tech/core';
+
+import {
+  deserializeRichContentDoc,
+  isText,
+  stringifyPlaintextDoc,
+} from '../../content/deserialize';
+import type {
+  LookupAttribute,
+  RichContentBlockElement,
+  RichContentDoc,
+  RichContentInlineNode,
+} from '../../content/types';
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function inlineNodesToHtml(
+  nodes: RichContentInlineNode[],
+  lookupAttribute: LookupAttribute,
+): string {
+  let html = '';
+  for (const node of nodes) {
+    if (isText(node)) {
+      let text = node.text;
+      if (node.silent) {
+        continue;
+      }
+      text = interpolateVariables(text, lookupAttribute);
+      let chunk = escapeHtml(text);
+      if (node.bold) {
+        chunk = `<strong>${chunk}</strong>`;
+      }
+      if (node.italic) {
+        chunk = `<em>${chunk}</em>`;
+      }
+      if (node.underline) {
+        chunk = `<u>${chunk}</u>`;
+      }
+      if (node.code) {
+        chunk = `<code>${chunk}</code>`;
+      }
+      html += chunk;
+      continue;
+    }
+    if (node.type === 'link') {
+      const href = escapeHtml(stringifyPlaintextDoc(node.href, { lookupAttribute }));
+      const inner = inlineNodesToHtml(node.children, lookupAttribute);
+      const target = node.target === 'new' ? ' target="_blank" rel="noopener noreferrer"' : '';
+      html += `<a href="${href}"${target}>${inner}</a>`;
+      continue;
+    }
+    if (node.type === 'attribute') {
+      const value = lookupAttribute(node.attributeName ?? '') ?? node.fallback ?? '';
+      html += escapeHtml(value);
+    }
+  }
+  return html;
+}
+
+function blockToHtml(node: RichContentBlockElement, lookupAttribute: LookupAttribute): string {
+  switch (node.type) {
+    case 'paragraph':
+      return `<p>${inlineNodesToHtml(node.children, lookupAttribute)}</p>`;
+    case 'heading1':
+      return `<h1>${inlineNodesToHtml(node.children, lookupAttribute)}</h1>`;
+    case 'heading2':
+      return `<h2>${inlineNodesToHtml(node.children, lookupAttribute)}</h2>`;
+    case 'quote':
+      return `<blockquote>${inlineNodesToHtml(node.children, lookupAttribute)}</blockquote>`;
+    case 'unordered-list':
+      return `<ul>${node.children.map((item) => `<li>${inlineNodesToHtml(item.children, lookupAttribute)}</li>`).join('')}</ul>`;
+    case 'ordered-list':
+      return `<ol>${node.children.map((item) => `<li>${inlineNodesToHtml(item.children, lookupAttribute)}</li>`).join('')}</ol>`;
+    case 'code-block':
+      return `<pre><code>${inlineNodesToHtml(node.children, lookupAttribute)}</code></pre>`;
+    case 'container': {
+      const extra = node.className ? ` ${escapeHtml(node.className)}` : '';
+      const inner = node.children.map((child) => blockToHtml(child, lookupAttribute)).join('');
+      return `<div class="p-like${extra}">${inner}</div>`;
+    }
+    default:
+      return '';
+  }
+}
+
+export function richContentDocToHtml(
+  content: string | RichContentDoc | null | undefined,
+  lookupAttribute: LookupAttribute,
+): string {
+  const doc =
+    typeof content === 'string' || content == null ? deserializeRichContentDoc(content) : content;
+  return doc.children.map((block) => blockToHtml(block, lookupAttribute)).join('');
+}

package/src/surfaces/cardTransition.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+/** Outgoing card leaves fast; the incoming one gets web's `opacity 250ms` feel. */
+export const CARD_EXIT_MS = 120;
+export const CARD_ENTER_MS = 200;
+
+export type CardTransitionPhase = 'entering' | 'exiting';
+
+const CardTransitionContext = React.createContext<CardTransitionPhase | null>(null);
+
+export const CardTransitionProvider = CardTransitionContext.Provider;
+
+/**
+ * Phase of the surrounding step transition, or `null` outside one.
+ *
+ * Surfaces use this to hold side effects while they fade out: an exiting card is
+ * still mounted for `CARD_EXIT_MS`, and anything it measures or arms in that
+ * window belongs to a step the user has already left.
+ */
+export function useCardTransitionPhase(): CardTransitionPhase | null {
+  return React.useContext(CardTransitionContext);
+}
+
+/**
+ * Fade for a surface's card chrome, so step swaps move the card alone and leave
+ * the backdrop and cutout steady (same as web, where `FlowChrome` animates the
+ * bubble alone).
+ *
+ * Each card owns its value and starts the fade from its own mount rather than
+ * sharing one animation across the swap. Cards can appear well after the step
+ * changes — `TooltipSurface` renders nothing until its anchor measures — and a
+ * shared animation would already have finished by then, leaving the card at the
+ * stale JS value of 0 forever, since native-driven animations never write back
+ * to JS.
+ *
+ * Returns `null` outside a flow transition (unit tests), leaving opacity alone.
+ */
+export function useCardOpacity(): Animated.Value | null {
+  const phase = React.useContext(CardTransitionContext);
+  const opacityRef = React.useRef<Animated.Value | null>(null);
+  if (phase != null && opacityRef.current == null) {
+    opacityRef.current = new Animated.Value(phase === 'exiting' ? 1 : 0);
+  }
+  const opacity = opacityRef.current;
+
+  React.useLayoutEffect(() => {
+    if (phase == null || opacity == null) {
+      return;
+    }
+    const exiting = phase === 'exiting';
+    // Pin the start point: a native-driven ramp is computed from the JS value,
+    // which the previous native animation left behind.
+    opacity.setValue(exiting ? 1 : 0);
+    const animation = Animated.timing(opacity, {
+      toValue: exiting ? 0 : 1,
+      duration: exiting ? CARD_EXIT_MS : CARD_ENTER_MS,
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [opacity, phase]);
+
+  return opacity;
+}

package/src/surfaces/resolveBannerTheme.ts

@@ -0,0 +1,18 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+/** Default banner chrome when theme banner tokens are unset (matches product / web debugger palette). */
+export const DEFAULT_BANNER_BACKGROUND_COLOR = '#0A1A24';
+export const DEFAULT_BANNER_FOREGROUND_COLOR = '#FFFFFF';
+
+function readThemeColor(theme: ThemeFragment, key: string): string | undefined {
+  const value = theme[key];
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;
+}
+
+export function resolveBannerBackgroundColor(theme: ThemeFragment): string {
+  return readThemeColor(theme, 'bannerBackgroundColor') ?? DEFAULT_BANNER_BACKGROUND_COLOR;
+}
+
+export function resolveBannerForegroundColor(theme: ThemeFragment): string {
+  return readThemeColor(theme, 'bannerForegroundColor') ?? DEFAULT_BANNER_FOREGROUND_COLOR;
+}