Merge pull request iway1#74 from iway1/bug/boolean-optional

now uses radio for boolean fields and defaults to undefined
matthewgross · Apr 26, 2023 · f452cab · f452cab
2 parents 65249f6 + 98fba51
commit f452cab
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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(