From be1840d7ec1148e4fd3ef78f697737af9f9367e6 Mon Sep 17 00:00:00 2001
From: iway1 <iway1@vols.utk.edu>
Date: Sat, 10 Dec 2022 16:54:01 -0600
Subject: [PATCH] Adds format support for strings (url, uuid, email)

---
 packages/test-app/src/server.ts                              | 5 +++++
 packages/trpc-panel/package.json                             | 1 +
 .../src/react-app/components/form/ProcedureForm/index.tsx    | 5 ++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/test-app/src/server.ts b/packages/test-app/src/server.ts
index 00a5e1e..4bc886f 100644
--- a/packages/test-app/src/server.ts
+++ b/packages/test-app/src/server.ts
@@ -215,6 +215,11 @@ const router = t.router({
             .query(() => {
                 return "It's an input";
             }),
+        emailTextInput: t.procedure
+            .input(z.object({ email: z.string().email("Bad email") }))
+            .query(({ input }) => {
+                return "It's good";
+            }),
     }),
 
     anErrorThrowingRoute: t.procedure
diff --git a/packages/trpc-panel/package.json b/packages/trpc-panel/package.json
index 26d9487..b09a20a 100644
--- a/packages/trpc-panel/package.json
+++ b/packages/trpc-panel/package.json
@@ -79,6 +79,7 @@
   },
   "dependencies": {
     "@rollup/plugin-terser": "^0.2.0",
+    "ajv-formats": "^2.1.1",
     "fs": "^0.0.1-security",
     "path": "^0.12.7",
     "rollup-plugin-terser": "^7.0.2",
diff --git a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx
index fdad60b..af3837c 100644
--- a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx
+++ b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx
@@ -17,6 +17,7 @@ import { RequestResult } from "./RequestResult";
 import { CollapsableSection } from "src/react-app/components/CollapsableSection";
 import { CloseIcon } from "src/react-app/components/icons/CloseIcon";
 import { ObjectField } from "src/react-app/components/form/fields/ObjectField";
+import { fullFormats } from "ajv-formats/dist/formats";
 
 const TRPCErrorSchema = z.object({
     shape: z.object({
@@ -90,7 +91,9 @@ export function ProcedureForm({
         reset: resetForm,
         handleSubmit,
     } = useForm({
-        resolver: ajvResolver(procedure.inputSchema as any),
+        resolver: ajvResolver(procedure.inputSchema as any, {
+            formats: fullFormats,
+        }),
         defaultValues: defaultFormValuesForNode(procedure.node),
     });