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

package/src/Shared/RoundedTextField/RoundedTextField.tsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField, { TextFieldProps } from '@material-ui/core/TextField';
+import { OutlinedInputProps } from '@material-ui/core';
+import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+
+interface StyleProps {
+    /** The color of the text */
+    textColor?: string;
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The backgroundColor of the input */
+    backgroundColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The padding of the input */
+    padding?: string;
+    /** The size of the font to display the input in */
+    fontSize?: number | string;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: number | string;
+    /** If the input is multiline */
+    multiline?: boolean;
+    /** Cant edit */
+    cantEdit?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** The max length of the string */
+    maxLength?: number;
+}
+
+const useTextfieldStyles = (props: StyleProps): (() => ClassNameMap) =>
+    makeStyles(() => ({
+        root: {
+            borderRadius: props.borderRadius,
+            '& input, textarea': {
+                cursor: props.cantEdit ? 'default' : 'text',
+                padding: props.multiline ? props.padding : props.padding,
+                fontWeight: props.fontWeight,
+                color: props.textColor,
+                fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.backgroundColor,
+                borderRadius: props.borderRadius,
+            },
+            '& label': {
+                marginTop: props.multiline ? '0px' : '-4px',
+                fontSize: props.fontSize,
+                color: props.textColor + '8a',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
+            },
+            '& label.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& input + fieldset': {
+                borderRadius: props.borderRadius,
+            },
+            '& .EF-MuiInput-underline:after': {
+                borderBottomColor: props.outlineColor,
+            },
+            '& .EF-MuiOutlinedInput-root': {
+                borderRadius: props.borderRadius,
+                '&.Mui-focused fieldset': {
+                    borderColor: props.focusColor,
+                    borderWidth: props.readOnly ? 1 : 2,
+                },
+                '& .EF-MuiOutlinedInput-notchedOutline': {
+                    borderColor: props.outlineColor,
+                    '& legend': {
+                        fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                    },
+                },
+            },
+            '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline':
+                {
+                    borderColor: props.cantEdit
+                        ? props.outlineColor
+                        : props.focusColor,
+                },
+            '& label.Mui-focused': {
+                color: props.focusColor,
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiOutlinedInput-adornedEnd': {
+                paddingRight: '7px',
+            },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+                position: 'relative',
+                marginRight: props.maxLength ? 40 : 14,
+            },
+            '& .EF-MuiFormHelperText-root.Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiOutlinedInput-multiline': {
+                padding: 0,
+                backgroundColor: props.backgroundColor,
+            },
+        },
+    }));
+
+interface RoundedTextFieldProps extends StyleProps {
+    /** The value of the textfield */
+    value?: string;
+}
+function CustomTextfield({
+    focusColor = '#3d5a7f',
+    helperTextColor = '#989898',
+    outlineColor = '#0000003b',
+    backgroundColor = 'white',
+    textColor = '#293241',
+    readOnly = false,
+    borderRadius = 10,
+    padding = '6px 12px',
+    fontSize = '1rem',
+    errorColor = '#cc2936',
+    fontWeight = '300',
+    multiline = false,
+    cantEdit = false,
+    maxLength,
+    value,
+    icon,
+    ...others
+}: TextFieldProps & RoundedTextFieldProps): JSX.Element {
+    const classes = useTextfieldStyles({
+        padding,
+        textColor,
+        errorColor,
+        focusColor,
+        outlineColor,
+        helperTextColor,
+        backgroundColor,
+        borderRadius,
+        readOnly,
+        fontSize,
+        fontWeight,
+        multiline,
+        cantEdit,
+        maxLength,
+    })();
+    const length = maxLength ? value?.length ?? null : null;
+    const inputProps: OutlinedInputProps = {
+        readOnly,
+        disabled: cantEdit,
+        endAdornment: icon,
+    };
+    if (maxLength) {
+        inputProps.inputProps = { maxLength };
+    }
+    return (
+        <div style={{ position: 'relative', width: '100%', maxWidth: '100%' }}>
+            <TextField
+                classes={classes}
+                {...others}
+                value={value ?? ''}
+                multiline={multiline}
+                variant="outlined"
+                size="small"
+                fullWidth
+                InputProps={inputProps}
+                helperText={
+                    others.helperText ? (
+                        <React.Fragment>
+                            {others.helperText}
+                            {length !== null && (
+                                <label
+                                    style={{
+                                        position: 'absolute',
+                                        top: '1px',
+                                        right: '-32px',
+                                        fontSize: '12px',
+                                        color: helperTextColor,
+                                    }}
+                                >
+                                    {length}/{maxLength}
+                                </label>
+                            )}
+                        </React.Fragment>
+                    ) : undefined
+                }
+            />
+            {length !== null && !others.helperText && (
+                <div
+                    style={{
+                        fontSize: '12px',
+                        color: helperTextColor,
+                        textAlign: 'right',
+                        paddingRight: '8px',
+                        paddingTop: '2px',
+                        paddingBottom: '2px',
+                    }}
+                >
+                    {length}/{maxLength}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedTextField extends React.Component<
+    RoundedTextFieldProps & TextFieldProps
+> {
+    render(): JSX.Element {
+        return <CustomTextfield {...this.props} />;
+    }
+}
+export default RoundedTextField;

package/src/States/GlobalSlice.ts

@@ -0,0 +1,45 @@
+import { FormStyle } from '../@Types/Form';
+import InternalFormStyle from '../constants/InternalFormStyle';
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { SiteState } from './SiteSlice';
+
+export interface GlobalState {
+    idOrganization: string;
+    formStyle: FormStyle;
+    /** If the formsteps can be edited (For internal) */
+    editable: boolean;
+    preview: boolean;
+    postview: boolean;
+    partial: boolean;
+    internal: boolean;
+    loaded: boolean;
+}
+
+const initialState: GlobalState = {
+    idOrganization: '',
+    formStyle: InternalFormStyle,
+    editable: false,
+    preview: false,
+    postview: false,
+    partial: false,
+    internal: false,
+    loaded: false,
+};
+
+export const GlobalSlice = createSlice({
+    name: 'global',
+    initialState,
+    reducers: {
+        reset: (
+            state,
+            action: PayloadAction<Omit<GlobalState, 'loaded'> & SiteState>
+        ) => {
+            return { ...state, ...action.payload, loaded: true };
+        },
+    },
+});
+
+export const { reset } = GlobalSlice.actions;
+
+export default GlobalSlice;

package/src/States/SiteSlice.ts

@@ -0,0 +1,205 @@
+import { DependencyStore, StepDependency } from '../Form/Form';
+import { GBaseStep } from '../@Types/GenericFormSteps';
+import StepTypes from '../constants/FormStepTypes';
+import { FormStep } from '../@Types/FormStep';
+import { CustomStep } from '../FormSteps/CustomStep';
+import { CBRFormStep } from '../@Types/CBRFormStep';
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { reset } from './GlobalSlice';
+import { calcDependencies } from '../Form/FormFunctions';
+import { FieldValues } from 'react-hook-form';
+import { calcDefaultValue } from '../FormSteps/StepFunctions';
+
+export interface SiteState {
+    dependencies: DependencyStore;
+    values: ValuesStore;
+    idCurrentSection: string | null;
+    previousSections: string[];
+    nextSections: string[];
+    focusStep?: string;
+}
+
+const initialState: SiteState = {
+    values: {
+        global: {},
+        sections: {},
+    },
+    dependencies: {},
+    idCurrentSection: null,
+    previousSections: [],
+    nextSections: [],
+};
+
+export interface ValuesStore {
+    global: Record<string, any>;
+    sections: Record<string, Record<string, any>>;
+}
+
+export const SiteSlice = createSlice({
+    name: 'site',
+    initialState,
+    reducers: {
+        setStepDependency: (
+            state,
+            {
+                payload: {
+                    step: { id, type, idSection },
+                    value,
+                },
+            }: PayloadAction<{
+                step: GBaseStep;
+                value: StepDependency['value'];
+            }>
+        ) => {
+            const old = state.dependencies[id];
+            if (old && (old.type !== type || old.value !== value)) {
+                state.dependencies[id] = {
+                    ...state.dependencies[id],
+                    type: type as StepTypes,
+                    value,
+                };
+
+                if (state.idCurrentSection !== null) {
+                    for (const dependent of old.dependents) {
+                        if (dependent.idSection !== idSection) {
+                            state.values.sections[dependent.idSection][
+                                dependent.id
+                            ] = calcDefaultValue(dependent);
+                        }
+                    }
+                }
+            }
+        },
+        clearDependency: (
+            state,
+            { payload: { id, idSection } }: PayloadAction<GBaseStep>
+        ) => {
+            if (
+                state.idCurrentSection === null ||
+                state.idCurrentSection === idSection
+            ) {
+                const old = state.dependencies[id];
+                if (old && old.value !== null) {
+                    state.dependencies[id] = {
+                        ...state.dependencies[id],
+                        value: null,
+                        empty: false,
+                    };
+                    if (state.idCurrentSection !== null) {
+                        for (const dependent of old.dependents) {
+                            if (dependent.idSection !== idSection) {
+                                state.values.sections[dependent.idSection][
+                                    dependent.id
+                                ] = calcDefaultValue(dependent);
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        setEmptyDependency: (
+            state,
+            {
+                payload: {
+                    step: { id },
+                    empty,
+                },
+            }: PayloadAction<{
+                step: GBaseStep;
+                empty: StepDependency['empty'];
+            }>
+        ) => {
+            if (state.dependencies[id]) {
+                state.dependencies[id].empty = empty;
+            }
+        },
+        addStepsDependencies: (
+            state,
+            {
+                payload: { steps, customSteps, allSteps },
+            }: PayloadAction<{
+                steps: Record<string, FormStep | CBRFormStep>;
+                customSteps: Record<string, CustomStep>;
+                allSteps: Record<string, FormStep | CBRFormStep>;
+            }>
+        ) => {
+            calcDependencies(steps, customSteps, allSteps, state.dependencies);
+        },
+        handlePrevious: (
+            state,
+            { payload }: PayloadAction<Record<string, any>>
+        ) => {
+            const { previousSections, nextSections, idCurrentSection } = state;
+            const idPreviousSection = previousSections.pop();
+            if (!idPreviousSection || !idCurrentSection) return;
+            nextSections.unshift(idCurrentSection);
+            state.values.sections[idCurrentSection] = payload;
+            state.idCurrentSection = idPreviousSection;
+        },
+        handleNext: (
+            state,
+            { payload }: PayloadAction<Record<string, any>>
+        ) => {
+            const { previousSections, nextSections, idCurrentSection } = state;
+            const idNextSection = nextSections.shift();
+            if (!idNextSection || !idCurrentSection) return;
+            previousSections.push(idCurrentSection);
+            state.values.sections[idCurrentSection] = payload;
+            state.idCurrentSection = idNextSection;
+        },
+        focusStep: (
+            state,
+            {
+                payload,
+            }: PayloadAction<
+                { step: FormStep; values: FieldValues } | undefined
+            >
+        ) => {
+            const idSection = payload?.step.idSection;
+            const { previousSections, nextSections } = state;
+            let idCurrentSection: string | undefined | null =
+                state.idCurrentSection;
+
+            if (
+                idSection &&
+                idCurrentSection &&
+                previousSections.includes(idSection)
+            ) {
+                state.values.sections[idCurrentSection] = payload.values;
+                while (idCurrentSection !== idSection) {
+                    const idPreviousSection = previousSections.pop();
+                    if (!idCurrentSection) return;
+                    nextSections.unshift(idCurrentSection);
+                    idCurrentSection = idPreviousSection;
+                }
+            }
+            state.previousSections = previousSections;
+            state.idCurrentSection = idCurrentSection;
+            state.nextSections = nextSections;
+            state.focusStep = payload?.step.id;
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(reset, (state, action) => {
+            const payload = action.payload;
+            state.previousSections = payload.previousSections;
+            state.idCurrentSection = payload.idCurrentSection;
+            state.nextSections = payload.nextSections;
+            state.values = payload.values;
+            state.dependencies = payload.dependencies;
+        });
+    },
+});
+
+export const {
+    focusStep,
+    clearDependency,
+    setStepDependency,
+    addStepsDependencies,
+    setEmptyDependency,
+    handlePrevious,
+    handleNext,
+} = SiteSlice.actions;
+
+export default SiteSlice;

package/src/States/WidthStatsSlice.ts

@@ -0,0 +1,29 @@
+import { WidthStats } from '../Form/Form';
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+const initialState: WidthStats = {
+    currentBreakPoint: 0,
+    isMobile: false,
+    isResponsive: false,
+};
+
+export const WidthStatsSlice = createSlice({
+    name: 'widthStats',
+    initialState,
+    reducers: {
+        updateWidthStats: (state, { payload }: PayloadAction<WidthStats>) => {
+            if (
+                payload.isMobile !== state?.isMobile ||
+                payload.isResponsive !== state?.isResponsive ||
+                payload.currentBreakPoint !== state?.currentBreakPoint
+            )
+                return payload;
+            else return state;
+        },
+    },
+});
+
+export const { updateWidthStats } = WidthStatsSlice.actions;
+
+export default WidthStatsSlice;

package/src/Utils/AxiosAPI.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const headers = {};
+
+const axiosInstance = axios.create({
+    baseURL: '/api',
+    timeout: 30000,
+    headers,
+});
+
+export default axiosInstance;

package/src/Utils/AxiosWidget.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const headers = {};
+
+const widgetInstance = axios.create({
+    baseURL: `https://api.forms.${process.env.REACT_APP_DOMAIN}/api`,
+    timeout: 30000,
+    headers,
+});
+
+export default widgetInstance;

package/src/Utils/CBRFunctions.ts

@@ -0,0 +1,105 @@
+import { Form } from '../@Types';
+import {
+    CBRCommentStep,
+    CBRElementStep,
+    CBRFormStep,
+    CBRIncidentsStep,
+    CBRSpaceTypeStep,
+    IncidentElementStep,
+} from '../@Types/CBRFormStep';
+import CBRFormStepTypes from '../constants/CBRFormStepTypes';
+
+export interface Incident {
+    idSpaceStep: string;
+    idElementStep: string;
+    idCommentStep: string;
+    num: number;
+}
+
+export const calcCbrForm = (
+    form: Form,
+    formValues: Record<string, any>
+): Form => {
+    for (const step of Object.values(form.steps)) {
+        if ((step as any).type === CBRFormStepTypes.CBR_INCIDENCIAS) {
+            const incidentStep = step as any as CBRIncidentsStep;
+            const incValue: Incident[] = formValues[incidentStep.id ?? ''];
+            if (incValue) {
+                for (const incident of incValue) {
+                    handleAddIncident(
+                        incident,
+                        incidentStep,
+                        form.steps as any,
+                        formValues
+                    );
+                }
+            }
+        }
+    }
+    return form as any;
+};
+
+const handleAddIncident = (
+    incident: Incident,
+    step: CBRIncidentsStep,
+    steps: Record<string, CBRFormStep>,
+    formValues: Record<string, any>
+): void => {
+    const spaceStep: CBRSpaceTypeStep = {
+        ...step.spaceStep,
+        id: incident.idSpaceStep,
+        type: CBRFormStepTypes.CBR_TIPO_ESPACIO,
+        dependencies: step.dependencies,
+    };
+    steps[incident.idSpaceStep] = spaceStep;
+
+    const commentStep: CBRCommentStep = {
+        ...step.commentStep,
+        id: incident.idCommentStep,
+        type: CBRFormStepTypes.CBR_COMENTARIO,
+    };
+    steps[incident.idCommentStep] = commentStep as any;
+    addRecursiveElementStep(
+        incident.idElementStep,
+        step.elementStep,
+        null,
+        steps,
+        step.dependencies?.[0] ?? '',
+        formValues
+    );
+};
+const addRecursiveElementStep = (
+    idStep: string,
+    step: IncidentElementStep,
+    idParent: string | null,
+    steps: Record<string, CBRFormStep>,
+    idProjectDep: string,
+    formValues: Record<string, any>
+): void => {
+    const idSubStep = formValues[idStep]?.subStep;
+    const newSubStep = step.subStep ? { ...step.subStep } : undefined;
+    const newStep: CBRElementStep = {
+        ...step,
+        id: idStep,
+        type: CBRFormStepTypes.CBR_LOCATIVAS,
+        dependencies: [idProjectDep],
+        subStep: null,
+    };
+    if (newSubStep) {
+        newStep.subStep = idSubStep;
+    }
+    if (idParent) {
+        newStep.dependencies?.push?.(idParent);
+    }
+    steps[idStep] = newStep;
+    if (newSubStep) {
+        addRecursiveElementStep(
+            idSubStep,
+            newSubStep,
+            idStep,
+            steps,
+            idProjectDep,
+            formValues
+        );
+    }
+};

package/src/Utils/DraftFunctions.ts

@@ -0,0 +1,47 @@
+import { nanoid } from '@reduxjs/toolkit';
+import { RawDraftContentState } from 'draft-js';
+
+export function stringToDraft(text: string): RawDraftContentState {
+    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 const getRawText = (
+    draft?: RawDraftContentState,
+    text?: string
+): RawDraftContentState => {
+    if (draft !== undefined) {
+        return draft;
+    } else if (text !== undefined) {
+        return stringToDraft(text);
+    } else {
+        return {
+            blocks: [
+                {
+                    key: nanoid(5),
+                    text: '',
+                    type: 'unstyled',
+                    depth: 0,
+                    inlineStyleRanges: [],
+                    entityRanges: [],
+                    data: {},
+                },
+            ],
+            entityMap: {},
+        };
+    }
+};