create-croissant 0.1.44 → 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/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)

package/template/apps/mobile/package.json

@@ -15,9 +15,16 @@
   "dependencies": {
     "@better-auth/expo": "^1.6.9",
     "@expo/vector-icons": "^15.0.3",
+    "@orpc/client": "^1.14.0",
+    "@orpc/server": "^1.14.0",
+    "@orpc/tanstack-query": "^1.14.0",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "@tanstack/react-form": "^1.29.1",
+    "@tanstack/react-query": "^5.100.5",
+    "@workspace/orpc": "^0.0.0",
+    "@workspace/ui": "^0.0.0",
     "better-auth": "^1.6.9",
     "expo": "^55.0.17",
     "expo-constants": "~55.0.15",
@@ -39,6 +46,11 @@
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.23.0",
     "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.7.4"
+    "react-native-worklets": "0.7.4",
+    "zod": "4.3.6"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-import-meta": "^2.3.3",
+    "metro-react-native-babel-transformer": "^0.77.0"
   }
 }

package/template/apps/mobile/tsconfig.json

@@ -1,5 +1,8 @@
 {
-  "extends": "expo/tsconfig.base",
+  "extends": [
+    "expo/tsconfig.base",
+    "@workspace/config-typescript/react.json"
+  ],
   "compilerOptions": {
     "strict": true,
     "paths": {

package/template/apps/platform/package.json

@@ -29,7 +29,8 @@
     "lucide-react": "^1.11.0",
     "nitro": "latest",
     "tailwindcss": "^4.2.4",
-    "vite-tsconfig-paths": "^6.1.1"
+    "vite-tsconfig-paths": "^6.1.1",
+    "zod": "4.3.6"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",