npm - create-croissant - Versions diffs - 0.1.24 → 0.1.26 - Mend

create-croissant 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/web/src/components/app-sidebar.tsx CHANGED Viewed

@@ -16,6 +16,8 @@ import {
   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.
@@ -113,8 +115,9 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
   return (
     <Sidebar {...props}>
       <SidebarHeader>
-        <div className="flex items-center gap-2 px-4 py-2">
+        <div className="flex items-center justify-between px-4 py-2">
           <span className="font-bold">Croissant Stack</span>
+          <ModeToggle />
         </div>
       </SidebarHeader>
       <SidebarContent>
@@ -163,25 +166,25 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
                       <span className="truncate text-xs">{user.email}</span>
                     </div>
                     <div className="flex items-center gap-1 ml-auto">
-                      <Link
-                        to="/account"
-                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                      <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" />
-                      </Link>
-                      <button
+                      </SidebarMenuButton>
+                      <SidebarMenuButton
                         onClick={async (e) => {
                           e.preventDefault()
                           e.stopPropagation()
                           await authClient.signOut()
                           window.location.reload()
                         }}
-                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                        className="p-1 h-auto w-auto rounded hover:bg-sidebar-accent-foreground/10"
                         title="Sign Out"
                       >
                         <LogOut className="h-4 w-4" />
-                      </button>
+                      </SidebarMenuButton>
                     </div>
                   </div>
                 </SidebarMenuButton>

package/template/apps/web/src/routes/__root.tsx CHANGED Viewed

@@ -1,9 +1,11 @@
 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 appCss from "@workspace/ui/globals.css?url"
 const queryClient = new QueryClient()
 export const Route = createRootRoute({
@@ -37,10 +39,13 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         <HeadContent />
       </head>
       <body>
+                <ThemeProvider defaultTheme="system" storageKey="theme">
         <QueryClientProvider client={queryClient}>
           {children}
           <Toaster />
         </QueryClientProvider>
+        </ThemeProvider>
         <Scripts />
       </body>
     </html>

package/template/apps/web/src/routes/_auth/examples/ssr-orpc-auth.tsx CHANGED Viewed

@@ -1,7 +1,17 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { getSessionFn } from "@/lib/auth-utils"
 import { orpc } from "@/lib/orpc"
+const getSecretData = createServerFn({ method: "GET" }).handler(async () => {
+  try {
+    const secretData = await orpc.getSecretData()
+    return { secretData }
+  } catch (err) {
+    return { secretData: null, error: "Failed to fetch secret data" }
+  }
+})
 export const Route = createFileRoute("/_auth/examples/ssr-orpc-auth")({
   beforeLoad: async () => {
     const session = await getSessionFn()
@@ -15,14 +25,7 @@ export const Route = createFileRoute("/_auth/examples/ssr-orpc-auth")({
     }
     return { session }
   },
-  loader: async () => {
-    try {
-      const secretData = await orpc.getSecretData()
-      return { secretData }
-    } catch (err) {
-      return { secretData: null, error: "Failed to fetch secret data" }
-    }
-  },
+  loader: () => getSecretData(),
   component: SSRORPCAuth,
 })

package/template/apps/web/src/routes/_public/examples/isr.tsx CHANGED Viewed

@@ -1,6 +1,20 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { orpc } from "@/lib/orpc"
+const getISRData = createServerFn({ method: "GET" }).handler(async () => {
+  // In a real ISR scenario, this would be cached on the server
+  // For this example, we'll fetch planets via oRPC
+  const planets = await orpc.planets.getPlanets()
+  return {
+    generatedAt: new Date().toISOString(),
+    planets,
+    message:
+      "This page is an example of ISR. In a production build with proper configuration, this data would be cached and updated in the background.",
+  }
+})
 export const Route = createFileRoute("/_public/examples/isr")({
   head: () => ({
     meta: [
@@ -9,21 +23,12 @@ export const Route = createFileRoute("/_public/examples/isr")({
       },
       {
         name: "description",
-        content: "Experience high-performance page loads with ISR in Croissant Stack.",
+        content:
+          "Experience high-performance page loads with ISR in Croissant Stack.",
       },
     ],
   }),
-  loader: async () => {
-    // In a real ISR scenario, this would be cached on the server
-    // For this example, we'll fetch planets via oRPC
-    const planets = await orpc.planets.getPlanets()
-    return {
-      generatedAt: new Date().toISOString(),
-      planets,
-      message: "This page is an example of ISR. In a production build with proper configuration, this data would be cached and updated in the background.",
-    }
-  },
+  loader: () => getISRData(),
   headers: () => ({
     // Cache at CDN for 10 seconds, allow stale content for up to 1 minute
     "Cache-Control": "public, max-age=10, s-maxage=10, stale-while-revalidate=60",

package/template/apps/web/src/routes/_public/examples/ssr-orpc.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { createFileRoute, useRouter } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { Check, Pencil, Plus, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { useForm } from "@tanstack/react-form"
@@ -27,6 +28,11 @@ const planetSchema = z.object({
   diameter: z.string().refine((val) => !isNaN(parseFloat(val)), "Must be a number"),
 })
+const getPlanets = createServerFn({ method: "GET" }).handler(async () => {
+  const planets = await orpc.planets.getPlanets()
+  return { planets }
+})
 export const Route = createFileRoute("/_public/examples/ssr-orpc")({
   head: () => ({
     meta: [
@@ -35,14 +41,12 @@ export const Route = createFileRoute("/_public/examples/ssr-orpc")({
       },
       {
         name: "description",
-        content: "Learn how to use Server-Side Rendering (SSR) with oRPC in Croissant Stack.",
+        content:
+          "Learn how to use Server-Side Rendering (SSR) with oRPC in Croissant Stack.",
       },
     ],
   }),
-  loader: async () => {
-    const planets = await orpc.planets.getPlanets()
-    return { planets }
-  },
+  loader: () => getPlanets(),
   component: SSRORPC,
 })

package/template/apps/web/src/routes/_public/index.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Link, createFileRoute } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { Button } from "@workspace/ui/components/button"
 import type { router } from "@workspace/orpc/router"
 import type { InferRouterOutputs } from "@orpc/server"
@@ -7,6 +8,17 @@ import { orpc } from "@/lib/orpc"
 type Outputs = InferRouterOutputs<typeof router>
 type Planet = Outputs["planets"]["getPlanets"][number]
+const getHomeData = createServerFn({ method: "GET" }).handler(async () => {
+  const [helloRes, planets] = await Promise.all([
+    orpc.hello({ name: "Croissant Stack" }),
+    orpc.planets.getPlanets(),
+  ])
+  return {
+    message: helloRes.message,
+    planets,
+  }
+})
 export const Route = createFileRoute("/_public/")({
   head: () => ({
     meta: [
@@ -15,7 +27,8 @@ export const Route = createFileRoute("/_public/")({
       },
       {
         name: "description",
-        content: "Build full-stack applications faster with Croissant Stack. Featuring TanStack Start, oRPC, and Better Auth.",
+        content:
+          "Build full-stack applications faster with Croissant Stack. Featuring TanStack Start, oRPC, and Better Auth.",
       },
       {
         property: "og:title",
@@ -31,18 +44,10 @@ export const Route = createFileRoute("/_public/")({
       },
     ],
   }),
-  loader: async () => {
-    const [helloRes, planets] = await Promise.all([
-      orpc.hello({ name: "Croissant Stack" }),
-      orpc.planets.getPlanets(),
-    ])
-    return {
-      message: helloRes.message,
-      planets,
-    }
-  },
+  loader: () => getHomeData(),
   headers: () => ({
-    "Cache-Control": "public, max-age=10, s-maxage=10, stale-while-revalidate=60",
+    "Cache-Control":
+      "public, max-age=10, s-maxage=10, stale-while-revalidate=60",
   }),
   component: App,
 })
@@ -64,7 +69,7 @@ function App() {
             ) : (
               <ul className="grid grid-cols-1 gap-2">
                 {planets.map((planet: Planet) => (
-                  <li key={planet.id} className="rounded-md border p-3 bg-white shadow-sm">
+                  <li key={planet.id} className="rounded-md border p-3 shadow-sm">
                     <span className="font-bold">{planet.name}</span> - {planet.description}
                   </li>
                 ))}

package/template/packages/ui/src/components/mode-toggle.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@workspace/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu"
+import { useTheme } from "@workspace/ui/components/theme-provider"
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="outline" size="icon">
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/template/packages/ui/src/components/sidebar.tsx CHANGED Viewed

@@ -506,18 +506,28 @@ function SidebarMenuButton({
   size = "default",
   tooltip,
   className,
+  onClick,
   ...props
 }: useRender.ComponentProps<"button"> &
   React.ComponentProps<"button"> & {
     isActive?: boolean
     tooltip?: string | React.ComponentProps<typeof TooltipContent>
   } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const { isMobile, state } = useSidebar()
+  const { isMobile, state, setOpenMobile } = useSidebar()
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (isMobile) {
+      setOpenMobile(false)
+    }
+    onClick?.(event)
+  }
   const comp = useRender({
     defaultTagName: "button",
     props: mergeProps<"button">(
       {
         className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        onClick: handleClick,
       },
       props
     ),

package/template/packages/ui/src/components/theme-provider.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+import { createContext, useContext, useEffect, useState } from "react"
+import { ScriptOnce } from "@tanstack/react-router"
+type Theme = "dark" | "light" | "system"
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+function getThemeScript(storageKey: string, defaultTheme: Theme) {
+  const key = JSON.stringify(storageKey)
+  const fallback = JSON.stringify(defaultTheme)
+  return `(function(){try{var t=localStorage.getItem(${key});if(t!=='light'&&t!=='dark'&&t!=='system'){t=${fallback}}var d=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(d?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`
+}
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(
+  undefined
+)
+function applyTheme(theme: Theme) {
+  const root = document.documentElement
+  root.classList.remove("light", "dark")
+  const resolved =
+    theme === "system"
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      : theme
+  root.classList.add(resolved)
+  root.style.colorScheme = resolved
+}
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(defaultTheme)
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    const stored = localStorage.getItem(storageKey)
+    setThemeState(
+      stored === "light" || stored === "dark" || stored === "system"
+        ? stored
+        : defaultTheme
+    )
+    setMounted(true)
+  }, [defaultTheme, storageKey])
+  useEffect(() => {
+    if (!mounted) return
+    applyTheme(theme)
+  }, [theme, mounted])
+  useEffect(() => {
+    if (!mounted || theme !== "system") return
+    const media = window.matchMedia("(prefers-color-scheme: dark)")
+    const onChange = () => applyTheme("system")
+    media.addEventListener("change", onChange)
+    return () => media.removeEventListener("change", onChange)
+  }, [theme, mounted])
+  const setTheme = (next: Theme) => {
+    localStorage.setItem(storageKey, next)
+    setThemeState(next)
+  }
+  return (
+    <ThemeProviderContext value={{ theme, setTheme }}>
+      <ScriptOnce>{getThemeScript(storageKey, defaultTheme)}</ScriptOnce>
+      {children}
+    </ThemeProviderContext>
+  )
+}
+export function useTheme() {
+  const context = useContext(ThemeProviderContext)
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+  return context
+}