@arquimedes.co/eureka-forms 2.0.1-test → 2.0.3-test

package/README

@@ -0,0 +1,4 @@
+# E2E
+Se prueban los 3 casos:
+Standalone, desplegando la app buildeada 
+Widget y Libreria con el TestApp,

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

@@ -0,0 +1,8 @@
+export interface MapperElement<Type> {
+    id: string;
+    ids: Record<string, string>;
+    deleted?: boolean;
+    value?: Type;
+    originalValues: Record<string, any>;
+    isOriginal: boolean;
+}

package/dist/@Types/MapperElement.js

@@ -0,0 +1 @@
+export {};

package/dist/App/AppFunctions.d.ts

@@ -1,9 +1,9 @@
 import { Form } from '../@Types';
 import { FormStep, Mapper } from '../@Types/FormStep';
-import { MapperElement } from '../FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep';
 import { SiteState, ValuesStore } from '../States/SiteStateReducer';
 import { DependencyStore } from '../Form/Form';
 import { CustomStep } from '../FormSteps/CustomStep';
+import { MapperElement } from '../@Types/MapperElement';
 export declare const calcValuesStore: (originalValues: Record<string, any>, form: Form, dependencies: DependencyStore, customSteps: Record<string, CustomStep>) => ValuesStore;
 export declare const addMapperStep: <Type>(step: Mapper, customSteps: Record<string, CustomStep>) => {
     element: MapperElement<Type>;

package/dist/FormSteps/CustomStep.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { UseFormReturn } from 'react-hook-form';
 import { StepProps } from './Step';
 import { Form } from '../@Types';
 import { GlobalState } from '../States/GlobalStateReducer';
-export interface CustomStepProps extends StepProps, UseFormReturn, GlobalState {
+import { WidthStats } from '../Form/Form';
+export interface CustomStepProps extends StepProps, GlobalState {
     form: Form;
     customStepProps: Record<string, any>;
+    widthStats: WidthStats;
 }
 export interface CustomStep {
     componentProps?: Record<string, any>;

package/dist/FormSteps/CustomStep.js

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useFormContext } from 'react-hook-form';
 import FormContext from '../Contexts/FormContext';
 import { useAppSelector } from '../hooks';
 import CustomStepPropsContext from '../Contexts/CustomContext';
@@ -31,7 +30,7 @@ function CustomStepComponent(_a) {
     var form = useContext(FormContext);
     var global = useAppSelector(function (state) { return state.global; });
     var customStepProps = useContext(CustomStepPropsContext);
-    var formController = useFormContext();
-    return customStep.component(__assign(__assign(__assign(__assign(__assign({}, props), formController), { form: form, customStepProps: customStepProps }), global), ((_b = customStep.componentProps) !== null && _b !== void 0 ? _b : {})));
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    return customStep.component(__assign(__assign(__assign(__assign({}, props), { widthStats: widthStats, form: form, customStepProps: customStepProps }), global), ((_b = customStep.componentProps) !== null && _b !== void 0 ? _b : {})));
 }
 export default CustomStepComponent;

package/dist/FormSteps/MapperStep/MapperStep.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Mapper } from '../../@Types/FormStep';
-import { MapperElement } from './MaterialMapperStep/MaterialMapperStep';
 import { StepProps } from '../Step';
+import { MapperElement } from '../../@Types/MapperElement';
 interface CustomMapperElementModifiers<Type> {
     calcName?: (element: MapperElement<Type>) => string;
 }

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
-import { MapperElementComponentProps } from '../MapperElement';
+import { MapperElementComponentProps } from '../MapperElementComponent';
 declare function ListMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
 export default ListMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/{MapperElement.d.ts → MapperElementComponent.d.ts}

@@ -1,6 +1,6 @@
 import { MapperStepProps } from '../../MapperStep';
-import { MapperElement } from '../MaterialMapperStep';
 import React from 'react';
+import { MapperElement } from '../../../../@Types/MapperElement';
 export interface MapperElementComponentProps<Type> {
     num: number;
     loading: boolean;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
-import { MapperElementComponentProps } from '../MapperElement';
+import { MapperElementComponentProps } from '../MapperElementComponent';
 declare function PillMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
 export default PillMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -1,14 +1,7 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../MapperStep';
-export interface MapperElement<Type> {
-    id: string;
-    ids: Record<string, string>;
-    deleted?: boolean;
-    value?: Type;
-    originalValues: Record<string, any>;
-    isOriginal: boolean;
-}
-export declare function ElementsComponent<Type = any>({ step, inputRef, editable, elements, customAdd, loading, ...others }: MapperStepProps<Type> & {
+import { MapperElement } from '../../../@Types/MapperElement';
+export declare function ElementsComponent<Type = any>({ step, inputRef, editable, elements, customAdd, loading, onChange, ...others }: MapperStepProps<Type> & {
     loading?: boolean;
     onChange: (elements: MapperElement<Type>[]) => void;
     elements: MapperElement<Type>[];

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -31,12 +31,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React, { useState, useEffect, useContext, useMemo } from 'react';
+import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
 import styles from './MaterialMapperStep.module.css';
 import { Controller, useFormContext } from 'react-hook-form';
 import { MapperStyleTypes } from '../../../constants/FormStepTypes';
 import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
-import MapperElementComponent from './Element/MapperElement';
+import MapperElementComponent from './Element/MapperElementComponent';
 import { addStepsDependencies } from '../../../States/SiteStateReducer';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
@@ -44,7 +44,7 @@ import CustomContext from '../../../Contexts/CustomContext';
 import { useStepDependency } from '../../StepHooks';
 import { addMapperStep, calcRecursiveData } from '../../../App/AppFunctions';
 export function ElementsComponent(_a) {
-    var step = _a.step, inputRef = _a.inputRef, editable = _a.editable, elements = _a.elements, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, others = __rest(_a, ["step", "inputRef", "editable", "elements", "customAdd", "loading"]);
+    var step = _a.step, inputRef = _a.inputRef, editable = _a.editable, elements = _a.elements, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, onChange = _a.onChange, others = __rest(_a, ["step", "inputRef", "editable", "elements", "customAdd", "loading", "onChange"]);
     var form = useContext(FormContext);
     var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
     var customSteps = useContext(CustomContext).customSteps;
@@ -70,18 +70,13 @@ export function ElementsComponent(_a) {
         }
         return newSteps;
     })()), localSteps = _e[0], setLocalSteps = _e[1];
-    var onChange = function (elements) {
-        if (customAdd)
-            handleStepDep(elements.map(function (element) { return element.value; }));
-        others.onChange(elements);
-    };
     useEffect(function () {
         if (elements.length === 0 && !postview && editable && step.creatable) {
             if (!customAdd)
                 handleAddElement();
         }
     }, []);
-    var handleAddElement = function (value) {
+    var handleAddElement = useCallback(function (value) {
         var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
         if (value)
             element.value = value;
@@ -89,11 +84,23 @@ export function ElementsComponent(_a) {
             var _c = _b[_i], key = _c[0], elems = _c[1];
             setValue(key, elems);
         }
-        onChange(__spreadArray(__spreadArray([], elements, true), [element], false));
+        var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
+        if (customAdd)
+            handleStepDep(newElements.map(function (element) { return element.value; }));
+        onChange(newElements);
         setLocalSteps(__assign(__assign({}, localSteps), steps));
         dispatch(addStepsDependencies({ steps: steps, customSteps: customSteps }));
-    };
-    var calcStyles = function () {
+    }, [step, customSteps, elements]);
+    var handleDeleteElement = useCallback(function (index) { return function () {
+        var tempElements = __spreadArray([], elements, true);
+        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
+        if (customAdd)
+            handleStepDep(tempElements.map(function (element) { return element.value; }));
+        onChange(tempElements);
+    }; }, [elements, onChange]);
+    var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
+    var value = useMemo(function () { return JSON.stringify(elements); }, [elements]);
+    var container = useMemo(function () {
         var _a;
         switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
             case MapperStyleTypes.LIST:
@@ -102,23 +109,17 @@ export function ElementsComponent(_a) {
             default:
                 return { container: styles.pillContainer };
         }
-    };
-    var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    var container = calcStyles().container;
+    }, [step]).container;
     var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, handleDelete: function () {
-                    var tempElements = __spreadArray([], elements, true);
-                    tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-                    onChange(tempElements);
-                } }))); }) })));
+        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, handleDelete: handleDeleteElement(index) }))); }) })));
     };
     if (step.style.type === MapperStyleTypes.INLINE)
         return _jsx(React.Fragment, { children: mapElements() });
-    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor } }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { ref: inputRef, className: 'hidden-input' }), step.creatable !== false && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: value }), step.creatable !== false && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 handleAddElement();
                             }

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/package.json

@@ -1,15 +1,18 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"2.0.1-test",
+    "version":"2.0.3-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
         "lint": "eslint 'src/**/*.ts'",
-        "test": "jest --verbose --runInBand --passWithNoTests",
-        "test-ci": "jest --ci --reporters=default --reporters=jest-junit --coverage",
-        "tsc-build": "tsc --noEmit false --outDir ./dist",
-        "storybook": "storybook dev -p 6006"
+        "test": "react-scripts test",
+        "test-ci": "react-scripts test --reporters=default --reporters=jest-junit --coverage",
+        "tsc-build": "tsc --noEmit false --outDir ./dist --incremental false",
+        "watch": "tsc --build -w --preserveWatchOutput",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "cypress": "DISPLAY=:0 cypress open"
     },
     "dependencies": {
         "@date-io/date-fns": "^2.17.0",
@@ -18,12 +21,15 @@
         "@material-ui/lab": "4.0.0-alpha.61",
         "@material-ui/pickers": "^3.3.11",
         "@reduxjs/toolkit": "^1.9.7",
-        "axios": "^1.6.x",
-        "date-fns": "^2.30.x",
-        "draft-js": "^0.11.x",
+        "axios": "^1.6.2",
+        "date-fns": "^2.30.0",
+        "draft-js": "^0.11.7",
+        "logrocket": "^2.2.1",
         "nanoid": "^3.3.7",
-        "react-draft-wysiwyg": "^1.15.x",
+        "react-draft-wysiwyg": "^1.15.0",
         "react-google-recaptcha": "^3.1.0",
+        "react-hook-form": "^7.48.2",
+        "react-redux": "^8.1.3",
         "typescript": "^4.9.5"
     },
     "eslintConfig": {
@@ -45,17 +51,21 @@
         ]
     },
     "devDependencies": {
-        "@babel/core": "^7.23.5",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.23.5",
+        "@babel/preset-react": "^7.23.3",
+        "@babel/preset-typescript": "^7.23.3",
+        "@faker-js/faker": "^8.3.1",
         "@storybook/addon-coverage": "^1.0.0",
-        "@storybook/addon-essentials": "^7.6.3",
-        "@storybook/addon-interactions": "^7.6.3",
-        "@storybook/addon-links": "^7.6.3",
+        "@storybook/addon-essentials": "^7.6.4",
+        "@storybook/addon-interactions": "^7.6.4",
+        "@storybook/addon-links": "^7.6.4",
         "@storybook/addon-onboarding": "^1.0.9",
-        "@storybook/addon-themes": "^7.6.3",
-        "@storybook/blocks": "^7.6.3",
-        "@storybook/react": "^7.6.3",
-        "@storybook/react-webpack5": "^7.6.3",
-        "@storybook/test": "^7.6.3",
+        "@storybook/addon-themes": "^7.6.4",
+        "@storybook/blocks": "^7.6.4",
+        "@storybook/react": "^7.6.4",
+        "@storybook/react-webpack5": "^7.6.4",
+        "@storybook/test": "^7.6.4",
         "@testing-library/dom": "^9.3.3",
         "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^12.1.5",
@@ -69,8 +79,7 @@
         "@typescript-eslint/eslint-plugin": "^6.13.1",
         "@typescript-eslint/parser": "^6.13.1",
         "chromatic": "^10.0.0",
-        "css-loader": "^6.8.1",
-        "cypress": "^13.6.0",
+        "cypress": "^13.6.1",
         "dotenv-webpack": "^8.0.1",
         "eslint": "^8.55.0",
         "eslint-config-prettier": "^9.1.0",
@@ -80,26 +89,15 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-junit": "^16.0.0",
-        "postcss-normalize": "^10.0.1",
         "prettier": "^3.1.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react-refresh": "^0.11.0",
         "react-scripts": "5.0.1",
-        "storybook": "^7.6.3",
+        "storybook": "^7.6.4",
         "ts-jest": "^29.1.1"
     },
     "peerDependencies": {
-        "axios": "^1.6.x",
-        "babel-plugin-add-react-displayname": "0.0.x",
-        "date-fns": "^2.30.x",
-        "draft-js": "^0.11.x",
-        "logrocket": "^2.x.x",
-        "react": "^17.0.2",
-        "react-dom": "^17.x.x",
-        "react-draft-wysiwyg": "^1.15.x",
-        "react-hook-form": "^7.48.2",
-        "@reduxjs/toolkit": "^1.9.7",
-        "react-redux": "^8.1.3"
+        "react": "^17.x.x",
+        "react-dom": "^17.x.x"
     },
     "publishConfig": {
         "access": "public"