create-croissant 0.1.55 → 0.1.57

package/template/apps/desktop/src/components/search-form.tsx

@@ -0,0 +1,19 @@
+import { Label } from "@workspace/ui/components/label";
+import { SidebarGroup, SidebarGroupContent, SidebarInput } from "@workspace/ui/components/sidebar";
+import { SearchIcon } from "lucide-react";
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput id="search" placeholder="Search the docs..." className="pl-8" />
+          <SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  );
+}

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

@@ -0,0 +1,206 @@
+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 } 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 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,
+        callbackURL: "/dashboard",
+      });
+      if (signUpError) {
+        setError(signUpError.message || "Failed to sign up");
+      }
+      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) => ({
+                    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>
+                <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/components/version-switcher.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@workspace/ui/components/sidebar";
+import { CheckIcon, ChevronsUpDownIcon, GalleryVerticalEndIcon } from "lucide-react";
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: Array<string>;
+  defaultVersion: string;
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion);
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
+              />
+            }
+          >
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEndIcon className="size-4" />
+            </div>
+            <div className="flex flex-col gap-0.5 leading-none">
+              <span className="font-medium">Documentation</span>
+              <span className="">v{selectedVersion}</span>
+            </div>
+            <ChevronsUpDownIcon className="ml-auto" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {versions.map((version) => (
+              <DropdownMenuItem key={version} onSelect={() => setSelectedVersion(version)}>
+                v{version} {version === selectedVersion && <CheckIcon className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/template/apps/desktop/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: import.meta.env.VITE_API_URL || "https://platform.localhost",
+});

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

@@ -0,0 +1,10 @@
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import type { AppRouter } from "@workspace/orpc/router";
+import type { RouterClient } from "@orpc/server";
+
+const link = new RPCLink({
+  url: `${import.meta.env.VITE_API_URL || "https://platform.localhost"}/api/rpc`,
+});
+
+export const orpc = createORPCClient(link) as RouterClient<AppRouter>;

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

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "@tanstack/react-router";
+import { getRouter } from "./router";
+
+const router = getRouter();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

package/template/apps/desktop/src/{renderer/src/routeTree.gen.ts → routeTree.gen.ts}

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as PublicRouteImport } from './routes/_public'
 import { Route as AuthRouteImport } from './routes/_auth'
 import { Route as PublicIndexRouteImport } from './routes/_public/index'
+import { Route as PublicSignupRouteImport } from './routes/_public/signup'
 import { Route as PublicLoginRouteImport } from './routes/_public/login'
 import { Route as AuthDashboardRouteImport } from './routes/_auth/dashboard'
 import { Route as AuthAccountRouteImport } from './routes/_auth/account'
@@ -31,6 +32,11 @@ const PublicIndexRoute = PublicIndexRouteImport.update({
   path: '/',
   getParentRoute: () => PublicRoute,
 } as any)
+const PublicSignupRoute = PublicSignupRouteImport.update({
+  id: '/signup',
+  path: '/signup',
+  getParentRoute: () => PublicRoute,
+} as any)
 const PublicLoginRoute = PublicLoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -64,6 +70,7 @@ export interface FileRoutesByFullPath {
   '/account': typeof AuthAccountRoute
   '/dashboard': typeof AuthDashboardRoute
   '/login': typeof PublicLoginRoute
+  '/signup': typeof PublicSignupRoute
   '/examples/client-orpc-auth': typeof AuthExamplesClientOrpcAuthRoute
   '/examples/client-orpc': typeof PublicExamplesClientOrpcRoute
 }
@@ -72,6 +79,7 @@ export interface FileRoutesByTo {
   '/account': typeof AuthAccountRoute
   '/dashboard': typeof AuthDashboardRoute
   '/login': typeof PublicLoginRoute
+  '/signup': typeof PublicSignupRoute
   '/examples/client-orpc-auth': typeof AuthExamplesClientOrpcAuthRoute
   '/examples/client-orpc': typeof PublicExamplesClientOrpcRoute
 }
@@ -82,6 +90,7 @@ export interface FileRoutesById {
   '/_auth/account': typeof AuthAccountRoute
   '/_auth/dashboard': typeof AuthDashboardRoute
   '/_public/login': typeof PublicLoginRoute
+  '/_public/signup': typeof PublicSignupRoute
   '/_public/': typeof PublicIndexRoute
   '/_auth/examples/client-orpc-auth': typeof AuthExamplesClientOrpcAuthRoute
   '/_public/examples/client-orpc': typeof PublicExamplesClientOrpcRoute
@@ -93,6 +102,7 @@ export interface FileRouteTypes {
     | '/account'
     | '/dashboard'
     | '/login'
+    | '/signup'
     | '/examples/client-orpc-auth'
     | '/examples/client-orpc'
   fileRoutesByTo: FileRoutesByTo
@@ -101,6 +111,7 @@ export interface FileRouteTypes {
     | '/account'
     | '/dashboard'
     | '/login'
+    | '/signup'
     | '/examples/client-orpc-auth'
     | '/examples/client-orpc'
   id:
@@ -110,6 +121,7 @@ export interface FileRouteTypes {
     | '/_auth/account'
     | '/_auth/dashboard'
     | '/_public/login'
+    | '/_public/signup'
     | '/_public/'
     | '/_auth/examples/client-orpc-auth'
     | '/_public/examples/client-orpc'
@@ -143,6 +155,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PublicIndexRouteImport
       parentRoute: typeof PublicRoute
     }
+    '/_public/signup': {
+      id: '/_public/signup'
+      path: '/signup'
+      fullPath: '/signup'
+      preLoaderRoute: typeof PublicSignupRouteImport
+      parentRoute: typeof PublicRoute
+    }
     '/_public/login': {
       id: '/_public/login'
       path: '/login'
@@ -197,12 +216,14 @@ const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
 
 interface PublicRouteChildren {
   PublicLoginRoute: typeof PublicLoginRoute
+  PublicSignupRoute: typeof PublicSignupRoute
   PublicIndexRoute: typeof PublicIndexRoute
   PublicExamplesClientOrpcRoute: typeof PublicExamplesClientOrpcRoute
 }
 
 const PublicRouteChildren: PublicRouteChildren = {
   PublicLoginRoute: PublicLoginRoute,
+  PublicSignupRoute: PublicSignupRoute,
   PublicIndexRoute: PublicIndexRoute,
   PublicExamplesClientOrpcRoute: PublicExamplesClientOrpcRoute,
 }

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

@@ -0,0 +1,19 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreload: "intent",
+    defaultPreloadStaleTime: 0,
+  });
+
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/template/apps/desktop/src/{renderer/src/routes → routes}/__root.tsx

@@ -3,10 +3,15 @@ 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 "@renderer/lib/orpc";
-import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@workspace/ui/components/empty";
-import { Button, buttonVariants } from "@workspace/ui/components/button";
+import { orpc } from "@/lib/orpc";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@workspace/ui/components/empty";
+import { buttonVariants } from "@workspace/ui/components/button";
 
 import "@workspace/ui/globals.css";
 
@@ -40,7 +45,6 @@ function RootLayout() {
         <ORPCProvider client={orpc}>
           <Outlet />
           <Toaster />
-          <TanStackRouterDevtools />
         </ORPCProvider>
       </QueryClientProvider>
     </ThemeProvider>

package/template/apps/desktop/src/{renderer/src/routes → routes}/_auth/account.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { useForm } from "@tanstack/react-form";
 import { z } from "zod";
 import { toast } from "sonner";
@@ -19,7 +19,7 @@ import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field";
 import { Avatar, AvatarFallback, AvatarImage } from "@workspace/ui/components/avatar";
 import { Separator } from "@workspace/ui/components/separator";
 
-import { authClient } from "@renderer/lib/auth-client";
+import { authClient } from "@/lib/auth-client";
 
 const profileSchema = z.object({
   name: z.string().min(1, "Name is required"),
@@ -37,18 +37,29 @@ const passwordSchema = z
   });
 
 export const Route = createFileRoute("/_auth/account")({
+  beforeLoad: async () => {
+    const { data: session } = await authClient.getSession();
+    if (!session) {
+      throw redirect({
+        to: "/login",
+        search: {
+          redirect: "/account",
+        },
+      });
+    }
+    return { session };
+  },
   component: AccountPage,
 });
 
 function AccountPage() {
-  const { data: sessionData, isPending } = authClient.useSession();
+  const { session } = Route.useRouteContext();
   const [loading, setLoading] = React.useState(false);
-  
-  const user = sessionData?.user;
+  const user = session.user;
 
   const profileForm = useForm({
     defaultValues: {
-      name: user?.name || "",
+      name: user.name || "",
     },
     validators: {
       onChange: profileSchema,
@@ -94,9 +105,6 @@ function AccountPage() {
     },
   });
 
-  if (isPending) return <div>Loading...</div>;
-  if (!user) return null;
-
   return (
     <div className="container max-w-4xl py-10">
       <div className="flex flex-col gap-8">
@@ -251,7 +259,7 @@ function AccountPage() {
                     if (error) {
                       toast.error(error.message || "Failed to delete account");
                     } else {
-                      window.location.reload();
+                      window.location.href = "/";
                     }
                   }
                 }}

package/template/apps/desktop/src/routes/_auth/dashboard.tsx

@@ -0,0 +1,58 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { orpc } from "@/lib/orpc";
+
+export const Route = createFileRoute("/_auth/dashboard")({
+  beforeLoad: async () => {
+    const { data: session } = await authClient.getSession();
+    if (!session) {
+      throw redirect({
+        to: "/",
+      });
+    }
+    return { session };
+  },
+  loader: async () => {
+    try {
+      const data = await orpc.getSecretData();
+      return { secretData: data.secret };
+    } catch (err: any) {
+      return { secretData: "Error: " + (err.message || "Unknown error") };
+    }
+  },
+  component: Dashboard,
+});
+
+function Dashboard() {
+  const { session } = Route.useRouteContext();
+  const { secretData } = Route.useLoaderData();
+
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <p>Welcome, {session.user.name}!</p>
+          <p>This is a protected page. Only authenticated users can see this.</p>
+
+          <div className="mt-6 rounded-lg border bg-gray-50 p-4">
+            <h2 className="font-semibold mb-2">Secure oRPC Data:</h2>
+            <p className="font-mono text-xs">{secretData}</p>
+          </div>
+
+          <div className="mt-4 flex gap-2">
+            <button
+              onClick={async () => {
+                await authClient.signOut();
+                window.location.href = "/";
+              }}
+              className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/apps/desktop/src/{renderer/src/routes → routes}/_auth/examples/client-orpc-auth.tsx

@@ -1,14 +1,25 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
 import { useSecretData } from "@workspace/orpc/react";
-import { authClient } from "@renderer/lib/auth-client";
 
 export const Route = createFileRoute("/_auth/examples/client-orpc-auth")({
+  beforeLoad: async () => {
+    const { data: session } = await authClient.getSession();
+    if (!session) {
+      throw redirect({
+        to: "/login",
+        search: {
+          redirect: "/examples/client-orpc-auth",
+        },
+      });
+    }
+    return { session };
+  },
   component: ClientORPCAuth,
 });
 
 function ClientORPCAuth() {
-  const { data: sessionData } = authClient.useSession();
-  const session = sessionData;
+  const { session } = Route.useRouteContext();
 
   const { data, isLoading } = useSecretData();
 
@@ -19,7 +30,7 @@ function ClientORPCAuth() {
 
       <div className="rounded-lg border p-4">
         <h2 className="font-semibold">User Session:</h2>
-        <pre className="text-xs bg-muted p-2 rounded dark:bg-zinc-900 overflow-auto">{JSON.stringify(session, null, 2)}</pre>
+        <pre className="text-xs bg-muted p-2 rounded">{JSON.stringify(session, null, 2)}</pre>
       </div>
 
       <div className="rounded-lg border p-4">
@@ -27,7 +38,7 @@ function ClientORPCAuth() {
         {isLoading ? (
           <p>Loading...</p>
         ) : (
-          <pre className="text-xs bg-muted p-2 rounded dark:bg-zinc-900 overflow-auto">{JSON.stringify(data, null, 2)}</pre>
+          <pre className="text-xs bg-muted p-2 rounded">{JSON.stringify(data, null, 2)}</pre>
         )}
       </div>
     </div>

package/template/apps/desktop/src/{renderer/src/routes → routes}/_auth.tsx

@@ -1,20 +1,8 @@
-import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar";
-import { AuthSidebar } from "@renderer/components/app-sidebar";
-import { authClient } from "@renderer/lib/auth-client";
+import { AuthSidebar } from "@/components/app-sidebar";
 
 export const Route = createFileRoute("/_auth")({
-  beforeLoad: async ({ location }) => {
-    const session = await authClient.getSession();
-    if (!session.data) {
-      throw redirect({
-        to: "/login",
-        search: {
-          redirect: location.href,
-        },
-      });
-    }
-  },
   component: AuthLayout,
 });