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

package/src/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.module.css

@@ -1,30 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: calc(100% - 20px);
-    padding: 5px 10px;
-    padding-bottom: 15px;
-}
-.labelLabel {
-    font-size: 16px;
-    margin-bottom: 10px;
-    text-align: center;
-}
-.ratingContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.stepDescriptionLabel {
-    font-size: 0.75rem;
-    margin-top: 5px;
-    font-weight: 400;
-    line-height: 1.66;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-    min-height: 20px;
-}

package/src/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.tsx

@@ -1,98 +0,0 @@
-import styles from './MaterialRatingStep.module.css';
-import { RatingStepProps } from '../RatingStep';
-import React, { useContext } from 'react';
-import Rating from '../../../Shared/Rating/Rating';
-import { RatingTypes } from '../../../constants/FormStepTypes';
-import StepComponent from '../../Step';
-import FormContext from '../../../Contexts/FormContext';
-import { useAppSelector } from '../../../hooks';
-import { useFormStep } from '../../StepHooks';
-import { calcDefaultValue } from '../../StepFunctions';
-
-function RatingStep({ step, editable }: RatingStepProps): JSX.Element {
-    const { ref, value, onChange, error } = useFormStep<
-        undefined | null | number
-    >(step, {
-        defaultValue: calcDefaultValue(step),
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-    });
-
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const widthStats = useAppSelector((state) => state.widthStats);
-
-    const renderNestedOption = (): JSX.Element | void => {
-        let currentOption;
-        if (value !== undefined && value !== null && step.nestedSteps) {
-            if (step.ratingType === RatingTypes.LIKE) {
-                currentOption = step.nestedSteps[value];
-            } else {
-                currentOption = step.nestedSteps[value - 1];
-            }
-            if (currentOption && currentOption.length > 0) {
-                return (
-                    <React.Fragment>
-                        {currentOption.map((idSubStep: string) => {
-                            const subStep = form.steps[idSubStep];
-                            return (
-                                <StepComponent
-                                    editable={editable}
-                                    step={subStep}
-                                    key={idSubStep}
-                                />
-                            );
-                        })}
-                    </React.Fragment>
-                );
-            }
-        }
-    };
-    return (
-        <React.Fragment>
-            <div
-                className={styles.container}
-                style={{
-                    paddingBottom: step.description || step.required ? 0 : 15,
-                }}
-            >
-                <div className={styles.labelLabel}>
-                    {step.label + (step.required ? ' *' : '')}
-                </div>
-                <div className={styles.ratingContainer}>
-                    <Rating
-                        name={step.id}
-                        type={step.ratingType}
-                        isMobile={widthStats.isMobile}
-                        focusColor={formStyle.primaryColor ?? '#3d5a7f'}
-                        unSelectedColor={formStyle.outlineColor ?? '#b8b8b8'}
-                        disabled={!editable || postview}
-                        value={value}
-                        onChange={onChange}
-                        inputRef={ref}
-                    />
-                </div>
-                {(step.description || step.required) && (
-                    <div
-                        className={styles.stepDescriptionLabel}
-                        style={{
-                            color:
-                                !!error && value === null
-                                    ? formStyle.errorColor ?? '#cc2936'
-                                    : formStyle.descriptionTextColor ??
-                                      '#989898',
-                        }}
-                    >
-                        {!!error && value === null
-                            ? error?.message
-                            : step.description}
-                    </div>
-                )}
-            </div>
-            {renderNestedOption()}
-        </React.Fragment>
-    );
-}
-
-export default RatingStep;

package/src/FormSteps/RatingStep/RatingStep.tsx

@@ -1,20 +0,0 @@
-import { Rating } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialRatingStep from './MaterialRatingStep/MaterialRatingStep';
-import { StepProps } from '../Step';
-import { useAppSelector } from '../../hooks';
-export interface RatingStepProps extends StepProps {
-    /** The RatingStep to display */
-    step: Rating;
-}
-function RatingStep(props: RatingStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialRatingStep {...props} />;
-        }
-    }
-}
-export default RatingStep;

package/src/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css

@@ -1,9 +0,0 @@
-.container {
-    width: fit-content;
-    max-width: calc(100% - 20px);
-    display: flex;
-    padding: 10px;
-    padding-bottom: 0px;
-    padding-top: 5px;
-    margin-bottom: 0px;
-}

package/src/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.tsx

@@ -1,105 +0,0 @@
-import { FormSelectorOption } from '../../../@Types/FormStep';
-import React, { useContext } from 'react';
-import { OptionTypes } from '../../../constants/FormStepTypes';
-import StepComponent from '../../Step';
-import { SelectorStepProps } from '../SelectorStep';
-import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
-import FormContext from '../../../Contexts/FormContext';
-import { useAppSelector } from '../../../hooks';
-import { useFormStep } from '../../StepHooks';
-import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
-import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { calcDefaultValue } from '../../StepFunctions';
-
-function SelectorStep({ step, editable }: SelectorStepProps): JSX.Element {
-    const { ref, value, onChange, error, field } = useFormStep<{
-        label: string;
-        value: string;
-    }>(step, {
-        defaultValue: calcDefaultValue(step),
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-        sizeChange: true,
-    });
-
-    const form = useContext(FormContext);
-    const { postview, formStyle } = useAppSelector((state) => state.global);
-
-    const mapNestedOption = (): void | JSX.Element => {
-        let currentOptionIndex: number | null = null;
-        let currentOption: FormSelectorOption | null = null;
-        for (let i = 0; i < step.options.length; i++) {
-            const option = step.options[i];
-            if (option?.value === value?.value) {
-                currentOptionIndex = i;
-                currentOption = option;
-            }
-        }
-        if (
-            currentOption?.type === OptionTypes.NESTED &&
-            currentOptionIndex !== null
-        ) {
-            return (
-                <React.Fragment>
-                    {currentOption.steps.map((idSubStep: string) => {
-                        const subStep = form.steps[idSubStep];
-                        return (
-                            <StepComponent
-                                editable={editable}
-                                step={subStep}
-                                key={idSubStep}
-                            />
-                        );
-                    })}
-                </React.Fragment>
-            );
-        }
-    };
-
-    return (
-        <React.Fragment>
-            <MaterialInputContainer step={step} editable={editable}>
-                <RoundedSmartSelect
-                    {...field}
-                    value={value}
-                    inputRef={ref}
-                    handleUpdate={onChange}
-                    disabled={false}
-                    loading={false}
-                    options={step.options}
-                    cantEdit={!editable || postview}
-                    fullWidth
-                    backgroundColor={formStyle.stepBackgroundColor ?? 'white'}
-                    label={step.label}
-                    required={step.required}
-                    height={'31px'}
-                    searchable={step.searchable}
-                    icon={undefined}
-                    helperTextColor={formStyle.descriptionTextColor}
-                    focusColor={formStyle.primaryColor}
-                    outlineColor={formStyle.outlineColor}
-                    errorColor={formStyle.errorColor}
-                    color={formStyle.textColor}
-                    containerMargin="0px"
-                    getOptionSelected={(option, value): boolean => {
-                        return option?.value === value?.value;
-                    }}
-                    helperText={error?.message?.toString() ?? step.description}
-                    error={!!error}
-                />
-            </MaterialInputContainer>
-            {value && mapNestedOption()}
-        </React.Fragment>
-    );
-}
-
-function SelectorStepContainer(props: SelectorStepProps): JSX.Element {
-    return (
-        <StepFillerContainer step={props.step}>
-            <SelectorStep {...props} />
-        </StepFillerContainer>
-    );
-}
-
-export default SelectorStepContainer;

package/src/FormSteps/SelectorStep/SelectorStep.tsx

@@ -1,20 +0,0 @@
-import { useAppSelector } from '../../hooks';
-import { FormSelector } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import { StepProps } from '../Step';
-import MaterialSelectorStep from './MaterialSelectorStep/MaterialSelectorStep';
-
-export interface SelectorStepProps extends StepProps {
-    /** The SelectorStep to display */
-    step: FormSelector;
-}
-function SelectorStep(props: SelectorStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialSelectorStep {...props} />;
-        }
-    }
-}
-export default SelectorStep;

package/src/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.module.css

@@ -1,7 +0,0 @@
-.container {
-    height: 2px;
-    width: calc(100% - 20px);
-    margin-bottom: 5px;
-    margin-left: 10px;
-    border-radius: 20px;
-}

package/src/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.tsx

@@ -1,20 +0,0 @@
-import { useAppSelector } from '../../../hooks';
-import { SeparatorStepProps } from '../SeparatorStep';
-import styles from './MaterialSeparatorStep.module.css';
-
-function SeparatorStep({ step }: SeparatorStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    return (
-        <div
-            className={styles.container}
-            style={{
-                backgroundColor: step.transparent
-                    ? 'transparent'
-                    : formStyle.primaryColor,
-            }}
-        ></div>
-    );
-}
-
-export default SeparatorStep;

package/src/FormSteps/SeparatorStep/SeparatorStep.tsx

@@ -1,21 +0,0 @@
-import { useAppSelector } from '../../hooks';
-import { Separator } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import { StepProps } from '../Step';
-import MaterialSeparatorStep from './MaterialSeparatorStep/MaterialSeparatorStep';
-
-export interface SeparatorStepProps extends StepProps {
-    /** The TitleStep to display */
-    step: Separator;
-}
-function SeparatorStep(props: SeparatorStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialSeparatorStep {...props} />;
-        }
-    }
-}
-export default SeparatorStep;

package/src/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.tsx

@@ -1,216 +0,0 @@
-import { useFormContext } from 'react-hook-form';
-import { SmartSelectStepProps } from '../SmartSelectStep';
-import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import React from 'react';
-import FormContext from '../../../Contexts/FormContext';
-import { useAppDispatch, useAppSelector } from '../../../hooks';
-import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
-import { selectDependencies, useFormStep } from '../../StepHooks';
-import { GSmartSelect } from '../../../@Types/GenericFormSteps';
-import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-
-function SmartSelectStep<StepType extends GSmartSelect>({
-    icon,
-    step,
-    editable,
-    getOptions,
-    calcDepError,
-    defaultValue,
-    valueOverwrite,
-    getValueString,
-    changeListener,
-    getValueWarning,
-    getOptionSelected,
-    renderNestedSteps,
-}: SmartSelectStepProps<StepType>): JSX.Element {
-    const {
-        ref,
-        value,
-        error,
-        field,
-        onChange: handleChange,
-    } = useFormStep<string>(step, {
-        sizeChange: true,
-        defaultValue: defaultValue ?? null,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-    });
-
-    const onChange = useCallback(
-        (value): void =>
-            handleChange(valueOverwrite ? valueOverwrite(value) : value),
-        [handleChange, valueOverwrite]
-    );
-
-    const { postview, formStyle, idOrganization } = useAppSelector(
-        (state) => state.global
-    );
-    const form = useContext(FormContext);
-    const [options, setOptions] = useState<any[] | null | undefined>();
-    const [loading, setLoading] = useState(false);
-    const [firstTime, setFirstTime] = useState(true);
-    const [touched, setTouched] = useState(false);
-    const dispatch = useAppDispatch();
-    const dependencyStore = useAppSelector((state) => state.site.dependencies);
-    const { emptyDep, invalids } = useAppSelector((state) =>
-        selectDependencies(state, step, form)
-    );
-    const { getValues, setFocus } = useFormContext();
-    const isEmpty = useAppSelector(
-        (state) => state.site.dependencies[step.id]?.empty
-    );
-
-    const disabled = emptyDep;
-
-    useEffect(
-        () => {
-            if (!postview && editable) {
-                calcOptions(firstTime);
-                if (firstTime) setFirstTime(false);
-            } else if (value && !step.searchable) {
-                setOptions([value]);
-            }
-        },
-        step.dependencies?.map((dep) => dependencyStore[dep]?.value) ?? []
-    );
-
-    const calcOptions = async (firstTime?: boolean): Promise<void> => {
-        if (!firstTime) setOptions(undefined);
-        if (value && !firstTime) setLoading(true);
-        try {
-            const resp = await getOptions?.(
-                idOrganization,
-                step,
-                dependencyStore
-            );
-            if (value) {
-                /** If the value is still valid select it */
-                if (resp && getValueString(value) !== undefined) {
-                    const newValue = resp.find(
-                        (option) =>
-                            getValueString(option) === getValueString(value)
-                    );
-                    if (!firstTime) onChange(newValue ?? null);
-                } else if (!firstTime) onChange(null);
-            }
-            setOptions(resp);
-            const empty = resp === null ? undefined : resp.length === 0;
-            /** Tell the dependency store this input is empty or not */
-            if (empty !== !!isEmpty) {
-                dispatch(
-                    setEmptyDependency({
-                        step,
-                        empty,
-                    })
-                );
-            }
-        } catch (error) {
-            console.error(error);
-            setOptions(null);
-        }
-        setLoading(false);
-    };
-
-    const warning = useMemo(
-        (): string | null | undefined => getValueWarning?.(value),
-        [value]
-    );
-
-    const onFocus = useCallback((): void => {
-        if (disabled || !editable || postview) return;
-        if (options === null) {
-            if (!value) {
-                if (invalids.length > 0) {
-                    const depStep = form.steps[invalids[0]];
-                    if (
-                        form.type === 'STEPPER' &&
-                        step.idSection !== depStep.idSection
-                    ) {
-                        dispatch(
-                            focusStep({
-                                step: form.steps[invalids[0]],
-                                values: getValues(),
-                            })
-                        );
-                    } else {
-                        setFocus(invalids[0]);
-                    }
-                } else if (value === undefined) {
-                    setLoading(true);
-                }
-            }
-        }
-        if (options === undefined) {
-            setLoading(true);
-        }
-        if (!touched) setTouched(true);
-    }, [options, disabled, postview, editable, invalids, touched]);
-
-    const errorMsg = useMemo((): string | undefined => {
-        if (postview || loading) return undefined;
-        if (invalids.length > 0 && touched) {
-            return calcDepError?.(invalids.map((idDep) => form.steps[idDep]));
-        } else if (value && options) {
-            const currentOption = options.find((option) =>
-                getOptionSelected(option, value)
-            );
-            if (!currentOption) {
-                return 'Este campo es obligatorio';
-            }
-        } else if (options === null && invalids.length === 0) {
-            return 'Error al cargar las opciones';
-        }
-        return undefined;
-    }, [invalids, touched, value, options]);
-
-    return (
-        <React.Fragment>
-            <MaterialInputContainer
-                step={step}
-                onClick={onFocus}
-                editable={editable}
-            >
-                <RoundedSmartSelect
-                    {...field}
-                    inputRef={ref}
-                    value={value}
-                    handleUpdate={onChange}
-                    onFocus={onFocus}
-                    disabled={options === null || disabled}
-                    hidden={disabled}
-                    loading={loading}
-                    options={options ?? undefined}
-                    cantEdit={!editable || postview}
-                    fullWidth
-                    backgroundColor={formStyle.stepBackgroundColor ?? 'white'}
-                    label={step.label}
-                    required={step.required}
-                    height={'31px'}
-                    changeListener={changeListener}
-                    searchable={step.searchable}
-                    icon={step.showIcon ? icon : undefined}
-                    helperTextColor={formStyle.descriptionTextColor}
-                    focusColor={formStyle.primaryColor}
-                    outlineColor={formStyle.outlineColor}
-                    errorColor={formStyle.errorColor}
-                    color={formStyle.textColor}
-                    containerMargin="0px"
-                    getOptionSelected={getOptionSelected}
-                    getValueString={getValueString}
-                    helperText={
-                        errorMsg ??
-                        warning ??
-                        error?.message?.toString() ??
-                        step.description ??
-                        undefined
-                    }
-                    error={!!errorMsg || !!warning || !!error}
-                />
-            </MaterialInputContainer>
-            {renderNestedSteps?.(value)}
-        </React.Fragment>
-    );
-}
-export default SmartSelectStep;

package/src/FormSteps/SmartSelectStep/SmartSelectStep.tsx

@@ -1,48 +0,0 @@
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialSmartSelectStep from './MaterialSmartSelectStep/MaterialSmartSelectStep';
-import { StepProps } from '../Step';
-import { GSmartSelect } from '../../@Types/GenericFormSteps';
-import { FormStep } from '../../@Types/FormStep';
-import { DependencyStore } from '../../Form/Form';
-import { useAppSelector } from '../../hooks';
-export interface SmartSelectStepProps<
-    StepType extends GSmartSelect = GSmartSelect,
-> extends Omit<StepProps, 'step'> {
-    /** The SmartSelectStep to display */
-    step: StepType;
-    /** The icon to display */
-    icon?: React.ReactNode;
-    /** Function to call to get the options of the selector, return null if dependency is not met */
-    getOptions: (
-        idOrganization: string | undefined,
-        step: StepType,
-        dependencyStore: DependencyStore
-    ) => Promise<any[] | null>;
-    /** Function to determine the currently selected option */
-    getOptionSelected: (option: any, value: any) => boolean;
-    /** Function to determine the current value in string format */
-    getValueString: (value: any | undefined) => string;
-    /** Function to if currently selected option has warning */
-    getValueWarning?: (value: any | undefined) => string | null;
-    /** Function that returns the error message based on the steps of the missing Dependencies, undefined if no error msg */
-    calcDepError?: (steps: FormStep[]) => string | undefined;
-    /** Function that overwrites the value before setting it */
-    valueOverwrite?: (value: any | null) => any;
-    /** Function called on each value change */
-    changeListener?: (value: any) => void;
-    /** default Value to select */
-    defaultValue?: any;
-    /** function called to render nested elements when selected */
-    renderNestedSteps?: (value: any) => JSX.Element;
-}
-function SmartSelectStep(props: SmartSelectStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialSmartSelectStep {...props} />;
-        }
-    }
-}
-export default SmartSelectStep;