@arquimedes.co/eureka-forms 1.1.4 → 1.1.6-test

package/dist/@Types/Form.d.ts

@@ -47,8 +47,10 @@ export interface MaterialStyle {
     type: FormStyleTypes.MATERIAL;
     backgroundColor: string;
     primaryColor: string;
+    secondaryColor: string;
     errorColor: string;
     primaryContrastColor: string;
+    secondaryContrastColor: string;
     textColor: string;
     outlineColor: string;
     stepBackgroundColor: string;

package/dist/@Types/FormStep.d.ts

@@ -52,6 +52,7 @@ export interface DatePicker {
     id: string;
     type: Types.DATEPICKER;
     label: string;
+    pickTime: boolean;
     description: string | null;
     required: boolean;
     showIcon: boolean;

package/dist/App.js

@@ -65,6 +65,7 @@ import FormComponent from './FormComponents/Form/Form';
 import StepTypes from './constants/FormStepTypes';
 import axiosInstance from './AxiosAPI';
 import widgetInstance from './AxiosWidget';
+import LogRocket from 'logrocket';
 function App(_a) {
     var _this = this;
     var _b, _c, _d, _e;
@@ -119,6 +120,20 @@ function App(_a) {
             setOrganizationInfo(null);
         }
     }, []);
+    useEffect(function () {
+        if (organizationInfo) {
+            if (process.env.NODE_ENV === 'production' &&
+                apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
+                !internal &&
+                !postview &&
+                !preview) {
+                LogRocket.init('63mg8a/forms-uv0gd');
+                LogRocket.identify(organizationInfo.idOrganization + '/' + apiKey, {
+                    organization: organizationInfo.name,
+                });
+            }
+        }
+    }, [organizationInfo]);
     var containerRef = useRef();
     var loadOrgInfo = function (domain) { return __awaiter(_this, void 0, void 0, function () {
         var response, _a, error_1;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.module.css

@@ -15,12 +15,13 @@
 .submitBtnContainer {
     margin-top: 10px;
     width: 200px;
+    max-width: calc(100% - 40px);
 }
 
 .submitBtn {
     border-radius: 20px;
     padding: 15px 10px;
-    width: 100%;
+    width: calc(100% - 30px);
     margin: 0 auto 0 auto;
     font-size: 1.4rem;
     cursor: pointer;

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedDatePicker, __assign({}, field, { showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id], required: step.required }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,9 +20,10 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
+    var _b;
     var step = _a.step, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
-    var _b = useState(false), hovering = _b[0], setHovering = _b[1];
-    var _c = useState(false), focus = _c[0], setFocus = _c[1];
+    var _c = useState(false), hovering = _c[0], setHovering = _c[1];
+    var _d = useState(false), focus = _d[0], setFocus = _d[1];
     var calcStyle = function () {
         if (focus) {
             return {
@@ -92,7 +93,7 @@ function TextAreaStep(_a) {
                                 }
                                 return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
                                         setFocus(true);
-                                    }, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                                    }, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
                                         options: [
                                             'inline',
                                             'list',
@@ -117,7 +118,7 @@ function TextAreaStep(_a) {
     else {
         return (_jsx("div", __assign({ className: styles.container, style: {
                 paddingBottom: step.description || !!errors[step.id] ? '0px' : '23px',
-            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: "", rules: {
+            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: (_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : '', rules: {
                     required: step.required
                         ? 'Este campo es obligatorio'
                         : undefined,

package/dist/constants/InternalFormStyle.js

@@ -4,7 +4,9 @@ var InternalFormStyle = {
     backgroundColor: '#ffffff',
     stepBackgroundColor: '#ffffff',
     primaryColor: '#3d5a7f',
+    secondaryColor: '#98c1d9',
     primaryContrastColor: '#ffffff',
+    secondaryContrastColor: '#ee6c4d',
     errorColor: '#cc2936',
     textColor: '#293241',
     outlineColor: '#b8b8b8',

package/dist/shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -12,10 +12,18 @@ interface StyleProps {
     outlineColor?: string;
     /** The backgroundColor of the input */
     backgroundColor?: string;
+    /** The secondary color of the dialog */
+    secondaryColor?: string;
+    /** The contrastColor of the input */
+    contrastColor?: string;
+    /** The accent color of the input */
+    accentColor?: string;
     /** The color of the inner input */
     innerBackgroundColor?: string;
     /** The borderRadius of the input */
     borderRadius?: number;
+    /** If it should display the timePicker */
+    pickTime?: boolean;
     /** The padding of the input */
     padding?: string;
     /** The size of the font to display the input in */

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -39,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { KeyboardDatePicker, } from '@material-ui/pickers';
+import { KeyboardDatePicker, KeyboardDateTimePicker, } from '@material-ui/pickers';
 import { getLocale } from '../../FormComponents/Form/Form';
 import { format } from 'date-fns';
 var useDatePickerStyles = function (props) {
@@ -78,8 +78,9 @@ var useDatePickerStyles = function (props) {
                     : props.focusColor,
             },
             '& .EF-MuiInputAdornment-root': {
+                width: 5,
                 '& button': {
-                    marginRight: -20,
+                    marginLeft: -25,
                     fontSize: 18,
                     padding: 16,
                 },
@@ -159,11 +160,57 @@ var useDatePickerDialogStyles = function (props) {
                 color: props.backgroundColor,
                 backgroundColor: props.focusColor,
             },
+            //Title
+            '& .EF-MuiPickersToolbar-toolbar': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickerDTTabs-tabs': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
+                color: props.focusColor,
+            },
+            '& .EF-MuiTabs-indicator': {
+                backgroundColor: props.contrastColor,
+            },
+            '& .EF-MuiPickersClockNumber-clockNumber': {
+                color: props.accentColor,
+            },
+            '& .EF-MuiPickersClockNumber-clockNumberSelected': {
+                color: props.backgroundColor,
+            },
+            '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersClockPointer-noPoint': {
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersClockPointer-thumb': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiPickersDay-dayDisabled': {
+                color: 'rgba(0, 0, 0, 0.38)',
+                pointerEvents: 'all',
+            },
+            '& .EF-MuiPickersDay-current': {
+                color: props.backgroundColor,
+                backgroundColor: props.secondaryColor,
+            },
+            '& .EF-MuiPickersDay-hidden': {
+                opacity: 0.4,
+                pointerEvents: 'none',
+            },
+            '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
+                opacity: 0.8,
+                pointerEvents: 'none',
+            },
         },
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.outlineColor, outlineColor = _c === void 0 ? '#0000003b' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, innerBackgroundColor = _a.innerBackgroundColor, _e = _a.textColor, textColor = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 10 : _g, _h = _a.padding, padding = _h === void 0 ? '6px 12px' : _h, _j = _a.fontSize, fontSize = _j === void 0 ? '1rem' : _j, _k = _a.shrunkenFontSize, shrunkenFontSize = _k === void 0 ? '1rem' : _k, _l = _a.helperTextColor, helperTextColor = _l === void 0 ? '#989898' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.showIcon, showIcon = _r === void 0 ? true : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -200,6 +247,9 @@ function CustomDatePicker(_a) {
         padding: padding,
         cantEdit: cantEdit,
         textColor: textColor,
+        secondaryColor: secondaryColor,
+        accentColor: accentColor,
+        contrastColor: contrastColor,
         focusColor: focusColor,
         hoverColor: focusColor + '0a',
         errorColor: errorColor,
@@ -226,25 +276,48 @@ function CustomDatePicker(_a) {
         fontWeight: fontWeight,
         helperTextColor: helperTextColor,
     })();
-    return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
-            disableEnforceFocus: true,
-            className: datePicker,
-            cancelLabel: '',
-        } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
-        , InputProps: {
-            required: required,
-            classes: classes,
-            disabled: cantEdit,
-        }, FormHelperTextProps: {
-            classes: helperTextStyles,
-        }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
-            if (!day) {
-                return dayComponent;
-            }
-            return (_jsx("div", __assign({ onClick: function () {
-                    onChange(day);
-                } }, { children: cloneElement(dayComponent) }), void 0));
-        }, variant: "dialog" }), void 0));
+    if (pickTime) {
+        return (_jsx(KeyboardDateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+                disableEnforceFocus: true,
+                className: datePicker,
+                cancelLabel: '',
+            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
+            , InputProps: {
+                required: required,
+                classes: classes,
+                disabled: cantEdit,
+            }, FormHelperTextProps: {
+                classes: helperTextStyles,
+            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
+                if (!day) {
+                    return dayComponent;
+                }
+                return (_jsx("div", __assign({ onClick: function () {
+                        onChange(day);
+                    } }, { children: cloneElement(dayComponent) }), void 0));
+            }, variant: "dialog" }), void 0));
+    }
+    else {
+        return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+                disableEnforceFocus: true,
+                className: datePicker,
+                cancelLabel: '',
+            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
+            , InputProps: {
+                required: required,
+                classes: classes,
+                disabled: cantEdit,
+            }, FormHelperTextProps: {
+                classes: helperTextStyles,
+            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
+                if (!day) {
+                    return dayComponent;
+                }
+                return (_jsx("div", __assign({ onClick: function () {
+                        onChange(day);
+                    } }, { children: cloneElement(dayComponent) }), void 0));
+            }, variant: "dialog" }), void 0));
+    }
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "1.1.4",
+    "version":"1.1.6-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -72,7 +72,9 @@
         "draft-js": "^0.11.x",
         "react-draft-wysiwyg": "^1.14.x",
         "react-hook-form": "^7.6.4",
-        "react-router-dom": "^5.2.0"
+        "react-router-dom": "^5.2.0",
+        "babel-plugin-add-react-displayname": "0.0.x",
+        "logrocket": "^2.x.x"
     },
     "publishConfig": {
         "access": "public"
@@ -81,5 +83,5 @@
     "files": [
         "/dist"
     ],
-    "proxy": "https://api.forms.capta.co"
+    "proxy": "https://api.forms.eureka-test.click"
 }