@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/LoaderOverlay/LoaderOverlay.js

@@ -0,0 +1,196 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, BackHandler, Easing, StyleSheet } from 'react-native';
+import { useReducedMotion } from "../../hooks/useReducedMotion.js";
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_SHOW_DELAY_MS = 150;
+const DEFAULT_MIN_VISIBLE_MS = 400;
+let state = {
+  refCount: 0,
+  message: undefined
+};
+const listeners = new Set();
+const notify = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+const subscribe = listener => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const getState = () => state;
+const show = message => {
+  state = {
+    refCount: state.refCount + 1,
+    message: message ?? state.message
+  };
+  notify();
+};
+const hide = () => {
+  if (state.refCount <= 0) {
+    return;
+  }
+  const refCount = state.refCount - 1;
+  state = {
+    refCount,
+    message: refCount === 0 ? undefined : state.message
+  };
+  notify();
+};
+const reset = () => {
+  if (state.refCount === 0 && state.message === undefined) {
+    return;
+  }
+  state = {
+    refCount: 0,
+    message: undefined
+  };
+  notify();
+};
+const isVisible = () => state.refCount > 0;
+const wrap = async (work, message) => {
+  show(message);
+  try {
+    return await (typeof work === 'function' ? work() : work);
+  } finally {
+    hide();
+  }
+};
+export const loader = {
+  show,
+  hide,
+  wrap,
+  isVisible,
+  reset
+};
+export const useLoader = () => loader;
+export const LoaderOverlay = ({
+  renderIndicator,
+  backdropColor,
+  showDelayMs = DEFAULT_SHOW_DELAY_MS,
+  minVisibleMs = DEFAULT_MIN_VISIBLE_MS,
+  testID
+}) => {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [snapshot, setSnapshot] = useState(getState);
+  const [visible, setVisible] = useState(false);
+  const visibleRef = useRef(false);
+  const showTimerRef = useRef(null);
+  const hideTimerRef = useRef(null);
+  const shownAtRef = useRef(null);
+  const fade = useRef(createAnimatedValue(0)).current;
+  useEffect(() => subscribe(() => setSnapshot(getState())), []);
+  useEffect(() => {
+    visibleRef.current = visible;
+  }, [visible]);
+  const active = snapshot.refCount > 0;
+  useEffect(() => {
+    if (active) {
+      if (hideTimerRef.current !== null) {
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = null;
+      }
+      if (!visibleRef.current && showTimerRef.current === null) {
+        showTimerRef.current = setTimeout(() => {
+          showTimerRef.current = null;
+          shownAtRef.current = Date.now();
+          setVisible(true);
+        }, showDelayMs);
+      }
+      return;
+    }
+    if (showTimerRef.current !== null) {
+      clearTimeout(showTimerRef.current);
+      showTimerRef.current = null;
+      return;
+    }
+    if (visibleRef.current && hideTimerRef.current === null) {
+      const elapsed = shownAtRef.current !== null ? Date.now() - shownAtRef.current : minVisibleMs;
+      const remaining = Math.max(0, minVisibleMs - elapsed);
+      hideTimerRef.current = setTimeout(() => {
+        hideTimerRef.current = null;
+        shownAtRef.current = null;
+        setVisible(false);
+      }, remaining);
+    }
+  }, [active, showDelayMs, minVisibleMs]);
+  useEffect(() => () => {
+    if (showTimerRef.current !== null) {
+      clearTimeout(showTimerRef.current);
+    }
+    if (hideTimerRef.current !== null) {
+      clearTimeout(hideTimerRef.current);
+    }
+  }, []);
+  useEffect(() => {
+    if (!visible) {
+      fade.setValue(0);
+      return;
+    }
+    if (reducedMotion) {
+      fade.setValue(1);
+      return;
+    }
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [visible, reducedMotion, fade, theme]);
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => true);
+    return () => {
+      subscription.remove();
+    };
+  }, [visible]);
+  const message = snapshot.message;
+  useEffect(() => {
+    if (visible && message) {
+      AccessibilityInfo.announceForAccessibility(message);
+    }
+  }, [visible, message]);
+  const styles = useMemo(() => buildStyles(), []);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "auto",
+    testID: testID,
+    accessible: true,
+    accessibilityViewIsModal: true,
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: message ?? 'Loading',
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    style: [styles.overlay, {
+      backgroundColor: backdropColor ?? theme.colors.background.overlay,
+      opacity: fade
+    }],
+    children: renderIndicator ? renderIndicator(message) : /*#__PURE__*/_jsx(Spinner, {
+      size: "lg",
+      message: message
+    })
+  });
+};
+const buildStyles = () => StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000
+  }
+});
+//# sourceMappingURL=LoaderOverlay.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { LoaderOverlay, loader, useLoader } from "./LoaderOverlay.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,270 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Linking, Platform, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { Skeleton } from "../Skeleton/index.js";
+import { parseMarkdown } from "./parse.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const renderInline = (nodes, theme, onLinkPress, keyPrefix = 'i') => nodes.map((node, index) => {
+  const key = `${keyPrefix}-${index}`;
+  switch (node.type) {
+    case 'text':
+      return /*#__PURE__*/_jsx(Text, {
+        children: node.value
+      }, key);
+    case 'strong':
+      return /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontWeight: theme.typography.fontWeight.bold
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    case 'em':
+      return /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontStyle: 'italic'
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    case 'strike':
+      return /*#__PURE__*/_jsx(Text, {
+        style: {
+          textDecorationLine: 'line-through'
+        },
+        children: renderInline(node.children, theme, onLinkPress, key)
+      }, key);
+    case 'code':
+      return /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontFamily: MONO,
+          backgroundColor: theme.colors.background.secondary,
+          color: theme.colors.text.primary
+        },
+        children: node.value
+      }, key);
+    case 'link':
+      return /*#__PURE__*/_jsx(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 = 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.
+ */
+export const Markdown = ({
+  children,
+  onLinkPress,
+  loading = false,
+  style,
+  textStyle,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const blocks = useMemo(() => 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 Linking.openURL(href).catch(() => undefined);
+  };
+  if (loading) {
+    return /*#__PURE__*/_jsx(MarkdownSkeleton, {
+      style: style,
+      testID: testID
+    });
+  }
+  if (blocks.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    children: blocks.map((block, index) => /*#__PURE__*/_jsx(MarkdownBlock, {
+      block: block,
+      theme: theme,
+      styles: styles,
+      textStyle: textStyle,
+      onLinkPress: handleLink
+    }, `b-${index}`))
+  });
+};
+Markdown.displayName = 'Markdown';
+const MarkdownBlock = ({
+  block,
+  theme,
+  styles,
+  textStyle,
+  onLinkPress
+}) => {
+  switch (block.type) {
+    case 'heading':
+      return /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+        style: [styles.block, styles.body, textStyle],
+        children: renderInline(block.children, theme, onLinkPress)
+      });
+    case 'listItem':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [styles.listRow, {
+          marginLeft: block.depth * theme.spacing.md
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.body, styles.bullet, textStyle],
+          children: block.ordered ? `${block.index}.` : '•'
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.body, styles.listText, textStyle],
+          children: renderInline(block.children, theme, onLinkPress)
+        })]
+      });
+    case 'quote':
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.quote,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.body, styles.quoteText, textStyle],
+          children: renderInline(block.children, theme, onLinkPress)
+        })
+      });
+    case 'codeBlock':
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.codeBlock,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.codeText,
+          children: block.value
+        })
+      });
+    case 'rule':
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.rule
+      });
+    default:
+      return null;
+  }
+};
+const MarkdownSkeleton = ({
+  style,
+  testID
+}) => /*#__PURE__*/_jsxs(View, {
+  style: style,
+  testID: testID,
+  children: [/*#__PURE__*/_jsx(Skeleton, {
+    shape: "text",
+    width: "70%",
+    height: 20,
+    style: {
+      marginBottom: 8
+    }
+  }), /*#__PURE__*/_jsx(Skeleton, {
+    shape: "text",
+    width: "100%",
+    height: 14,
+    style: {
+      marginBottom: 6
+    }
+  }), /*#__PURE__*/_jsx(Skeleton, {
+    shape: "text",
+    width: "92%",
+    height: 14,
+    style: {
+      marginBottom: 6
+    }
+  }), /*#__PURE__*/_jsx(Skeleton, {
+    shape: "text",
+    width: "60%",
+    height: 14
+  })]
+});
+const createStyles = theme => 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,
+    ...smoothCorners,
+    padding: theme.spacing.sm,
+    marginBottom: theme.spacing.sm
+  },
+  codeText: {
+    fontFamily: MONO,
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text.primary
+  },
+  rule: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: theme.colors.border.primary,
+    marginVertical: theme.spacing.md
+  }
+});
+//# sourceMappingURL=Markdown.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Markdown } from "./Markdown.js";
+//# sourceMappingURL=index.js.map

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