@vvedantb/native-ui 0.7.0 → 0.9.0

package/src/push.ts

@@ -0,0 +1,186 @@
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import type * as ExpoConstants from "expo-constants";
+import type * as ExpoDevice from "expo-device";
+import type * as ExpoNotifications from "expo-notifications";
+
+// `expo-notifications`, `expo-constants` and `expo-device` are optional peers.
+// Metro bundles a `require` placed directly in a `try` block as an optional
+// dependency, so a missing peer does not break the bundle.
+
+export type ExpoNotificationsModule = typeof ExpoNotifications;
+export type ExpoConstantsModule = typeof ExpoConstants;
+export type ExpoDeviceModule = typeof ExpoDevice;
+
+let notifications: ExpoNotificationsModule | null | undefined;
+let constants: ExpoConstantsModule | null | undefined;
+let device: ExpoDeviceModule | null | undefined;
+
+/** `expo-notifications`, or `null` when the optional peer is not installed. */
+export function loadNotifications(): ExpoNotificationsModule | null {
+  if (notifications === undefined) {
+    try {
+      notifications = require("expo-notifications") as ExpoNotificationsModule;
+    } catch {
+      notifications = null;
+    }
+  }
+  return notifications;
+}
+
+/** `expo-constants` (its default export is the `Constants` object), or `null` when not installed. */
+export function loadConstants(): ExpoConstantsModule | null {
+  if (constants === undefined) {
+    try {
+      constants = require("expo-constants") as ExpoConstantsModule;
+    } catch {
+      constants = null;
+    }
+  }
+  return constants;
+}
+
+/** `expo-device`, or `null` when the optional peer is not installed. */
+export function loadDevice(): ExpoDeviceModule | null {
+  if (device === undefined) {
+    try {
+      device = require("expo-device") as ExpoDeviceModule;
+    } catch {
+      device = null;
+    }
+  }
+  return device;
+}
+
+export type ExpoPushPlatform = "ios" | "android";
+export type ExpoPushRegisterArgs = { token: string; platform: ExpoPushPlatform };
+
+/** A tapped push: the notification's request id and its `data` object. */
+export type ExpoPushTap = {
+  identifier: string;
+  data: Record<string, unknown>;
+  response: ExpoNotifications.NotificationResponse;
+};
+
+export type GetExpoPushTokenOptions = {
+  /** Show the permission prompt when it was never answered. */
+  ask: boolean;
+  /** Android channel id, also used as its name. Default `"default"`. */
+  channelName?: string;
+};
+
+/**
+ * The Expo push token for this device, or `null` when push is not possible:
+ * a peer is missing, a simulator or emulator, no permission, no EAS project id
+ * (`expo.extra.eas.projectId`), or no FCM credentials in this Android build.
+ */
+export async function getExpoPushToken({ ask, channelName = "default" }: GetExpoPushTokenOptions): Promise<string | null> {
+  const Notifications = loadNotifications();
+  const constantsModule = loadConstants();
+  const deviceModule = loadDevice();
+  if (!Notifications || !constantsModule || !deviceModule) return null;
+  if (!deviceModule.isDevice) return null;
+  const projectId: unknown = constantsModule.default.expoConfig?.extra?.eas?.projectId;
+  if (typeof projectId !== "string" || projectId === "") return null;
+  if (Platform.OS === "android") {
+    await Notifications.setNotificationChannelAsync(channelName, {
+      name: channelName,
+      importance: Notifications.AndroidImportance.HIGH,
+    });
+  }
+  const current = await Notifications.getPermissionsAsync();
+  const granted = current.granted || (ask && (await Notifications.requestPermissionsAsync()).granted);
+  if (!granted) return null;
+  try {
+    return (await Notifications.getExpoPushTokenAsync({ projectId })).data;
+  } catch {
+    // No google-services.json in this build: FCM cannot issue a token.
+    return null;
+  }
+}
+
+let foregroundHandlerSet = false;
+
+/** Shows pushes as banners while the app is open. Runs once; the hook calls it. */
+export function showPushesInForeground(): void {
+  const Notifications = loadNotifications();
+  if (!Notifications || foregroundHandlerSet) return;
+  foregroundHandlerSet = true;
+  Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+      shouldShowBanner: true,
+      shouldShowList: true,
+      shouldPlaySound: true,
+      shouldSetBadge: false,
+    }),
+  });
+}
+
+export type UseExpoPushRegistrationOptions = {
+  /**
+   * Saves the token on your backend, for example `useMutation(api.push.register)`.
+   * Called once on mount, with the latest function.
+   */
+  register: (args: ExpoPushRegisterArgs) => Promise<unknown>;
+  /** Called when the user taps a push, including the tap that cold-started the app. Once per push. */
+  onNotificationTap?: (tap: ExpoPushTap) => void;
+  /** Android channel id, also used as its name. Default `"default"`. */
+  channelName?: string;
+  /** Show the permission prompt when it was never answered. Default `true`. */
+  ask?: boolean;
+  /** Show pushes as banners while the app is open. Default `true`. */
+  showInForeground?: boolean;
+};
+
+function toTap(response: ExpoNotifications.NotificationResponse | null | undefined): ExpoPushTap | null {
+  if (!response) return null;
+  const { identifier, content } = response.notification.request;
+  const data = content.data;
+  return { identifier, data: typeof data === "object" && data !== null ? data : {}, response };
+}
+
+/**
+ * Mount once under your auth gate. Registers this device's token through
+ * `register` and reports taps on pushes through `onNotificationTap`. Does
+ * nothing when a peer is missing. Navigation is yours: route from
+ * `tap.data` in the callback.
+ */
+export function useExpoPushRegistration(options: UseExpoPushRegistrationOptions): void {
+  const { channelName, ask = true, showInForeground = true } = options;
+  const latest = useRef(options);
+  latest.current = options;
+
+  useEffect(() => {
+    if (showInForeground) showPushesInForeground();
+    let cancelled = false;
+    void getExpoPushToken({ ask, channelName }).then((token) => {
+      if (token && !cancelled) {
+        void latest.current.register({ token, platform: Platform.OS === "ios" ? "ios" : "android" });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [ask, channelName, showInForeground]);
+
+  useEffect(() => {
+    const Notifications = loadNotifications();
+    if (!Notifications) return;
+    const seen = new Set<string>();
+    const deliver = (response: ExpoNotifications.NotificationResponse | null | undefined) => {
+      const tap = toTap(response);
+      if (!tap || seen.has(tap.identifier)) return;
+      seen.add(tap.identifier);
+      latest.current.onNotificationTap?.(tap);
+    };
+    let cancelled = false;
+    void Notifications.getLastNotificationResponseAsync().then((response) => {
+      if (!cancelled) deliver(response);
+    });
+    const subscription = Notifications.addNotificationResponseReceivedListener(deliver);
+    return () => {
+      cancelled = true;
+      subscription.remove();
+    };
+  }, []);
+}

package/src/settings/MoreFromProjectV.tsx

@@ -0,0 +1,105 @@
+import { Linking, Platform, Text, View } from "react-native";
+import { APP_ICONS } from "../brand/AppIcons";
+import { AppMark } from "../brand/AppMark";
+import type { AppName } from "../brand/svg";
+import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { ListRow } from "../ListRow";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { SettingsSection } from "./SettingsSection";
+import {
+  openProjectVApp,
+  otherProjectVMobileApps,
+  type ProjectVMobileAppId,
+  type ProjectVOpenTarget,
+} from "./projectVMobileApps";
+
+/**
+ * The mark for each phone app. V Store has no mark of its own (it was left out
+ * of the brand marks in 0.3.9), so it shows the Project V mark.
+ */
+const MARK: Record<ProjectVMobileAppId, AppName> = {
+  vibot: "vibot",
+  verve: "verve",
+  velth: "velth",
+  vmem: "vmem",
+  vstore: "projectv",
+};
+
+export type FromProjectVProps = {
+  className?: string;
+  testID?: string;
+};
+
+/** A small muted "from Project V" line with the Project V mark, for the end of a settings screen. */
+export function FromProjectV({ className, testID }: FromProjectVProps) {
+  const scheme = useScheme();
+  const muted = tokens.color.muted[scheme];
+  const ProjectVMark = APP_ICONS.projectv;
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel="from Project V"
+      className={cn("flex-row items-center justify-center gap-1.5 py-2", className)}
+    >
+      <Text className="text-sm font-instrument-sans" style={textStyle("muted", scheme)}>
+        from
+      </Text>
+      <ProjectVMark size={14} color={muted} />
+      <Text
+        className="text-sm font-instrument-sans-semibold"
+        style={[textStyle("muted", scheme), typeStyle("semibold")]}
+      >
+        Project V
+      </Text>
+    </View>
+  );
+}
+
+export type MoreFromProjectVProps = {
+  /** The app showing the section. It is left out of the list. */
+  current: ProjectVMobileAppId;
+  /** `"section"` (default): a settings section listing the other apps. `"footer"`: only the small "from Project V" line. */
+  variant?: "section" | "footer";
+  /** Section title. Default "More from Project V". */
+  title?: string;
+  /** Called after a row opens something: the app, V Store or its website (`null` if nothing opened). */
+  onOpen?: (id: ProjectVMobileAppId, target: ProjectVOpenTarget | null) => void;
+  className?: string;
+};
+
+/**
+ * Settings section listing the other Project V phone apps, each with its mark,
+ * name and one line. A row opens the app if it is installed, else V Store's
+ * home, else its website (`openProjectVApp`).
+ */
+export function MoreFromProjectV({
+  current,
+  variant = "section",
+  title = "More from Project V",
+  onOpen,
+  className,
+}: MoreFromProjectVProps) {
+  if (variant === "footer") return <FromProjectV className={className} />;
+  return (
+    <SettingsSection title={title} bodyVariant="list" className={className}>
+      <View className="flex-col gap-1 p-1">
+        {otherProjectVMobileApps(current).map((app) => (
+          <ListRow
+            key={app.id}
+            testID={`more-from-project-v-${app.id}`}
+            title={app.name}
+            meta={app.description}
+            leading={<AppMark app={MARK[app.id]} size={28} />}
+            accessibilityLabel={`${app.name}, ${app.description}`}
+            onPress={() => {
+              void openProjectVApp(app.id, Linking, Platform.OS).then((target) => onOpen?.(app.id, target));
+            }}
+          />
+        ))}
+      </View>
+    </SettingsSection>
+  );
+}

package/src/settings/projectVMobileApps.ts

@@ -0,0 +1,145 @@
+import { familyApp } from "../brand/familyApps";
+
+/** The Project V phone apps, in display order. */
+export type ProjectVMobileAppId = "vibot" | "verve" | "velth" | "vmem" | "vstore";
+
+export type ProjectVMobileApp = {
+  id: ProjectVMobileAppId;
+  /** Display name. */
+  name: string;
+  /** One line for a settings row. */
+  description: string;
+  /** Android application id. */
+  androidPackage: string;
+  /** The app's URL scheme, without `://`. */
+  scheme: string;
+  /** Home page of the app: the fallback when neither the app nor V Store is installed. */
+  website: string;
+};
+
+/**
+ * V Store's home screen. V Store's `app/[id]` route takes the app's Convex
+ * document `_id`, not its catalog id or Android package, and native-ui cannot
+ * know live Convex ids. So the store step opens V Store's home, not the app's page.
+ */
+export const VSTORE_HOME_URL = "vstore://";
+
+// Names and sites come from `FAMILY_APPS` where it has the app. V Store is not
+// a family app there (that file is a byte-identical copy of `@vvedantb/ui`).
+const vibot = familyApp("vibot");
+const verve = familyApp("verve");
+const velth = familyApp("velth");
+const vmem = familyApp("vmem");
+
+/** The five Project V phone apps, in display order. */
+export const PROJECT_V_MOBILE_APPS: readonly ProjectVMobileApp[] = [
+  {
+    id: "vibot",
+    name: vibot.name,
+    description: "AI chat, agents and tools",
+    androidPackage: "com.projectvdotuk.vibot",
+    scheme: "vibot",
+    website: vibot.url,
+  },
+  {
+    id: "verve",
+    name: verve.name,
+    description: "Notes, pages and writing",
+    androidPackage: "com.projectvdotuk.verve",
+    scheme: "verve",
+    website: verve.url,
+  },
+  {
+    id: "velth",
+    name: velth.name,
+    description: "Health insights and camera scans",
+    androidPackage: "com.projectvdotuk.velth",
+    scheme: "velth",
+    website: velth.url,
+  },
+  {
+    id: "vmem",
+    name: vmem.name,
+    description: "Your personal memory",
+    androidPackage: "com.projectvdotuk.vmem",
+    scheme: "vmem",
+    website: vmem.url,
+  },
+  {
+    id: "vstore",
+    name: "V Store",
+    description: "Install Project V apps",
+    androidPackage: "com.projectvdotuk.vstore",
+    scheme: "vstore",
+    website: "https://v-store-chi.vercel.app",
+  },
+];
+
+/** Entry of `PROJECT_V_MOBILE_APPS` for an app. */
+export function projectVMobileApp(id: ProjectVMobileAppId): ProjectVMobileApp {
+  return PROJECT_V_MOBILE_APPS.find((app) => app.id === id)!;
+}
+
+/** The phone apps other than `current`, in display order. */
+export function otherProjectVMobileApps(current?: ProjectVMobileAppId): ProjectVMobileApp[] {
+  return PROJECT_V_MOBILE_APPS.filter((app) => app.id !== current);
+}
+
+/** Android intent URL that opens the installed app with this package. */
+export function androidIntentUrl(app: ProjectVMobileApp): string {
+  return `intent://#Intent;scheme=${app.scheme};package=${app.androidPackage};end`;
+}
+
+/** How `openProjectVApp` opened an app. */
+export type ProjectVOpenTarget = "app" | "store" | "website";
+
+/** One URL to try, in order. `check`: ask `canOpenURL` first; otherwise try `openURL` and move on if it fails. */
+export type ProjectVOpenStep = {
+  target: ProjectVOpenTarget;
+  url: string;
+  check: boolean;
+};
+
+/**
+ * The URLs `openProjectVApp` tries, in order: the app's scheme; on Android an
+ * intent to its package; V Store's home (`VSTORE_HOME_URL`); the website.
+ */
+export function projectVAppOpenSteps(id: ProjectVMobileAppId, os: string): ProjectVOpenStep[] {
+  const app = projectVMobileApp(id);
+  const steps: ProjectVOpenStep[] = [{ target: "app", url: `${app.scheme}://`, check: true }];
+  if (os === "android") steps.push({ target: "app", url: androidIntentUrl(app), check: false });
+  if (id !== "vstore") steps.push({ target: "store", url: VSTORE_HOME_URL, check: true });
+  steps.push({ target: "website", url: app.website, check: false });
+  return steps;
+}
+
+/** The part of React Native `Linking` that `openProjectVApp` uses. */
+export type ProjectVLinking = {
+  canOpenURL(url: string): Promise<boolean>;
+  openURL(url: string): Promise<unknown>;
+};
+
+/**
+ * Opens a Project V app: the app if installed, else V Store's home if V Store
+ * is installed, else its website. Resolves to what it opened, or
+ * `null` when every URL failed. Pass React Native `Linking` and `Platform.OS`.
+ *
+ * `canOpenURL` needs the schemes declared by the calling app:
+ * `LSApplicationQueriesSchemes` on iOS and `<queries>` on Android 11+.
+ */
+export async function openProjectVApp(
+  id: ProjectVMobileAppId,
+  linking: ProjectVLinking,
+  os: string,
+): Promise<ProjectVOpenTarget | null> {
+  for (const step of projectVAppOpenSteps(id, os)) {
+    try {
+      if (step.check && !(await linking.canOpenURL(step.url))) continue;
+      await linking.openURL(step.url);
+      return step.target;
+    } catch {
+      // Not installed, or no handler: try the next URL.
+    }
+  }
+  return null;
+}