create-croissant 0.1.44 → 0.1.46

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

@@ -3,7 +3,7 @@ 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",
+  baseURL: process.env.EXPO_PUBLIC_BETTER_AUTH_URL || "https://platform.local",
   plugins: [
     expoClient({
       scheme: "mobile",

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

@@ -0,0 +1,28 @@
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { RouterClient } from '@orpc/server'
+import { router } from '@workspace/orpc/router'
+import { authClient } from './auth-client'
+
+export const link = new RPCLink({
+  url: `https://platform.local/api/rpc`,
+  async fetch(request, init) {
+    const { fetch } = await import('expo/fetch')
+    const headers = new Map<string, string>(); 
+    const cookies = authClient.getCookie(); 
+    if (cookies) { 
+      headers.set("Cookie", cookies); 
+    } 
+
+    const resp = await fetch(request.url, {
+      body: request.body,
+      headers: Object.fromEntries(headers),
+      method: request.method,
+      ...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": "workspace:*",
+    "@workspace/ui": "workspace:*",
     "better-auth": "^1.6.9",
     "expo": "^55.0.17",
     "expo-constants": "~55.0.15",
@@ -33,12 +40,18 @@
     "expo-symbols": "~55.0.7",
     "expo-system-ui": "~55.0.16",
     "expo-web-browser": "~55.0.14",
-    "react-native": "^0.84.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "react-native": "0.83.6",
     "react-native-gesture-handler": "~2.30.0",
     "react-native-reanimated": "4.2.1",
     "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"
+  },
+  "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/.env.example

@@ -1,4 +1,4 @@
 BETTER_AUTH_SECRET=your-super-secret-key-change-this-in-production
-BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_URL=https://platform.local
 
 DATABASE_URL=postgresql://postgres:postgres@localhost:5432/auth

package/template/apps/platform/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite dev --port 3000",
+    "dev": "portless platform vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
@@ -22,19 +22,23 @@
     "@tanstack/react-router": "^1.168.24",
     "@tanstack/react-start": "^1.167.49",
     "@tanstack/router-plugin": "^1.167.27",
-    "@workspace/auth": "*",
-    "@workspace/orpc": "*",
-    "@workspace/ui": "*",
+    "@workspace/auth": "workspace:*",
+    "@workspace/orpc": "workspace:*",
+    "@workspace/ui": "workspace:*",
     "better-auth": "^1.6.9",
     "lucide-react": "^1.11.0",
     "nitro": "latest",
+    "sonner": "^2.0.7",
     "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",
     "@vitejs/plugin-react": "^6.0.1",
-    "@workspace/config-typescript": "*",
+    "@workspace/config-typescript": "workspace:*",
+    "dotenv": "^17.4.2",
+    "drizzle-kit": "^0.31.10",
     "vite": "^8.0.10"
   }
 }

package/template/apps/platform/portless.json

@@ -0,0 +1,3 @@
+{
+  "name": "platform"
+}

package/template/apps/platform/src/components/login-form.tsx

@@ -18,12 +18,13 @@ import { Input } from "@workspace/ui/components/input";
 import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { useForm } from "@tanstack/react-form";
-import { type } from "arktype";
+import { z } from "zod";
+
 import { authClient } from "@/lib/auth-client";
 
-const loginSchema = type({
-  email: "string.email",
-  password: "string>0",
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
 });
 
 export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {

package/template/apps/platform/src/components/signup-form.tsx

@@ -17,24 +17,20 @@ import { Input } from "@workspace/ui/components/input";
 import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { useForm } from "@tanstack/react-form";
-import { type } from "arktype";
+import { z } from "zod";
 import { authClient } from "@/lib/auth-client";
 
-const signupSchema = type({
-  name: "string>0",
-  email: "string.email",
-  password: "string>=8",
-  confirmPassword: "string>0",
-}).narrow((data, ctx) => {
-  if (data.password !== data.confirmPassword) {
-    ctx.error({
-      message: "Passwords do not match",
-      path: ["confirmPassword"],
-    });
-    return false;
-  }
-  return true;
-});
+const signupSchema = z
+  .object({
+    name: z.string().min(1, "Name is required"),
+    email: z.string().email("Invalid email address"),
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirmPassword: z.string().min(1, "Confirm password is required"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
 
 export function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {
   const [loading, setLoading] = useState(false);

package/template/apps/platform/src/router.tsx

@@ -4,7 +4,6 @@ import { routeTree } from "./routeTree.gen";
 export function getRouter() {
   const router = createTanStackRouter({
     routeTree,
-
     scrollRestoration: true,
     defaultPreload: "intent",
     defaultPreloadStaleTime: 0,

package/template/apps/platform/src/routes/__root.tsx

@@ -2,6 +2,8 @@ import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "@workspace/ui/components/sonner";
 import { ThemeProvider } from "@workspace/ui/components/theme-provider";
+import { ORPCProvider } from "@workspace/orpc/react";
+import { orpc } from "@/lib/orpc";
 
 import appCss from "@workspace/ui/globals.css?url";
 
@@ -40,8 +42,10 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       <body>
         <ThemeProvider defaultTheme="system" storageKey="theme">
           <QueryClientProvider client={queryClient}>
-            {children}
-            <Toaster />
+            <ORPCProvider client={orpc}>
+              {children}
+              <Toaster />
+            </ORPCProvider>
           </QueryClientProvider>
         </ThemeProvider>
         <Scripts />

package/template/apps/platform/src/routes/_auth/account.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { useForm } from "@tanstack/react-form";
+import { z } from "zod";
 import { toast } from "sonner";
 import { Loader2, User } from "lucide-react";
-import { type } from "arktype";
 
 import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
@@ -22,24 +22,20 @@ import { Separator } from "@workspace/ui/components/separator";
 import { authClient } from "@/lib/auth-client";
 import { getSessionFn } from "@/lib/auth-utils";
 
-const profileSchema = type({
-  name: "string>0",
+const profileSchema = z.object({
+  name: z.string().min(1, "Name is required"),
 });
 
-const passwordSchema = type({
-  currentPassword: "string>0",
-  newPassword: "string>=8",
-  confirmPassword: "string>0",
-}).narrow((data, ctx) => {
-  if (data.newPassword !== data.confirmPassword) {
-    ctx.error({
-      message: "Passwords do not match",
-      path: ["confirmPassword"],
-    });
-    return false;
-  }
-  return true;
-});
+const passwordSchema = z
+  .object({
+    currentPassword: z.string().min(1, "Current password is required"),
+    newPassword: z.string().min(8, "New password must be at least 8 characters"),
+    confirmPassword: z.string().min(1, "Confirm password is required"),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
 
 export const Route = createFileRoute("/_auth/account")({
   beforeLoad: async () => {

package/template/apps/platform/src/routes/_auth/examples/client-orpc-auth.tsx

@@ -1,7 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useQuery } from "@tanstack/react-query";
 import { getSessionFn } from "@/lib/auth-utils";
-import { orpc } from "@/lib/orpc";
+import { useSecretData } from "@workspace/orpc/react";
 
 export const Route = createFileRoute("/_auth/examples/client-orpc-auth")({
   beforeLoad: async () => {
@@ -22,10 +21,7 @@ export const Route = createFileRoute("/_auth/examples/client-orpc-auth")({
 function ClientORPCAuth() {
   const { session } = Route.useRouteContext();
 
-  const { data, isLoading } = useQuery({
-    queryKey: ["secret-data"],
-    queryFn: () => orpc.getSecretData(),
-  });
+  const { data, isLoading } = useSecretData();
 
   return (
     <div className="flex flex-col gap-4">

package/template/apps/platform/src/routes/_public/examples/client-orpc.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { Check, Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { useForm } from "@tanstack/react-form";
-import { type } from "arktype";
+import { z } from "zod";
 
 import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
@@ -12,25 +12,21 @@ import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field";
 
 import type { router } from "@workspace/orpc/router";
 import type { InferRouterInputs, InferRouterOutputs } from "@orpc/server";
-import { orpc } from "@/lib/orpc";
+import { usePlanets, useCreatePlanet, useUpdatePlanet, useDeletePlanet } from "@workspace/orpc/react";
 
 type Inputs = InferRouterInputs<typeof router>;
 type Outputs = InferRouterOutputs<typeof router>;
 type Planet = Outputs["planets"]["getPlanets"][number];
 
-const planetSchema = type({
-  name: "string>0",
-  description: "string",
-  distance: "string",
-  diameter: "string",
-}).narrow((data, ctx) => {
-  if (isNaN(parseFloat(data.distance))) {
-    ctx.error({ message: "Must be a number", path: ["distance"] });
-  }
-  if (isNaN(parseFloat(data.diameter))) {
-    ctx.error({ message: "Must be a number", path: ["diameter"] });
-  }
-  return true;
+const planetSchema = z.object({
+  name: z.string().min(1),
+  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 const Route = createFileRoute("/_public/examples/client-orpc")({
@@ -52,10 +48,7 @@ function ClientORPC() {
   const queryClient = useQueryClient();
   const [editingId, setEditingId] = React.useState<number | null>(null);
 
-  const { data: planets = [], isLoading } = useQuery({
-    queryKey: ["planets"],
-    queryFn: () => orpc.planets.getPlanets(),
-  });
+  const { data: planets = [], isLoading } = usePlanets();
 
   const form = useForm({
     defaultValues: {
@@ -94,10 +87,8 @@ function ClientORPC() {
     setEditingId(null);
   };
 
-  const createMutation = useMutation({
-    mutationFn: (input: Inputs["planets"]["createPlanet"]) => orpc.planets.createPlanet(input),
+  const createMutation = useCreatePlanet({
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["planets"] });
       resetForm();
       toast.success("Planet added successfully");
     },
@@ -106,10 +97,8 @@ function ClientORPC() {
     },
   });
 
-  const updateMutation = useMutation({
-    mutationFn: (input: Inputs["planets"]["updatePlanet"]) => orpc.planets.updatePlanet(input),
+  const updateMutation = useUpdatePlanet({
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["planets"] });
       resetForm();
       toast.success("Planet updated successfully");
     },
@@ -118,10 +107,8 @@ function ClientORPC() {
     },
   });
 
-  const deleteMutation = useMutation({
-    mutationFn: (input: Inputs["planets"]["deletePlanet"]) => orpc.planets.deletePlanet(input),
+  const deleteMutation = useDeletePlanet({
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["planets"] });
       toast.success("Planet deleted successfully");
     },
     onError: (err) => {

package/template/apps/platform/src/routes/_public/examples/ssr-orpc.tsx

@@ -4,7 +4,7 @@ import { createServerFn } from "@tanstack/react-start";
 import { Check, Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { useForm } from "@tanstack/react-form";
-import { type } from "arktype";
+import { z } from "zod";
 
 import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
@@ -17,19 +17,15 @@ import { orpc } from "@/lib/orpc";
 type Outputs = InferRouterOutputs<typeof router>;
 type Planet = Outputs["planets"]["getPlanets"][number];
 
-const planetSchema = type({
-  name: "string>0",
-  description: "string",
-  distance: "string",
-  diameter: "string",
-}).narrow((data, ctx) => {
-  if (isNaN(parseFloat(data.distance))) {
-    ctx.error({ message: "Must be a number", path: ["distance"] });
-  }
-  if (isNaN(parseFloat(data.diameter))) {
-    ctx.error({ message: "Must be a number", path: ["diameter"] });
-  }
-  return true;
+const planetSchema = z.object({
+  name: z.string().min(1),
+  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",
+  }),
 });
 
 const getPlanets = createServerFn({ method: "GET" }).handler(async () => {

package/template/apps/platform/src/routes/api/auth/$.ts

@@ -1,14 +1,35 @@
 import { auth } from "@workspace/auth/lib/auth";
 import { createFileRoute } from "@tanstack/react-router";
 
+const CORS_HEADERS = {
+  "Access-Control-Allow-Origin": "http://localhost:8081",
+  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization",
+  "Access-Control-Allow-Credentials": "true",
+};
+
 export const Route = createFileRoute("/api/auth/$")({
   server: {
     handlers: {
       GET: async ({ request }: { request: Request }) => {
-        return await auth.handler(request);
+        const response = await auth.handler(request);
+        Object.entries(CORS_HEADERS).forEach(([key, value]) => {
+          response.headers.set(key, value);
+        });
+        return response;
       },
       POST: async ({ request }: { request: Request }) => {
-        return await auth.handler(request);
+        const response = await auth.handler(request);
+        Object.entries(CORS_HEADERS).forEach(([key, value]) => {
+          response.headers.set(key, value);
+        });
+        return response;
+      },
+      OPTIONS: async () => {
+        return new Response(null, {
+          status: 204,
+          headers: CORS_HEADERS,
+        });
       },
     },
   },

package/template/apps/platform/src/routes/api/rpc.$.ts

@@ -27,8 +27,26 @@ export const Route = createFileRoute("/api/rpc/$")({
           },
         });
 
+        if (response) {
+          response.headers.set("Access-Control-Allow-Origin", "http://localhost:8081");
+          response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+          response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
+          response.headers.set("Access-Control-Allow-Credentials", "true");
+        }
+
         return response ?? new Response("Not Found", { status: 404 });
       },
+      OPTIONS: async () => {
+        return new Response(null, {
+          status: 204,
+          headers: {
+            "Access-Control-Allow-Origin": "http://localhost:8081",
+            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+            "Access-Control-Allow-Headers": "Content-Type, Authorization",
+            "Access-Control-Allow-Credentials": "true",
+          },
+        });
+      },
     },
   },
 });