create-croissant 0.1.43 → 0.1.45

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,136 @@
+import { View, Text, StyleSheet, ScrollView, FlatList } from "react-native";
+import { Link, useRouter } from "expo-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { usePlanets } from "@workspace/orpc/react";
+import { orpc } from "@/lib/orpc";
+import { useEffect, useState } from "react";
+
+export default function LandingScreen() {
+  const router = useRouter();
+  const [helloMessage, setHelloMessage] = useState("");
+  const { data: planets = [], isLoading } = usePlanets();
+
+  useEffect(() => {
+    orpc.hello({ name: "Croissant Stack Mobile" }).then((res) => {
+      setHelloMessage(res.message);
+    });
+  }, []);
+
+  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}>{helloMessage || "Loading..."}</Text>
+        </Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Planets from Database:</Text>
+        {isLoading ? (
+          <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

@@ -23,7 +23,8 @@
     },
     "web": {
       "output": "single",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/images/favicon.png",
+      "bundler": "metro"
     },
     "plugins": [
       "expo-router",
@@ -44,8 +45,7 @@
       "expo-web-browser"
     ],
     "experiments": {
-      "typedRoutes": true,
-      "reactCompiler": true
+      "typedRoutes": true
     }
   }
 }

package/template/apps/mobile/components/ui/button.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle, StyleProp } from "react-native";
+
+interface ButtonProps {
+  onPress: () => void;
+  children: React.ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  variant?: "primary" | "secondary" | "outline" | "destructive";
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Button({ 
+  onPress, 
+  children, 
+  disabled, 
+  loading, 
+  variant = "primary",
+  style
+}: ButtonProps) {
+  const containerStyle = [
+    styles.button,
+    styles[variant],
+    disabled && styles.disabled,
+    style,
+  ];
+
+  const textStyle = [
+    styles.text,
+    variant === "outline" && styles.outlineText,
+    disabled && styles.disabledText,
+  ];
+
+  return (
+    <TouchableOpacity 
+      style={containerStyle} 
+      onPress={onPress} 
+      disabled={disabled || loading}
+    >
+      {loading ? (
+        <ActivityIndicator color={variant === "outline" ? "#000" : "#fff"} />
+      ) : (
+        <Text style={textStyle}>{children}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 48,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 16,
+  },
+  primary: {
+    backgroundColor: "#000",
+  },
+  secondary: {
+    backgroundColor: "#f0f0f0",
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#e0e0e0",
+  },
+  destructive: {
+    backgroundColor: "#ef4444",
+  },
+  disabled: {
+    backgroundColor: "#ccc",
+    borderColor: "#ccc",
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  outlineText: {
+    color: "#000",
+  },
+  disabledText: {
+    color: "#999",
+  },
+});

package/template/apps/mobile/components/ui/input.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { TextInput, StyleSheet, TextInputProps, View, Text } from "react-native";
+
+interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+}
+
+export function Input({ label, error, style, ...props }: InputProps) {
+  return (
+    <View style={styles.container}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <TextInput
+        style={[
+          styles.input,
+          error && styles.inputError,
+          style,
+        ]}
+        placeholderTextColor="#999"
+        {...props}
+      />
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 8,
+    color: "#333",
+  },
+  input: {
+    height: 48,
+    borderWidth: 1,
+    borderColor: "#e0e0e0",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 16,
+    color: "#000",
+    backgroundColor: "#fff",
+  },
+  inputError: {
+    borderColor: "#ff4444",
+  },
+  errorText: {
+    color: "#ff4444",
+    fontSize: 12,
+    marginTop: 4,
+  },
+});

package/template/apps/mobile/lib/auth-client.ts

@@ -0,0 +1,14 @@
+import { createAuthClient } from "better-auth/react";
+import { expoClient } from "@better-auth/expo/client";
+import * as SecureStore from "expo-secure-store";
+
+export const authClient = createAuthClient({
+  baseURL: process.env.EXPO_PUBLIC_BETTER_AUTH_URL || "http://localhost:3000",
+  plugins: [
+    expoClient({
+      scheme: "mobile",
+      storagePrefix: "mobile",
+      storage: SecureStore,
+    }),
+  ],
+});

package/template/apps/mobile/lib/orpc.ts

@@ -0,0 +1,23 @@
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { RouterClient } from '@orpc/server'
+import { router } from '@workspace/orpc/router'
+
+export const link = new RPCLink({
+  url: `http://localhost:3000/api/rpc`,
+  async fetch(request, init) {
+    const { fetch } = await import('expo/fetch')
+    
+    const resp = await fetch(request.url, {
+      body: await request.blob(),
+      headers: request.headers,
+      method: request.method,
+      signal: request.signal,
+      ...init,
+    })
+
+    return resp
+  },
+})
+
+export const orpc: RouterClient<typeof router> = createORPCClient(link)