Merge pull request #85 from workfloworchestrator/1904-fix-labels

1904 fix labels

Author: DutchBen

frontend/.changeset/new-pianos-rhyme.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Fixes label fields by removing section logic

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

@@ -38,7 +38,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
                 }}
             >
                 <RenderFields
-                    components={[
+                    pydanticFormComponents={[
                         {
                             Element: component.Element,
                             pydanticFormField: arrayField,

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

@@ -28,7 +28,7 @@ export const ObjectField = ({
             }}
         >
             <h1>{pydanticFormField.title}</h1>
-            <RenderFields components={components} />
+            <RenderFields pydanticFormComponents={components} />
         </div>
     );
 };

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

@@ -1 +1,2 @@
 export * from './fields';
+export * from './zodValidationsPresets';

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

@@ -1,20 +1,8 @@
 import React from 'react';
 
-import { RenderFields, RenderSections } from '@/components/render';
-import { getFieldBySection } from '@/core/helper';
+import { RenderFields } from '@/components/render';
 import type { FormRenderer as Renderer } from '@/types';
 
 export const FormRenderer: Renderer = ({ pydanticFormComponents }) => {
-    const formSections = getFieldBySection(pydanticFormComponents);
-    const sections = formSections.map((section) => (
-        <RenderSections
-            section={section}
-            key={section.id}
-            components={pydanticFormComponents}
-        >
-            {({ components }) => <RenderFields components={components} />}
-        </RenderSections>
-    ));
-
-    return <div>{sections}</div>;
+    return <RenderFields pydanticFormComponents={pydanticFormComponents} />;
 };

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

@@ -10,15 +10,15 @@ import { WrapFieldElement } from '@/core/WrapFieldElement';
 import { PydanticFormComponents, PydanticFormField } from '@/types';
 
 interface RenderFieldsProps {
-    components: PydanticFormComponents;
+    pydanticFormComponents: PydanticFormComponents;
     extraTriggerFields?: string[]; // The use case for this is that we want to trigger the array field aswell as the array item field
 }
 
 export function RenderFields({
-    components,
+    pydanticFormComponents,
     extraTriggerFields,
 }: RenderFieldsProps) {
-    return components.map((component) => {
+    return pydanticFormComponents.map((component) => {
         const { Element, isControlledElement } = component.Element;
         const field: PydanticFormField = component.pydanticFormField;
 

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

@@ -3,4 +3,3 @@ export * from './FormRenderer';
 export * from './RenderForm';
 export * from './RenderFormErrors';
 export * from './RenderReactHookFormErrors';
-export * from './Sections';

frontend/packages/pydantic-forms/src/components/render/index.ts

@@ -8,11 +8,9 @@ import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 import {
     Properties,
     PydanticFormApiResponse,
-    PydanticFormComponents,
     PydanticFormField,
     PydanticFormFieldAttributes,
     PydanticFormFieldOption,
-    PydanticFormFieldSection,
     PydanticFormFieldType,
     PydanticFormFieldValidations,
     PydanticFormPropertySchemaParsed,
@@ -243,61 +241,6 @@ export const getFieldValidation = (
 export const isNullableField = (field: PydanticFormField) =>
     !!field.validations.isNullable;
 
-/**
- * Sort field per section for displaying
- *
- * This function will organize the fields per section
- * every time a field comes by that starts with label_
- * we start a new section
- */
-export const getFieldBySection = (components: PydanticFormComponents) => {
-    const sections: PydanticFormFieldSection[] = [];
-    let curSection = 0;
-
-    // Ids will be nested at this point. We look at the last part of the id
-    for (const component of components) {
-        const id = component.pydanticFormField.id.split('.').pop();
-        const field = component.pydanticFormField;
-
-        if (id && id.startsWith('label_')) {
-            curSection++;
-            sections.push({
-                id,
-
-                // strange as it is, the backend will put the
-                // correct label in the 'default' prop
-                title: field.default ?? field.title,
-
-                components: [],
-            });
-
-            continue;
-        }
-
-        if (curSection === 0) {
-            // if we are here there was no first label field,
-            // we'll create a label / section to prevent errors
-
-            sections.push({
-                id: 'auto-created-section',
-                title: '',
-                components: [],
-            });
-
-            // Make sure new fields are pushed into this section and
-            // prevent empty sections created
-            curSection = 1;
-        }
-
-        // since we start at 0, and the first label will add
-        const targetSection = curSection - 1;
-
-        sections[targetSection].components.push(component);
-    }
-
-    return sections;
-};
-
 /**
  * Will return a Record map of [fieldId]: "Fieldvalue"
  *

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

@@ -115,12 +115,6 @@ export interface PydanticFormField {
     properties?: Properties;
 }
 
-export interface PydanticFormFieldSection {
-    id: string;
-    title: string;
-    components: PydanticFormComponents;
-}
-
 export enum PydanticFormFieldType {
     // Primitive types https://json-schema.org/understanding-json-schema/reference/type
     STRING = 'string',