@ramonclaudio/create-vexpo 0.1.0

package/dist/templates/default/components/auth/otp-verification.tsx

@@ -0,0 +1,255 @@
+import { startTransition, useActionState, useState } from "react";
+import { useMutation } from "convex/react";
+import { Host, VStack, HStack, Text, TextField, Button, Image, Spacer } from "@expo/ui/swift-ui";
+import {
+  foregroundStyle,
+  buttonStyle,
+  background,
+  clipShape,
+  disabled,
+  keyboardType,
+  monospacedDigit,
+  kerning,
+  multilineTextAlignment,
+  onSubmit,
+  submitLabel,
+  padding,
+  frame,
+  accessibilityLabel,
+  accessibilityHint,
+  tint,
+  textFieldStyle,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+
+import { api } from "@/convex/_generated/api";
+import { authClient } from "@/lib/auth-client";
+import { haptics } from "@/lib/haptics";
+import { useColors } from "@/hooks/use-theme";
+import { ProminentButton } from "@/components/ui/prominent-button";
+import { ErrorText } from "@/components/ui/status-text";
+import { announce } from "@/lib/a11y";
+
+export type PendingAvatar = { uri: string; mimeType: string };
+
+export type OtpFlow = "verify-email" | "sign-in";
+
+type OtpVerificationProps = {
+  email: string;
+  onBack: () => void;
+  /**
+   * "verify-email" (default) confirms a fresh sign-up via
+   * `authClient.emailOtp.verifyEmail` - the server has
+   * `autoSignInAfterVerification: true` so a successful verify mints the
+   * session inline. "sign-in" hits `authClient.signIn.emailOtp` to log a
+   * returning user in passwordlessly.
+   */
+  flow?: OtpFlow;
+  /**
+   * Avatar picked during sign-up. Uploaded to Convex storage right after
+   * verifyEmail succeeds and autoSignInAfterVerification mints the session.
+   * Held in the parent's state so it's forgotten if the user backs out.
+   * Ignored when `flow` is "sign-in" (existing accounts already have an
+   * avatar configured from the profile screen).
+   */
+  pendingAvatar?: PendingAvatar | null;
+};
+
+type OtpState = { error?: string; ok?: boolean };
+const initialState: OtpState = {};
+
+export function OtpVerification({
+  email,
+  onBack,
+  flow = "verify-email",
+  pendingAvatar,
+}: OtpVerificationProps) {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const [otp, setOtp] = useState("");
+  const generateAvatarUploadUrl = useMutation(api.users.generateAvatarUploadUrl);
+  const updateAvatar = useMutation(api.users.updateAvatar);
+  const isSignIn = flow === "sign-in";
+
+  const [verifyState, verify, isVerifying] = useActionState<OtpState, void>(async () => {
+    haptics.light();
+
+    if (otp.length !== 6) {
+      haptics.error();
+      return { error: "Please enter the 6-digit code" };
+    }
+
+    try {
+      const response = isSignIn
+        ? await authClient.signIn.emailOtp({ email: email.trim(), otp })
+        : await authClient.emailOtp.verifyEmail({ email: email.trim(), otp });
+
+      if (response.error) {
+        haptics.error();
+        return { error: "Invalid or expired code. Please try again." };
+      }
+
+      // Upload the avatar picked at sign-up before this component unmounts.
+      // Stack.Protected swaps (auth) -> (app) on the next render once the
+      // session lands, but kicking off the requests here keeps them in flight
+      // server-side regardless of the unmount. Failures are non-fatal: the
+      // user is verified, they can set a photo from the profile screen.
+      if (!isSignIn && pendingAvatar) {
+        try {
+          const uploadUrl = await generateAvatarUploadUrl();
+          const blob = await (await fetch(pendingAvatar.uri)).blob();
+          const upload = await fetch(uploadUrl, {
+            method: "POST",
+            headers: { "Content-Type": pendingAvatar.mimeType },
+            body: blob,
+          });
+          if (upload.ok) {
+            const { storageId } = (await upload.json()) as { storageId: string };
+            await updateAvatar({ storageId: storageId as never });
+          }
+        } catch {
+          // Swallow: verification still succeeded.
+        }
+      }
+
+      haptics.success();
+      announce(isSignIn ? "Signed in" : "Email verified");
+      return { ok: true };
+    } catch {
+      haptics.error();
+      return {
+        error: isSignIn
+          ? "Sign in failed. Please try again."
+          : "Verification failed. Please try again.",
+      };
+    }
+  }, initialState);
+
+  const [resendState, resend, isResending] = useActionState<OtpState, void>(async () => {
+    haptics.light();
+    try {
+      await authClient.emailOtp.sendVerificationOtp({
+        email: email.trim(),
+        type: isSignIn ? "sign-in" : "email-verification",
+      });
+      haptics.success();
+      announce("New verification code sent");
+      return { ok: true };
+    } catch {
+      haptics.error();
+      return { error: "Failed to send code. Please try again." };
+    }
+  }, initialState);
+
+  const error = verifyState.error ?? resendState.error;
+
+  return (
+    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <VStack
+        spacing={16}
+        alignment="center"
+        modifiers={[padding({ horizontal: 24 }), tint(colors.primary as string)]}
+      >
+        <Spacer />
+
+        <Image
+          systemName={isSignIn ? "lock.shield" : "envelope.badge"}
+          size={56}
+          color={colors.primary}
+        />
+
+        <Text modifiers={[dfont({ size: 28, weight: "bold" }), multilineTextAlignment("center")]}>
+          {isSignIn ? "Sign in with code" : "Verify your email"}
+        </Text>
+
+        <VStack spacing={4} alignment="center">
+          <Text
+            modifiers={[
+              dfont({ size: 15 }),
+              foregroundStyle(colors.mutedForeground as string),
+              multilineTextAlignment("center"),
+            ]}
+          >
+            Enter the 6-digit code sent to
+          </Text>
+          <Text modifiers={[dfont({ size: 15, weight: "semibold" })]}>{email}</Text>
+        </VStack>
+
+        {error && <ErrorText>{error}</ErrorText>}
+
+        <VStack spacing={12} modifiers={[frame({ maxWidth: Infinity })]}>
+          <TextField
+            placeholder="000000"
+            onTextChange={(text) => setOtp(text.replace(/\D/g, "").slice(0, 6))}
+            autoFocus
+            modifiers={[
+              textFieldStyle("plain"),
+              padding({ horizontal: 16 }),
+              frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+              background(colors.muted as string),
+              clipShape("capsule"),
+              dfont({ size: 24, design: "monospaced" }),
+              monospacedDigit(),
+              kerning(8),
+              multilineTextAlignment("center"),
+              keyboardType("numeric"),
+              onSubmit(() => startTransition(() => verify())),
+              submitLabel("done"),
+              accessibilityLabel("Verification code"),
+              accessibilityHint("Enter the 6 digit code sent to your email"),
+            ]}
+          />
+
+          <ProminentButton
+            label={
+              isVerifying
+                ? isSignIn
+                  ? "Signing in..."
+                  : "Verifying..."
+                : isSignIn
+                  ? "Sign in"
+                  : "Verify"
+            }
+            onPress={() => startTransition(() => verify())}
+            disabled={isVerifying || otp.length !== 6}
+          />
+
+          <Button
+            modifiers={[buttonStyle("plain"), frame({ maxWidth: 10000 }), disabled(isResending)]}
+            onPress={() => startTransition(() => resend())}
+          >
+            <Text
+              modifiers={[
+                frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                multilineTextAlignment("center"),
+                dfont({ size: ButtonTokens.fontSize, weight: ButtonTokens.secondaryFontWeight }),
+                foregroundStyle(colors.primary as string),
+              ]}
+            >
+              {isResending ? "Sending..." : "Resend code"}
+            </Text>
+          </Button>
+        </VStack>
+
+        <HStack modifiers={[padding({ top: 8 })]}>
+          <Text
+            modifiers={[dfont({ size: 14 }), foregroundStyle(colors.mutedForeground as string)]}
+          >
+            Wrong email?
+          </Text>
+          <Button
+            label="Go back"
+            modifiers={[buttonStyle("plain"), dfont({ size: 14, weight: "semibold" })]}
+            onPress={() => {
+              haptics.light();
+              onBack();
+            }}
+          />
+        </HStack>
+
+        <Spacer />
+      </VStack>
+    </Host>
+  );
+}

package/dist/templates/default/components/auth/password-field.tsx

@@ -0,0 +1,121 @@
+import { type ComponentProps, useState } from "react";
+import { Button, HStack, Image, SecureField, TextField, useNativeState } from "@expo/ui/swift-ui";
+import {
+  accessibilityHint,
+  accessibilityLabel,
+  autocorrectionDisabled,
+  background,
+  buttonStyle,
+  clipShape,
+  disabled as disabledMod,
+  frame,
+  onSubmit as onSubmitMod,
+  padding,
+  submitLabel,
+  textFieldStyle,
+  textInputAutocapitalization,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { Button as ButtonTokens } from "@/constants/layout";
+import { useColors } from "@/hooks/use-theme";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { haptics } from "@/lib/haptics";
+
+type ObservableTextState = NonNullable<ComponentProps<typeof TextField>["text"]>;
+type SubmitLabel = "next" | "done" | "send" | "go" | "search" | "join" | "route" | "continue";
+
+type Props = {
+  text?: ObservableTextState;
+  placeholder?: string;
+  onTextChange: (next: string) => void;
+  onSubmit?: () => void;
+  submitLabelType?: SubmitLabel;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+};
+
+/**
+ * Password input with an inline eye toggle to reveal what was typed.
+ *
+ * The toggle swaps between SecureField (masked) and TextField (visible). Both
+ * are bound to the same `useNativeState`, so the native value persists across
+ * the swap. without it, React unmounts one component and mounts the other
+ * and the new field starts empty. If the parent passes its own ObservableState
+ * via `text`, that's used instead (e.g. profile.tsx clears the field after
+ * submit by resetting the state from outside).
+ */
+export function PasswordField({
+  text,
+  placeholder = "••••••••",
+  onTextChange,
+  onSubmit,
+  submitLabelType = "done",
+  disabled = false,
+  accessibilityLabel: a11yLabel = "Password",
+  accessibilityHint: a11yHint = "Enter your password",
+}: Props) {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const [visible, setVisible] = useState(false);
+  const internalState = useNativeState("");
+  const sharedState = text ?? internalState;
+
+  const fieldModifiers = [
+    textFieldStyle("plain"),
+    frame({ maxWidth: Infinity }),
+    dfont({ size: 16 }),
+    autocorrectionDisabled(),
+    textInputAutocapitalization("never"),
+    disabledMod(disabled),
+    submitLabel(submitLabelType),
+    accessibilityLabel(a11yLabel),
+    accessibilityHint(a11yHint),
+    ...(onSubmit ? [onSubmitMod(onSubmit)] : []),
+  ];
+
+  return (
+    <HStack
+      spacing={8}
+      modifiers={[
+        padding({ horizontal: 16 }),
+        frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+        background(colors.muted as string),
+        clipShape("capsule"),
+      ]}
+    >
+      {visible ? (
+        <TextField
+          text={sharedState}
+          placeholder={placeholder}
+          onTextChange={onTextChange}
+          modifiers={fieldModifiers}
+        />
+      ) : (
+        <SecureField
+          text={sharedState}
+          placeholder={placeholder}
+          onTextChange={onTextChange}
+          modifiers={fieldModifiers}
+        />
+      )}
+      <Button
+        modifiers={[
+          buttonStyle("plain"),
+          accessibilityLabel(visible ? "Hide password" : "Show password"),
+          accessibilityHint(visible ? "Tap to mask the password" : "Tap to reveal the password"),
+        ]}
+        onPress={() => {
+          haptics.light();
+          setVisible((v) => !v);
+        }}
+      >
+        <Image
+          systemName={visible ? "eye.slash" : "eye"}
+          size={18}
+          color={colors.mutedForeground as string}
+        />
+      </Button>
+    </HStack>
+  );
+}

package/dist/templates/default/components/auth/segmented-toggle.tsx

@@ -0,0 +1,47 @@
+import { Picker, Text } from "@expo/ui/swift-ui";
+import { controlSize, frame, pickerStyle, tag } from "@expo/ui/swift-ui/modifiers";
+
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+import { haptics } from "@/lib/haptics";
+
+// Native iOS segmented control via @expo/ui's SwiftUI Picker. Mirrors the
+// affordance of tanvex's web SegmentedToggle (Sign in/Sign up, Email/Username
+// /Email OTP) but renders as the platform-native control on iOS.
+
+export type SegmentedOption<T extends string> = {
+  value: T;
+  label: string;
+};
+
+type Props<T extends string> = {
+  value: T;
+  options: SegmentedOption<T>[];
+  onChange: (value: T) => void;
+};
+
+export function SegmentedToggle<T extends string>({ value, options, onChange }: Props<T>) {
+  const dfont = useDynamicFont();
+  return (
+    <Picker
+      modifiers={[
+        pickerStyle("segmented"),
+        controlSize("large"),
+        frame({ maxWidth: 10000, height: ButtonTokens.height }),
+      ]}
+      selection={value}
+      onSelectionChange={(selection) => {
+        const next = selection as T;
+        if (next === value) return;
+        haptics.light();
+        onChange(next);
+      }}
+    >
+      {options.map((opt) => (
+        <Text key={opt.value} modifiers={[tag(opt.value), dfont({ size: 14, weight: "medium" })]}>
+          {opt.label}
+        </Text>
+      ))}
+    </Picker>
+  );
+}

package/dist/templates/default/components/ui/convex-error.tsx

@@ -0,0 +1,32 @@
+import { ConvexError } from "convex/values";
+
+import { ErrorText } from "./status-text";
+
+/**
+ * Pull a human-readable message out of an unknown thrown value. Knows about
+ * `ConvexError`'s structured `data` payload (`{ code, message, field? }` from
+ * `convex/errors.ts`) so server-side validation errors and auth failures
+ * surface their original message instead of a stringified object.
+ */
+export function formatError(err: unknown): string {
+  if (err instanceof ConvexError) {
+    const data = err.data as unknown;
+    if (typeof data === "object" && data !== null && "message" in data) {
+      const msg = (data as { message?: unknown }).message;
+      if (typeof msg === "string" && msg.length > 0) return msg;
+    }
+    return err.message;
+  }
+  if (err instanceof Error) return err.message;
+  return "An unexpected error occurred";
+}
+
+/**
+ * Render an unknown thrown value through `ErrorText`. Returns null when there
+ * is no error so call sites can do `<ConvexErrorView error={state.error} />`
+ * unconditionally.
+ */
+export function ConvexErrorView({ error }: { error: unknown }) {
+  if (error === undefined || error === null) return null;
+  return <ErrorText>{formatError(error)}</ErrorText>;
+}

package/dist/templates/default/components/ui/error-boundary.tsx

@@ -0,0 +1,57 @@
+import { router, type ErrorBoundaryProps } from "expo-router";
+import { Host, VStack, Text, Button, Image, Spacer } from "@expo/ui/swift-ui";
+import {
+  foregroundStyle,
+  buttonStyle,
+  frame,
+  padding,
+  multilineTextAlignment,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { ProminentButton } from "@/components/ui/prominent-button";
+import { useColors } from "@/hooks/use-theme";
+
+export function AppErrorBoundary({ error, retry }: ErrorBoundaryProps) {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  console.error("[ErrorBoundary]", error);
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <VStack
+        spacing={20}
+        alignment="center"
+        modifiers={[padding({ horizontal: 24, vertical: 32 }), tint(colors.primary as string)]}
+      >
+        <Spacer />
+        <Image
+          systemName="exclamationmark.triangle"
+          size={72}
+          color={colors.destructive as string}
+        />
+        <Text modifiers={[dfont({ size: 28, weight: "bold" }), multilineTextAlignment("center")]}>
+          Something went wrong
+        </Text>
+        <Text
+          modifiers={[
+            dfont({ size: 16 }),
+            foregroundStyle(colors.mutedForeground as string),
+            multilineTextAlignment("center"),
+          ]}
+        >
+          Don&apos;t worry. Let&apos;s get you back on track.
+        </Text>
+        <VStack spacing={12} modifiers={[frame({ maxWidth: Infinity })]}>
+          <ProminentButton label="Try Again" onPress={retry} />
+          <Button
+            label="Go Home"
+            modifiers={[buttonStyle("plain"), foregroundStyle(colors.mutedForeground as string)]}
+            onPress={() => router.replace("/")}
+          />
+        </VStack>
+        <Spacer />
+      </VStack>
+    </Host>
+  );
+}

package/dist/templates/default/components/ui/loading-screen.tsx

@@ -0,0 +1,31 @@
+import { Image as ExpoImage } from "expo-image";
+import { Host, ProgressView, Spacer, VStack, RNHostView } from "@expo/ui/swift-ui";
+import { progressViewStyle, tint } from "@expo/ui/swift-ui/modifiers";
+
+import { assets } from "@/lib/assets";
+import { useColors, useThemedAsset } from "@/hooks/use-theme";
+
+export function LoadingScreen() {
+  const colors = useColors();
+  const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
+  return (
+    <Host
+      style={{ flex: 1, backgroundColor: colors.background as string }}
+      useViewportSizeMeasurement
+    >
+      <VStack alignment="center" spacing={20} modifiers={[tint(colors.primary as string)]}>
+        <Spacer />
+        <RNHostView matchContents>
+          <ExpoImage
+            source={brandIcon}
+            style={{ width: 80, height: 80 }}
+            contentFit="contain"
+            accessibilityLabel="App icon"
+          />
+        </RNHostView>
+        <ProgressView modifiers={[progressViewStyle("circular")]} />
+        <Spacer />
+      </VStack>
+    </Host>
+  );
+}

package/dist/templates/default/components/ui/material.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import { BlurView, type BlurTint } from "expo-blur";
+import { GlassView, isLiquidGlassAvailable, type GlassStyle } from "expo-glass-effect";
+
+/**
+ * HIG-aware translucent surface. Picks the right backing per OS:
+ *
+ *   iOS 26+        -> `GlassView` (true Liquid Glass via UIVisualEffectView)
+ *   iOS 16.4-25    -> `BlurView` (UIVisualEffectView blur + tint overlay)
+ *   anything else  -> solid `tintColor` fallback
+ *
+ * Apple's HIG reserves materials for the navigation layer that floats above
+ * content: tab bars, navigation bars, toolbars, sheets, popovers, alerts,
+ * notification banners. Most of those are already handled by `@expo/ui`'s
+ * SwiftUI primitives and `expo-router`'s NativeTabs. Reach for `<Material>`
+ * only when you're hand-building floating UI: a custom HUD, a toast, a
+ * pill that overlays scrollable content, a custom sheet backdrop.
+ *
+ * Children render inside the surface unchanged. `tintColor` paints over the
+ * blur (semi-transparent so the blur still reads); on iOS 26+ it goes to
+ * `GlassView`'s native `tintColor` instead.
+ */
+export type MaterialVariant = "ultraThin" | "thin" | "regular" | "thick" | "chrome";
+
+const BLUR_INTENSITY: Record<MaterialVariant, number> = {
+  ultraThin: 30,
+  thin: 50,
+  regular: 70,
+  thick: 90,
+  chrome: 100,
+};
+
+const BLUR_TINT: Record<MaterialVariant, BlurTint> = {
+  ultraThin: "systemUltraThinMaterial",
+  thin: "systemThinMaterial",
+  regular: "systemMaterial",
+  thick: "systemThickMaterial",
+  chrome: "systemChromeMaterial",
+};
+
+const GLASS_STYLE: Record<MaterialVariant, GlassStyle> = {
+  ultraThin: "clear",
+  thin: "clear",
+  regular: "regular",
+  thick: "regular",
+  chrome: "regular",
+};
+
+const TINT_OVERLAY_OPACITY = 0.35;
+
+export function Material({
+  children,
+  style,
+  variant = "regular",
+  tintColor,
+  isInteractive = false,
+}: {
+  children?: ReactNode;
+  style?: ViewStyle;
+  variant?: MaterialVariant;
+  tintColor?: string;
+  isInteractive?: boolean;
+}) {
+  if (isLiquidGlassAvailable()) {
+    return (
+      <GlassView
+        style={style}
+        glassEffectStyle={GLASS_STYLE[variant]}
+        tintColor={tintColor}
+        isInteractive={isInteractive}
+      >
+        {children}
+      </GlassView>
+    );
+  }
+
+  return (
+    <BlurView style={style} intensity={BLUR_INTENSITY[variant]} tint={BLUR_TINT[variant]}>
+      {tintColor ? (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: tintColor, opacity: TINT_OVERLAY_OPACITY },
+          ]}
+          pointerEvents="none"
+          accessible={false}
+          importantForAccessibility="no"
+        />
+      ) : null}
+      {children}
+    </BlurView>
+  );
+}

package/dist/templates/default/components/ui/offline-banner.tsx

@@ -0,0 +1,58 @@
+import { Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { Material } from "@/components/ui/material";
+import { useNetwork } from "@/hooks/use-network";
+import { Spacing, FontSize, FontFamily } from "@/constants/layout";
+import { Radius } from "@/constants/theme";
+import { ZIndex } from "@/constants/ui";
+import { useColors } from "@/hooks/use-theme";
+
+// HIG: notification banners overlay the navigation layer with a translucent
+// material so context behind the alert remains visible.
+export function OfflineBanner() {
+  const { isOffline } = useNetwork();
+  const insets = useSafeAreaInsets();
+  const colors = useColors();
+
+  if (!isOffline) return null;
+
+  return (
+    <View
+      accessibilityLiveRegion="assertive"
+      accessibilityRole="alert"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: ZIndex.offlineBanner,
+        paddingTop: insets.top,
+      }}
+    >
+      <Material
+        variant="chrome"
+        tintColor={colors.destructive as string}
+        style={{
+          marginHorizontal: Spacing.md,
+          marginTop: Spacing.xs,
+          borderRadius: Radius.full,
+          overflow: "hidden",
+          paddingVertical: Spacing.sm,
+          paddingHorizontal: Spacing.lg,
+          alignItems: "center",
+        }}
+      >
+        <Text
+          style={{
+            fontSize: FontSize.md,
+            fontFamily: FontFamily.semiBold,
+            color: colors.destructiveForeground as string,
+          }}
+        >
+          You&apos;re offline
+        </Text>
+      </Material>
+    </View>
+  );
+}