Merge pull request #109 from workfloworchestrator/1904-fix-datareset

1904 fix datareset

Author: DutchBen

frontend/.changeset/tired-things-sort.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Expands configurable header component to include title. Aligns render components.

frontend/packages/pydantic-forms/src/components/form/Footer.tsx

@@ -18,7 +18,6 @@ const Footer = () => {
         cancelButton,
         resetButtonAlternative,
         sendLabel,
-        footerComponent,
         allowUntouchedSubmit,
         hasNext,
         formInputData,
@@ -83,7 +82,6 @@ const Footer = () => {
 
     return (
         <div style={{ height: '200px', marginTop: '24px' }}>
-            {footerComponent && <div>{footerComponent}</div>}{' '}
             <div style={{ display: 'flex', gap: '16px' }}>
                 {rhf.formState.isValid &&
                     !allowUntouchedSubmit &&

frontend/packages/pydantic-forms/src/components/render/FormRenderer.tsx renamed to frontend/packages/pydantic-forms/src/components/form/Form.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import { RenderFields } from '@/components/render';
 import type { FormRenderComponent } from '@/types';
 
-export const FormRenderer: FormRenderComponent = ({
-    pydanticFormComponents,
-}) => {
+export const Form: FormRenderComponent = ({ pydanticFormComponents }) => {
     return <RenderFields pydanticFormComponents={pydanticFormComponents} />;
 };

frontend/packages/pydantic-forms/src/components/form/Header.tsx

@@ -0,0 +1,25 @@
+/**
+ * Pydantic Forms
+ *
+ * Header component
+ */
+import React from 'react';
+
+import RenderFormErrors from '@/components/render/RenderFormErrors';
+import { usePydanticFormContext } from '@/core';
+
+const Header = () => {
+    const { pydanticFormSchema, title } = usePydanticFormContext();
+
+    return (
+        <>
+            <h2 style={{ margin: '1rem 0' }}>
+                {title ?? pydanticFormSchema?.title}
+            </h2>
+
+            <RenderFormErrors />
+        </>
+    );
+};
+
+export default Header;

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

@@ -10,12 +10,11 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 
 import Footer from '@/components/form/Footer';
-import RenderFormErrors from '@/components/render/RenderFormErrors';
+import { Form } from '@/components/form/Form';
+import Header from '@/components/form/Header';
 import { getPydanticFormComponents } from '@/core/helper';
 import { PydanticFormComponents, PydanticFormContextProps } from '@/types';
 
-import { FormRenderer } from './FormRenderer';
-
 const RenderForm = (contextProps: PydanticFormContextProps) => {
     const {
         submitForm,
@@ -25,12 +24,10 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         isFullFilled,
         successNotice,
         isSending,
-        title,
-        headerComponent,
         skipSuccessNotice,
         loadingComponent,
     } = contextProps;
-    const { formRenderer, footerRenderer } = config || {};
+    const { formRenderer, footerRenderer, headerRenderer } = config || {};
 
     const pydanticFormComponents: PydanticFormComponents =
         getPydanticFormComponents(
@@ -58,26 +55,14 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         return <div>{successNotice ?? t('successfullySent')}</div>;
     }
 
-    const Renderer = formRenderer ?? FormRenderer;
+    const FormRenderer = formRenderer ?? Form;
     const FooterRenderer = footerRenderer ?? Footer;
+    const HeaderRenderer = headerRenderer ?? Header;
 
     return (
         <form action={''} onSubmit={submitForm}>
-            {title !== false &&
-                title !== 'undefined' &&
-                title !== 'unknown' && (
-                    <h2 style={{ margin: '1rem 0' }}>
-                        {title ?? pydanticFormSchema.title}
-                    </h2>
-                )}
-
-            {headerComponent}
-
-            <RenderFormErrors />
-
-            <div>
-                <Renderer pydanticFormComponents={pydanticFormComponents} />
-            </div>
+            <HeaderRenderer />
+            <FormRenderer pydanticFormComponents={pydanticFormComponents} />
             <FooterRenderer />
         </form>
     );

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

@@ -1,5 +1,4 @@
 export * from './RenderFields';
-export * from './FormRenderer';
 export * from './RenderForm';
 export * from './RenderFormErrors';
 export * from './RenderReactHookFormErrors';

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

@@ -62,8 +62,6 @@ function PydanticFormContextProvider({
     metaData,
     title,
     sendLabel,
-    headerComponent,
-    footerComponent,
     loadingComponent,
     successNotice,
     onSuccess,
@@ -383,8 +381,6 @@ function PydanticFormContextProvider({
         isLoading,
         rhf,
         pydanticFormSchema,
-        headerComponent,
-        footerComponent,
         loadingComponent,
         onPrevious: () => goToPreviousStep(rhf?.getValues()),
         onCancel,

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

@@ -26,8 +26,6 @@ export interface PydanticFormInitialContextProps {
     onCancel?: () => void;
     onChange?: (fieldValues: FieldValues) => void;
     children: (props: PydanticFormContextProps) => React.ReactNode;
-    headerComponent?: React.ReactNode;
-    footerComponent?: React.ReactNode;
     loadingComponent?: React.ReactNode;
     hasCardWrapper?: boolean;
     config: PydanticFormsContextConfig;
@@ -66,8 +64,6 @@ export interface PydanticFormContextProps {
     submitForm: FormEventHandler<HTMLFormElement>;
     resetForm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     successNotice?: React.ReactNode;
-    headerComponent?: React.ReactNode;
-    footerComponent?: React.ReactNode;
     loadingComponent?: React.ReactNode;
     allowUntouchedSubmit?: boolean;
     skipSuccessNotice?: boolean;
@@ -297,6 +293,7 @@ export interface PydanticFormsContextConfig {
 
     formRenderer?: FormRenderComponent;
     footerRenderer?: React.JSXElementConstructor<object>;
+    headerRenderer?: React.JSXElementConstructor<object>;
     rowRenderer?: RowRenderComponent;
 
     // Extend field definitions