@arquimedes.co/eureka-forms 2.0.34-test → 2.0.36-test

package/src/Form/FormFunctions.ts

@@ -1,263 +0,0 @@
-import { RawDraftContentState, convertFromRaw, convertToRaw } from 'draft-js';
-import { FormStep, Mapper } from '../@Types/FormStep';
-import StepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
-import { DependencyStore, StepDependency } from './Form';
-import { CustomStep } from '../FormSteps/CustomStep';
-import { CBRFormStep } from '../@Types/CBRFormStep';
-import { MapperElement } from '../@Types/MapperElement';
-import { ValuesStore } from '../States/SiteSlice';
-import { calcRecursiveData } from '../App/AppFunctions';
-
-/**
- * Function that cals the value of a step to output on submit
- */
-export const calcValue = (
-    idStep: string,
-    steps: Record<string, FormStep>,
-    values: Record<string, any>,
-    customSteps: Record<string, CustomStep> | undefined,
-    deleteIds: string[],
-    value = values[idStep]
-): any => {
-    const step = steps[idStep];
-    if (!step) return value;
-    const custom = customSteps?.[step?.type];
-    if (custom !== undefined) {
-        return custom.calcValue?.(step, value) ?? value;
-    } else {
-        switch (step.type) {
-            case StepTypes.TEXTAREA: {
-                if (step.hasTextEditor) {
-                    const currentContent = value.getCurrentContent();
-                    return {
-                        value: currentContent.getPlainText(),
-                        draft: convertToRaw(currentContent),
-                    };
-                } else {
-                    return {
-                        value,
-                        draft: stringToDraft(value),
-                    };
-                }
-            }
-            case StepTypes.FILEUPLOAD: {
-                return value.map((val: any) => ({
-                    fileName: val.fileName,
-                    S3Key: val.S3Key,
-                }));
-            }
-            case StepTypes.SELECTOR:
-            case StepTypes.CLASSIFIER_SELECTOR: {
-                return value.value;
-            }
-            case StepTypes.MAPPER: {
-                const elements: MapperElement<any>[] = value?.filter(
-                    (element: any) => element.deleted !== true
-                );
-
-                const mappedValues: Record<string, any>[] = [];
-                for (const element of elements) {
-                    const newValue: Record<string, any> = {
-                        id: element.id,
-                    };
-                    for (const key of Object.keys(element.originalValues)) {
-                        newValue[key] = element.originalValues[key];
-                    }
-                    if (element.value) newValue.value = element.value;
-                    for (const idStep of Object.keys(step.steps)) {
-                        const mappedId = element.ids[idStep];
-                        if (values[mappedId] !== undefined) {
-                            newValue[idStep] = calcValue(
-                                idStep,
-                                step.steps,
-                                values,
-                                customSteps,
-                                deleteIds,
-                                values[mappedId]
-                            );
-                            deleteIds.push(mappedId);
-                        }
-                    }
-                    mappedValues.push(newValue);
-                }
-                return mappedValues;
-            }
-            case StepTypes.TITLE: {
-                return value ?? undefined;
-            }
-            case StepTypes.COLLAPSIBLE:
-                deleteIds.push(idStep);
-                return;
-            default:
-                if ((step?.type as any) === 'CBR_INCIDENCIAS') {
-                    return value?.filter(
-                        (incidencia: any) => incidencia.deleted !== true
-                    );
-                }
-                return value;
-        }
-    }
-};
-
-function stringToDraft(text: string): any {
-    const draftStructure = {
-        blocks: [] as any[],
-        entityMap: {},
-    };
-    text.split('\n').forEach((element, index) => {
-        draftStructure.blocks.push({
-            key: String(index),
-            text: element,
-            type: 'unstyled',
-            depth: 0,
-            inlineStyleRanges: [],
-            entityRanges: [],
-            data: {},
-        });
-    });
-    return draftStructure as RawDraftContentState;
-}
-
-export function calcDependencies(
-    steps: Record<string, FormStep | CBRFormStep>,
-    customSteps: Record<string, CustomStep> = {},
-    allSteps: Record<string, FormStep | CBRFormStep> = steps,
-    dependencies: DependencyStore = {},
-    values: ValuesStore = {
-        global: {},
-        sections: {},
-    },
-    addDependents = true
-): DependencyStore {
-    for (const step of Object.values(steps)) {
-        if (step.dependencies) {
-            for (const idDep of step.dependencies) {
-                if (
-                    dependencies[idDep] === undefined &&
-                    (addDependents || allSteps[idDep])
-                )
-                    dependencies[idDep] = calcStepDependency(
-                        idDep,
-                        allSteps,
-                        values,
-                        customSteps
-                    );
-                if (addDependents) dependencies[idDep].dependents.push(step);
-            }
-        }
-        if (step.type === StepTypes.ENTITYVALUEPICKER) {
-            for (const dep of [...step.path, ...step.filters]) {
-                if (dep.type !== EntityValueDataTypes.STEP) continue;
-                if (step.dependencies?.includes(dep.idStep)) continue;
-                if (
-                    dependencies[dep.idStep] === undefined &&
-                    (addDependents || allSteps[dep.idStep])
-                ) {
-                    dependencies[dep.idStep] = calcStepDependency(
-                        dep.idStep,
-                        allSteps,
-                        values,
-                        customSteps
-                    );
-                }
-                if (addDependents)
-                    dependencies[dep.idStep].dependents.push(step);
-            }
-        }
-        if (step.type === StepTypes.MAPPER) {
-            const subSteps = calcMapperSubSteps(
-                step,
-                values.sections[step.idSection]?.[step.id],
-                customSteps
-            );
-            const hasSubSteps = Object.keys(subSteps).length > 0;
-            calcDependencies(
-                hasSubSteps ? subSteps : step.steps,
-                customSteps,
-                { ...allSteps, ...subSteps },
-                dependencies,
-                values,
-                hasSubSteps
-            );
-        }
-    }
-    return dependencies;
-}
-
-export const calcMapperSubSteps = (
-    step: Mapper,
-    elements: MapperElement<any>[] = [],
-    customSteps: Record<string, CustomStep>
-): Record<string, FormStep> => {
-    const newSteps: Record<string, FormStep> = {};
-    for (const element of elements) {
-        const elemSteps: Record<string, FormStep> = {};
-        for (const idSubStep of Object.keys(step.steps)) {
-            const baseStep = JSON.parse(
-                JSON.stringify(step.steps[idSubStep] ?? '{}')
-            );
-            const newIdStep = element.ids[idSubStep];
-            baseStep.id = newIdStep;
-            elemSteps[newIdStep] = baseStep;
-            newSteps[newIdStep] = baseStep;
-        }
-        calcRecursiveData(element, elemSteps, customSteps);
-    }
-    return newSteps;
-};
-
-function calcStepDependency(
-    idStep: string,
-    steps: Record<string, FormStep | CBRFormStep>,
-    values: ValuesStore,
-    customSteps: Record<string, CustomStep>
-): StepDependency {
-    const depStep = steps[idStep];
-    if (!depStep) {
-        console.error('Missing Step Dependency:', idStep);
-        const originalValue = values.global[idStep];
-        return {
-            type: originalValue ? 'ORIGINAL' : ('MISSING' as any),
-            value: originalValue ?? null,
-            dependents: [],
-        };
-    }
-    const originalValue = values.sections[depStep.idSection]?.[depStep.id];
-    return {
-        type: depStep.type,
-        value: calcStepDependencyValue(depStep, originalValue, customSteps),
-        dependents: [],
-    };
-}
-
-function calcStepDependencyValue(
-    depStep: FormStep | CBRFormStep,
-    originalValue: any,
-    customSteps: Record<string, CustomStep>
-): StepDependency['value'] {
-    const custom = customSteps[depStep?.type];
-    if (custom?.calcDependencyValue) {
-        return custom.calcDependencyValue(depStep, originalValue);
-    }
-    switch (depStep.type) {
-        case StepTypes.TEXTAREA: {
-            if (depStep.hasTextEditor) {
-                return originalValue
-                    ? convertFromRaw(originalValue).getPlainText()
-                    : null;
-            } else {
-                return originalValue ?? null;
-            }
-        }
-        case StepTypes.MAPPER: {
-            //TODO: Esto aun no se usa
-            return (
-                originalValue?.map(
-                    (mapperValue: any) => mapperValue.value ?? mapperValue
-                ) ?? null
-            );
-        }
-        default:
-            return originalValue ?? null;
-    }
-}

package/src/Form/FormHooks.ts

@@ -1,68 +0,0 @@
-import { createSelector } from 'reselect';
-import { RootState } from '../Utils/store';
-import { useCallback, useLayoutEffect } from 'react';
-import { updateWidthStats } from '../States/WidthStatsSlice';
-import { useAppDispatch } from '../hooks';
-import { WidthStats } from './Form';
-import { Form } from '../@Types';
-
-export const selectCurrentValues = createSelector(
-    [
-        (state: RootState): string | null => state.site.idCurrentSection,
-        (state: RootState): Record<string, Record<string, any>> =>
-            state.site.values.sections,
-    ],
-    (idCurrent, values) => values[idCurrent ?? ''] ?? {}
-);
-
-export function useWidthStats(
-    containerRef: React.RefObject<HTMLDivElement>,
-    form: Form,
-    postview: boolean,
-    internal: boolean
-): void {
-    const calcWidthStats = useCallback(
-        (currentWidth: number): WidthStats => {
-            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,
-            };
-        },
-        [form, postview, internal]
-    );
-    const dispatch = useAppDispatch();
-
-    /** Calcs the currentBreakPoint and if is mobile */
-    useLayoutEffect(() => {
-        const handleResize = (): void => {
-            const currentWidth = containerRef?.current?.offsetWidth;
-            if (currentWidth !== undefined) {
-                const current = calcWidthStats(currentWidth);
-                dispatch(updateWidthStats(current));
-            }
-        };
-        /** On load add a resize listener to calc the currentBreakpoint */
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return (): void => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-}

package/src/Form/FormTypes/ColumnForm/ColumnForm.module.css

@@ -1,19 +0,0 @@
-.container {
-    width: fit-content;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 100%;
-    position: relative;
-}
-.curtain {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-}
-.submitBtnContainer {
-    margin-top: 10px;
-    width: 200px;
-    max-width: calc(100% - 40px);
-}

package/src/Form/FormTypes/ColumnForm/ColumnForm.tsx

@@ -1,85 +0,0 @@
-import { useCallback, useContext, useState } from 'react';
-import { FormComponentProps } from '../../Form';
-import styles from './ColumnForm.module.css';
-import React from 'react';
-import Terms from '../../Terms/Terms';
-import { useFormContext } from 'react-hook-form';
-import { useAppSelector } from '../../../hooks';
-import Section from '../../Section/Section';
-import CustomContext from '../../../Contexts/CustomContext';
-import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
-
-function ColumnForm({
-    onSubmit,
-    customSubmitBtns,
-}: FormComponentProps): JSX.Element {
-    const [loading, setLoading] = useState(false);
-    const { postview, editable, formStyle } = useAppSelector(
-        (state) => state.global
-    );
-    const { trigger, getValues, handleSubmit } = useFormContext();
-    const { sendLabel } = useContext(CustomContext);
-    const previous = useAppSelector((state) => state.site.previousSections);
-    const next = useAppSelector((state) => state.site.nextSections);
-
-    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
-    const handleErrors = handleSubmit(
-        () => {},
-        (errors) => {
-            console.error('Errors:', errors);
-        }
-    );
-
-    const submit = useCallback(async (): Promise<Record<
-        string,
-        any
-    > | void> => {
-        setLoading(true);
-        const valid = await trigger(undefined, { shouldFocus: true });
-        /** Imprimir errores si no es valido */
-        if (!valid) {
-            handleErrors();
-            return setLoading(false);
-        }
-        const values = await onSubmit(getValues());
-        setLoading(false);
-        return values;
-    }, []);
-
-    return (
-        <div
-            className={styles.container}
-            style={{ color: formStyle.textColor }}
-        >
-            {loading && <div className={styles.curtain}></div>}
-            {previous.map((idSection) => (
-                <Section key={idSection} idSection={idSection} />
-            ))}
-            {next.map((idSection) => (
-                <Section key={idSection} idSection={idSection} />
-            ))}
-            {/* MAP term & cond */}
-            <Terms />
-            {!postview && editable && (
-                <React.Fragment>
-                    {!customSubmitBtns && (
-                        <div className={styles.submitBtnContainer}>
-                            <CustomBtn
-                                onClick={submit}
-                                width="calc(100% - 70px)"
-                                label={sendLabel ?? 'Enviar'}
-                                backgroundColor={formStyle.primaryColor}
-                                color={formStyle.primaryContrastColor}
-                                loading={loading}
-                                data-testid="form__submit"
-                            ></CustomBtn>
-                        </div>
-                    )}
-                    {customSubmitBtns?.(submit, loading)}
-                </React.Fragment>
-            )}
-        </div>
-    );
-}
-
-export default ColumnForm;

package/src/Form/FormTypes/StepperForm/StepperForm.module.css

@@ -1,26 +0,0 @@
-.container {
-    width: fit-content;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 100%;
-    position: relative;
-}
-.curtain {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-}
-.btnsContainer {
-    margin-top: 10px;
-    max-width: calc(100% - 40px);
-    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -ms-flexbox; /* TWEENER - IE 10 */
-    display: -webkit-flex; /* NEW - Chrome */
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px 20px;
-}

package/src/Form/FormTypes/StepperForm/StepperForm.tsx

@@ -1,120 +0,0 @@
-import { useCallback, useContext, useState } from 'react';
-import { FormComponentProps } from '../../Form';
-import styles from './StepperForm.module.css';
-import Terms from '../../Terms/Terms';
-import { useFormContext } from 'react-hook-form';
-import { useAppDispatch, useAppSelector } from '../../../hooks';
-import Section from '../../Section/Section';
-import CustomContext from '../../../Contexts/CustomContext';
-import * as SiteReducer from '../../../States/SiteSlice';
-import { getAppState } from '../../../Utils/store';
-import { IdFormContext } from '../../../App/App';
-import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
-
-function StepperForm({
-    onSubmit,
-    scrollToTop,
-}: FormComponentProps): JSX.Element {
-    const [loading, setLoading] = useState<undefined | 'BACK' | 'NEXT'>(
-        undefined
-    );
-    const { postview, editable, formStyle } = useAppSelector(
-        (state) => state.global
-    );
-    const { trigger, getValues, handleSubmit } = useFormContext();
-    const { sendLabel } = useContext(CustomContext);
-
-    const dispatch = useAppDispatch();
-    const previous = useAppSelector((state) => state.site.previousSections);
-    const idCurrent = useAppSelector((state) => state.site.idCurrentSection);
-    const idForm = useContext(IdFormContext);
-    const next = useAppSelector((state) => state.site.nextSections);
-
-    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
-    const handleErrors = handleSubmit(
-        () => {},
-        (errors) => {
-            console.error('Errors:', errors);
-        }
-    );
-
-    const handlePrevious = useCallback(async (): Promise<void> => {
-        dispatch(SiteReducer.handlePrevious(getValues()));
-        scrollToTop?.();
-    }, []);
-
-    const handleNext = useCallback(async (): Promise<Record<
-        string,
-        any
-    > | void> => {
-        setLoading('NEXT');
-        const valid = await trigger(undefined, { shouldFocus: true });
-        /** Imprimir errores si no es valido */
-        if (!valid) {
-            handleErrors();
-            return setLoading(undefined);
-        }
-        if (next.length > 0) {
-            dispatch(SiteReducer.handleNext(getValues()));
-            scrollToTop?.();
-            return setLoading(undefined);
-        }
-        const state = await dispatch(getAppState({ idForm })).unwrap();
-        /** put all the values of the previous sections into a single object */
-        let values = state.site.previousSections.reduce(
-            (v, idSection) => ({
-                ...v,
-                ...state.site.values.sections[idSection],
-            }),
-            {}
-        );
-        /** Add the current section's values */
-        values = { ...values, ...getValues() };
-        const response = await onSubmit(values);
-        setLoading(undefined);
-        return response;
-    }, [next]);
-
-    if (!idCurrent) return <></>;
-
-    return (
-        <div
-            className={styles.container}
-            style={{ color: formStyle.textColor }}
-        >
-            {loading && <div className={styles.curtain}></div>}
-            <Section key={idCurrent} idSection={idCurrent} />
-            {next.length === 0 && <Terms />}
-            <div className={styles.btnsContainer}>
-                {previous.length > 0 && (
-                    <CustomBtn
-                        label="Volver"
-                        data-testid="form__back"
-                        onClick={handlePrevious}
-                        backgroundColor={formStyle.primaryColor}
-                        color={formStyle.primaryContrastColor}
-                        disabled={!!loading}
-                        loading={loading === 'BACK'}
-                    />
-                )}
-                {(next.length > 0 || (!postview && editable)) && (
-                    <CustomBtn
-                        label={
-                            next.length > 0
-                                ? 'Siguiente'
-                                : sendLabel ?? 'Enviar'
-                        }
-                        data-testid="form__submit"
-                        onClick={handleNext}
-                        backgroundColor={formStyle.primaryColor}
-                        color={formStyle.primaryContrastColor}
-                        disabled={!!loading}
-                        loading={loading === 'NEXT'}
-                    />
-                )}
-            </div>
-        </div>
-    );
-}
-
-export default StepperForm;

package/src/Form/Section/MaterialSection/MaterialSection.module.css

@@ -1,8 +0,0 @@
-.container {
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    max-width: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}

package/src/Form/Section/MaterialSection/MaterialSection.tsx

@@ -1,44 +0,0 @@
-import StepComponent from '../../../FormSteps/Step';
-import { SectionComponentProps } from '../Section';
-import styles from './MaterialSection.module.css';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useContext } from 'react';
-import CustomContext from '../../../Contexts/CustomContext';
-import FormContext from '../../../Contexts/FormContext';
-
-function MaterialSection({ idSection }: SectionComponentProps): JSX.Element {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { editable } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const { sendLabel } = useContext(CustomContext);
-    const section = form.sections[idSection];
-    if (!section) return <></>;
-    return (
-        <div
-            className={styles.container}
-            style={{
-                width:
-                    (form.size.blockSize + form.size.spacingSize) *
-                    form.size.blockNum,
-                justifyContent:
-                    sendLabel !== undefined &&
-                    currentBreakPoint < form.size.blockNum
-                        ? 'center'
-                        : 'normal',
-            }}
-        >
-            {section.steps?.map((idStep: string) => {
-                const step = form.steps[idStep];
-                return (
-                    <StepComponent
-                        editable={editable}
-                        step={step}
-                        key={idStep}
-                    />
-                );
-            })}
-        </div>
-    );
-}
-
-export default MaterialSection;

package/src/Form/Section/Section.tsx

@@ -1,25 +0,0 @@
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialSection from './MaterialSection/MaterialSection';
-import SectionContext from '../../Contexts/SectionContext';
-import { useAppSelector } from '../../hooks';
-
-export interface SectionComponentProps {
-    idSection: string;
-}
-function SectionComponent(props: SectionComponentProps): JSX.Element {
-    const formStyle = useAppSelector((state) => state.global.formStyle);
-    const renderSectionType = (): JSX.Element => {
-        switch (formStyle.type) {
-            case FormStyleTypes.MATERIAL:
-            default: {
-                return <MaterialSection {...props} />;
-            }
-        }
-    };
-    return (
-        <SectionContext.Provider value={props.idSection}>
-            {renderSectionType()}
-        </SectionContext.Provider>
-    );
-}
-export default SectionComponent;