@arquimedes.co/eureka-forms 1.1.8-test → 1.2.0-test

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

@@ -1 +1,2 @@
 export type { Organization } from './Organization';
+export type { Form } from './Form';

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

@@ -0,0 +1 @@
+export * from './@Types';

package/dist/@Types/index.js

@@ -0,0 +1 @@
+export * from './@Types';

package/dist/App.js

@@ -65,7 +65,6 @@ 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;
@@ -120,31 +119,51 @@ function App(_a) {
             setOrganizationInfo(null);
         }
     }, []);
-    useEffect(function () {
-        if (organizationInfo && form !== undefined) {
-            if (process.env.NODE_ENV === 'production' &&
-                apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
-                !internal &&
-                !postview &&
-                !preview) {
-                LogRocket.init('63mg8a/forms-uv0gd');
-                LogRocket.identify(organizationInfo.idOrganization + '/' + apiKey, {
-                    name: organizationInfo.name +
-                        '/' +
-                        (form ? form === null || form === void 0 ? void 0 : form.name : '404'),
-                });
+    var loadLogRocket = function () { return __awaiter(_this, void 0, void 0, function () {
+        var LogRocket, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(organizationInfo && form !== undefined)) return [3 /*break*/, 4];
+                    if (!(process.env.NODE_ENV === 'production' &&
+                        apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
+                        apiKey !== 'X4aMB86AHeg4qRs4CH4o8' &&
+                        !internal &&
+                        !postview &&
+                        !preview)) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, import('logrocket')];
+                case 2:
+                    LogRocket = _a.sent();
+                    LogRocket.default.init('63mg8a/forms-uv0gd');
+                    LogRocket.default.identify(organizationInfo.idOrganization + '/' + apiKey, {
+                        name: organizationInfo.name +
+                            '/' +
+                            (form ? form === null || form === void 0 ? void 0 : form.name : '404'),
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('LogRocker Error', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
             }
-        }
+        });
+    }); };
+    useEffect(function () {
+        loadLogRocket();
     }, [organizationInfo, form]);
     var containerRef = useRef();
     var loadOrgInfo = function (domain) { return __awaiter(_this, void 0, void 0, function () {
-        var response, _a, error_1;
+        var response, _a, error_2;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
                     _b.trys.push([0, 5, , 6]);
                     if (!domain) return [3 /*break*/, 2];
-                    return [4 /*yield*/, widgetInstance.get("/organization?idOrganization=".concat(domain))];
+                    return [4 /*yield*/, widgetInstance.get("/organization?idOrganization=" + domain)];
                 case 1:
                     _a = _b.sent();
                     return [3 /*break*/, 4];
@@ -172,8 +191,8 @@ function App(_a) {
                     }
                     return [3 /*break*/, 6];
                 case 5:
-                    error_1 = _b.sent();
-                    console.error(error_1);
+                    error_2 = _b.sent();
+                    console.error(error_2);
                     setOrganizationInfo(null);
                     return [3 /*break*/, 6];
                 case 6: return [2 /*return*/];
@@ -181,14 +200,14 @@ function App(_a) {
         });
     }); };
     var loadInfo = function (apiKey, domain) { return __awaiter(_this, void 0, void 0, function () {
-        var response, error_2;
+        var response, error_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     _a.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, (domain
-                            ? widgetInstance.get("/form/".concat(apiKey, "?idOrganization=").concat(domain))
-                            : axiosInstance.get("/form/".concat(apiKey)))];
+                            ? widgetInstance.get("/form/" + apiKey + "?idOrganization=" + domain)
+                            : axiosInstance.get("/form/" + apiKey))];
                 case 1:
                     response = _a.sent();
                     if (response) {
@@ -199,8 +218,8 @@ function App(_a) {
                     }
                     return [3 /*break*/, 3];
                 case 2:
-                    error_2 = _a.sent();
-                    console.error(error_2);
+                    error_3 = _a.sent();
+                    console.error(error_3);
                     setForm(null);
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];

package/dist/AxiosWidget.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 var headers = {};
 var widgetInstance = axios.create({
-    baseURL: "https://api.forms.".concat(process.env.REACT_APP_DOMAIN, "/api"),
+    baseURL: "https://api.forms." + process.env.REACT_APP_DOMAIN + "/api",
     timeout: 30000,
     headers: headers,
 });

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -119,9 +119,9 @@ function ColumnForm(_a) {
                     payload = {
                         formValues: { steps: values },
                     };
-                    url = "/ticket/".concat(internal ? form.apiKey : apiKey);
+                    url = "/ticket/" + (internal ? form.apiKey : apiKey);
                     if (!(domain || internal)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, widgetInstance.post("".concat(url, "?idOrganization=").concat(domain), payload)];
+                    return [4 /*yield*/, widgetInstance.post(url + "?idOrganization=" + domain, payload)];
                 case 3:
                     _b = _c.sent();
                     return [3 /*break*/, 6];
@@ -148,7 +148,7 @@ function ColumnForm(_a) {
                     setShowConfirmation(undefined);
                 } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps }, others), index)); }), form.terms &&
                 !internal &&
-                form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "login__submit", className: styles.submitBtn, onClick: function () {
+                form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () {
                         onSubmit();
                     }, style: {
                         background: formStyle.primaryColor,

package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -24,7 +24,7 @@ function ConfirmationDialog(_a) {
             },
         }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
                         onClose();
-                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("label", __assign({ className: styles.url, onClick: function () {
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("label", __assign({ className: styles.url, "data-testid": "ResUrl", onClick: function () {
                                 var _a, _b, _c;
                                 (_c = (_b = (_a = window
                                     .open) === null || _a === void 0 ? void 0 : _a.call(window, confirmation.url, '_blank')) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -20,7 +20,6 @@ function CheckBoxStep(_a) {
             width: widthStats.currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form),
-            maxWidth: '100%',
             minHeight: step.description || step.required ? '55px' : '43px',
         } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }), void 0), _jsx(Controller, { name: step.id, control: control, defaultValue: false, rules: {
                             required: step.required
@@ -28,7 +27,7 @@ function CheckBoxStep(_a) {
                                 : undefined,
                         }, shouldUnregister: true, render: function (_a) {
                             var field = _a.field;
-                            return (_jsx(RoundedCheckBox, __assign({}, field, { inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
+                            return (_jsx(RoundedCheckBox, __assign({}, field, { "data-testid": step.id, inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
                         } }, void 0)] }), void 0), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
                     color: !!errors[step.id]
                         ? formStyle.errorColor

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -51,12 +51,11 @@ function ClassifierSelector(_a) {
                 width: widthStats.currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form),
-                maxWidth: '100%',
                 minHeight: step.description || step.required ? '55px' : '43px',
             } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
-                }, inputRef: inputRef, helperText: errors[step.id]
+                }, "data-testid": step.id, inputRef: inputRef, helperText: errors[step.id]
                     ? errors[step.id].message
                     : step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
                         .filter(function (classifier) {

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.module.css

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

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, { 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]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, "data-testid": step.id, 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/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.module.css

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

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -190,7 +190,7 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
+    return (_jsxs("div", __assign({ className: styles.container, "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
                     var files = e.target.files;
                     if (files) {
                         var filesArray = Array.from(files);

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -45,7 +45,7 @@ function Selector(_a) {
                     ? '100%'
                     : calcStepWidth(step.size, form),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
+            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, "data-testid": step.id, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
                 }, helperText: errors[step.id]

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

@@ -95,7 +95,7 @@ function TextAreaStep(_a) {
                                 }
                                 return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
                                         setFocus(true);
-                                    }, readOnly: postview, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar +
+                                    }, "data-testid": step.id, readOnly: postview, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar +
                                         (postview
                                             ? ' postview-editor-toolbar'
                                             : ''), editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
@@ -129,7 +129,7 @@ function TextAreaStep(_a) {
                         : undefined,
                 }, shouldUnregister: true, render: function (_a) {
                     var field = _a.field;
-                    return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
+                    return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                             ? errors[step.id].message
                             : step.description, error: !!errors[step.id] }), void 0));
                 } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -1,7 +1,7 @@
 .container,
 .textEditorContainer {
     width: fit-content;
-    max-width: 100%;
+    max-width: calc(100% - 20px);
     display: flex;
     padding: 10px;
     padding-bottom: 0px;

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -35,7 +35,7 @@ function TextInputStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
+                return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!errors[step.id] }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.module.css

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

package/dist/controllers/FileService.js

@@ -49,7 +49,7 @@ export function getUploadUrls(files, domain) {
                         extension: file.name.split('.').pop(),
                     }); });
                     if (!domain) return [3 /*break*/, 2];
-                    return [4 /*yield*/, widgetInstance.post("/uploadfile?idOrganization=".concat(domain), filesArray)];
+                    return [4 /*yield*/, widgetInstance.post("/uploadfile?idOrganization=" + domain, filesArray)];
                 case 1:
                     response = _b.sent();
                     return [3 /*break*/, 4];

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.1.8-test",
+    "version":"1.2.0-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
+        "e2e": "percy exec -- cypress run",
         "lint": "eslint 'src/**/*.ts'",
         "tsc-build": "tsc --noEmit false --outDir ./dist"
     },
@@ -17,11 +18,11 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
-        "axios": "^0.21.1",
-        "date-fns": "^2.23.0",
-        "draft-js": "^0.11.7",
-        "react-draft-wysiwyg": "^1.14.7",
-        "react-hook-form": "7.18.1",
+        "axios": "^0.21.x",
+        "date-fns": "^2.23.x",
+        "draft-js": "^0.11.x",
+        "react-draft-wysiwyg": "^1.14.x",
+        "react-hook-form": "^7.6.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.0-next.37",
         "typescript": "^4.4.3"
@@ -46,15 +47,17 @@
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
+        "@percy/cli": "^1.0.0-beta.76",
+        "@percy/cypress": "^3.1.1",
         "@types/draft-js": "^0.11.5",
         "@types/jest": "^26.0.24",
-        "@types/node": "^12.20.25",
         "@types/react": "^17.0.21",
         "@types/react-dom": "^17.0.9",
         "@types/react-draft-wysiwyg": "^1.13.3",
         "@types/react-router-dom": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^4.24.0",
         "@typescript-eslint/parser": "^4.24.0",
+        "cypress": "^9.5.1",
         "eslint": "^7.27.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^3.4.0",
@@ -65,16 +68,16 @@
         "react-dom": "^17.0.2"
     },
     "peerDependencies": {
-        "react": "^17.x.x",
-        "react-dom": "^17.x.x",
         "axios": "^0.21.x",
+        "babel-plugin-add-react-displayname": "0.0.x",
         "date-fns": "^2.23.x",
         "draft-js": "^0.11.x",
+        "logrocket": "^2.x.x",
+        "react": "^17.x.x",
+        "react-dom": "^17.x.x",
         "react-draft-wysiwyg": "^1.14.x",
         "react-hook-form": "^7.6.4",
-        "react-router-dom": "^5.2.0",
-        "babel-plugin-add-react-displayname": "0.0.x",
-        "logrocket": "^2.x.x"
+        "react-router-dom": "^5.2.0"
     },
     "publishConfig": {
         "access": "public"