1714: Render object fields WIP

Author: Ruben van Leeuwen

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

@@ -1,16 +1,25 @@
 import React from 'react';
 
-// import { usePydanticFormContext } from '@/core';
+import { usePydanticFormContext } from '@/core';
+import { componentMatcher } from '@/core';
 import { PydanticFormElementProps } from '@/types';
 
-// import { RenderFields } from '../render';
+import { RenderFields } from '../render';
 
 export const ObjectField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
+    const { config } = usePydanticFormContext();
+
+    const components = componentMatcher(
+        pydanticFormField.properties || {},
+        config?.componentMatcher,
+    );
+    console.log('components: ' + pydanticFormField.id, components);
     return (
         <div>
             <h1>{pydanticFormField.title}</h1>
+            <RenderFields components={components} />
         </div>
     );
 };

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

@@ -6,18 +6,14 @@ 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}
             key={section.id}
             components={pydanticFormComponents}
         >
-            {({ components }) => (
-                <div>
-                    <RenderFields components={components} />
-                </div>
-            )}
+            {({ components }) => <RenderFields components={components} />}
         </RenderSections>
     ));
 

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

@@ -19,7 +19,7 @@ export function RenderFields({ components }: RenderFieldsProps) {
         const field: PydanticFormField = component.pydanticFormField;
 
         if (!Element) {
-            return <></>;
+            return undefined;
         }
 
         if (isControlledElement) {

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

@@ -7,9 +7,9 @@
  */
 import React from 'react';
 
+import { componentMatcher } from '@/components/componentMatcher';
 import Footer from '@/components/form/Footer';
 import RenderFormErrors from '@/components/render/RenderFormErrors';
-import { componentMatcher } from '@/core/componentMatcher';
 import { PydanticFormComponents, PydanticFormContextProps } from '@/types';
 
 import { FormRenderer } from './FormRenderer';
@@ -57,7 +57,7 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
     // Map schema to get fields
 
     const pydanticFormComponents: PydanticFormComponents = componentMatcher(
-        pydanticFormSchema,
+        pydanticFormSchema.properties,
         customComponentMatcher,
     );
 

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

@@ -8,7 +8,6 @@ import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 import defaultComponentMatchers from '@/components/defaultComponentMatchers';
 import {
     Properties,
-    PydanticComponentMatcher,
     PydanticFormApiResponse,
     PydanticFormComponents,
     PydanticFormField,
@@ -179,7 +178,6 @@ export const getFlatFieldMap = (
     properties: Properties,
     fieldMap: FieldMap = new Map(),
 ) => {
-    console.log('props', properties);
     if (properties) {
         Object.entries(properties ?? {}).forEach(([id, field]) => {
             if (field.properties) {

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

@@ -12,7 +12,7 @@ import { useForm } from 'react-hook-form';
 
 import { z } from 'zod';
 
-import { getMatcher } from '@/core/helper';
+import { getFlatFieldMap, getMatcher } from '@/core/helper';
 import {
     CustomValidationRule,
     PydanticFormField,
@@ -22,20 +22,6 @@ import {
 
 type PropertyMap = Map<string, PydanticFormField>;
 
-const getFlatPropertyMap = (schema: PydanticFormSchema): PropertyMap => {
-    const propertyMap: PropertyMap = new Map();
-
-    if (schema) {
-        Object.entries(schema.properties ?? {}).forEach(
-            ([id, pydanticFormPropertySchema]) => {
-                propertyMap.set(id, pydanticFormPropertySchema);
-            },
-        );
-    }
-
-    return propertyMap;
-};
-
 const getClientSideValidationRule = (
     field: PydanticFormField,
     rhf?: ReturnType<typeof useForm>,
@@ -69,10 +55,10 @@ export const useGetZodValidator = (
             return z.object({});
         }
         // Get all fields ids including the nested ones to generate the correct validation schema
-        const flatPropertyMap = getFlatPropertyMap(pydanticFormSchema);
+        const flatFieldMap = getFlatFieldMap(pydanticFormSchema.properties);
 
         return z.object(
-            [...flatPropertyMap].reduce(
+            [...flatFieldMap].reduce(
                 (validationObject, [propertyId, pydanticFormField]) => {
                     const fieldRules =
                         customValidationRule?.(pydanticFormField, rhf) ??

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

@@ -1,6 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import $RefParser from '@apidevtools/json-schema-ref-parser';
+import { useMemo } from 'react';
 
 import {
     getFieldAllOfAnyOfEntry,
@@ -17,7 +15,9 @@ import {
  *
  */
 import type {
+    Properties,
     PydanticFormField,
+    PydanticFormPropertySchemaParsed,
     PydanticFormSchema,
     PydanticFormSchemaParsed,
     PydanticFormSchemaRawJson,
@@ -38,23 +38,16 @@ const translateLabel = (
 };
 
 const parseProperties = (
-    parsedSchema: PydanticFormSchemaParsed,
+    parsedSchema: PydanticFormSchemaParsed | PydanticFormPropertySchemaParsed,
     formLabels?: Record<string, string>,
     fieldDetailProvider?: PydanticFormsContextConfig['fieldDetailProvider'],
     prefix: string = '',
 ) => {
-    if (!parsedSchema) return {};
-
-    const schemaProperties = parsedSchema.properties;
-
-    if (!schemaProperties) return {};
+    if (!parsedSchema || !parsedSchema.properties) return {};
 
-    const properties = Object.entries(schemaProperties);
-    const parsedProperties = properties.reduce(
-        (
-            propertiesObject: PydanticFormSchema['properties'],
-            [propertyId, propertySchema],
-        ) => {
+    const p = Object.entries(parsedSchema.properties);
+    const parsedProperties = p.reduce(
+        (propertiesObject: Properties, [propertyId, propertySchema]) => {
             const options = getFieldOptions(propertySchema);
             const fieldOptionsEntry = getFieldAllOfAnyOfEntry(propertySchema);
             const id = `${prefix && prefix + '.'}${propertyId}`;
@@ -85,6 +78,12 @@ const parseProperties = (
                 schemaProperty: propertySchema,
                 validations: getFieldValidation(propertySchema),
                 columns: 6, // TODO: Is this still relevant?
+                properties: parseProperties(
+                    propertySchema || {},
+                    formLabels,
+                    fieldDetailProvider,
+                    id,
+                ),
                 ...fieldDetailProvider?.[propertyId],
             };
 

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

@@ -1,3 +1,3 @@
 export * from './PydanticFormContextProvider';
 export * from './hooks';
-export * from './componentMatcher';
+export * from '../components/componentMatcher';

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

@@ -419,7 +419,7 @@ export interface PydanticFormPropertySchemaParsed
         password: boolean;
     };
 
-    properties?: RawJsonProperties;
+    properties?: ParsedProperties;
 }
 
 export interface PydanticFormFieldAnyOfDefParsed