@userflow-tech/react-native 0.1.0

package/lib/module/content/RichContentRenderer.js

@@ -0,0 +1,670 @@
+"use strict";
+
+import { interpolateVariables } from '@userflow-tech/core';
+import * as React from 'react';
+import { Image, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { StepButton } from "./StepButton.js";
+import { deserializeRichContentDoc, getAttributeNodeValue, isText, stringifyPlaintextDoc } from "./deserialize.js";
+import { resolveImageFrame } from "./imageLayout.js";
+import { migrateFlowBlocksIntoContent } from "./migrateFlowBlocks.js";
+import { openSafeUrl } from "./openSafeUrl.js";
+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.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function RichContentRenderer({
+  content,
+  buttons,
+  theme,
+  sessionData,
+  lookupAttribute,
+  onActions,
+  defaultButtonsAlign
+}) {
+  const doc = React.useMemo(() => {
+    const raw = typeof content === 'string' || content == null ? deserializeRichContentDoc(content) : content;
+    return migrateFlowBlocksIntoContent(raw, {
+      buttons
+    });
+  }, [content, buttons]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: "userflow-rich-content",
+    style: styles.root,
+    children: /*#__PURE__*/_jsx(RenderedNodeList, {
+      nodes: doc.children,
+      buttons: buttons,
+      theme: theme,
+      sessionData: sessionData,
+      lookupAttribute: lookupAttribute,
+      onActions: onActions,
+      ...(defaultButtonsAlign !== undefined ? {
+        defaultButtonsAlign
+      } : {})
+    })
+  });
+}
+function RenderedNodeList({
+  nodes,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: nodes.map((node, idx) => isText(node) ? /*#__PURE__*/_jsx(RenderedText, {
+      node: node,
+      theme: ctx.theme
+    }, idx) : /*#__PURE__*/_jsx(RenderedElement, {
+      node: node,
+      isLast: isLastPaintedSibling(nodes, idx),
+      ...ctx
+    }, idx))
+  });
+}
+
+/** Nodes that paint nothing still occupy the children array — skip them for last-sibling margin. */
+function paintsAsBlock(node) {
+  if (isText(node)) return Boolean(node.text);
+  const type = node.type;
+  return type !== 'video' && type !== 'question';
+}
+function isLastPaintedSibling(nodes, idx) {
+  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
+}) {
+  switch (node.type) {
+    case 'paragraph':
+      return /*#__PURE__*/_jsx(TextBlock, {
+        node: node,
+        style: styles.paragraph,
+        ...ctx
+      });
+    case 'heading1':
+      return /*#__PURE__*/_jsx(TextBlock, {
+        node: node,
+        style: styles.heading1,
+        accessibilityRole: "header",
+        ...ctx
+      });
+    case 'heading2':
+      return /*#__PURE__*/_jsx(TextBlock, {
+        node: node,
+        style: styles.heading2,
+        accessibilityRole: "header",
+        ...ctx
+      });
+    case 'quote':
+      return /*#__PURE__*/_jsx(RenderedQuote, {
+        node: node,
+        isLast: isLast,
+        ...ctx
+      });
+    case 'code-block':
+      return /*#__PURE__*/_jsx(RenderedCodeBlock, {
+        node: node,
+        isLast: isLast,
+        ...ctx
+      });
+    case 'unordered-list':
+      return /*#__PURE__*/_jsx(UnorderedList, {
+        node: node,
+        ...ctx
+      });
+    case 'ordered-list':
+      return /*#__PURE__*/_jsx(OrderedList, {
+        node: node,
+        ...ctx
+      });
+    case 'list-item':
+      return /*#__PURE__*/_jsx(InlineChildren, {
+        nodes: node.children,
+        ...ctx
+      });
+    case 'link':
+      return /*#__PURE__*/_jsx(RenderedLink, {
+        node: node,
+        ...ctx
+      });
+    case 'attribute':
+      return /*#__PURE__*/_jsx(RenderedAttribute, {
+        node: node,
+        theme: ctx.theme,
+        lookupAttribute: ctx.lookupAttribute
+      });
+    case 'image':
+      return /*#__PURE__*/_jsx(RenderedImage, {
+        node: node,
+        ...ctx
+      });
+    case 'button-group':
+      return /*#__PURE__*/_jsx(RenderedButtonGroup, {
+        node: node,
+        ...ctx
+      });
+    case 'button':
+      return /*#__PURE__*/_jsx(RenderedButton, {
+        node: node,
+        ...ctx
+      });
+    case 'video':
+    case 'question':
+      return null;
+    case 'column':
+    case 'column-group':
+    case 'container':
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.block,
+        children: /*#__PURE__*/_jsx(RenderedNodeList, {
+          nodes: node.children,
+          ...ctx
+        })
+      });
+    default:
+      return null;
+  }
+}
+
+/** mirrors userflowjs bubble-frame.styl blockquote */
+function RenderedQuote({
+  node,
+  isLast,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    testID: "userflow-quote",
+    style: [styles.quote, {
+      borderStartColor: foregroundAlpha(ctx.theme.fontColor, WEB_QUOTE_BORDER_ALPHA),
+      marginBottom: blockMarginBelow(isLast)
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [baseText(ctx.theme), alignStyle(node.align)],
+      children: /*#__PURE__*/_jsx(InlineChildren, {
+        nodes: node.children,
+        ...ctx
+      })
+    })
+  });
+}
+
+/** mirrors userflowjs bubble-frame.styl pre > code */
+function RenderedCodeBlock({
+  node,
+  isLast,
+  ...ctx
+}) {
+  const fontSize = (ctx.theme.fontSize ?? 14) * WEB_CODE_FONT_SCALE;
+  const codeTextStyle = {
+    color: ctx.theme.fontColor,
+    fontFamily: monoFontFamily(),
+    fontSize
+  };
+  return /*#__PURE__*/_jsx(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)
+    }],
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      nestedScrollEnabled: true,
+      directionalLockEnabled: true,
+      bounces: false,
+      showsHorizontalScrollIndicator: true,
+      children: /*#__PURE__*/_jsx(Text, {
+        selectable: true,
+        style: codeTextStyle,
+        children: /*#__PURE__*/_jsx(InlineChildren, {
+          nodes: node.children,
+          textStyle: codeTextStyle,
+          ...ctx
+        })
+      })
+    })
+  });
+}
+function TextBlock({
+  node,
+  style,
+  accessibilityRole,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [baseText(ctx.theme), style, alignStyle(node.align)],
+    testID: "userflow-text-block",
+    accessibilityRole: accessibilityRole,
+    children: /*#__PURE__*/_jsx(InlineChildren, {
+      nodes: node.children,
+      ...ctx
+    })
+  });
+}
+function InlineChildren({
+  nodes,
+  textStyle,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: nodes.map((node, idx) => isText(node) ? /*#__PURE__*/_jsx(RenderedText, {
+      node: node,
+      theme: ctx.theme,
+      ...(textStyle !== undefined ? {
+        textStyle
+      } : {})
+    }, idx) : node.type === 'link' ? /*#__PURE__*/_jsx(RenderedLink, {
+      node: node,
+      ...(textStyle !== undefined ? {
+        textStyle
+      } : {}),
+      ...ctx
+    }, idx) : node.type === 'attribute' ? /*#__PURE__*/_jsx(RenderedAttribute, {
+      node: node,
+      theme: ctx.theme,
+      lookupAttribute: ctx.lookupAttribute,
+      ...(textStyle !== undefined ? {
+        textStyle
+      } : {})
+    }, idx) : null)
+  });
+}
+function RenderedText({
+  node,
+  theme,
+  textStyle
+}) {
+  if (!node.text) return null;
+  if (node.code) {
+    return /*#__PURE__*/_jsx(View, {
+      style: inlineCodeChrome(theme),
+      testID: "userflow-inline-code",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [baseText(theme), textStyle, inlineCodeTextStyle(node, theme)],
+        children: node.text
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    style: [baseText(theme), textStyle, markStyle(node)],
+    children: node.text
+  });
+}
+function RenderedAttribute({
+  node,
+  theme,
+  lookupAttribute,
+  textStyle
+}) {
+  const value = getAttributeNodeValue(node, lookupAttribute);
+  if (!value) return null;
+  if (node.code) {
+    return /*#__PURE__*/_jsx(View, {
+      style: inlineCodeChrome(theme),
+      testID: "userflow-inline-code",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [baseText(theme), textStyle, inlineCodeTextStyle(node, theme)],
+        children: value
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    style: [baseText(theme), textStyle, markStyle(node)],
+    children: value
+  });
+}
+function RenderedLink({
+  node,
+  textStyle,
+  ...ctx
+}) {
+  const href = stringifyPlaintextDoc(node.href, {
+    lookupAttribute: ctx.lookupAttribute
+  });
+  return /*#__PURE__*/_jsx(Text, {
+    style: [baseText(ctx.theme), textStyle, styles.link],
+    accessibilityRole: "link",
+    accessibilityHint: href || undefined,
+    onPress: () => {
+      void openSafeUrl(href);
+    },
+    children: /*#__PURE__*/_jsx(InlineChildren, {
+      nodes: node.children,
+      ...(textStyle !== undefined ? {
+        textStyle
+      } : {}),
+      ...ctx
+    })
+  });
+}
+function RenderedImage({
+  node,
+  ...ctx
+}) {
+  const [status, setStatus] = React.useState('loading');
+  const rawSrc = typeof node.src === 'string' ? node.src : stringifyPlaintextDoc(node.src, {
+    lookupAttribute: ctx.lookupAttribute
+  });
+  const src = interpolateVariables(rawSrc, fqn => encodeURIComponent(ctx.lookupAttribute(fqn) || ''));
+  if (!src) return null;
+  const {
+    wrapperWidth,
+    aspectRatio
+  } = resolveImageFrame(node);
+  const framed = /*#__PURE__*/_jsxs(View, {
+    style: [styles.imageFrame, {
+      width: wrapperWidth
+    }, alignSelf(node.align)],
+    testID: "userflow-image-frame",
+    children: [status === 'loading' ? /*#__PURE__*/_jsx(View, {
+      testID: "userflow-image-placeholder",
+      style: [styles.imagePlaceholder, aspectRatio != null ? {
+        aspectRatio
+      } : styles.imagePlaceholderFallback]
+    }) : null, status === 'error' ? /*#__PURE__*/_jsx(View, {
+      testID: "userflow-image-error",
+      style: [styles.imageError, aspectRatio != null ? {
+        aspectRatio
+      } : styles.imagePlaceholderFallback],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.imageErrorText,
+        children: "Image unavailable"
+      })
+    }) : /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: src,
+        cache: 'force-cache'
+      },
+      style: [styles.image, aspectRatio != null ? {
+        aspectRatio
+      } : null, status === 'loading' ? styles.imageHiddenWhileLoading : null],
+      resizeMode: "contain",
+      accessibilityRole: "image",
+      accessibilityLabel: "Image",
+      accessibilityIgnoresInvertColors: true,
+      testID: "userflow-image",
+      onLoad: () => setStatus('loaded'),
+      onError: () => setStatus('error')
+    })]
+  });
+  if (node.hasLink && node.href) {
+    const href = stringifyPlaintextDoc(node.href, {
+      lookupAttribute: ctx.lookupAttribute
+    });
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "link",
+      accessibilityLabel: "Image link",
+      onPress: () => {
+        void openSafeUrl(href);
+      },
+      children: framed
+    });
+  }
+  return framed;
+}
+function UnorderedList({
+  node,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.list,
+    children: node.children.map((item, idx) => /*#__PURE__*/_jsx(ListRow, {
+      marker: "\u2022",
+      item: item,
+      ...ctx
+    }, idx))
+  });
+}
+function OrderedList({
+  node,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.list,
+    children: node.children.map((item, idx) => /*#__PURE__*/_jsx(ListRow, {
+      marker: `${idx + 1}.`,
+      item: item,
+      ...ctx
+    }, idx))
+  });
+}
+function ListRow({
+  marker,
+  item,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.listItem,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [baseText(ctx.theme), styles.listMarker],
+      children: marker
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [baseText(ctx.theme), styles.listBody],
+      children: /*#__PURE__*/_jsx(InlineChildren, {
+        nodes: item.children,
+        ...ctx
+      })
+    })]
+  });
+}
+function RenderedButtonGroup({
+  node,
+  ...ctx
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.buttonGroup, justifyContent(node.align ?? ctx.defaultButtonsAlign)],
+    children: node.children.map((child, idx) => /*#__PURE__*/_jsx(RenderedButton, {
+      node: child,
+      ...ctx
+    }, idx))
+  });
+}
+function RenderedButton({
+  node,
+  ...ctx
+}) {
+  const button = ctx.buttons.find(b => b.cvid === node.cvid);
+  if (!button) return null;
+  return /*#__PURE__*/_jsx(StepButton, {
+    button: button,
+    theme: ctx.theme,
+    sessionData: ctx.sessionData,
+    onActions: ctx.onActions
+  });
+}
+function baseText(theme) {
+  return {
+    color: theme.fontColor,
+    fontFamily: theme.fontFamily || undefined,
+    fontSize: theme.fontSize
+  };
+}
+function markStyle(node) {
+  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) {
+  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, theme) {
+  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() {
+  return Platform.select({
+    ios: 'Menlo',
+    android: 'monospace',
+    default: 'monospace'
+  });
+}
+function textDecoration(node) {
+  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) {
+  if (!align) return {};
+  return {
+    textAlign: align
+  };
+}
+function alignSelf(align) {
+  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) {
+  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
+  }
+});
+//# sourceMappingURL=RichContentRenderer.js.map