@userflow-tech/react-native 0.2.0 → 0.3.1

package/src/surfaces/bannerWebView/bannerThemeStyles.ts

@@ -0,0 +1,91 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+import { resolveBannerBackgroundColor, resolveBannerForegroundColor } from '../resolveBannerTheme';
+
+function readString(theme: ThemeFragment, key: string, fallback: string): string {
+  const value = theme[key];
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return fallback;
+}
+
+function readNumber(theme: ThemeFragment, key: string, fallback: number): number {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+}
+
+function readCssLength(theme: ThemeFragment, key: string, fallbackPx: number): string {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return `${fallbackPx}px`;
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value.replace(/&/g, '&').replace(/"/g, '"');
+}
+
+/** Inline CSS custom properties for banner WebView (subset of web `getThemeRootStyles`). */
+export function bannerThemeInlineStyles(theme: ThemeFragment): Record<string, string> {
+  const bannerBg = resolveBannerBackgroundColor(theme);
+  const bannerFg = resolveBannerForegroundColor(theme);
+  const fontSize = typeof theme.fontSize === 'number' ? theme.fontSize : 16;
+  const lineHeight = readNumber(theme, 'lineHeight', Math.round(fontSize * 1.5));
+  return {
+    '--userflow-banner-background-color': bannerBg,
+    '--userflow-banner-foreground-color': bannerFg,
+    '--userflow-banner-hover-background-color': readString(
+      theme,
+      'bannerHoverBackgroundColor',
+      bannerBg,
+    ),
+    '--userflow-banner-active-background-color': readString(
+      theme,
+      'bannerActiveBackgroundColor',
+      bannerBg,
+    ),
+    '--userflow-banner-hover-foreground-color': readString(
+      theme,
+      'bannerHoverForegroundColor',
+      bannerFg,
+    ),
+    '--userflow-banner-active-foreground-color': readString(
+      theme,
+      'bannerActiveForegroundColor',
+      bannerFg,
+    ),
+    '--userflow-font-family': readString(theme, 'fontFamily', 'system-ui, sans-serif'),
+    '--userflow-font-size': `${fontSize}px`,
+    '--userflow-line-height': `${lineHeight}px`,
+    '--userflow-button-height': readCssLength(theme, 'buttonHeight', 32),
+    '--userflow-button-border-radius': readCssLength(theme, 'buttonBorderRadius', 6),
+    '--userflow-button-min-width': readCssLength(theme, 'buttonMinWidth', 0),
+    '--userflow-main-foreground-color': bannerFg,
+    '--userflow-link-color': readString(theme, 'linkColor', bannerFg),
+    '--userflow-h1-font-size': `${Math.round(fontSize * 1.25)}px`,
+    '--userflow-h2-font-size': `${Math.round(fontSize * 1.125)}px`,
+    '--userflow-font-weight-normal': '400',
+    '--userflow-font-weight-bold': '600',
+  };
+}
+
+export function bannerThemeStyleAttribute(theme: ThemeFragment): string {
+  const entries = bannerThemeInlineStyles(theme);
+  return Object.entries(entries)
+    .map(([key, value]) => `${key}:${escapeHtmlAttribute(value)}`)
+    .join(';');
+}

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/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;
+}