feat: add UseAssistantFormProps type (#261)

Yonom · Jun 20, 2024 · 86d4f7f · 86d4f7f
1 parent a6769d5
commit 86d4f7f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 25 deletions.
diff --git a/.changeset/ten-brooms-rhyme.md b/.changeset/ten-brooms-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-hook-form": patch
+---
+
+feat: add UseAssistantFormProps type
diff --git a/apps/www/components/docs/ParametersTable.tsx b/apps/www/components/docs/ParametersTable.tsx
@@ -5,10 +5,7 @@ type ParameterDef = {
   type: string;
   description: string;
   required?: boolean;
-  children?: Array<{
-    type: string;
-    parameters: Array<ParameterDef>;
-  }>;
+  children?: Array<ParametersTableProps>;
 };
 
 type ParameterProps = {
@@ -35,36 +32,52 @@ const Parameter: FC<ParameterProps> = ({ parameter, isLast }) => {
         <p className="text-foreground/70 text-sm">{parameter.description}</p>
       </div>
       {parameter.children?.map((property) => (
-        <div
-          key={property.type}
-          className="relative m-2 flex flex-col rounded-lg border px-3"
-        >
-          {!!property.type && (
-            <h3 className="bg-secondary p-2 font-mono text-foreground/70 text-xs">
-              {property.type}
-            </h3>
-          )}
-          <ParametersTable parameters={property.parameters} />
-        </div>
+        <ParametersBox key={property.type} {...property} />
       ))}
     </div>
   );
 };
 
+const ParametersList = ({
+  parameters,
+}: { parameters: Array<ParameterDef> }) => {
+  return parameters.map((parameter, idx) => (
+    <Parameter
+      key={parameter.name}
+      parameter={parameter}
+      isLast={idx === parameters.length - 1}
+    />
+  ));
+};
+const ParametersBox: FC<ParametersTableProps> = ({ type, parameters }) => {
+  return (
+    <div className="relative m-2 mb-0 flex flex-col rounded-lg border">
+      {!!type && (
+        <h3 className="-translate-y-1/2 absolute right-3 z-10 rounded-md border bg-background px-4 py-2 font-mono font-semibold text-foreground/70 text-xs">
+          {type}
+        </h3>
+      )}
+      <ParametersList parameters={parameters} />
+    </div>
+  );
+};
+
 type ParametersTableProps = {
+  type?: string;
   parameters: Array<ParameterDef>;
 };
 
-export const ParametersTable: FC<ParametersTableProps> = ({ parameters }) => {
+export const ParametersTable: FC<ParametersTableProps> = ({
+  type,
+  parameters,
+}) => {
   return (
     <div className="-mx-3">
-      {parameters.map((parameter, idx) => (
-        <Parameter
-          key={parameter.name}
-          parameter={parameter}
-          isLast={idx === parameters.length - 1}
-        />
-      ))}
+      {type ? (
+        <ParametersBox type={type} parameters={parameters} />
+      ) : (
+        <ParametersList parameters={parameters} />
+      )}
     </div>
   );
 };
diff --git a/apps/www/pages/reference/integrations/react-hook-form.mdx b/apps/www/pages/reference/integrations/react-hook-form.mdx
@@ -24,6 +24,7 @@ Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/reac
 #### Properties
 
 <ParametersTable
+  type="UseAssistantFormProps"
   parameters={[
     {
       name: "assistant",

diff --git a/packages/react-hook-form/src/index.ts b/packages/react-hook-form/src/index.ts
@@ -1,2 +1,5 @@
-export { useAssistantForm } from "./useAssistantForm";
+export {
+  useAssistantForm,
+  type UseAssistantFormProps,
+} from "./useAssistantForm";
 export { formTools } from "./formTools";
diff --git a/packages/react-hook-form/src/useAssistantForm.tsx b/packages/react-hook-form/src/useAssistantForm.tsx
@@ -16,7 +16,7 @@ import {
 import type { z } from "zod";
 import { formTools } from "./formTools";
 
-type UseAssistantFormProps<
+export type UseAssistantFormProps<
   TFieldValues extends FieldValues,
   TContext,
 > = UseFormProps<TFieldValues, TContext> & {