Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

Add TRPC UI dependency and implement FormDebug component for development debugging

Browse source
This commit is contained in:
Marco Pedone 2025-08-08 09:40:02 +02:00
parent cb6e0cee40
commit 9778df27b0
3 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/infoalloggi/package.json
View file

@ -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"
},

19
apps/infoalloggi/src/components/custom_ui/form.tsx
View file

@ -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,
};

28
apps/infoalloggi/src/pages/api/panel.ts
View file

@ -1,19 +1,17 @@
import type { NextApiRequest, NextApiResponse } from "next";
// import { renderTrpcPanel } from "trpc-ui";
// import { env } from "~/env.mjs";
// import { appRouter } from "~/server/api/root";
import { appRouter } from "~/server/api/root";
import { env } from "~/env.mjs";
// 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",
}),
);
}