1716: Strips all styling

Author: Ruben van Leeuwen

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

@@ -7,7 +7,7 @@ import React, { useCallback, useState } from 'react';
 
 import RenderReactHookFormErrors from '@/components/render/RenderReactHookFormErrors';
 import { usePydanticFormContext } from '@/core';
-import { navPreventDefaultFn } from '@/utils';
+import { preventDefault } from '@/utils';
 
 const Footer = () => {
     const {
@@ -114,7 +114,7 @@ const Footer = () => {
                             <a
                                 className="ml-1 font-weight-bold"
                                 href="#"
-                                onClick={navPreventDefaultFn(toggleErrors)}
+                                onClick={preventDefault(toggleErrors)}
                             >
                                 Toon info
                             </a>

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}