Auto fill inputs (#47)

packages/trpc-ui/package.json

@@ -95,6 +95,7 @@
     "zustand": "^4.1.5"
   },
   "dependencies": {
+    "@stoplight/json-schema-sampler": "^0.3.0",
     "@textea/json-viewer": "^3.0.0",
     "clsx": "^2.1.1",
     "fuzzysort": "^2.0.4",

packages/trpc-ui/src/parse/parseRouter.ts

@@ -5,6 +5,7 @@ import type { zodToJsonSchema } from "zod-to-json-schema";
 import { logParseError } from "./parseErrorLogs";
 import { type ParsedProcedure, parseProcedure } from "./parseProcedure";
 
+// TODO this should be more specific, as it hurts the type safety lower down
 export type JSON7SchemaType = ReturnType<typeof zodToJsonSchema>;
 
 export type ProcedureType = "query" | "mutation" | "subscription";

packages/trpc-ui/src/react-app/components/form/ProcedureForm/index.tsx

@@ -11,13 +11,15 @@ import { CloseIcon } from "@src/react-app/components/icons/CloseIcon";
 import { ToggleJsonIcon } from "@src/react-app/components/icons/ToggleJsonIcon";
 import { trpc } from "@src/react-app/trpc";
 import type { RenderOptions } from "@src/render";
+import { sample } from "@stoplight/json-schema-sampler";
 import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
 import { fullFormats } from "ajv-formats/dist/formats";
 import React, { useEffect, useRef, useState } from "react";
 import { type Control, useForm, useFormState } from "react-hook-form";
 import getSize from "string-byte-length";
 import SuperJson from "superjson";
 import { z } from "zod";
+import { AutoFillIcon } from "../../icons/AutoFillIcon";
 import JSONEditor from "../JSONEditor";
 import { ErrorDisplay as ErrorComponent } from "./Error";
 import { FormSection } from "./FormSection";
@@ -223,8 +225,18 @@ export function ProcedureForm({
             <FormSection
               title="Input"
               topRightElement={
-                <div className="flex">
+                <div className="flex space-x-1">
                   <XButton control={control} reset={reset} />
+                  <div className="h-6 w-6">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setValue("vals", sample(procedure.inputSchema));
+                      }}
+                    >
+                      <AutoFillIcon className="h-6 w-6" />
+                    </button>
+                  </div>
                   <ToggleRawInput onClick={toggleRawInput} />
                 </div>
               }
@@ -254,7 +266,6 @@ export function ProcedureForm({
                 ) : (
                   <Field inputNode={procedure.node} control={control} />
                 ))}
-
               <ProcedureFormButton
                 text={`Execute ${name}`}
                 colorScheme={"neutral"}
@@ -319,12 +330,12 @@ function ToggleRawInput({ onClick }: { onClick: () => void }) {
 }
 
 function wrapJsonSchema(jsonSchema: any) {
-  jsonSchema.$schema = undefined;
+  const { $schema, ...rest } = jsonSchema;
 
   return {
     type: "object",
     properties: {
-      [ROOT_VALS_PROPERTY_NAME]: jsonSchema,
+      [ROOT_VALS_PROPERTY_NAME]: rest,
     },
     required: [],
     additionalProperties: false,

packages/trpc-ui/src/react-app/components/icons/AutoFillIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+// From: https://lucide.dev/icons/zap
+export function AutoFillIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <title>Auto Fill</title>
+      <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
+    </svg>
+  );
+}