npm - @pylonsync/create-pylon - Versions diffs - 0.8.1 → 0.8.2 - Mend

@pylonsync/create-pylon 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/templates/expo/mobile/apps/expo/app/paywall.tsx ADDED Viewed

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import { Alert, Linking, Pressable, Text, View } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { track } from "@/analytics";
+import { usePro } from "@/entitlements";
+import { available, offers, purchase, restore, type Offer } from "@/purchases";
+import { radius, space, useTheme } from "@/theme";
+import { Body, Button, Caption, Screen, Spacer, Title } from "@/ui";
+const BENEFITS = [
+  "Unlimited notes",
+  "Sync across all your devices",
+  "Everything we ship next",
+];
+/**
+ * The paywall. Shown once after onboarding, again when the free tier's
+ * cap is hit (`reason=limit`), and from Settings. Annual is preselected
+ * with its saving called out; a free trial is shown when the store
+ * product has one.
+ *
+ * Products come from RevenueCat's current offering, so prices, trials, and
+ * the packages on offer change from the dashboard without an app update.
+ */
+export default function Paywall() {
+  const router = useRouter();
+  const t = useTheme();
+  const { reason } = useLocalSearchParams<{ reason?: string }>();
+  const { pro } = usePro();
+  const [list, setList] = useState<Offer[] | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [busy, setBusy] = useState<"buy" | "restore" | null>(null);
+  useEffect(() => {
+    track("paywall_shown", { reason: reason ?? "onboarding" });
+    void offers().then((o) => {
+      setList(o);
+      const annual = o.find((x) => x.period === "annual");
+      setSelected((annual ?? o[0])?.id ?? null);
+    });
+  }, [reason]);
+  // Purchased (or already Pro): close.
+  useEffect(() => {
+    if (pro) router.back();
+  }, [pro, router]);
+  const privacy = process.env.EXPO_PUBLIC_PRIVACY_URL;
+  const terms = process.env.EXPO_PUBLIC_TERMS_URL;
+  async function buy() {
+    const offer = list?.find((o) => o.id === selected);
+    if (!offer) return;
+    setBusy("buy");
+    try {
+      const ok = await purchase(offer);
+      if (!ok) return;
+      // The synced entitlement row closes the modal via the effect above.
+    } catch (e) {
+      Alert.alert("Purchase failed", e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function restorePurchases() {
+    setBusy("restore");
+    try {
+      const ok = await restore();
+      if (!ok) Alert.alert("Nothing to restore", "No previous purchase was found for this store account.");
+    } finally {
+      setBusy(null);
+    }
+  }
+  function dismiss() {
+    track("paywall_dismissed", { reason: reason ?? "onboarding" });
+    router.back();
+  }
+  const chosen = list?.find((o) => o.id === selected);
+  const cta = chosen?.trial ? `Start ${chosen.trial} free` : "Continue";
+  return (
+    <Screen>
+      <View style={{ alignItems: "flex-end", minHeight: 44 }}>
+        <Pressable onPress={dismiss} hitSlop={12} accessibilityRole="button" accessibilityLabel="Close">
+          <Text style={{ color: t.muted, fontSize: 22 }}>×</Text>
+        </Pressable>
+      </View>
+      <Title>{reason === "limit" ? "You've hit the free limit" : "Go Pro"}</Title>
+      <Body muted style={{ marginTop: space.sm }}>
+        {reason === "limit"
+          ? "Upgrade to keep adding notes without limits."
+          : "Everything in the free version, without the limits."}
+      </Body>
+      <Spacer />
+      <View style={{ gap: space.sm }}>
+        {BENEFITS.map((b) => (
+          <View key={b} style={{ flexDirection: "row", gap: space.md, alignItems: "center" }}>
+            <Text style={{ color: t.success, fontSize: 16 }}>✓</Text>
+            <Body>{b}</Body>
+          </View>
+        ))}
+      </View>
+      <Spacer h={space.xxl} />
+      {!available() ? (
+        <View style={{ padding: space.lg, borderRadius: radius.lg, backgroundColor: t.surface, gap: space.sm }}>
+          <Body>Purchases need a development build.</Body>
+          <Caption>
+            Set EXPO_PUBLIC_REVENUECAT_IOS_KEY / _ANDROID_KEY and run `eas build --profile development`.
+            Expo Go cannot load the native purchase module.
+          </Caption>
+        </View>
+      ) : list === null ? (
+        <Caption>Loading plans…</Caption>
+      ) : list.length === 0 ? (
+        <Caption>No products are configured for this offering yet. Add packages to the current offering in RevenueCat.</Caption>
+      ) : (
+        <View style={{ gap: space.md }}>
+          {list.map((o) => {
+            const active = o.id === selected;
+            return (
+              <Pressable
+                key={o.id}
+                accessibilityRole="radio"
+                accessibilityState={{ selected: active }}
+                onPress={() => setSelected(o.id)}
+                style={{
+                  borderWidth: 2,
+                  borderColor: active ? t.text : t.border,
+                  borderRadius: radius.lg,
+                  padding: space.lg,
+                  backgroundColor: active ? t.surface : "transparent",
+                }}
+              >
+                <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+                  <View>
+                    <Text style={{ color: t.text, fontSize: 16, fontWeight: "600", textTransform: "capitalize" }}>
+                      {o.period}
+                    </Text>
+                    {o.trial ? <Caption>{o.trial} free, then {o.price}</Caption> : <Caption>{o.price}</Caption>}
+                  </View>
+                  {o.period === "annual" ? (
+                    <View style={{ backgroundColor: t.text, borderRadius: radius.pill, paddingHorizontal: 10, paddingVertical: 4 }}>
+                      <Text style={{ color: t.bg, fontSize: 12, fontWeight: "700" }}>BEST VALUE</Text>
+                    </View>
+                  ) : null}
+                </View>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+      <View style={{ flex: 1 }} />
+      <Button title={cta} loading={busy === "buy"} disabled={!chosen} onPress={() => void buy()} />
+      <Spacer h={space.sm} />
+      <Button title="Restore purchases" variant="ghost" loading={busy === "restore"} onPress={() => void restorePurchases()} />
+      <Text style={{ color: t.muted, fontSize: 11, textAlign: "center", lineHeight: 16, marginTop: space.sm }}>
+        Renews automatically until cancelled. Manage in your store account settings.{" "}
+        {terms ? (
+          <Text style={{ textDecorationLine: "underline" }} onPress={() => void Linking.openURL(terms)}>
+            Terms
+          </Text>
+        ) : null}
+        {terms && privacy ? " · " : ""}
+        {privacy ? (
+          <Text style={{ textDecorationLine: "underline" }} onPress={() => void Linking.openURL(privacy)}>
+            Privacy
+          </Text>
+        ) : null}
+      </Text>
+    </Screen>
+  );
+}

package/templates/expo/mobile/apps/expo/app.config.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import type { ConfigContext, ExpoConfig } from "expo/config";
+/**
+ * App config. The values that change per environment come from env vars
+ * so one file serves development builds, TestFlight, and the store:
+ *
+ *   APP_BUNDLE_ID       reverse-DNS id (iOS bundle id + Android package)
+ *   APP_SCHEME          deep-link scheme, e.g. "__APP_NAME_KEBAB__"
+ *   EAS_PROJECT_ID      from `eas init` (printed once, then stable)
+ *   APP_VARIANT         "development" | "preview" | "production" (set by eas.json)
+ *
+ * A development build gets a ".dev" suffix so it installs alongside the
+ * store app on the same phone.
+ */
+const variant = process.env.APP_VARIANT ?? "development";
+const baseBundleId = process.env.APP_BUNDLE_ID ?? "com.example.__APP_NAME_SNAKE__";
+const bundleId = variant === "development" ? `${baseBundleId}.dev` : baseBundleId;
+const name = variant === "production" ? "__APP_NAME__" : `__APP_NAME__ (${variant})`;
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name,
+  slug: "__APP_NAME_KEBAB__",
+  version: "1.0.0",
+  scheme: process.env.APP_SCHEME ?? "__APP_NAME_KEBAB__",
+  orientation: "portrait",
+  icon: "./assets/icon.png",
+  userInterfaceStyle: "automatic",
+  ios: {
+    bundleIdentifier: bundleId,
+    supportsTablet: false,
+    // Sign in with Apple. Also enable the capability on the App ID in
+    // the Apple Developer portal (EAS does this for you on first build).
+    usesAppleSignIn: true,
+    infoPlist: {
+      // Local dev talks to http://localhost:4321.
+      NSAppTransportSecurity: { NSAllowsLocalNetworking: true },
+      // App Store Connect asks; this app uses only standard TLS.
+      ITSAppUsesNonExemptEncryption: false,
+    },
+  },
+  android: {
+    package: bundleId,
+    adaptiveIcon: {
+      foregroundImage: "./assets/adaptive-icon.png",
+      backgroundColor: "#18181b",
+    },
+  },
+  plugins: [
+    "expo-router",
+    "expo-apple-authentication",
+    [
+      "expo-splash-screen",
+      { image: "./assets/splash-icon.png", resizeMode: "contain", backgroundColor: "#18181b" },
+    ],
+    [
+      "expo-build-properties",
+      {
+        ios: { deploymentTarget: "15.1" },
+        // Cleartext lets a dev/preview build reach http://localhost:4321.
+        android: { minSdkVersion: 24, usesCleartextTraffic: variant !== "production" },
+      },
+    ],
+  ],
+  experiments: { typedRoutes: true },
+  extra: {
+    eas: { projectId: process.env.EAS_PROJECT_ID },
+    variant,
+  },
+});

package/templates/expo/mobile/apps/expo/assets/adaptive-icon.png ADDED Viewed

Binary file

package/templates/expo/mobile/apps/expo/assets/icon.png ADDED Viewed

Binary file

package/templates/expo/mobile/apps/expo/assets/splash-icon.png ADDED Viewed

Binary file

package/templates/expo/mobile/apps/expo/babel.config.js ADDED Viewed

@@ -0,0 +1,8 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    // Reanimated's plugin must be last.
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};

package/templates/expo/mobile/apps/expo/eas.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "cli": {
+    "version": ">= 16.0.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "env": {
+        "APP_VARIANT": "development",
+        "EXPO_PUBLIC_PYLON_BASE_URL": "http://localhost:4321"
+      },
+      "ios": { "simulator": true }
+    },
+    "device": {
+      "extends": "development",
+      "ios": { "simulator": false }
+    },
+    "preview": {
+      "distribution": "internal",
+      "env": {
+        "APP_VARIANT": "preview",
+        "EXPO_PUBLIC_PYLON_BASE_URL": "https://__APP_NAME_KEBAB__.pylonapp.com"
+      }
+    },
+    "production": {
+      "autoIncrement": true,
+      "env": {
+        "APP_VARIANT": "production",
+        "EXPO_PUBLIC_PYLON_BASE_URL": "https://__APP_NAME_KEBAB__.pylonapp.com"
+      }
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "ascAppId": "REPLACE_WITH_APP_STORE_CONNECT_APP_ID"
+      },
+      "android": {
+        "track": "internal"
+      }
+    }
+  }
+}

package/templates/expo/mobile/apps/expo/package.json ADDED Viewed

@@ -0,0 +1,52 @@
+{
+  "name": "@__APP_NAME_KEBAB__/expo",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "dev": "expo start",
+    "ios": "expo run:ios",
+    "android": "expo run:android",
+    "web": "expo start --web",
+    "check": "tsc --noEmit",
+    "build:dev": "eas build --profile development --platform ios",
+    "build:preview": "eas build --profile preview --platform all",
+    "build:prod": "eas build --profile production --platform all",
+    "submit:ios": "eas submit --platform ios --latest",
+    "submit:android": "eas submit --platform android --latest"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/react-native": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/sync": "^__PYLON_VERSION__",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/netinfo": "12.0.1",
+    "@react-native-google-signin/google-signin": "^16.1.5",
+    "expo": "~57.0.20",
+    "expo-apple-authentication": "~57.0.1",
+    "expo-build-properties": "~57.0.17",
+    "expo-constants": "~57.0.17",
+    "expo-haptics": "~57.0.2",
+    "expo-linking": "~57.0.9",
+    "expo-router": "~57.0.19",
+    "expo-splash-screen": "~57.0.8",
+    "expo-status-bar": "~57.0.1",
+    "expo-web-browser": "~57.0.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-purchases": "^10.9.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
+    "react-native-web": "~0.21.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@types/react": "~19.2.0",
+    "typescript": "~5.9.0"
+  }
+}

package/templates/expo/mobile/apps/expo/src/analytics.ts ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * Funnel events. Wire `track` to your analytics SDK (PostHog, Amplitude,
+ * Mixpanel) in one place; every screen already calls it with the event
+ * names below, so the onboarding → paywall → purchase funnel is measurable
+ * from the first build.
+ */
+export type FunnelEvent =
+  | "onboarding_started"
+  | "onboarding_completed"
+  | "paywall_shown"
+  | "paywall_dismissed"
+  | "purchase_started"
+  | "purchase_completed"
+  | "purchase_restored"
+  | "sign_in_started"
+  | "sign_in_completed"
+  | "limit_reached"
+  | "account_deleted";
+export function track(event: FunnelEvent, props: Record<string, unknown> = {}): void {
+  if (__DEV__) {
+    console.log(`[analytics] ${event}`, props);
+  }
+  // Example: posthog.capture(event, props);
+}

package/templates/expo/mobile/apps/expo/src/entitlements.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { db } from "@pylonsync/react-native";
+import { hasEntitlement } from "@pylonsync/revenuecat";
+export const PRO = "pro";
+interface RcEntitlementRow {
+  id: string;
+  userId: string;
+  entitlement: string;
+  status: string;
+  expiresAt?: string | null;
+}
+/**
+ * Live Pro status from the synced RcEntitlement rows. Updates the moment
+ * the server writes the row after a purchase, on every device.
+ */
+export function usePro(): { pro: boolean; loading: boolean } {
+  const { data, loading } = db.useQuery<RcEntitlementRow>("RcEntitlement", {});
+  return { pro: hasEntitlement(data ?? [], PRO), loading };
+}

package/templates/expo/mobile/apps/expo/src/flags.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { APP_NAME } from "./pylon";
+/** Small per-device flags that drive the first-run flow. */
+const KEYS = {
+  onboardingDone: `${APP_NAME}:onboarding_done`,
+  paywallSeenAt: `${APP_NAME}:paywall_seen_at`,
+} as const;
+export async function getOnboardingDone(): Promise<boolean> {
+  return (await AsyncStorage.getItem(KEYS.onboardingDone)) === "1";
+}
+export async function setOnboardingDone(): Promise<void> {
+  await AsyncStorage.setItem(KEYS.onboardingDone, "1");
+}
+/** When the post-onboarding paywall was last shown, or null. */
+export async function getPaywallSeenAt(): Promise<number | null> {
+  const raw = await AsyncStorage.getItem(KEYS.paywallSeenAt);
+  return raw ? Number(raw) : null;
+}
+export async function setPaywallSeenAt(at: number = Date.now()): Promise<void> {
+  await AsyncStorage.setItem(KEYS.paywallSeenAt, String(at));
+}
+/** Test helper and "Reset onboarding" in Settings. */
+export async function resetFlags(): Promise<void> {
+  await AsyncStorage.multiRemove(Object.values(KEYS));
+}

package/templates/expo/mobile/apps/expo/src/purchases.ts ADDED Viewed

@@ -0,0 +1,164 @@
+/**
+ * RevenueCat in-app purchases.
+ *
+ * `react-native-purchases` is a native module: present in a development
+ * build and in store builds, absent in Expo Go. Everything here degrades:
+ * in Expo Go `available()` is false and the paywall shows a placeholder.
+ *
+ * Flow: configure(key, appUserID = the Pylon user id) → purchase → the
+ * server verifies with RevenueCat (`syncEntitlements`) and writes the
+ * RcEntitlement row → it syncs to every device. The app gates on the
+ * synced row, never on the SDK's local cache.
+ */
+import { Platform } from "react-native";
+import { callFn } from "@pylonsync/react-native";
+import { track } from "./analytics";
+type PurchasesModule = typeof import("react-native-purchases").default;
+type PurchasesPackage = import("react-native-purchases").PurchasesPackage;
+let Purchases: PurchasesModule | null = null;
+let configuredFor: string | null = null;
+function apiKey(): string | undefined {
+  return Platform.OS === "ios"
+    ? process.env.EXPO_PUBLIC_REVENUECAT_IOS_KEY
+    : process.env.EXPO_PUBLIC_REVENUECAT_ANDROID_KEY;
+}
+function load(): PurchasesModule | null {
+  if (Purchases) return Purchases;
+  try {
+    // A static import throws at bundle load in Expo Go.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    Purchases = require("react-native-purchases").default as PurchasesModule;
+    return Purchases;
+  } catch {
+    return null;
+  }
+}
+/** True when a key is set and the native module is present. */
+export function available(): boolean {
+  return Boolean(apiKey()) && load() != null;
+}
+/** Configure once, then re-identify when the user changes (guest → account). */
+export async function configure(userId: string): Promise<boolean> {
+  const key = apiKey();
+  const mod = load();
+  if (!key || !mod) return false;
+  try {
+    if (configuredFor === null) {
+      mod.configure({ apiKey: key, appUserID: userId });
+    } else if (configuredFor !== userId) {
+      await mod.logIn(userId);
+    }
+    configuredFor = userId;
+    return true;
+  } catch {
+    return false;
+  }
+}
+export interface Offer {
+  id: string;
+  title: string;
+  price: string;
+  /** "monthly" | "annual" | "lifetime" | "weekly" | other */
+  period: string;
+  /** Free trial length when the store offers one, e.g. "7 days". */
+  trial?: string;
+  raw: PurchasesPackage;
+}
+function periodOf(pkg: PurchasesPackage): string {
+  switch (pkg.packageType) {
+    case "MONTHLY":
+      return "monthly";
+    case "ANNUAL":
+      return "annual";
+    case "LIFETIME":
+      return "lifetime";
+    case "WEEKLY":
+      return "weekly";
+    default:
+      return pkg.identifier;
+  }
+}
+/** The current offering's packages, mapped for the paywall. */
+export async function offers(): Promise<Offer[]> {
+  const mod = load();
+  if (!mod) return [];
+  try {
+    const offerings = await mod.getOfferings();
+    const pkgs = offerings.current?.availablePackages ?? [];
+    return pkgs.map((p) => {
+      const intro = p.product.introPrice;
+      const trial =
+        intro && intro.price === 0
+          ? `${intro.periodNumberOfUnits} ${intro.periodUnit.toLowerCase()}${intro.periodNumberOfUnits === 1 ? "" : "s"}`
+          : undefined;
+      return {
+        id: p.identifier,
+        title: p.product.title,
+        price: p.product.priceString,
+        period: periodOf(p),
+        trial,
+        raw: p,
+      };
+    });
+  } catch {
+    return [];
+  }
+}
+/** Returns true on purchase, false when the user cancelled. Throws on error. */
+export async function purchase(offer: Offer): Promise<boolean> {
+  const mod = load();
+  if (!mod) return false;
+  track("purchase_started", { package: offer.id });
+  try {
+    await mod.purchasePackage(offer.raw);
+  } catch (e) {
+    if ((e as { userCancelled?: boolean })?.userCancelled) return false;
+    throw e;
+  }
+  await syncEntitlements();
+  track("purchase_completed", { package: offer.id });
+  return true;
+}
+export async function restore(): Promise<boolean> {
+  const mod = load();
+  if (!mod) return false;
+  try {
+    await mod.restorePurchases();
+  } catch {
+    return false;
+  }
+  await syncEntitlements();
+  track("purchase_restored");
+  return true;
+}
+/**
+ * Ask the server to re-read this user's entitlements from RevenueCat and
+ * write the rows. Makes the purchasing device unlock immediately and
+ * covers local dev, where the webhook cannot reach the machine.
+ */
+export async function syncEntitlements(): Promise<void> {
+  try {
+    await callFn("syncEntitlements", {});
+  } catch {
+    // The webhook will land the row; nothing to do here.
+  }
+}
+/** Manage-subscription deep link for the current store. */
+export function manageSubscriptionUrl(): string {
+  return Platform.OS === "ios"
+    ? "https://apps.apple.com/account/subscriptions"
+    : "https://play.google.com/store/account/subscriptions";
+}

package/templates/expo/mobile/apps/expo/src/pylon.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { Platform } from "react-native";
+import { init } from "@pylonsync/react-native";
+/** The backend URL. Android emulators reach the host machine at 10.0.2.2. */
+export const PYLON_BASE_URL =
+  process.env.EXPO_PUBLIC_PYLON_BASE_URL ??
+  (Platform.OS === "android" ? "http://10.0.2.2:4321" : "http://localhost:4321");
+export const APP_NAME = "__APP_NAME_SNAKE__";
+let initPromise: Promise<void> | null = null;
+/**
+ * Boot the sync engine once. Reads the persisted token and replica from
+ * AsyncStorage, so a cold launch renders the last known data before the
+ * network answers.
+ */
+export function ensurePylon(): Promise<void> {
+  if (!initPromise) {
+    initPromise = init({ baseUrl: PYLON_BASE_URL, appName: APP_NAME });
+  }
+  return initPromise;
+}