@arquimedes.co/eureka-forms 3.0.33 → 3.0.34-react-compiler

package/dist/Form/FormFunctions.test.js

@@ -0,0 +1,458 @@
+/* eslint-disable @typescript-eslint/require-await */
+import { ContentState, EditorState } from 'draft-js';
+import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
+import { calcDependencies, calcValue } from './FormFunctions';
+import { stringToDraft } from '../Utils/DraftFunctions';
+import { describe, expect, test } from 'vitest';
+describe('FormFunctions', function () {
+    describe('calcValue', function () {
+        test('Empty', async () => {
+            const value = calcValue('idStep', {}, {}, {}, [], undefined);
+            expect(value).toBeUndefined();
+        });
+        test('Custom Step', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: 'CUSTOM',
+                },
+            }, {}, {
+                CUSTOM: {
+                    calcValue: () => 'custom',
+                },
+            }, [], undefined);
+            expect(value).toBe('custom');
+            const value2 = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: 'CUSTOM',
+                },
+            }, {}, {
+                CUSTOM: {},
+            }, [], undefined);
+            expect(value2).toBeUndefined();
+        });
+        test('Base Step', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    size: 1,
+                    stepPath: [],
+                },
+            }, {}, {}, [], 'Value');
+            expect(value).toBe('Value');
+        });
+        test('Textarea without editor', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    hasTextEditor: false,
+                    stepPath: [],
+                },
+            }, {}, {}, [], 'Value');
+            expect(value.value).toBe('Value');
+            expect(value.draft.blocks[0].text).toBe('Value');
+        });
+        test('Textarea with editor', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    hasTextEditor: true,
+                    stepPath: [],
+                },
+            }, {}, {}, [], EditorState.createWithContent(ContentState.createFromText('Value')));
+            expect(value.value).toBe('Value');
+            expect(value.draft.blocks[0].text).toBe('Value');
+        });
+        test('FileUpload', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.FILEUPLOAD,
+                    label: '',
+                    description: '',
+                    idSection: 'idSection',
+                    required: false,
+                    stepPath: [],
+                },
+            }, {}, {}, [], [
+                {
+                    S3Key: 'S3Key',
+                    fileName: 'fileName',
+                    extra: 'extra',
+                },
+            ]);
+            expect(value[0].S3Key).toBe('S3Key');
+            expect(value[0].extra).toBeUndefined();
+        });
+        test('ClassifierSelector', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.CLASSIFIER_SELECTOR,
+                },
+            }, {}, {}, [], {
+                value: 'value',
+                label: 'Label',
+            });
+            expect(value).toBe('value');
+        });
+        test('Selector', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.SELECTOR,
+                },
+            }, {}, {}, [], {
+                value: 'value',
+                label: 'Label',
+            });
+            expect(value).toBe('value');
+        });
+        test('TimePicker', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TIMEPICKER,
+                },
+            }, {}, {}, [], {
+                days: 0,
+                hours: 0,
+                minutes: 0,
+                working: true,
+            });
+            expect(value.days).toBe(0);
+            expect(value.hours).toBe(0);
+            expect(value.minutes).toBe(0);
+            expect(value.working).toBe(true);
+        });
+        test('Title', async () => {
+            const deleteIds = [];
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TITLE,
+                },
+            }, {}, {}, deleteIds, null);
+            expect(value).toBeUndefined();
+        });
+        test('Collapsible', async () => {
+            const deleteIds = [];
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.COLLAPSIBLE,
+                },
+            }, {}, {}, deleteIds, null);
+            expect(deleteIds[0]).toBe('idStep');
+            expect(value).toBeUndefined();
+        });
+        test('Mapper with deleted', async () => {
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.MAPPER,
+                },
+            }, {}, {}, [], { elements: [{ deleted: true }], page: 0 });
+            expect(value.length).toBe(0);
+        });
+        test('Mapper', async () => {
+            const deleteIds = [];
+            const value = calcValue('idStep', {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.MAPPER,
+                    steps: {
+                        idSubStep: {
+                            id: 'idSubStep',
+                            type: FormStepTypes.TEXTINPUT,
+                        },
+                    },
+                },
+            }, {
+                mappedIdSubStep: 'subValue',
+            }, {}, deleteIds, {
+                elements: [
+                    {
+                        id: 'idElement',
+                        ids: {
+                            idSubStep: 'mappedIdSubStep',
+                        },
+                        originalValues: {
+                            original: 'Original',
+                        },
+                        value: 'value',
+                    },
+                ],
+                page: 0,
+            });
+            expect(value[0].id).toBe('idElement');
+            expect(value[0].original).toBe('Original');
+            expect(value[0].value).toBe('value');
+            expect(value[0].idSubStep).toBe('subValue');
+        });
+    });
+    describe('calcDependencies', function () {
+        test('Empty', async () => {
+            const dependencyStore = calcDependencies({}, {}, {});
+            expect(Object.keys(dependencyStore).length).toBe(0);
+        });
+        test('Basic Dependency', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps);
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTINPUT);
+        });
+        test('Basic Dependency with originalValue', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    idSection: 'FIRST',
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep: 'Original',
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBe('Original');
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTINPUT);
+        });
+        test('Basic TextArea Dependency with originalValue with editor', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    idSection: 'FIRST',
+                    hasTextEditor: true,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep: stringToDraft('Original'),
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBe('Original');
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTAREA);
+        });
+        test('Basic TextArea Dependency with originalValue without editor', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTAREA,
+                    idSection: 'FIRST',
+                    hasTextEditor: false,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep: 'Original',
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBe('Original');
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+            expect(dependencyStore.idStep.type).toBe(FormStepTypes.TEXTAREA);
+        });
+        test('Basic Dependency with missing originalValue', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idOriginal'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {},
+                global: { idOriginal: 'Original' },
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idOriginal.value).toBe('Original');
+            expect(dependencyStore.idOriginal.dependents.length).toBe(1);
+            expect(dependencyStore.idOriginal.type).toBe('ORIGINAL');
+        });
+        test('Missing Dependency', async () => {
+            const dependencyStore = calcDependencies({
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idMissingStep'],
+                },
+            }, {}, {});
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idMissingStep.value).toBeNull();
+            expect(dependencyStore.idMissingStep.dependents.length).toBe(1);
+            expect(dependencyStore.idMissingStep.type).toBe('MISSING');
+        });
+        test('Basic Dependency without dependents', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, { global: {}, sections: {} }, false);
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+        });
+        test('Double Basic Dependency', async () => {
+            const dependencyStore = calcDependencies({
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+                idStep3: {
+                    id: 'idStep3',
+                    type: FormStepTypes.TEXTINPUT,
+                    dependencies: ['idStep'],
+                },
+            }, {}, {});
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(2);
+        });
+        test('EntityValue Dependencies', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.ENTITYVALUEPICKER,
+                    path: [
+                        {
+                            type: EntityValueDataTypes.STEP,
+                            idStep: 'idStep',
+                        },
+                        {
+                            type: EntityValueDataTypes.VALUE,
+                        },
+                    ],
+                    filters: [
+                        {
+                            type: EntityValueDataTypes.STEP,
+                            idStep: 'idMissingStep',
+                        },
+                    ],
+                    dependencies: ['idMissingStep'],
+                    options: {},
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps);
+            expect(Object.keys(dependencyStore).length).toBe(2);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+        });
+        test('Mapper Dependencies', async () => {
+            const allSteps = {
+                idStep: {
+                    id: 'idStep',
+                    type: FormStepTypes.TEXTINPUT,
+                    idSection: 'FIRST',
+                },
+                idStep2: {
+                    id: 'idStep2',
+                    type: FormStepTypes.MAPPER,
+                    idSection: 'FIRST',
+                    steps: {
+                        idSubStep: {
+                            id: 'idSubStep',
+                            type: FormStepTypes.TEXTINPUT,
+                            idSection: 'FIRST',
+                            dependencies: ['idStep'],
+                        },
+                    },
+                },
+            };
+            const dependencyStore = calcDependencies(allSteps, {}, allSteps, {}, {
+                sections: {
+                    FIRST: {
+                        idStep2: {
+                            elements: [
+                                {
+                                    id: 'idElement',
+                                    ids: {
+                                        idSubStep: 'mappedIdSubStep',
+                                    },
+                                },
+                            ],
+                            page: 0,
+                        },
+                        mappedIdSubStep: 'Original',
+                    },
+                },
+                global: {},
+            });
+            expect(Object.keys(dependencyStore).length).toBe(1);
+            expect(dependencyStore.idStep.value).toBeNull();
+            expect(dependencyStore.idStep.dependents.length).toBe(1);
+        });
+    });
+});

package/dist/Form/FormHooks.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { Form } from '../@Types';
-export declare function useWidthStats(containerRef: React.RefObject<HTMLDivElement>, form: Form, postview: boolean, internal: boolean): void;
+export declare function useWidthStats(containerRef: React.RefObject<HTMLDivElement | null>, form: Form, postview: boolean, internal: boolean): void;

package/dist/Form/FormHooks.js

@@ -2,41 +2,34 @@ import { useCallback, useLayoutEffect } from 'react';
 import { updateWidthStats } from '../States/WidthStatsSlice';
 import { useAppDispatch } from '../hooks';
 export function useWidthStats(containerRef, form, postview, internal) {
-    var calcWidthStats = useCallback(function (currentWidth) {
-        var currentBreakPoint = form.size.blockNum;
-        var padding = postview || internal || !form.isStandAlone ? 0 : 40;
-        while (currentWidth <
-            (form.size.blockSize + form.size.spacingSize) *
-                currentBreakPoint +
-                padding) {
+    const calcWidthStats = useCallback((currentWidth) => {
+        let currentBreakPoint = form.size.blockNum;
+        const padding = postview || internal || !form.isStandAlone ? 0 : 40;
+        while (currentWidth < (form.size.blockSize + form.size.spacingSize) * currentBreakPoint + padding) {
             currentBreakPoint--;
         }
         return {
-            isResponsive: currentWidth <
-                (form.size.blockSize + form.size.spacingSize) *
-                    form.size.blockNum +
-                    padding,
-            isMobile: currentWidth <
-                (form.size.blockSize + form.size.spacingSize) * 2 + padding,
-            currentBreakPoint: currentBreakPoint,
+            isResponsive: currentWidth < (form.size.blockSize + form.size.spacingSize) * form.size.blockNum + padding,
+            isMobile: currentWidth < (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+            currentBreakPoint,
         };
     }, [form, postview, internal]);
-    var dispatch = useAppDispatch();
+    const dispatch = useAppDispatch();
     /** Calcs the currentBreakPoint and if is mobile */
-    useLayoutEffect(function () {
-        var handleResize = function () {
-            var _a;
-            var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    useLayoutEffect(() => {
+        const handleResize = () => {
+            const currentWidth = containerRef?.current?.offsetWidth;
             if (currentWidth !== undefined) {
-                var current = calcWidthStats(currentWidth);
+                const current = calcWidthStats(currentWidth);
                 dispatch(updateWidthStats(current));
             }
         };
         /** On load add a resize listener to calc the currentBreakpoint */
         window.addEventListener('resize', handleResize);
         handleResize();
-        return function () {
+        return () => {
             window.removeEventListener('resize', handleResize);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }

package/dist/Form/FormTypes/ColumnForm/ColumnForm.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormComponentProps } from '../../Form';
 declare function ColumnForm({ onSubmit, customSubmitBtns, ...props }: FormComponentProps): JSX.Element;
 export default ColumnForm;