@webority-technologies/mobile-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,223 @@
+"use strict";
+
+/**
+ * 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])
+  })
+}];
+export 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.
+ */
+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*$/;
+export 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;
+};
+//# sourceMappingURL=parse.js.map

package/lib/module/components/OTPInput/OTPInput.js

@@ -144,6 +144,11 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     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/module/components/OptionSheet/OptionSheet.js

@@ -31,7 +31,7 @@ export const OptionSheet = props => {
     title,
     options,
     labelOf,
-    valueOf,
+    getValue,
     disabledOf,
     descriptionOf,
     iconOf,
@@ -173,7 +173,7 @@ export 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);
@@ -311,7 +311,7 @@ export const OptionSheet = props => {
           })
         }) : null, /*#__PURE__*/_jsx(FlatList, {
           data: filteredOptions,
-          keyExtractor: item => String(valueOf(item)),
+          keyExtractor: item => String(getValue(item)),
           renderItem: renderOption,
           keyboardShouldPersistTaps: "handled",
           showsVerticalScrollIndicator: true,

package/lib/module/components/PhoneNumberInput/PhoneNumberInput.js

@@ -203,7 +203,7 @@ export const PhoneNumberInput = /*#__PURE__*/forwardRef((props, ref) => {
       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/module/components/Radio/Radio.js

@@ -43,6 +43,15 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const styles = 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/module/components/Rating/Rating.js

@@ -121,6 +121,11 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
   const pulse = 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;
     }

package/lib/module/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,306 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { applyMarkdownAction, normalizeSelection } from "./markdownActions.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Glyph + spoken name per action. The glyph IS the markdown marker wherever one reads as itself. */
+const ACTION_META = {
+  bold: {
+    glyph: 'B',
+    label: 'Bold'
+  },
+  italic: {
+    glyph: 'I',
+    label: 'Italic'
+  },
+  strikethrough: {
+    glyph: 'S',
+    label: 'Strikethrough'
+  },
+  code: {
+    glyph: '</>',
+    label: 'Inline code'
+  },
+  link: {
+    glyph: 'link',
+    label: 'Link'
+  },
+  heading1: {
+    glyph: 'H1',
+    label: 'Heading 1'
+  },
+  heading2: {
+    glyph: 'H2',
+    label: 'Heading 2'
+  },
+  bulletList: {
+    glyph: '•',
+    label: 'Bulleted list'
+  },
+  numberedList: {
+    glyph: '1.',
+    label: 'Numbered list'
+  },
+  quote: {
+    glyph: '>',
+    label: 'Quote'
+  }
+};
+const DEFAULT_ACTIONS = ['bold', 'italic', 'strikethrough', 'code', 'link', 'heading1', 'heading2', 'bulletList', 'numberedList', 'quote'];
+const DEFAULT_MIN_HEIGHT = 160;
+
+/**
+ * A markdown editor: a themed multiline field plus a toolbar that wraps the
+ * current selection in the markers our own `<Markdown>` renderer reads back.
+ *
+ * Deliberately NOT a WYSIWYG surface. Rich-text-on-RN means a WebView, which is
+ * exactly what replacing the stale `react-native-pell-rich-editor` was meant to
+ * escape: markdown in, markdown out, one plain TextInput, no bridge.
+ */
+export const RichTextEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    onChangeText,
+    placeholder,
+    actions = DEFAULT_ACTIONS,
+    disabled = false,
+    loading = false,
+    minHeight = DEFAULT_MIN_HEIGHT,
+    autoFocus = false,
+    accessibilityLabel,
+    haptic,
+    style,
+    toolbarStyle,
+    inputStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const text = value ?? '';
+  const [selection, setSelection] = useState({
+    start: 0,
+    end: 0
+  });
+  const [focused, setFocused] = useState(false);
+  /**
+   * Only set for the render immediately after a toolbar action. Holding the
+   * TextInput's `selection` permanently fights the platform keyboard on
+   * Android, so it is released as soon as the field reports the caret moved.
+   */
+  const [forcedSelection, setForcedSelection] = useState(null);
+  const handleSelectionChange = useCallback(event => {
+    setSelection(event.nativeEvent.selection);
+    setForcedSelection(null);
+  }, []);
+  const handleChangeText = useCallback(next => {
+    setForcedSelection(null);
+    onChangeText?.(next);
+  }, [onChangeText]);
+  const runAction = useCallback(action => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    const result = applyMarkdownAction({
+      text,
+      selection: normalizeSelection(selection, text.length)
+    }, action);
+    setSelection(result.selection);
+    setForcedSelection(result.selection);
+    onChangeText?.(result.text);
+  }, [disabled, haptic, onChangeText, selection, text]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(RichTextEditorSkeleton, {
+      actionCount: actions.length,
+      minHeight: minHeight,
+      style: style,
+      testID: testID
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.container, {
+      borderColor: focused ? theme.colors.border.focus : theme.colors.border.primary,
+      opacity: disabled ? 0.55 : 1
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.toolbar, toolbarStyle],
+      children: actions.map(action => /*#__PURE__*/_jsx(ToolbarButton, {
+        action: action,
+        disabled: disabled,
+        onPress: runAction,
+        styles: styles,
+        theme: theme,
+        testID: testID ? `${testID}-${action}` : undefined
+      }, action))
+    }), /*#__PURE__*/_jsx(TextInput, {
+      ref: ref,
+      value: text,
+      onChangeText: handleChangeText,
+      onSelectionChange: handleSelectionChange,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      selection: forcedSelection ?? undefined,
+      editable: !disabled,
+      autoFocus: autoFocus,
+      multiline: true,
+      textAlignVertical: "top",
+      placeholder: placeholder,
+      placeholderTextColor: theme.colors.text.tertiary,
+      accessibilityLabel: accessibilityLabel,
+      style: [styles.input, {
+        minHeight
+      }, inputStyle],
+      testID: testID ? `${testID}-input` : undefined
+    })]
+  });
+});
+RichTextEditor.displayName = 'RichTextEditor';
+const ToolbarButton = ({
+  action,
+  disabled,
+  onPress,
+  styles,
+  theme,
+  testID
+}) => {
+  const meta = ACTION_META[action];
+  // Each glyph carries its own formatting, so the button reads as what it does.
+  // Built as one object rather than an array entry per rule: a `fontWeight:
+  // undefined` in a style array wipes the family weight `fontFor` just set.
+  const glyphStyle = {
+    color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
+  };
+  if (action === 'bold') {
+    glyphStyle.fontWeight = theme.typography.fontWeight.bold;
+  }
+  if (action === 'italic') {
+    glyphStyle.fontStyle = 'italic';
+  }
+  if (action === 'strikethrough') {
+    glyphStyle.textDecorationLine = 'line-through';
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: () => onPress(action),
+    disabled: disabled,
+    accessibilityRole: "button",
+    accessibilityLabel: meta.label,
+    accessibilityState: {
+      disabled
+    },
+    hitSlop: 4,
+    testID: testID,
+    style: ({
+      pressed
+    }) => [styles.button, {
+      backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.background.secondary
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      allowFontScaling: false,
+      style: [styles.buttonLabel, glyphStyle],
+      children: meta.glyph
+    })
+  });
+};
+ToolbarButton.displayName = 'RichTextEditorToolbarButton';
+
+/**
+ * Placeholder shape for `<RichTextEditor>`: the same bordered box, a row of
+ * button-sized blocks where the toolbar sits, and text lines filling the body,
+ * so nothing reflows when the draft arrives.
+ */
+const RichTextEditorSkeleton = ({
+  actionCount,
+  minHeight,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const buttons = Array.from({
+    length: Math.max(1, actionCount)
+  }, (_, index) => index);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.toolbar,
+      children: buttons.map(index => /*#__PURE__*/_jsx(Skeleton, {
+        width: 34,
+        height: 30,
+        radius: "sm"
+      }, index))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.skeletonBody, {
+        minHeight
+      }],
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "94%",
+        height: 14
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "100%",
+        height: 14
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "72%",
+        height: 14
+      })]
+    })]
+  });
+};
+RichTextEditorSkeleton.displayName = 'RichTextEditorSkeleton';
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    borderWidth: theme.colors.border.width,
+    borderColor: theme.colors.border.primary,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.colors.background.primary,
+    overflow: 'hidden'
+  },
+  toolbar: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing.xs,
+    padding: theme.spacing.xs,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.colors.border.secondary,
+    backgroundColor: theme.colors.background.secondary
+  },
+  button: {
+    minWidth: 34,
+    height: 30,
+    paddingHorizontal: theme.spacing.xs,
+    borderRadius: theme.radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonLabel: {
+    ...fontFor(theme, 'medium'),
+    fontSize: theme.typography.fontSize.sm
+  },
+  input: {
+    ...fontFor(theme, 'normal'),
+    color: theme.colors.text.primary,
+    fontSize: theme.typography.fontSize.base,
+    lineHeight: theme.typography.fontSize.base * 1.5,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm
+  },
+  skeletonBody: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    gap: theme.spacing.sm
+  }
+});
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map

package/lib/module/components/RichTextEditor/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { applyMarkdownAction } from "./markdownActions.js";
+export { RichTextEditor } from "./RichTextEditor.js";
+//# sourceMappingURL=index.js.map