@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,268 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SWIPE_DISMISS_THRESHOLD = 80;
+const SWIPE_VELOCITY_THRESHOLD = 0.5;
+const STACK_OFFSET = 8;
+const STACK_SCALE_STEP = 0.04;
+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 enterFrom = position === 'top' ? -120 : 120;
+  const translateY = useRef(new Animated.Value(enterFrom)).current;
+  const translateX = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const dismissedRef = useRef(false);
+  const dismiss = (animateOut = true) => {
+    if (dismissedRef.current) return;
+    dismissedRef.current = true;
+    if (animateOut) {
+      Animated.parallel([Animated.timing(opacity, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      }), Animated.timing(translateY, {
+        toValue: enterFrom,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start(() => onDismiss(toast.id));
+    } else {
+      onDismiss(toast.id);
+    }
+  };
+  useEffect(() => {
+    Animated.parallel([Animated.spring(translateY, {
+      toValue: 0,
+      damping: 18,
+      stiffness: 180,
+      mass: 1,
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    })]).start();
+    const duration = toast.duration ?? 3000;
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(true), duration);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const panResponder = useMemo(() => PanResponder.create({
+    onMoveShouldSetPanResponder: (_evt, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy) && Math.abs(gesture.dx) > 6,
+    onPanResponderMove: (_evt, gesture) => {
+      translateX.setValue(gesture.dx);
+      const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
+      opacity.setValue(fade);
+    },
+    onPanResponderRelease: (_evt, gesture) => {
+      if (Math.abs(gesture.dx) > SWIPE_DISMISS_THRESHOLD || Math.abs(gesture.vx) > SWIPE_VELOCITY_THRESHOLD) {
+        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();
+      }
+    }
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const stackTranslate = position === 'top' ? index * STACK_OFFSET : -index * STACK_OFFSET;
+  const stackScale = Math.max(1 - index * STACK_SCALE_STEP, 0.9);
+  const handleActionPress = () => {
+    toast.action?.onPress();
+    dismiss(true);
+  };
+  const renderIcon = () => {
+    if (toast.icon) return toast.icon;
+    const glyph = defaultGlyph(variant);
+    if (!glyph) return null;
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.iconCircle, {
+        backgroundColor: tint + '22'
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.iconGlyph, {
+          color: tint
+        }],
+        accessible: false,
+        children: glyph
+      })
+    });
+  };
+  const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    ...panResponder.panHandlers,
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: "assertive",
+    accessibilityLabel: a11yLabel,
+    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: Animated.add(translateY, new Animated.Value(stackTranslate))
+      }, {
+        translateX
+      }, {
+        scale: stackScale
+      }]
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.tintBar, {
+        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,
+            fontWeight: theme.typography.fontWeight.semibold
+          }],
+          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'
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: tint,
+            fontSize: theme.typography.fontSize.sm,
+            fontWeight: theme.typography.fontWeight.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,
+    width: 4
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8
+  },
+  iconCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  iconGlyph: {
+    fontSize: 16,
+    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,187 @@
+"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 { Toast, default } from "./Toast.js";
+export { ToastProvider, useToast, toast } from "./ToastProvider.js";
+//# sourceMappingURL=index.js.map