feat: added more form stories & tests update

packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.stories.tsx

@@ -1,6 +1,8 @@
 import { DynamicFormV2 } from './DynamicForm';
+import { ConditionalRenderingShowcaseComponent } from './_stories/ConditionalRenderingShowcase';
 import { FileUploadShowcaseComponent } from './_stories/FileUploadShowcase';
 import { InputsShowcaseComponent } from './_stories/InputsShowcase';
+import { ValidationShowcaseComponent } from './_stories/ValidationShowcase/ValidationShowcase';
 
 export default {
   component: DynamicFormV2,
@@ -13,3 +15,11 @@ export const InputsShowcase = {
 export const FileUploadShowcase = {
   render: () => <FileUploadShowcaseComponent />,
 };
+
+export const ValidationShowcase = {
+  render: () => <ValidationShowcaseComponent />,
+};
+
+export const ConditionalRenderingShowcase = {
+  render: () => <ConditionalRenderingShowcaseComponent />,
+};

packages/ui/src/components/organisms/Form/DynamicForm/_stories/ConditionalRenderingShowcase/ConditionalRenderingShowcase.tsx

@@ -0,0 +1,28 @@
+import { AnyObject } from '@/common';
+import { useState } from 'react';
+import { JSONEditorComponent } from '../../../Validator/_stories/components/JsonEditor/JsonEditor';
+import { DynamicFormV2 } from '../../DynamicForm';
+import { schema } from './schema';
+
+export const ConditionalRenderingShowcaseComponent = () => {
+  const [context, setContext] = useState<AnyObject>({});
+
+  return (
+    <div className="flex h-screen w-full flex-row flex-nowrap gap-4">
+      <div className="w-1/2">
+        <DynamicFormV2
+          elements={schema}
+          values={context}
+          onSubmit={() => {
+            console.log('onSubmit');
+          }}
+          onChange={setContext}
+          // onEvent={console.log}
+        />
+      </div>
+      <div className="w-1/2">
+        <JSONEditorComponent value={context} readOnly />
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/organisms/Form/DynamicForm/_stories/ConditionalRenderingShowcase/index.ts

@@ -0,0 +1 @@
+export * from './ConditionalRenderingShowcase';

packages/ui/src/components/organisms/Form/DynamicForm/_stories/ConditionalRenderingShowcase/schema.ts

@@ -0,0 +1,80 @@
+import { IFormElement } from '../../types';
+
+export const schema: Array<IFormElement<any, any>> = [
+  {
+    id: 'first-name',
+    element: 'textfield',
+    valueDestination: 'firstName',
+    params: {
+      label: 'First Name',
+      placeholder: 'Enter something to reveal some more!',
+    },
+    validate: [
+      {
+        type: 'required',
+        value: {},
+        message: 'First name is required',
+        applyWhen: {
+          type: 'json-logic',
+          value: {
+            '!': { var: 'forceEverythingOptionnal' },
+          },
+        },
+      },
+    ],
+  },
+  {
+    id: 'reveal-more',
+    element: 'checkboxfield',
+    valueDestination: 'revealMore',
+    params: {
+      label: 'Reveal More',
+    },
+  },
+  {
+    id: 'force-everything-optionnal',
+    element: 'checkboxfield',
+    valueDestination: 'forceEverythingOptionnal',
+    params: {
+      label: 'Force everything to be optionnal',
+    },
+  },
+  {
+    id: 'last-name',
+    element: 'textfield',
+    valueDestination: 'lastName',
+    params: {
+      label: 'Last Name',
+    },
+    hidden: [
+      {
+        engine: 'json-logic',
+        value: {
+          and: [{ '!': { var: 'firstName' } }, { '!': { var: 'revealMore' } }],
+        },
+      },
+    ],
+    validate: [
+      {
+        type: 'required',
+        value: {},
+        message: 'Last name is required',
+        applyWhen: {
+          type: 'json-logic',
+          value: {
+            and: [{ '!!': { var: 'firstName' } }, { '!': { var: 'forceEverythingOptionnal' } }],
+          },
+        },
+      },
+    ],
+  },
+  {
+    id: 'submit',
+    element: 'submitbutton',
+    valueDestination: 'submit',
+    params: {
+      label: 'Submit',
+      disableWhenFormIsInvalid: true,
+    },
+  },
+];

packages/ui/src/components/organisms/Form/DynamicForm/_stories/ValidationShowcase/ValidationShowcase.tsx

@@ -0,0 +1,28 @@
+import { AnyObject } from '@/common';
+import { useState } from 'react';
+import { JSONEditorComponent } from '../../../Validator/_stories/components/JsonEditor/JsonEditor';
+import { DynamicFormV2 } from '../../DynamicForm';
+import { schema } from './schema';
+
+export const ValidationShowcaseComponent = () => {
+  const [context, setContext] = useState<AnyObject>({});
+
+  return (
+    <div className="flex h-screen w-full flex-row flex-nowrap gap-4">
+      <div className="w-1/2">
+        <DynamicFormV2
+          elements={schema}
+          values={context}
+          onSubmit={() => {
+            console.log('onSubmit');
+          }}
+          onChange={setContext}
+          // onEvent={console.log}
+        />
+      </div>
+      <div className="w-1/2">
+        <JSONEditorComponent value={context} readOnly />
+      </div>
+    </div>
+  );
+};

packages/ui/src/components/organisms/Form/DynamicForm/_stories/ValidationShowcase/schema.ts

@@ -0,0 +1,136 @@
+import { IFormElement } from '../../types';
+
+export const schema: Array<IFormElement<any, any>> = [
+  {
+    id: 'first-name-field',
+    element: 'textfield',
+    valueDestination: 'firstName',
+    params: {
+      label: 'First Name',
+      placeholder: 'Enter your first name',
+    },
+    validate: [
+      {
+        type: 'required',
+        value: {},
+        message: 'First name is required',
+      },
+    ],
+  },
+  {
+    id: 'last-name-field',
+    element: 'textfield',
+    valueDestination: 'lastName',
+    params: {
+      label: 'Last Name',
+      placeholder: 'Enter your last name',
+    },
+    validate: [
+      {
+        type: 'required',
+        value: {},
+        message: 'Last name is required',
+      },
+    ],
+  },
+  {
+    id: 'date-of-birth-field',
+    element: 'datefield',
+    valueDestination: 'dateOfBirth',
+    params: {
+      label: 'Date of Birth',
+      placeholder: 'Enter your date of birth',
+    },
+    validate: [
+      {
+        type: 'required',
+        value: {},
+        message: 'Date of birth is required',
+      },
+    ],
+  },
+  {
+    id: 'passport-photo',
+    element: 'filefield',
+    valueDestination: 'passportPhoto',
+    params: {
+      label: 'Passport Photo',
+      placeholder: 'Select your passport photo',
+    },
+    validate: [
+      {
+        type: 'required',
+        value: {},
+        message: 'Passport photo is required',
+        applyWhen: {
+          type: 'json-logic',
+          value: {
+            '!': { var: 'iDontHaveDocument' },
+          },
+        },
+      },
+    ],
+  },
+  {
+    id: 'idont-have-document-checkbox',
+    element: 'checkboxfield',
+    valueDestination: 'iDontHaveDocument',
+    params: {
+      label: "I don't have a document",
+    },
+  },
+  {
+    id: 'workplaces',
+    valueDestination: 'workplaces',
+    element: 'fieldlist',
+    params: {
+      label: 'Workplaces',
+      addButtonLabel: 'Add Workplace',
+    },
+    validate: [
+      { type: 'required', value: {}, message: 'Workplaces are required' },
+      {
+        type: 'minLength',
+        value: { minLength: 2 },
+        message: 'At least {minLength} workplaces are required',
+      },
+    ],
+    children: [
+      {
+        id: 'workplace-name',
+        element: 'textfield',
+        valueDestination: 'workplaces[$0].workplaceName',
+        params: {
+          label: 'Workplace Name',
+        },
+        validate: [{ type: 'required', value: {}, message: 'Workplace name is required' }],
+      },
+      {
+        id: 'workplace-start-date',
+        element: 'datefield',
+        valueDestination: 'workplaces[$0].workplaceStartDate',
+        params: {
+          label: 'Workplace Start Date',
+        },
+        validate: [{ type: 'required', value: {}, message: 'Workplace start date is required' }],
+      },
+      {
+        id: 'certificate-of-employment',
+        element: 'filefield',
+        valueDestination: 'workplaces[$0].certificateOfEmployment',
+        params: {
+          label: 'Certificate of Employment',
+        },
+        validate: [],
+      },
+    ],
+  },
+  {
+    id: 'submit-button',
+    element: 'submitbutton',
+    valueDestination: 'submit',
+    params: {
+      label: 'Submit',
+    },
+  },
+];

packages/ui/src/components/organisms/Form/DynamicForm/fields/FileField/hooks/useFileUpload/useFileUpload.ts

@@ -27,6 +27,13 @@ export const useFileUpload = (
 
       const { uploadSettings } = params;
 
+      if (!uploadSettings) {
+        onChange(e.target?.files?.[0] as File);
+        console.log('Failed to upload, no upload settings provided');
+
+        return;
+      }
+
       const uploadParams = {
         ...uploadSettings,
         method: uploadSettings?.method || 'POST',