@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Timeline/Timeline.js

@@ -0,0 +1,141 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+
+/**
+ * The status vocabulary is shared with the web library's AppTimeline so a
+ * sign-off history reads identically on both surfaces.
+ *
+ *   upcoming  — not started yet        (hollow ring)
+ *   current   — in progress now        (warning)
+ *   done      — completed              (success)
+ *   onHold    — blocked / waiting      (info)
+ *   rejected  — declined / failed      (error)
+ *   cancelled — aborted                (muted)
+ *   skipped   — intentionally bypassed (muted)
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DOT = 12;
+const RAIL = 2;
+const GUTTER = 28;
+
+/**
+ * A chronological activity feed OR a status-progress tracker. Stepper covers a
+ * linear "which step am I on" flow; this covers "what has happened to this
+ * record", where entries carry their own status and can end in a terminal one.
+ */
+export const Timeline = ({
+  items,
+  variant = 'feed',
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const colourFor = status => {
+    switch (status) {
+      case 'done':
+        return theme.colors.success;
+      case 'current':
+        return theme.colors.warning;
+      case 'onHold':
+        return theme.colors.info;
+      case 'rejected':
+        return theme.colors.error;
+      case 'cancelled':
+      case 'skipped':
+        return theme.colors.text.tertiary;
+      default:
+        return theme.colors.border.primary;
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    testID: testID,
+    children: items.map((item, index) => {
+      const status = item.status ?? (variant === 'feed' ? 'done' : 'upcoming');
+      const accent = colourFor(status);
+      const isLast = index === items.length - 1;
+      const hollow = status === 'upcoming';
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.gutter,
+          children: [item.icon ?? /*#__PURE__*/_jsx(View, {
+            style: [styles.dot, {
+              backgroundColor: hollow ? 'transparent' : accent,
+              borderColor: accent
+            }]
+          }), isLast ? null : /*#__PURE__*/_jsx(View, {
+            style: [styles.rail, {
+              backgroundColor: theme.colors.border.primary
+            }]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.body, {
+            paddingBottom: isLast ? 0 : theme.spacing.lg
+          }],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.title, {
+              fontSize: theme.typography.fontSize.base,
+              color: status === 'upcoming' ? theme.colors.text.secondary : theme.colors.text.primary
+            }],
+            children: item.title
+          }), item.meta ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.meta, {
+              fontSize: theme.typography.fontSize.xs,
+              color: theme.colors.text.tertiary
+            }],
+            children: item.meta
+          }) : null, item.description ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.description, {
+              fontSize: theme.typography.fontSize.sm,
+              color: theme.colors.text.secondary
+            }],
+            children: item.description
+          }) : null, item.children]
+        })]
+      }, item.key ?? `${item.title}-${index}`);
+    })
+  });
+};
+const buildStyles = theme => StyleSheet.create({
+  row: {
+    flexDirection: 'row'
+  },
+  gutter: {
+    width: GUTTER,
+    alignItems: 'center'
+  },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    borderWidth: 2,
+    marginTop: 4
+  },
+  rail: {
+    width: RAIL,
+    flex: 1,
+    marginTop: 4,
+    borderRadius: RAIL / 2
+  },
+  body: {
+    flex: 1,
+    gap: 2
+  },
+  title: {
+    ...fontFor(theme, 'semibold'),
+    fontWeight: '600'
+  },
+  meta: {
+    ...fontFor(theme, 'normal')
+  },
+  description: {
+    ...fontFor(theme, 'normal')
+  }
+});
+export default Timeline;
+//# sourceMappingURL=Timeline.js.map

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

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

package/lib/module/components/Toast/Toast.js

@@ -0,0 +1,317 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_SWIPE_DISMISS_THRESHOLD = 80;
+const DEFAULT_SWIPE_VELOCITY_THRESHOLD = 0.5;
+const DEFAULT_STACK_OFFSET = 8;
+const DEFAULT_STACK_SCALE_STEP = 0.04;
+const DEFAULT_AUTO_DISMISS_MS = 3000;
+const Toast = ({
+  toast,
+  index,
+  onDismiss
+}) => {
+  const theme = useTheme();
+  const variant = toast.variant ?? 'default';
+  const position = toast.position ?? 'bottom';
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
+  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
+  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
+  const swipeDismissThreshold = toastTokens?.swipeDismissThreshold ?? DEFAULT_SWIPE_DISMISS_THRESHOLD;
+  const swipeVelocityThreshold = toastTokens?.swipeVelocityThreshold ?? DEFAULT_SWIPE_VELOCITY_THRESHOLD;
+  const stackOffset = toastTokens?.stackOffset ?? DEFAULT_STACK_OFFSET;
+  const stackScaleStep = toastTokens?.stackScaleStep ?? DEFAULT_STACK_SCALE_STEP;
+  const stackMinScale = toastTokens?.stackMinScale ?? 0.9;
+  const defaultDurationMs = toastTokens?.defaultDurationMs ?? DEFAULT_AUTO_DISMISS_MS;
+  const enableSwipeDismiss = toastTokens?.enableSwipeDismiss ?? true;
+  const enterSpringDamping = toastTokens?.enterSpringDamping ?? 18;
+  const enterSpringStiffness = toastTokens?.enterSpringStiffness ?? 180;
+  const enterSpringMass = toastTokens?.enterSpringMass ?? 1;
+  const enterFrom = position === 'top' ? -120 : 120;
+  const translateY = useRef(createAnimatedValue(enterFrom)).current;
+  const translateX = useRef(createAnimatedValue(0)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
+  const dismissedRef = useRef(false);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+
+  // The stack offset rides on its own value so the enter spring (translateY)
+  // and the layout offset compose once instead of rebuilding a fresh
+  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
+  // keeps it in sync after the node has moved to the native driver.
+  const stackTranslateY = useRef(createAnimatedValue(stackTranslate)).current;
+  useEffect(() => {
+    setNativeValue(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = useMemo(() => Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
+  const dismiss = () => {
+    if (dismissedRef.current) {
+      return;
+    }
+    dismissedRef.current = true;
+    Animated.parallel([Animated.timing(opacity, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    }), Animated.timing(translateY, {
+      toValue: enterFrom,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => onDismiss(toast.id));
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-once: a toast enters and schedules its own auto-dismiss. `dismiss` is re-created per render, so declaring it would restart the timer on every parent render and the toast would never leave
+  useEffect(() => {
+    const enter = Animated.parallel([Animated.spring(translateY, {
+      toValue: 0,
+      damping: enterSpringDamping,
+      stiffness: enterSpringStiffness,
+      mass: enterSpringMass,
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    })]);
+    enter.start();
+    const duration = toast.duration ?? defaultDurationMs;
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(), duration);
+      return () => {
+        enter.stop();
+        clearTimeout(timer);
+      };
+    }
+    return () => enter.stop();
+  }, []);
+  const panResponder = useMemo(() => PanResponder.create({
+    onMoveShouldSetPanResponder: (_evt, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy) && Math.abs(gesture.dx) > 6,
+    onPanResponderMove: (_evt, gesture) => {
+      setNativeValue(translateX, gesture.dx);
+      const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
+      setNativeValue(opacity, fade);
+    },
+    // A stolen responder (parent scroll, system gesture) otherwise leaves the
+    // toast parked mid-swipe at reduced opacity, neither dismissed nor reset.
+    onPanResponderTerminate: () => {
+      Animated.parallel([Animated.spring(translateX, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }), Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start();
+    },
+    onPanResponderRelease: (_evt, gesture) => {
+      if (Math.abs(gesture.dx) > swipeDismissThreshold || Math.abs(gesture.vx) > swipeVelocityThreshold) {
+        const direction = gesture.dx >= 0 ? 1 : -1;
+        Animated.parallel([Animated.timing(translateX, {
+          toValue: direction * 500,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        }), Animated.timing(opacity, {
+          toValue: 0,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        })]).start(() => {
+          dismissedRef.current = true;
+          onDismiss(toast.id);
+        });
+      } else {
+        Animated.parallel([Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: true
+        }), Animated.spring(opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        })]).start();
+      }
+    }
+  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, theme.motion.spring.snappy.damping, theme.motion.spring.snappy.stiffness, theme.motion.spring.snappy.mass, onDismiss, toast.id]);
+  const handleActionPress = () => {
+    toast.action?.onPress();
+    dismiss();
+  };
+  const renderIcon = () => {
+    if (toast.icon) {
+      return toast.icon;
+    }
+    const glyph = defaultGlyph(variant);
+    if (!glyph) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
+        backgroundColor: tint + '22'
+      }, toast.iconCircleStyle],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.iconGlyph, {
+          color: tint,
+          fontSize: iconGlyphFontSize
+        }],
+        accessible: false,
+        children: glyph
+      })
+    });
+  };
+  const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    ...(enableSwipeDismiss ? panResponder.panHandlers : {}),
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: "assertive",
+    accessibilityLabel: a11yLabel,
+    testID: toast.testID,
+    style: [styles.container, {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.lg,
+      padding: theme.spacing.md,
+      ...theme.shadows.md,
+      shadowColor: theme.shadows.md.shadowColor,
+      opacity,
+      transform: [{
+        translateY: composedTranslateY
+      }, {
+        translateX
+      }, {
+        scale: stackScale
+      }]
+    }, toast.style, toast.containerStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.tintBar, {
+        width: tintBarWidth,
+        backgroundColor: tint
+      }]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/_jsxs(View, {
+        style: styles.textBlock,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.message, {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            ...fontFor(theme, 'semibold')
+          }, toast.textStyle, toast.messageStyle],
+          numberOfLines: 2,
+          children: toast.message
+        }), toast.description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.description, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          numberOfLines: 3,
+          children: toast.description
+        }) : null]
+      }), toast.action ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: toast.action.label,
+        onPress: handleActionPress,
+        style: ({
+          pressed
+        }) => [styles.actionBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }, toast.actionButtonStyle],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: tint,
+            fontSize: theme.typography.fontSize.sm,
+            ...fontFor(theme, 'semibold')
+          },
+          numberOfLines: 1,
+          children: toast.action.label
+        })
+      }) : null]
+    })]
+  });
+};
+const tintFor = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return theme.colors.success;
+    case 'error':
+      return theme.colors.error;
+    case 'warning':
+      return theme.colors.warning;
+    case 'info':
+      return theme.colors.info;
+    case 'default':
+    default:
+      return theme.colors.text.primary;
+  }
+};
+const defaultGlyph = variant => {
+  switch (variant) {
+    case 'success':
+      return '✓';
+    case 'error':
+      return '×';
+    case 'warning':
+      return '!';
+    case 'info':
+      return 'i';
+    case 'default':
+    default:
+      return '';
+  }
+};
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    marginVertical: 4
+  },
+  tintBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8
+  },
+  iconCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  iconGlyph: {
+    fontWeight: '700',
+    lineHeight: 18
+  },
+  textBlock: {
+    flex: 1,
+    paddingRight: 8
+  },
+  message: {
+    lineHeight: 20
+  },
+  description: {
+    marginTop: 2,
+    lineHeight: 18
+  },
+  actionBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    marginLeft: 8
+  }
+});
+export { Toast };
+export default Toast;
+//# sourceMappingURL=Toast.js.map

package/lib/module/components/Toast/ToastProvider.js

@@ -0,0 +1,191 @@
+"use strict";
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import Toast from "./Toast.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_VISIBLE = 3;
+const ToastContext = /*#__PURE__*/createContext(null);
+let nextId = 0;
+const makeId = () => {
+  nextId += 1;
+  return `toast-${Date.now().toString(36)}-${nextId.toString(36)}`;
+};
+const defaultHaptic = variant => {
+  switch (variant) {
+    case 'error':
+      return 'notificationError';
+    case 'success':
+      return 'notificationSuccess';
+    case 'warning':
+      return 'notificationWarning';
+    case 'info':
+      return 'selection';
+    case 'default':
+    default:
+      return 'selection';
+  }
+};
+let providerCount = 0;
+let activeApi = null;
+const setActiveApi = api => {
+  activeApi = api;
+};
+const getActiveApi = () => activeApi;
+export const ToastProvider = ({
+  children,
+  maxVisible = MAX_VISIBLE,
+  topOffset,
+  bottomOffset
+}) => {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const [queue, setQueue] = useState([]);
+  const queueRef = useRef([]);
+  queueRef.current = queue;
+  const hide = useCallback(id => {
+    setQueue(prev => prev.filter(t => t.id !== id));
+  }, []);
+  const hideAll = useCallback(() => {
+    setQueue([]);
+  }, []);
+  const show = useCallback(opts => {
+    const id = makeId();
+    const item = {
+      ...opts,
+      id
+    };
+    const haptic = opts.haptic === undefined ? defaultHaptic(opts.variant) : opts.haptic;
+    if (haptic !== false) {
+      triggerHaptic(haptic);
+    }
+    setQueue(prev => {
+      const next = [...prev, item];
+      // FIFO trim if exceeding maxVisible
+      if (next.length > maxVisible) {
+        return next.slice(next.length - maxVisible);
+      }
+      return next;
+    });
+    return id;
+  }, [maxVisible]);
+  const api = useMemo(() => ({
+    show,
+    hide,
+    hideAll
+  }), [show, hide, hideAll]);
+  useEffect(() => {
+    providerCount += 1;
+    setActiveApi(api);
+    return () => {
+      providerCount -= 1;
+      if (providerCount <= 0) {
+        providerCount = 0;
+        setActiveApi(null);
+      }
+    };
+  }, [api]);
+  const topToasts = queue.filter(t => (t.position ?? 'bottom') === 'top');
+  const bottomToasts = queue.filter(t => (t.position ?? 'bottom') === 'bottom');
+  const styles = useMemo(() => buildStyles(), []);
+  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
+    value: api,
+    children: [children, /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: [styles.layer, styles.top, {
+        top: (topOffset ?? insets.top) + theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md
+      }],
+      children: topToasts.map((toast, idx) => /*#__PURE__*/_jsx(Toast, {
+        toast: toast,
+        index: topToasts.length - 1 - idx,
+        onDismiss: hide
+      }, toast.id))
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: [styles.layer, styles.bottom, {
+        bottom: (bottomOffset ?? insets.bottom) + theme.spacing.sm,
+        paddingHorizontal: theme.spacing.md
+      }],
+      children: bottomToasts.map((toast, idx) => /*#__PURE__*/_jsx(Toast, {
+        toast: toast,
+        index: bottomToasts.length - 1 - idx,
+        onDismiss: hide
+      }, toast.id))
+    })]
+  });
+};
+export const useToast = () => {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error('useToast must be used within a <ToastProvider>.');
+  }
+  return ctx;
+};
+let warned = false;
+const warnNoProvider = () => {
+  if (warned) {
+    return;
+  }
+  warned = true;
+  if (typeof __DEV__ !== 'undefined' && __DEV__) {
+    console.warn('[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root.');
+  }
+};
+const proxy = fn => {
+  const api = getActiveApi();
+  if (!api) {
+    warnNoProvider();
+    return '';
+  }
+  const result = fn(api);
+  return typeof result === 'string' ? result : '';
+};
+export const toast = {
+  show: opts => proxy(api => api.show(opts)),
+  success: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'success'
+  })),
+  error: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'error'
+  })),
+  warning: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'warning'
+  })),
+  info: (message, opts) => proxy(api => api.show({
+    ...opts,
+    message,
+    variant: 'info'
+  })),
+  hideAll: () => {
+    const api = getActiveApi();
+    if (!api) {
+      warnNoProvider();
+      return;
+    }
+    api.hideAll();
+  }
+};
+const buildStyles = () => StyleSheet.create({
+  layer: {
+    position: 'absolute',
+    left: 0,
+    right: 0
+  },
+  top: {
+    alignItems: 'stretch'
+  },
+  bottom: {
+    alignItems: 'stretch'
+  }
+});
+//# sourceMappingURL=ToastProvider.js.map

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default, Toast } from "./Toast.js";
+export { ToastProvider, toast, useToast } from "./ToastProvider.js";
+//# sourceMappingURL=index.js.map