Add Biome and Husky for code formatting and Git hooks

apps/cli/template/with-auth/packages/client/src/components/sign-in-form.tsx

@@ -9,133 +9,131 @@ import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 
 export default function SignInForm({
-  onSwitchToSignUp,
+	onSwitchToSignUp,
 }: {
-  onSwitchToSignUp: () => void;
+	onSwitchToSignUp: () => void;
 }) {
-  const navigate = useNavigate({
-    from: "/",
-  });
-  const { isPending } = authClient.useSession();
+	const navigate = useNavigate({
+		from: "/",
+	});
+	const { isPending } = authClient.useSession();
 
-  const form = useForm({
-    defaultValues: {
-      email: "",
-      password: "",
-    },
-    onSubmit: async ({ value }) => {
-      await authClient.signIn.email(
-        {
-          email: value.email,
-          password: value.password,
-        },
-        {
-          onSuccess: () => {
-            toast.success("Sign in successful");
-            navigate({
-              to: "/dashboard",
-            });
-          },
-          onError: (error) => {
-            toast.error(error.error.message);
-          },
-        },
-      );
-    },
-    validators: {
-      onSubmit: z.object({
-        email: z.string().email("Invalid email address"),
-        password: z.string().min(6, "Password must be at least 6 characters"),
-      }),
-    },
-  });
+	const form = useForm({
+		defaultValues: {
+			email: "",
+			password: "",
+		},
+		onSubmit: async ({ value }) => {
+			await authClient.signIn.email(
+				{
+					email: value.email,
+					password: value.password,
+				},
+				{
+					onSuccess: () => {
+						toast.success("Sign in successful");
+						navigate({
+							to: "/dashboard",
+						});
+					},
+					onError: (error) => {
+						toast.error(error.error.message);
+					},
+				},
+			);
+		},
+		validators: {
+			onSubmit: z.object({
+				email: z.string().email("Invalid email address"),
+				password: z.string().min(6, "Password must be at least 6 characters"),
+			}),
+		},
+	});
 
-  if (isPending) {
-    return <Loader />;
-  }
+	if (isPending) {
+		return <Loader />;
+	}
 
-  return (
-    <div className="mx-auto mt-10 max-w-md p-6">
-      <h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+	return (
+		<div className="mx-auto mt-10 max-w-md p-6">
+			<h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
 
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          void form.handleSubmit();
-        }}
-        className="space-y-4"
-      >
-        <div>
-          <form.Field
-            name="email"
-            children={(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Email</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="email"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          />
-        </div>
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					void form.handleSubmit();
+				}}
+				className="space-y-4"
+			>
+				<div>
+					<form.Field name="email">
+						{(field) => (
+							<div className="space-y-2">
+								<Label htmlFor={field.name}>Email</Label>
+								<Input
+									id={field.name}
+									name={field.name}
+									type="email"
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+								/>
+								{field.state.meta.errors.map((error) => (
+									<p key={error?.message} className="text-red-500">
+										{error?.message}
+									</p>
+								))}
+							</div>
+						)}
+					</form.Field>
+				</div>
 
-        <div>
-          <form.Field
-            name="password"
-            children={(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Password</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          />
-        </div>
+				<div>
+					<form.Field name="password">
+						{(field) => (
+							<div className="space-y-2">
+								<Label htmlFor={field.name}>Password</Label>
+								<Input
+									id={field.name}
+									name={field.name}
+									type="password"
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+								/>
+								{field.state.meta.errors.map((error) => (
+									<p key={error?.message} className="text-red-500">
+										{error?.message}
+									</p>
+								))}
+							</div>
+						)}
+					</form.Field>
+				</div>
 
-        <form.Subscribe>
-          {(state) => (
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={!state.canSubmit || state.isSubmitting}
-            >
-              {state.isSubmitting ? "Submitting..." : "Sign In"}
-            </Button>
-          )}
-        </form.Subscribe>
-      </form>
+				<form.Subscribe>
+					{(state) => (
+						<Button
+							type="submit"
+							className="w-full"
+							disabled={!state.canSubmit || state.isSubmitting}
+						>
+							{state.isSubmitting ? "Submitting..." : "Sign In"}
+						</Button>
+					)}
+				</form.Subscribe>
+			</form>
 
-      <div className="mt-4 text-center">
-        <Button
-          variant="link"
-          onClick={onSwitchToSignUp}
-          className="text-indigo-600 hover:text-indigo-800"
-        >
-          Need an account? Sign Up
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="mt-4 text-center">
+				<Button
+					variant="link"
+					onClick={onSwitchToSignUp}
+					className="text-indigo-600 hover:text-indigo-800"
+				>
+					Need an account? Sign Up
+				</Button>
+			</div>
+		</div>
+	);
 }

apps/cli/template/with-auth/packages/client/src/main.tsx

@@ -1,7 +1,7 @@
 import {
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
+	QueryCache,
+	QueryClient,
+	QueryClientProvider,
 } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { httpBatchLink } from "@trpc/client";
@@ -13,65 +13,66 @@ import { routeTree } from "./routeTree.gen";
 import { trpc } from "./utils/trpc";
 
 const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error) => {
-      toast.error(error.message, {
-        action: {
-          label: "retry",
-          onClick: () => {
-            queryClient.invalidateQueries();
-          },
-        },
-      });
-    },
-  }),
+	queryCache: new QueryCache({
+		onError: (error) => {
+			toast.error(error.message, {
+				action: {
+					label: "retry",
+					onClick: () => {
+						queryClient.invalidateQueries();
+					},
+				},
+			});
+		},
+	}),
 });
 
 const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-      fetch(url, options) {
-        return fetch(url, {
-          ...options,
-          credentials: "include",
-        });
-      },
-    }),
-  ],
+	links: [
+		httpBatchLink({
+			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+			fetch(url, options) {
+				return fetch(url, {
+					...options,
+					credentials: "include",
+				});
+			},
+		}),
+	],
 });
 
 export const trpcQueryUtils = createTRPCQueryUtils({
-  queryClient,
-  client: trpcClient,
+	queryClient,
+	client: trpcClient,
 });
 
 const router = createRouter({
-  routeTree,
-  defaultPreload: "intent",
-  context: { trpcQueryUtils },
-  defaultPendingComponent: () => <Loader />,
-  Wrap: function WrapComponent({ children }) {
-    return (
-      <trpc.Provider client={trpcClient} queryClient={queryClient}>
-        <QueryClientProvider client={queryClient}>
-          {children}
-        </QueryClientProvider>
-      </trpc.Provider>
-    );
-  },
+	routeTree,
+	defaultPreload: "intent",
+	context: { trpcQueryUtils },
+	defaultPendingComponent: () => <Loader />,
+	Wrap: function WrapComponent({ children }) {
+		return (
+			<trpc.Provider client={trpcClient} queryClient={queryClient}>
+				<QueryClientProvider client={queryClient}>
+					{children}
+				</QueryClientProvider>
+			</trpc.Provider>
+		);
+	},
 });
 
 // Register things for typesafety
 declare module "@tanstack/react-router" {
-  interface Register {
-    router: typeof router;
-  }
+	interface Register {
+		router: typeof router;
+	}
 }
 
-const rootElement = document.getElementById("app")!;
+const rootElement = document.getElementById("app");
+if (!rootElement) throw new Error("Root element not found");
 
 if (!rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(<RouterProvider router={router} />);
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(<RouterProvider router={router} />);
 }

apps/cli/template/with-auth/packages/client/src/routes/index.tsx

@@ -1,10 +1,10 @@
-import { trpc } from "@/utils/trpc";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { trpc } from "@/utils/trpc";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { ArrowRight } from "lucide-react";
 
 export const Route = createFileRoute("/")({
-  component: HomeComponent,
+	component: HomeComponent,
 });
 
 const TITLE_TEXT = `
@@ -24,74 +24,74 @@ const TITLE_TEXT = `
  `;
 
 function HomeComponent() {
-  const healthCheck = trpc.healthCheck.useQuery();
+	const healthCheck = trpc.healthCheck.useQuery();
 
-  return (
-    <div className="container mx-auto max-w-3xl px-4 py-2">
-      <pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
-      <div className="grid gap-6">
-        <section className="rounded-lg border p-4">
-          <h2 className="mb-2 font-medium">API Status</h2>
-          <div className="flex items-center gap-2">
-            <div
-              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-            ></div>
-            <span className="text-sm text-muted-foreground">
-              {healthCheck.isLoading
-                ? "Checking..."
-                : healthCheck.data
-                  ? "Connected"
-                  : "Disconnected"}
-            </span>
-          </div>
-        </section>
+	return (
+		<div className="container mx-auto max-w-3xl px-4 py-2">
+			<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+			<div className="grid gap-6">
+				<section className="rounded-lg border p-4">
+					<h2 className="mb-2 font-medium">API Status</h2>
+					<div className="flex items-center gap-2">
+						<div
+							className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+						/>
+						<span className="text-sm text-muted-foreground">
+							{healthCheck.isLoading
+								? "Checking..."
+								: healthCheck.data
+									? "Connected"
+									: "Disconnected"}
+						</span>
+					</div>
+				</section>
 
-        <section>
-          <h2 className="mb-3 font-medium">Core Features</h2>
-          <ul className="grid grid-cols-2 gap-3">
-            <FeatureItem
-              title="Type-Safe API"
-              description="End-to-end type safety with tRPC"
-            />
-            <FeatureItem
-              title="Modern React"
-              description="TanStack Router + TanStack Query"
-            />
-            <FeatureItem
-              title="Fast Backend"
-              description="Lightweight Hono server"
-            />
-            <FeatureItem
-              title="Beautiful UI"
-              description="TailwindCSS + shadcn/ui components"
-            />
-          </ul>
-        </section>
+				<section>
+					<h2 className="mb-3 font-medium">Core Features</h2>
+					<ul className="grid grid-cols-2 gap-3">
+						<FeatureItem
+							title="Type-Safe API"
+							description="End-to-end type safety with tRPC"
+						/>
+						<FeatureItem
+							title="Modern React"
+							description="TanStack Router + TanStack Query"
+						/>
+						<FeatureItem
+							title="Fast Backend"
+							description="Lightweight Hono server"
+						/>
+						<FeatureItem
+							title="Beautiful UI"
+							description="TailwindCSS + shadcn/ui components"
+						/>
+					</ul>
+				</section>
 
-        <div className="mt-4 flex flex-col gap-4 sm:flex-row sm:items-center">
-          <Button asChild>
-            <Link to="/todos" className="flex items-center">
-              View Todo Demo
-              <ArrowRight className="ml-1 h-4 w-4" />
-            </Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="mt-4 flex flex-col gap-4 sm:flex-row sm:items-center">
+					<Button asChild>
+						<Link to="/todos" className="flex items-center">
+							View Todo Demo
+							<ArrowRight className="ml-1 h-4 w-4" />
+						</Link>
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
 }
 
 function FeatureItem({
-  title,
-  description,
+	title,
+	description,
 }: {
-  title: string;
-  description: string;
+	title: string;
+	description: string;
 }) {
-  return (
-    <li className="border-l-2 border-primary py-1 pl-3">
-      <h3 className="font-medium">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </li>
-  );
+	return (
+		<li className="border-l-2 border-primary py-1 pl-3">
+			<h3 className="font-medium">{title}</h3>
+			<p className="text-sm text-muted-foreground">{description}</p>
+		</li>
+	);
 }