@pylonsync/create-pylon 0.8.0 → 0.8.2

package/templates/expo/mobile/apps/expo/src/session.tsx

@@ -0,0 +1,101 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { db, guestSession, signOut as pylonSignOut, useSession } from "@pylonsync/react-native";
+import { ensurePylon } from "./pylon";
+import { getOnboardingDone, setOnboardingDone as persistOnboardingDone } from "./flags";
+import { configure as configurePurchases } from "./purchases";
+
+/**
+ * What the router needs to know:
+ *
+ *   booting     the engine and the on-device flags are still loading
+ *   onboarding  first launch: show the welcome slides
+ *   ready       a session exists (guest or account) and the tabs can render
+ *   signedOut   the user signed out explicitly; offer sign-in or a fresh guest
+ */
+export type SessionState = "booting" | "onboarding" | "ready" | "signedOut";
+
+interface SessionValue {
+  state: SessionState;
+  userId: string | null;
+  /** True while the session is an anonymous guest (no account yet). */
+  isGuest: boolean;
+  completeOnboarding: () => Promise<void>;
+  continueAsGuest: () => Promise<void>;
+  signOut: () => Promise<void>;
+}
+
+const Ctx = createContext<SessionValue | null>(null);
+
+export function SessionProvider({ children }: { children: React.ReactNode }) {
+  const [booted, setBooted] = useState(false);
+  const [onboardingDone, setOnboardingDoneState] = useState(false);
+  const [signedOut, setSignedOut] = useState(false);
+  const session = useSession(db.sync);
+  const userId = session.userId;
+
+  useEffect(() => {
+    let alive = true;
+    void (async () => {
+      await ensurePylon();
+      const done = await getOnboardingDone();
+      if (!alive) return;
+      setOnboardingDoneState(done);
+      setBooted(true);
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  // Identify the purchase SDK with the Pylon user id so RevenueCat's
+  // app_user_id is our id and webhook events map to our rows.
+  useEffect(() => {
+    if (userId) void configurePurchases(userId);
+  }, [userId]);
+
+  const continueAsGuest = useCallback(async () => {
+    await guestSession();
+    await db.sync.notifySessionChanged();
+    setSignedOut(false);
+  }, []);
+
+  const completeOnboarding = useCallback(async () => {
+    await persistOnboardingDone();
+    setOnboardingDoneState(true);
+    if (!db.sync.resolvedSession().userId) {
+      await continueAsGuest();
+    }
+  }, [continueAsGuest]);
+
+  const signOut = useCallback(async () => {
+    await pylonSignOut();
+    setSignedOut(true);
+  }, []);
+
+  const state: SessionState = !booted
+    ? "booting"
+    : !onboardingDone
+      ? "onboarding"
+      : userId && !signedOut
+        ? "ready"
+        : "signedOut";
+
+  const value = useMemo<SessionValue>(
+    () => ({
+      state,
+      userId,
+      isGuest: Boolean(userId?.startsWith("guest_")),
+      completeOnboarding,
+      continueAsGuest,
+      signOut,
+    }),
+    [state, userId, completeOnboarding, continueAsGuest, signOut],
+  );
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useAppSession(): SessionValue {
+  const v = useContext(Ctx);
+  if (!v) throw new Error("useAppSession must be used inside <SessionProvider>");
+  return v;
+}

package/templates/expo/mobile/apps/expo/src/theme.ts

@@ -0,0 +1,36 @@
+import { useColorScheme } from "react-native";
+
+export const palette = {
+  light: {
+    bg: "#ffffff",
+    surface: "#f4f4f5",
+    border: "#e4e4e7",
+    text: "#18181b",
+    muted: "#71717a",
+    brand: "#18181b",
+    onBrand: "#ffffff",
+    danger: "#dc2626",
+    success: "#16a34a",
+  },
+  dark: {
+    bg: "#09090b",
+    surface: "#18181b",
+    border: "#27272a",
+    text: "#fafafa",
+    muted: "#a1a1aa",
+    brand: "#fafafa",
+    onBrand: "#09090b",
+    danger: "#f87171",
+    success: "#4ade80",
+  },
+} as const;
+
+export type Theme = Record<keyof (typeof palette)["light"], string>;
+
+export function useTheme(): Theme {
+  const scheme = useColorScheme();
+  return scheme === "dark" ? palette.dark : palette.light;
+}
+
+export const space = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, xxl: 32 } as const;
+export const radius = { sm: 8, md: 12, lg: 16, pill: 999 } as const;

package/templates/expo/mobile/apps/expo/src/ui.tsx

@@ -0,0 +1,187 @@
+import React from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type PressableProps,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import * as Haptics from "expo-haptics";
+import { radius, space, useTheme } from "./theme";
+
+/** Full-screen container with safe-area insets and the theme background. */
+export function Screen({
+  children,
+  style,
+  padded = true,
+}: {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  padded?: boolean;
+}) {
+  const t = useTheme();
+  return (
+    <SafeAreaView style={[{ flex: 1, backgroundColor: t.bg }, style]}>
+      <View style={{ flex: 1, paddingHorizontal: padded ? space.xl : 0 }}>{children}</View>
+    </SafeAreaView>
+  );
+}
+
+export function Title({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
+  const t = useTheme();
+  return (
+    <Text style={[{ fontSize: 28, fontWeight: "700", letterSpacing: -0.5, color: t.text }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export function Body({ children, style, muted }: { children: React.ReactNode; style?: TextStyle; muted?: boolean }) {
+  const t = useTheme();
+  return (
+    <Text style={[{ fontSize: 16, lineHeight: 22, color: muted ? t.muted : t.text }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+export function Caption({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
+  const t = useTheme();
+  return <Text style={[{ fontSize: 13, lineHeight: 18, color: t.muted }, style]}>{children}</Text>;
+}
+
+type ButtonProps = PressableProps & {
+  title: string;
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  loading?: boolean;
+  icon?: React.ReactNode;
+};
+
+export function Button({ title, variant = "primary", loading, icon, disabled, onPress, style, ...rest }: ButtonProps) {
+  const t = useTheme();
+  const bg =
+    variant === "primary" ? t.brand : variant === "secondary" ? t.surface : "transparent";
+  const fg =
+    variant === "primary" ? t.onBrand : variant === "danger" ? t.danger : t.text;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled || loading}
+      onPress={(e) => {
+        void Haptics.selectionAsync();
+        onPress?.(e);
+      }}
+      style={({ pressed }) => [
+        styles.button,
+        { backgroundColor: bg, opacity: disabled ? 0.5 : pressed ? 0.85 : 1 },
+        variant === "secondary" && { borderWidth: 1, borderColor: t.border },
+        style as ViewStyle,
+      ]}
+      {...rest}
+    >
+      {loading ? (
+        <ActivityIndicator color={fg} />
+      ) : (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: space.sm }}>
+          {icon}
+          <Text style={{ color: fg, fontSize: 16, fontWeight: "600" }}>{title}</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+export const Field = React.forwardRef<TextInput, TextInputProps>(function Field(props, ref) {
+  const t = useTheme();
+  return (
+    <TextInput
+      ref={ref}
+      placeholderTextColor={t.muted}
+      {...props}
+      style={[
+        styles.field,
+        { backgroundColor: t.surface, borderColor: t.border, color: t.text },
+        props.style,
+      ]}
+    />
+  );
+});
+
+export function Card({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
+  const t = useTheme();
+  return (
+    <View style={[styles.card, { backgroundColor: t.surface, borderColor: t.border }, style]}>
+      {children}
+    </View>
+  );
+}
+
+/** A settings-style row: label on the left, optional value or chevron on the right. */
+export function Row({
+  label,
+  value,
+  onPress,
+  danger,
+}: {
+  label: string;
+  value?: string;
+  onPress?: () => void;
+  danger?: boolean;
+}) {
+  const t = useTheme();
+  return (
+    <Pressable
+      accessibilityRole={onPress ? "button" : undefined}
+      onPress={onPress}
+      disabled={!onPress}
+      style={({ pressed }) => [styles.row, { borderColor: t.border, opacity: pressed ? 0.7 : 1 }]}
+    >
+      <Text style={{ fontSize: 16, color: danger ? t.danger : t.text }}>{label}</Text>
+      <Text style={{ fontSize: 15, color: t.muted }}>{value ?? (onPress ? "›" : "")}</Text>
+    </Pressable>
+  );
+}
+
+export function Spacer({ h = space.lg }: { h?: number }) {
+  return <View style={{ height: h }} />;
+}
+
+export function Centered({ children }: { children: React.ReactNode }) {
+  return <View style={{ flex: 1, alignItems: "center", justifyContent: "center", gap: space.md }}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  button: {
+    minHeight: 52,
+    paddingHorizontal: space.xl,
+    borderRadius: radius.md,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  field: {
+    minHeight: 52,
+    borderWidth: 1,
+    borderRadius: radius.md,
+    paddingHorizontal: space.lg,
+    fontSize: 16,
+  },
+  card: {
+    borderWidth: 1,
+    borderRadius: radius.lg,
+    padding: space.lg,
+    gap: space.sm,
+  },
+  row: {
+    minHeight: 52,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});

package/templates/expo/mobile/apps/expo/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}

package/templates/saas/.env.example

@@ -11,6 +11,8 @@
 STRIPE_SECRET_KEY=sk_test_...
 STRIPE_WEBHOOK_SECRET=whsec_...
 STRIPE_PRICE_PRO=price_...
+# Optional yearly price for the annual toggle on /pricing and Billing.
+STRIPE_PRICE_PRO_ANNUAL=price_...
 
 # ── OAuth (optional) ─────────────────────────────────────────────────────────
 # The login/signup pages show a Google button; set these to enable it.

package/templates/saas/README.md

@@ -24,14 +24,15 @@ app.ts                       User + Org/OrgMember/OrgInvite + Project + Stripe b
 app/page.tsx                 "/" — the server-rendered Acme landing page (auth-aware)
 app/layout.tsx               marketing nav + footer (rebrand "Acme")
 app/{products,solutions,resources,company,compare}/[slug]/   data-driven marketing pages
-app/login,signup/            email/password + Google (POST /api/auth/password/*)
-app/onboarding/              first-run: create workspace → invite → first project
-app/dashboard/               "/dashboard" — authed; overview, projects, members, billing, settings
+app/login,signup/            email/password, email code, Google; forgot/reset password
+app/onboarding/              first-run wizard: workspace → invite → first project → plan (trial)
+app/pricing/                 monthly/annual plan table from lib/plans.ts
+app/dashboard/               "/dashboard" — authed; overview + getting-started checklist, projects, members, billing, settings
 app/dashboard/dashboard-client.tsx   the workspace client island
 app/{error,not-found}.tsx    hydrated error + 404 boundaries
 app/{robots,sitemap}.ts      /robots.txt + /sitemap.xml (enumerates every public page)
-functions/                   Stripe checkout/portal/webhook handlers (one file per handler)
-lib/                         products.ts + site.ts (marketing content), billing.ts (@pylonsync/stripe)
+functions/                   createProject (free-plan cap), onboarding + profile mutations, Stripe handlers
+lib/                         plans.ts (prices, cap, trial), billing.ts (@pylonsync/stripe), site.config.ts (copy)
 app/globals.css              Tailwind v4 + shadcn tokens (compiled by Pylon)
 components/ui/                shadcn primitives (Button, Card)
 ```
@@ -70,9 +71,12 @@ tenant's rows. `db.useQuery` is live; `db.insert` is optimistic.
 - **Add tenant data:** new `entity()` with an `orgId` + the same two policy
   lines — a new tenant-scoped table, typed client and REST/realtime API included.
 - **Add a route:** drop `app/about/page.tsx` and visit `/about`.
-- **Enable billing:** set `STRIPE_SECRET_KEY` + `STRIPE_PRICE_PRO` (see
-  `.env.example`); the Billing tab then runs real Stripe Checkout + Customer
-  Portal, kept in sync by the `/api/fn/stripeWebhook` handler.
+- **Change prices or the free cap:** edit `lib/plans.ts`. The pricing page, the
+  Billing tab, and the server-side cap in `functions/createProject.ts` all read it.
+- **Enable billing:** set `STRIPE_SECRET_KEY`, `STRIPE_PRICE_PRO`, and
+  `STRIPE_PRICE_PRO_ANNUAL` (see `.env.example`); the Billing tab then runs real
+  Stripe Checkout (with the trial) + Customer Portal, kept in sync by the
+  `/api/fn/stripeWebhook` handler.
 
 ## Deploy