@webority-technologies/mobile 0.0.1

package/lib/module/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,179 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  small: 20,
+  medium: 32,
+  large: 48
+};
+const DOT_COUNT = 3;
+const DOT_STAGGER_MS = 150;
+const DOT_CYCLE_MS = 600;
+const Dot = ({
+  size,
+  color,
+  delay,
+  duration
+}) => {
+  const scale = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const animation = Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(scale, {
+      toValue: 1.4,
+      duration: duration / 2,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(scale, {
+      toValue: 1,
+      duration: duration / 2,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true
+    })]));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [scale, delay, duration]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: color,
+      transform: [{
+        scale
+      }]
+    }
+  });
+};
+const LoadingSpinner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    size = 'medium',
+    color,
+    message,
+    overlay = false,
+    backdropColor,
+    variant = 'circular',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const fade = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [fade, theme]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const dimension = sizeMap[size];
+  const resolvedColor = color ?? theme.colors.primary;
+  const resolvedBackdrop = backdropColor ?? theme.colors.background.overlay;
+  const indicator = useMemo(() => {
+    if (variant === 'dots') {
+      const dotSize = Math.max(6, Math.round(dimension / 4));
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.dotsRow, {
+          gap: Math.round(dotSize / 2)
+        }],
+        children: Array.from({
+          length: DOT_COUNT
+        }).map((_, i) => /*#__PURE__*/_jsx(Dot, {
+          size: dotSize,
+          color: resolvedColor,
+          delay: i * DOT_STAGGER_MS,
+          duration: DOT_CYCLE_MS
+        }, i))
+      });
+    }
+    return /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: resolvedColor,
+      size: size === 'small' ? 'small' : 'large',
+      style: {
+        width: dimension,
+        height: dimension
+      }
+    });
+  }, [variant, size, dimension, resolvedColor, styles.dotsRow]);
+  const a11yLabel = accessibilityLabel ?? message ?? 'Loading';
+  const inner = /*#__PURE__*/_jsxs(Animated.View, {
+    ref: ref,
+    accessible: true,
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      busy: true
+    },
+    testID: testID,
+    style: [overlay ? styles.overlayContent : styles.inlineContent, {
+      opacity: fade
+    }],
+    children: [indicator, message ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.message, {
+        color: theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginTop: theme.spacing.md
+      }],
+      numberOfLines: 2,
+      children: message
+    }) : null]
+  });
+  if (overlay) {
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "auto",
+      style: [styles.overlay, {
+        backgroundColor: resolvedBackdrop
+      }, style],
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.inline, style],
+    children: inner
+  });
+});
+LoadingSpinner.displayName = 'LoadingSpinner';
+const buildStyles = theme => StyleSheet.create({
+  inline: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inlineContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000
+  },
+  overlayContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.lg,
+    paddingHorizontal: theme.spacing.xl,
+    paddingVertical: theme.spacing.xl,
+    minWidth: 140,
+    ...theme.shadows.lg
+  },
+  dotsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  }
+});
+export { LoadingSpinner };
+export default LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.js.map

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

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

package/lib/module/components/Modal/Modal.js

@@ -0,0 +1,235 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { AccessibilityInfo, Animated, Dimensions, findNodeHandle, Modal as RNModal, Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Modal = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    visible,
+    onRequestClose,
+    presentation = 'centered',
+    backdropOpacity = 0.5,
+    backdropPressClose = true,
+    animationDuration,
+    accessibilityLabel,
+    hardwareBackPress = true,
+    children,
+    contentStyle,
+    backdropStyle,
+    restoreFocusRef,
+    testID
+  } = props;
+  const theme = useTheme();
+  const duration = animationDuration ?? theme.motion.duration.normal;
+  const screenHeight = Dimensions.get('window').height;
+  const backdropAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+  const translateYAnim = useRef(new Animated.Value(screenHeight)).current;
+  const containerRef = useRef(null);
+  const wasVisibleRef = useRef(false);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  useEffect(() => {
+    if (visible) {
+      Animated.timing(backdropAnim, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }).start();
+      if (presentation === 'bottom') {
+        Animated.spring(translateYAnim, {
+          toValue: 0,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        }).start();
+      } else {
+        Animated.parallel([Animated.spring(scaleAnim, {
+          toValue: 1,
+          damping: theme.motion.spring.gentle.damping,
+          stiffness: theme.motion.spring.gentle.stiffness,
+          mass: theme.motion.spring.gentle.mass,
+          useNativeDriver: true
+        }), Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration,
+          useNativeDriver: true
+        })]).start();
+      }
+    } else {
+      backdropAnim.setValue(0);
+      scaleAnim.setValue(0.9);
+      opacityAnim.setValue(0);
+      translateYAnim.setValue(screenHeight);
+    }
+  }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass]);
+
+  // Accessibility focus trap: when the modal opens, push screen-reader focus
+  // into the dialog container after the mount animation; when it closes,
+  // restore focus to the trigger element if the consumer provided a ref.
+  useEffect(() => {
+    let openTimer;
+    let closeTimer;
+    if (visible) {
+      openTimer = setTimeout(() => {
+        const handle = containerRef.current ? findNodeHandle(containerRef.current) : null;
+        if (handle != null) {
+          AccessibilityInfo.setAccessibilityFocus(handle);
+        }
+      }, 150);
+      wasVisibleRef.current = true;
+    } else if (wasVisibleRef.current) {
+      wasVisibleRef.current = false;
+      if (restoreFocusRef && restoreFocusRef.current) {
+        closeTimer = setTimeout(() => {
+          const target = restoreFocusRef.current;
+          const handle = target ? findNodeHandle(target) : null;
+          if (handle != null) {
+            AccessibilityInfo.setAccessibilityFocus(handle);
+          }
+        }, duration);
+      }
+    }
+    return () => {
+      if (openTimer) clearTimeout(openTimer);
+      if (closeTimer) clearTimeout(closeTimer);
+    };
+  }, [visible, duration, restoreFocusRef]);
+  const handleBackdropPress = useCallback(() => {
+    if (!backdropPressClose) return;
+    triggerHaptic('selection');
+    onRequestClose();
+  }, [backdropPressClose, onRequestClose]);
+  const handleHardwareBack = useCallback(() => {
+    if (hardwareBackPress) {
+      onRequestClose();
+    }
+  }, [hardwareBackPress, onRequestClose]);
+  const containerStyle = useMemo(() => {
+    if (presentation === 'fullScreen') {
+      return [styles.fullScreenContent, {
+        backgroundColor: theme.colors.background.elevated
+      }];
+    }
+    if (presentation === 'bottom') {
+      return [styles.bottomContent, {
+        backgroundColor: theme.colors.background.elevated,
+        borderTopLeftRadius: theme.radius.xl,
+        borderTopRightRadius: theme.radius.xl,
+        padding: theme.spacing.lg
+      }, theme.shadows.xl];
+    }
+    return [styles.centeredContent, {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.xl,
+      padding: theme.spacing.xl
+    }, theme.shadows.xl];
+  }, [presentation, theme, styles]);
+  const wrapperStyle = useMemo(() => {
+    if (presentation === 'bottom') return styles.bottomWrapper;
+    if (presentation === 'fullScreen') return styles.fullScreenWrapper;
+    return styles.centeredWrapper;
+  }, [presentation, styles]);
+  const animatedTransform = useMemo(() => {
+    if (presentation === 'bottom') {
+      return {
+        transform: [{
+          translateY: translateYAnim
+        }]
+      };
+    }
+    if (presentation === 'fullScreen') {
+      return {
+        opacity: opacityAnim
+      };
+    }
+    return {
+      opacity: opacityAnim,
+      transform: [{
+        scale: scaleAnim
+      }]
+    };
+  }, [presentation, scaleAnim, opacityAnim, translateYAnim]);
+  return /*#__PURE__*/_jsx(RNModal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleHardwareBack,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      ref: node => {
+        containerRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      style: styles.root,
+      accessible: true,
+      accessibilityViewIsModal: true,
+      accessibilityRole: 'dialog',
+      accessibilityLabel: accessibilityLabel,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [StyleSheet.absoluteFillObject, {
+          backgroundColor: theme.colors.background.inverse,
+          opacity: backdropAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, backdropOpacity]
+          })
+        }, backdropStyle],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFillObject,
+          onPress: handleBackdropPress,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close modal",
+          disabled: !backdropPressClose
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: wrapperStyle,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: [containerStyle, animatedTransform, contentStyle],
+          pointerEvents: "auto",
+          children: children
+        })
+      })]
+    })
+  });
+});
+Modal.displayName = 'Modal';
+const buildStyles = _theme => StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  centeredWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  centeredContent: {
+    maxWidth: '90%',
+    width: '90%'
+  },
+  bottomWrapper: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  bottomContent: {
+    width: '100%'
+  },
+  fullScreenWrapper: {
+    flex: 1
+  },
+  fullScreenContent: {
+    flex: 1
+  }
+});
+export { Modal };
+export default Modal;
+//# sourceMappingURL=Modal.js.map

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

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