franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add orpc

Browse Source
This commit is contained in:
Aman Varshney
2025-04-14 21:45:28 +05:30
parent 8b03441909
commit 7f441ef670
268 changed files with 3513 additions and 3039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/cli/templates/examples/ai/apps/react-router/src/routes/ai.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { useChat } from "@ai-sdk/react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Send } from "lucide-react";
import { useRef, useEffect } from "react";
export default function AI() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
});
const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
{messages.length === 0 ? (
<div className="text-center text-muted-foreground mt-8">
Ask me anything to get started!
</div>
) : (
messages.map((message) => (
<div
key={message.id}
className={`p-3 rounded-lg ${
message.role === "user"
? "bg-primary/10 ml-8"
: "bg-secondary/20 mr-8"
}`}
>
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
</div>
))
)}
<div ref={messagesEndRef} />
</div>
<form
onSubmit={handleSubmit}
className="w-full flex items-center space-x-2 pt-2 border-t"
>
<Input
name="prompt"
value={input}
onChange={handleInputChange}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"
autoFocus
/>
<Button type="submit" size="icon">
<Send size={18} />
</Button>
</form>
</div>
);
}

69
apps/cli/templates/examples/ai/apps/tanstack-router/src/routes/ai.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { createFileRoute } from "@tanstack/react-router";
import { useChat } from "@ai-sdk/react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Send } from "lucide-react";
import { useRef, useEffect } from "react";
export const Route = createFileRoute("/ai")({
component: RouteComponent,
});
function RouteComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
});
const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
{messages.length === 0 ? (
<div className="text-center text-muted-foreground mt-8">
Ask me anything to get started!
</div>
) : (
messages.map((message) => (
<div
key={message.id}
className={`p-3 rounded-lg ${
message.role === "user"
? "bg-primary/10 ml-8"
: "bg-secondary/20 mr-8"
}`}
>
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
</div>
))
)}
<div ref={messagesEndRef} />
</div>
<form
onSubmit={handleSubmit}
className="w-full flex items-center space-x-2 pt-2 border-t"
>
<Input
name="prompt"
value={input}
onChange={handleInputChange}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"
autoFocus
/>
<Button type="submit" size="icon">
<Send size={18} />
</Button>
</form>
</div>
);
}

69
apps/cli/templates/examples/ai/apps/tanstack-start/src/routes/ai.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { createFileRoute } from "@tanstack/react-router";
import { useChat } from "@ai-sdk/react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Send } from "lucide-react";
import { useRef, useEffect } from "react";
export const Route = createFileRoute("/ai")({
component: RouteComponent,
});
function RouteComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
});
const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
return (
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
<div className="overflow-y-auto space-y-4 pb-4">
{messages.length === 0 ? (
<div className="text-center text-muted-foreground mt-8">
Ask me anything to get started!
</div>
) : (
messages.map((message) => (
<div
key={message.id}
className={`p-3 rounded-lg ${
message.role === "user"
? "bg-primary/10 ml-8"
: "bg-secondary/20 mr-8"
}`}
>
<p className="text-sm font-semibold mb-1">
{message.role === "user" ? "You" : "AI Assistant"}
</p>
<div className="whitespace-pre-wrap">{message.content}</div>
</div>
))
)}
<div ref={messagesEndRef} />
</div>
<form
onSubmit={handleSubmit}
className="w-full flex items-center space-x-2 pt-2 border-t"
>
<Input
name="prompt"
value={input}
onChange={handleInputChange}
placeholder="Type your message..."
className="flex-1"
autoComplete="off"
autoFocus
/>
<Button type="submit" size="icon">
<Send size={18} />
</Button>
</form>
</div>
);
}

79
apps/cli/templates/examples/todo/server/drizzle/base/src/routers/todo.ts.hbs Normal file
View File

@@ -0,0 +1,79 @@
{{#if (eq api "orpc")}}
import { eq } from "drizzle-orm";
import { z } from "zod";
import { db } from "../db";
import { todo } from "../db/schema/todo";
import { publicProcedure } from "../lib/orpc";
export const todoRouter = {
getAll: publicProcedure.handler(async () => {
return await db.select().from(todo);
}),
create: publicProcedure
.input(z.object({ text: z.string().min(1) }))
.handler(async ({ input }) => {
const result = await db
.insert(todo)
.values({
text: input.text,
})
.returning();
return result[0];
}),
toggle: publicProcedure
.input(z.object({ id: z.number(), completed: z.boolean() }))
.handler(async ({ input }) => {
await db
.update(todo)
.set({ completed: input.completed })
.where(eq(todo.id, input.id));
return { success: true };
}),
delete: publicProcedure
.input(z.object({ id: z.number() }))
.handler(async ({ input }) => {
await db.delete(todo).where(eq(todo.id, input.id));
return { success: true };
}),
};
{{/if}}
{{#if (eq api "trpc")}}
import { z } from "zod";
import { router, publicProcedure } from "../lib/trpc";
import { todo } from "../db/schema/todo";
import { eq } from "drizzle-orm";
import { db } from "../db";
export const todoRouter = router({
getAll: publicProcedure.query(async () => {
return await db.select().from(todo);
}),
create: publicProcedure
.input(z.object({ text: z.string().min(1) }))
.mutation(async ({ input }) => {
return await db.insert(todo).values({
text: input.text,
});
}),
toggle: publicProcedure
.input(z.object({ id: z.number(), completed: z.boolean() }))
.mutation(async ({ input }) => {
return await db
.update(todo)
.set({ completed: input.completed })
.where(eq(todo.id, input.id));
}),
delete: publicProcedure
.input(z.object({ id: z.number() }))
.mutation(async ({ input }) => {
return await db.delete(todo).where(eq(todo.id, input.id));
}),
});
{{/if}}

7
apps/cli/templates/examples/todo/server/drizzle/mysql/src/db/schema/todo.ts Normal file
View File

@@ -0,0 +1,7 @@
import { mysqlTable, varchar, int, boolean } from "drizzle-orm/mysql-core";
export const todo = mysqlTable("todo", {
id: int("id").primaryKey().autoincrement(),
text: varchar("text", { length: 255 }).notNull(),
completed: boolean("completed").default(false).notNull(),
});

7
apps/cli/templates/examples/todo/server/drizzle/postgres/src/db/schema/todo.ts Normal file
View File

@@ -0,0 +1,7 @@
import { pgTable, text, boolean, serial } from "drizzle-orm/pg-core";
export const todo = pgTable("todo", {
id: serial("id").primaryKey(),
text: text("text").notNull(),
completed: boolean("completed").default(false).notNull()
});

7
apps/cli/templates/examples/todo/server/drizzle/sqlite/src/db/schema/todo.ts Normal file
View File

@@ -0,0 +1,7 @@
import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
export const todo = sqliteTable("todo", {
id: integer("id").primaryKey({ autoIncrement: true }),
text: text("text").notNull(),
completed: integer("completed", { mode: "boolean" }).default(false).notNull(),
});

55
apps/cli/templates/examples/todo/server/prisma/base/trpc/src/routers/todo.ts Normal file
View File

@@ -0,0 +1,55 @@
import { TRPCError } from "@trpc/server";
import { z } from "zod";
import prisma from "../../prisma";
import { publicProcedure, router } from "../lib/trpc";
export const todoRouter = router({
getAll: publicProcedure.query(async () => {
return await prisma.todo.findMany({
orderBy: {
id: "asc"
}
});
}),
create: publicProcedure
.input(z.object({ text: z.string().min(1) }))
.mutation(async ({ input }) => {
return await prisma.todo.create({
data: {
text: input.text,
},
});
}),
toggle: publicProcedure
.input(z.object({ id: z.number(), completed: z.boolean() }))
.mutation(async ({ input }) => {
try {
return await prisma.todo.update({
where: { id: input.id },
data: { completed: input.completed },
});
} catch (error) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Todo not found",
});
}
}),
delete: publicProcedure
.input(z.object({ id: z.number() }))
.mutation(async ({ input }) => {
try {
return await prisma.todo.delete({
where: { id: input.id },
});
} catch (error) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Todo not found",
});
}
}),
});

7
apps/cli/templates/examples/todo/server/prisma/mongodb/prisma/schema/todo.prisma Normal file
View File

@@ -0,0 +1,7 @@
model Todo {
id String @id @default(auto()) @map("_id") @db.ObjectId
text String
completed Boolean @default(false)
@@map("todo")
}

7
apps/cli/templates/examples/todo/server/prisma/mysql/prisma/schema/todo.prisma Normal file
View File

@@ -0,0 +1,7 @@
model Todo {
id Int @id @default(autoincrement())
text String
completed Boolean @default(false)
@@map("todo")
}

7
apps/cli/templates/examples/todo/server/prisma/postgres/prisma/schema/todo.prisma Normal file
View File

@@ -0,0 +1,7 @@
model Todo {
id Int @id @default(autoincrement())
text String
completed Boolean @default(false)
@@map("todo")
}

7
apps/cli/templates/examples/todo/server/prisma/sqlite/prisma/schema/todo.prisma Normal file
View File

@@ -0,0 +1,7 @@
model Todo {
id Int @id @default(autoincrement())
text String
completed Boolean @default(false)
@@map("todo")
}

158
apps/cli/templates/examples/todo/web/react-router/src/routes/todos.tsx.hbs Normal file
View File

@@ -0,0 +1,158 @@
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
{{#if (eq api "orpc")}}
import { orpc } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { trpc } from "@/utils/trpc";
{{/if}}
import { useMutation, useQuery } from "@tanstack/react-query";
import { Loader2, Trash2 } from "lucide-react";
import { useState } from "react";
export default function Todos() {
const [newTodoText, setNewTodoText] = useState("");
{{#if (eq api "orpc")}}
const todos = useQuery(orpc.todo.getAll.queryOptions());
const createMutation = useMutation(
orpc.todo.create.mutationOptions({
onSuccess: () => {
todos.refetch();
setNewTodoText("");
},
})
);
const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(),
})
);
const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(),
})
);
{{/if}}
{{#if (eq api "trpc")}}
const todos = useQuery(trpc.todo.getAll.queryOptions());
const createMutation = useMutation(
trpc.todo.create.mutationOptions({
onSuccess: () => {
todos.refetch();
setNewTodoText("");
},
})
);
const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(),
})
);
const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(),
})
);
{{/if}}
const handleAddTodo = (e: React.FormEvent) => {
e.preventDefault();
if (newTodoText.trim()) {
createMutation.mutate({ text: newTodoText });
}
};
const handleToggleTodo = (id: number, completed: boolean) => {
toggleMutation.mutate({ id, completed: !completed });
};
const handleDeleteTodo = (id: number) => {
deleteMutation.mutate({ id });
};
return (
<div className="w-full mx-auto max-w-md py-10">
<Card>
<CardHeader>
<CardTitle>Todo List</CardTitle>
<CardDescription>Manage your tasks efficiently</CardDescription>
</CardHeader>
<CardContent>
<form
onSubmit={handleAddTodo}
className="mb-6 flex items-center space-x-2"
>
<Input
value={newTodoText}
onChange={(e) => setNewTodoText(e.target.value)}
placeholder="Add a new task..."
disabled={createMutation.isPending}
/>
<Button
type="submit"
disabled={createMutation.isPending || !newTodoText.trim()}
>
{createMutation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
"Add"
)}
</Button>
</form>
{todos.isLoading ? (
<div className="flex justify-center py-4">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : todos.data?.length === 0 ? (
<p className="py-4 text-center">
No todos yet. Add one above!
</p>
) : (
<ul className="space-y-2">
{todos.data?.map((todo) => (
<li
key={todo.id}
className="flex items-center justify-between rounded-md border p-2"
>
<div className="flex items-center space-x-2">
<Checkbox
checked={todo.completed}
onCheckedChange={() =>
handleToggleTodo(todo.id, todo.completed)
}
id={`todo-${todo.id}`}
/>
<label
htmlFor={`todo-${todo.id}`}
className={`${todo.completed ? "line-through" : ""}`}
>
{todo.text}
</label>
</div>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteTodo(todo.id)}
aria-label="Delete todo"
>
<Trash2 className="h-4 w-4" />
</Button>
</li>
))}
</ul>
)}
</CardContent>
</Card>
</div>
);
}

161
apps/cli/templates/examples/todo/web/tanstack-router/src/routes/todos.tsx.hbs Normal file
View File

@@ -0,0 +1,161 @@
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
{{#if (eq api "orpc")}}
import { orpc } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { trpc } from "@/utils/trpc";
{{/if}}
import { useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { Loader2, Trash2 } from "lucide-react";
import { useState } from "react";
export const Route = createFileRoute("/todos")({
component: TodosRoute,
});
function TodosRoute() {
const [newTodoText, setNewTodoText] = useState("");
{{#if (eq api "orpc")}}
const todos = useQuery(orpc.todo.getAll.queryOptions());
const createMutation = useMutation(
orpc.todo.create.mutationOptions({
onSuccess: () => {
todos.refetch();
setNewTodoText("");
},
}),
);
const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
{{/if}}
{{#if (eq api "trpc")}}
const todos = useQuery(trpc.todo.getAll.queryOptions());
const createMutation = useMutation(
trpc.todo.create.mutationOptions({
onSuccess: () => {
todos.refetch();
setNewTodoText("");
},
}),
);
const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
{{/if}}
const handleAddTodo = (e: React.FormEvent) => {
e.preventDefault();
if (newTodoText.trim()) {
createMutation.mutate({ text: newTodoText });
}
};
const handleToggleTodo = (id: number, completed: boolean) => {
toggleMutation.mutate({ id, completed: !completed });
};
const handleDeleteTodo = (id: number) => {
deleteMutation.mutate({ id });
};
return (
<div className="mx-auto w-full max-w-md py-10">
<Card>
<CardHeader>
<CardTitle>Todo List</CardTitle>
<CardDescription>Manage your tasks efficiently</CardDescription>
</CardHeader>
<CardContent>
<form
onSubmit={handleAddTodo}
className="mb-6 flex items-center space-x-2"
>
<Input
value={newTodoText}
onChange={(e) => setNewTodoText(e.target.value)}
placeholder="Add a new task..."
disabled={createMutation.isPending}
/>
<Button
type="submit"
disabled={createMutation.isPending || !newTodoText.trim()}
>
{createMutation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
"Add"
)}
</Button>
</form>
{todos.isLoading ? (
<div className="flex justify-center py-4">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : todos.data?.length === 0 ? (
<p className="py-4 text-center">No todos yet. Add one above!</p>
) : (
<ul className="space-y-2">
{todos.data?.map((todo) => (
<li
key={todo.id}
className="flex items-center justify-between rounded-md border p-2"
>
<div className="flex items-center space-x-2">
<Checkbox
checked={todo.completed}
onCheckedChange={() =>
handleToggleTodo(todo.id, todo.completed)
}
id={`todo-${todo.id}`}
/>
<label
htmlFor={`todo-${todo.id}`}
className={`${todo.completed ? "line-through" : ""}`}
>
{todo.text}
</label>
</div>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteTodo(todo.id)}
aria-label="Delete todo"
>
<Trash2 className="h-4 w-4" />
</Button>
</li>
))}
</ul>
)}
</CardContent>
</Card>
</div>
);
}

168
apps/cli/templates/examples/todo/web/tanstack-start/src/routes/todos.tsx.hbs Normal file
View File

@@ -0,0 +1,168 @@
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
{{#if (eq api "trpc")}}
import { useTRPC } from "@/utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { useORPC } from "@/utils/orpc";
{{/if}}
import { useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { Loader2, Trash2 } from "lucide-react";
import { useState } from "react";
export const Route = createFileRoute("/todos")({
component: TodosRoute,
});
function TodosRoute() {
{{#if (eq api "trpc")}}
const trpc = useTRPC();
{{/if}}
{{#if (eq api "orpc")}}
const orpc = useORPC();
{{/if}}
const [newTodoText, setNewTodoText] = useState("");
{{#if (eq api "trpc")}}
const todos = useQuery(trpc.todo.getAll.queryOptions());
const createMutation = useMutation(
trpc.todo.create.mutationOptions({
onSuccess: () => {
todos.refetch();
setNewTodoText("");
},
}),
);
const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
{{/if}}
{{#if (eq api "orpc")}}
const todos = useQuery(orpc.todo.getAll.queryOptions());
const createMutation = useMutation(
orpc.todo.create.mutationOptions({
onSuccess: () => {
todos.refetch();
setNewTodoText("");
},
}),
);
const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(),
}),
);
{{/if}}
const handleAddTodo = (e: React.FormEvent) => {
e.preventDefault();
if (newTodoText.trim()) {
createMutation.mutate({ text: newTodoText });
}
};
const handleToggleTodo = (id: number, completed: boolean) => {
toggleMutation.mutate({ id, completed: !completed });
};
const handleDeleteTodo = (id: number) => {
deleteMutation.mutate({ id });
};
return (
<div className="mx-auto w-full max-w-md py-10">
<Card>
<CardHeader>
<CardTitle>Todo List</CardTitle>
<CardDescription>Manage your tasks efficiently</CardDescription>
</CardHeader>
<CardContent>
<form
onSubmit={handleAddTodo}
className="mb-6 flex items-center space-x-2"
>
<Input
value={newTodoText}
onChange={(e) => setNewTodoText(e.target.value)}
placeholder="Add a new task..."
disabled={createMutation.isPending}
/>
<Button
type="submit"
disabled={createMutation.isPending || !newTodoText.trim()}
>
{createMutation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
"Add"
)}
</Button>
</form>
{todos.isLoading ? (
<div className="flex justify-center py-4">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : todos.data?.length === 0 ? (
<p className="py-4 text-center">No todos yet. Add one above!</p>
) : (
<ul className="space-y-2">
{todos.data?.map((todo) => (
<li
key={todo.id}
className="flex items-center justify-between rounded-md border p-2"
>
<div className="flex items-center space-x-2">
<Checkbox
checked={todo.completed}
onCheckedChange={() =>
handleToggleTodo(todo.id, todo.completed)
}
id={`todo-${todo.id}`}
/>
<label
htmlFor={`todo-${todo.id}`}
className={`${todo.completed ? "line-through" : ""}`}
>
{todo.text}
</label>
</div>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteTodo(todo.id)}
aria-label="Delete todo"
>
<Trash2 className="h-4 w-4" />
</Button>
</li>
))}
</ul>
)}
</CardContent>
</Card>
</div>
);
}