Merge pull request #752 from gadget-inc/mill/removeTitleAndSubmitLabelFromFormWIthChildrenType

Updated AutoForm type to have a type error when given `title` or `submitLabel` when form has children

Author: MillanWangGadget

packages/react/src/auto/AutoForm.ts

@@ -21,14 +21,30 @@ import {
 import { useFieldsFromChildComponents } from "./AutoFormContext.js";
 import { isAutoInput } from "./AutoInput.js";
 
+/** When the AutoForm does not have children, these properties are available to control the rendering of the form */
+type AutoFormPropsWithoutChildren = {
+  children?: never;
+
+  /** The title at the top of the form. False to omit */
+  title?: string | false;
+
+  /** The label to use for the submit button at the bottom of the form */
+  submitLabel?: ReactNode;
+};
+
+type AutoFormPropsWithChildren = {
+  /** Custom components to render within the form. Using this will override all default field rendering.   */
+  children?: ReactNode;
+};
+
 /** The props that any <AutoForm/> component accepts */
 export type AutoFormProps<
   GivenOptions extends OptionsType,
   SchemaT,
   ActionFunc extends ActionFunction<GivenOptions, any, any, SchemaT, any> | GlobalActionFunction<any>,
   ExtraFormVariables extends FieldValues = Record<string, unknown>,
   DefaultValues = ActionFunc["variablesType"] & ExtraFormVariables
-> = {
+> = (AutoFormPropsWithChildren | AutoFormPropsWithoutChildren) & {
   /** Which action this fom will run on submit */
   action: ActionFunc;
   /** A record for this form to act on */
@@ -39,32 +55,26 @@ export type AutoFormProps<
   exclude?: string[];
   /** A set of field values to pre-populate the form with on load. Only applies to create forms. */
   defaultValues?: DefaultValues;
-  /** The label to use for the submit button at the bottom of the form */
-  submitLabel?: ReactNode;
   /** What to show the user once the form has been submitted successfully */
   successContent?: ReactNode;
-  /** The title at the top of the form. False to omit */
-  title?: string | false;
   /** Selection object to pass to the form to retrieve existing values. This will override the default selection based on included fields */
   select?: GivenOptions["select"];
   /** Called when the form submission completes successfully on the backend */
   onSuccess?: (record: UseActionFormHookStateData<ActionFunc>) => void;
   /** Called when the form submission errors before sending, during the API call, or if the API call returns an error. */
   onFailure?: (error: Error | FieldErrors<ActionFunc["variablesType"]>) => void;
-  /** Custom components to render within the form. Using this will override all default field rendering.   */
-  children?: ReactNode;
   /** Enable debug logging for this form */
   debug?: boolean;
 } & (ActionFunc extends AnyActionWithId<GivenOptions>
-  ? {
-      /**
-       * The record identifier to run this action on, if it already exists.
-       * Should be undefined for create actions, or a record ID (or finder) for update / etc actions
-       **/
-      findBy?: RecordIdentifier;
-    }
-  : // eslint-disable-next-line @typescript-eslint/ban-types
-    {});
+    ? {
+        /**
+         * The record identifier to run this action on, if it already exists.
+         * Should be undefined for create actions, or a record ID (or finder) for update / etc actions
+         **/
+        findBy?: RecordIdentifier;
+      }
+    : // eslint-disable-next-line @typescript-eslint/ban-types
+      {});
 
 /**
  * React hook for getting the validation schema for a list of fields
@@ -218,7 +228,9 @@ export const useAutoForm = <
 
   const { hasCustomFormChildren, fieldSet, registerFields } = useFieldsFromChildComponents();
   const hasRegisteredFieldsFromChildren = hasCustomFormChildren && fieldSet.size > 0;
-  const registeredFieldsFromChildren = hasCustomFormChildren ? extractPathsFromChildren(props.children) : [];
+  const registeredFieldsFromChildren = hasCustomFormChildren
+    ? extractPathsFromChildren("children" in props ? props.children : undefined)
+    : [];
 
   useEffect(() => {
     registerFields(registeredFieldsFromChildren);

packages/react/src/auto/AutoFormActionValidators.ts

@@ -36,7 +36,7 @@ export const validateAutoFormProps = (props: Parameters<typeof useAutoForm>[0])
     throw new Error(InvalidActionErrorMessage);
   }
 
-  if (props.children) {
+  if ("children" in props && props.children) {
     if (props.include) {
       throw new Error(`AutoForm components with children cannot use the include option`);
     }

packages/react/src/auto/polaris/PolarisAutoForm.tsx

@@ -79,7 +79,7 @@ const PolarisAutoFormComponent = <
     originalFormMethods,
   } = useAutoForm(props);
 
-  const formTitle = props.title === undefined ? humanizeCamelCase(action.operationName) : props.title;
+  const formTitle = "title" in props && props.title !== undefined ? props.title : humanizeCamelCase(action.operationName);
 
   if (props.successContent && isSubmitSuccessful) {
     return props.successContent;
@@ -124,7 +124,7 @@ const PolarisAutoFormComponent = <
             <PolarisAutoInput field={metadata.apiIdentifier} key={metadata.apiIdentifier} />
           ))}
           <div>
-            <PolarisAutoSubmit>{props.submitLabel ?? "Submit"} </PolarisAutoSubmit>
+            <PolarisAutoSubmit>{"submitLabel" in props && props.submitLabel ? props.submitLabel : "Submit"} </PolarisAutoSubmit>
           </div>
         </>
       )}

packages/react/src/auto/shadcn/ShadcnAutoForm.tsx

@@ -98,17 +98,6 @@ export const makeAutoForm = <Elements extends ShadcnElements>({
         <AutoFormInner
           key={componentKey}
           {...(props as AutoFormProps<GivenOptions, SchemaT, ActionFunc> & Omit<Partial<FormProps>, "action"> & { findBy: any })}
-          elements={{
-            Form,
-            Input,
-            Button,
-            Alert,
-            Skeleton,
-            AlertTitle,
-            AlertDescription,
-            ShadcnAutoInput: AutoInput,
-            ShadcnAutoSubmit: AutoSubmit,
-          }}
         />
       </AutoFormFieldsFromChildComponentsProvider>
     );
@@ -118,18 +107,13 @@ export const makeAutoForm = <Elements extends ShadcnElements>({
     GivenOptions extends OptionsType,
     SchemaT,
     ActionFunc extends ActionFunction<GivenOptions, any, any, SchemaT, any>
-  >(
-    props: AutoFormProps<GivenOptions, SchemaT, ActionFunc> & {
-      elements: ShadcnElements;
-    } & ComponentProps<any>
-  ) {
+  >(props: AutoFormProps<GivenOptions, SchemaT, ActionFunc> & ComponentProps<typeof Form>) {
     const {
       record: _record,
       action,
       findBy,
       ...rest
     } = props as AutoFormProps<GivenOptions, SchemaT, ActionFunc> & Omit<Partial<FormProps>, "action"> & { findBy: any };
-    const { Form, Skeleton, ShadcnAutoInput, ShadcnAutoSubmit } = props.elements;
 
     const {
       metadata,
@@ -144,7 +128,7 @@ export const makeAutoForm = <Elements extends ShadcnElements>({
       isLoading,
     } = useAutoForm(props);
 
-    const formTitle = props.title === undefined ? humanizeCamelCase(action.operationName) : props.title;
+    const formTitle = "title" in props && props.title !== undefined ? props.title : humanizeCamelCase(action.operationName);
 
     if (props.successContent && isSubmitSuccessful) {
       return props.successContent;
@@ -182,9 +166,9 @@ export const makeAutoForm = <Elements extends ShadcnElements>({
         {!metadataError && (
           <>
             {fields.map(({ metadata }) => (
-              <ShadcnAutoInput field={metadata.apiIdentifier} key={metadata.apiIdentifier} />
+              <AutoInput field={metadata.apiIdentifier} key={metadata.apiIdentifier} />
             ))}
-            <ShadcnAutoSubmit>{props.submitLabel ?? "Submit"}</ShadcnAutoSubmit>
+            <AutoSubmit>{"submitLabel" in props && props.submitLabel ? props.submitLabel : "Submit"}</AutoSubmit>
           </>
         )}
       </>