Merge pull request #100 from workfloworchestrator/1904-submit-empty-step

1904 Prevents uncontrolled fields from being added to form state

Author: DutchBen

frontend/apps/example/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.1",
     "private": true,
     "scripts": {
-        "dev": "next dev",
+        "dev": "next dev -H 127.0.0.1",
         "build": "next build",
         "start": "next start",
         "test": "jest --passWithNoTests",

frontend/packages/pydantic-forms/src/components/componentMatcher.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useFieldArray } from 'react-hook-form';
 
 import { usePydanticFormContext } from '@/core';
-import { fieldToComponentMatcher } from '@/core';
+import { fieldToComponentMatcher } from '@/core/helper';
 import { PydanticFormElementProps } from '@/types';
 import { itemizeArrayItem } from '@/utils';
 

frontend/packages/pydantic-forms/src/components/fields/ArrayField.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { usePydanticFormContext } from '@/core';
-import { componentsMatcher } from '@/core';
+import { getPydanticFormComponents } from '@/core/helper';
 import { PydanticFormElementProps } from '@/types';
 
 import { RenderFields } from '../render';
@@ -10,8 +10,7 @@ export const ObjectField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
     const { config } = usePydanticFormContext();
-
-    const components = componentsMatcher(
+    const components = getPydanticFormComponents(
         pydanticFormField.properties || {},
         config?.componentMatcher,
     );

frontend/packages/pydantic-forms/src/components/fields/ObjectField.tsx

@@ -9,9 +9,9 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { componentsMatcher } from '@/components/componentMatcher';
 import Footer from '@/components/form/Footer';
 import RenderFormErrors from '@/components/render/RenderFormErrors';
+import { getPydanticFormComponents } from '@/core/helper';
 import { PydanticFormComponents, PydanticFormContextProps } from '@/types';
 
 import { FormRenderer } from './FormRenderer';
@@ -30,11 +30,13 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         skipSuccessNotice,
         loadingComponent,
     } = contextProps;
-    const {
-        formRenderer,
-        footerRenderer,
-        componentMatcher: customComponentMatcher,
-    } = config || {};
+    const { formRenderer, footerRenderer } = config || {};
+
+    const pydanticFormComponents: PydanticFormComponents =
+        getPydanticFormComponents(
+            pydanticFormSchema?.properties || {},
+            config?.componentMatcher,
+        );
 
     const t = useTranslations('renderForm');
 
@@ -59,11 +61,6 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
     const Renderer = formRenderer ?? FormRenderer;
     const FooterRenderer = footerRenderer ?? Footer;
 
-    const pydanticFormComponents: PydanticFormComponents = componentsMatcher(
-        pydanticFormSchema.properties,
-        customComponentMatcher,
-    );
-
     return (
         <form action={''} onSubmit={submitForm}>
             {title !== false &&

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -8,7 +8,6 @@
 import React, {
     createContext,
     useCallback,
-    useContext,
     useEffect,
     useRef,
     useState,
@@ -164,6 +163,7 @@ function PydanticFormContextProvider({
         );
 
     const rhfRef = useRef<ReturnType<typeof useForm>>();
+
     // build validation rules based on custom schema
     const resolver = useGetZodValidator(
         pydanticFormSchema,
@@ -251,13 +251,17 @@ function PydanticFormContextProvider({
             return;
         }
 
-        const initialData = getFormValuesFromFieldOrLabels(pydanticFormSchema, {
-            ...formLabels?.data,
-            ...customData,
-        });
+        const initialData = getFormValuesFromFieldOrLabels(
+            pydanticFormSchema,
+            {
+                ...formLabels?.data,
+                ...customData,
+            },
+            componentMatcher,
+        );
 
         rhf.reset(initialData);
-    }, [customData, formLabels, pydanticFormSchema, rhf]);
+    }, [customData, formLabels, pydanticFormSchema, rhf, componentMatcher]);
 
     // a useeffect for filling data whenever formdefinition or labels update
     useEffect(() => {
@@ -398,16 +402,4 @@ function PydanticFormContextProvider({
     );
 }
 
-export function usePydanticFormContext() {
-    const context = useContext(PydanticFormContext);
-
-    if (!context) {
-        throw new Error(
-            'usePydanticFormContext must be used within a PydanticFormProvider',
-        );
-    }
-
-    return context;
-}
-
 export default PydanticFormContextProvider;

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Controller } from 'react-hook-form';
 
 import { FieldWrap } from '@/components/fields';
+import { usePydanticFormContext } from '@/core/hooks';
 import type { PydanticFormControlledElement, PydanticFormField } from '@/types';
 
-import { usePydanticFormContext } from './PydanticFormContextProvider';
-
 export const WrapFieldElement = ({
     PydanticFormControlledElement,
     pydanticFormField,

frontend/packages/pydantic-forms/src/core/WrapFieldElement.tsx

@@ -5,16 +5,24 @@
  */
 import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 
+import { z } from 'zod';
+
+import defaultComponentMatchers from '@/components/defaultComponentMatchers';
+import { TextField } from '@/components/fields';
 import {
+    ElementMatch,
     Properties,
+    PydanticComponentMatcher,
     PydanticFormApiResponse,
+    PydanticFormComponents,
     PydanticFormField,
     PydanticFormFieldAttributes,
     PydanticFormFieldOption,
     PydanticFormFieldType,
     PydanticFormFieldValidations,
     PydanticFormPropertySchemaParsed,
     PydanticFormSchema,
+    PydanticFormsContextConfig,
 } from '@/types';
 
 /**
@@ -250,20 +258,28 @@ export const isNullableField = (field: PydanticFormField) =>
 export const getFormValuesFromFieldOrLabels = (
     pydanticFormSchema: PydanticFormSchema,
     labelData?: Record<string, string>,
+    componentMatcher?: PydanticFormsContextConfig['componentMatcher'],
 ) => {
     const fieldValues: Record<string, string> = {};
 
     const includedFields: string[] = [];
 
-    for (const [, field] of Object.entries(pydanticFormSchema.properties)) {
-        includedFields.push(field.id);
+    const pydanticFormComponents = getPydanticFormComponents(
+        pydanticFormSchema.properties,
+        componentMatcher,
+    );
 
-        if (typeof field.default === 'undefined') {
-            continue;
-        }
+    pydanticFormComponents.forEach((component) => {
+        const { Element, pydanticFormField } = component;
 
-        fieldValues[field.id] = field.default;
-    }
+        if (Element.isControlledElement) {
+            includedFields.push(pydanticFormField.id);
+
+            if (typeof pydanticFormField.default !== 'undefined') {
+                fieldValues[pydanticFormField.id] = pydanticFormField.default;
+            }
+        }
+    });
 
     if (labelData) {
         for (const fieldId in labelData) {
@@ -324,3 +340,74 @@ export const rhfTriggerValidationsOnChange =
         // https://github.com/react-hook-form/react-hook-form/issues/10832
         rhf.trigger(field.name);
     };
+
+export const getMatcher = (
+    customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],
+) => {
+    const componentMatchers = customComponentMatcher
+        ? customComponentMatcher(defaultComponentMatchers)
+        : defaultComponentMatchers;
+
+    return (field: PydanticFormField): PydanticComponentMatcher | undefined => {
+        return componentMatchers.find(({ matcher }) => {
+            return matcher(field);
+        });
+    };
+};
+
+export const getClientSideValidationRule = (
+    field: PydanticFormField | undefined,
+    rhf?: ReturnType<typeof useForm>,
+    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+) => {
+    if (!field) return z.unknown();
+    const matcher = getMatcher(customComponentMatcher);
+
+    const componentMatch = matcher(field);
+
+    let validationRule = componentMatch?.validator?.(field, rhf) ?? z.unknown();
+
+    if (!field.required) {
+        validationRule = validationRule.optional();
+    }
+
+    if (field.validations.isNullable) {
+        validationRule = validationRule.nullable();
+    }
+
+    return validationRule;
+};
+
+const defaultComponent: ElementMatch = {
+    Element: TextField,
+    isControlledElement: true,
+};
+
+export const fieldToComponentMatcher = (
+    pydanticFormField: PydanticFormField,
+    customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],
+) => {
+    const matcher = getMatcher(customComponentMatcher);
+    const matchedComponent = matcher(pydanticFormField);
+
+    const ElementMatch: ElementMatch = matchedComponent
+        ? matchedComponent.ElementMatch
+        : defaultComponent; // Defaults to textField when there are no matches
+
+    return {
+        Element: ElementMatch,
+        pydanticFormField: pydanticFormField,
+    };
+};
+export const getPydanticFormComponents = (
+    properties: Properties,
+    componentMatcher: PydanticFormsContextConfig['componentMatcher'],
+): PydanticFormComponents => {
+    const components: PydanticFormComponents = Object.entries(properties).map(
+        ([, pydanticFormField]) => {
+            return fieldToComponentMatcher(pydanticFormField, componentMatcher);
+        },
+    );
+
+    return components;
+};

frontend/packages/pydantic-forms/src/core/helper.ts

@@ -3,3 +3,4 @@ export * from './usePydanticFormParser';
 export * from './useCustomDataProvider';
 export * from './useGetZodValidator';
 export * from './useLabelProvider';
+export * from './usePydanticFormContext';