@userflow-tech/react-native 0.1.0

package/src/content/RichContentRenderer.tsx

@@ -0,0 +1,721 @@
+import { interpolateVariables } from '@userflow-tech/core';
+import type {
+  FlowActionFragment,
+  FlowButtonFragment,
+  ThemeFragment,
+} from '@userflow-tech/protocol';
+import * as React from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
+import { Image, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { StepButton } from './StepButton';
+import {
+  deserializeRichContentDoc,
+  getAttributeNodeValue,
+  isText,
+  stringifyPlaintextDoc,
+} from './deserialize';
+import { resolveImageFrame } from './imageLayout';
+import { migrateFlowBlocksIntoContent } from './migrateFlowBlocks';
+import { openSafeUrl } from './openSafeUrl';
+import {
+  ROOT_CONTENT_GAP,
+  WEB_CODE_BG_ALPHA,
+  WEB_CODE_FONT_SCALE,
+  WEB_CODE_RADIUS_SCALE,
+  WEB_LINE_HEIGHT_FALLBACK,
+  WEB_PADDING_2,
+  WEB_PADDING_4,
+  WEB_PADDING_8,
+  WEB_PADDING_16,
+  WEB_QUOTE_BORDER_ALPHA,
+  blockMarginBelow,
+  foregroundAlpha,
+} from './themeColor';
+import type {
+  AbstractRichContentTextFormatting,
+  AttributeElement,
+  ButtonElement,
+  ButtonGroupElement,
+  CodeBlockElement,
+  Heading1Element,
+  Heading2Element,
+  ImageElement,
+  JustifyContent,
+  LinkElement,
+  ListItemElement,
+  LookupAttribute,
+  OrderedListElement,
+  ParagraphElement,
+  QuoteElement,
+  RichContentDescendant,
+  RichContentDoc,
+  RichContentElement,
+  RichContentInlineNode,
+  TextAlign,
+  UnorderedListElement,
+} from './types';
+
+export interface RichContentRendererProps {
+  content: string | RichContentDoc | null | undefined;
+  buttons: FlowButtonFragment[];
+  theme: ThemeFragment;
+  sessionData: { name: string; value: string | string[] }[];
+  lookupAttribute: LookupAttribute;
+  onActions: (actions: FlowActionFragment[]) => void;
+  /**
+   * Default justify for button-groups when `align` is unset.
+   * Web: modal → center, tooltip/bubble → end.
+   */
+  defaultButtonsAlign?: JustifyContent;
+}
+
+export function RichContentRenderer({
+  content,
+  buttons,
+  theme,
+  sessionData,
+  lookupAttribute,
+  onActions,
+  defaultButtonsAlign,
+}: RichContentRendererProps): React.ReactElement {
+  const doc = React.useMemo(() => {
+    const raw =
+      typeof content === 'string' || content == null ? deserializeRichContentDoc(content) : content;
+    return migrateFlowBlocksIntoContent(raw, { buttons });
+  }, [content, buttons]);
+
+  return (
+    <View testID="userflow-rich-content" style={styles.root}>
+      <RenderedNodeList
+        nodes={doc.children}
+        buttons={buttons}
+        theme={theme}
+        sessionData={sessionData}
+        lookupAttribute={lookupAttribute}
+        onActions={onActions}
+        {...(defaultButtonsAlign !== undefined ? { defaultButtonsAlign } : {})}
+      />
+    </View>
+  );
+}
+
+interface RenderContext {
+  buttons: FlowButtonFragment[];
+  theme: ThemeFragment;
+  sessionData: { name: string; value: string | string[] }[];
+  lookupAttribute: LookupAttribute;
+  onActions: (actions: FlowActionFragment[]) => void;
+  defaultButtonsAlign?: JustifyContent;
+}
+
+function RenderedNodeList({
+  nodes,
+  ...ctx
+}: RenderContext & { nodes: RichContentDescendant[] }): React.ReactElement {
+  return (
+    <>
+      {nodes.map((node, idx) =>
+        isText(node) ? (
+          <RenderedText key={idx} node={node} theme={ctx.theme} />
+        ) : (
+          <RenderedElement
+            key={idx}
+            node={node as RichContentElement}
+            isLast={isLastPaintedSibling(nodes, idx)}
+            {...ctx}
+          />
+        ),
+      )}
+    </>
+  );
+}
+
+/** Nodes that paint nothing still occupy the children array — skip them for last-sibling margin. */
+function paintsAsBlock(node: RichContentDescendant): boolean {
+  if (isText(node)) return Boolean(node.text);
+  const type = (node as RichContentElement).type;
+  return type !== 'video' && type !== 'question';
+}
+
+function isLastPaintedSibling(nodes: RichContentDescendant[], idx: number): boolean {
+  for (let i = idx + 1; i < nodes.length; i++) {
+    const next = nodes[i];
+    if (next != null && paintsAsBlock(next)) return false;
+  }
+  return true;
+}
+
+function RenderedElement({
+  node,
+  isLast,
+  ...ctx
+}: RenderContext & { node: RichContentElement; isLast: boolean }): React.ReactElement | null {
+  switch (node.type) {
+    case 'paragraph':
+      return <TextBlock node={node} style={styles.paragraph} {...ctx} />;
+    case 'heading1':
+      return <TextBlock node={node} style={styles.heading1} accessibilityRole="header" {...ctx} />;
+    case 'heading2':
+      return <TextBlock node={node} style={styles.heading2} accessibilityRole="header" {...ctx} />;
+    case 'quote':
+      return <RenderedQuote node={node} isLast={isLast} {...ctx} />;
+    case 'code-block':
+      return <RenderedCodeBlock node={node} isLast={isLast} {...ctx} />;
+    case 'unordered-list':
+      return <UnorderedList node={node} {...ctx} />;
+    case 'ordered-list':
+      return <OrderedList node={node} {...ctx} />;
+    case 'list-item':
+      return <InlineChildren nodes={node.children} {...ctx} />;
+    case 'link':
+      return <RenderedLink node={node} {...ctx} />;
+    case 'attribute':
+      return (
+        <RenderedAttribute node={node} theme={ctx.theme} lookupAttribute={ctx.lookupAttribute} />
+      );
+    case 'image':
+      return <RenderedImage node={node} {...ctx} />;
+    case 'button-group':
+      return <RenderedButtonGroup node={node} {...ctx} />;
+    case 'button':
+      return <RenderedButton node={node} {...ctx} />;
+    case 'video':
+    case 'question':
+      return null;
+    case 'column':
+    case 'column-group':
+    case 'container':
+      return (
+        <View style={styles.block}>
+          <RenderedNodeList nodes={node.children as RichContentDescendant[]} {...ctx} />
+        </View>
+      );
+    default:
+      return null;
+  }
+}
+
+/** mirrors userflowjs bubble-frame.styl blockquote */
+function RenderedQuote({
+  node,
+  isLast,
+  ...ctx
+}: RenderContext & { node: QuoteElement; isLast: boolean }): React.ReactElement {
+  return (
+    <View
+      testID="userflow-quote"
+      style={[
+        styles.quote,
+        {
+          borderStartColor: foregroundAlpha(ctx.theme.fontColor, WEB_QUOTE_BORDER_ALPHA),
+          marginBottom: blockMarginBelow(isLast),
+        },
+      ]}
+    >
+      <Text style={[baseText(ctx.theme), alignStyle(node.align)]}>
+        <InlineChildren nodes={node.children} {...ctx} />
+      </Text>
+    </View>
+  );
+}
+
+/** mirrors userflowjs bubble-frame.styl pre > code */
+function RenderedCodeBlock({
+  node,
+  isLast,
+  ...ctx
+}: RenderContext & { node: CodeBlockElement; isLast: boolean }): React.ReactElement {
+  const fontSize = (ctx.theme.fontSize ?? 14) * WEB_CODE_FONT_SCALE;
+  const codeTextStyle: TextStyle = {
+    color: ctx.theme.fontColor,
+    fontFamily: monoFontFamily(),
+    fontSize,
+  };
+  return (
+    <View
+      testID="userflow-code-block"
+      style={[
+        styles.codeBlock,
+        {
+          backgroundColor: foregroundAlpha(ctx.theme.fontColor, WEB_CODE_BG_ALPHA),
+          borderRadius: (ctx.theme.fontSize ?? 14) * WEB_CODE_RADIUS_SCALE,
+          marginBottom: blockMarginBelow(isLast),
+        },
+      ]}
+    >
+      <ScrollView
+        horizontal
+        nestedScrollEnabled
+        directionalLockEnabled
+        bounces={false}
+        showsHorizontalScrollIndicator
+      >
+        <Text selectable style={codeTextStyle}>
+          <InlineChildren nodes={node.children} textStyle={codeTextStyle} {...ctx} />
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}
+
+function TextBlock({
+  node,
+  style,
+  accessibilityRole,
+  ...ctx
+}: RenderContext & {
+  node:
+    | ParagraphElement
+    | Heading1Element
+    | Heading2Element
+    | { align?: TextAlign | null; children: RichContentInlineNode[] };
+  style: TextStyle;
+  accessibilityRole?: 'header' | 'text';
+}): React.ReactElement {
+  return (
+    <Text
+      style={[baseText(ctx.theme), style, alignStyle(node.align)]}
+      testID="userflow-text-block"
+      accessibilityRole={accessibilityRole}
+    >
+      <InlineChildren nodes={node.children} {...ctx} />
+    </Text>
+  );
+}
+
+function InlineChildren({
+  nodes,
+  textStyle,
+  ...ctx
+}: RenderContext & {
+  nodes: RichContentInlineNode[];
+  textStyle?: TextStyle;
+}): React.ReactElement {
+  return (
+    <>
+      {nodes.map((node, idx) =>
+        isText(node) ? (
+          <RenderedText
+            key={idx}
+            node={node}
+            theme={ctx.theme}
+            {...(textStyle !== undefined ? { textStyle } : {})}
+          />
+        ) : node.type === 'link' ? (
+          <RenderedLink
+            key={idx}
+            node={node}
+            {...(textStyle !== undefined ? { textStyle } : {})}
+            {...ctx}
+          />
+        ) : node.type === 'attribute' ? (
+          <RenderedAttribute
+            key={idx}
+            node={node}
+            theme={ctx.theme}
+            lookupAttribute={ctx.lookupAttribute}
+            {...(textStyle !== undefined ? { textStyle } : {})}
+          />
+        ) : null,
+      )}
+    </>
+  );
+}
+
+function RenderedText({
+  node,
+  theme,
+  textStyle,
+}: {
+  node: AbstractRichContentTextFormatting & { text: string };
+  theme: ThemeFragment;
+  textStyle?: TextStyle;
+}): React.ReactElement | null {
+  if (!node.text) return null;
+  if (node.code) {
+    return (
+      <View style={inlineCodeChrome(theme)} testID="userflow-inline-code">
+        <Text style={[baseText(theme), textStyle, inlineCodeTextStyle(node, theme)]}>
+          {node.text}
+        </Text>
+      </View>
+    );
+  }
+  return <Text style={[baseText(theme), textStyle, markStyle(node)]}>{node.text}</Text>;
+}
+
+function RenderedAttribute({
+  node,
+  theme,
+  lookupAttribute,
+  textStyle,
+}: {
+  node: AttributeElement;
+  theme: ThemeFragment;
+  lookupAttribute: LookupAttribute;
+  textStyle?: TextStyle;
+}): React.ReactElement | null {
+  const value = getAttributeNodeValue(node, lookupAttribute);
+  if (!value) return null;
+  if (node.code) {
+    return (
+      <View style={inlineCodeChrome(theme)} testID="userflow-inline-code">
+        <Text style={[baseText(theme), textStyle, inlineCodeTextStyle(node, theme)]}>{value}</Text>
+      </View>
+    );
+  }
+  return <Text style={[baseText(theme), textStyle, markStyle(node)]}>{value}</Text>;
+}
+
+function RenderedLink({
+  node,
+  textStyle,
+  ...ctx
+}: RenderContext & { node: LinkElement; textStyle?: TextStyle }): React.ReactElement {
+  const href = stringifyPlaintextDoc(node.href, { lookupAttribute: ctx.lookupAttribute });
+  return (
+    <Text
+      style={[baseText(ctx.theme), textStyle, styles.link]}
+      accessibilityRole="link"
+      accessibilityHint={href || undefined}
+      onPress={() => {
+        void openSafeUrl(href);
+      }}
+    >
+      <InlineChildren
+        nodes={node.children}
+        {...(textStyle !== undefined ? { textStyle } : {})}
+        {...ctx}
+      />
+    </Text>
+  );
+}
+
+function RenderedImage({
+  node,
+  ...ctx
+}: RenderContext & { node: ImageElement }): React.ReactElement | null {
+  const [status, setStatus] = React.useState<'loading' | 'loaded' | 'error'>('loading');
+  const rawSrc =
+    typeof node.src === 'string'
+      ? node.src
+      : stringifyPlaintextDoc(node.src, { lookupAttribute: ctx.lookupAttribute });
+  const src = interpolateVariables(rawSrc, (fqn: string) =>
+    encodeURIComponent(ctx.lookupAttribute(fqn) || ''),
+  );
+  if (!src) return null;
+
+  const { wrapperWidth, aspectRatio } = resolveImageFrame(node);
+
+  const framed = (
+    <View
+      style={[styles.imageFrame, { width: wrapperWidth }, alignSelf(node.align)]}
+      testID="userflow-image-frame"
+    >
+      {status === 'loading' ? (
+        <View
+          testID="userflow-image-placeholder"
+          style={[
+            styles.imagePlaceholder,
+            aspectRatio != null ? { aspectRatio } : styles.imagePlaceholderFallback,
+          ]}
+        />
+      ) : null}
+      {status === 'error' ? (
+        <View
+          testID="userflow-image-error"
+          style={[
+            styles.imageError,
+            aspectRatio != null ? { aspectRatio } : styles.imagePlaceholderFallback,
+          ]}
+        >
+          <Text style={styles.imageErrorText}>Image unavailable</Text>
+        </View>
+      ) : (
+        <Image
+          source={{ uri: src, cache: 'force-cache' as const }}
+          style={[
+            styles.image,
+            aspectRatio != null ? { aspectRatio } : null,
+            status === 'loading' ? styles.imageHiddenWhileLoading : null,
+          ]}
+          resizeMode="contain"
+          accessibilityRole="image"
+          accessibilityLabel="Image"
+          accessibilityIgnoresInvertColors
+          testID="userflow-image"
+          onLoad={() => setStatus('loaded')}
+          onError={() => setStatus('error')}
+        />
+      )}
+    </View>
+  );
+
+  if (node.hasLink && node.href) {
+    const href = stringifyPlaintextDoc(node.href, { lookupAttribute: ctx.lookupAttribute });
+    return (
+      <Pressable
+        accessibilityRole="link"
+        accessibilityLabel="Image link"
+        onPress={() => {
+          void openSafeUrl(href);
+        }}
+      >
+        {framed}
+      </Pressable>
+    );
+  }
+
+  return framed;
+}
+
+function UnorderedList({
+  node,
+  ...ctx
+}: RenderContext & { node: UnorderedListElement }): React.ReactElement {
+  return (
+    <View style={styles.list}>
+      {node.children.map((item, idx) => (
+        <ListRow key={idx} marker="•" item={item} {...ctx} />
+      ))}
+    </View>
+  );
+}
+
+function OrderedList({
+  node,
+  ...ctx
+}: RenderContext & { node: OrderedListElement }): React.ReactElement {
+  return (
+    <View style={styles.list}>
+      {node.children.map((item, idx) => (
+        <ListRow key={idx} marker={`${idx + 1}.`} item={item} {...ctx} />
+      ))}
+    </View>
+  );
+}
+
+function ListRow({
+  marker,
+  item,
+  ...ctx
+}: RenderContext & { marker: string; item: ListItemElement }): React.ReactElement {
+  return (
+    <View style={styles.listItem}>
+      <Text style={[baseText(ctx.theme), styles.listMarker]}>{marker}</Text>
+      <Text style={[baseText(ctx.theme), styles.listBody]}>
+        <InlineChildren nodes={item.children} {...ctx} />
+      </Text>
+    </View>
+  );
+}
+
+function RenderedButtonGroup({
+  node,
+  ...ctx
+}: RenderContext & { node: ButtonGroupElement }): React.ReactElement {
+  return (
+    <View style={[styles.buttonGroup, justifyContent(node.align ?? ctx.defaultButtonsAlign)]}>
+      {node.children.map((child, idx) => (
+        <RenderedButton key={idx} node={child} {...ctx} />
+      ))}
+    </View>
+  );
+}
+
+function RenderedButton({
+  node,
+  ...ctx
+}: RenderContext & { node: ButtonElement }): React.ReactElement | null {
+  const button = ctx.buttons.find((b) => b.cvid === node.cvid);
+  if (!button) return null;
+  return (
+    <StepButton
+      button={button}
+      theme={ctx.theme}
+      sessionData={ctx.sessionData}
+      onActions={ctx.onActions}
+    />
+  );
+}
+
+function baseText(theme: ThemeFragment): TextStyle {
+  return {
+    color: theme.fontColor,
+    fontFamily: theme.fontFamily || undefined,
+    fontSize: theme.fontSize,
+  };
+}
+
+function markStyle(node: AbstractRichContentTextFormatting): TextStyle {
+  return {
+    fontWeight: node.bold ? '700' : undefined,
+    fontStyle: node.italic ? 'italic' : undefined,
+    textDecorationLine: textDecoration(node),
+    fontSize: node.small ? 12 : node.sup ? 10 : undefined,
+    color: node.color || undefined,
+    // Inline `code` uses View chrome via RenderedText / RenderedAttribute.
+    fontFamily: node.code ? monoFontFamily() : undefined,
+  };
+}
+
+/** View wrapper so inline code padding/radius work reliably on Android. */
+function inlineCodeChrome(theme: ThemeFragment): ViewStyle {
+  return {
+    backgroundColor: foregroundAlpha(theme.fontColor, WEB_CODE_BG_ALPHA),
+    borderRadius: (theme.fontSize ?? 14) * WEB_CODE_RADIUS_SCALE,
+    paddingVertical: WEB_PADDING_2,
+    paddingHorizontal: WEB_PADDING_4,
+  };
+}
+
+function inlineCodeTextStyle(
+  node: AbstractRichContentTextFormatting,
+  theme: ThemeFragment,
+): TextStyle {
+  const fontSize = (theme.fontSize ?? 14) * WEB_CODE_FONT_SCALE;
+  return {
+    fontWeight: node.bold ? '700' : undefined,
+    fontStyle: node.italic ? 'italic' : undefined,
+    textDecorationLine: textDecoration(node),
+    fontFamily: monoFontFamily(),
+    fontSize: node.small ? 12 : node.sup ? 10 : fontSize,
+    color: node.color || theme.fontColor,
+  };
+}
+
+function monoFontFamily(): string {
+  return Platform.select({ ios: 'Menlo', android: 'monospace', default: 'monospace' }) as string;
+}
+
+function textDecoration(node: AbstractRichContentTextFormatting): TextStyle['textDecorationLine'] {
+  if (node.underline && node.strikeThrough) return 'underline line-through';
+  if (node.underline) return 'underline';
+  if (node.strikeThrough) return 'line-through';
+  return undefined;
+}
+
+function alignStyle(align: TextAlign | null | undefined): TextStyle {
+  if (!align) return {};
+  return { textAlign: align };
+}
+
+function alignSelf(align: string | null | undefined): ViewStyle {
+  if (align === 'center') return { alignSelf: 'center' };
+  if (align === 'right') return { alignSelf: 'flex-end' };
+  if (align === 'left') return { alignSelf: 'flex-start' };
+  return { alignSelf: 'stretch' };
+}
+
+function justifyContent(align: JustifyContent | undefined): ViewStyle {
+  switch (align) {
+    case 'end':
+      return { justifyContent: 'flex-end' };
+    case 'center':
+      return { justifyContent: 'center' };
+    case 'space-between':
+      return { justifyContent: 'space-between' };
+    case 'space-around':
+      return { justifyContent: 'space-around' };
+    case 'space-evenly':
+      return { justifyContent: 'space-evenly' };
+    case 'start':
+    default:
+      return { justifyContent: 'flex-start' };
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    // Keep in sync with ROOT_CONTENT_GAP (quote/code margin compensates for this).
+    gap: ROOT_CONTENT_GAP,
+  },
+  block: {
+    gap: ROOT_CONTENT_GAP,
+  },
+  paragraph: {
+    marginBottom: 4,
+  },
+  heading1: {
+    fontSize: 22,
+    fontWeight: '700',
+    marginBottom: 6,
+  },
+  heading2: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 4,
+  },
+  // mirrors userflowjs bubble-frame.styl blockquote (RTL-safe start edge)
+  quote: {
+    borderStartWidth: 2,
+    paddingVertical: WEB_PADDING_4,
+    paddingHorizontal: WEB_PADDING_16,
+    minHeight: WEB_LINE_HEIGHT_FALLBACK,
+  },
+  // mirrors userflowjs bubble-frame.styl pre > code
+  codeBlock: {
+    padding: WEB_PADDING_8,
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+  imageFrame: {
+    maxWidth: '100%',
+    marginVertical: 8,
+    position: 'relative',
+  },
+  image: {
+    width: '100%',
+  },
+  imageHiddenWhileLoading: {
+    opacity: 0,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+  },
+  imagePlaceholder: {
+    width: '100%',
+    backgroundColor: 'rgba(0,0,0,0.06)',
+    borderRadius: 4,
+  },
+  imagePlaceholderFallback: {
+    minHeight: 120,
+  },
+  imageError: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.04)',
+    borderRadius: 4,
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+  },
+  imageErrorText: {
+    fontSize: 12,
+    opacity: 0.65,
+  },
+  list: {
+    gap: 4,
+    marginVertical: 4,
+  },
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  listMarker: {
+    minWidth: 18,
+  },
+  listBody: {
+    flex: 1,
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 16,
+  },
+});