create-ncf 0.1.0

package/templates/shadcn/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/templates/shadcn/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/templates/shadcn/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "~/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/templates/shadcn/src/components/ui/sonner.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = ComponentProps<typeof Sonner>;
+
+function Toaster({ ...props }: ToasterProps) {
+	return (
+		<Sonner
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
+}
+
+export { Toaster };

package/templates/trpc/src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,29 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import type { NextRequest } from "next/server";
+
+import { appRouter } from "~/server/api/root";
+import { createTRPCContext } from "~/server/api/trpc";
+
+const createContext = async (req: NextRequest) => {
+	return createTRPCContext({
+		headers: req.headers,
+	});
+};
+
+const handler = (req: NextRequest) =>
+	fetchRequestHandler({
+		endpoint: "/api/trpc",
+		req,
+		router: appRouter,
+		createContext: () => createContext(req),
+		onError:
+			process.env.NODE_ENV === "development"
+				? ({ path, error }) => {
+						console.error(
+							`tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
+						);
+					}
+				: undefined,
+	});
+
+export { handler as GET, handler as POST };

package/templates/trpc/src/server/api/root.ts

@@ -0,0 +1,10 @@
+import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
+import { exampleRouter } from "~/server/api/routes/example";
+
+export const appRouter = createTRPCRouter({
+	example: exampleRouter,
+});
+
+export type AppRouter = typeof appRouter;
+
+export const createCaller = createCallerFactory(appRouter);

package/templates/trpc/src/server/api/routes/example.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
+
+export const exampleRouter = createTRPCRouter({
+	hello: publicProcedure
+		.input(z.object({ text: z.string() }))
+		.query(({ input }) => {
+			return {
+				greeting: `Hello ${input.text}`,
+			};
+		}),
+});

package/templates/trpc/src/server/api/trpc.ts

@@ -0,0 +1,45 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+import { ZodError } from "zod";
+
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+	return {
+		...opts,
+	};
+};
+
+const t = initTRPC.context<typeof createTRPCContext>().create({
+	transformer: superjson,
+	errorFormatter({ shape, error }) {
+		return {
+			...shape,
+			data: {
+				...shape.data,
+				zodError:
+					error.cause instanceof ZodError ? error.cause.flatten() : null,
+			},
+		};
+	},
+});
+
+export const createCallerFactory = t.createCallerFactory;
+
+export const createTRPCRouter = t.router;
+
+const timingMiddleware = t.middleware(async ({ next, path }) => {
+	const start = Date.now();
+
+	if (t._config.isDev) {
+		const waitMs = Math.floor(Math.random() * 400) + 100;
+		await new Promise((resolve) => setTimeout(resolve, waitMs));
+	}
+
+	const result = await next();
+
+	const end = Date.now();
+	console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
+
+	return result;
+});
+
+export const publicProcedure = t.procedure.use(timingMiddleware);

package/templates/trpc/src/server/api/trpc.with-auth.ts

@@ -0,0 +1,67 @@
+import { initTRPC, TRPCError } from "@trpc/server";
+import superjson from "superjson";
+import { ZodError } from "zod";
+import { initAuth } from "~/server/auth/auth";
+import { getDB } from "~/server/db";
+
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+	const auth = await initAuth();
+	const session = await auth.api.getSession({
+		headers: opts.headers,
+	});
+
+	return {
+		db: await getDB(),
+		session,
+		...opts,
+	};
+};
+
+const t = initTRPC.context<typeof createTRPCContext>().create({
+	transformer: superjson,
+	errorFormatter({ shape, error }) {
+		return {
+			...shape,
+			data: {
+				...shape.data,
+				zodError:
+					error.cause instanceof ZodError ? error.cause.flatten() : null,
+			},
+		};
+	},
+});
+
+export const createCallerFactory = t.createCallerFactory;
+
+export const createTRPCRouter = t.router;
+
+const timingMiddleware = t.middleware(async ({ next, path }) => {
+	const start = Date.now();
+
+	if (t._config.isDev) {
+		const waitMs = Math.floor(Math.random() * 400) + 100;
+		await new Promise((resolve) => setTimeout(resolve, waitMs));
+	}
+
+	const result = await next();
+
+	const end = Date.now();
+	console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
+
+	return result;
+});
+
+export const publicProcedure = t.procedure.use(timingMiddleware);
+
+export const protectedProcedure = publicProcedure.use(async ({ ctx, next }) => {
+	if (!ctx.session?.user) {
+		throw new TRPCError({ code: "UNAUTHORIZED" });
+	}
+
+	return next({
+		ctx: {
+			...ctx,
+			session: ctx.session,
+		},
+	});
+});

package/templates/trpc/src/trpc/query-client.ts

@@ -0,0 +1,23 @@
+import {
+	defaultShouldDehydrateQuery,
+	QueryClient,
+} from "@tanstack/react-query";
+import SuperJSON from "superjson";
+
+export const createQueryClient = () =>
+	new QueryClient({
+		defaultOptions: {
+			queries: {
+				staleTime: 30 * 1000,
+			},
+			dehydrate: {
+				serializeData: SuperJSON.serialize,
+				shouldDehydrateQuery: (query) =>
+					defaultShouldDehydrateQuery(query) ||
+					query.state.status === "pending",
+			},
+			hydrate: {
+				deserializeData: SuperJSON.deserialize,
+			},
+		},
+	});

package/templates/trpc/src/trpc/react.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchStreamLink, loggerLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import { useState } from "react";
+import SuperJSON from "superjson";
+
+import type { AppRouter } from "~/server/api/root";
+import { createQueryClient } from "./query-client";
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+	if (typeof window === "undefined") {
+		return createQueryClient();
+	}
+	clientQueryClientSingleton ??= createQueryClient();
+
+	return clientQueryClientSingleton;
+};
+
+export const api = createTRPCReact<AppRouter>();
+
+export type RouterInputs = inferRouterInputs<AppRouter>;
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
+	const queryClient = getQueryClient();
+
+	const [trpcClient] = useState(() =>
+		api.createClient({
+			links: [
+				loggerLink({
+					enabled: (op) =>
+						process.env.NODE_ENV === "development" ||
+						(op.direction === "down" && op.result instanceof Error),
+				}),
+				httpBatchStreamLink({
+					transformer: SuperJSON,
+					url: `${getBaseUrl()}/api/trpc`,
+					headers: () => {
+						const headers = new Headers();
+						headers.set("x-trpc-source", "nextjs-react");
+						return headers;
+					},
+				}),
+			],
+		}),
+	);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<api.Provider client={trpcClient} queryClient={queryClient}>
+				{props.children}
+			</api.Provider>
+		</QueryClientProvider>
+	);
+}
+
+function getBaseUrl() {
+	if (typeof window !== "undefined") return window.location.origin;
+	if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+	return `http://localhost:${process.env.PORT ?? 3000}`;
+}