create-croissant 0.1.46 → 0.1.48

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

@@ -1,345 +0,0 @@
-import { useState } from "react";
-import {
-  Alert,
-  FlatList,
-  Modal,
-  StyleSheet,
-  Text,
-  View,
-  ActivityIndicator,
-  ScrollView,
-} from "react-native";
-import { useQueryClient } from "@tanstack/react-query";
-import { useForm } from "@tanstack/react-form";
-import { z } from "zod";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { usePlanets, useCreatePlanet, useUpdatePlanet, useDeletePlanet } from "@workspace/orpc/react";
-
-const planetSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  description: z.string(),
-  distance: z.string().refine((val) => !isNaN(parseFloat(val)), {
-    message: "Must be a number",
-  }),
-  diameter: z.string().refine((val) => !isNaN(parseFloat(val)), {
-    message: "Must be a number",
-  }),
-});
-
-export default function ExploreScreen() {
-  const [modalVisible, setModalVisible] = useState(false);
-  const [editingId, setEditingId] = useState<number | null>(null);
-
-  const { data: planets = [], isLoading } = usePlanets();
-
-  const form = useForm({
-    defaultValues: {
-      name: "",
-      description: "",
-      distance: "0",
-      diameter: "0",
-    },
-    validators: {
-      onChange: planetSchema,
-    },
-    onSubmit: async ({ value }) => {
-      const payload = {
-        name: value.name,
-        description: value.description || undefined,
-        distanceFromSun: parseFloat(value.distance) || 0,
-        diameter: parseFloat(value.diameter) || 0,
-        hasRings: false,
-      };
-      console.log('connard')
-
-      try {
-        if (editingId) {
-          await updateMutation.mutateAsync({ id: editingId, ...payload });
-        } else {
-          await createMutation.mutateAsync(payload);
-        }
-        closeModal();
-      } catch (err) {
-        // Error handled in mutation callbacks
-      }
-    },
-  });
-
-  const resetForm = () => {
-    form.reset();
-    setEditingId(null);
-  };
-
-  const createMutation = useCreatePlanet({
-    onSuccess: () => {
-      Alert.alert("Success", "Planet added successfully");
-    },
-    onError: (err) => {
-      Alert.alert("Error", err.message || "Failed to add planet");
-    },
-  });
-
-  const updateMutation = useUpdatePlanet({
-    onSuccess: () => {
-      Alert.alert("Success", "Planet updated successfully");
-    },
-    onError: (err) => {
-      Alert.alert("Error", err.message || "Failed to update planet");
-    },
-  });
-
-  const deleteMutation = useDeletePlanet({
-    onSuccess: () => {
-      Alert.alert("Success", "Planet deleted successfully");
-    },
-    onError: (err) => {
-      Alert.alert("Error", err.message || "Failed to delete planet");
-    },
-  });
-
-  const handleEdit = (planet: any) => {
-    setEditingId(planet.id);
-    form.setFieldValue("name", planet.name);
-    form.setFieldValue("description", planet.description || "");
-    form.setFieldValue("distance", planet.distanceFromSun.toString());
-    form.setFieldValue("diameter", planet.diameter.toString());
-    setModalVisible(true);
-  };
-
-  const handleDelete = (id: number) => {
-    deleteMutation.mutateAsync({id})
-  };
-
-  const closeModal = () => {
-    setModalVisible(false);
-    resetForm();
-  };
-
-  if (isLoading) {
-    return (
-      <View style={styles.center}>
-        <ActivityIndicator size="large" color="#000" />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <FlatList
-        data={planets}
-        keyExtractor={(item) => item.id.toString()}
-        contentContainerStyle={styles.listContent}
-        renderItem={({ item }) => (
-          <View style={styles.planetCard}>
-            <View style={styles.planetInfo}>
-              <Text style={styles.planetName}>{item.name}</Text>
-              <Text style={styles.planetDesc}>{item.description}</Text>
-              <Text style={styles.planetDetails}>
-                Distance: {item.distanceFromSun} AU • Diameter: {item.diameter} km
-              </Text>
-            </View>
-            <View style={styles.actions}>
-              <Button
-                variant="outline"
-                onPress={() => handleEdit(item)}
-                style={styles.actionBtn}
-              >
-                Edit
-              </Button>
-              <Button
-                variant="destructive"
-                onPress={() => handleDelete(item.id)}
-                style={styles.actionBtn}
-              >
-                Delete
-              </Button>
-            </View>
-          </View>
-        )}
-        ListEmptyComponent={
-          <Text style={styles.emptyText}>No planets found. Add one!</Text>
-        }
-      />
-
-      <Button
-        onPress={() => setModalVisible(true)}
-        style={styles.fab}
-      >
-        Add Planet
-      </Button>
-
-      <Modal
-        visible={modalVisible}
-        animationType="slide"
-        onRequestClose={closeModal}
-      >
-        <View style={styles.modalContainer}>
-          <ScrollView contentContainerStyle={styles.modalContent}>
-            <Text style={styles.modalTitle}>
-              {editingId ? "Edit Planet" : "Add New Planet"}
-            </Text>
-
-            <form.Field name="name">
-              {(field: any) => (
-                <Input
-                  label="Name"
-                  value={field.state.value}
-                  onChangeText={field.handleChange}
-                  placeholder="Earth"
-                  error={field.state.meta.errors?.[0]?.toString()}
-                />
-              )}
-            </form.Field>
-
-            <form.Field name="description">
-              {(field: any) => (
-                <Input
-                  label="Description"
-                  value={field.state.value}
-                  onChangeText={field.handleChange}
-                  placeholder="The blue planet"
-                />
-              )}
-            </form.Field>
-
-            <form.Field name="distance">
-              {(field: any) => (
-                <Input
-                  label="Distance from Sun (AU)"
-                  value={field.state.value}
-                  onChangeText={field.handleChange}
-                  keyboardType="numeric"
-                  error={field.state.meta.errors?.[0]?.toString()}
-                />
-              )}
-            </form.Field>
-
-            <form.Field name="diameter">
-              {(field: any) => (
-                <Input
-                  label="Diameter (km)"
-                  value={field.state.value}
-                  onChangeText={field.handleChange}
-                  keyboardType="numeric"
-                  error={field.state.meta.errors?.[0]?.toString()}
-                />
-              )}
-            </form.Field>
-
-            <View style={styles.modalActions}>
-              <Button
-                variant="outline"
-                onPress={closeModal}
-                style={styles.modalBtn}
-              >
-                Cancel
-              </Button>
-              <Button
-                onPress={form.handleSubmit}
-                loading={createMutation.isPending || updateMutation.isPending}
-                style={styles.modalBtn}
-              >
-                {editingId ? "Update" : "Create"}
-              </Button>
-            </View>
-          </ScrollView>
-        </View>
-      </Modal>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-  },
-  center: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  listContent: {
-    padding: 16,
-    paddingBottom: 100,
-  },
-  planetCard: {
-    padding: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "#eee",
-    marginBottom: 16,
-    backgroundColor: "#fff",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  planetInfo: {
-    marginBottom: 16,
-  },
-  planetName: {
-    fontSize: 18,
-    fontWeight: "bold",
-    marginBottom: 4,
-  },
-  planetDesc: {
-    fontSize: 14,
-    color: "#666",
-    marginBottom: 8,
-  },
-  planetDetails: {
-    fontSize: 12,
-    color: "#999",
-  },
-  actions: {
-    flexDirection: "row",
-    gap: 8,
-  },
-  actionBtn: {
-    flex: 1,
-    height: 36,
-  },
-  emptyText: {
-    textAlign: "center",
-    marginTop: 40,
-    color: "#999",
-    fontStyle: "italic",
-  },
-  fab: {
-    position: "absolute",
-    bottom: 24,
-    left: 24,
-    right: 24,
-    height: 56,
-    borderRadius: 28,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  modalContainer: {
-    flex: 1,
-    backgroundColor: "#fff",
-  },
-  modalContent: {
-    padding: 24,
-    paddingTop: 60,
-  },
-  modalTitle: {
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 32,
-  },
-  modalActions: {
-    flexDirection: "row",
-    gap: 12,
-    marginTop: 32,
-  },
-  modalBtn: {
-    flex: 1,
-  },
-});

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

@@ -1,112 +0,0 @@
-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("/");
-  };
-
-  if (isAuthPending) {
-    return (
-      <View style={styles.center}>
-        <Text>Loading dashboard...</Text>
-      </View>
-    );
-  }
-
-  return (
-    <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>
-
-      <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>
-        ) : (
-          <Text style={styles.secureContent}>{secretData?.secret}</Text>
-        )}
-      </View>
-
-      <Button variant="destructive" onPress={handleSignOut} style={styles.signOutBtn}>
-        Sign Out
-      </Button>
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-  },
-  content: {
-    padding: 24,
-  },
-  center: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "bold",
-    marginBottom: 8,
-  },
-  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

@@ -1,43 +0,0 @@
-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)",
-};
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <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

@@ -1,129 +0,0 @@
-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,
-  },
-});