@webority-technologies/mobile 0.0.1

package/lib/module/components/Field/Field.js

@@ -0,0 +1,123 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Field = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    helperText,
+    error,
+    required = false,
+    children,
+    layout = 'stacked',
+    labelStyle,
+    helperStyle,
+    errorStyle,
+    containerStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const errorOpacity = useRef(new Animated.Value(error ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(errorOpacity, {
+      toValue: error ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true
+    }).start();
+  }, [error, errorOpacity]);
+  const computedAccessibilityLabel = useMemo(() => {
+    if (accessibilityLabel) return accessibilityLabel;
+    if (!label) return undefined;
+    return error ? `${label}, error: ${error}` : label;
+  }, [accessibilityLabel, label, error]);
+  const labelNode = label ? /*#__PURE__*/_jsxs(Text, {
+    style: [styles.label, layout === 'inline' ? styles.labelInline : null, labelStyle],
+    children: [label, required ? /*#__PURE__*/_jsx(Text, {
+      style: styles.requiredMark,
+      children: " *"
+    }) : null]
+  }) : null;
+  const inputContainerStyle = layout === 'inline' ? styles.inputInline : styles.inputStacked;
+  const showError = Boolean(error);
+  const showHelper = !showError && Boolean(helperText);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [layout === 'inline' ? styles.rootInline : styles.rootStacked, containerStyle],
+    accessibilityLabel: computedAccessibilityLabel
+    // Surface the invalid state to assistive tech via the hint. RN's
+    // AccessibilityState type does not expose an `invalid` field, so the
+    // error message itself is folded into the label and hint.
+    ,
+    accessibilityHint: error ? error : undefined,
+    testID: testID,
+    children: [layout === 'inline' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [labelNode, /*#__PURE__*/_jsx(View, {
+        style: inputContainerStyle,
+        children: children
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [labelNode, /*#__PURE__*/_jsx(View, {
+        style: inputContainerStyle,
+        children: children
+      })]
+    }), showHelper ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.helper, helperStyle],
+      numberOfLines: 2,
+      children: helperText
+    }) : null, error ? /*#__PURE__*/_jsx(Animated.Text, {
+      style: [styles.error, {
+        opacity: errorOpacity
+      }, errorStyle],
+      numberOfLines: 2,
+      accessibilityLiveRegion: "polite",
+      children: error
+    }) : null]
+  });
+});
+Field.displayName = 'Field';
+const buildStyles = theme => StyleSheet.create({
+  rootStacked: {
+    flexDirection: 'column',
+    gap: theme.spacing.xs
+  },
+  rootInline: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.spacing.xs
+  },
+  label: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium,
+    color: theme.colors.text.secondary
+  },
+  labelInline: {
+    width: '35%'
+  },
+  requiredMark: {
+    color: theme.colors.error,
+    fontWeight: theme.typography.fontWeight.medium
+  },
+  inputStacked: {
+    width: '100%'
+  },
+  inputInline: {
+    flex: 1,
+    minWidth: 0
+  },
+  helper: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text.tertiary
+  },
+  error: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.error
+  }
+});
+export { Field };
+export default Field;
+//# sourceMappingURL=Field.js.map

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

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

package/lib/module/components/ForceUpdateDialog/ForceUpdateDialog.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import React, { useCallback, useState } from 'react';
+import { Dialog } from "../Dialog/index.js";
+import { VersionCheck } from "../../versionCheck/index.js";
+import { Logger } from "../../logger/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Drop-in update prompt that opens the App Store / Play Store on tap.
+ * Pair this with `useVersionCheck()` — render it when `isUpdateRequired` is true.
+ *
+ * @example
+ * const { isUpdateRequired, updateUrl } = useVersionCheck(isAppReady);
+ * return (
+ *   <ForceUpdateDialog
+ *     visible={isUpdateRequired}
+ *     mandatory
+ *     updateUrl={updateUrl}
+ *   />
+ * );
+ */
+export const ForceUpdateDialog = ({
+  visible,
+  onClose,
+  mandatory = false,
+  updateUrl,
+  title = 'Update available',
+  message = 'A new version of the app is available. Please update to continue using the latest features and security improvements.',
+  updateLabel = 'Update now',
+  laterLabel = 'Later'
+}) => {
+  const [updating, setUpdating] = useState(false);
+  const handleUpdate = useCallback(() => {
+    setUpdating(true);
+    void (async () => {
+      try {
+        await VersionCheck.openUpdateUrl(updateUrl ?? null);
+      } catch (error) {
+        Logger.error('[ForceUpdateDialog] Failed to open store URL', error);
+      } finally {
+        setUpdating(false);
+      }
+    })();
+  }, [updateUrl]);
+  const handleClose = useCallback(() => {
+    if (mandatory) return;
+    onClose?.();
+  }, [mandatory, onClose]);
+  const actions = mandatory ? [{
+    label: updateLabel,
+    onPress: handleUpdate,
+    tone: 'primary',
+    loading: updating
+  }] : [{
+    label: laterLabel,
+    onPress: handleClose,
+    tone: 'neutral'
+  }, {
+    label: updateLabel,
+    onPress: handleUpdate,
+    tone: 'primary',
+    loading: updating
+  }];
+  return /*#__PURE__*/_jsx(Dialog, {
+    visible: visible,
+    onClose: handleClose,
+    title: title,
+    message: message,
+    variant: "info",
+    actions: actions,
+    dismissOnAction: false
+  });
+};
+export default ForceUpdateDialog;
+//# sourceMappingURL=ForceUpdateDialog.js.map

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

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

package/lib/module/components/Header/Header.js

@@ -0,0 +1,335 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const variantSize = (theme, variant) => {
+  switch (variant) {
+    case 'compact':
+      return {
+        height: 44,
+        titleSize: theme.typography.fontSize.lg,
+        titleWeight: 'semibold',
+        alignBottom: false
+      };
+    case 'large':
+      return {
+        height: 96,
+        titleSize: theme.typography.fontSize['2xl'],
+        titleWeight: 'bold',
+        alignBottom: true
+      };
+    case 'default':
+    default:
+      return {
+        height: 56,
+        titleSize: theme.typography.fontSize.lg,
+        titleWeight: 'semibold',
+        alignBottom: false
+      };
+  }
+};
+const ActionButton = ({
+  action,
+  side
+}) => {
+  const theme = useTheme();
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: true
+  });
+  const styles = useMemo(() => buildActionStyles(theme), [theme]);
+  const onPress = () => {
+    triggerHaptic('selection');
+    action.onPress();
+  };
+  const badgeValue = action.badge;
+  const badgeIsDot = typeof badgeValue === 'number' && badgeValue === 0;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      onPress: onPress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel,
+      testID: action.testID,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: true
+      },
+      style: ({
+        pressed
+      }) => [styles.actionButton, side === 'left' ? styles.actionLeft : styles.actionRight, pressed ? styles.actionPressed : null],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.iconWrap,
+        children: action.icon
+      }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/_jsx(View, {
+        style: styles.badge,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.badgeText,
+          numberOfLines: 1,
+          children: String(badgeValue)
+        })
+      }) : null]
+    })
+  });
+};
+const COLLAPSE_RANGE = 60;
+const LARGE_TITLE_SCALE_END = 0.71; // 2xl(24) -> lg(~17) ≈ 0.71
+
+const Header = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    subtitle,
+    titleAlignment = 'left',
+    leftAction,
+    rightActions,
+    variant = 'default',
+    transparent = false,
+    scrollY,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const v = useMemo(() => variantSize(theme, variant), [theme, variant]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const isCollapsing = variant === 'large' && scrollY !== undefined;
+
+  // Interpolations for the collapsing-app-bar behaviour. Native driver supports
+  // transform/opacity; height + borderBottomWidth must run on the JS driver and
+  // are wired through the same scrollY (RN coalesces the listener).
+  const collapse = useMemo(() => {
+    if (!scrollY) return null;
+    const clamp = {
+      inputRange: [0, COLLAPSE_RANGE],
+      extrapolate: 'clamp'
+    };
+    return {
+      titleScale: scrollY.interpolate({
+        ...clamp,
+        outputRange: [1, LARGE_TITLE_SCALE_END]
+      }),
+      // Translate the large title from bottom-left up into the compact bar
+      // area. Approximate vertical travel = (large 96 - default 56) / 2.
+      titleTranslateY: scrollY.interpolate({
+        ...clamp,
+        outputRange: [0, -20]
+      }),
+      titleTranslateX: scrollY.interpolate({
+        ...clamp,
+        // Left-align large -> centred compact: nudge slightly toward centre.
+        outputRange: titleAlignment === 'center' ? [0, 0] : [0, 8]
+      }),
+      subtitleOpacity: scrollY.interpolate({
+        inputRange: [0, COLLAPSE_RANGE / 2],
+        outputRange: [1, 0],
+        extrapolate: 'clamp'
+      }),
+      barHeight: scrollY.interpolate({
+        ...clamp,
+        outputRange: [96, 56]
+      }),
+      borderOpacity: scrollY.interpolate({
+        ...clamp,
+        outputRange: [0, 1]
+      })
+    };
+  }, [scrollY, titleAlignment]);
+  const titleNode = title ? /*#__PURE__*/_jsx(Animated.Text, {
+    style: [styles.title, {
+      fontSize: v.titleSize,
+      fontWeight: theme.typography.fontWeight[v.titleWeight],
+      textAlign: titleAlignment === 'center' ? 'center' : 'left'
+    }, isCollapsing && collapse ? {
+      transform: [{
+        translateX: collapse.titleTranslateX
+      }, {
+        translateY: collapse.titleTranslateY
+      }, {
+        scale: collapse.titleScale
+      }]
+    } : null],
+    numberOfLines: 1,
+    children: title
+  }) : null;
+  const subtitleNode = subtitle ? /*#__PURE__*/_jsx(Animated.Text, {
+    style: [styles.subtitle, {
+      textAlign: titleAlignment === 'center' ? 'center' : 'left'
+    }, isCollapsing && collapse ? {
+      opacity: collapse.subtitleOpacity
+    } : null],
+    numberOfLines: 1,
+    children: subtitle
+  }) : null;
+  const titleBlock = /*#__PURE__*/_jsxs(View, {
+    style: [styles.titleColumn, titleAlignment === 'center' ? styles.titleColumnCenter : null, v.alignBottom ? styles.titleColumnBottom : null],
+    children: [titleNode, subtitleNode]
+  });
+
+  // Whole-bar height needs the JS driver (height isn't transform/opacity).
+  // Border opacity is animated via a dedicated overlay so the underlying
+  // background stays on the native driver.
+  const RootContainer = isCollapsing ? Animated.View : View;
+  const rootHeightStyle = isCollapsing && collapse ? {
+    height: Animated.add(collapse.barHeight, new Animated.Value(insets.top))
+  } : {
+    height: v.height + insets.top
+  };
+  return /*#__PURE__*/_jsxs(RootContainer, {
+    ref: ref,
+    accessibilityRole: "header",
+    testID: testID,
+    style: [styles.root, {
+      paddingTop: insets.top,
+      backgroundColor: transparent ? 'transparent' : theme.colors.background.elevated
+    }, rootHeightStyle,
+    // Static border for non-collapsing case; collapsing case overlays an
+    // animated border below.
+    !isCollapsing ? {
+      borderBottomWidth: transparent ? 0 : StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border.primary
+    } : null, style],
+    children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.animatedBorder, {
+        backgroundColor: theme.colors.border.primary,
+        opacity: collapse.borderOpacity
+      }]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.row, v.alignBottom ? styles.rowAlignBottom : null, {
+        flex: 1
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.sideSlot,
+        children: leftAction ? /*#__PURE__*/_jsx(ActionButton, {
+          action: leftAction,
+          side: "left"
+        }) : null
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
+        children: titleBlock
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.sideSlot, styles.sideSlotRight],
+        children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+          action: action,
+          side: "right"
+        }, `header-right-${index}`))
+      })]
+    })]
+  });
+});
+Header.displayName = 'Header';
+const buildStyles = theme => StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.xs
+  },
+  rowAlignBottom: {
+    alignItems: 'flex-end',
+    paddingBottom: theme.spacing.sm
+  },
+  sideSlot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 48
+  },
+  sideSlotRight: {
+    justifyContent: 'flex-end'
+  },
+  center: {
+    flex: 1,
+    paddingHorizontal: theme.spacing.xs
+  },
+  centerAligned: {
+    alignItems: 'center'
+  },
+  centerLeft: {
+    alignItems: 'flex-start'
+  },
+  titleColumn: {
+    flexDirection: 'column'
+  },
+  titleColumnCenter: {
+    alignItems: 'center'
+  },
+  titleColumnBottom: {
+    justifyContent: 'flex-end'
+  },
+  title: {
+    color: theme.colors.text.primary
+  },
+  subtitle: {
+    marginTop: 2,
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.normal
+  },
+  animatedBorder: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: StyleSheet.hairlineWidth
+  }
+});
+const buildActionStyles = theme => StyleSheet.create({
+  actionButton: {
+    width: 40,
+    height: 40,
+    borderRadius: theme.radius.full,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actionLeft: {
+    marginRight: theme.spacing.xs
+  },
+  actionRight: {
+    marginLeft: theme.spacing.xs
+  },
+  actionPressed: {
+    backgroundColor: theme.colors.surface.pressed
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badge: {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+    minWidth: 16,
+    height: 16,
+    paddingHorizontal: 4,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.colors.error,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeText: {
+    color: theme.colors.text.inverse,
+    fontSize: 10,
+    fontWeight: theme.typography.fontWeight.semibold,
+    lineHeight: 12
+  }
+});
+export { Header };
+export default Header;
+//# sourceMappingURL=Header.js.map

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

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

package/lib/module/components/Icon/Icon.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - react-native-vector-icons ships no bundled types in this version
+import Feather from 'react-native-vector-icons/Feather';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - react-native-vector-icons ships no bundled types in this version
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - react-native-vector-icons ships no bundled types in this version
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - react-native-vector-icons ships no bundled types in this version
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const sizeMap = {
+  xs: 14,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+const resolveSize = size => {
+  if (typeof size === 'number') return size;
+  return sizeMap[size];
+};
+const resolveToneColor = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return theme.colors.primary;
+    case 'secondary':
+      return theme.colors.text.secondary;
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'info':
+      return theme.colors.info;
+    case 'muted':
+      return theme.colors.text.tertiary;
+    default:
+      return theme.colors.text.primary;
+  }
+};
+const resolveFamily = family => {
+  switch (family) {
+    case 'material-community':
+      return MaterialCommunityIcons;
+    case 'material':
+      return MaterialIcons;
+    case 'ionicons':
+      return Ionicons;
+    case 'feather':
+    default:
+      return Feather;
+  }
+};
+const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    name,
+    family = 'feather',
+    size = 'md',
+    color,
+    tone,
+    style,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(), []);
+  const resolvedSize = resolveSize(size);
+  const resolvedColor = color ?? resolveToneColor(theme, tone);
+  const Family = resolveFamily(family);
+  const a11yProps = accessibilityLabel ? {
+    accessibilityRole: 'image',
+    accessibilityLabel,
+    accessible: true
+  } : {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: 'no'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.wrapper, {
+      width: resolvedSize,
+      height: resolvedSize
+    }, style],
+    testID: testID,
+    ...a11yProps,
+    children: /*#__PURE__*/_jsx(Family, {
+      name: name,
+      size: resolvedSize,
+      color: resolvedColor
+    })
+  });
+});
+Icon.displayName = 'Icon';
+const buildStyles = () => StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export { Icon };
+export default Icon;
+//# sourceMappingURL=Icon.js.map

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

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