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

1663 code cleanup

Author: DutchBen

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

@@ -1,6 +1,6 @@
 'use client';
 
-import PydanticForm from 'pydantic-forms';
+import { PydanticForm } from 'pydantic-forms';
 import type { PydanticFormProvider } from 'pydantic-forms';
 
 import styles from './page.module.css';

frontend/package-lock.json

@@ -1,5 +1,5 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Main form wrap component
  *
@@ -21,8 +21,12 @@ export interface PydanticFormProps
     metaData?: PydanticFormMetaData;
 }
 
-const PydanticForm = ({ id, metaData, ...contextProps }: PydanticFormProps) => (
-    <div e2e-id={`dynamicforms-${id}`}>
+export const PydanticForm = ({
+    id,
+    metaData,
+    ...contextProps
+}: PydanticFormProps) => (
+    <div e2e-id={`pydanticforms-${id}`}>
         <PydanticFormContextProvider
             {...contextProps}
             formKey={id}

frontend/packages/pydantic-forms/src/PydanticForm.tsx

@@ -1,5 +1,5 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * We will search for the first field that returns a positive match
  * The last field has no matcher, so it will match as the default
@@ -8,15 +8,6 @@ import TextField from '@/components/fields/TextField';
 import { PydanticFormFieldConfig } from '@/types';
 
 const fieldsConfig: PydanticFormFieldConfig[] = [
-    /*
-    {
-        id: 'textarea',
-        Component: DFTextArea,
-        matcher(field) {
-            return field.format === DfFieldFormats.LONG;
-        },
-    },
-*/
     // no matcher, last in array,
     // so its the final fallback
     {

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

@@ -13,7 +13,6 @@ import ResetNullableFieldTrigger from '@/components/form/ResetNullableFieldTrigg
 import { usePydanticFormContext } from '@/core';
 import { PydanticFormField } from '@/types';
 
-// import { FormField, IconButton, IconInfo } from "@lib/rijkshuisstijl"
 import { FormRow } from './FormRow';
 
 interface FieldWrapProps {

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

@@ -19,8 +19,6 @@ import {
     PydanticFormInputFieldProps,
 } from '@/types';
 
-// import { TextField } from '@rijkshuisstijl-community/web-components-react'
-
 interface TextFieldProps {
     value: string;
     onChangeValue: (val: string) => void;

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

@@ -1,5 +1,5 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Form footer component
  */
@@ -43,7 +43,7 @@ const Footer = () => {
                 {resetButtonAlternative ?? (
                     <button
                         type="button"
-                        e2e-id="dynamicforms-reset-btn"
+                        e2e-id="pydanticforms-reset-btn"
                         onClick={(e) => {
                             resetForm(e);
                         }}
@@ -75,14 +75,14 @@ const Footer = () => {
                             <button
                                 type="button"
                                 onClick={onCancel}
-                                e2e-id="dynamicforms-cancel-btn"
+                                e2e-id="pydanticforms-cancel-btn"
                             >
                                 Annuleren
                             </button>
                         ))}
 
                     <button
-                        e2e-id="dynamicforms-send-btn"
+                        e2e-id="pydanticforms-send-btn"
                         type="submit"
                         disabled={
                             !rhf.formState.isValid ||

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

@@ -1,5 +1,5 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Main form component
  *

frontend/packages/pydantic-forms/src/components/form/Form.module.scss

@@ -1,8 +1,8 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * This component will render all the fields based on the
- * config in the dynamicFormContext
+ * config in the pydanticFormContext
  */
 import React from 'react';
 

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

@@ -1,11 +1,10 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Renders errors that are generated client-side
  */
 import React, { useCallback, useState } from 'react';
 
-// import { IconButton, IconInfo, IconWaarschuwing } from '@lib/rijkshuisstijl';
 import { usePydanticFormContext } from '@/core';
 
 export default function RenderFormErrors() {

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

@@ -1,12 +1,10 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Renders errors received from the backend after submitting the form
  */
 import React, { useCallback, useState } from 'react';
 
-// import { HelpTextContainer, IconButton, IconInfo } from '@lib/rijkshuisstijl';
-// import { HelpContainerVariant } from '@lib/rijkshuisstijl/dist/components/Elements/HelpTextContainer/HelpTextContainer';
 import { usePydanticFormContext } from '@/core';
 import { getFieldLabelById } from '@/core/helper';
 

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

@@ -1,5 +1,5 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Here we can define some validation presets we can reuse in components.
  * String for example, can have a min & max length and pattern validation rules.

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

@@ -1,7 +1,7 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
- * The main context of a dynamic form
+ * The main context of a Pydantic form
  *
  * This will fetch the jsonScheme, parse it, and handle form state and validation
  */
@@ -76,12 +76,12 @@ function PydanticFormContextProvider({
     config,
 }: PydanticFormInitialContextProps) {
     const {
-        customDataProvider: dataProvider,
+        customDataProvider,
         labelProvider,
         formProvider,
         fieldDetailProvider,
         onFieldChangeHandler,
-        dataProviderCacheKey,
+        customDataProviderCacheKey,
         resetButtonAlternative,
         footerCtaPrimaryVariant = 'purple',
         customValidationRules,
@@ -94,7 +94,7 @@ function PydanticFormContextProvider({
     } = config;
 
     // option to enable the debug mode on the fly in the browser
-    // by setting localStorage.setItem("dynamicFormsDebugMode", "true")
+    // by setting localStorage.setItem("pydanticFormsDebugMode", "true")
     // reload is required
     const debugMode = false;
 
@@ -112,7 +112,10 @@ function PydanticFormContextProvider({
         useLabelProvider(labelProvider, formKey, formIdKey);
 
     const { data: customData, isLoading: isCustomDataLoading } =
-        useCustomDataProvider(dataProviderCacheKey ?? 100, dataProvider);
+        useCustomDataProvider(
+            customDataProviderCacheKey ?? 100,
+            customDataProvider,
+        );
 
     // fetch the form definition using SWR hook
     const {
@@ -345,7 +348,8 @@ function PydanticFormContextProvider({
     const isLoading =
         isLoadingFormLabels ||
         isLoadingSchema ||
-        (dataProvider ? isCustomDataLoading : false);
+        isLoadingSchema ||
+        (customDataProvider ? isCustomDataLoading : false);
 
     const PydanticFormContextState = {
         // to prevent an issue where the sending state hangs
@@ -361,7 +365,7 @@ function PydanticFormContextProvider({
         sendLabel,
         debugMode,
         isFullFilled,
-        dataProvider,
+        customDataProvider,
         errorDetails,
         formLayout,
         successNotice,
@@ -382,7 +386,7 @@ function PydanticFormContextProvider({
         // eslint-disable-next-line no-console
         console.log('New context cycle', {
             resolver,
-            DynamicFormsContextState: PydanticFormContextState,
+            PydanticFormContextState,
         });
 
         const fieldWatcher = rhf.watch();

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

@@ -1,5 +1,5 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
  * Client side validation rules
  *

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

@@ -1,7 +1,7 @@
 /**
- * Dynamic Forms
+ * Pydantic Forms
  *
- * Helper functions to be used in DynamicForms
+ * Helper functions to be used in PydanticForms
  */
 import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 
@@ -329,7 +329,7 @@ export const getFieldAttributes = function (
 };
 
 /**
- * This method can be used to add custom extra fields to a dynamicForms instance.
+ * This method can be used to add custom extra fields to a pydanticForm instance.
  * This can be used in the formStructureMutator function.
  *
  * @param formData The formdata object
@@ -338,7 +338,7 @@ export const getFieldAttributes = function (
  * @param anchorFieldId The ID of the field where we should insert this new field
  * @returns formData
  */
-export function addCustomFieldToDynamicForm(
+export function addCustomFieldToPydanticForm(
     formData: PydanticFormData | false,
     NewElement: (props?: unknown) => JSX.Element,
     fieldId: string,
@@ -381,13 +381,13 @@ export function addCustomFieldToDynamicForm(
         customField,
         anchorIndex,
     );
-    /*
+
     formData.sections[0].fields = insertItemAtIndex(
         formData.sections[0].fields,
-        fieldId,
+        customField,
         anchorIndex,
     );
-*/
+
     return formData;
 }
 

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

@@ -1,23 +1,22 @@
 import useSWR from 'swr';
-import { FetcherResponse } from 'swr/dist/_internal';
 
-import { PydanticFormApiErrorResponse, PydanticFormLabels } from '@/types';
+import { PydanticFormCustomDataProvider, PydanticFormLabels } from '@/types';
 
 const useCustomDataProvider = (
     cacheKey: number,
-    promiseFn?: () => FetcherResponse<PydanticFormLabels>,
+    customDataProvider?: PydanticFormCustomDataProvider,
 ) => {
-    return useSWR<PydanticFormApiErrorResponse | object>(
+    return useSWR<PydanticFormLabels>(
         // cache key
-        [`dynamicFormsDataProvider-${cacheKey}`],
+        [`pydanticFormsDataProvider-${cacheKey}`],
 
         // return val
         () => {
-            if (!promiseFn) {
+            if (!customDataProvider) {
                 return {};
             }
 
-            return promiseFn();
+            return customDataProvider();
         },
 
         // swr config