@webority-technologies/mobile-ui 0.0.1 → 0.0.2

package/lib/module/components/AuthedImage/authedImageCache.js

@@ -0,0 +1,239 @@
+"use strict";
+
+import { ACCESS_TOKEN_KEY, getToken, isStorageAvailable, Logger, Storage } from '@webority-technologies/mobile-core';
+const KEY_PREFIX = '@webority/authed-image/v1/';
+const DATA_PREFIX = `${KEY_PREFIX}d/`;
+const META_PREFIX = `${KEY_PREFIX}m/`;
+const DEFAULT_BYTE_CEILING = 50 * 1024 * 1024;
+export const DEFAULT_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+let byteCeiling = DEFAULT_BYTE_CEILING;
+
+/**
+ * Ceiling for the total stored size of cached images. Exceeding it evicts the
+ * least recently used entries. An image cache with no ceiling grows until the
+ * OS reclaims the app's storage, which is the defect this replaces.
+ */
+export const setAuthedImageCacheLimit = bytes => {
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    throw new Error('[@webority-technologies/mobile-ui] setAuthedImageCacheLimit() needs a positive number of ' + `bytes, received ${String(bytes)}. Pass e.g. 50 * 1024 * 1024 for 50 MB.`);
+  }
+  byteCeiling = bytes;
+};
+export const getAuthedImageCacheLimit = () => byteCeiling;
+const hashString = input => {
+  let h1 = 0x811c9dc5;
+  let h2 = 0x1000193;
+  for (let i = 0; i < input.length; i += 1) {
+    const code = input.charCodeAt(i);
+    h1 = Math.imul(h1 ^ code, 16777619) >>> 0;
+    h2 = (Math.imul(h2 + code, 2654435761) ^ h2 >>> 7) >>> 0;
+  }
+  return `${h1.toString(16)}${h2.toString(16)}${input.length.toString(16)}`;
+};
+
+/**
+ * Hex only by construction, so it is always a safe storage key segment.
+ */
+export const deriveCacheKey = (uri, override) => hashString(override ?? uri);
+const B64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const encodeBase64 = buffer => {
+  const bytes = new Uint8Array(buffer);
+  let out = '';
+  for (let i = 0; i < bytes.length; i += 3) {
+    const b0 = bytes[i];
+    const b1 = i + 1 < bytes.length ? bytes[i + 1] : undefined;
+    const b2 = i + 2 < bytes.length ? bytes[i + 2] : undefined;
+    out += B64_ALPHABET[b0 >> 2];
+    out += B64_ALPHABET[(b0 & 0x03) << 4 | (b1 ?? 0) >> 4];
+    out += b1 === undefined ? '=' : B64_ALPHABET[((b1 & 0x0f) << 2 | (b2 ?? 0) >> 6) & 0x3f];
+    out += b2 === undefined ? '=' : B64_ALPHABET[b2 & 0x3f];
+  }
+  return out;
+};
+
+/**
+ * The cache is an OPTIMISATION, so a failing store must never stop an image
+ * rendering. That used to mean guarding on whether a backend existed at all,
+ * warning once and skipping the cache; under Expo-first the backend ships with
+ * the library, so "no backend" is no longer a state an app can be in and that
+ * branch was unreachable.
+ *
+ * What remains is a store that exists and FAILS, which the per-operation error
+ * handling below already covers: each read returns null and each write returns
+ * false, the image still fetches, and nothing is logged per image.
+ */
+const cacheUsable = () => isStorageAvailable();
+export const readEntry = async cacheKey => {
+  if (!cacheUsable()) {
+    return null;
+  }
+  const values = await Storage.multiGet([`${DATA_PREFIX}${cacheKey}`, `${META_PREFIX}${cacheKey}`]);
+  const dataUri = values[`${DATA_PREFIX}${cacheKey}`];
+  const rawMeta = values[`${META_PREFIX}${cacheKey}`];
+  if (!dataUri || !rawMeta) {
+    return null;
+  }
+  try {
+    return {
+      dataUri,
+      meta: JSON.parse(rawMeta)
+    };
+  } catch {
+    return null;
+  }
+};
+export const isFresh = (meta, ttlMs, now = Date.now()) => now - meta.fetchedAt < ttlMs;
+export const touchEntry = async (cacheKey, meta) => {
+  if (!cacheUsable()) {
+    return;
+  }
+  await Storage.setItem(`${META_PREFIX}${cacheKey}`, JSON.stringify({
+    ...meta,
+    lastAccessedAt: Date.now()
+  }));
+};
+const listMeta = async () => {
+  if (!cacheUsable()) {
+    return [];
+  }
+  const keys = await Storage.getAllKeys();
+  const metaKeys = keys.filter(key => key.startsWith(META_PREFIX));
+  if (metaKeys.length === 0) {
+    return [];
+  }
+  const values = await Storage.multiGet(metaKeys);
+  const out = [];
+  for (const key of metaKeys) {
+    const raw = values[key];
+    if (!raw) {
+      continue;
+    }
+    try {
+      out.push({
+        cacheKey: key.slice(META_PREFIX.length),
+        meta: JSON.parse(raw)
+      });
+    } catch {
+      // A meta entry we cannot parse is unusable; dropping it from the ledger
+      // lets the next eviction pass remove its orphaned data entry.
+    }
+  }
+  return out;
+};
+const evictIfNeeded = async () => {
+  const entries = await listMeta();
+  let total = entries.reduce((sum, entry) => sum + entry.meta.bytes, 0);
+  if (total <= byteCeiling) {
+    return;
+  }
+  const ordered = [...entries].sort((a, b) => a.meta.lastAccessedAt - b.meta.lastAccessedAt);
+  const doomed = [];
+  for (const entry of ordered) {
+    if (total <= byteCeiling) {
+      break;
+    }
+    doomed.push(`${DATA_PREFIX}${entry.cacheKey}`, `${META_PREFIX}${entry.cacheKey}`);
+    total -= entry.meta.bytes;
+  }
+  if (doomed.length > 0) {
+    await Storage.multiRemove(doomed);
+    Logger.info(`[AuthedImage] evicted ${doomed.length / 2} cached image(s) over the byte ceiling`);
+  }
+};
+export const clearAuthedImageCache = async () => {
+  if (!cacheUsable()) {
+    return;
+  }
+  const keys = await Storage.getAllKeys();
+  const ours = keys.filter(key => key.startsWith(KEY_PREFIX));
+  if (ours.length > 0) {
+    await Storage.multiRemove(ours);
+  }
+};
+export const authedImageCacheStats = async () => {
+  const entries = await listMeta();
+  return {
+    entries: entries.length,
+    bytes: entries.reduce((sum, entry) => sum + entry.meta.bytes, 0)
+  };
+};
+const fetchAndStore = async (cacheKey, options, signal) => {
+  const headers = {
+    ...options.headers
+  };
+  if (options.authenticated) {
+    const stored = await getToken(ACCESS_TOKEN_KEY);
+    if (stored?.token) {
+      headers.Authorization = `Bearer ${stored.token}`;
+    }
+  }
+  const response = await fetch(options.uri, {
+    headers,
+    signal
+  });
+  if (!response.ok) {
+    throw new Error(`[@webority-technologies/mobile-ui] AuthedImage could not load "${options.uri}": the server ` + `answered ${response.status}. Check the URL and whether the request needs a bearer token ` + '(pass authenticated={false} for public media).');
+  }
+  const buffer = await response.arrayBuffer();
+  const rawType = response.headers?.get?.('content-type');
+  const contentType = (rawType ? rawType.split(';')[0].trim() : '') || 'image/jpeg';
+  const dataUri = `data:${contentType};base64,${encodeBase64(buffer)}`;
+  const now = Date.now();
+  // `bytes` measures the stored data URI, not the decoded image: the ceiling
+  // exists to bound what sits in storage, and base64 costs about a third more.
+  const meta = {
+    fetchedAt: now,
+    bytes: dataUri.length,
+    contentType,
+    lastAccessedAt: now
+  };
+  if (cacheUsable()) {
+    await Storage.multiSet({
+      [`${DATA_PREFIX}${cacheKey}`]: dataUri,
+      [`${META_PREFIX}${cacheKey}`]: JSON.stringify(meta)
+    });
+    await evictIfNeeded();
+  }
+  return {
+    dataUri,
+    meta
+  };
+};
+const inFlight = new Map();
+
+/**
+ * Two mounts of the same image share one request. The controller is aborted
+ * only when the last waiter releases, so one unmount cannot cancel the fetch
+ * another mount is still waiting on.
+ */
+export const acquireFetch = (cacheKey, options) => {
+  const existing = inFlight.get(cacheKey);
+  if (existing) {
+    existing.waiters += 1;
+    return existing;
+  }
+  const controller = new AbortController();
+  const entry = {
+    controller,
+    waiters: 1,
+    promise: Promise.resolve()
+  };
+  entry.promise = fetchAndStore(cacheKey, options, controller.signal).finally(() => {
+    if (inFlight.get(cacheKey) === entry) {
+      inFlight.delete(cacheKey);
+    }
+  });
+  inFlight.set(cacheKey, entry);
+  return entry;
+};
+export const releaseFetch = (cacheKey, entry) => {
+  entry.waiters -= 1;
+  if (entry.waiters > 0) {
+    return;
+  }
+  if (inFlight.get(cacheKey) === entry) {
+    inFlight.delete(cacheKey);
+  }
+  entry.controller.abort();
+};
+//# sourceMappingURL=authedImageCache.js.map

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

@@ -0,0 +1,5 @@
+"use strict";
+
+export { AuthedImage, default } from "./AuthedImage.js";
+export { authedImageCacheStats, clearAuthedImageCache, getAuthedImageCacheLimit, setAuthedImageCacheLimit } from "./authedImageCache.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -120,6 +120,12 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Convert a snap-point index → translateY position. -1 = closed.
   const yForIndex = useCallback(idx => {
+    // NOT dead code, despite every ordinary call site clamping first.
+    // `expand()` has no empty-snapPoints guard (unlike `collapse`), so with
+    // snapPoints={[]} it arrives here out of range — and without this,
+    // `screenHeight - resolvedSnapPoints[idx]` is `screenHeight - undefined`,
+    // i.e. NaN into the sheet position, which breaks layout silently rather
+    // than degrading. Covered by the "degenerate snapPoints" tests.
     if (idx < 0 || idx >= resolvedSnapPoints.length) {
       return closedY;
     }
@@ -256,7 +262,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     const closed = closedY;
     const top = minTopY;
     const canPanDownToClose = enablePanDownToClose;
-    return Gesture.Pan().activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]).onStart(() => {
+    return Gesture.Pan().withTestId(testID ? `${testID}-pan-gesture` : 'bottom-sheet-pan-gesture').activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]).onStart(() => {
       'worklet';
 
       dragStartY.value = translateY.value;
@@ -306,7 +312,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
       }
       runOnJS(handleSnapEnd)(nearestIdx, targets[nearestIdx]);
     });
-  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, translateY]);
+  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, testID, translateY]);
 
   // ───────── Keyboard tracking ─────────
   // keyboardOffset is added to translateY in sheetStyle so we don't disturb
@@ -378,14 +384,14 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   // gesture-handler/reanimated sheet doesn't fire reliably on RN 0.85 / Fabric
   // (the gesture system swallows the touch sequence). gorhom/bottom-sheet uses
   // the same Gesture.Tap() pattern for the same reason.
-  const backdropTapGesture = useMemo(() => Gesture.Tap().maxDuration(250).onEnd((_e, success) => {
+  const backdropTapGesture = useMemo(() => Gesture.Tap().withTestId(testID ? `${testID}-backdrop-gesture` : 'bottom-sheet-backdrop-gesture').maxDuration(250).onEnd((_e, success) => {
     'worklet';
 
     if (!success) {
       return;
     }
     runOnJS(handleBackdropPress)();
-  }), [handleBackdropPress]);
+  }), [handleBackdropPress, testID]);
   const contextValue = useMemo(() => ({
     snapIndex: currentIndex,
     snapPoints: resolvedSnapPoints,

package/lib/module/components/Drawer/Drawer.js

@@ -77,8 +77,12 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
         return sheetSize;
     }
   }, [side, sheetSize]);
-  const offset = useSharedValue(closedOffset);
-  const dragStart = useSharedValue(closedOffset);
+
+  // Uncontrolled defaultVisible starts already open — the offset must start at the
+  // open position (0) too, or the sheet is logically open while visually still
+  // pinned at the closed edge until the next explicit open()/close()/drag.
+  const offset = useSharedValue(defaultVisible ? 0 : closedOffset);
+  const dragStart = useSharedValue(defaultVisible ? 0 : closedOffset);
   const [isOpen, setIsOpen] = useState(defaultVisible);
   const isOpenShared = useSharedValue(defaultVisible);
 
@@ -330,7 +334,6 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Animated.View, {
         accessibilityRole: "alert",
         accessibilityLabel: accessibilityLabel ?? 'Drawer',
-        accessibilityViewIsModal: isOpen,
         style: [sideLayout, {
           backgroundColor: theme.colors.background.elevated,
           ...theme.shadows.xl

package/lib/module/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import { Logger } from '@webority-technologies/mobile-core';
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { EmptyState } from "../EmptyState/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COMPONENT_STACK_LIMIT = 500;
+const DEFAULT_TITLE = 'Something went wrong';
+const DEFAULT_MESSAGE = 'An unexpected error occurred. Please try again.';
+const hasResetKeysChanged = (prev, next) => {
+  if (prev === next) {
+    return false;
+  }
+  if (!prev || !next || prev.length !== next.length) {
+    return true;
+  }
+  return prev.some((value, index) => value !== next[index]);
+};
+const DefaultFallback = ({
+  error,
+  reset,
+  title,
+  message,
+  testID
+}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const showRawError = typeof __DEV__ !== 'undefined' && __DEV__;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(EmptyState, {
+      title: title ?? DEFAULT_TITLE,
+      description: message ?? DEFAULT_MESSAGE,
+      action: {
+        label: 'Try again',
+        onPress: reset,
+        testID: testID ? `${testID}-retry` : undefined
+      }
+    }), showRawError ? /*#__PURE__*/_jsx(Text, {
+      style: styles.devError,
+      testID: testID ? `${testID}-dev-error` : undefined,
+      children: error.message
+    }) : null]
+  });
+};
+const buildStyles = theme => StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.primary,
+    padding: theme.spacing.lg
+  },
+  devError: {
+    marginTop: theme.spacing.md,
+    color: theme.colors.error,
+    fontSize: theme.typography.fontSize.sm,
+    textAlign: 'center'
+  }
+});
+
+/**
+ * Catches render errors in its subtree and shows a themed fallback instead of
+ * a white screen. Mount this once near the navigation root per the fleet
+ * convention, and optionally again around any subtree that should recover
+ * independently (a single failed card should not blank the whole screen).
+ */
+export class ErrorBoundary extends React.Component {
+  state = {
+    error: null
+  };
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.error && hasResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) {
+      this.reset();
+    }
+  }
+  componentDidCatch(error, info) {
+    const componentStack = (info.componentStack ?? '').slice(0, COMPONENT_STACK_LIMIT);
+    Logger.recordError(error, {
+      errorType: 'RenderError',
+      componentStack
+    });
+    try {
+      this.props.onError?.(error, {
+        componentStack
+      });
+    } catch (onErrorError) {
+      Logger.error('[@webority-technologies/mobile-ui] ErrorBoundary onError threw; the boundary itself is unaffected.', onErrorError);
+    }
+  }
+  reset = () => {
+    this.setState({
+      error: null
+    });
+    this.props.onReset?.();
+  };
+  render() {
+    const {
+      error
+    } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+    const {
+      fallback,
+      title,
+      message,
+      testID
+    } = this.props;
+    if (fallback !== undefined) {
+      return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;
+    }
+    return /*#__PURE__*/_jsx(DefaultFallback, {
+      error: error,
+      reset: this.reset,
+      title: title,
+      message: message,
+      testID: testID
+    });
+  }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

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

@@ -0,0 +1,6 @@
+"use strict";
+
+export { ErrorBoundary } from "./ErrorBoundary.js";
+export { useErrorHandler } from "./useErrorHandler.js";
+export { withErrorBoundary } from "./withErrorBoundary.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/ErrorBoundary/useErrorHandler.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import { useCallback, useState } from 'react';
+
+/**
+ * Returns a stable callback for surfacing an error caught outside React's
+ * render/commit cycle (an async callback, a rejected promise, a native event
+ * handler) to the nearest ErrorBoundary. React only catches synchronous
+ * render errors on its own; re-throwing during a state update is the
+ * documented way to route an async error into that same path.
+ */
+export const useErrorHandler = () => {
+  const [, setState] = useState();
+  return useCallback(error => {
+    setState(() => {
+      throw error instanceof Error ? error : new Error(String(error));
+    });
+  }, []);
+};
+//# sourceMappingURL=useErrorHandler.js.map

package/lib/module/components/ErrorBoundary/withErrorBoundary.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import React from 'react';
+import { ErrorBoundary } from "./ErrorBoundary.js";
+
+/**
+ * Wraps a component in an `ErrorBoundary`. Prefer this over hand-wrapping a
+ * screen at every call site when the same fallback/reset behaviour applies
+ * everywhere that component is rendered.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const withErrorBoundary = (Component, boundaryProps) => {
+  const displayName = Component.displayName ?? Component.name ?? 'Component';
+  const Wrapped = props => /*#__PURE__*/_jsx(ErrorBoundary, {
+    ...boundaryProps,
+    children: /*#__PURE__*/_jsx(Component, {
+      ...props
+    })
+  });
+  Wrapped.displayName = `withErrorBoundary(${displayName})`;
+  return Wrapped;
+};
+//# sourceMappingURL=withErrorBoundary.js.map

package/lib/module/components/FilePicker/FilePicker.js

@@ -604,7 +604,7 @@ const FilePicker = /*#__PURE__*/forwardRef((props, ref) => {
       title: labels.sheetTitle,
       options: sources,
       labelOf: s => s.label,
-      valueOf: s => s.key,
+      getValue: s => s.key,
       disabledOf: () => false,
       descriptionOf: s => s.description,
       iconOf: s => s.icon,

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -390,7 +390,20 @@ const FloatingActionButtonGroup = props => {
         importantForAccessibility: "no",
         testID: testID ? `${testID}-backdrop` : undefined
       })
-    }) : null, /*#__PURE__*/_jsxs(View, {
+    }) : null, /*#__PURE__*/_jsxs(View
+    // The container is absolutely positioned and sized to the primary FAB,
+    // while the secondary actions sit ABOVE it via negative translateY, so
+    // they render outside their parent's bounds. Without box-none the
+    // container is itself a touch target across its box, and on Android a
+    // child drawn outside the parent's bounds does not receive touches at
+    // all. box-none makes the container transparent to touches while its
+    // children stay interactive, which is what an expanded menu needs.
+    //
+    // A consumer app carried this as a patch-package fix against two
+    // published versions rather than it landing here, which is how the
+    // library kept shipping the bug.
+    , {
+      pointerEvents: "box-none",
       style: [positionStyle, containerStyle],
       accessibilityRole: 'menu',
       testID: testID,

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -392,6 +392,15 @@ const ZoomableImage = ({
       savedScale.value = minScale;
       savedTranslateX.value = 0;
       savedTranslateY.value = 0;
+      // Mutation-tested equivalent under the jest reanimated mock (withSpring
+      // resolves synchronously to its target there): with this return removed,
+      // execution falls into `scale.value > maxScale` (always false, since
+      // minScale <= maxScale) and then `savedScale.value = scale.value`, which
+      // reads back the minScale just assigned above — same final state, so no
+      // jest assertion can distinguish the two. On a real device withSpring is
+      // asynchronous, so that fallthrough read could observe a stale
+      // mid-animation scale instead; kept as an explicit early return for that
+      // reason even though it isn't independently testable here.
       return;
     }
     if (scale.value > maxScale) {
@@ -554,6 +563,10 @@ const buildLightboxStyles = theme => StyleSheet.create({
     paddingHorizontal: 24
   },
   captionText: {
+    // Fixed white, not a theme token, and deliberately so: the lightbox is an
+    // always-dark surface (#000 backdrop with rgba scrims above), so it does
+    // not follow the colour scheme. `text.primary` would be dark ink on black
+    // in light mode. Do not "themify" this.
     color: '#FFFFFF',
     fontSize: 14,
     lineHeight: 20,

package/lib/module/components/InlineSelect/InlineSelect.js

@@ -145,7 +145,7 @@ const InlineSelect = /*#__PURE__*/forwardRef((props, ref) => {
       accessibilityLabel: label ?? placeholder ?? 'Options',
       options: options,
       labelOf: labelOf,
-      valueOf: valueOf,
+      getValue: valueOf,
       disabledOf: disabledOf,
       descriptionOf: descriptionOf,
       iconOf: iconOf,

package/lib/module/components/Input/Input.js

@@ -110,6 +110,12 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   const shakeOnError = theme.components.input?.shakeOnError ?? false;
   const prevErrorRef = useRef(hasError);
   useEffect(() => {
+    // Equivalent-mutant note: removing this `return` cannot change behaviour.
+    // The line above it always sets `prevErrorRef.current = hasError` first,
+    // so falling through to the check below becomes `hasError &&
+    // !prevErrorRef.current` === `hasError && !hasError`, which is always
+    // false — the shake/haptic branch can never fire, and the redundant
+    // `prevErrorRef.current = hasError` reassignment at the bottom is a no-op.
     if (!shakeOnError) {
       prevErrorRef.current = hasError;
       return;