Add validation to belongsTo/hasOne/hasMany AutoRelationshipForms to ensure that they have valid react children

Author: MillanWangGadget

packages/react/spec/auto/shadcn-defaults/inputs/form/ShadcnAutoRelationshipForm.stories.jsx

@@ -13,20 +13,24 @@ const { Label } = elements;
 
 const Component = (props) => {
   return (
-    <AutoForm {...props} action={api.widget.create}>
+    <AutoForm action={api.widget.create} {...props}>
       <div className="flex flex-col gap-4">
         <div>
-          <AutoBelongsToForm field="section" primaryLabel="name"
+          <AutoBelongsToForm
+            field="section"
+            primaryLabel="name"
             renderSelectedRecord={(record) => <Label>this is a custom belongsTo render for {record.name}</Label>}
           >
             <AutoInput field="name" />
           </AutoBelongsToForm>
         </div>
         <SubmitResultBanner />
-        <AutoHasOneForm field="doodad" primaryLabel="name"
-          secondaryLabel={(record) => `${record.weight ?? 'N/A'} (${record.active ?? 'N/A'})`} tertiaryLabel="size"
+        <AutoHasOneForm
+          field="doodad"
+          primaryLabel="name"
+          secondaryLabel={(record) => `${record.weight ?? "N/A"} (${record.active ?? "N/A"})`}
+          tertiaryLabel="size"
         >
-
           <div className="flex flex-col gap-4">
             <AutoInput field="name" />
             <AutoInput field="weight" />

packages/react/src/auto/hooks/useRequiredChildComponentsValidator.tsx

@@ -0,0 +1,7 @@
+import { Children } from "react";
+
+export function useRequiredChildComponentsValidator(props: { children?: React.ReactNode }, componentName: string) {
+  if (!props.children || Children.count(props.children) === 0) {
+    throw new Error(`"${componentName}" requires child components`);
+  }
+}

packages/react/src/auto/polaris/inputs/relationships/PolarisAutoHasManyForm.tsx

@@ -6,6 +6,7 @@ import { autoRelationshipForm } from "../../../AutoInput.js";
 import { RelationshipContext, useAutoRelationship, useRelationshipContext } from "../../../hooks/useAutoRelationship.js";
 import { useHasManyController } from "../../../hooks/useHasManyController.js";
 import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
+import { useRequiredChildComponentsValidator } from "../../../hooks/useRequiredChildComponentsValidator.js";
 import type { OptionLabel } from "../../../interfaces/AutoRelationshipInputProps.js";
 import { renderOptionLabel } from "./utils.js";
 
@@ -18,6 +19,7 @@ export const PolarisAutoHasManyForm = autoRelationshipForm(
     secondaryLabel?: OptionLabel;
     tertiaryLabel?: OptionLabel;
   }) => {
+    useRequiredChildComponentsValidator(props, "AutoHasManyForm");
     const { metadata } = useAutoRelationship({ field: props.field });
     const { getValues } = useFormContext();
 

packages/react/src/useBelongsToForm.ts

@@ -1,17 +1,20 @@
+import { useEffect, useState } from "react";
 import { useAutoRelationship, useRelationshipContext } from "./auto/hooks/useAutoRelationship.js";
 import { useBelongsToController } from "./auto/hooks/useBelongsToController.js";
 import { getRecordAsOption, useOptionLabelForField } from "./auto/hooks/useRelatedModel.js";
+import { useRequiredChildComponentsValidator } from "./auto/hooks/useRequiredChildComponentsValidator.js";
 import type { OptionLabel } from "./auto/interfaces/AutoRelationshipInputProps.js";
 import { useFormContext } from "./useActionForm.js";
 import { get } from "./utils.js";
 
-import { useEffect, useState } from "react";
 export const useBelongsToForm = (props: {
   field: string;
+  children: React.ReactNode;
   primaryLabel?: OptionLabel;
   secondaryLabel?: OptionLabel;
   tertiaryLabel?: OptionLabel;
 }) => {
+  useRequiredChildComponentsValidator(props, "AutoBelongsToForm");
   const { field } = props;
   const { path, metadata } = useAutoRelationship({ field });
   const {

packages/react/src/useHasOneForm.ts

@@ -1,6 +1,7 @@
 import { useAutoRelationship, useRelationshipContext } from "./auto/hooks/useAutoRelationship.js";
 import { useHasOneController } from "./auto/hooks/useHasOneController.js";
 import { getRecordAsOption, useOptionLabelForField } from "./auto/hooks/useRelatedModel.js";
+import { useRequiredChildComponentsValidator } from "./auto/hooks/useRequiredChildComponentsValidator.js";
 import type { OptionLabel } from "./auto/interfaces/AutoRelationshipInputProps.js";
 import { useFormContext } from "./useActionForm.js";
 import { get } from "./utils.js";
@@ -9,10 +10,12 @@ import { useEffect, useState } from "react";
 
 export const useHasOneForm = (props: {
   field: string;
+  children: React.ReactNode;
   primaryLabel?: OptionLabel;
   secondaryLabel?: OptionLabel;
   tertiaryLabel?: OptionLabel;
 }) => {
+  useRequiredChildComponentsValidator(props, "AutoHasOneForm");
   const { path, metadata } = useAutoRelationship({ field: props.field });
   const {
     setValue,