From 98fba514ebe908d8b70276bd7deee3bd7cf1864b Mon Sep 17 00:00:00 2001
From: Isaac Way <iway1@vols.utk.edu>
Date: Tue, 25 Apr 2023 22:11:00 -0500
Subject: [PATCH] now uses radio for boolean fields and defaults to undefined

---
 packages/dev-app/src/pages/index.tsx          |  2 +-
 .../react-app/components/form/FormLabel.tsx   |  5 ++++
 .../form/ProcedureForm/DescriptionSection.tsx |  3 ++-
 .../components/form/fields/BooleanField.tsx   | 24 +++++++++++++------
 .../src/react-app/components/form/utils.ts    |  2 +-
 5 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 packages/trpc-panel/src/react-app/components/form/FormLabel.tsx

diff --git a/packages/dev-app/src/pages/index.tsx b/packages/dev-app/src/pages/index.tsx
index d121fd3..b95018a 100644
--- a/packages/dev-app/src/pages/index.tsx
+++ b/packages/dev-app/src/pages/index.tsx
@@ -14,7 +14,7 @@ const App = dynamic(
       <RootComponent
         rootRouter={parse}
         options={{
-          url: "http://localhost:3000/api/trpc",
+          url: "http://localhost:3001/api/trpc",
           transformer: "superjson",
         }}
         trpc={trpc}
diff --git a/packages/trpc-panel/src/react-app/components/form/FormLabel.tsx b/packages/trpc-panel/src/react-app/components/form/FormLabel.tsx
new file mode 100644
index 0000000..57cefc0
--- /dev/null
+++ b/packages/trpc-panel/src/react-app/components/form/FormLabel.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export function FormLabel({ children }: { children: string }) {
+  return <span className="text-md text-neutralText font-bold">{children}</span>;
+}
diff --git a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx
index 6bd07da..0960d29 100644
--- a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx
+++ b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx
@@ -1,4 +1,5 @@
 import type { ProcedureExtraData } from "@src/parse/parseProcedure";
+import { FormLabel } from "@src/react-app/components/form/FormLabel";
 import { FormSection } from "@src/react-app/components/form/ProcedureForm/FormSection";
 import React, { ReactNode } from "react";
 
@@ -55,7 +56,7 @@ function DocumentationSubsection({
 }) {
   return (
     <div className="flex flex-col space-y-2">
-      <span className="text-md text-neutralText font-bold">{title}</span>
+      <FormLabel>{title}</FormLabel>ƒ
       <span className="text-sm text-gray-500">{children}</span>
     </div>
   );
diff --git a/packages/trpc-panel/src/react-app/components/form/fields/BooleanField.tsx b/packages/trpc-panel/src/react-app/components/form/fields/BooleanField.tsx
index 2160a8a..c6b0246 100644
--- a/packages/trpc-panel/src/react-app/components/form/fields/BooleanField.tsx
+++ b/packages/trpc-panel/src/react-app/components/form/fields/BooleanField.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Control, useController } from "react-hook-form";
 import type { ParsedInputNode } from "@src/parse/parseNodeTypes";
 import { BaseCheckboxField } from "@src/react-app/components/form/fields/base/BaseCheckboxField";
+import { FormLabel } from "@src/react-app/components/form/FormLabel";
 
 export function BooleanField({
   name,
@@ -17,12 +18,21 @@ export function BooleanField({
   const { field, fieldState } = useController({ name, control });
   const path = node.path.join(".");
   return (
-    <BaseCheckboxField
-      fieldId={path}
-      label={label}
-      onChange={field.onChange}
-      value={field.value}
-      errorMessage={fieldState.error?.message}
-    />
+    <>
+      <FormLabel>{label}</FormLabel>
+      <BaseCheckboxField
+        fieldId={path + "false"}
+        label={"False"}
+        onChange={() => field.onChange(false)}
+        value={field.value === false}
+      />
+      <BaseCheckboxField
+        fieldId={path + "true"}
+        label={"True"}
+        onChange={() => field.onChange(true)}
+        value={field.value === true}
+        errorMessage={fieldState.error?.message}
+      />
+    </>
   );
 }
diff --git a/packages/trpc-panel/src/react-app/components/form/utils.ts b/packages/trpc-panel/src/react-app/components/form/utils.ts
index 6aba940..94c6302 100644
--- a/packages/trpc-panel/src/react-app/components/form/utils.ts
+++ b/packages/trpc-panel/src/react-app/components/form/utils.ts
@@ -6,7 +6,7 @@ export function defaultFormValuesForNode(node: ParsedInputNode): any {
     case "array":
       return [];
     case "boolean":
-      return false;
+      return;
     case "discriminated-union":
       const firstValue = node.discriminatedUnionValues[0]!;
       return defaultFormValuesForNode(