Merge pull request #133 from workfloworchestrator/2040-fix-itemiziation

2040 Fixes navigation between steps and other stuff

Author: DutchBen

frontend/.changeset/some-maps-switch.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Fixes history navigation. Fixes array item validations and rendering.

frontend/package-lock.json

@@ -55,9 +55,9 @@
         "typescript": "^5.8.3"
     },
     "dependencies": {
-        "@apidevtools/json-schema-ref-parser": "^11.7.3",
+        "@apidevtools/json-schema-ref-parser": "^14.0.3",
         "@emotion/react": "^11.14.0",
-        "@hookform/resolvers": "^3.9.1",
+        "@hookform/resolvers": "^5.1.1",
         "dayjs": "^1.11.13",
         "i18next": "^24.1.2",
         "lodash": "^4.17.21",

frontend/packages/pydantic-forms/package.json

@@ -1,45 +1,41 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useFieldArray } from 'react-hook-form';
 
 import { usePydanticFormContext } from '@/core';
 import { fieldToComponentMatcher } from '@/core/helper';
-import { PydanticFormElementProps } from '@/types';
+import {
+    PydanticFormElementProps,
+    PydanticFormField,
+    PydanticFormFieldType,
+} from '@/types';
 import { itemizeArrayItem } from '@/utils';
 
 import { RenderFields } from '../render';
 
 export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
     const { rhf, config } = usePydanticFormContext();
-    const [isInitialized, setInitialized] = useState(false);
+
     const { control } = rhf;
     const { id: arrayName, arrayItem } = pydanticFormField;
-    const { minItems, maxItems } = pydanticFormField.validations;
     const { fields, append, remove } = useFieldArray({
         control,
         name: arrayName,
     });
+    const { minItems = 1, maxItems = undefined } =
+        pydanticFormField?.validations;
 
-    useEffect(() => {
-        if (!isInitialized) {
-            const arrayValueObject = {
-                [arrayName]: arrayItem?.default,
-            };
-            const minItemCount = minItems || 1;
-            const initialArray = Array.from(
-                { length: minItemCount },
-                () => arrayValueObject,
-            );
-            append(initialArray);
-            setInitialized(true);
+    const getInitialValue = (arrayItem?: PydanticFormField) => {
+        switch (arrayItem?.type) {
+            case PydanticFormFieldType.STRING:
+                return '';
+            case PydanticFormFieldType.INTEGER:
+                return 0;
+            case PydanticFormFieldType.BOOLEAN:
+                return false;
+            default:
+                return undefined;
         }
-    }, [
-        append,
-        arrayItem?.default,
-        arrayName,
-        fields.length,
-        isInitialized,
-        minItems,
-    ]);
+    };
 
     if (!arrayItem) return '';
 
@@ -49,7 +45,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
     );
 
     const renderField = (field: Record<'id', string>, index: number) => {
-        const arrayItemField = itemizeArrayItem(index, arrayItem);
+        const arrayItemField = itemizeArrayItem(index, arrayItem, arrayName);
 
         return (
             <div
@@ -95,12 +91,12 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
             }}
         >
             {fields.map(renderField)}
-
             {(!maxItems || (maxItems && fields.length < maxItems)) && (
                 <div
                     onClick={() => {
                         append({
-                            [arrayName]: arrayItem.default ?? undefined,
+                            [arrayName]:
+                                arrayItem.default || getInitialValue(arrayItem),
                         });
                     }}
                     style={{

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

@@ -20,24 +20,30 @@ export function RenderFields({
 }: RenderFieldsProps) {
     return pydanticFormComponents.map((component) => {
         const { Element, isControlledElement } = component.Element;
-        const field: PydanticFormField = component.pydanticFormField;
+        const pydanticFormField: PydanticFormField =
+            component.pydanticFormField;
 
         if (!Element) {
             return undefined;
         }
 
         if (isControlledElement) {
             return (
-                <div css={{ width: '100%' }} key={field.id}>
+                <div css={{ width: '100%' }} key={pydanticFormField.id}>
                     <WrapFieldElement
                         PydanticFormControlledElement={Element}
-                        pydanticFormField={field}
+                        pydanticFormField={pydanticFormField}
                         extraTriggerFields={extraTriggerFields}
                     />
                 </div>
             );
         } else {
-            return <Element pydanticFormField={field} key={field.id} />;
+            return (
+                <Element
+                    pydanticFormField={pydanticFormField}
+                    key={pydanticFormField.id}
+                />
+            );
         }
     });
 }

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

@@ -31,7 +31,10 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
     const { formRenderer, footerRenderer, headerRenderer } = config || {};
 
     useEffect(() => {
-        rhf.trigger();
+        if (rhf.getValues().length === 0) {
+            // Only trigger validations if there are values
+            rhf.trigger();
+        }
     }, [rhf, pydanticFormSchema]);
 
     const pydanticFormComponents: PydanticFormComponents =

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

@@ -7,7 +7,7 @@
  * With these presets you can use this for both the textfield, as the list text field.
  * Numbers might have a max&min num, etc.
  */
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 import { PydanticFormZodValidationPresets } from '@/types';
 
@@ -66,12 +66,7 @@ export const zodValidationPresets: PydanticFormZodValidationPresets = {
             multipleOf,
         } = field?.validations ?? {};
 
-        let validationRule = z
-            .number({
-                required_error: 'Dit veld is verplicht',
-                invalid_type_error: 'Dit veld moet een integer zijn',
-            })
-            .int();
+        let validationRule = z.number().int();
 
         if (minimum) {
             validationRule = validationRule.gte(