create-croissant 0.1.49 → 0.1.50

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

@@ -0,0 +1,306 @@
+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) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <>
+                  {editingId ? (
+                    <>
+                      <Button
+                        type="submit"
+                        className="flex items-center gap-2"
+                        disabled={!canSubmit || isSubmitting || updateMutation.isPending}
+                      >
+                        <Check className="h-4 w-4" />{" "}
+                        {isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        type="button"
+                        onClick={resetForm}
+                        disabled={isSubmitting || updateMutation.isPending}
+                      >
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <Button
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={!canSubmit || isSubmitting || createMutation.isPending}
+                    >
+                      <Plus className="h-4 w-4" />{" "}
+                      {isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
+                    </Button>
+                  )}
+                </>
+              )}
+            />
+          </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/package.json

@@ -21,6 +21,9 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@orpc/client": "^1.14.2",
+    "@orpc/server": "^1.14.2",
+    "@tanstack/react-start": "^1.167.65",
     "react": "19.2.5",
     "react-dom": "19.2.5"
   },

package/template/packages/ui/package.json

@@ -7,6 +7,7 @@
     "./globals.css": "./src/styles/globals.css",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/*.tsx",
+    "./commons/*": "./src/commons/*.tsx",
     "./hooks/*": "./src/hooks/*.ts"
   },
   "scripts": {
@@ -15,6 +16,8 @@
   "dependencies": {
     "@base-ui/react": "^1.4.1",
     "@fontsource-variable/geist": "^5.2.8",
+    "@tanstack/react-router": "^1.168.24",
+    "better-auth": "^1.6.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -32,8 +35,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
-    "vaul": "^1.1.2",
-    "@tanstack/react-router": "^1.168.24"
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.4",

package/template/apps/desktop/src/renderer/src/App.tsx

@@ -1,35 +0,0 @@
-import Versions from "./components/Versions";
-import electronLogo from "./assets/electron.svg";
-
-function App(): React.JSX.Element {
-  const ipcHandle = (): void => window.electron.ipcRenderer.send("ping");
-
-  return (
-    <>
-      <img alt="logo" className="logo" src={electronLogo} />
-      <div className="creator">Powered by electron-vite</div>
-      <div className="text">
-        Build an Electron app with <span className="react">React</span>
-        &nbsp;and <span className="ts">TypeScript</span>
-      </div>
-      <p className="tip">
-        Please try pressing <code>F12</code> to open the devTool
-      </p>
-      <div className="actions">
-        <div className="action">
-          <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">
-            Documentation
-          </a>
-        </div>
-        <div className="action">
-          <a target="_blank" rel="noreferrer" onClick={ipcHandle}>
-            Send IPC
-          </a>
-        </div>
-      </div>
-      <Versions></Versions>
-    </>
-  );
-}
-
-export default App;