Add TRPC UI dependency and implement FormDebug component for development debugging

apps/infoalloggi/package.json

@@ -139,6 +139,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-classnames": "^0.8.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "trpc-ui": "https://gitpkg.vercel.app/jrhe/trpc-ui/packages/trpc-ui?feature/zod-v4-support&scripts.postinstall=%26%26%20npm%20install%20pnpm%20%26%26%20npm%20install%20--ignore-scripts%20%26%26%20npm%20run%20build",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.0"
   },

apps/infoalloggi/src/components/custom_ui/form.tsx

@@ -12,6 +12,7 @@ import {
 
 import { cn } from "src/lib/utils";
 import { Label } from "src/components/ui/label";
+import { env } from "~/env.mjs";
 
 const Form = FormProvider;
 
@@ -171,6 +172,23 @@ const FormMessage = React.forwardRef<
 });
 FormMessage.displayName = "FormMessage";
 
+const FormDebug = React.forwardRef<
+  React.ElementType,
+  React.HTMLAttributes<HTMLDivElement>
+>(async () => {
+  if (env.NODE_ENV !== "development") {
+    return null;
+  }
+  const { control, formState } = useFormContext();
+  const devtools = await import("@hookform/devtools");
+
+  if (Object.keys(formState.errors).length > 0) {
+    console.error("errors", formState.errors);
+  }
+  return <devtools.DevTool control={control} />;
+});
+FormDebug.displayName = "FormDebug";
+
 export {
   useFormField,
   Form,
@@ -180,4 +198,5 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+  FormDebug,
 };

apps/infoalloggi/src/pages/api/panel.ts

@@ -1,19 +1,17 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-// import { renderTrpcPanel } from "trpc-ui";
+import { appRouter } from "~/server/api/root";
-// import { env } from "~/env.mjs";
+import { env } from "~/env.mjs";
-// import { appRouter } from "~/server/api/root";
 
-// export default async function handler(_: NextApiRequest, res: NextApiResponse) {
-//   if (!env.NEXT_PUBLIC_BASE_URL.includes("localhost")) {
-//     return res.status(404).send("Not Found");
-//   }
-//   res.status(200).send(
-//     renderTrpcPanel(appRouter, {
-//       url: `${env.NEXT_PUBLIC_BASE_URL}/api/trpc`,
-//       transformer: "superjson",
-//     }),
-//   );
-// }
 export default async function handler(_: NextApiRequest, res: NextApiResponse) {
-  res.status(404).send("Not Found");
+  if (env.NODE_ENV !== "development") {
+    return res.status(404).send("Not Found");
+  }
+
+  const { renderTrpcPanel } = await import("trpc-ui");
+  res.status(200).send(
+    renderTrpcPanel(appRouter, {
+      url: "/api/trpc",
+      transformer: "superjson",
+    }),
+  );
 }