@forthtilliath/expo-release-updates-ui 0.3.1 → 0.4.0

package/README.md

@@ -131,6 +131,42 @@ import { UpdateAvailableBanner } from "@forthtilliath/expo-release-updates-ui";
 
 Built-in labels are French by default; pass `locale="en"` for English (e.g. from the app's language on a bilingual app). `labels` still overrides individual strings — `title`, `action`, `dismiss`, `dismissAccessibilityLabel` — whatever the locale.
 
+### `<UpdateNotifier ... />` — the whole flow, install included
+
+Mount it once near the root: it checks on launch (`useUpdateCheck`), shows the banner with **Install / Ignore**, and "Install" downloads the APK right away with a progress card — Android then asks for confirmation — instead of sending the user to an update screen. A failed download offers Retry / Close. "Ignore" calls `onDismissVersion` so that exact version is never announced again (a newer one will be).
+
+```tsx
+import { UpdateNotifier } from "@forthtilliath/expo-release-updates-ui/UpdateNotifier";
+
+<View
+  style={{ position: "absolute", top: 56, left: 16, right: 16, zIndex: 10 }}
+>
+  <UpdateNotifier
+    enabled={settings !== undefined}
+    currentVersion={Constants.expoConfig?.version ?? "0.0.0"}
+    checkForUpdate={fetchLatestRelease}
+    getLastCheck={() => ({
+      lastCheckedAt: settings?.lastUpdateCheckAt ?? null,
+      dismissedVersion: settings?.dismissedUpdateVersion ?? null,
+    })}
+    onChecked={(at) => recordUpdateCheck(at)}
+    onDismissVersion={(version) => dismissUpdateVersion(version)}
+    downloadAndInstallApk={(apkUrl, onProgress) =>
+      downloadAndInstallApk({
+        apkUrl,
+        fileName: "myapp-update.apk",
+        onProgress,
+      })
+    }
+    styles={{ banner: { container: { backgroundColor: colors.surface } } }}
+  />
+</View>;
+```
+
+Pass **`enabled={false}` until the settings `getLastCheck` reads have loaded** (async database, live query…): the check runs once, on mount, so starting earlier would ignore both the 12h throttle and the dismissed version. Positioning is left to the parent. `labels` / `styles` take `{ banner, install }`, same keys as `UpdateAvailableBanner` and `UpdateInstallCard`.
+
+The building blocks are exported too, to compose a different flow: `useApkInstall(downloadAndInstallApk)` (`{ state, start(version, apkUrl), retry, reset }`) and `<UpdateInstallCard state onRetry onClose />` (renders nothing while idle).
+
 ## Scripts
 
 ```bash

package/dist/UpdateInstallCard.d.ts

@@ -0,0 +1,32 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { UpdateBannerLocale } from "./UpdateAvailableBanner.js";
+import type { ApkInstallState } from "./useApkInstall.js";
+export interface UpdateInstallCardStyles {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    hint?: StyleProp<TextStyle>;
+    error?: StyleProp<TextStyle>;
+    actions?: StyleProp<ViewStyle>;
+    retryButton?: StyleProp<ViewStyle>;
+    retryButtonText?: StyleProp<TextStyle>;
+    closeButton?: StyleProp<ViewStyle>;
+    closeButtonText?: StyleProp<TextStyle>;
+}
+export interface UpdateInstallCardLabels {
+    downloading?: (version: string, percent: number) => string;
+    hint?: string;
+    error?: (version: string) => string;
+    retry?: string;
+    close?: string;
+}
+export interface UpdateInstallCardProps {
+    state: ApkInstallState;
+    onRetry: () => void;
+    onClose: () => void;
+    labels?: UpdateInstallCardLabels;
+    /** @defaultValue "fr" */
+    locale?: UpdateBannerLocale;
+    styles?: UpdateInstallCardStyles;
+}
+export declare function UpdateInstallCard({ state, onRetry, onClose, labels, locale, styles, }: UpdateInstallCardProps): import("react").JSX.Element | null;
+//# sourceMappingURL=UpdateInstallCard.d.ts.map

package/dist/UpdateInstallCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateInstallCard.d.ts","sourceRoot":"","sources":["../src/UpdateInstallCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,yBAAyB;IACzB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAwDD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAa,EACb,MAAM,GACP,EAAE,sBAAsB,sCAwCxB"}

package/dist/UpdateInstallCard.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+const defaultStyles = {
+    container: {
+        backgroundColor: "#ffffff",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        gap: 6,
+    },
+    title: { fontSize: 15, fontWeight: "700", color: "#111827" },
+    hint: { fontSize: 12, color: "#6b7280" },
+    error: { fontSize: 14, color: "#dc2626" },
+    actions: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        gap: 8,
+        marginTop: 4,
+    },
+    retryButton: {
+        backgroundColor: "#2563eb",
+        borderRadius: 8,
+        paddingVertical: 8,
+        paddingHorizontal: 14,
+    },
+    retryButtonText: { color: "#ffffff", fontWeight: "700" },
+    closeButton: { paddingVertical: 8, paddingHorizontal: 14 },
+    closeButtonText: { color: "#6b7280" },
+};
+const defaultLabels = {
+    fr: {
+        downloading: (version, percent) => `Téléchargement de la version ${version}… ${percent}%`,
+        hint: "Le téléphone va ensuite demander confirmation pour l'installer.",
+        error: (version) => `Le téléchargement de la version ${version} a échoué.`,
+        retry: "Réessayer",
+        close: "Fermer",
+    },
+    en: {
+        downloading: (version, percent) => `Downloading version ${version}… ${percent}%`,
+        hint: "Your phone will then ask you to confirm the installation.",
+        error: (version) => `Downloading version ${version} failed.`,
+        retry: "Retry",
+        close: "Close",
+    },
+};
+// Progress of an update started from the UI (see `useApkInstall`): a
+// non-interactive card while the APK downloads, then — only on failure — an
+// error with Retry/Close. Renders nothing while idle.
+export function UpdateInstallCard({ state, onRetry, onClose, labels, locale = "fr", styles, }) {
+    if (state.status === "idle")
+        return null;
+    const t = { ...defaultLabels[locale], ...labels };
+    const s = (key) => [
+        defaultStyles[key],
+        styles?.[key],
+    ];
+    if (state.status === "downloading") {
+        return (_jsxs(View, { style: s("container"), pointerEvents: "none", children: [_jsx(Text, { style: s("title"), children: t.downloading(state.version, Math.round(state.progress * 100)) }), _jsx(Text, { style: s("hint"), children: t.hint })] }));
+    }
+    return (_jsxs(View, { style: s("container"), children: [_jsx(Text, { style: s("error"), children: t.error(state.version) }), _jsxs(View, { style: s("actions"), children: [_jsx(Pressable, { style: s("closeButton"), onPress: onClose, accessibilityRole: "button", children: _jsx(Text, { style: s("closeButtonText"), children: t.close }) }), _jsx(Pressable, { style: s("retryButton"), onPress: onRetry, accessibilityRole: "button", children: _jsx(Text, { style: s("retryButtonText"), children: t.retry }) })] })] }));
+}

package/dist/UpdateNotifier.d.ts

@@ -0,0 +1,27 @@
+import type { UpdateAvailableBannerLabels, UpdateAvailableBannerStyles, UpdateBannerLocale } from "./UpdateAvailableBanner.js";
+import type { UpdateInstallCardLabels, UpdateInstallCardStyles } from "./UpdateInstallCard.js";
+import type { DownloadAndInstallApk } from "./useApkInstall.js";
+import type { UseUpdateCheckOptions } from "./useUpdateCheck.js";
+export interface UpdateNotifierProps extends UseUpdateCheckOptions {
+    /**
+     * `false` until what `getLastCheck` reads has loaded (settings from an async
+     * database...): the check runs once, on mount, so starting it earlier would
+     * ignore both the throttle and the dismissed version. Default: `true`.
+     */
+    enabled?: boolean;
+    downloadAndInstallApk: DownloadAndInstallApk;
+    /** "Ignore": persist it so this exact version is never announced again. */
+    onDismissVersion: (version: string) => void;
+    /** @defaultValue "fr" */
+    locale?: UpdateBannerLocale;
+    labels?: {
+        banner?: UpdateAvailableBannerLabels;
+        install?: UpdateInstallCardLabels;
+    };
+    styles?: {
+        banner?: UpdateAvailableBannerStyles;
+        install?: UpdateInstallCardStyles;
+    };
+}
+export declare function UpdateNotifier({ enabled, ...props }: UpdateNotifierProps): import("react").JSX.Element | null;
+//# sourceMappingURL=UpdateNotifier.d.ts.map

package/dist/UpdateNotifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateNotifier.d.ts","sourceRoot":"","sources":["../src/UpdateNotifier.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,2BAA2B,EAC3B,2BAA2B,EAC3B,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,2EAA2E;IAC3E,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,yBAAyB;IACzB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,2BAA2B,CAAC;QACrC,OAAO,CAAC,EAAE,uBAAuB,CAAC;KACnC,CAAC;IACF,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,2BAA2B,CAAC;QACrC,OAAO,CAAC,EAAE,uBAAuB,CAAC;KACnC,CAAC;CACH;AAqBD,wBAAgB,cAAc,CAAC,EAC7B,OAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAErB"}

package/dist/UpdateNotifier.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UpdateAvailableBanner } from "./UpdateAvailableBanner.js";
+import { UpdateInstallCard } from "./UpdateInstallCard.js";
+import { useApkInstall } from "./useApkInstall.js";
+import { useUpdateCheck } from "./useUpdateCheck.js";
+const bannerLabels = {
+    fr: { action: "Installer", dismiss: "Ignorer" },
+    en: { action: "Install", dismiss: "Ignore" },
+};
+const dismissAccessibilityLabel = {
+    fr: (version) => `Ignorer la version ${version}`,
+    en: (version) => `Ignore version ${version}`,
+};
+// Whole update flow for a sideloaded app, to mount once near the root: checks
+// for a new release on launch (`useUpdateCheck`), announces it, and
+// "Install" downloads the APK right away with a progress card (Android then
+// asks for confirmation) — no detour through an update screen. "Ignore" never
+// announces that version again, but a newer one will be. Position it
+// (absolute, safe area...) from the parent.
+export function UpdateNotifier({ enabled = true, ...props }) {
+    return enabled ? _jsx(ActiveUpdateNotifier, { ...props }) : null;
+}
+function ActiveUpdateNotifier({ downloadAndInstallApk, onDismissVersion, locale = "fr", labels, styles, ...checkOptions }) {
+    const update = useUpdateCheck(checkOptions);
+    const install = useApkInstall(downloadAndInstallApk);
+    if (install.state.status !== "idle") {
+        return (_jsx(UpdateInstallCard, { state: install.state, onRetry: install.retry, onClose: install.reset, locale: locale, labels: labels?.install, styles: styles?.install }));
+    }
+    if (update.status !== "available")
+        return null;
+    const { release } = update;
+    return (_jsx(UpdateAvailableBanner, { version: release.version, notes: release.notes, locale: locale, labels: {
+            ...bannerLabels[locale],
+            dismissAccessibilityLabel: dismissAccessibilityLabel[locale](release.version),
+            ...labels?.banner,
+        }, styles: styles?.banner, onPress: () => {
+            // Not persisted as dismissed: if the install doesn't go through, the
+            // banner may come back on a later launch (unlike "Ignore").
+            update.dismiss();
+            install.start(release.version, release.apkUrl);
+        }, onDismiss: () => {
+            onDismissVersion(release.version);
+            update.dismiss();
+        } }));
+}

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export * from "./ChangelogNotes.js";
 export * from "./UpdateAvailableBanner.js";
+export * from "./UpdateInstallCard.js";
+export * from "./UpdateNotifier.js";
+export * from "./useApkInstall.js";
 export * from "./useUpdateCheck.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,3 +1,6 @@
 export * from "./ChangelogNotes.js";
 export * from "./UpdateAvailableBanner.js";
+export * from "./UpdateInstallCard.js";
+export * from "./UpdateNotifier.js";
+export * from "./useApkInstall.js";
 export * from "./useUpdateCheck.js";

package/dist/useApkInstall.d.ts

@@ -0,0 +1,20 @@
+/** Downloads an APK then hands it to Android's installer, reporting progress from 0 to 1. */
+export type DownloadAndInstallApk = (apkUrl: string, onProgress?: (fraction: number) => void) => Promise<void>;
+export type ApkInstallState = {
+    status: "idle";
+} | {
+    status: "downloading";
+    version: string;
+    progress: number;
+} | {
+    status: "error";
+    version: string;
+    apkUrl: string;
+};
+export declare function useApkInstall(downloadAndInstallApk: DownloadAndInstallApk): {
+    state: ApkInstallState;
+    start: (version: string, apkUrl: string) => void;
+    retry: () => void;
+    reset: () => void;
+};
+//# sourceMappingURL=useApkInstall.d.ts.map

package/dist/useApkInstall.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useApkInstall.d.ts","sourceRoot":"","sources":["../src/useApkInstall.ts"],"names":[],"mappings":"AAEA,6FAA6F;AAC7F,MAAM,MAAM,qBAAqB,GAAG,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,KACpC,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,eAAe,GACvB;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAClB;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAKzD,wBAAgB,aAAa,CAAC,qBAAqB,EAAE,qBAAqB;;qBAGhD,MAAM,UAAU,MAAM;;;EAsB/C"}

package/dist/useApkInstall.js

@@ -0,0 +1,27 @@
+import { useState } from "react";
+// Tracks one APK download/install started from the UI: progress while it
+// downloads, back to idle once Android's installer has taken over, an error
+// state (keeping the URL) so the user can retry.
+export function useApkInstall(downloadAndInstallApk) {
+    const [state, setState] = useState({ status: "idle" });
+    function start(version, apkUrl) {
+        setState({ status: "downloading", version, progress: 0 });
+        downloadAndInstallApk(apkUrl, (progress) => {
+            setState({ status: "downloading", version, progress });
+        })
+            .then(() => {
+            setState({ status: "idle" });
+        })
+            .catch(() => {
+            setState({ status: "error", version, apkUrl });
+        });
+    }
+    function retry() {
+        if (state.status === "error")
+            start(state.version, state.apkUrl);
+    }
+    function reset() {
+        setState({ status: "idle" });
+    }
+    return { state, start, retry, reset };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/expo-release-updates-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -22,7 +22,7 @@
     "./*": "./dist/*.js"
   },
   "dependencies": {
-    "@forthtilliath/expo-release-updates": "^0.6.0"
+    "@forthtilliath/expo-release-updates": "^0.6.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -38,7 +38,7 @@
     "typescript": "^5.9.3",
     "vitest": "^5.0.2",
     "@forthtilliath/typescript-config": "0.1.1",
-    "@forthtilliath/eslint-config": "0.8.0"
+    "@forthtilliath/eslint-config": "0.9.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",