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

package/src/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.tsx

@@ -1,209 +0,0 @@
-import styles from './MaterialTextAreaStep.module.css';
-import { useController } from 'react-hook-form';
-import { Editor } from 'react-draft-wysiwyg'; //Load programatically only if step has editor
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
-import './DraftEditor.css';
-import { TextAreaStepProps } from '../TextAreaStep';
-import React, { useCallback, useState } from 'react';
-import { ClickAwayListener } from '@material-ui/core';
-import { useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
-import { EditorState, convertFromRaw } from 'draft-js';
-import { getRawText } from '../../../Utils/DraftFunctions';
-
-export interface Payload {
-    text: string;
-    draft: any;
-}
-
-function TextAreaStep({ step, editable }: TextAreaStepProps): JSX.Element {
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-
-    const [hovering, setHovering] = useState(false);
-    const [focus, setFocus] = useState(false);
-    const [timer, setTimer] = useState<ReturnType<typeof setTimeout>>();
-
-    const { handleStepDep, originalValue, isDependency } = useStepDependency(
-        step,
-        getRawText()
-    );
-
-    const {
-        field: { ref, onChange, ...field },
-        fieldState: { error },
-    } = useController({
-        name: step.id,
-        shouldUnregister: true,
-        rules: step.required
-            ? {
-                  validate: (editorState: any): boolean =>
-                      editorState.getCurrentContent().hasText(),
-              }
-            : {},
-        defaultValue: EditorState.createWithContent(
-            convertFromRaw(originalValue)
-        ),
-    });
-
-    const handleChange = useCallback(
-        (value): void => {
-            if (isDependency) {
-                try {
-                    clearTimeout(timer);
-                    // eslint-disable-next-line no-empty
-                } catch (e) {}
-                setTimer(
-                    setTimeout(() => {
-                        handleStepDep(value.getCurrentContent().getPlainText());
-                        setTimer(undefined);
-                    }, 1000)
-                );
-            }
-            onChange(value);
-        },
-        [handleStepDep, isDependency, onChange]
-    );
-
-    const calcStyle = (): React.CSSProperties => {
-        const backgroundColor = formStyle.stepBackgroundColor;
-        if (focus) {
-            return {
-                border: '2px solid ' + formStyle.primaryColor,
-                marginTop: -1,
-                marginLeft: -1,
-                marginBottom: 0,
-                backgroundColor,
-            };
-        } else if (hovering) {
-            return {
-                border: '1px solid ' + formStyle.primaryColor,
-                backgroundColor,
-            };
-        } else {
-            return {
-                border: '1px solid ' + formStyle.outlineColor,
-                backgroundColor,
-            };
-        }
-    };
-
-    const canEdit = editable && !postview;
-
-    const value = field.value as EditorState;
-    let editorClassName = styles.editor;
-    if (!value.getCurrentContent().hasText()) {
-        if (
-            value.getCurrentContent().getBlockMap().first().getType() !==
-            'unstyled'
-        ) {
-            editorClassName += ' RichEditor-hidePlaceholder';
-        }
-    }
-
-    if (!canEdit) {
-        editorClassName += ' postview-editor';
-    }
-
-    return (
-        <div
-            className={styles.textEditorContainer}
-            style={
-                {
-                    pageBreakInside: 'avoid',
-                    '--eureka-outline': formStyle.outlineColor,
-                    '--eureka-primary': formStyle.primaryColor,
-                } as React.CSSProperties
-            }
-        >
-            {step.label && (
-                <div
-                    className={styles.textEditorLabel}
-                    style={{
-                        color: error
-                            ? formStyle.errorColor
-                            : formStyle.textColor,
-                    }}
-                >
-                    {step.label} {step.required ? ' *' : ''}
-                </div>
-            )}
-            <ClickAwayListener
-                mouseEvent="onMouseDown"
-                onClickAway={(): void => {
-                    if (canEdit) {
-                        setFocus(false);
-                    }
-                }}
-            >
-                <div
-                    className={
-                        postview
-                            ? styles.postViewContainer + ' EF-DraftContainer'
-                            : styles.textContainer + ' EF-DraftContainer'
-                    }
-                    style={calcStyle()}
-                    onMouseEnter={(): void => {
-                        if (canEdit) {
-                            setHovering(true);
-                        }
-                    }}
-                    onMouseLeave={(): void => {
-                        if (canEdit) {
-                            setHovering(false);
-                        }
-                    }}
-                    onClick={(): void => {
-                        if (canEdit) {
-                            setFocus(true);
-                        }
-                    }}
-                    data-testid={step.id}
-                >
-                    <Editor
-                        {...field}
-                        editorRef={ref}
-                        onFocus={(): void => {
-                            setFocus(true);
-                        }}
-                        readOnly={!canEdit}
-                        stripPastedStyles
-                        onEditorStateChange={handleChange}
-                        toolbarClassName={
-                            !canEdit ? ' postview-editor-toolbar' : ''
-                        }
-                        editorState={value}
-                        editorClassName={editorClassName}
-                        wrapperClassName={styles.wrapper}
-                        placeholder={step.description ?? ''}
-                        toolbar={{
-                            options: ['inline', 'list', 'history'],
-                            inline: {
-                                options: [
-                                    'bold',
-                                    'italic',
-                                    'underline',
-                                    'strikethrough',
-                                ],
-                            },
-                            list: {
-                                options: ['unordered'],
-                            },
-                        }}
-                    />
-                </div>
-            </ClickAwayListener>
-
-            <div
-                className={styles.errorMsg}
-                style={{
-                    color: formStyle.errorColor,
-                    height: !postview && editable ? '0.75rem' : 0,
-                }}
-            >
-                {!!error && 'Este campo es obligatorio'}
-            </div>
-        </div>
-    );
-}
-
-export default TextAreaStep;

package/src/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.tsx

@@ -1,89 +0,0 @@
-import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
-import styles from './MaterialTextAreaStep.module.css';
-import { TextAreaStepProps } from '../TextAreaStep';
-import React from 'react';
-import { useAppSelector } from '../../../hooks';
-import { useFormStep } from '../../StepHooks';
-
-export interface Payload {
-    text: string;
-    draft: any;
-}
-
-function TextAreaStep({
-    step,
-    editable,
-    maxLength,
-}: TextAreaStepProps): JSX.Element {
-    const { formStyle, postview, partial } = useAppSelector(
-        (state) => state.global
-    );
-
-    const { ref, value, onChange, error, field } = useFormStep<string>(step, {
-        debounce: true,
-        defaultValue: '',
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
-    });
-
-    const canEdit = editable && !postview;
-
-    return (
-        <div
-            className={styles.container}
-            style={{
-                paddingBottom:
-                    step.required || step.description || !!error
-                        ? '0px'
-                        : '5px',
-            }}
-        >
-            <div className={styles.erkTextArea}>
-                <RoundedTextField
-                    {...field}
-                    inputRef={ref}
-                    value={value}
-                    onChange={(e) => onChange(e.target.value)}
-                    data-testid={step.id}
-                    maxLength={maxLength}
-                    label={step.label}
-                    required={step.required}
-                    cantEdit={!canEdit}
-                    fontWeight={400}
-                    multiline
-                    minRows={postview && partial ? undefined : 4}
-                    focusColor={formStyle.primaryColor}
-                    outlineColor={formStyle.outlineColor}
-                    textColor={formStyle.textColor}
-                    errorColor={formStyle.errorColor}
-                    backgroundColor={formStyle.stepBackgroundColor}
-                    helperTextColor={formStyle.descriptionTextColor}
-                    helperText={
-                        error?.message ??
-                        step.description ??
-                        (step.required ? ' ' : null)
-                    }
-                    error={!!error}
-                />
-            </div>
-            {/* TODO: Revisar esto que putas */}
-            {postview && (
-                <div className={styles.print}>
-                    <div>{step.label}:</div>
-                    <p
-                        className={styles.printContainer}
-                        style={{
-                            backgroundColor: formStyle.stepBackgroundColor,
-                            borderColor: formStyle.outlineColor,
-                        }}
-                    >
-                        {value}
-                    </p>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default TextAreaStep;

package/src/FormSteps/TextAreaStep/TextAreaStep.tsx

@@ -1,23 +0,0 @@
-import { useAppSelector } from '../../hooks';
-import { TextArea } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import { StepProps } from '../Step';
-import MaterialTextAreaStep from './MaterialTextAreaStep/MaterialTextAreaStep';
-import MaterialTextAreaEditorStep from './MaterialTextAreaStep/MaterialTextAreaEditorStep';
-export interface TextAreaStepProps extends StepProps {
-    /** The TextAreaStep to display */
-    step: TextArea;
-    maxLength?: number;
-}
-function TextAreaStep(props: TextAreaStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            if (props.step.hasTextEditor)
-                return <MaterialTextAreaEditorStep {...props} />;
-            else return <MaterialTextAreaStep {...props} />;
-        }
-    }
-}
-export default TextAreaStep;

package/src/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.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/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.tsx

@@ -1,80 +0,0 @@
-import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
-import styles from './MaterialTextInputStep.module.css';
-import { TextInputStepProps } from '../TextInputStep';
-import { calcStepWidth } from '../../StepFunctions';
-import { useContext } from 'react';
-import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useFormStep } from '../../StepHooks';
-function TextInputStep({
-    icon,
-    step,
-    editable,
-    maxLength,
-    defaultValue,
-    validation = step.validation,
-}: TextInputStepProps): JSX.Element {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-
-    const { ref, value, onChange, error, field } = useFormStep<string>(step, {
-        defaultValue: defaultValue ?? '',
-        debounce: true,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-            pattern: validation
-                ? {
-                      value: new RegExp(
-                          validation.type === 'EMAIL'
-                              ? // eslint-disable-next-line no-control-regex
-                                /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
-                              : validation.value
-                      ),
-                      message: validation.message,
-                  }
-                : undefined,
-        },
-    });
-
-    return (
-        <div
-            className={styles.container}
-            style={{
-                width:
-                    currentBreakPoint <= step.size
-                        ? '100%'
-                        : calcStepWidth(step.size, form.size),
-                minHeight:
-                    step.description ||
-                    (!postview && editable && (step.required || validation))
-                        ? '55px'
-                        : '43px',
-            }}
-        >
-            <RoundedTextField
-                {...field}
-                inputRef={ref}
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                maxLength={maxLength}
-                data-testid={step.id}
-                label={step.label}
-                cantEdit={!editable || postview}
-                required={step.required}
-                fontWeight={400}
-                focusColor={formStyle.primaryColor}
-                outlineColor={formStyle.outlineColor}
-                textColor={formStyle.textColor}
-                errorColor={formStyle.errorColor}
-                backgroundColor={formStyle.stepBackgroundColor}
-                helperText={error?.message ?? step.description}
-                helperTextColor={formStyle.descriptionTextColor}
-                error={!!error}
-                icon={step.showIcon ? icon : undefined}
-            ></RoundedTextField>
-        </div>
-    );
-}
-
-export default TextInputStep;

package/src/FormSteps/TextInputStep/TextInputStep.tsx

@@ -1,28 +0,0 @@
-import { TextInput } from '../../@Types/FormStep';
-import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialTextInputStep from './MaterialTextInputStep/MaterialTextInputStep';
-import { StepProps } from '../Step';
-import { useAppSelector } from '../../hooks';
-export interface TextInputStepProps extends StepProps {
-    /** The TextInputStep to display */
-    step: TextInput;
-    /** The icon to display */
-    icon?: React.ReactNode;
-    /** Default value to display */
-    defaultValue?: string;
-    /** Custom Validation to display */
-    validation?: TextInput['validation'];
-    /** Custom step Max char length */
-    maxLength?: number;
-}
-function TextInputStep(props: TextInputStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialTextInputStep {...props} />;
-        }
-    }
-}
-export default TextInputStep;

package/src/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css

@@ -1,18 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    max-width: calc(100% - 20px);
-    padding: 5px 10px;
-}
-
-.titleLbl {
-    font-size: 24px;
-    font-weight: 600;
-    cursor: default;
-}
-
-.descriptionPar {
-    font-size: 16px;
-    white-space: pre-wrap;
-    cursor: default;
-}

package/src/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.tsx

@@ -1,64 +0,0 @@
-import { calcStepWidth } from '../../StepFunctions';
-import { TitleStepProps } from '../TitleStep';
-import styles from './MaterialTitleStep.module.css';
-import { useAppSelector } from '../../../hooks';
-import FormContext from '../../../Contexts/FormContext';
-import { useContext } from 'react';
-import { useFormStep } from '../../StepHooks';
-function TitleStep({ step }: TitleStepProps): JSX.Element {
-    const { value } = useFormStep<
-        | {
-              title: string;
-              description: string | null;
-          }
-        | undefined
-    >(step, {
-        defaultValue: undefined,
-    });
-
-    const title = value?.title ?? step.title;
-    const description = value?.description ?? step.description;
-
-    const { formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const size = step.size ?? form.size.blockNum;
-    return (
-        <div
-            className={styles.container}
-            style={{
-                color: formStyle.textColor,
-                width:
-                    widthStats.currentBreakPoint <= size
-                        ? '100%'
-                        : calcStepWidth(size, form.size),
-            }}
-        >
-            {title && (
-                <div
-                    className={styles.titleLbl}
-                    style={{
-                        textAlign:
-                            widthStats.isMobile &&
-                            widthStats.currentBreakPoint <= size
-                                ? 'center'
-                                : 'start',
-                    }}
-                >
-                    {title}
-                </div>
-            )}
-            {description && (
-                <p
-                    className={styles.descriptionPar}
-                    style={{
-                        margin: title ? '10px 0px' : '0px 0px 5px 0px',
-                    }}
-                >
-                    {description}
-                </p>
-            )}
-        </div>
-    );
-}
-export default TitleStep;

package/src/FormSteps/TitleStep/TitleStep.tsx

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

package/src/FormSteps/Utils/@StepFiller/StepFiller.module.css

@@ -1,16 +0,0 @@
-.firstLvlContainer {
-    max-width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-}
-
-.smallSeparator {
-    height: 0;
-    max-width: 100%;
-    flex-basis: 0;
-}
-
-.separator {
-    flex-basis: 100%;
-    height: 0;
-}

package/src/FormSteps/Utils/@StepFiller/StepFiller.tsx

@@ -1,69 +0,0 @@
-import { createContext, useCallback, useContext, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { FillerSteps, calcFillerSize } from '../../StepFunctions';
-import FormContext from '../../../Contexts/FormContext';
-import styles from './StepFiller.module.css';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import React from 'react';
-
-export const SizeChangeContext = createContext<(() => void) | undefined>(
-    undefined
-);
-
-export interface StepFillerContainerProps {
-    step: FillerSteps;
-    children: React.ReactNode;
-}
-
-function StepFiller({ step, children }: StepFillerContainerProps): JSX.Element {
-    const { getValues } = useFormContext();
-    const form = useContext(FormContext);
-    const [fillerSize, setFillerSize] = useState(
-        calcFillerSize(step, form.steps, getValues(), form.size)
-    );
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
-
-    const handleSizeChange = useCallback((): void => {
-        setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-    }, []);
-
-    if (step.maxSize && step.maxSize < form.size.blockNum) {
-        return (
-            <div
-                className={styles.firstLvlContainer}
-                style={{
-                    width:
-                        currentBreakPoint <= step.size ? '100%' : 'fit-content',
-                }}
-            >
-                <SizeChangeContext.Provider value={handleSizeChange}>
-                    {children}
-                </SizeChangeContext.Provider>
-                <div
-                    className={styles.smallSeparator}
-                    style={{
-                        width: fillerSize,
-                    }}
-                ></div>
-            </div>
-        );
-    } else {
-        return (
-            <SizeChangeContext.Provider value={handleSizeChange}>
-                {children}
-                {step.maxSize && <div className={styles.separator}></div>}
-            </SizeChangeContext.Provider>
-        );
-    }
-}
-
-function StepFillerContainer({
-    step,
-    children,
-}: StepFillerContainerProps): JSX.Element {
-    const handleSizeChange = useContext(SizeChangeContext);
-    if (handleSizeChange) return <>{children}</>;
-    else return <StepFiller step={step} children={children} />;
-}
-
-export default StepFillerContainer;

package/src/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.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;
-}