create-croissant 0.1.44 → 0.1.46

package/template/apps/mobile/app/(tabs)/index.tsx

@@ -1,114 +1,112 @@
-import { Image } from "expo-image";
-import { Platform, StyleSheet } from "react-native";
-
-import { HelloWave } from "@/components/hello-wave";
-import ParallaxScrollView from "@/components/parallax-scroll-view";
-import { ThemedText } from "@/components/themed-text";
-import { ThemedView } from "@/components/themed-view";
-import { Link } from "expo-router";
+import { useEffect } from "react";
+import { View, Text, StyleSheet, ScrollView, Platform } from "react-native";
+import { useRouter } from "expo-router";
 import { authClient } from "@/lib/auth-client";
+import { useSecretData } from "@workspace/orpc/react";
+import { Button } from "@/components/ui/button";
+
+export default function DashboardScreen() {
+  const router = useRouter();
+  const { data: session, isPending: isAuthPending } = authClient.useSession();
+  
+  const { data: secretData, isLoading: isLoadingSecret, error: secretError } = useSecretData({
+    enabled: !!session,
+  });
+
+  useEffect(() => {
+    if (!isAuthPending && !session) {
+      router.replace("/login");
+    }
+  }, [session, isAuthPending, router]);
+
+  const handleSignOut = async () => {
+    await authClient.signOut();
+    router.replace("/");
+  };
 
-export default function HomeScreen() {
-  const { data: session, isPending } = authClient.useSession();
+  if (isAuthPending) {
+    return (
+      <View style={styles.center}>
+        <Text>Loading dashboard...</Text>
+      </View>
+    );
+  }
 
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
-      headerImage={
-        <Image
-          source={require("@/assets/images/partial-react-logo.png")}
-          style={styles.reactLogo}
-        />
-      }
-    >
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <Text style={styles.title}>Dashboard</Text>
+      <Text style={styles.welcome}>Welcome, {session?.user?.name}!</Text>
+      <Text style={styles.description}>
+        This is a protected page. Only authenticated users can see this.
+      </Text>
 
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Auth Status</ThemedText>
-        {isPending ? (
-          <ThemedText>Checking session...</ThemedText>
-        ) : session ? (
-          <ThemedText>Logged in as: {session.user.email}</ThemedText>
+      <View style={styles.secureBox}>
+        <Text style={styles.secureTitle}>Secure oRPC Data:</Text>
+        {isLoadingSecret ? (
+          <Text style={styles.secureContent}>Loading secret data...</Text>
+        ) : secretError ? (
+          <Text style={[styles.secureContent, styles.errorText]}>
+            Error: {secretError.message || "Unknown error"}
+          </Text>
         ) : (
-          <ThemedText>Not logged in</ThemedText>
+          <Text style={styles.secureContent}>{secretData?.secret}</Text>
         )}
-      </ThemedView>
+      </View>
 
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{" "}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: "cmd + d",
-              android: "cmd + m",
-              web: "F12",
-            })}
-          </ThemedText>{" "}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <Link href="/modal">
-          <Link.Trigger>
-            <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-          </Link.Trigger>
-          <Link.Preview />
-          <Link.Menu>
-            <Link.MenuAction title="Action" icon="cube" onPress={() => alert("Action pressed")} />
-            <Link.MenuAction
-              title="Share"
-              icon="square.and.arrow.up"
-              onPress={() => alert("Share pressed")}
-            />
-            <Link.Menu title="More" icon="ellipsis">
-              <Link.MenuAction
-                title="Delete"
-                icon="trash"
-                destructive
-                onPress={() => alert("Delete pressed")}
-              />
-            </Link.Menu>
-          </Link.Menu>
-        </Link>
-
-        <ThemedText>
-          {`Tap the Explore tab to learn more about what's included in this starter app.`}
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          {`When you're ready, run `}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{" "}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{" "}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+      <Button variant="destructive" onPress={handleSignOut} style={styles.signOutBtn}>
+        Sign Out
+      </Button>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: "row",
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  content: {
+    padding: 24,
+  },
+  center: {
+    flex: 1,
+    justifyContent: "center",
     alignItems: "center",
-    gap: 8,
   },
-  stepContainer: {
-    gap: 8,
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
     marginBottom: 8,
   },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: "absolute",
+  welcome: {
+    fontSize: 18,
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 14,
+    color: "#666",
+    marginBottom: 24,
+  },
+  secureBox: {
+    padding: 16,
+    backgroundColor: "#f9f9f9",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#eee",
+    marginBottom: 24,
+  },
+  secureTitle: {
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  secureContent: {
+    fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
+    fontSize: 12,
+  },
+  errorText: {
+    color: "#ef4444",
+  },
+  signOutBtn: {
+    marginTop: 12,
   },
 });

package/template/apps/mobile/app/_layout.tsx

@@ -2,9 +2,22 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ORPCProvider } from "@workspace/orpc/react";
+import { orpc } from "@/lib/orpc";
 
 import { useColorScheme } from "@/hooks/use-color-scheme";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      onError: (error) => {
+        console.error("Global Mutation Error:", error);
+      },
+    },
+  },
+});
+
 export const unstable_settings = {
   anchor: "(tabs)",
 };
@@ -13,12 +26,18 @@ export default function RootLayout() {
   const colorScheme = useColorScheme();
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: "modal", title: "Modal" }} />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ORPCProvider client={orpc}>
+        <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+          <Stack>
+            <Stack.Screen name="index" options={{ headerShown: false }} />
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen name="login" options={{ title: "Login" }} />
+            <Stack.Screen name="signup" options={{ title: "Sign Up" }} />
+          </Stack>
+          <StatusBar style="auto" />
+        </ThemeProvider>
+      </ORPCProvider>
+    </QueryClientProvider>
   );
 }

package/template/apps/mobile/app/index.tsx

@@ -0,0 +1,129 @@
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { useRouter } from "expo-router";
+import { Button } from "@/components/ui/button";
+import { usePlanets, useHello } from "@workspace/orpc/react";
+
+export default function LandingScreen() {
+  const router = useRouter();
+  const { data: helloData, isLoading: isHelloLoading } = useHello("Croissant Stack Mobile");
+  const { data: planets = [], isLoading: isPlanetsLoading } = usePlanets();
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Project ready!</Text>
+        <Text style={styles.subtitle}>
+          oRPC integration: <Text style={styles.bold}>
+            {isHelloLoading ? "Loading..." : helloData?.message}
+          </Text>
+        </Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Planets from Database:</Text>
+        {isPlanetsLoading ? (
+          <Text style={styles.loading}>Loading planets...</Text>
+        ) : planets.length === 0 ? (
+          <Text style={styles.empty}>
+            No planets found in the database. Run `db:push` and seed data if needed.
+          </Text>
+        ) : (
+          planets.map((planet: any) => (
+            <View key={planet.id} style={styles.planetCard}>
+              <Text style={styles.planetName}>{planet.name}</Text>
+              <Text style={styles.planetDesc}>{planet.description}</Text>
+            </View>
+          ))
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        <Button onPress={() => router.push("/login")} style={styles.button}>
+          Go to Login
+        </Button>
+        <Button 
+          onPress={() => router.push("/(tabs)")} 
+          variant="outline" 
+          style={styles.button}
+        >
+          Go to Dashboard
+        </Button>
+        <Text style={styles.footerText}>
+          You may now add components and start building.
+        </Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  content: {
+    padding: 24,
+    paddingTop: 60,
+  },
+  header: {
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#666",
+  },
+  bold: {
+    fontWeight: "bold",
+    color: "#000",
+  },
+  section: {
+    marginBottom: 32,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: "600",
+    marginBottom: 16,
+  },
+  planetCard: {
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#eee",
+    marginBottom: 12,
+    backgroundColor: "#fafafa",
+  },
+  planetName: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  planetDesc: {
+    fontSize: 14,
+    color: "#666",
+  },
+  loading: {
+    fontStyle: "italic",
+    color: "#999",
+  },
+  empty: {
+    fontStyle: "italic",
+    color: "#999",
+  },
+  footer: {
+    gap: 12,
+  },
+  button: {
+    width: "100%",
+  },
+  footerText: {
+    marginTop: 16,
+    textAlign: "center",
+    color: "#999",
+    fontSize: 14,
+  },
+});

package/template/apps/mobile/app/login.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, Text } from "react-native";
+import { useRouter } from "expo-router";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function LoginScreen() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleLogin = async () => {
+    if (!email || !password) {
+      setError("Please fill in all fields");
+      return;
+    }
+    
+    setLoading(true);
+    setError(null);
+    try {
+      const { error } = await authClient.signIn.email({
+        email,
+        password,
+      });
+      
+      if (error) {
+        setError(error.message || "Invalid credentials");
+      } else {
+        router.replace("/(tabs)");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred during login");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={styles.container}
+    >
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.header}>
+          <Text style={styles.title}>Welcome Back</Text>
+          <Text style={styles.subtitle}>Sign in to your account</Text>
+        </View>
+
+        <View style={styles.form}>
+          <Input
+            label="Email"
+            placeholder="email@example.com"
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+          />
+
+          <Input
+            label="Password"
+            placeholder="••••••••"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+          />
+
+          {error && <Text style={styles.errorText}>{error}</Text>}
+
+          <Button
+            onPress={handleLogin}
+            loading={loading}
+          >
+            Sign In
+          </Button>
+
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>Don't have an account? </Text>
+            <Text
+              style={styles.link}
+              onPress={() => router.push("/signup")}
+            >
+              Sign Up
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  scrollContent: {
+    flexGrow: 1,
+    padding: 24,
+    justifyContent: "center",
+  },
+  header: {
+    marginBottom: 40,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#666",
+  },
+  form: {
+    gap: 20,
+  },
+  errorText: {
+    color: "#ef4444",
+    fontSize: 14,
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginTop: 20,
+  },
+  footerText: {
+    color: "#666",
+  },
+  link: {
+    color: "#000",
+    fontWeight: "bold",
+  },
+});

package/template/apps/mobile/app/signup.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, Text } from "react-native";
+import { useRouter } from "expo-router";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function SignupScreen() {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSignup = async () => {
+    if (!name || !email || !password) {
+      setError("Please fill in all fields");
+      return;
+    }
+    
+    setLoading(true);
+    setError(null);
+    try {
+      const { error } = await authClient.signUp.email({
+        email,
+        password,
+        name,
+      });
+      
+      if (error) {
+        setError(error.message || "An error occurred during signup");
+      } else {
+        router.replace("/(tabs)");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred during signup");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={styles.container}
+    >
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.header}>
+          <Text style={styles.title}>Create Account</Text>
+          <Text style={styles.subtitle}>Join the Croissant Stack</Text>
+        </View>
+
+        <View style={styles.form}>
+          <Input
+            label="Name"
+            placeholder="John Doe"
+            value={name}
+            onChangeText={setName}
+          />
+
+          <Input
+            label="Email"
+            placeholder="email@example.com"
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+          />
+
+          <Input
+            label="Password"
+            placeholder="••••••••"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+          />
+
+          {error && <Text style={styles.errorText}>{error}</Text>}
+
+          <Button
+            onPress={handleSignup}
+            loading={loading}
+          >
+            Sign Up
+          </Button>
+
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>Already have an account? </Text>
+            <Text
+              style={styles.link}
+              onPress={() => router.push("/login")}
+            >
+              Sign In
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  scrollContent: {
+    flexGrow: 1,
+    padding: 24,
+    justifyContent: "center",
+  },
+  header: {
+    marginBottom: 40,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#666",
+  },
+  form: {
+    gap: 20,
+  },
+  errorText: {
+    color: "#ef4444",
+    fontSize: 14,
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginTop: 20,
+  },
+  footerText: {
+    color: "#666",
+  },
+  link: {
+    color: "#000",
+    fontWeight: "bold",
+  },
+});

package/template/apps/mobile/app.json

@@ -9,7 +9,12 @@
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "infoPlist": {
+        "NSAppTransportSecurity": {
+          "NSAllowsLocalNetworking": true
+        }
+      }
     },
     "android": {
       "adaptiveIcon": {
@@ -23,7 +28,8 @@
     },
     "web": {
       "output": "single",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/images/favicon.png",
+      "bundler": "metro"
     },
     "plugins": [
       "expo-router",
@@ -44,8 +50,7 @@
       "expo-web-browser"
     ],
     "experiments": {
-      "typedRoutes": true,
-      "reactCompiler": true
+      "typedRoutes": true
     }
   }
 }