Merge pull request #41 from workfloworchestrator/1719-labels-fix

1719 labels fix

Author: DutchBen

frontend/.changeset/khaki-schools-move.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes form labels

frontend/.changeset/loose-boxes-fetch.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Makes rowRenderer configurable

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

@@ -8,46 +8,35 @@
  *
  */
 import React from 'react';
-import type { ControllerFieldState } from 'react-hook-form';
 
-import ResetNullableFieldTrigger from '@/components/form/ResetNullableFieldTrigger';
 import { usePydanticFormContext } from '@/core';
 import { PydanticFormField } from '@/types';
 
 import { FormRow } from './FormRow';
 
 interface FieldWrapProps {
     pydanticFormField: PydanticFormField;
-    fieldState: ControllerFieldState;
     children: React.ReactNode;
 }
 
-export const FieldWrap = ({
-    pydanticFormField,
-    fieldState,
-    children,
-}: FieldWrapProps) => {
-    const { errorDetails } = usePydanticFormContext();
-
+export const FieldWrap = ({ pydanticFormField, children }: FieldWrapProps) => {
+    const { errorDetails, rhf, config } = usePydanticFormContext();
+    const RowRenderer = config?.rowRenderer ? config.rowRenderer : FormRow;
+    const fieldState = rhf.getFieldState(pydanticFormField.id);
     const errorMsg =
         errorDetails?.mapped?.[pydanticFormField.id]?.msg ??
         fieldState.error?.message;
     const isInvalid = errorMsg ?? fieldState.invalid;
 
     return (
-        <FormRow
-            label={
-                <>
-                    {pydanticFormField.title}
-                    <ResetNullableFieldTrigger field={pydanticFormField} />
-                </>
-            }
+        <RowRenderer
+            title={pydanticFormField.title}
             description={pydanticFormField.description}
             required={pydanticFormField.required}
             isInvalid={!!isInvalid}
             error={errorMsg as string}
         >
             <div>{children}</div>
-        </FormRow>
+        </RowRenderer>
     );
 };

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 
 type FormRowProps = {
     children: ReactElement;
-    label?: ReactNode;
+    title: string;
     isInvalid?: boolean;
     error?: ReactNode | ReactNode[];
     description?: string;
@@ -12,19 +12,17 @@ type FormRowProps = {
 
 export const FormRow = ({
     children,
-    label,
-    isInvalid,
+    title,
     error,
-    ...rest
+    description,
+    required,
 }: FormRowProps) => {
-    // TODO: readd required, description, classname
     return (
-        <div {...(rest as HTMLAttributes<HTMLElement>)}>
-            {label && (
-                <label>
-                    {label} {isInvalid && '!!!'}
-                </label>
-            )}
+        <div>
+            <label>
+                {title} {required && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            {description && <div>{description}</div>}
             {children}
             {error}
         </div>

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

@@ -67,7 +67,9 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
 
     return (
         <form action={''} onSubmit={submitForm}>
-            {title !== false && <h2>{title ?? pydanticFormSchema.title}</h2>}
+            {title !== false && title !== 'undefined' && (
+                <h2>{title ?? pydanticFormSchema.title}</h2>
+            )}
 
             {headerComponent}
 

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

@@ -135,7 +135,7 @@ function PydanticFormContextProvider({
     const { pydanticFormSchema, isLoading: isParsingSchema } =
         usePydanticFormParser(
             rawSchema,
-            formLabels,
+            formLabels?.labels,
             fieldDetailProvider,
             formStructureMutator,
         );
@@ -223,7 +223,7 @@ function PydanticFormContextProvider({
         }
 
         const initialData = getFormValuesFromFieldOrLabels(pydanticFormSchema, {
-            ...formLabels,
+            ...formLabels?.data,
             ...customData,
         });
 

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

@@ -18,7 +18,7 @@ export const WrapFieldElement = ({
         <Controller
             name={pydanticFormField.id}
             control={rhf.control}
-            render={({ field, fieldState }) => {
+            render={({ field }) => {
                 const { onChange, onBlur, value, name, ref } = field;
                 const onChangeHandle = (val: string) => {
                     onChange(val);
@@ -30,10 +30,7 @@ export const WrapFieldElement = ({
                 };
 
                 return (
-                    <FieldWrap
-                        pydanticFormField={pydanticFormField}
-                        fieldState={fieldState}
-                    >
+                    <FieldWrap pydanticFormField={pydanticFormField}>
                         <PydanticFormControlledElement
                             onChange={onChangeHandle}
                             onBlur={onBlur}

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

@@ -301,8 +301,7 @@ export const getFieldBySection = (components: PydanticFormComponents) => {
  */
 export const getFormValuesFromFieldOrLabels = (
     pydanticFormSchema: PydanticFormSchema,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    labelData?: Record<string, any>,
+    labelData?: Record<string, string>,
 ) => {
     const fieldValues: Record<string, string> = {};
 

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 /**
  * Pydantic Forms
  *
@@ -22,12 +20,7 @@ import type {
     PydanticFormMetaData,
 } from '@/types';
 
-const ignoreApiErrors = async (
-    req: Promise<unknown>,
-    // ignoreCodes: number[],
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-): Promise<any> => {
-    //  TODO: What to use these for: ignoreCodes
+const ignoreApiErrors = async (req: Promise<unknown>): Promise<unknown> => {
     try {
         return await req;
     } catch (error) {

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

@@ -1,12 +1,15 @@
 import useSWR from 'swr';
 
-import { PydanticFormCustomDataProvider, PydanticFormLabels } from '@/types';
+import {
+    PydanticFormCustomDataProvider,
+    PydanticFormLabelProviderResponse,
+} from '@/types';
 
 export const useCustomDataProvider = (
     customDataProviderCacheKey: number,
     customDataProvider?: PydanticFormCustomDataProvider,
 ) => {
-    return useSWR<PydanticFormLabels>(
+    return useSWR<PydanticFormLabelProviderResponse['data']>(
         // cache key
         [`pydanticFormsDataProvider-${customDataProviderCacheKey}`],