create-croissant 0.1.49 → 0.1.51

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

@@ -0,0 +1,310 @@
+import * as React from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { Check, Pencil, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useForm } from "@tanstack/react-form";
+import { z } from "zod";
+
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field";
+
+import type { router } from "@workspace/orpc/router";
+import type { InferRouterOutputs } from "@orpc/server";
+import { usePlanets, useCreatePlanet, useUpdatePlanet, useDeletePlanet } from "@workspace/orpc/react";
+
+type Outputs = InferRouterOutputs<typeof router>;
+type Planet = Outputs["planets"]["getPlanets"][number];
+
+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")({
+  component: ClientORPC,
+});
+
+function ClientORPC() {
+  const [editingId, setEditingId] = React.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 }) => {
+      if (editingId) {
+        await updateMutation.mutateAsync({
+          id: editingId,
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        });
+      } else {
+        await createMutation.mutateAsync({
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        });
+      }
+    },
+  });
+
+  const resetForm = () => {
+    form.reset();
+    setEditingId(null);
+  };
+
+  const createMutation = useCreatePlanet({
+    onSuccess: () => {
+      resetForm();
+      toast.success("Planet added successfully");
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to add planet");
+    },
+  });
+
+  const updateMutation = useUpdatePlanet({
+    onSuccess: () => {
+      resetForm();
+      toast.success("Planet updated successfully");
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to update planet");
+    },
+  });
+
+  const deleteMutation = useDeletePlanet({
+    onSuccess: () => {
+      toast.success("Planet deleted successfully");
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to delete planet");
+    },
+  });
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("Are you sure you want to delete this planet?")) return;
+    await deleteMutation.mutateAsync({ id });
+  };
+
+  const startEdit = (planet: Planet) => {
+    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());
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h1 className="text-2xl font-bold mb-2">Client + oRPC CRUD</h1>
+        <p className="text-muted-foreground">
+          Manage planets directly from the client using TanStack Query, TanStack Form and oRPC.
+        </p>
+      </div>
+
+      <div className="rounded-lg border p-6 bg-muted/30 dark:bg-zinc-900/30">
+        <h2 className="font-semibold mb-4 flex items-center gap-2">
+          {editingId ? <Pencil className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+          {editingId ? "Edit Planet" : "Add New Planet"}
+        </h2>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
+          }}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <form.Field
+              name="name"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Mars"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="description"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Description</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="The red planet"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="distance"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Distance (M km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="diameter"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Diameter (km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+          </div>
+          <div className="mt-6 flex gap-2">
+            <form.Subscribe
+              selector={(state) => ({
+                canSubmit: state.canSubmit,
+                isSubmitting: state.isSubmitting,
+              })}
+            >
+              {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
+                <>
+                  {editingId ? (
+                    <>
+                      <Button
+                        type="submit"
+                        className="flex items-center gap-2"
+                        disabled={!state.canSubmit || state.isSubmitting || updateMutation.isPending}
+                      >
+                        <Check className="h-4 w-4" />{" "}
+                        {state.isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        type="button"
+                        onClick={resetForm}
+                        disabled={state.isSubmitting || updateMutation.isPending}
+                      >
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <Button
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={!state.canSubmit || state.isSubmitting || createMutation.isPending}
+                    >
+                      <Plus className="h-4 w-4" />{" "}
+                      {state.isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
+                    </Button>
+                  )}
+                </>
+              )}
+            </form.Subscribe>
+          </div>
+        </form>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="font-semibold text-lg">Current Planets</h2>
+        {isLoading ? (
+          <p>Loading planets...</p>
+        ) : planets.length === 0 ? (
+          <p className="text-gray-500 italic">No planets found.</p>
+        ) : (
+          <div className="grid grid-cols-1 gap-3">
+            {planets.map((planet) => (
+              <div
+                key={planet.id}
+                className="flex items-center justify-between rounded-lg border p-4 bg-background shadow-sm hover:shadow-md transition-shadow dark:bg-zinc-900"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-bold text-lg">{planet.name}</span>
+                    <span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground">
+                      ID: {planet.id}
+                    </span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {planet.description || "No description provided."}
+                  </p>
+                  <div className="mt-2 flex gap-4 text-xs text-muted-foreground font-mono">
+                    <span>Distance: {planet.distanceFromSun} M km</span>
+                    <span>Diameter: {planet.diameter} km</span>
+                  </div>
+                </div>
+                <div className="flex gap-2 ml-4">
+                  <Button variant="outline" size="icon" onClick={() => startEdit(planet)}>
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    onClick={() => handleDelete(planet.id)}
+                    disabled={deleteMutation.isPending}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/apps/desktop/src/renderer/src/routes/_public/index.tsx

@@ -0,0 +1,54 @@
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { Button } from "@workspace/ui/components/button";
+import { useHello, usePlanets } from "@workspace/orpc/react";
+
+export const Route = createFileRoute("/_public/")({
+  component: App,
+});
+
+function App() {
+  const { data: helloData, isLoading: helloLoading } = useHello("Croissant Desktop");
+  const { data: planets, isLoading: planetsLoading } = usePlanets();
+
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-lg min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium text-2xl mb-4">Desktop Project ready!</h1>
+          <p>
+            oRPC integration: <span className="font-bold">{helloLoading ? "Loading..." : helloData?.message}</span>
+          </p>
+
+          <div className="mt-8">
+            <h2 className="text-xl font-semibold mb-2">Planets from Database:</h2>
+            {planetsLoading ? (
+               <p className="text-gray-500 italic">Loading planets...</p>
+            ) : !planets || planets.length === 0 ? (
+              <p className="text-gray-500 italic">
+                No planets found in the database.
+              </p>
+            ) : (
+              <ul className="grid grid-cols-1 gap-2">
+                {planets.map((planet) => (
+                  <li key={planet.id} className="rounded-md border p-3 shadow-sm">
+                    <span className="font-bold">{planet.name}</span> - {planet.description}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="mt-8 flex gap-2">
+            <Link to="/login">
+              <Button>Go to Login</Button>
+            </Link>
+            <Link to="/dashboard">
+              <Button variant="outline">Go to Dashboard</Button>
+            </Link>
+          </div>
+          <p className="mt-4 text-gray-500">You may now add components and start building.</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/apps/desktop/src/renderer/src/routes/_public/login.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { LoginForm } from "@/components/login-form";
+
+export const Route = createFileRoute("/_public/login")({
+  component: Login,
+});
+
+function Login() {
+  return (
+    <div className="flex min-h-svh items-center justify-center p-6">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  );
+}

package/template/apps/desktop/src/renderer/src/routes/_public/signup.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SignupForm } from "@/components/signup-form";
+
+export const Route = createFileRoute("/_public/signup")({
+  component: Signup,
+});
+
+function Signup() {
+  return (
+    <div className="flex min-h-svh items-center justify-center p-6">
+      <div className="w-full max-w-sm">
+        <SignupForm />
+      </div>
+    </div>
+  );
+}

package/template/apps/desktop/src/renderer/src/routes/_public.tsx

@@ -0,0 +1,23 @@
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar";
+import { PublicSidebar } from "@/components/app-sidebar";
+
+export const Route = createFileRoute("/_public")({
+  component: PublicLayout,
+});
+
+function PublicLayout() {
+  return (
+    <SidebarProvider>
+      <PublicSidebar />
+      <main className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger />
+        </header>
+        <div className="flex-1 overflow-auto p-4">
+          <Outlet />
+        </div>
+      </main>
+    </SidebarProvider>
+  );
+}

package/template/apps/desktop/tsconfig.web.json

@@ -10,6 +10,7 @@
   "compilerOptions": {
     "composite": true,
     "paths": {
+      "@/*": ["./src/renderer/src/*"],
       "@renderer/*": ["./src/renderer/src/*"],
       "@main/*": ["./src/main/src/*"],
       "@preload/*": ["./src/preload/src/*"]

package/template/apps/mobile/package.json

@@ -27,8 +27,8 @@
     "expo-symbols": "~1.0.8",
     "expo-system-ui": "~6.0.9",
     "expo-web-browser": "~15.0.10",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-worklets": "0.5.1",
@@ -39,7 +39,8 @@
   },
   "devDependencies": {
     "@workspace/config-typescript": "workspace:*",
-    "@types/react": "~19.1.0"
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3"
   },
   "private": true
 }

package/template/apps/platform/package.json

@@ -13,28 +13,25 @@
   },
   "dependencies": {
     "@noble/ciphers": "^2.2.0",
-    "@orpc/client": "^1.14.0",
-    "@orpc/server": "^1.14.0",
-    "@orpc/tanstack-query": "^1.14.0",
     "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-form": "^1.29.1",
-    "@tanstack/react-query": "^5.100.5",
     "@tanstack/react-router": "^1.168.24",
     "@tanstack/react-start": "^1.167.49",
     "@tanstack/router-plugin": "^1.167.27",
     "@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",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "tailwindcss": "^4.2.4",
-    "vite-tsconfig-paths": "^6.1.1",
-    "zod": "4.3.6"
+    "vite-tsconfig-paths": "^6.1.1"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "@workspace/config-typescript": "workspace:*",
     "dotenv": "^17.4.2",

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

@@ -126,13 +126,17 @@ export function LoginForm({ className, ...props }: React.ComponentProps<"div">)
               />
               <Field>
                 <form.Subscribe
-                  selector={(state) => [state.canSubmit, state.isSubmitting]}
-                  children={([canSubmit, isSubmitting]) => (
-                    <Button type="submit" disabled={!canSubmit || isSubmitting || loading}>
-                      {isSubmitting || loading ? "Logging in..." : "Login"}
+                  selector={(state) => ({
+                    canSubmit: state.canSubmit,
+                    isSubmitting: state.isSubmitting,
+                  })}
+                >
+                  {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
+                    <Button type="submit" disabled={!state.canSubmit || state.isSubmitting || loading}>
+                      {state.isSubmitting || loading ? "Logging in..." : "Login"}
                     </Button>
                   )}
-                />
+                </form.Subscribe>
                 <Button variant="outline" type="button" disabled={loading}>
                   Login with Google
                 </Button>

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

@@ -172,14 +172,18 @@ export function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {
             />
             <FieldGroup>
               <Field>
-                <form.Subscribe
-                  selector={(state) => [state.canSubmit, state.isSubmitting]}
-                  children={([canSubmit, isSubmitting]) => (
-                    <Button type="submit" disabled={!canSubmit || isSubmitting || loading}>
-                      {isSubmitting || loading ? "Creating..." : "Create Account"}
-                    </Button>
-                  )}
-                />
+              <form.Subscribe
+                selector={(state) => ({
+                  canSubmit: state.canSubmit,
+                  isSubmitting: state.isSubmitting,
+                })}
+              >
+                {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
+                  <Button type="submit" disabled={!state.canSubmit || state.isSubmitting || loading}>
+                    {state.isSubmitting || loading ? "Creating..." : "Create Account"}
+                  </Button>
+                )}
+              </form.Subscribe>
                 <Button variant="outline" type="button" disabled={loading}>
                   Sign up with Google
                 </Button>

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

@@ -2,7 +2,6 @@ import * as React from "react";
 import { createFileRoute } from "@tanstack/react-router";
 import { Check, Pencil, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
-import { useQueryClient } from "@tanstack/react-query";
 import { useForm } from "@tanstack/react-form";
 import { z } from "zod";
 
@@ -11,10 +10,9 @@ import { Input } from "@workspace/ui/components/input";
 import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field";
 
 import type { router } from "@workspace/orpc/router";
-import type { InferRouterInputs, InferRouterOutputs } from "@orpc/server";
+import type { InferRouterOutputs } from "@orpc/server";
 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];
 
@@ -45,7 +43,6 @@ export const Route = createFileRoute("/_public/examples/client-orpc")({
 });
 
 function ClientORPC() {
-  const queryClient = useQueryClient();
   const [editingId, setEditingId] = React.useState<number | null>(null);
 
   const { data: planets = [], isLoading } = usePlanets();
@@ -230,24 +227,28 @@ function ClientORPC() {
           </div>
           <div className="mt-6 flex gap-2">
             <form.Subscribe
-              selector={(state) => [state.canSubmit, state.isSubmitting]}
-              children={([canSubmit, isSubmitting]) => (
+              selector={(state) => ({
+                canSubmit: state.canSubmit,
+                isSubmitting: state.isSubmitting,
+              })}
+            >
+              {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
                 <>
                   {editingId ? (
                     <>
                       <Button
                         type="submit"
                         className="flex items-center gap-2"
-                        disabled={!canSubmit || isSubmitting || updateMutation.isPending}
+                        disabled={!state.canSubmit || state.isSubmitting || updateMutation.isPending}
                       >
                         <Check className="h-4 w-4" />{" "}
-                        {isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                        {state.isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
                       </Button>
                       <Button
                         variant="outline"
                         type="button"
                         onClick={resetForm}
-                        disabled={isSubmitting || updateMutation.isPending}
+                        disabled={state.isSubmitting || updateMutation.isPending}
                       >
                         Cancel
                       </Button>
@@ -256,15 +257,15 @@ function ClientORPC() {
                     <Button
                       type="submit"
                       className="flex items-center gap-2"
-                      disabled={!canSubmit || isSubmitting || createMutation.isPending}
+                      disabled={!state.canSubmit || state.isSubmitting || createMutation.isPending}
                     >
                       <Plus className="h-4 w-4" />{" "}
-                      {isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
+                      {state.isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
                     </Button>
                   )}
                 </>
               )}
-            />
+            </form.Subscribe>
           </div>
         </form>
       </div>

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

@@ -223,23 +223,27 @@ function SSRORPC() {
           </div>
           <div className="mt-6 flex gap-2">
             <form.Subscribe
-              selector={(state) => [state.canSubmit, state.isSubmitting]}
-              children={([canSubmit, isSubmitting]) => (
+              selector={(state) => ({
+                canSubmit: state.canSubmit,
+                isSubmitting: state.isSubmitting,
+              })}
+            >
+              {(state: { canSubmit: boolean; isSubmitting: boolean }) => (
                 <>
                   {editingId ? (
                     <>
                       <Button
                         type="submit"
                         className="flex items-center gap-2"
-                        disabled={!canSubmit || isSubmitting}
+                        disabled={!state.canSubmit || state.isSubmitting}
                       >
-                        <Check className="h-4 w-4" /> {isSubmitting ? "Saving..." : "Save Changes"}
+                        <Check className="h-4 w-4" /> {state.isSubmitting ? "Saving..." : "Save Changes"}
                       </Button>
                       <Button
                         variant="outline"
                         type="button"
                         onClick={resetForm}
-                        disabled={isSubmitting}
+                        disabled={state.isSubmitting}
                       >
                         Cancel
                       </Button>
@@ -248,14 +252,14 @@ function SSRORPC() {
                     <Button
                       type="submit"
                       className="flex items-center gap-2"
-                      disabled={!canSubmit || isSubmitting}
+                      disabled={!state.canSubmit || state.isSubmitting}
                     >
-                      <Plus className="h-4 w-4" /> {isSubmitting ? "Adding..." : "Add Planet"}
+                      <Plus className="h-4 w-4" /> {state.isSubmitting ? "Adding..." : "Add Planet"}
                     </Button>
                   )}
                 </>
               )}
-            />
+            </form.Subscribe>
           </div>
         </form>
       </div>