@webority/mobile-ui 0.0.0-stage → 0.0.34

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/Modal/Modal.js

@@ -0,0 +1,376 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Modal = exports.MODAL_DISMISS_GRACE_MS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _corners = require("../../utils/corners.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _squircle = require("../../utils/squircle.js");
+var _SquircleFill = require("../SquircleFill/SquircleFill.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); }
+// Local shape mirror — see types.ts ModalTokens for the canonical definition.
+
+/**
+ * Grace period between `visible` flipping false and the native modal being
+ * safely gone. Unmounting the tree (navigation reset, auth flip) before this
+ * elapses races Android's ReactModalHostView dismiss and NPE-crashes.
+ */
+const MODAL_DISMISS_GRACE_MS = exports.MODAL_DISMISS_GRACE_MS = 300;
+const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    visible,
+    onRequestClose,
+    presentation = 'centered',
+    backdropOpacity,
+    backdropPressClose = true,
+    animationDuration,
+    accessibilityLabel,
+    hardwareBackPress = true,
+    children,
+    contentStyle,
+    backdropStyle,
+    restoreFocusRef,
+    onDismissed,
+    haptic,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const duration = animationDuration ?? theme.motion.duration.normal;
+  const screenHeight = _reactNative.Dimensions.get('window').height;
+  const modalTokens = theme.components.modal;
+  const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
+  const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(scaleStartValue)).current;
+  const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const translateYAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(screenHeight)).current;
+  const containerRef = (0, _react.useRef)(null);
+  const wasVisibleRef = (0, _react.useRef)(false);
+  // The native modal must stay mounted while the exit plays; unmounting on the
+  // `visible` flip is what made the modal snap away after springing in. Exit
+  // finishes well inside MODAL_DISMISS_GRACE_MS, so `onDismissed` still lands
+  // after the content is actually gone.
+  const [rendered, setRendered] = (0, _react.useState)(visible);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+
+  // The backdrop is a pre-baked colour, not an animated opacity (see the render
+  // comment for the Fabric reason), so `backdropOpacity` has to override the
+  // token's alpha channel rather than drive an Animated value.
+  const backdropColor = (0, _react.useMemo)(() => {
+    const token = theme.colors.background.overlay;
+    if (typeof backdropOpacity !== 'number') {
+      return token;
+    }
+    const rgba = token.match(/^rgba?\(([^)]+)\)$/);
+    if (!rgba) {
+      return token;
+    }
+    const [r, g, b] = rgba[1].split(',').map(part => part.trim());
+    return `rgba(${r}, ${g}, ${b}, ${backdropOpacity})`;
+  }, [theme.colors.background.overlay, backdropOpacity]);
+
+  // Mounting is its own effect: folding it into the animation effect below
+  // would make `rendered` flipping true re-run that effect and replay the
+  // enter animation.
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      setRendered(true);
+    }
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    const running = [];
+    if (visible && rendered) {
+      // The backdrop is NOT animated: it is a pre-baked colour, because on
+      // RN 0.85 / Fabric / iOS an animated opacity on a View that also sets
+      // backgroundColor renders as 0 and the dim layer never appears (see the
+      // render comment). It used to be tweened here and in the exit below, but
+      // nothing consumed the value — a dead animation on every open and close.
+
+      if (presentation === 'bottom') {
+        const slide = _reactNative.Animated.spring(translateYAnim, {
+          toValue: 0,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        });
+        slide.start();
+        running.push(slide);
+      } else {
+        const enter = _reactNative.Animated.parallel([_reactNative.Animated.spring(scaleAnim, {
+          toValue: 1,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration,
+          useNativeDriver: true
+        })]);
+        enter.start();
+        running.push(enter);
+      }
+    } else if (rendered) {
+      // Leave decisively: timing + accelerate, never a spring on the way out
+      // (theme.motion.spring documents the rule).
+      const exitDuration = theme.motion.duration.fast;
+      const accelerate = _reactNative.Easing.bezier(...theme.motion.easing.accelerate);
+      const exit = _reactNative.Animated.parallel([presentation === 'bottom' ? _reactNative.Animated.timing(translateYAnim, {
+        toValue: screenHeight,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      }) : _reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnim, {
+        toValue: scaleStartValue,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacityAnim, {
+        toValue: 0,
+        duration: exitDuration,
+        easing: accelerate,
+        useNativeDriver: true
+      })])]);
+      exit.start(({
+        finished
+      }) => {
+        if (finished) {
+          setRendered(false);
+        }
+      });
+      running.push(exit);
+    }
+    // Stop in-flight tweens on unmount / visibility flip so an enter animation
+    // never resolves against a torn-down tree (fixes the jest async leak and
+    // the equivalent post-unmount work in the real app).
+    return () => running.forEach(animation => animation.stop());
+  }, [visible, rendered, presentation, duration, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass, theme.motion.duration.fast, theme.motion.easing.accelerate, scaleStartValue]);
+
+  // Accessibility focus trap: when the modal opens, push screen-reader focus
+  // into the dialog container after the mount animation; when it closes,
+  // restore focus to the trigger element if the consumer provided a ref.
+  (0, _react.useEffect)(() => {
+    let openTimer;
+    let closeTimer;
+    if (visible) {
+      openTimer = setTimeout(() => {
+        // sendAccessibilityEvent takes the host instance directly; the older
+        // setAccessibilityFocus needs a react tag via the deprecated findNodeHandle.
+        if (containerRef.current) {
+          _reactNative.AccessibilityInfo.sendAccessibilityEvent(containerRef.current, 'focus');
+        }
+      }, 150);
+      wasVisibleRef.current = true;
+    } else if (wasVisibleRef.current) {
+      wasVisibleRef.current = false;
+      if (restoreFocusRef && restoreFocusRef.current) {
+        closeTimer = setTimeout(() => {
+          const target = restoreFocusRef.current;
+          if (target) {
+            _reactNative.AccessibilityInfo.sendAccessibilityEvent(target, 'focus');
+          }
+        }, duration);
+      }
+    }
+    return () => {
+      if (openTimer) {
+        clearTimeout(openTimer);
+      }
+      if (closeTimer) {
+        clearTimeout(closeTimer);
+      }
+    };
+  }, [visible, duration, restoreFocusRef]);
+  const wasOpenRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      wasOpenRef.current = true;
+      return;
+    }
+    if (!wasOpenRef.current) {
+      return;
+    }
+    wasOpenRef.current = false;
+    if (!onDismissed) {
+      return;
+    }
+    const timer = setTimeout(onDismissed, MODAL_DISMISS_GRACE_MS);
+    return () => clearTimeout(timer);
+  }, [visible, onDismissed]);
+  const handleBackdropPress = (0, _react.useCallback)(() => {
+    if (!backdropPressClose) {
+      return;
+    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    onRequestClose();
+  }, [backdropPressClose, onRequestClose, haptic]);
+  const handleHardwareBack = (0, _react.useCallback)(() => {
+    if (hardwareBackPress) {
+      onRequestClose();
+    }
+  }, [hardwareBackPress, onRequestClose]);
+
+  // Android smooth corners for the centered card. The host keeps its opaque
+  // background (its elevation shadow is cast from the view's own outline)
+  // with a deeper native radius, and the squircle is drawn over it. The
+  // bottom sheet rounds only its top corners, a shape the path does not
+  // draw, and the full-screen presentation has no corner.
+  const squircle = (0, _SquircleFill.useSquircle)(presentation !== 'bottom' && presentation !== 'fullScreen', theme.radius.xl);
+  const containerStyle = (0, _react.useMemo)(() => {
+    if (presentation === 'fullScreen') {
+      return [styles.fullScreenContent, {
+        backgroundColor: theme.colors.background.elevated
+      }];
+    }
+    if (presentation === 'bottom') {
+      // paddingBottom includes the Android navigation-bar / iOS home-indicator
+      // inset so sheet content never lands behind the system chrome.
+      return [styles.bottomContent, {
+        backgroundColor: theme.colors.background.elevated,
+        borderTopLeftRadius: theme.radius.xl,
+        borderTopRightRadius: theme.radius.xl,
+        ..._corners.smoothCorners,
+        paddingTop: theme.spacing.lg,
+        paddingHorizontal: theme.spacing.lg,
+        paddingBottom: theme.spacing.lg + insets.bottom
+      }, theme.shadows.xl];
+    }
+    return [styles.centeredContent, {
+      backgroundColor: theme.colors.background.elevated,
+      // Under the Android squircle the opaque host's own corner is pushed
+      // deeper so it hides under the shape (see squircleHostRadius).
+      borderRadius: squircle.active && squircle.size ? (0, _squircle.squircleHostRadius)(squircle.size.width, squircle.size.height, theme.radius.xl) : theme.radius.xl,
+      ..._corners.smoothCorners,
+      padding: theme.spacing.xl
+    }, theme.shadows.xl];
+  }, [presentation, theme, styles, insets.bottom, squircle.active, squircle.size]);
+  const wrapperStyle = (0, _react.useMemo)(() => {
+    if (presentation === 'bottom') {
+      return styles.bottomWrapper;
+    }
+    if (presentation === 'fullScreen') {
+      return styles.fullScreenWrapper;
+    }
+    return styles.centeredWrapper;
+  }, [presentation, styles]);
+  const animatedTransform = (0, _react.useMemo)(() => {
+    if (presentation === 'bottom') {
+      return {
+        transform: [{
+          translateY: translateYAnim
+        }]
+      };
+    }
+    if (presentation === 'fullScreen') {
+      return {
+        opacity: opacityAnim
+      };
+    }
+    return {
+      opacity: opacityAnim,
+      transform: [{
+        scale: scaleAnim
+      }]
+    };
+  }, [presentation, scaleAnim, opacityAnim, translateYAnim]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: rendered,
+    transparent: true,
+    statusBarTranslucent: true
+    // Android-only API (RN 0.71+). On iOS the prop is harmless / ignored.
+    // Lets the backdrop and sheet extend behind the system navigation bar
+    // so the dim layer covers the entire screen and gesture-nav devices
+    // don't show a gap under the sheet.
+    ,
+    navigationBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleHardwareBack,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: node => {
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      style: styles.root,
+      accessible: true,
+      accessibilityViewIsModal: true,
+      accessibilityRole: "alert",
+      accessibilityLabel: accessibilityLabel,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+      // Backdrop wraps the dialog content (not sibling) — empirically,
+      // on RN 0.85 / Fabric / iOS a sibling backdrop is occluded by the
+      // wrapper View regardless of render order or pointerEvents.
+      // collapsable={false} prevents the backdrop View from being
+      // flattened out of the native tree. The backdrop uses a pre-baked
+      // rgba colour (no animated opacity) because Animated.View opacity
+      // on a coloured View doesn't update visibly on Fabric.
+      , {
+        collapsable: false,
+        style: [_reactNative.StyleSheet.absoluteFill, wrapperStyle, {
+          backgroundColor: backdropColor
+        }, backdropStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          onPress: handleBackdropPress,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close modal",
+          disabled: !backdropPressClose
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+          style: [containerStyle, animatedTransform, contentStyle],
+          onLayout: squircle.onLayout,
+          pointerEvents: "auto",
+          children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
+            width: squircle.size.width,
+            height: squircle.size.height,
+            radius: theme.radius.xl,
+            fill: theme.colors.background.elevated
+          }) : null, children]
+        })]
+      })
+    })
+  });
+});
+Modal.displayName = 'Modal';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  centeredWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  centeredContent: {
+    maxWidth: '90%',
+    width: '90%'
+  },
+  bottomWrapper: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  bottomContent: {
+    width: '100%'
+  },
+  fullScreenWrapper: {
+    flex: 1
+  },
+  fullScreenContent: {
+    flex: 1
+  }
+});
+var _default = exports.default = Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MODAL_DISMISS_GRACE_MS", {
+  enumerable: true,
+  get: function () {
+    return _Modal.MODAL_DISMISS_GRACE_MS;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
+var _Modal = _interopRequireWildcard(require("./Modal.js"));
+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); }
+//# sourceMappingURL=index.js.map