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

@pylonsync/create-pylon 0.8.0 → 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/(auth)/verify.tsx ADDED Viewed

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Alert, TextInput } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { sendEmailCode, verifyEmailCode } from "@pylonsync/react-native";
+import { track } from "@/analytics";
+import { space } from "@/theme";
+import { Body, Button, Field, Screen, Spacer, Title } from "@/ui";
+/** Enter the 6-digit code that was emailed. Auto-submits on the sixth digit. */
+export default function Verify() {
+  const router = useRouter();
+  const { email, next } = useLocalSearchParams<{ email: string; next?: string }>();
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [resent, setResent] = useState(false);
+  const input = useRef<TextInput>(null);
+  useEffect(() => {
+    const id = setTimeout(() => input.current?.focus(), 300);
+    return () => clearTimeout(id);
+  }, []);
+  async function submit(value: string) {
+    if (value.length !== 6 || busy) return;
+    setBusy(true);
+    try {
+      await verifyEmailCode(email, value);
+      track("sign_in_completed", { method: "email" });
+      if (next) router.replace(next as never);
+      else router.replace("/(tabs)");
+    } catch (e) {
+      setCode("");
+      Alert.alert("That code didn't work", e instanceof Error ? e.message : "Try again.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function resend() {
+    try {
+      await sendEmailCode(email);
+      setResent(true);
+    } catch (e) {
+      Alert.alert("Couldn't resend", e instanceof Error ? e.message : String(e));
+    }
+  }
+  return (
+    <Screen>
+      <Spacer h={space.xxl} />
+      <Title>Check your email</Title>
+      <Body muted style={{ marginTop: space.sm }}>
+        We sent a 6-digit code to {email}.
+      </Body>
+      <Spacer h={space.xxl} />
+      <Field
+        ref={input}
+        placeholder="123456"
+        keyboardType="number-pad"
+        textContentType="oneTimeCode"
+        autoComplete="one-time-code"
+        maxLength={6}
+        value={code}
+        onChangeText={(v) => {
+          const digits = v.replace(/\D/g, "");
+          setCode(digits);
+          if (digits.length === 6) void submit(digits);
+        }}
+        style={{ fontSize: 24, letterSpacing: 8, textAlign: "center" }}
+      />
+      <Spacer />
+      <Button title="Continue" loading={busy} disabled={code.length !== 6} onPress={() => void submit(code)} />
+      <Spacer h={space.sm} />
+      <Button title={resent ? "Code sent again" : "Resend code"} variant="ghost" disabled={resent} onPress={() => void resend()} />
+      <Button title="Use a different email" variant="ghost" onPress={() => router.back()} />
+    </Screen>
+  );
+}

package/templates/expo/mobile/apps/expo/app/(onboarding)/_layout.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+import React from "react";
+import { Stack } from "expo-router";
+export default function OnboardingLayout() {
+  return <Stack screenOptions={{ headerShown: false, animation: "fade" }} />;
+}

package/templates/expo/mobile/apps/expo/app/(onboarding)/welcome.tsx ADDED Viewed

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Dimensions, FlatList, Pressable, Text, View, type ViewToken } from "react-native";
+import { useRouter } from "expo-router";
+import { track } from "@/analytics";
+import { setPaywallSeenAt } from "@/flags";
+import { useAppSession } from "@/session";
+import { space, useTheme } from "@/theme";
+import { Body, Button, Screen, Title } from "@/ui";
+/**
+ * Three value slides, then "Get started". Replace the copy with your own;
+ * keep it to one outcome per slide. The last tap creates a guest session
+ * (no sign-up wall) and opens the paywall once, then lands in the app.
+ */
+const SLIDES = [
+  {
+    title: "Capture anything, instantly",
+    body: "Notes sync to every device the moment you type them. Works offline.",
+  },
+  {
+    title: "Built for speed",
+    body: "No accounts to create before you start. Sign in later to keep everything.",
+  },
+  {
+    title: "Go Pro when you're ready",
+    body: "Unlimited notes and everything we ship next. Cancel any time.",
+  },
+];
+const { width } = Dimensions.get("window");
+export default function Welcome() {
+  const router = useRouter();
+  const t = useTheme();
+  const { completeOnboarding } = useAppSession();
+  const [index, setIndex] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const list = useRef<FlatList>(null);
+  useEffect(() => {
+    track("onboarding_started");
+  }, []);
+  const onViewable = useRef(({ viewableItems }: { viewableItems: ViewToken[] }) => {
+    const first = viewableItems[0]?.index;
+    if (typeof first === "number") setIndex(first);
+  }).current;
+  async function finish() {
+    setBusy(true);
+    try {
+      await completeOnboarding();
+      track("onboarding_completed");
+      await setPaywallSeenAt();
+      // Show the paywall once, right after onboarding: the highest-intent
+      // moment. It is dismissible; the free tier keeps working.
+      router.replace("/(tabs)");
+      router.push("/paywall");
+    } finally {
+      setBusy(false);
+    }
+  }
+  const last = index === SLIDES.length - 1;
+  return (
+    <Screen padded={false}>
+      <View style={{ alignItems: "flex-end", paddingHorizontal: space.xl, minHeight: 44 }}>
+        {!last && (
+          <Pressable onPress={finish} hitSlop={12} accessibilityRole="button">
+            <Text style={{ color: t.muted, fontSize: 15 }}>Skip</Text>
+          </Pressable>
+        )}
+      </View>
+      <FlatList
+        ref={list}
+        data={SLIDES}
+        keyExtractor={(s) => s.title}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onViewableItemsChanged={onViewable}
+        viewabilityConfig={{ itemVisiblePercentThreshold: 60 }}
+        renderItem={({ item }) => (
+          <View style={{ width, paddingHorizontal: space.xl, justifyContent: "center" }}>
+            <View
+              style={{
+                height: 220,
+                borderRadius: 24,
+                backgroundColor: t.surface,
+                marginBottom: space.xxl,
+              }}
+            />
+            <Title>{item.title}</Title>
+            <Body muted style={{ marginTop: space.md }}>
+              {item.body}
+            </Body>
+          </View>
+        )}
+      />
+      <View style={{ paddingHorizontal: space.xl, paddingBottom: space.lg, gap: space.lg }}>
+        <View style={{ flexDirection: "row", justifyContent: "center", gap: 6 }}>
+          {SLIDES.map((s, i) => (
+            <View
+              key={s.title}
+              style={{
+                width: i === index ? 18 : 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: i === index ? t.text : t.border,
+              }}
+            />
+          ))}
+        </View>
+        <Button
+          title={last ? "Get started" : "Next"}
+          loading={busy}
+          onPress={() =>
+            last ? void finish() : list.current?.scrollToIndex({ index: index + 1, animated: true })
+          }
+        />
+      </View>
+    </Screen>
+  );
+}

package/templates/expo/mobile/apps/expo/app/(tabs)/_layout.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import React from "react";
+import { Text } from "react-native";
+import { Tabs } from "expo-router";
+import { useTheme } from "@/theme";
+export default function TabsLayout() {
+  const t = useTheme();
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: t.text,
+        tabBarInactiveTintColor: t.muted,
+        tabBarStyle: { backgroundColor: t.bg, borderTopColor: t.border },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{ title: "Notes", tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 18 }}>▤</Text> }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{ title: "Settings", tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 18 }}>⚙</Text> }}
+      />
+    </Tabs>
+  );
+}

package/templates/expo/mobile/apps/expo/app/(tabs)/index.tsx ADDED Viewed

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { Alert, FlatList, Pressable, Text, View } from "react-native";
+import { useRouter } from "expo-router";
+import { callFn, db } from "@pylonsync/react-native";
+import { track } from "@/analytics";
+import { usePro } from "@/entitlements";
+import { useAppSession } from "@/session";
+import { radius, space, useTheme } from "@/theme";
+import { Body, Button, Caption, Field, Screen, Title } from "@/ui";
+interface Note {
+  id: string;
+  ownerId: string;
+  title: string;
+  body?: string;
+  createdAt: string;
+}
+const FREE_LIMIT = 10;
+/**
+ * The app's main screen: a live, offline-capable list. Reads come from the
+ * local replica (instant on cold start), creates go through `createNote`
+ * so the server enforces the free-tier cap, deletes are optimistic.
+ */
+export default function Notes() {
+  const router = useRouter();
+  const t = useTheme();
+  const { isGuest } = useAppSession();
+  const { pro } = usePro();
+  const { data: notes = [], loading } = db.useQuery<Note>("Note", { orderBy: { createdAt: "desc" } });
+  const [draft, setDraft] = useState("");
+  const [saving, setSaving] = useState(false);
+  async function add() {
+    const title = draft.trim();
+    if (!title) return;
+    setSaving(true);
+    try {
+      await callFn("createNote", { title });
+      setDraft("");
+    } catch (e) {
+      const code = (e as { code?: string })?.code ?? "";
+      const msg = e instanceof Error ? e.message : String(e);
+      if (code === "LIMIT_REACHED" || /LIMIT_REACHED/.test(msg)) {
+        track("limit_reached");
+        router.push({ pathname: "/paywall", params: { reason: "limit" } });
+      } else {
+        Alert.alert("Couldn't save", msg);
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function remove(note: Note) {
+    try {
+      await db.delete("Note", note.id);
+    } catch (e) {
+      Alert.alert("Couldn't delete", e instanceof Error ? e.message : String(e));
+    }
+  }
+  const remaining = Math.max(0, FREE_LIMIT - notes.length);
+  return (
+    <Screen>
+      <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingVertical: space.md }}>
+        <Title>Notes</Title>
+        {pro ? (
+          <View style={{ backgroundColor: t.text, borderRadius: radius.pill, paddingHorizontal: 10, paddingVertical: 4 }}>
+            <Text style={{ color: t.bg, fontSize: 12, fontWeight: "700" }}>PRO</Text>
+          </View>
+        ) : (
+          <Pressable onPress={() => router.push("/paywall")} accessibilityRole="button">
+            <Caption>{remaining} free left · Upgrade</Caption>
+          </Pressable>
+        )}
+      </View>
+      <View style={{ flexDirection: "row", gap: space.sm }}>
+        <Field
+          placeholder="New note"
+          value={draft}
+          onChangeText={setDraft}
+          onSubmitEditing={() => void add()}
+          returnKeyType="done"
+          style={{ flex: 1 }}
+        />
+        <Button title="Add" loading={saving} disabled={!draft.trim()} onPress={() => void add()} style={{ paddingHorizontal: space.lg }} />
+      </View>
+      {isGuest && notes.length >= 3 ? (
+        <Pressable
+          onPress={() => router.push("/(auth)/sign-in")}
+          style={{ marginTop: space.md, padding: space.md, borderRadius: radius.md, backgroundColor: t.surface }}
+        >
+          <Caption>Sign in to keep these notes if you switch phones. ›</Caption>
+        </Pressable>
+      ) : null}
+      <FlatList
+        data={notes}
+        keyExtractor={(n) => n.id}
+        contentContainerStyle={{ paddingVertical: space.lg, gap: space.sm }}
+        ListEmptyComponent={
+          <View style={{ paddingTop: space.xxl, alignItems: "center", gap: space.sm }}>
+            <Body muted>{loading ? "Loading…" : "Nothing here yet. Add your first note above."}</Body>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <Pressable
+            onLongPress={() =>
+              Alert.alert("Delete note?", item.title, [
+                { text: "Cancel", style: "cancel" },
+                { text: "Delete", style: "destructive", onPress: () => void remove(item) },
+              ])
+            }
+            style={{ padding: space.lg, borderRadius: radius.md, backgroundColor: t.surface }}
+          >
+            <Body>{item.title}</Body>
+            <Caption>{new Date(item.createdAt).toLocaleDateString()}</Caption>
+          </Pressable>
+        )}
+      />
+    </Screen>
+  );
+}

package/templates/expo/mobile/apps/expo/app/(tabs)/settings.tsx ADDED Viewed

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { Alert, Linking, ScrollView, View } from "react-native";
+import { useRouter } from "expo-router";
+import Constants from "expo-constants";
+import { deleteAccount } from "@pylonsync/react-native";
+import { track } from "@/analytics";
+import { usePro } from "@/entitlements";
+import { resetFlags } from "@/flags";
+import { manageSubscriptionUrl, restore } from "@/purchases";
+import { useAppSession } from "@/session";
+import { space } from "@/theme";
+import { Caption, Row, Screen, Spacer, Title } from "@/ui";
+/**
+ * Account, subscription, legal, and support. App Review requires an
+ * in-app account deletion path when the app offers account creation, and
+ * both stores require the privacy policy and terms links.
+ */
+export default function Settings() {
+  const router = useRouter();
+  const { userId, isGuest, signOut } = useAppSession();
+  const { pro } = usePro();
+  const [busy, setBusy] = useState<string | null>(null);
+  const privacy = process.env.EXPO_PUBLIC_PRIVACY_URL;
+  const terms = process.env.EXPO_PUBLIC_TERMS_URL;
+  const support = process.env.EXPO_PUBLIC_SUPPORT_EMAIL;
+  const version = Constants.expoConfig?.version ?? "dev";
+  async function restorePurchases() {
+    setBusy("restore");
+    try {
+      const ok = await restore();
+      Alert.alert(ok ? "Purchases restored" : "Nothing to restore");
+    } finally {
+      setBusy(null);
+    }
+  }
+  function confirmDelete() {
+    Alert.alert(
+      "Delete account?",
+      "This removes your account and every note on our servers. Subscriptions are managed by the store and must be cancelled there.",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: () =>
+            void (async () => {
+              setBusy("delete");
+              try {
+                await deleteAccount();
+                track("account_deleted");
+                await resetFlags();
+                router.replace("/(onboarding)/welcome");
+              } catch (e) {
+                Alert.alert("Couldn't delete", e instanceof Error ? e.message : String(e));
+              } finally {
+                setBusy(null);
+              }
+            })(),
+        },
+      ],
+    );
+  }
+  return (
+    <Screen>
+      <ScrollView contentContainerStyle={{ paddingBottom: space.xxl }}>
+        <View style={{ paddingVertical: space.md }}>
+          <Title>Settings</Title>
+        </View>
+        <Caption>Account</Caption>
+        {isGuest ? (
+          <Row label="Sign in or create account" onPress={() => router.push("/(auth)/sign-in")} />
+        ) : (
+          <>
+            <Row label="Signed in" value={userId ?? ""} />
+            <Row label="Sign out" onPress={() => void signOut()} />
+          </>
+        )}
+        <Spacer />
+        <Caption>Subscription</Caption>
+        {pro ? (
+          <Row label="Plan" value="Pro" />
+        ) : (
+          <Row label="Upgrade to Pro" onPress={() => router.push("/paywall")} />
+        )}
+        {pro ? <Row label="Manage subscription" onPress={() => void Linking.openURL(manageSubscriptionUrl())} /> : null}
+        <Row label={busy === "restore" ? "Restoring…" : "Restore purchases"} onPress={() => void restorePurchases()} />
+        <Spacer />
+        <Caption>About</Caption>
+        {privacy ? <Row label="Privacy policy" onPress={() => void Linking.openURL(privacy)} /> : null}
+        {terms ? <Row label="Terms of service" onPress={() => void Linking.openURL(terms)} /> : null}
+        {support ? <Row label="Contact support" onPress={() => void Linking.openURL(`mailto:${support}`)} /> : null}
+        <Row label="Version" value={version} />
+        <Spacer />
+        {!isGuest ? (
+          <>
+            <Caption>Danger zone</Caption>
+            <Row label={busy === "delete" ? "Deleting…" : "Delete account"} danger onPress={confirmDelete} />
+          </>
+        ) : null}
+        {__DEV__ ? (
+          <>
+            <Spacer />
+            <Caption>Development</Caption>
+            <Row
+              label="Reset onboarding"
+              onPress={() => void resetFlags().then(() => router.replace("/(onboarding)/welcome"))}
+            />
+          </>
+        ) : null}
+      </ScrollView>
+    </Screen>
+  );
+}

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

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import { Stack, useRouter, useSegments } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import * as SplashScreen from "expo-splash-screen";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { SessionProvider, useAppSession } from "@/session";
+import { useTheme } from "@/theme";
+// Keep the native splash up until the session state is known, so the
+// first frame is the right screen instead of a flash of the wrong one.
+void SplashScreen.preventAutoHideAsync();
+export default function RootLayout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <SessionProvider>
+          <Router />
+        </SessionProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}
+/**
+ * Route guard. The session state decides which group the user may be in:
+ * onboarding → (onboarding), signedOut → (auth), ready → (tabs). The
+ * paywall is a modal reachable from anywhere once ready.
+ */
+function Router() {
+  const { state } = useAppSession();
+  const segments = useSegments();
+  const router = useRouter();
+  const t = useTheme();
+  useEffect(() => {
+    if (state === "booting") return;
+    void SplashScreen.hideAsync();
+    const group = segments[0];
+    if (state === "onboarding" && group !== "(onboarding)") {
+      router.replace("/(onboarding)/welcome");
+    } else if (state === "signedOut" && group !== "(auth)") {
+      router.replace("/(auth)/sign-in");
+    } else if (state === "ready" && (group === "(onboarding)" || group === undefined)) {
+      router.replace("/(tabs)");
+    }
+  }, [state, segments, router]);
+  return (
+    <>
+      <StatusBar style="auto" />
+      <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: t.bg } }}>
+        <Stack.Screen name="(onboarding)" />
+        <Stack.Screen name="(auth)" />
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="paywall" options={{ presentation: "modal", headerShown: false }} />
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { ActivityIndicator } from "react-native";
+import { Centered, Screen } from "@/ui";
+// "/" renders only while the session boots; the root layout replaces it
+// with the right group as soon as the state is known.
+export default function Index() {
+  return (
+    <Screen>
+      <Centered>
+        <ActivityIndicator />
+      </Centered>
+    </Screen>
+  );
+}