create-croissant 0.1.55 → 0.1.57

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

@@ -11,7 +11,12 @@ 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";
+import {
+  usePlanets,
+  useCreatePlanet,
+  useUpdatePlanet,
+  useDeletePlanet,
+} from "@workspace/orpc/react";
 
 type Outputs = InferRouterOutputs<typeof router>;
 type Planet = Outputs["planets"]["getPlanets"][number];
@@ -28,6 +33,17 @@ const planetSchema = z.object({
 });
 
 export const Route = createFileRoute("/_public/examples/client-orpc")({
+  head: () => ({
+    meta: [
+      {
+        title: "Client + oRPC Example | Croissant Stack",
+      },
+      {
+        name: "description",
+        content: "Explore client-side data fetching and mutations with oRPC in Croissant Stack.",
+      },
+    ],
+  }),
   component: ClientORPC,
 });
 
@@ -124,7 +140,7 @@ function ClientORPC() {
         </p>
       </div>
 
-      <div className="rounded-lg border p-6 bg-muted/30 dark:bg-zinc-900/30">
+      <div className="rounded-lg border p-6 bg-muted/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"}
@@ -228,10 +244,14 @@ function ClientORPC() {
                       <Button
                         type="submit"
                         className="flex items-center gap-2"
-                        disabled={!state.canSubmit || state.isSubmitting || updateMutation.isPending}
+                        disabled={
+                          !state.canSubmit || state.isSubmitting || updateMutation.isPending
+                        }
                       >
                         <Check className="h-4 w-4" />{" "}
-                        {state.isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                        {state.isSubmitting || updateMutation.isPending
+                          ? "Saving..."
+                          : "Save Changes"}
                       </Button>
                       <Button
                         variant="outline"
@@ -270,7 +290,7 @@ function ClientORPC() {
             {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"
+                className="flex items-center justify-between rounded-lg border p-4 bg-background shadow-sm hover:shadow-md transition-shadow"
               >
                 <div className="flex-1">
                   <div className="flex items-center gap-2">

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

@@ -1,14 +1,28 @@
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { Button } from "@workspace/ui/components/button";
-import { useHello, usePlanets } from "@workspace/orpc/react";
+import type { AppRouter } from "@workspace/orpc/router";
+import type { InferRouterOutputs } from "@orpc/server";
+import { orpc } from "@/lib/orpc";
+
+type Outputs = InferRouterOutputs<AppRouter>;
+type Planet = Outputs["planets"]["getPlanets"][number];
 
 export const Route = createFileRoute("/_public/")({
+  loader: async () => {
+    const [helloRes, planets] = await Promise.all([
+      orpc.hello({ name: "Croissant Stack Desktop" }),
+      orpc.planets.getPlanets(),
+    ]);
+    return {
+      message: helloRes.message,
+      planets,
+    };
+  },
   component: App,
 });
 
 function App() {
-  const { data: helloData, isLoading: helloLoading } = useHello("Croissant Desktop");
-  const { data: planets, isLoading: planetsLoading } = usePlanets();
+  const { message, planets } = Route.useLoaderData();
 
   return (
     <div className="flex min-h-svh p-6">
@@ -16,20 +30,18 @@ function App() {
         <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>
+            oRPC integration: <span className="font-bold">{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 ? (
+            {planets.length === 0 ? (
               <p className="text-gray-500 italic">
-                No planets found in the database.
+                No planets found in the database. Run `db:push` and seed data if needed.
               </p>
             ) : (
               <ul className="grid grid-cols-1 gap-2">
-                {planets.map((planet) => (
+                {planets.map((planet: Planet) => (
                   <li key={planet.id} className="rounded-md border p-3 shadow-sm">
                     <span className="font-bold">{planet.name}</span> - {planet.description}
                   </li>

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

@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { LoginForm } from "@/components/login-form";
+
+export const Route = createFileRoute("/_public/login")({
+  head: () => ({
+    meta: [
+      {
+        title: "Sign In | Croissant Stack",
+      },
+      {
+        name: "description",
+        content: "Sign in to your Croissant Stack account.",
+      },
+      {
+        name: "robots",
+        content: "noindex, follow",
+      },
+    ],
+  }),
+  headers: () => ({
+    "Cache-Control": "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400",
+  }),
+  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/routes/_public/signup.tsx

@@ -0,0 +1,31 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SignupForm } from "@/components/signup-form";
+
+export const Route = createFileRoute("/_public/signup")({
+  head: () => ({
+    meta: [
+      {
+        title: "Create an Account | Croissant Stack",
+      },
+      {
+        name: "description",
+        content:
+          "Join Croissant Stack today. Create an account to start building with the best stack.",
+      },
+    ],
+  }),
+  headers: () => ({
+    "Cache-Control": "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400",
+  }),
+  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 → routes}/_public.tsx

@@ -1,6 +1,6 @@
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar";
-import { PublicSidebar } from "@renderer/components/app-sidebar";
+import { PublicSidebar } from "@/components/app-sidebar";
 
 export const Route = createFileRoute("/_public")({
   component: PublicLayout,

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

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

package/template/apps/desktop/src-tauri/Cargo.toml

@@ -0,0 +1,25 @@
+[package]
+name = "desktop"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "desktop_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+

package/template/apps/desktop/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

package/template/apps/desktop/src-tauri/capabilities/default.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": ["core:default", "opener:default"]
+}

package/template/apps/desktop/src-tauri/src/lib.rs

@@ -0,0 +1,14 @@
+// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

package/template/apps/desktop/src-tauri/src/main.rs

@@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    desktop_lib::run()
+}

package/template/apps/desktop/src-tauri/tauri.conf.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "desktop",
+  "version": "0.1.0",
+  "identifier": "com.croissantlabs.desktop",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "pnpm build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "desktop",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

package/template/apps/desktop/tsconfig.json

@@ -1,6 +1,17 @@
 {
-  "files": [],
-  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }],
-  "include": [],
-  "exclude": ["node_modules", "out", "dist"]
+  "extends": "@workspace/config-typescript/react.json",
+  "include": ["**/*.ts", "**/*.tsx", "vite.config.ts"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    }
+  }
 }

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

@@ -1,8 +1,10 @@
 {
-  "extends": "@workspace/config-typescript/base.json",
   "compilerOptions": {
     "composite": true,
-    "types": ["electron-vite/node"]
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src/main/**/*", "src/preload/**/*", "electron.vite.config.ts"]
+  "include": ["vite.config.ts"]
 }

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

@@ -0,0 +1,40 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import tailwindcss from "@tailwindcss/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [
+    tsconfigPaths(),
+    TanStackRouterVite({
+      routesDirectory: "./src/routes",
+      generatedRouteTree: "./src/routeTree.gen.ts",
+    }),
+    react(),
+    tailwindcss(),
+  ],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent Vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: process.env.TAURI_DEV_HOST || false,
+    hmr: process.env.TAURI_DEV_HOST
+      ? {
+          protocol: "ws",
+          host: process.env.TAURI_DEV_HOST,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell Vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));

package/template/apps/mobile/app/(tabs)/_layout.tsx

@@ -1,10 +1,10 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
+import { Tabs } from "expo-router";
+import React from "react";
 
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { HapticTab } from "@/components/haptic-tab";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
@@ -12,21 +12,22 @@ export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
         tabBarButton: HapticTab,
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: "Home",
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
-          title: 'Explore',
+          title: "Explore",
           tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
         }}
       />

package/template/apps/mobile/app/(tabs)/explore.tsx

@@ -1,18 +1,18 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Image } from "expo-image";
+import { Platform, StyleSheet } from "react-native";
 
-import { Collapsible } from '@/components/ui/collapsible';
-import { ExternalLink } from '@/components/external-link';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Fonts } from '@/constants/theme';
+import { Collapsible } from "@/components/ui/collapsible";
+import { ExternalLink } from "@/components/external-link";
+import ParallaxScrollView from "@/components/parallax-scroll-view";
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Fonts } from "@/constants/theme";
 
 export default function TabTwoScreen() {
   return (
     <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+      headerBackgroundColor={{ light: "#D0D0D0", dark: "#353636" }}
       headerImage={
         <IconSymbol
           size={310}
@@ -20,25 +20,27 @@ export default function TabTwoScreen() {
           name="chevron.left.forwardslash.chevron.right"
           style={styles.headerImage}
         />
-      }>
+      }
+    >
       <ThemedView style={styles.titleContainer}>
         <ThemedText
           type="title"
           style={{
             fontFamily: Fonts.rounded,
-          }}>
+          }}
+        >
           Explore
         </ThemedText>
       </ThemedView>
       <ThemedText>This app includes example code to help you get started.</ThemedText>
       <Collapsible title="File-based routing">
         <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
+          This app has two screens:{" "}
+          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{" "}
           <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
         </ThemedText>
         <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
+          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{" "}
           sets up the tab navigator.
         </ThemedText>
         <ExternalLink href="https://docs.expo.dev/router/introduction">
@@ -47,19 +49,19 @@ export default function TabTwoScreen() {
       </Collapsible>
       <Collapsible title="Android, iOS, and web support">
         <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
+          You can open this project on Android, iOS, and the web. To open the web version, press{" "}
           <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
         </ThemedText>
       </Collapsible>
       <Collapsible title="Images">
         <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
+          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{" "}
           <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
           different screen densities
         </ThemedText>
         <Image
-          source={require('@/assets/images/react-logo.png')}
-          style={{ width: 100, height: 100, alignSelf: 'center' }}
+          source={require("@/assets/images/react-logo.png")}
+          style={{ width: 100, height: 100, alignSelf: "center" }}
         />
         <ExternalLink href="https://reactnative.dev/docs/images">
           <ThemedText type="link">Learn more</ThemedText>
@@ -67,7 +69,7 @@ export default function TabTwoScreen() {
       </Collapsible>
       <Collapsible title="Light and dark mode components">
         <ThemedText>
-          This template has light and dark mode support. The{' '}
+          This template has light and dark mode support. The{" "}
           <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
           what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
         </ThemedText>
@@ -77,18 +79,18 @@ export default function TabTwoScreen() {
       </Collapsible>
       <Collapsible title="Animations">
         <ThemedText>
-          This template includes an example of an animated component. The{' '}
+          This template includes an example of an animated component. The{" "}
           <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful{' '}
+          the powerful{" "}
           <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
             react-native-reanimated
-          </ThemedText>{' '}
+          </ThemedText>{" "}
           library to create a waving hand animation.
         </ThemedText>
         {Platform.select({
           ios: (
             <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
+              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{" "}
               component provides a parallax effect for the header image.
             </ThemedText>
           ),
@@ -100,13 +102,13 @@ export default function TabTwoScreen() {
 
 const styles = StyleSheet.create({
   headerImage: {
-    color: '#808080',
+    color: "#808080",
     bottom: -90,
     left: -35,
-    position: 'absolute',
+    position: "absolute",
   },
   titleContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: 8,
   },
 });