1663: Readds second step forms. Adds example values in example app

Author: Ruben van Leeuwen

frontend/apps/example/src/app/page.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 import { PydanticForm } from 'pydantic-forms';
-import type { PydanticFormProvider } from 'pydantic-forms';
+import type {
+    PydanticFormApiProvider,
+    PydanticFormCustomDataProvider,
+    PydanticFormLabelProvider,
+} from 'pydantic-forms';
 
 import styles from './page.module.css';
 
 export default function Home() {
-    const pydanticFormProvider: PydanticFormProvider = async ({
+    const pydanticFormApiProvider: PydanticFormApiProvider = async ({
         requestBody,
     }) => {
         const fetchResult = await fetch('http://localhost:8000/form', {
@@ -20,17 +24,65 @@ export default function Home() {
         return jsonResult;
     };
 
+    const pydanticLabelProvider: PydanticFormLabelProvider = async () => {
+        return new Promise((resolve) => {
+            resolve({
+                labels: {
+                    name: 'LABEL NAAM',
+                    name_info: 'DESCRIPTION NAAM',
+                },
+                data: {
+                    name: 'VALUE NAAM',
+                },
+            });
+        });
+    };
+
+    const pydanticCustomDataProvider: PydanticFormCustomDataProvider = () => {
+        return new Promise((resolve) => {
+            resolve({
+                name: 'CUSTOM VALUE NAAM',
+            });
+        });
+    };
+
+    const ResetButtonAlternative = () => (
+        <button type="button">Alternative reset</button>
+    );
+
+    const CancelButtonAlternative = () => (
+        <button type="button">Alternative cancel</button>
+    );
+
     return (
         <div className={styles.page}>
             <h1>Pydantic Form</h1>
 
             <PydanticForm
                 id="theForm"
+                title="The form title"
+                sendLabel="Send label"
+                successNotice="Custom success notice"
                 onSuccess={() => {
+                    // console.log(fieldValues, summaryData, response);
                     alert('Form submitted successfully');
                 }}
+                onCancel={() => {
+                    alert('Form cancelled');
+                }}
+                onChange={() => {
+                    // console.log('onChange', fieldValues);
+                }}
                 config={{
-                    formProvider: pydanticFormProvider,
+                    apiProvider: pydanticFormApiProvider,
+                    labelProvider: pydanticLabelProvider,
+                    customDataProvider: pydanticCustomDataProvider,
+                    resetButtonAlternative: ResetButtonAlternative(),
+                    cancelButton: CancelButtonAlternative(),
+                    allowUntouchedSubmit: true,
+                    onFieldChangeHandler: () => {
+                        // console.log('calling onFieldChangeHandler', field);
+                    },
                 }}
                 headerComponent={<div>HEADER COMPONENT</div>}
                 footerComponent={<div>FOOTER COMPONENT</div>}

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

@@ -100,7 +100,14 @@ function PydanticFormContextProvider({
     const debugMode = false;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [formInputData, setFormInputData] = useState<any>([]);
+    const [formInputData, setFormInputData] = useState<object[]>([]);
+
+    const addFormInputData = (formInput: object) => {
+        setFormInputData((currentInputs) => {
+            return [...currentInputs, formInput];
+        });
+    };
+
     const [errorDetails, setErrorDetails] =
         useState<PydanticFormValidationErrorDetails>();
     const [isFullFilled, setIsFullFilled] = useState(false);
@@ -304,7 +311,7 @@ function PydanticFormContextProvider({
 
     const submitFormFn = useCallback(() => {
         setIsSending(true);
-        setFormInputData([rhf?.getValues()]);
+        addFormInputData(rhf?.getValues());
 
         window.scrollTo(0, 0);
     }, [rhf]);