Merge pull request #15 from workfloworchestrator/1663-code-cleanup

1663 code cleanup

Author: DutchBen

backend/main.py

@@ -37,15 +37,17 @@ class SubmitFormPage(FormPage):
 def read_root():
     return {"Hello": "World"}
 
+
 @dataclass(frozen=True, **SLOTS)
 class ExtraData(GroupedMetadata):
     props: dict
 
     def __iter__(self) -> Iterator[BaseMetadata]:
         yield Field(json_schema_extra=self.props)
 
+
 @app.post("/form")
-async def form(form_data: list[dict]=[]):
+async def form(form_data: list[dict] = []):
     def form_generator(state: State):
         class TestForm(FormPage):
             model_config = ConfigDict(title="Form Title")
@@ -55,12 +57,14 @@ class TestForm(FormPage):
 
         form_data_1 = yield TestForm
 
-        # class TestForm2(SubmitFormPage):
-        #    model_config = ConfigDict(title="Form 2 Title")
-        #
-        #    name_2: str | None = None
-        #    form_data_2 = yield TestForm2
-        return form_data_1.model_dump() #| form_data_2.model_dump()
+        class TestForm2(SubmitFormPage):
+            model_config = ConfigDict(title="Form 2 Title")
+
+            name_2: str | None = None
+
+        form_data_2 = yield TestForm2
+
+        return form_data_1.model_dump() | form_data_2.model_dump()
 
-    data = post_form(form_generator, state={}, user_inputs=form_data)
-    return data
+    post_form(form_generator, state={}, user_inputs=form_data)
+    return "OK!"

frontend/.changeset/wise-seahorses-relate.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Readds multistep forms

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

@@ -27,7 +27,7 @@ import {
     getFormValuesFromFieldOrLabels,
 } from '@/core/helper';
 import {
-    usePydanticForm,
+    useApiProvider,
     usePydanticFormParser,
     useRefParser,
 } from '@/core/hooks';
@@ -78,7 +78,7 @@ function PydanticFormContextProvider({
     const {
         customDataProvider,
         labelProvider,
-        formProvider,
+        apiProvider,
         fieldDetailProvider,
         onFieldChangeHandler,
         customDataProviderCacheKey,
@@ -93,13 +93,21 @@ function PydanticFormContextProvider({
         cancelButton,
     } = config;
 
+    // TODO: Fix this again
     // option to enable the debug mode on the fly in the browser
     // by setting localStorage.setItem("pydanticFormsDebugMode", "true")
     // reload is required
     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);
@@ -111,18 +119,18 @@ function PydanticFormContextProvider({
     const { data: formLabels, isLoading: isLoadingFormLabels } =
         useLabelProvider(labelProvider, formKey, formIdKey);
 
-    const { data: customData, isLoading: isCustomDataLoading } =
+    const { data: customData, isLoading: isLoadingCustomData } =
         useCustomDataProvider(
             customDataProviderCacheKey ?? 100,
             customDataProvider,
         );
 
     // fetch the form definition using SWR hook
     const {
-        data: apiErrorResp,
+        data: apiResponse,
         isLoading: isLoadingSchema,
         error,
-    } = usePydanticForm(formKey, formInputData, formProvider, metaData);
+    } = useApiProvider(formKey, formInputData, apiProvider, metaData);
 
     // we cache the form scheme so when there is an error, we still have the form
     // the form is not in the error response
@@ -170,14 +178,13 @@ function PydanticFormContextProvider({
 
     rhfRef.current = rhf;
 
-    /* TODO: implement this
+    /* TODO: Reimplement
     // prevent user from navigating away when there are unsaved changes
     const hasUnsavedData =
         !saveToLeavePageInCurrentState &&
         !isFullFilled &&
         rhf.formState.isDirty;
 
-    /* TODO: implement this
     useLeavePageConfirm(
         hasUnsavedData,
         'Er zijn aanpassingen in het formulier. \nWeet je zeker dat je de pagina wilt verlaten?',
@@ -226,36 +233,43 @@ function PydanticFormContextProvider({
         });
 
         if (skipSuccessNotice) {
-            onSuccess(values, summaryData);
+            onSuccess(values, summaryData, apiResponse || {});
         } else {
             setTimeout(() => {
-                onSuccess?.(values, summaryData);
-            }, 1500);
+                onSuccess?.(values, summaryData, apiResponse || {});
+            }, 1500); // Delay to allow notice to show first
         }
-    }, [isFullFilled, skipSuccessNotice, onSuccess, rhf, formData]);
+    }, [
+        isFullFilled,
+        skipSuccessNotice,
+        onSuccess,
+        rhf,
+        formData,
+        apiResponse,
+    ]);
 
     // a useeffect for whenever the error response updates
     // sometimes we need to update the form,
     // some we need to update the errors
     useEffect(() => {
-        if (apiErrorResp?.success) {
+        if (apiResponse?.success) {
             setIsFullFilled(true);
             return;
         }
 
         // when we receive a form from the JSON, we fully reset the scheme
-        if (apiErrorResp?.form) {
-            setRawSchema(apiErrorResp.form);
+        if (apiResponse?.form) {
+            setRawSchema(apiResponse.form);
             setErrorDetails(undefined);
         }
 
         // when we receive errors, we append to the scheme
-        if (apiErrorResp?.validation_errors) {
-            setErrorDetails(getErrorDetailsFromResponse(apiErrorResp));
+        if (apiResponse?.validation_errors) {
+            setErrorDetails(getErrorDetailsFromResponse(apiResponse));
         }
 
         setIsSending(false);
-    }, [apiErrorResp, onSuccess, rhf, skipSuccessNotice]);
+    }, [apiResponse, onSuccess, rhf, skipSuccessNotice]);
 
     const resetFormData = useCallback(() => {
         if (!formData) {
@@ -292,7 +306,7 @@ function PydanticFormContextProvider({
 
     const submitFormFn = useCallback(() => {
         setIsSending(true);
-        setFormInputData([rhf?.getValues()]);
+        addFormInputData(rhf?.getValues());
 
         window.scrollTo(0, 0);
     }, [rhf]);
@@ -320,7 +334,7 @@ function PydanticFormContextProvider({
         [resetFormData, rhf],
     );
 
-    // with this we have the possiblity to have listeners for specific fields
+    // with this we have the possibility to have listeners for specific fields
     // this could be used to trigger validations of related fields, casting changes to elsewhere, etc.
     useEffect(() => {
         let sub: Subscription;
@@ -349,7 +363,7 @@ function PydanticFormContextProvider({
         isLoadingFormLabels ||
         isLoadingSchema ||
         isLoadingSchema ||
-        (customDataProvider ? isCustomDataLoading : false);
+        (customDataProvider ? isLoadingCustomData : false);
 
     const PydanticFormContextState = {
         // to prevent an issue where the sending state hangs

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

@@ -7,7 +7,7 @@ import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 
 import fieldsConfig from '@/components/config';
 import {
-    PydanticFormApiErrorResponse,
+    PydanticFormApiResponse,
     PydanticFormApiResponsePropertyResolved,
     PydanticFormData,
     PydanticFormField,
@@ -27,7 +27,7 @@ import { insertItemAtIndex } from '@/utils';
  * @returns A object better usable for displaying errors
  */
 export const getErrorDetailsFromResponse = function (
-    apiErrorResp: PydanticFormApiErrorResponse,
+    apiErrorResp: PydanticFormApiResponse,
 ) {
     return {
         detail: apiErrorResp.detail ?? '',

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

@@ -1,3 +1,3 @@
-export * from './usePydanticForm';
+export * from './useApiProvider';
 export * from './useRefParser';
 export * from './usePydanticFormParser';

…forms/src/core/hooks/usePydanticForm.tsx …-forms/src/core/hooks/useApiProvider.tsxfrontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx renamed to frontend/packages/pydantic-forms/src/core/hooks/useApiProvider.tsx frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx renamed to frontend/packages/pydantic-forms/src/core/hooks/useApiProvider.tsx

@@ -17,9 +17,9 @@
 import useSWR, { SWRConfiguration } from 'swr';
 
 import type {
-    PydanticFormApiErrorResponse,
+    PydanticFormApiProvider,
+    PydanticFormApiResponse,
     PydanticFormMetaData,
-    PydanticFormProvider,
 } from '@/types';
 
 const ignoreApiErrors = async (
@@ -35,28 +35,29 @@ const ignoreApiErrors = async (
     }
 };
 
-export function usePydanticForm(
+export function useApiProvider(
     formKey: string,
     formInputData: PydanticFormMetaData, // TODO: This doesn't seem right
-    formProvider: PydanticFormProvider,
+    apiProvider: PydanticFormApiProvider,
     metaData?: PydanticFormMetaData,
     cacheKey?: number,
     swrConfig?: SWRConfiguration,
 ) {
-    return useSWR<PydanticFormApiErrorResponse>(
+    return useSWR<PydanticFormApiResponse>(
         // cache key
         [formKey, formInputData, metaData, swrConfig, cacheKey],
 
         // return val
         async ([formKey, formInputData]) => {
             // TODO: Readd sending metadata along with request
             const requestBody = formInputData;
-            const formProviderRequest = formProvider({
+
+            const apiProviderRequest = apiProvider({
                 formKey,
                 requestBody,
             });
             const req = (await ignoreApiErrors(
-                formProviderRequest,
+                apiProviderRequest,
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             )) as any;
 
@@ -65,6 +66,7 @@ export function usePydanticForm(
                 (!req.validation_errors && !req.form)
             ) {
                 return {
+                    response: req,
                     success: true,
                 };
             }