@webority-technologies/mobile-ui 0.0.1 → 0.0.2

package/lib/commonjs/components/Markdown/Markdown.js

@@ -0,0 +1,274 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Markdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../Skeleton/index.js");
+var _parse = require("./parse.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const renderInline = (nodes, theme, onLinkPress, keyPrefix = 'i') => nodes.map((node, index) => {
+  const key = `${keyPrefix}-${index}`;
+  switch (node.type) {
+    case 'text':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        children: node.value
+      }, key);
+    case 'strong':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          fontWeight: theme.typography.fontWeight.bold
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    case 'em':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          fontStyle: 'italic'
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    case 'strike':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          textDecorationLine: 'line-through'
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    case 'code':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          fontFamily: MONO,
+          backgroundColor: theme.colors.background.secondary,
+          color: theme.colors.text.primary
+        },
+        children: node.value
+      }, key);
+    case 'link':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        accessibilityRole: "link",
+        onPress: () => onLinkPress(node.href),
+        style: {
+          color: theme.colors.text.link,
+          textDecorationLine: 'underline'
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    default:
+      return null;
+  }
+});
+
+/** The theme carries no monospace family, and code has to look like code. */
+const MONO = _reactNative.Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace'
+});
+
+/** The theme's scale is xs/sm/base/lg/xl/2xl/3xl/4xl — no md, no xxl. */
+const HEADING_SCALE = {
+  1: '3xl',
+  2: '2xl',
+  3: 'xl',
+  4: 'lg',
+  5: 'base',
+  6: 'sm'
+};
+
+/**
+ * Renders a small, deliberate subset of markdown using the theme's own type
+ * scale and colours, with no dependency.
+ *
+ * It exists because Expo has no markdown module and the alternative on npm has
+ * not shipped since 2022. What it covers is what our content contains: release
+ * notes, help text and descriptions written by people. Nested lists, tables and
+ * inline HTML are out of scope on purpose — see parse.ts.
+ */
+const Markdown = ({
+  children,
+  onLinkPress,
+  loading = false,
+  style,
+  textStyle,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => createStyles(theme), [theme]);
+  const blocks = (0, _react.useMemo)(() => (0, _parse.parseMarkdown)(children ?? ''), [children]);
+  const handleLink = href => {
+    if (onLinkPress) {
+      onLinkPress(href);
+      return;
+    }
+    // Rejections are swallowed: a link the OS cannot open is not a crash, and
+    // there is no useful recovery from inside a text run.
+    void _reactNative.Linking.openURL(href).catch(() => undefined);
+  };
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkdownSkeleton, {
+      style: style,
+      testID: testID
+    });
+  }
+  if (blocks.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    children: blocks.map((block, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkdownBlock, {
+      block: block,
+      theme: theme,
+      styles: styles,
+      textStyle: textStyle,
+      onLinkPress: handleLink
+    }, `b-${index}`))
+  });
+};
+exports.Markdown = Markdown;
+Markdown.displayName = 'Markdown';
+const MarkdownBlock = ({
+  block,
+  theme,
+  styles,
+  textStyle,
+  onLinkPress
+}) => {
+  switch (block.type) {
+    case 'heading':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        accessibilityRole: "header",
+        style: [styles.block, {
+          fontSize: theme.typography.fontSize[HEADING_SCALE[block.level]],
+          fontWeight: theme.typography.fontWeight.semibold,
+          color: theme.colors.text.primary
+        }, textStyle],
+        children: renderInline(block.children, theme, onLinkPress)
+      });
+    case 'paragraph':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.block, styles.body, textStyle],
+        children: renderInline(block.children, theme, onLinkPress)
+      });
+    case 'listItem':
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.listRow, {
+          marginLeft: block.depth * theme.spacing.md
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.body, styles.bullet, textStyle],
+          children: block.ordered ? `${block.index}.` : '•'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.body, styles.listText, textStyle],
+          children: renderInline(block.children, theme, onLinkPress)
+        })]
+      });
+    case 'quote':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.quote,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.body, styles.quoteText, textStyle],
+          children: renderInline(block.children, theme, onLinkPress)
+        })
+      });
+    case 'codeBlock':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.codeBlock,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.codeText,
+          children: block.value
+        })
+      });
+    case 'rule':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.rule
+      });
+    default:
+      return null;
+  }
+};
+const MarkdownSkeleton = ({
+  style,
+  testID
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  style: style,
+  testID: testID,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    shape: "text",
+    width: "70%",
+    height: 20,
+    style: {
+      marginBottom: 8
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    shape: "text",
+    width: "100%",
+    height: 14,
+    style: {
+      marginBottom: 6
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    shape: "text",
+    width: "92%",
+    height: 14,
+    style: {
+      marginBottom: 6
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+    shape: "text",
+    width: "60%",
+    height: 14
+  })]
+});
+const createStyles = theme => _reactNative.StyleSheet.create({
+  block: {
+    marginBottom: theme.spacing.sm
+  },
+  body: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.text.primary,
+    lineHeight: theme.typography.fontSize.base * 1.5
+  },
+  listRow: {
+    flexDirection: 'row',
+    marginBottom: theme.spacing.xs
+  },
+  bullet: {
+    width: theme.spacing.lg
+  },
+  listText: {
+    flex: 1
+  },
+  quote: {
+    borderLeftWidth: 3,
+    borderLeftColor: theme.colors.border.secondary,
+    paddingLeft: theme.spacing.sm,
+    marginBottom: theme.spacing.sm
+  },
+  quoteText: {
+    color: theme.colors.text.secondary,
+    fontStyle: 'italic'
+  },
+  codeBlock: {
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.radius.sm,
+    padding: theme.spacing.sm,
+    marginBottom: theme.spacing.sm
+  },
+  codeText: {
+    fontFamily: MONO,
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text.primary
+  },
+  rule: {
+    height: _reactNative.StyleSheet.hairlineWidth,
+    backgroundColor: theme.colors.border.primary,
+    marginVertical: theme.spacing.md
+  }
+});
+//# sourceMappingURL=Markdown.js.map

package/lib/commonjs/components/Markdown/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Markdown", {
+  enumerable: true,
+  get: function () {
+    return _Markdown.Markdown;
+  }
+});
+var _Markdown = require("./Markdown.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Markdown/parse.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseMarkdown = exports.parseInline = void 0;
+/**
+ * A deliberately small CommonMark subset, parsed without a dependency.
+ *
+ * The scope is what our own content actually contains — release notes, help
+ * text, descriptions written by people in a web editor — not a spec-complete
+ * renderer. Nested lists, tables, footnotes, HTML blocks and reference links
+ * are out of scope on purpose: supporting them means a parser nobody here can
+ * maintain, and content that needs them is a sign it should not be markdown.
+ *
+ * Kept separate from the component so the grammar can be tested as data, with
+ * no rendering involved.
+ */
+
+/**
+ * Inline parsing is a single left-to-right scan rather than nested regex
+ * replacement: replacement cannot express "a `code` span suppresses every other
+ * marker inside it", which is the one rule that makes documentation readable.
+ */
+const INLINE_PATTERNS = [
+// Code first: everything inside a span is literal.
+{
+  re: /^`([^`]+)`/,
+  build: m => ({
+    type: 'code',
+    value: m[1]
+  })
+}, {
+  re: /^\[([^\]]*)\]\(([^)\s]+)\)/,
+  build: (m, parse) => ({
+    type: 'link',
+    href: m[2],
+    children: parse(m[1])
+  })
+},
+// Non-greedy across ANY character, not "everything except the delimiter":
+// the excluding form cannot match `**bold with *italic* inside**`, because
+// the content legitimately contains the single-character marker. `**` is
+// listed before `*` so the longer delimiter always wins.
+{
+  re: /^\*\*([\s\S]+?)\*\*/,
+  build: (m, parse) => ({
+    type: 'strong',
+    children: parse(m[1])
+  })
+}, {
+  re: /^__([\s\S]+?)__/,
+  build: (m, parse) => ({
+    type: 'strong',
+    children: parse(m[1])
+  })
+}, {
+  re: /^~~([\s\S]+?)~~/,
+  build: (m, parse) => ({
+    type: 'strike',
+    children: parse(m[1])
+  })
+}, {
+  re: /^\*([^*\n]+)\*/,
+  build: (m, parse) => ({
+    type: 'em',
+    children: parse(m[1])
+  })
+}, {
+  re: /^_([^_\n]+)_/,
+  build: (m, parse) => ({
+    type: 'em',
+    children: parse(m[1])
+  })
+}];
+const parseInline = input => {
+  const out = [];
+  let buffer = '';
+  let rest = input;
+  const flush = () => {
+    if (buffer) {
+      out.push({
+        type: 'text',
+        value: buffer
+      });
+      buffer = '';
+    }
+  };
+  while (rest.length > 0) {
+    // A backslash escapes the next character, so a literal asterisk is writable.
+    if (rest.startsWith('\\') && rest.length > 1) {
+      buffer += rest[1];
+      rest = rest.slice(2);
+      continue;
+    }
+    let matched = false;
+    for (const {
+      re,
+      build
+    } of INLINE_PATTERNS) {
+      const m = re.exec(rest);
+      if (m) {
+        flush();
+        out.push(build(m, parseInline));
+        rest = rest.slice(m[0].length);
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      buffer += rest[0];
+      rest = rest.slice(1);
+    }
+  }
+  flush();
+  return out;
+};
+
+/**
+ * Indent to nesting depth. Two spaces per level is the CommonMark-ish
+ * convention people actually type; a tab counts as one level. Depth is capped
+ * because the renderer indents by depth and a runaway indent would push the
+ * text off screen rather than fail visibly.
+ */
+exports.parseInline = parseInline;
+const MAX_LIST_DEPTH = 4;
+const depthOf = indent => {
+  const spaces = indent.replace(/\t/g, '  ').length;
+  return Math.min(Math.floor(spaces / 2), MAX_LIST_DEPTH);
+};
+const HEADING = /^(#{1,6})\s+(.*)$/;
+const UNORDERED = /^(\s*)[-*+]\s+(.*)$/;
+const ORDERED = /^(\s*)(\d+)[.)]\s+(.*)$/;
+const QUOTE = /^\s*>\s?(.*)$/;
+const RULE = /^\s*([-*_])\s*(?:\1\s*){2,}$/;
+const FENCE = /^\s*```\s*(\S+)?\s*$/;
+const parseMarkdown = source => {
+  const blocks = [];
+  const lines = (source ?? '').replace(/\r\n?/g, '\n').split('\n');
+  let paragraph = [];
+  const flushParagraph = () => {
+    if (paragraph.length > 0) {
+      blocks.push({
+        type: 'paragraph',
+        children: parseInline(paragraph.join(' ').trim())
+      });
+      paragraph = [];
+    }
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fence = FENCE.exec(line);
+    if (fence) {
+      flushParagraph();
+      const body = [];
+      i++;
+      while (i < lines.length && !FENCE.test(lines[i])) {
+        body.push(lines[i]);
+        i++;
+      }
+      blocks.push({
+        type: 'codeBlock',
+        value: body.join('\n'),
+        language: fence[1]
+      });
+      continue;
+    }
+    if (line.trim() === '') {
+      flushParagraph();
+      continue;
+    }
+    // Checked before the list patterns: `---` is also a valid bullet to them.
+    if (RULE.test(line)) {
+      flushParagraph();
+      blocks.push({
+        type: 'rule'
+      });
+      continue;
+    }
+    const heading = HEADING.exec(line);
+    if (heading) {
+      flushParagraph();
+      blocks.push({
+        type: 'heading',
+        level: heading[1].length,
+        children: parseInline(heading[2])
+      });
+      continue;
+    }
+    const ordered = ORDERED.exec(line);
+    if (ordered) {
+      flushParagraph();
+      blocks.push({
+        type: 'listItem',
+        ordered: true,
+        index: Number(ordered[2]),
+        depth: depthOf(ordered[1]),
+        children: parseInline(ordered[3])
+      });
+      continue;
+    }
+    const unordered = UNORDERED.exec(line);
+    if (unordered) {
+      flushParagraph();
+      blocks.push({
+        type: 'listItem',
+        ordered: false,
+        index: 0,
+        depth: depthOf(unordered[1]),
+        children: parseInline(unordered[2])
+      });
+      continue;
+    }
+    const quote = QUOTE.exec(line);
+    if (quote) {
+      flushParagraph();
+      blocks.push({
+        type: 'quote',
+        children: parseInline(quote[1])
+      });
+      continue;
+    }
+    paragraph.push(line.trim());
+  }
+  flushParagraph();
+  return blocks;
+};
+exports.parseMarkdown = parseMarkdown;
+//# sourceMappingURL=parse.js.map

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -148,6 +148,11 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     if (previous === focusedIndex) {
       return;
     }
+    // Equivalent-mutant note: this branch is unreachable, so removing it
+    // cannot change behaviour. Reaching here already proves
+    // `previous !== focusedIndex` (the check above returned otherwise), so
+    // `previous === -1 && focusedIndex === -1` — which requires them equal —
+    // can never be true.
     if (previous === -1 && focusedIndex === -1) {
       return;
     }

package/lib/commonjs/components/OptionSheet/OptionSheet.js

@@ -36,7 +36,7 @@ const OptionSheet = props => {
     title,
     options,
     labelOf,
-    valueOf,
+    getValue,
     disabledOf,
     descriptionOf,
     iconOf,
@@ -178,7 +178,7 @@ const OptionSheet = props => {
     item
   }) => {
     const itemLabel = labelOf(item);
-    const itemValue = valueOf(item);
+    const itemValue = getValue(item);
     const itemDescription = descriptionOf(item);
     const itemIcon = iconOf(item);
     const selected = isSelected(itemValue);
@@ -316,7 +316,7 @@ const OptionSheet = props => {
           })
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
           data: filteredOptions,
-          keyExtractor: item => String(valueOf(item)),
+          keyExtractor: item => String(getValue(item)),
           renderItem: renderOption,
           keyboardShouldPersistTaps: "handled",
           showsVerticalScrollIndicator: true,

package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js

@@ -208,7 +208,7 @@ const PhoneNumberInput = exports.PhoneNumberInput = /*#__PURE__*/(0, _react.forw
       title: countrySheetTitle,
       options: countries,
       labelOf: o => `${o.label} (+${o.code})`,
-      valueOf: o => o.iso,
+      getValue: o => o.iso,
       disabledOf: () => false,
       descriptionOf: () => undefined,
       iconOf: () => null,

package/lib/commonjs/components/Radio/Radio.js

@@ -48,6 +48,15 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const ctx = useRadioGroup();
+
+  // `value` is required by the props, but a JavaScript consumer can still omit
+  // it, and the failure is silent rather than loud: inside a group,
+  // `selectedValue === undefined` makes every unselected radio look selected the
+  // moment nothing is chosen, and pressing one reports `undefined` as the
+  // choice. A conformance test omitted it for months without anything noticing.
+  if (__DEV__ && value === undefined) {
+    console.warn('[@webority-technologies/mobile-ui] Radio was rendered without a `value`. ' + 'Selection compares against it, so the group cannot track which option is chosen.');
+  }
   const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
   const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
   const fillColor = toneColor(theme, tone);

package/lib/commonjs/components/Rating/Rating.js

@@ -126,6 +126,11 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
   const pulse = (0, _react.useCallback)(idx => {
     const v = scaleRefs[idx];
+    // Equivalent mutant, not an untested guard: `pulse` is only ever invoked from
+    // `commit` with an `animatedIndex` sourced from the star-loop below, which
+    // only pushes indices already confirmed present in `scaleRefs` (same render,
+    // same `max`). `v` is therefore always defined here — no reachable input
+    // makes this `return` fire, so no test can kill its removal.
     if (!v) {
       return;
     }