@webority-technologies/mobile-ui 0.0.1 → 0.0.2

package/lib/commonjs/form/FormContext.js

@@ -13,11 +13,23 @@ const FormContext = /*#__PURE__*/(0, _react.createContext)(null);
 /**
  * Provides a {@link useForm} instance to descendants so `<FormField name>`,
  * {@link useField} and {@link useFieldArray} can bind by name.
+ *
+ * Generic in `Values`, and it has to be. `FormApi` is invariant in `Values`
+ * because `setValues` accepts a `(prev: Values) => Values`, so a
+ * `FormApi<MyValues>` is not assignable to a `FormApi<FormValues>`. While the
+ * prop was declared at the base type, `useForm<MyValues>()` could not be handed
+ * to `<Form>` by ANY consumer, which is most of the reason to type a form at
+ * all. Untyped callers are unaffected: `Values` defaults to `FormValues`.
  */
 const Form = ({
   form,
   children
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(FormContext.Provider, {
+}) =>
+/*#__PURE__*/
+// Stored at the base type on purpose: descendants bind by NAME through
+// useField and never observe Values, so widening here is safe and is what
+// lets a typed form be provided at all.
+(0, _jsxRuntime.jsx)(FormContext.Provider, {
   value: form,
   children: children
 });

package/lib/commonjs/form/useField.js

@@ -38,13 +38,25 @@ function useFieldArray(name) {
       copy.splice(index, 0, item);
       set(copy);
     },
+    // `move` and `replace` index into the array directly, so an out-of-range
+    // index corrupts it rather than failing: splice(9, 1) on a 3-item array
+    // yields `undefined`, which then gets spliced back IN, and `copy[9] = item`
+    // grows the array with six holes. Either one puts nulls into the submitted
+    // payload of a repeating field. `insert` and `remove` need no guard —
+    // splice clamps and filter no-ops.
     move: (from, to) => {
+      if (from < 0 || from >= fields.length) {
+        return;
+      }
       const copy = [...fields];
       const [moved] = copy.splice(from, 1);
-      copy.splice(to, 0, moved);
+      copy.splice(Math.max(0, Math.min(to, copy.length)), 0, moved);
       set(copy);
     },
     replace: (index, item) => {
+      if (index < 0 || index >= fields.length) {
+        return;
+      }
       const copy = [...fields];
       copy[index] = item;
       set(copy);

package/lib/commonjs/theme/Gradient.js

@@ -3,54 +3,57 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isGradientAvailable = exports.Gradient = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.toBackgroundImage = exports.gradientAngle = exports.Gradient = void 0;
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * Render a linear gradient using `react-native-linear-gradient` when available.
- *
- * The dep is OPTIONAL — apps that never use gradients don't need it installed.
- * If `<Gradient>` (or any component that accepts a `gradient` prop) is reached
- * without the package present, we fall back to a flat View using the first
- * colour and emit a one-time dev warning so the omission is loud but
- * non-fatal.
+ * Render a linear gradient with React Native's own `experimental_backgroundImage`
+ * style prop. `GradientDefinition` keeps its vector-based `start`/`end` shape,
+ * which is translated to a CSS angle here.
  */
-let LinearGradientImpl = null;
-let warned = false;
-try {
-  LinearGradientImpl = require('react-native-linear-gradient').default;
-} catch {
-  // Optional peer; resolved lazily by consumers that need gradients.
-}
+
+const DEFAULT_START = {
+  x: 0.5,
+  y: 0
+};
+const DEFAULT_END = {
+  x: 0.5,
+  y: 1
+};
+const round = value => Math.round(value * 1000) / 1000;
+
+/**
+ * CSS gradient angles are measured clockwise from "to top", while the vectors
+ * live in a y-down 0..1 space, so the y delta is negated before the atan2.
+ */
+const gradientAngle = (start = DEFAULT_START, end = DEFAULT_END) => {
+  const degrees = Math.atan2(end.x - start.x, start.y - end.y) * 180 / Math.PI;
+  return round((degrees % 360 + 360) % 360);
+};
+exports.gradientAngle = gradientAngle;
+const toBackgroundImage = gradient => ({
+  type: 'linear-gradient',
+  direction: `${gradientAngle(gradient.start, gradient.end)}deg`,
+  colorStops: gradient.colors.map((color, index) => {
+    const location = gradient.locations?.[index];
+    return location === undefined ? {
+      color
+    } : {
+      color,
+      positions: [`${round(location * 100)}%`]
+    };
+  })
+});
+exports.toBackgroundImage = toBackgroundImage;
 const Gradient = ({
   gradient,
   style,
   children
-}) => {
-  if (LinearGradientImpl) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearGradientImpl, {
-      colors: gradient.colors,
-      locations: gradient.locations,
-      start: gradient.start,
-      end: gradient.end,
-      style: style,
-      children: children
-    });
-  }
-  if (__DEV__ && !warned) {
-    warned = true;
-    console.warn('[@webority-technologies/mobile-ui] gradient prop set but react-native-linear-gradient is not installed. ' + 'Run `npm install react-native-linear-gradient` to enable.');
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [{
-      backgroundColor: gradient.colors[0]
-    }, style],
-    children: children
-  });
-};
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: [{
+    experimental_backgroundImage: [toBackgroundImage(gradient)]
+  }, style],
+  children: children
+});
 exports.Gradient = Gradient;
-const isGradientAvailable = () => LinearGradientImpl != null;
-exports.isGradientAvailable = isGradientAvailable;
 //# sourceMappingURL=Gradient.js.map

package/lib/commonjs/theme/index.js

@@ -34,10 +34,10 @@ Object.defineProperty(exports, "fontFor", {
   }
 });
 exports.getTheme = exports.getColorMode = void 0;
-Object.defineProperty(exports, "isGradientAvailable", {
+Object.defineProperty(exports, "gradientAngle", {
   enumerable: true,
   get: function () {
-    return _Gradient.isGradientAvailable;
+    return _Gradient.gradientAngle;
   }
 });
 Object.defineProperty(exports, "lightTheme", {
@@ -60,6 +60,12 @@ Object.defineProperty(exports, "setNativeValue", {
   }
 });
 exports.subscribeTheme = exports.setTheme = void 0;
+Object.defineProperty(exports, "toBackgroundImage", {
+  enumerable: true,
+  get: function () {
+    return _Gradient.toBackgroundImage;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -89,6 +95,22 @@ const recompute = () => {
   currentTheme = overrides ? (0, _merge.mergeTheme)(base, overrides) : base;
   subscribers.forEach(cb => cb());
 };
+
+/**
+ * Set the override object for a mode (defaults to the active one).
+ *
+ * REPLACES that mode's overrides; it does not accumulate them. Calling
+ * `setTheme({ colors })` and then `setTheme({ spacing })` leaves ONLY the
+ * spacing override live — the colours silently revert to the base theme. Pass
+ * one complete override object per mode, or merge them yourself before calling:
+ *
+ *   setTheme({ ...myColors, ...mySpacing });
+ *
+ * This is deliberate (one override object per mode, last call wins) and is
+ * pinned by a test. Do not "fix" it to merge without treating that as the
+ * behaviour change it is: an app relying on replace to CLEAR a previous
+ * override would silently keep it.
+ */
 const setTheme = (overrides, mode) => {
   if (mode) {
     currentMode = mode;

package/lib/commonjs/utils/hapticUtils.js

@@ -4,25 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.triggerHaptic = exports.setHapticImplementation = exports.resolveHaptic = void 0;
+var Haptics = _interopRequireWildcard(require("expo-haptics"));
 var _reactNative = require("react-native");
+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); }
 let hapticImpl = null;
-const tryLoadOptional = () => {
-  if (hapticImpl) {
-    return;
-  }
-  try {
-    // Lazily try to load the user's optional haptic dep without making it a hard requirement.
-    const haptic = require('react-native-haptic-feedback');
-    const trigger = haptic.default?.trigger ?? haptic.trigger;
-    if (typeof trigger === 'function') {
-      hapticImpl = type => trigger(type, {
-        enableVibrateFallback: true
-      });
-    }
-  } catch {
-    // Ignored: not installed; fall back to Vibration on Android, no-op on iOS.
-  }
-};
+
+/**
+ * Only what a test or the showcase injected. The default is expo-haptics, which
+ * this module imports directly: `expo` is a required peer, so the 48 components
+ * that fire haptics get them without any app wiring anything.
+ *
+ * The Vibration fallback below is now only the FAILURE path — a device whose
+ * haptic engine is disabled rejects, and Android still gets something.
+ */
+
 const fallback = type => {
   if (_reactNative.Platform.OS === 'android') {
     const map = {
@@ -37,8 +32,23 @@ const fallback = type => {
     _reactNative.Vibration.vibrate(map[type] ?? 10);
   }
 };
+
+/**
+ * expo-haptics, which splits what this module treats as one vocabulary across
+ * three functions. The promises are deliberately swallowed: the seam is
+ * synchronous, a device with the engine disabled rejects, and an unhandled
+ * rejection from a button press must never become a crash.
+ */
+const EXPO_HANDLERS = {
+  selection: () => Haptics.selectionAsync(),
+  impactLight: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
+  impactMedium: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium),
+  impactHeavy: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy),
+  notificationSuccess: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success),
+  notificationWarning: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning),
+  notificationError: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+};
 const triggerHaptic = (type = 'selection') => {
-  tryLoadOptional();
   if (hapticImpl) {
     try {
       hapticImpl(type);
@@ -47,8 +57,18 @@ const triggerHaptic = (type = 'selection') => {
       /* ignore */
     }
   }
+  const handler = EXPO_HANDLERS[type];
+  if (handler) {
+    handler().catch(() => fallback(type));
+    return;
+  }
   fallback(type);
 };
+
+/**
+ * Replace the haptic backend. Intended for TESTS and for the showcase; an app
+ * gets expo-haptics without wiring anything. Pass `null` to restore it.
+ */
 exports.triggerHaptic = triggerHaptic;
 const setHapticImplementation = impl => {
   hapticImpl = impl;

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

@@ -0,0 +1,221 @@
+"use strict";
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { acquireFetch, DEFAULT_TTL_MS, deriveCacheKey, isFresh, readEntry, releaseFetch, touchEntry } from "./authedImageCache.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const toError = value => value instanceof Error ? value : new Error(String(value));
+const AuthedImage = props => {
+  const {
+    uri,
+    headers,
+    authenticated = true,
+    ttlMs = DEFAULT_TTL_MS,
+    placeholder,
+    fallback,
+    onLoadStart,
+    onLoadEnd,
+    onError,
+    cacheKey,
+    testID,
+    accessibilityLabel,
+    style,
+    ...imageProps
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const [state, setState] = useState({
+    status: 'loading'
+  });
+
+  // Callbacks live behind refs so a caller passing inline arrows does not
+  // restart the fetch on every render.
+  const callbacks = useRef({
+    onLoadStart,
+    onLoadEnd,
+    onError
+  });
+  callbacks.current = {
+    onLoadStart,
+    onLoadEnd,
+    onError
+  };
+
+  // Compared by value: a headers object literal is a new identity every render.
+  const headersKey = JSON.stringify(headers ?? {});
+  useEffect(() => {
+    let cancelled = false;
+    let acquired = null;
+    const finish = next => {
+      if (cancelled) {
+        return;
+      }
+      setState(next);
+      callbacks.current.onLoadEnd?.();
+    };
+    const run = async () => {
+      if (!uri) {
+        const error = new Error('[@webority-technologies/mobile-ui] AuthedImage was given an empty `uri`. Pass the ' + 'image URL, or render nothing while the URL is still unknown.');
+        if (!cancelled) {
+          setState({
+            status: 'error'
+          });
+          callbacks.current.onError?.(error);
+        }
+        return;
+      }
+      setState({
+        status: 'loading'
+      });
+      callbacks.current.onLoadStart?.();
+      const key = deriveCacheKey(uri, cacheKey);
+      const cached = await readEntry(key);
+      if (cancelled) {
+        return;
+      }
+      if (cached && isFresh(cached.meta, ttlMs)) {
+        void touchEntry(key, cached.meta);
+        finish({
+          status: 'ready',
+          dataUri: cached.dataUri
+        });
+        return;
+      }
+      const entry = acquireFetch(key, {
+        uri,
+        headers: JSON.parse(headersKey),
+        authenticated
+      });
+      acquired = {
+        key,
+        entry
+      };
+      try {
+        const result = await entry.promise;
+        finish({
+          status: 'ready',
+          dataUri: result.dataUri
+        });
+      } catch (error) {
+        if (cancelled) {
+          return;
+        }
+        // A stale image beats an empty box: the entry is only expired, and the
+        // refetch that would have replaced it failed.
+        if (cached) {
+          finish({
+            status: 'ready',
+            dataUri: cached.dataUri
+          });
+          return;
+        }
+        setState({
+          status: 'error'
+        });
+        callbacks.current.onError?.(toError(error));
+        callbacks.current.onLoadEnd?.();
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+      if (acquired) {
+        releaseFetch(acquired.key, acquired.entry);
+      }
+    };
+  }, [uri, cacheKey, ttlMs, authenticated, headersKey]);
+
+  // The base `testID` sits on the root in EVERY state, with the state-specific
+  // suffixes nested inside it. A consumer that can only find the component while
+  // it happens to be loaded cannot wait for it to load.
+  if (state.status === 'loading') {
+    if (placeholder !== undefined) {
+      return /*#__PURE__*/_jsx(View, {
+        style: style,
+        testID: testID,
+        children: placeholder
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.placeholder, style],
+      testID: testID,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.stateFill,
+        testID: testID ? `${testID}-placeholder` : undefined,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Spinner, {
+          size: "sm",
+          accessibilityLabel: accessibilityLabel ?? 'Loading image'
+        })
+      })
+    });
+  }
+  if (state.status === 'error') {
+    if (fallback !== undefined) {
+      return /*#__PURE__*/_jsx(View, {
+        style: style,
+        testID: testID,
+        children: fallback
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.fallback, style],
+      testID: testID,
+      children: /*#__PURE__*/_jsx(View, {
+        accessible: true,
+        accessibilityRole: "image",
+        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, image unavailable` : 'Image unavailable',
+        testID: testID ? `${testID}-fallback` : undefined,
+        style: styles.stateFill,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.fallbackText,
+          children: "!"
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Image, {
+    ...imageProps,
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    style: style,
+    source: {
+      uri: state.dataUri
+    }
+  });
+};
+AuthedImage.displayName = 'AuthedImage';
+const buildStyles = theme => StyleSheet.create({
+  placeholder: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.radius.md
+  },
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.colors.border.width,
+    borderColor: theme.colors.border.secondary,
+    padding: theme.spacing.sm
+  },
+  stateFill: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  fallbackText: {
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold
+  }
+});
+export { AuthedImage };
+export default AuthedImage;
+//# sourceMappingURL=AuthedImage.js.map