Merge pull request #24 from workfloworchestrator/1716-cleanup

1716 Removes some configuration options we don't need anymore

Author: DutchBen

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

@@ -26,15 +26,13 @@ export const PydanticForm = ({
     metaData,
     ...contextProps
 }: PydanticFormProps) => (
-    <div e2e-id={`pydanticforms-${id}`}>
-        <PydanticFormContextProvider
-            {...contextProps}
-            formKey={id}
-            metaData={metaData}
-        >
-            {RenderForm}
-        </PydanticFormContextProvider>
-    </div>
+    <PydanticFormContextProvider
+        {...contextProps}
+        formKey={id}
+        metaData={metaData}
+    >
+        {RenderForm}
+    </PydanticFormContextProvider>
 );
 
 export default PydanticForm;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const DividerField = () => {
-    return <hr css={{ margin: '16px 0' }} />;
+    return <hr />;
 };

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

@@ -46,11 +46,8 @@ export const FieldWrap = ({
             required={pydanticFormField.required}
             isInvalid={!!isInvalid}
             error={errorMsg as string}
-            className="mt-0 mb-0"
         >
-            <div>
-                <div className="w-100">{children}</div>
-            </div>
+            <div>{children}</div>
         </FormRow>
     );
 };

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

@@ -18,12 +18,6 @@ export const IntegerField = ({
             disabled={disabled}
             value={value}
             type="number"
-            style={{
-                width: '400px',
-                height: '30px',
-                padding: '4px',
-                marginTop: '4px',
-            }}
         />
     );
 };

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

@@ -5,9 +5,7 @@ import type { PydanticFormElementProps } from '@/types';
 export const LabelField = ({ pydanticFormField }: PydanticFormElementProps) => {
     return (
         <div>
-            <label>
-                <h3>{pydanticFormField?.default}</h3>
-            </label>
+            <label>{pydanticFormField?.default}</label>
         </div>
     );
 };

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

@@ -14,10 +14,6 @@ export const TextAreaField = ({
             onBlur={onBlur}
             defaultValue={value}
             disabled={disabled}
-            style={{
-                width: '450px',
-                height: '100px',
-            }}
         />
     );
 };

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

@@ -21,11 +21,5 @@ export const TextField = ({
         disabled={disabled}
         value={value}
         type="text"
-        style={{
-            width: '400px',
-            height: '30px',
-            padding: '4px',
-            marginTop: '4px',
-        }}
     />
 );

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

@@ -3,11 +3,10 @@
  *
  * Form footer component
  */
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 
 import RenderReactHookFormErrors from '@/components/render/RenderReactHookFormErrors';
 import { usePydanticFormContext } from '@/core';
-import { navPreventDefaultFn } from '@/utils';
 
 const Footer = () => {
     const {
@@ -21,35 +20,21 @@ const Footer = () => {
         allowUntouchedSubmit,
     } = usePydanticFormContext();
 
-    const [showErrors, setShowErrors] = useState(false);
-
-    const toggleErrors = useCallback(() => {
-        setShowErrors((state) => !state);
-        rhf.trigger();
-    }, [rhf]);
-
     const hasErrors = !!Object.keys(rhf.formState.errors).length;
 
     return (
         <div style={{ height: '200px' }}>
-            {(!!footerComponent || (showErrors && hasErrors)) && (
+            {(!!footerComponent || hasErrors) && (
                 <div>
                     {footerComponent}
 
-                    {showErrors && <RenderReactHookFormErrors />}
+                    {<RenderReactHookFormErrors />}
                 </div>
             )}
-            <div
-                style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    margin: '8px',
-                }}
-            >
+            <div>
                 {resetButtonAlternative ?? (
                     <button
                         type="button"
-                        e2e-id="pydanticforms-reset-btn"
                         onClick={(e) => {
                             resetForm(e);
                         }}
@@ -63,38 +48,18 @@ const Footer = () => {
                 {rhf.formState.isValid &&
                     !allowUntouchedSubmit &&
                     !rhf.formState.isDirty && (
-                        <div
-                            className="d-flex mv-0 mr-3"
-                            style={{ opacity: 0.8 }}
-                        >
-                            Het formulier is nog niet aangepast
-                        </div>
+                        <div>Het formulier is nog niet aangepast</div>
                     )}
 
                 {!!onCancel &&
                     (cancelButton ?? (
-                        <button
-                            type="button"
-                            onClick={onCancel}
-                            e2e-id="pydanticforms-cancel-btn"
-                            style={{
-                                marginLeft: '8px',
-                                height: '28px',
-                                padding: '4px',
-                            }}
-                        >
+                        <button type="button" onClick={onCancel}>
                             Annuleren
                         </button>
                     ))}
 
                 <button
-                    e2e-id="pydanticforms-send-btn"
                     type="submit"
-                    style={{
-                        marginLeft: '8px',
-                        height: '28px',
-                        padding: '4px',
-                    }}
                     disabled={
                         !rhf.formState.isValid ||
                         (!allowUntouchedSubmit &&
@@ -106,21 +71,7 @@ const Footer = () => {
                 </button>
             </div>
             {!rhf.formState.isValid && rhf.formState.isDirty && (
-                <div className="d-flex mv-0 mr-3" style={{ opacity: 0.8 }}>
-                    Het formulier is nog niet correct ingevuld{' '}
-                    {!showErrors && (
-                        <>
-                            -{' '}
-                            <a
-                                className="ml-1 font-weight-bold"
-                                href="#"
-                                onClick={navPreventDefaultFn(toggleErrors)}
-                            >
-                                Toon info
-                            </a>
-                        </>
-                    )}
-                </div>
+                <div>Het formulier is nog niet correct ingevuld</div>
             )}
         </div>
     );

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

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import { usePydanticFormContext } from '@/core';
 import { isNullableField } from '@/core/helper';
 import { PydanticFormField } from '@/types';
-import { navPreventDefaultFn } from '@/utils';
+import { preventDefault } from '@/utils';
 
 const ResetNullableFieldTrigger = ({ field }: { field: PydanticFormField }) => {
     const { rhf } = usePydanticFormContext();
@@ -22,7 +22,7 @@ const ResetNullableFieldTrigger = ({ field }: { field: PydanticFormField }) => {
             href="#reset"
             className="ml-2"
             style={{ fontSize: '14px' }}
-            onClick={navPreventDefaultFn(setNullValue)}
+            onClick={preventDefault(setNullValue)}
         >
             Reset
         </a>

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

@@ -43,27 +43,14 @@ const RenderForm = ({
         }
 
         return (
-            <div className="info-box d-flex align-items-center">
-                {successNotice ?? 'Je inzending is succesvol ontvangen'}
-            </div>
+            <div>{successNotice ?? 'Je inzending is succesvol ontvangen'}</div>
         );
     }
     const { formRenderer } = config || {};
     const Renderer = formRenderer ?? FormRenderer;
 
     return (
-        <form
-            action={''}
-            onSubmit={submitForm}
-            style={{
-                border: 'thin solid lightgrey',
-                width: '500px',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: '16px',
-            }}
-        >
+        <form action={''} onSubmit={submitForm}>
             {title !== false && <h2>{title ?? formData.title}</h2>}
 
             {headerComponent}