1714: Fixes rendering elements

Author: Ruben van Leeuwen

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

@@ -1,12 +1,54 @@
+import { useForm } from 'react-hook-form';
+
+import { z } from 'zod';
+
+import defaultComponentMatchers from '@/components/defaultComponentMatchers';
 import { TextField } from '@/components/fields';
-import { getMatcher } from '@/core/helper';
 import type {
     ElementMatch,
     Properties,
+    PydanticComponentMatcher,
     PydanticFormComponents,
+    PydanticFormField,
     PydanticFormsContextConfig,
 } from '@/types';
 
+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,
+    rhf?: ReturnType<typeof useForm>,
+    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+) => {
+    const matcher = getMatcher(customComponentMatcher);
+
+    const componentMatch = matcher(field);
+
+    let validationRule = componentMatch?.validator?.(field, rhf) ?? z.string();
+
+    if (!field.required) {
+        validationRule = validationRule.optional();
+    }
+
+    if (field.validations.isNullable) {
+        validationRule = validationRule.nullable();
+    }
+
+    return validationRule;
+};
+
 export const componentMatcher = (
     properties: Properties,
     customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],

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

@@ -15,7 +15,7 @@ export const ObjectField = ({
         pydanticFormField.properties || {},
         config?.componentMatcher,
     );
-    console.log('components: ' + pydanticFormField.id, components);
+
     return (
         <div>
             <h1>{pydanticFormField.title}</h1>

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

@@ -6,7 +6,6 @@ import type { FormRenderer as Renderer } from '@/types';
 
 export const FormRenderer: Renderer = ({ pydanticFormComponents }) => {
     const formSections = getFieldBySection(pydanticFormComponents);
-    console.log(formSections);
     const sections = formSections.map((section) => (
         <RenderSections
             section={section}

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

@@ -5,7 +5,6 @@
  */
 import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 
-import defaultComponentMatchers from '@/components/defaultComponentMatchers';
 import {
     Properties,
     PydanticFormApiResponse,
@@ -18,7 +17,6 @@ import {
     PydanticFormFieldValidations,
     PydanticFormPropertySchemaParsed,
     PydanticFormSchema,
-    PydanticFormsContextConfig,
 } from '@/types';
 
 /**
@@ -169,7 +167,6 @@ export const getFieldLabelById = (
     formSchema?: PydanticFormSchema,
 ) => {
     const fieldMap = getFlatFieldMap(formSchema?.properties ?? {});
-    console.log('fieldMap', fieldMap);
     return fieldMap.has(fieldId) ? fieldMap.get(fieldId)?.title : fieldId;
 };
 
@@ -304,17 +301,14 @@ export const getFieldBySection = (components: PydanticFormComponents) => {
  */
 export const getFormValuesFromFieldOrLabels = (
     pydanticFormSchema: PydanticFormSchema,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     labelData?: Record<string, any>,
 ) => {
-    // NOTE: PydanticFormSchema has recursive property ids at this point
-    // The data in label data is flat so we need to take care of that
-
     const fieldValues: Record<string, string> = {};
 
-    /*
     const includedFields: string[] = [];
 
-    for (const field of fields) {
+    for (const [, field] of Object.entries(pydanticFormSchema.properties)) {
         includedFields.push(field.id);
 
         if (typeof field.default === 'undefined') {
@@ -331,7 +325,6 @@ export const getFormValuesFromFieldOrLabels = (
             }
         }
     }
-        */
 
     return fieldValues;
 };
@@ -384,17 +377,3 @@ 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) => {
-        return componentMatchers.find(({ matcher }) => {
-            return matcher(field);
-        });
-    };
-};

frontend/packages/pydantic-forms/src/core/hooks/useGetZodValidator.tsx

@@ -12,38 +12,14 @@ import { useForm } from 'react-hook-form';
 
 import { z } from 'zod';
 
-import { getFlatFieldMap, getMatcher } from '@/core/helper';
+import { getClientSideValidationRule } from '@/components/componentMatcher';
+import { getFlatFieldMap } from '@/core/helper';
 import {
     CustomValidationRule,
-    PydanticFormField,
     PydanticFormSchema,
     PydanticFormsContextConfig,
 } from '@/types';
 
-type PropertyMap = Map<string, PydanticFormField>;
-
-const getClientSideValidationRule = (
-    field: PydanticFormField,
-    rhf?: ReturnType<typeof useForm>,
-    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
-) => {
-    const matcher = getMatcher(customComponentMatcher);
-
-    const componentMatch = matcher(field);
-
-    let validationRule = componentMatch?.validator?.(field, rhf) ?? z.string();
-
-    if (!field.required) {
-        validationRule = validationRule.optional();
-    }
-
-    if (field.validations.isNullable) {
-        validationRule = validationRule.nullable();
-    }
-
-    return validationRule;
-};
-
 export const useGetZodValidator = (
     pydanticFormSchema?: PydanticFormSchema,
     rhf?: ReturnType<typeof useForm>,
@@ -76,5 +52,5 @@ export const useGetZodValidator = (
                 {},
             ),
         );
-    }, [customValidationRule, rhf, pydanticFormSchema]);
+    }, [customValidationRule, rhf, pydanticFormSchema, customComponentMatcher]);
 };

frontend/packages/pydantic-forms/src/core/hooks/usePydanticFormParser.tsx

@@ -45,8 +45,8 @@ const parseProperties = (
 ) => {
     if (!parsedSchema || !parsedSchema.properties) return {};
 
-    const p = Object.entries(parsedSchema.properties);
-    const parsedProperties = p.reduce(
+    const schemaProperties = Object.entries(parsedSchema.properties);
+    const parsedProperties = schemaProperties.reduce(
         (propertiesObject: Properties, [propertyId, propertySchema]) => {
             const options = getFieldOptions(propertySchema);
             const fieldOptionsEntry = getFieldAllOfAnyOfEntry(propertySchema);
@@ -73,9 +73,13 @@ const parseProperties = (
                 options: options.options,
                 isEnumField: options.isOptionsField,
                 default: propertySchema.default,
-                required: !!parsedSchema.required?.includes(propertyId),
+                // TODO: I think object properties should never be required only their properties are or aren't. Should we fix this in the backend?
+                required:
+                    propertySchema.type === PydanticFormFieldType.OBJECT
+                        ? false
+                        : !!parsedSchema.required?.includes(propertyId),
                 attributes: getFieldAttributes(propertySchema),
-                schemaProperty: propertySchema,
+                schema: propertySchema,
                 validations: getFieldValidation(propertySchema),
                 columns: 6, // TODO: Is this still relevant?
                 properties: parseProperties(
@@ -130,7 +134,7 @@ export const usePydanticFormParser = (
         return formStructureMutator
             ? formStructureMutator(pydanticFormSchema)
             : pydanticFormSchema;
-    }, [formStructureMutator, parsedSchema]);
+    }, [formStructureMutator, parsedSchema, formLabels, fieldDetailProvider]);
 
     return {
         pydanticFormSchema,

frontend/packages/pydantic-forms/src/types.ts

@@ -93,7 +93,7 @@ export interface PydanticFormField {
     columns: number;
     required: boolean;
     isEnumField: boolean;
-    schemaProperty: PydanticFormPropertySchemaParsed;
+    schema: PydanticFormPropertySchemaParsed;
     validations: PydanticFormFieldValidations;
     attributes: PydanticFormFieldAttributes;
 
@@ -319,7 +319,8 @@ export type PydanticFormLabelProvider = ({
 }: {
     formKey: string;
     id?: string | null;
-}) => Promise<Record<string, string>>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) => Promise<Record<string, any>>;
 
 // will return column
 export type PydanticFormLayoutColumnProvider = (fieldId: string) => number;
@@ -368,6 +369,7 @@ export interface PydanticFormApiResponse {
 
 export interface PydanticFormBaseSchema {
     title?: string;
+    type: PydanticFormFieldType.OBJECT;
     description?: string;
     additionalProperties?: boolean;
     required?: string[];
@@ -380,23 +382,21 @@ export interface PydanticFormBaseSchema {
     };
 }
 
-export interface PydanticFormSchema extends PydanticFormBaseSchema {
-    type: PydanticFormFieldType.OBJECT;
+export interface PydanticFormSchema
+    extends Omit<PydanticFormBaseSchema, '$defs'> {
     properties: Properties;
 }
 
 export interface PydanticFormSchemaRawJson extends PydanticFormBaseSchema {
-    type: PydanticFormFieldType.OBJECT;
     properties: RawJsonProperties;
 }
 
 export interface PydanticFormSchemaParsed extends PydanticFormBaseSchema {
-    type: 'object';
     properties: ParsedProperties;
 }
 
 export interface PydanticFormPropertySchemaParsed
-    extends PydanticFormBaseSchema,
+    extends Omit<PydanticFormBaseSchema, 'type'>,
         PydanticFormFieldValidations {
     type: PydanticFormFieldType;
 
@@ -444,7 +444,7 @@ export interface PydanticFormFieldAnyOfItemParsed
 }
 
 export interface PydanticFormPropertySchemaRawJson
-    extends PydanticFormBaseSchema,
+    extends Omit<PydanticFormBaseSchema, 'type'>,
         PydanticFormFieldValidations,
         JsonSchemaRef {
     type: PydanticFormFieldType;