create-croissant 0.1.49 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-croissant",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/desktop/electron.vite.config.ts

@@ -1,6 +1,8 @@
 import { resolve } from "node:path";
 import { defineConfig } from "electron-vite";
 import react from "@vitejs/plugin-react";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   main: {},
@@ -8,9 +10,17 @@ export default defineConfig({
   renderer: {
     resolve: {
       alias: {
+        "@": resolve("src/renderer/src"),
         "@renderer": resolve("src/renderer/src"),
       },
     },
-    plugins: [react()],
+    plugins: [
+      tanstackRouter({
+        routesDirectory: resolve("src/renderer/src/routes"),
+        generatedRouteTree: resolve("src/renderer/src/routeTree.gen.ts"),
+      }),
+      tailwindcss(),
+      react(),
+    ],
   },
 });

package/template/apps/desktop/package.json

@@ -21,10 +21,28 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
-    "electron-updater": "^6.3.9"
+    "@orpc/client": "^1.14.3",
+    "@orpc/server": "^1.14.3",
+    "@orpc/tanstack-query": "^1.14.3",
+    "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-form": "^1.32.0",
+    "@tanstack/react-query": "^5.100.10",
+    "@tanstack/react-router": "^1.169.2",
+    "@workspace/auth": "workspace:*",
+    "@workspace/orpc": "workspace:*",
+    "@workspace/ui": "workspace:*",
+    "better-auth": "^1.6.11",
+    "electron-updater": "^6.3.9",
+    "lucide-react": "^1.14.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.4"
   },
   "devDependencies": {
     "@electron-toolkit/tsconfig": "^2.0.0",
+    "@tanstack/react-router-devtools": "^1.166.13",
+    "@tanstack/router-plugin": "^1.167.35",
     "@types/node": "^22.19.1",
     "@vitejs/plugin-react": "^5.1.1",
     "@workspace/config-typescript": "workspace:*",

package/template/apps/desktop/src/renderer/index.html

@@ -6,7 +6,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://platform.localhost"
     />
   </head>
 

package/template/apps/desktop/src/renderer/src/components/app-sidebar.tsx

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { Link } from "@tanstack/react-router";
+import { LogOut, Settings, User } from "lucide-react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@workspace/ui/components/sidebar";
+import { Avatar, AvatarFallback, AvatarImage } from "@workspace/ui/components/avatar";
+import { ModeToggle } from "@workspace/ui/components/mode-toggle";
+
+import { authClient } from "@/lib/auth-client";
+
+// This is sample data.
+export const authNavItems = [
+  {
+    title: "Dashboard",
+    items: [
+      {
+        title: "Overview",
+        url: "/dashboard",
+      },
+      {
+        title: "Account",
+        url: "/account",
+      },
+    ],
+  },
+  {
+    title: "Examples",
+    items: [
+      {
+        title: "Client + oRPC (Auth)",
+        url: "/examples/client-orpc-auth",
+      },
+    ],
+  },
+];
+
+export const publicNavItems = [
+  {
+    title: "Welcome",
+    items: [
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "Login",
+        url: "/login",
+      },
+      {
+        title: "Sign Up",
+        url: "/signup",
+      },
+    ],
+  },
+  {
+    title: "Examples",
+    items: [
+      {
+        title: "Client + oRPC",
+        url: "/examples/client-orpc",
+      },
+    ],
+  },
+];
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  items?: Array<{
+    title: string;
+    items: Array<{
+      title: string;
+      url: string;
+    }>;
+  }>;
+}
+
+export function AuthSidebar(props: React.ComponentProps<typeof Sidebar>) {
+  return <AppSidebar items={authNavItems} {...props} />;
+}
+
+export function PublicSidebar(props: React.ComponentProps<typeof Sidebar>) {
+  return <AppSidebar items={publicNavItems} {...props} />;
+}
+
+export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps) {
+  const { data: session } = authClient.useSession();
+
+  const user = session?.user || null;
+
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <div className="flex items-center justify-between px-4 py-2">
+          <span className="font-bold">Croissant Desktop</span>
+          <ModeToggle />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        {items.map((item) => (
+          <SidebarGroup key={item.title}>
+            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {item.items.map((subItem) => (
+                  <SidebarMenuItem key={subItem.title}>
+                    <SidebarMenuButton
+                      render={
+                        <Link to={subItem.url} activeProps={{ className: "bg-sidebar-accent" }} />
+                      }
+                    >
+                      {subItem.title}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            {user ? (
+              <SidebarMenuButton
+                size="lg"
+                render={<div />}
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <div className="flex items-center gap-2 w-full">
+                  <Avatar className="h-8 w-8 rounded-lg">
+                    <AvatarImage src={user.image || ""} alt={user.name} />
+                    <AvatarFallback className="rounded-lg">
+                      {user.name.charAt(0) || "U"}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-semibold">{user.name}</span>
+                    <span className="truncate text-xs">{user.email}</span>
+                  </div>
+                  <div className="flex items-center gap-1 ml-auto">
+                    <SidebarMenuButton
+                      render={<Link to="/account" />}
+                      className="p-1 h-auto w-auto rounded hover:bg-sidebar-accent-foreground/10"
+                      title="Account Settings"
+                    >
+                      <Settings className="h-4 w-4" />
+                    </SidebarMenuButton>
+                    <SidebarMenuButton
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        await authClient.signOut();
+                        window.location.reload();
+                      }}
+                      className="p-1 h-auto w-auto rounded hover:bg-sidebar-accent-foreground/10"
+                      title="Sign Out"
+                    >
+                      <LogOut className="h-4 w-4" />
+                    </SidebarMenuButton>
+                  </div>
+                </div>
+              </SidebarMenuButton>
+            ) : (
+              <SidebarMenuButton render={<Link to="/login" className="flex items-center gap-2" />}>
+                <User className="h-4 w-4" />
+                <span>Sign In</span>
+              </SidebarMenuButton>
+            )}
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/template/apps/desktop/src/renderer/src/components/login-form.tsx

@@ -0,0 +1,154 @@
+import { cn } from "@workspace/ui/lib/utils";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@workspace/ui/components/field";
+import { Input } from "@workspace/ui/components/input";
+import { useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useForm } from "@tanstack/react-form";
+import { z } from "zod";
+
+import { authClient } from "@/lib/auth-client";
+
+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">) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    validators: {
+      onChange: loginSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setLoading(true);
+      setError(null);
+      const { error: signInError } = await authClient.signIn.email({
+        email: value.email,
+        password: value.password,
+      });
+      if (signInError) {
+        setError(signInError.message || "Failed to sign in");
+      } else {
+        navigate({ to: "/dashboard" });
+      }
+      setLoading(false);
+    },
+  });
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Login to your account</CardTitle>
+          <CardDescription>Enter your email below to login to your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
+            }}
+          >
+            <FieldGroup>
+              {error && <div className="rounded bg-red-100 p-2 text-sm text-red-600">{error}</div>}
+              <form.Field
+                name="email"
+                children={(field) => {
+                  const isInvalid =
+                    field.state.meta.isTouched && field.state.meta.errors.length > 0;
+                  return (
+                    <Field data-invalid={isInvalid}>
+                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        type="email"
+                        placeholder="m@example.com"
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        required
+                      />
+                      {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                    </Field>
+                  );
+                }}
+              />
+              <form.Field
+                name="password"
+                children={(field) => {
+                  const isInvalid =
+                    field.state.meta.isTouched && field.state.meta.errors.length > 0;
+                  return (
+                    <Field data-invalid={isInvalid}>
+                      <div className="flex items-center">
+                        <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                        <a
+                          href="#"
+                          className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                        >
+                          Forgot your password?
+                        </a>
+                      </div>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        type="password"
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        required
+                      />
+                      {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                    </Field>
+                  );
+                }}
+              />
+              <Field>
+                <form.Subscribe
+                  selector={(state) => [state.canSubmit, state.isSubmitting]}
+                  children={([canSubmit, isSubmitting]) => (
+                    <Button type="submit" disabled={!canSubmit || isSubmitting || loading}>
+                      {isSubmitting || loading ? "Logging in..." : "Login"}
+                    </Button>
+                  )}
+                />
+                <Button variant="outline" type="button" disabled={loading}>
+                  Login with Google
+                </Button>
+                <FieldDescription className="text-center">
+                  Don&apos;t have an account?{" "}
+                  <Link to="/signup" className="underline">
+                    Sign up
+                  </Link>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/apps/desktop/src/renderer/src/components/signup-form.tsx

@@ -0,0 +1,201 @@
+import { Button } from "@workspace/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@workspace/ui/components/field";
+import { Input } from "@workspace/ui/components/input";
+import { useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useForm } from "@tanstack/react-form";
+import { z } from "zod";
+import { authClient } from "@/lib/auth-client";
+
+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);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+    validators: {
+      onChange: signupSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setLoading(true);
+      setError(null);
+      const { error: signUpError } = await authClient.signUp.email({
+        email: value.email,
+        password: value.password,
+        name: value.name,
+      });
+      if (signUpError) {
+        setError(signUpError.message || "Failed to sign up");
+      } else {
+        navigate({ to: "/dashboard" });
+      }
+      setLoading(false);
+    },
+  });
+
+  return (
+    <Card {...props}>
+      <CardHeader>
+        <CardTitle>Create an account</CardTitle>
+        <CardDescription>Enter your information below to create your account</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            {error && <div className="rounded bg-red-100 p-2 text-sm text-red-600">{error}</div>}
+            <form.Field
+              name="name"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Full Name</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="text"
+                      placeholder="John Doe"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="email"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="email"
+                      placeholder="m@example.com"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    <FieldDescription>
+                      We&apos;ll use this to contact you. We will not share your email with anyone
+                      else.
+                    </FieldDescription>
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="password"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="password"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    <FieldDescription>Must be at least 8 characters long.</FieldDescription>
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="confirmPassword"
+              children={(field) => {
+                const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Confirm Password</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="password"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      required
+                    />
+                    <FieldDescription>Please confirm your password.</FieldDescription>
+                    {isInvalid && <FieldError errors={field.state.meta.errors} />}
+                  </Field>
+                );
+              }}
+            />
+            <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>
+                  )}
+                />
+                <Button variant="outline" type="button" disabled={loading}>
+                  Sign up with Google
+                </Button>
+                <FieldDescription className="px-6 text-center">
+                  Already have an account?{" "}
+                  <Link to="/login" className="underline">
+                    Sign in
+                  </Link>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/template/apps/desktop/src/renderer/src/lib/auth-client.ts

@@ -0,0 +1,3 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient();

package/template/apps/desktop/src/renderer/src/lib/orpc.ts

@@ -0,0 +1,12 @@
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { RouterClient } from "@orpc/server";
+import { router } from "@workspace/orpc/router";
+
+const link = new RPCLink({
+  // In a real desktop app, this might point to a local or remote server
+  // For now, we assume it's the same origin as the platform's API
+  url: `https://platform.localhost/api/rpc`, 
+});
+
+export const orpc: RouterClient<typeof router> = createORPCClient(link)

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

@@ -1,11 +1,22 @@
-import "./assets/main.css";
-
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>,
 );