@webority-technologies/mobile-ui 0.0.1 → 0.0.2

package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -1,7 +1,9 @@
 "use strict";
 
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Keyboard, Platform, ScrollView, TextInput } from 'react-native';
+import { Keyboard, Platform, RefreshControl, ScrollView, TextInput } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../../theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A ScrollView that keeps the focused input visible above the keyboard — no
@@ -15,11 +17,20 @@ const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     extraScrollHeight = 24,
     disabled = false,
+    safeAreaEdges = ['bottom'],
+    refreshing = false,
+    onRefresh,
+    keyboardOpeningTime = 250,
+    viewIsInsideTabBar = false,
+    resetScrollToCoords,
     contentContainerStyle,
+    refreshControl,
     onScroll,
     onLayout,
     ...rest
   } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const scrollRef = useRef(null);
   const scrollYRef = useRef(0);
   const viewportHeightRef = useRef(0);
@@ -63,26 +74,35 @@ const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
     // iOS exposes the will* events (smoother); Android only fires did*.
     const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
     const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    let rafId;
+    let timeoutId;
     const showSub = Keyboard.addListener(showEvent, e => {
       const height = e.endCoordinates?.height ?? 0;
       setKeyboardHeight(height);
-      // Wait a frame so the padding is applied before we scroll. Tracked so
-      // it can be cancelled on unmount (never runs against a torn-down tree).
-      if (rafId != null) {
-        cancelAnimationFrame(rafId);
+      // Wait for the keyboard's own animation to (roughly) finish before
+      // scrolling, so we measure against the settled viewport. Tracked so
+      // it can be cancelled on unmount or a second show before it fires.
+      if (timeoutId != null) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => scrollFocusedIntoView(height), keyboardOpeningTime);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+      if (resetScrollToCoords) {
+        scrollRef.current?.scrollTo({
+          ...resetScrollToCoords,
+          animated: true
+        });
       }
-      rafId = requestAnimationFrame(() => scrollFocusedIntoView(height));
     });
-    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
     return () => {
-      if (rafId != null) {
-        cancelAnimationFrame(rafId);
+      if (timeoutId != null) {
+        clearTimeout(timeoutId);
       }
       showSub.remove();
       hideSub.remove();
     };
-  }, [disabled, scrollFocusedIntoView]);
+  }, [disabled, scrollFocusedIntoView, keyboardOpeningTime, resetScrollToCoords]);
   const handleLayout = useCallback(e => {
     viewportHeightRef.current = e.nativeEvent.layout.height;
     onLayout?.(e);
@@ -91,6 +111,36 @@ const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
     scrollYRef.current = e.nativeEvent.contentOffset.y;
     onScroll?.(e);
   }, [onScroll]);
+
+  // Borrowed from the spacing scale because the theme has no tab-bar height
+  // token, and 3xl (48) is the closest honest value: a react-navigation bottom
+  // tab bar is 49pt on iOS and 56dp on Android before safe-area padding. If a
+  // dedicated token is ever added, this should use it rather than a scale step
+  // that happens to be about right.
+  const tabBarInset = viewIsInsideTabBar ? theme.spacing['3xl'] : 0;
+  const includesBottomSafeArea = safeAreaEdges.includes('bottom');
+  // Once the keyboard is up it already extends to the physical bottom of the
+  // screen (past the home-indicator safe area), so adding the bottom inset
+  // on top of the keyboard height would double-count that strip of space.
+  const bottomInset = keyboardHeight > 0 ? keyboardHeight : includesBottomSafeArea ? insets.bottom : 0;
+  const safeAreaPadding = {
+    paddingBottom: bottomInset + tabBarInset,
+    ...(safeAreaEdges.includes('top') ? {
+      paddingTop: insets.top
+    } : null),
+    ...(safeAreaEdges.includes('left') ? {
+      paddingLeft: insets.left
+    } : null),
+    ...(safeAreaEdges.includes('right') ? {
+      paddingRight: insets.right
+    } : null)
+  };
+  const resolvedRefreshControl = refreshControl ?? (onRefresh ? /*#__PURE__*/_jsx(RefreshControl, {
+    refreshing: refreshing,
+    onRefresh: onRefresh,
+    tintColor: theme.colors.primary,
+    colors: [theme.colors.primary]
+  }) : undefined);
   return /*#__PURE__*/_jsx(ScrollView, {
     ref: setRefs,
     onScroll: handleScroll,
@@ -98,9 +148,8 @@ const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
     scrollEventThrottle: 16,
     keyboardShouldPersistTaps: "handled",
     keyboardDismissMode: Platform.OS === 'ios' ? 'interactive' : 'on-drag',
-    contentContainerStyle: [contentContainerStyle, {
-      paddingBottom: keyboardHeight
-    }],
+    contentContainerStyle: [contentContainerStyle, safeAreaPadding],
+    refreshControl: resolvedRefreshControl,
     ...rest,
     children: children
   });

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,268 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Linking, Platform, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.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,
+    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