@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Toast/Toast.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toast = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.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); }
+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 = (0, _index.useTheme)();
+  const variant = toast.variant ?? 'default';
+  const position = toast.position ?? 'bottom';
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
+  const enterFrom = position === 'top' ? -120 : 120;
+  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(enterFrom)).current;
+  const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const dismissedRef = (0, _react.useRef)(false);
+  const dismiss = (animateOut = true) => {
+    if (dismissedRef.current) return;
+    dismissedRef.current = true;
+    if (animateOut) {
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(translateY, {
+        toValue: enterFrom,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start(() => onDismiss(toast.id));
+    } else {
+      onDismiss(toast.id);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
+      toValue: 0,
+      damping: 18,
+      stiffness: 180,
+      mass: 1,
+      useNativeDriver: true
+    }), _reactNative.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 = (0, _react.useMemo)(() => _reactNative.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;
+        _reactNative.Animated.parallel([_reactNative.Animated.timing(translateX, {
+          toValue: direction * 500,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(opacity, {
+          toValue: 0,
+          duration: theme.motion.duration.fast,
+          useNativeDriver: true
+        })]).start(() => {
+          dismissedRef.current = true;
+          onDismiss(toast.id);
+        });
+      } else {
+        _reactNative.Animated.parallel([_reactNative.Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: true
+        }), _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.iconCircle, {
+        backgroundColor: tint + '22'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.iconGlyph, {
+          color: tint
+        }],
+        accessible: false,
+        children: glyph
+      })
+    });
+  };
+  const a11yLabel = toast.description ? `${toast.message}. ${toast.description}` : toast.message;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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: _reactNative.Animated.add(translateY, new _reactNative.Animated.Value(stackTranslate))
+      }, {
+        translateX
+      }, {
+        scale: stackScale
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.tintBar, {
+        backgroundColor: tint
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textBlock,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.description, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          numberOfLines: 3,
+          children: toast.description
+        }) : null]
+      }), toast.action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: toast.action.label,
+        onPress: handleActionPress,
+        style: ({
+          pressed
+        }) => [styles.actionBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: tint,
+            fontSize: theme.typography.fontSize.sm,
+            fontWeight: theme.typography.fontWeight.semibold
+          },
+          numberOfLines: 1,
+          children: toast.action.label
+        })
+      }) : null]
+    })]
+  });
+};
+exports.Toast = Toast;
+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 => _reactNative.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
+  }
+});
+var _default = exports.default = Toast;
+//# sourceMappingURL=Toast.js.map

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

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToast = exports.toast = exports.ToastProvider = 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 _hapticUtils = require("../../utils/hapticUtils.js");
+var _Toast = _interopRequireDefault(require("./Toast.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const MAX_VISIBLE = 3;
+const ToastContext = /*#__PURE__*/(0, _react.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;
+const ToastProvider = ({
+  children,
+  maxVisible = MAX_VISIBLE,
+  topOffset,
+  bottomOffset
+}) => {
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [queue, setQueue] = (0, _react.useState)([]);
+  const queueRef = (0, _react.useRef)([]);
+  queueRef.current = queue;
+  const hide = (0, _react.useCallback)(id => {
+    setQueue(prev => prev.filter(t => t.id !== id));
+  }, []);
+  const hideAll = (0, _react.useCallback)(() => {
+    setQueue([]);
+  }, []);
+  const show = (0, _react.useCallback)(opts => {
+    const id = makeId();
+    const item = {
+      ...opts,
+      id
+    };
+    const haptic = opts.haptic === undefined ? defaultHaptic(opts.variant) : opts.haptic;
+    if (haptic !== false) (0, _hapticUtils.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 = (0, _react.useMemo)(() => ({
+    show,
+    hide,
+    hideAll
+  }), [show, hide, hideAll]);
+  (0, _react.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 = (0, _react.useMemo)(() => buildStyles(), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContext.Provider, {
+    value: api,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+        toast: toast,
+        index: topToasts.length - 1 - idx,
+        onDismiss: hide
+      }, toast.id))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+        toast: toast,
+        index: bottomToasts.length - 1 - idx,
+        onDismiss: hide
+      }, toast.id))
+    })]
+  });
+};
+exports.ToastProvider = ToastProvider;
+const useToast = () => {
+  const ctx = (0, _react.useContext)(ToastContext);
+  if (!ctx) {
+    throw new Error('useToast must be used within a <ToastProvider>.');
+  }
+  return ctx;
+};
+exports.useToast = useToast;
+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 : '';
+};
+const toast = exports.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 = () => _reactNative.StyleSheet.create({
+  layer: {
+    position: 'absolute',
+    left: 0,
+    right: 0
+  },
+  top: {
+    alignItems: 'stretch'
+  },
+  bottom: {
+    alignItems: 'stretch'
+  }
+});
+//# sourceMappingURL=ToastProvider.js.map

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.Toast;
+  }
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.ToastProvider;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.toast;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.useToast;
+  }
+});
+var _Toast = _interopRequireWildcard(require("./Toast.js"));
+var _ToastProvider = require("./ToastProvider.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