create-croissant 0.1.48 → 0.1.50

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

@@ -0,0 +1,306 @@
+import * as React from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { Check, Pencil, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useForm } from "@tanstack/react-form";
+import { z } from "zod";
+
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+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";
+
+type Outputs = InferRouterOutputs<typeof router>;
+type Planet = Outputs["planets"]["getPlanets"][number];
+
+const planetSchema = z.object({
+  name: z.string().min(1),
+  description: z.string(),
+  distance: z.string().refine((val) => !isNaN(parseFloat(val)), {
+    message: "Must be a number",
+  }),
+  diameter: z.string().refine((val) => !isNaN(parseFloat(val)), {
+    message: "Must be a number",
+  }),
+});
+
+export const Route = createFileRoute("/_public/examples/client-orpc")({
+  component: ClientORPC,
+});
+
+function ClientORPC() {
+  const [editingId, setEditingId] = React.useState<number | null>(null);
+
+  const { data: planets = [], isLoading } = usePlanets();
+
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      description: "",
+      distance: "0",
+      diameter: "0",
+    },
+    validators: {
+      onChange: planetSchema,
+    },
+    onSubmit: async ({ value }) => {
+      if (editingId) {
+        await updateMutation.mutateAsync({
+          id: editingId,
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        });
+      } else {
+        await createMutation.mutateAsync({
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        });
+      }
+    },
+  });
+
+  const resetForm = () => {
+    form.reset();
+    setEditingId(null);
+  };
+
+  const createMutation = useCreatePlanet({
+    onSuccess: () => {
+      resetForm();
+      toast.success("Planet added successfully");
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to add planet");
+    },
+  });
+
+  const updateMutation = useUpdatePlanet({
+    onSuccess: () => {
+      resetForm();
+      toast.success("Planet updated successfully");
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to update planet");
+    },
+  });
+
+  const deleteMutation = useDeletePlanet({
+    onSuccess: () => {
+      toast.success("Planet deleted successfully");
+    },
+    onError: (err) => {
+      toast.error(err.message || "Failed to delete planet");
+    },
+  });
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("Are you sure you want to delete this planet?")) return;
+    await deleteMutation.mutateAsync({ id });
+  };
+
+  const startEdit = (planet: Planet) => {
+    setEditingId(planet.id);
+    form.setFieldValue("name", planet.name);
+    form.setFieldValue("description", planet.description || "");
+    form.setFieldValue("distance", planet.distanceFromSun.toString());
+    form.setFieldValue("diameter", planet.diameter.toString());
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div>
+        <h1 className="text-2xl font-bold mb-2">Client + oRPC CRUD</h1>
+        <p className="text-muted-foreground">
+          Manage planets directly from the client using TanStack Query, TanStack Form and oRPC.
+        </p>
+      </div>
+
+      <div className="rounded-lg border p-6 bg-muted/30 dark:bg-zinc-900/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"}
+        </h2>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
+          }}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <form.Field
+              name="name"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Mars"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="description"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Description</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="The red planet"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="distance"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Distance (M km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="diameter"
+              children={(field) => (
+                <Field
+                  data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
+                >
+                  <FieldLabel htmlFor={field.name}>Diameter (km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+          </div>
+          <div className="mt-6 flex gap-2">
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <>
+                  {editingId ? (
+                    <>
+                      <Button
+                        type="submit"
+                        className="flex items-center gap-2"
+                        disabled={!canSubmit || isSubmitting || updateMutation.isPending}
+                      >
+                        <Check className="h-4 w-4" />{" "}
+                        {isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        type="button"
+                        onClick={resetForm}
+                        disabled={isSubmitting || updateMutation.isPending}
+                      >
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <Button
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={!canSubmit || isSubmitting || createMutation.isPending}
+                    >
+                      <Plus className="h-4 w-4" />{" "}
+                      {isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
+                    </Button>
+                  )}
+                </>
+              )}
+            />
+          </div>
+        </form>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="font-semibold text-lg">Current Planets</h2>
+        {isLoading ? (
+          <p>Loading planets...</p>
+        ) : planets.length === 0 ? (
+          <p className="text-gray-500 italic">No planets found.</p>
+        ) : (
+          <div className="grid grid-cols-1 gap-3">
+            {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"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-bold text-lg">{planet.name}</span>
+                    <span className="text-xs bg-muted px-2 py-0.5 rounded-full text-muted-foreground">
+                      ID: {planet.id}
+                    </span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {planet.description || "No description provided."}
+                  </p>
+                  <div className="mt-2 flex gap-4 text-xs text-muted-foreground font-mono">
+                    <span>Distance: {planet.distanceFromSun} M km</span>
+                    <span>Diameter: {planet.diameter} km</span>
+                  </div>
+                </div>
+                <div className="flex gap-2 ml-4">
+                  <Button variant="outline" size="icon" onClick={() => startEdit(planet)}>
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    onClick={() => handleDelete(planet.id)}
+                    disabled={deleteMutation.isPending}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { Button } from "@workspace/ui/components/button";
+import { useHello, usePlanets } from "@workspace/orpc/react";
+
+export const Route = createFileRoute("/_public/")({
+  component: App,
+});
+
+function App() {
+  const { data: helloData, isLoading: helloLoading } = useHello("Croissant Desktop");
+  const { data: planets, isLoading: planetsLoading } = usePlanets();
+
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-lg min-w-0 flex-col gap-4 text-sm leading-loose">
+        <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>
+          </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 ? (
+              <p className="text-gray-500 italic">
+                No planets found in the database.
+              </p>
+            ) : (
+              <ul className="grid grid-cols-1 gap-2">
+                {planets.map((planet) => (
+                  <li key={planet.id} className="rounded-md border p-3 shadow-sm">
+                    <span className="font-bold">{planet.name}</span> - {planet.description}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="mt-8 flex gap-2">
+            <Link to="/login">
+              <Button>Go to Login</Button>
+            </Link>
+            <Link to="/dashboard">
+              <Button variant="outline">Go to Dashboard</Button>
+            </Link>
+          </div>
+          <p className="mt-4 text-gray-500">You may now add components and start building.</p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { LoginForm } from "@/components/login-form";
+
+export const Route = createFileRoute("/_public/login")({
+  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/renderer/src/routes/_public/signup.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SignupForm } from "@/components/signup-form";
+
+export const Route = createFileRoute("/_public/signup")({
+  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/_public.tsx

@@ -0,0 +1,23 @@
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar";
+import { PublicSidebar } from "@/components/app-sidebar";
+
+export const Route = createFileRoute("/_public")({
+  component: PublicLayout,
+});
+
+function PublicLayout() {
+  return (
+    <SidebarProvider>
+      <PublicSidebar />
+      <main className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger />
+        </header>
+        <div className="flex-1 overflow-auto p-4">
+          <Outlet />
+        </div>
+      </main>
+    </SidebarProvider>
+  );
+}

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

@@ -10,6 +10,7 @@
   "compilerOptions": {
     "composite": true,
     "paths": {
+      "@/*": ["./src/renderer/src/*"],
       "@renderer/*": ["./src/renderer/src/*"],
       "@main/*": ["./src/main/src/*"],
       "@preload/*": ["./src/preload/src/*"]

package/template/apps/mobile/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["expo.vscode-expo-tools"] }

package/template/apps/mobile/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

package/template/apps/mobile/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

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

@@ -0,0 +1,35 @@
+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';
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        headerShown: false,
+        tabBarButton: HapticTab,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Explore',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,112 @@
+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';
+
+export default function TabTwoScreen() {
+  return (
+    <ParallaxScrollView
+      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+      headerImage={
+        <IconSymbol
+          size={310}
+          color="#808080"
+          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{' '}
+          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
+        </ThemedText>
+        <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">
+          <ThemedText type="link">Learn more</ThemedText>
+        </ExternalLink>
+      </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{' '}
+          <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{' '}
+          <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' }}
+        />
+        <ExternalLink href="https://reactnative.dev/docs/images">
+          <ThemedText type="link">Learn more</ThemedText>
+        </ExternalLink>
+      </Collapsible>
+      <Collapsible title="Light and dark mode components">
+        <ThemedText>
+          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>
+        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
+          <ThemedText type="link">Learn more</ThemedText>
+        </ExternalLink>
+      </Collapsible>
+      <Collapsible title="Animations">
+        <ThemedText>
+          This template includes an example of an animated component. The{' '}
+          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
+          the powerful{' '}
+          <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
+            react-native-reanimated
+          </ThemedText>{' '}
+          library to create a waving hand animation.
+        </ThemedText>
+        {Platform.select({
+          ios: (
+            <ThemedText>
+              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
+              component provides a parallax effect for the header image.
+            </ThemedText>
+          ),
+        })}
+      </Collapsible>
+    </ParallaxScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerImage: {
+    color: '#808080',
+    bottom: -90,
+    left: -35,
+    position: 'absolute',
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+});