create-croissant 0.1.39 → 0.1.41

package/template/apps/mobile/constants/theme.ts

@@ -3,26 +3,26 @@
  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
  */
 
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
 
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
+const tintColorLight = "#0a7ea4";
+const tintColorDark = "#fff";
 
 export const Colors = {
   light: {
-    text: '#11181C',
-    background: '#fff',
+    text: "#11181C",
+    background: "#fff",
     tint: tintColorLight,
-    icon: '#687076',
-    tabIconDefault: '#687076',
+    icon: "#687076",
+    tabIconDefault: "#687076",
     tabIconSelected: tintColorLight,
   },
   dark: {
-    text: '#ECEDEE',
-    background: '#151718',
+    text: "#ECEDEE",
+    background: "#151718",
     tint: tintColorDark,
-    icon: '#9BA1A6',
-    tabIconDefault: '#9BA1A6',
+    icon: "#9BA1A6",
+    tabIconDefault: "#9BA1A6",
     tabIconSelected: tintColorDark,
   },
 };
@@ -30,19 +30,19 @@ export const Colors = {
 export const Fonts = Platform.select({
   ios: {
     /** iOS `UIFontDescriptorSystemDesignDefault` */
-    sans: 'system-ui',
+    sans: "system-ui",
     /** iOS `UIFontDescriptorSystemDesignSerif` */
-    serif: 'ui-serif',
+    serif: "ui-serif",
     /** iOS `UIFontDescriptorSystemDesignRounded` */
-    rounded: 'ui-rounded',
+    rounded: "ui-rounded",
     /** iOS `UIFontDescriptorSystemDesignMonospaced` */
-    mono: 'ui-monospace',
+    mono: "ui-monospace",
   },
   default: {
-    sans: 'normal',
-    serif: 'serif',
-    rounded: 'normal',
-    mono: 'monospace',
+    sans: "normal",
+    serif: "serif",
+    rounded: "normal",
+    mono: "monospace",
   },
   web: {
     sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",

package/template/apps/mobile/hooks/use-color-scheme.ts

@@ -1 +1 @@
-export { useColorScheme } from 'react-native';
+export { useColorScheme } from "react-native";

package/template/apps/mobile/hooks/use-color-scheme.web.ts

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
+import { useEffect, useState } from "react";
+import { useColorScheme as useRNColorScheme } from "react-native";
 
 /**
  * To support static rendering, this value needs to be re-calculated on the client side for web
@@ -17,5 +17,5 @@ export function useColorScheme() {
     return colorScheme;
   }
 
-  return 'light';
+  return "light";
 }

package/template/apps/mobile/hooks/use-theme-color.ts

@@ -3,14 +3,14 @@
  * https://docs.expo.dev/guides/color-schemes/
  */
 
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { Colors } from "@/constants/theme";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 
 export function useThemeColor(
   props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
 ) {
-  const theme = useColorScheme() ?? 'light';
+  const theme = useColorScheme() ?? "light";
   const colorFromProps = props[theme];
 
   if (colorFromProps) {

package/template/apps/mobile/package.json

@@ -1,7 +1,8 @@
 {
   "name": "mobile",
-  "main": "expo-router/entry",
   "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
   "scripts": {
     "dev": "expo start",
     "start": "expo start",
@@ -9,7 +10,6 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "expo lint",
     "build": "expo export --output-dir .output"
   },
   "dependencies": {
@@ -37,8 +37,5 @@
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.7.4"
   },
-  "devDependencies": {
-    "eslint-config-expo": "~55.0.0"
-  },
-  "private": true
+  "devDependencies": {}
 }

package/template/apps/mobile/scripts/reset-project.js

@@ -91,7 +91,7 @@ const moveDirectories = async (userInput) => {
         userInput === "y"
           ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
           : ""
-      }`
+      }`,
     );
   } catch (error) {
     console.error(`❌ Error during script execution: ${error.message}`);
@@ -108,5 +108,5 @@ rl.question(
       console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
       rl.close();
     }
-  }
+  },
 );

package/template/apps/mobile/tsconfig.json

@@ -3,15 +3,8 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-  ]
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
 }

package/template/apps/platform/drizzle.config.ts

@@ -1,10 +1,10 @@
-import 'dotenv/config';
-import { defineConfig } from 'drizzle-kit';
+import "dotenv/config";
+import { defineConfig } from "drizzle-kit";
 
 export default defineConfig({
-  out: './drizzle',
-  schema: '../../packages/db/src/schema.ts',
-  dialect: 'postgresql',
+  out: "./drizzle",
+  schema: "../../packages/db/src/schema.ts",
+  dialect: "postgresql",
   dbCredentials: {
     url: process.env.DATABASE_URL!,
   },

package/template/apps/platform/package.json

@@ -1,14 +1,12 @@
 {
   "name": "platform",
   "version": "0.0.1",
-  "type": "module",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite dev --port 3000",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint",
-    "format": "prettier --write \"**/*.{ts,tsx}\"",
     "typecheck": "tsc --noEmit",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio"
@@ -34,11 +32,9 @@
     "vite-tsconfig-paths": "^6.1.1"
   },
   "devDependencies": {
-    "@workspace/config-eslint": "*",
-    "@workspace/config-typescript": "*",
-    "@workspace/config-prettier": "*",
     "@types/node": "^25.6.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@workspace/config-typescript": "*",
     "vite": "^8.0.10"
   }
 }

package/template/apps/platform/src/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
-import { Link } from "@tanstack/react-router"
-import { LogOut, Settings, User } from "lucide-react"
+import * as React from "react";
+import { Link } from "@tanstack/react-router";
+import { LogOut, Settings, User } from "lucide-react";
 
 import {
   Sidebar,
@@ -14,11 +14,11 @@ import {
   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"
+} 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"
+import { authClient } from "@/lib/auth-client";
 
 // This is sample data.
 export const authNavItems = [
@@ -48,7 +48,7 @@ export const authNavItems = [
       },
     ],
   },
-]
+];
 
 export const publicNavItems = [
   {
@@ -85,32 +85,30 @@ export const publicNavItems = [
       },
     ],
   },
-]
+];
 
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   items?: Array<{
-    title: string
+    title: string;
     items: Array<{
-      title: string
-      url: string
-    }>
-  }>
+      title: string;
+      url: string;
+    }>;
+  }>;
 }
 
 export function AuthSidebar(props: React.ComponentProps<typeof Sidebar>) {
-  return <AppSidebar items={authNavItems} {...props} />
+  return <AppSidebar items={authNavItems} {...props} />;
 }
 
 export function PublicSidebar(props: React.ComponentProps<typeof Sidebar>) {
-  return <AppSidebar items={publicNavItems} {...props} />
+  return <AppSidebar items={publicNavItems} {...props} />;
 }
 
 export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps) {
-  const {
-    data: session,
-  } = authClient.useSession()
+  const { data: session } = authClient.useSession();
 
-  const user = session?.user || null
+  const user = session?.user || null;
 
   return (
     <Sidebar {...props}>
@@ -130,10 +128,7 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
                   <SidebarMenuItem key={subItem.title}>
                     <SidebarMenuButton
                       render={
-                        <Link
-                          to={subItem.url}
-                          activeProps={{ className: "bg-sidebar-accent" }}
-                        />
+                        <Link to={subItem.url} activeProps={{ className: "bg-sidebar-accent" }} />
                       }
                     >
                       {subItem.title}
@@ -148,52 +143,48 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
       <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>
-              ) : (
+            {user ? (
               <SidebarMenuButton
-                render={
-                  <Link to="/login" className="flex items-center gap-2" />
-                }
+                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>
@@ -203,5 +194,5 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>
-  )
+  );
 }

package/template/apps/platform/src/components/login-form.tsx

@@ -1,37 +1,34 @@
-import { cn } from "@workspace/ui/lib/utils"
-import { Button } from "@workspace/ui/components/button"
+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"
+} 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 { type } from "arktype"
-import { authClient } from "@/lib/auth-client"
+} 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 { type } from "arktype";
+import { authClient } from "@/lib/auth-client";
 
 const loginSchema = type({
   email: "string.email",
   password: "string>0",
-})
+});
 
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+export function LoginForm({ className, ...props }: React.ComponentProps<"div">) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const form = useForm({
     defaultValues: {
@@ -42,47 +39,42 @@ export function LoginForm({
       onChange: loginSchema,
     },
     onSubmit: async ({ value }) => {
-      setLoading(true)
-      setError(null)
+      setLoading(true);
+      setError(null);
       const { error: signInError } = await authClient.signIn.email({
         email: value.email,
         password: value.password,
         callbackURL: "/dashboard",
-      })
+      });
       if (signInError) {
-        setError(signInError.message || "Failed to sign in")
+        setError(signInError.message || "Failed to sign in");
       }
-      setLoading(false)
+      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>
+          <CardDescription>Enter your email below to login to your account</CardDescription>
         </CardHeader>
         <CardContent>
           <form
             onSubmit={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              form.handleSubmit()
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
             }}
           >
             <FieldGroup>
-              {error && (
-                <div className="rounded bg-red-100 p-2 text-sm text-red-600">
-                  {error}
-                </div>
-              )}
+              {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
+                  const isInvalid =
+                    field.state.meta.isTouched && field.state.meta.errors.length > 0;
                   return (
                     <Field data-invalid={isInvalid}>
                       <FieldLabel htmlFor={field.name}>Email</FieldLabel>
@@ -98,13 +90,14 @@ export function LoginForm({
                       />
                       {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
+                  const isInvalid =
+                    field.state.meta.isTouched && field.state.meta.errors.length > 0;
                   return (
                     <Field data-invalid={isInvalid}>
                       <div className="flex items-center">
@@ -127,7 +120,7 @@ export function LoginForm({
                       />
                       {isInvalid && <FieldError errors={field.state.meta.errors} />}
                     </Field>
-                  )
+                  );
                 }}
               />
               <Field>
@@ -154,5 +147,5 @@ export function LoginForm({
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }

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

@@ -1,10 +1,6 @@
-import { Label } from "@workspace/ui/components/label"
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarInput,
-} from "@workspace/ui/components/sidebar"
-import { SearchIcon } from "lucide-react"
+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 (
@@ -14,14 +10,10 @@ export function SearchForm({ ...props }: React.ComponentProps<"form">) {
           <Label htmlFor="search" className="sr-only">
             Search
           </Label>
-          <SidebarInput
-            id="search"
-            placeholder="Search the docs..."
-            className="pl-8"
-          />
+          <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>
-  )
+  );
 }