@altiore/form - npm Package Compare versions

Comparing version 0.3.14 to 0.3.15

dist/@common/hooks/use-register-field.d.ts

@@ -1,2 +0,2 @@
-import { ArrayFieldState, FieldMeta, FormContextState } from '../types';
+import { FieldArrayState, FieldMeta, FormContextState } from '../types';
 declare type ResType = {
@@ -7,3 +7,3 @@ isInsideForm: boolean;
 };
-export declare const useRegisterField: (arrayFieldState: ArrayFieldState, formState: FormContextState, providedName: string, isArray?: boolean) => ResType;
+export declare const useRegisterField: (fieldArrayState: FieldArrayState, formState: FormContextState, providedName: string, isArray?: boolean) => ResType;
 export {};

dist/@common/hooks/use-register-field.js

 import { useEffect, useMemo } from 'react';
-export var useRegisterField = function (arrayFieldState, formState, providedName, isArray) {
+export var useRegisterField = function (fieldArrayState, formState, providedName, isArray) {
     if (isArray === void 0) { isArray = false; }
     var fieldName = useMemo(function () {
-        return (arrayFieldState === null || arrayFieldState === void 0 ? void 0 : arrayFieldState.name) &&
-            !providedName.match(new RegExp('^' + String(arrayFieldState.name)))
-            ? arrayFieldState.name + "." + providedName
+        return (fieldArrayState === null || fieldArrayState === void 0 ? void 0 : fieldArrayState.name) &&
+            !providedName.match(new RegExp('^' + String(fieldArrayState.name)))
+            ? fieldArrayState.name + "." + providedName
             : providedName;
-    }, [arrayFieldState === null || arrayFieldState === void 0 ? void 0 : arrayFieldState.name, providedName]);
+    }, [fieldArrayState === null || fieldArrayState === void 0 ? void 0 : fieldArrayState.name, providedName]);
     var registerField = useMemo(function () { return formState === null || formState === void 0 ? void 0 : formState.registerField; }, [formState === null || formState === void 0 ? void 0 : formState.registerField]);
@@ -11,0 +11,0 @@ var isInsideForm = useMemo(function () { return Boolean(registerField); }, [registerField]);

dist/@common/hooks/use-validate-input.js

@@ -14,5 +14,5 @@ import { useCallback, useEffect, useState } from 'react';
             validators.forEach(function (validate) {
-                var error = validate(value_1);
+                var error = validate.validate(value_1).error;
                 if (error) {
-                    errors_1.push(error);
+                    errors_1.push(error.message);
                 }
@@ -19,0 +19,0 @@ });

dist/@common/types.d.ts

@@ -24,9 +24,14 @@ import { MouseEventHandler, MutableRefObject } from 'react';
     fields: Record<string, FieldMeta>;
+    formRef: MutableRefObject<HTMLFormElement>;
     registerField: RegisterField;
-    getList: (fieldMeta: FieldMeta) => ListInterface;
-    formRef: MutableRefObject<HTMLFormElement>;
+    setItems: (fieldName: string, setItems: (i: number[]) => number[]) => void;
 };
-export interface ArrayFieldState {
+export interface FieldArrayState {
     name: string;
 }
-export declare type ValidateFuncType = (value: any) => string | undefined;
+export declare type ValidateFuncType = {
+    validate: (value: any) => {
+        error: Error;
+        value: any;
+    } | undefined | any;
+};

dist/create-field/create-field.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { ValidateFuncType } from '../@common/types';
@@ -3,0 +2,0 @@ import { InternalFieldProps } from './validated-field';

dist/create-field/create-field.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
-import { ArrayFieldContext } from '../@common/array-field-context';
+import { FieldArrayContext } from '../@common/field-array-context';
 import { FormContext } from '../@common/form-context';
@@ -30,4 +30,4 @@ import { useRegisterField } from '../@common/hooks/use-register-field';
 var NamedField = function (_a) {
-    var arrayFieldState = _a.arrayFieldState, formState = _a.formState, providedName = _a.providedName, rest = __rest(_a, ["arrayFieldState", "formState", "providedName"]);
-    var _b = useRegisterField(arrayFieldState, formState, providedName), field = _b.field, isInsideForm = _b.isInsideForm, name = _b.name;
+    var fieldArrayState = _a.fieldArrayState, formState = _a.formState, providedName = _a.providedName, rest = __rest(_a, ["fieldArrayState", "formState", "providedName"]);
+    var _b = useRegisterField(fieldArrayState, formState, providedName), field = _b.field, isInsideForm = _b.isInsideForm, name = _b.name;
     if (isInsideForm && !field) {
@@ -65,8 +65,8 @@ return null;
 export var createField = function (component) {
-    return function (_a) {
+    return React.memo(function (_a) {
         var name = _a.name, validators = _a.validators, props = __rest(_a, ["name", "validators"]);
-        return (React.createElement(FormContext.Consumer, null, function (formState) { return (React.createElement(ArrayFieldContext.Consumer, null, function (arrayFieldState) {
-            return (React.createElement(NamedField, { arrayFieldState: arrayFieldState, formState: formState, component: component, componentProps: props, providedName: name, validators: validators }));
+        return (React.createElement(FormContext.Consumer, null, function (formState) { return (React.createElement(FieldArrayContext.Consumer, null, function (fieldArrayState) {
+            return (React.createElement(NamedField, { fieldArrayState: fieldArrayState, formState: formState, component: component, componentProps: props, providedName: name, validators: validators }));
         })); }));
-    };
+    });
 };

dist/create-field/field/field.js

@@ -5,2 +5,3 @@ import React from 'react';
     var errors = _a.errors, inputRef = _a.inputRef, label = _a.label, name = _a.name;
+    console.log('Field.render');
     return (React.createElement("div", null,
@@ -7,0 +8,0 @@ React.createElement("span", null, label),

dist/create-field/validated-field/validated-field.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
-import { useValidateInput } from '../../@common/hooks/use-validate-input';
+import { useValidateInput } from '../../@common/hooks';
 import { useInput } from './validated-field.hooks';
@@ -16,0 +16,0 @@ var ValidatedFieldComponent = function (_a) {

dist/form/form.js

@@ -17,3 +17,2 @@ var __assign = (this && this.__assign) || function () {
 import { FormContext } from '../@common/form-context';
-import { add, map, remove } from '../create-array-field/array-field.utils';
 /**
@@ -39,62 +38,39 @@ * Компонент Form принимает children, defaultValues, onSubmit
     var formRef = useRef(null);
-    var _b = useState({
-        fields: {},
-    }), formState = _b[0], setFormState = _b[1];
+    var _b = useState({}), fields = _b[0], setFields = _b[1];
     var setErrors = useCallback(function (fieldName, errors) {
-        setFormState(function (s) {
+        setFields(function (s) {
             var _a;
-            if (isEqual(s.fields[fieldName].errors, errors)) {
+            if (isEqual(s[fieldName].errors, errors)) {
                 return s;
             }
-            return __assign(__assign({}, s), { fields: __assign(__assign({}, s.fields), (_a = {}, _a[fieldName] = __assign(__assign({}, s.fields[fieldName]), { errors: errors }), _a)) });
+            return __assign(__assign({}, s), (_a = {}, _a[fieldName] = __assign(__assign({}, s[fieldName]), { errors: errors }), _a));
         });
-    }, [setFormState]);
+    }, [setFields]);
     var setItems = useCallback(function (fieldName, setItems) {
-        setFormState(function (s) {
+        setFields(function (s) {
             var _a;
-            return (__assign(__assign({}, s), { fields: __assign(__assign({}, s.fields), (_a = {}, _a[fieldName] = __assign(__assign({}, s.fields[fieldName]), { items: setItems(s.fields[fieldName].items) }), _a)) }));
+            return (__assign(__assign({}, s), (_a = {}, _a[fieldName] = __assign(__assign({}, s[fieldName]), { items: setItems(s[fieldName].items) }), _a)));
         });
-    }, [setFormState]);
-    var getList = useCallback(function (fieldMeta) {
-        var fieldName = fieldMeta.name;
-        var addHandler = function (field, index) {
-            return setItems(fieldName, function (i) {
-                return add(i, fieldName, field, index);
-            });
-        };
-        var removeHandler = function (index) {
-            return setItems(fieldName, function (i) {
-                var res = remove(i, fieldName, index);
-                return res;
-            });
-        };
-        var items = fieldMeta.items || [];
-        var mapHandler = map.bind({}, addHandler, removeHandler, items, fieldName);
-        return {
-            add: addHandler,
-            map: mapHandler,
-            remove: removeHandler,
-        };
-    }, [setItems]);
+    }, [setFields]);
     var registerField = useCallback(function (fieldName, isArray) {
-        setFormState(function (s) {
+        setFields(function (s) {
             var _a;
             var defaultValue = get(defaultValues, fieldName.split('.'));
-            return __assign(__assign({}, s), { fields: __assign(__assign({}, s.fields), (_a = {}, _a[fieldName] = {
-                    defaultValue: defaultValue,
-                    errors: [],
-                    items: isArray ? [] : undefined,
-                    name: fieldName,
-                    setErrors: setErrors.bind({}, fieldName),
-                }, _a)) });
+            return __assign(__assign({}, s), (_a = {}, _a[fieldName] = {
+                defaultValue: defaultValue,
+                errors: [],
+                items: isArray ? [] : undefined,
+                name: fieldName,
+                setErrors: setErrors.bind({}, fieldName),
+            }, _a));
         });
         return function () {
-            setFormState(function (s) {
+            setFields(function (s) {
                 var _a;
-                var newState = __assign(__assign({}, s), { fields: __assign(__assign({}, s.fields), (_a = {}, _a[fieldName] = undefined, _a)) });
-                delete newState.fields[fieldName];
+                var newState = __assign(__assign({}, s), (_a = {}, _a[fieldName] = undefined, _a));
+                delete newState[fieldName];
                 return newState;
             });
         };
-    }, [defaultValues, setFormState]);
+    }, [defaultValues, setFields]);
     var handleSubmit = useCallback(function (evt) {
@@ -112,3 +88,8 @@ var _a;
     return (React.createElement("form", { onSubmit: handleSubmit, ref: formRef },
-        React.createElement(FormContext.Provider, { value: __assign(__assign({}, formState), { formRef: formRef, getList: getList, registerField: registerField }) }, children)));
+        React.createElement(FormContext.Provider, { value: {
+                fields: fields,
+                formRef: formRef,
+                registerField: registerField,
+                setItems: setItems,
+            } }, children)));
 };

dist/index.d.ts

@@ -1,4 +0,4 @@
-export * from './create-array-field';
 export * from './create-field';
+export * from './create-field-array';
 export * from './form';
 export * from './validators';

dist/index.js

@@ -1,4 +0,4 @@
-export * from './create-array-field';
 export * from './create-field';
+export * from './create-field-array';
 export * from './form';
 export * from './validators';

dist/validators/max-length/max-length.js

@@ -1,12 +0,15 @@
-export var maxLength = function (length) {
-    return function (value) {
+export var maxLength = function (length) { return ({
+    validate: function (value) {
         var stringedValue = value.toString();
         if (length < 0) {
-            return "Param 'length' cannot be less than 0";
+            return { error: new Error("Param 'length' cannot be less than 0"), value: value };
         }
         if (stringedValue.length > length) {
-            return "The length of the entered value should be no more than " + length + " characters";
+            return {
+                error: new Error("The length of the entered value should be no more than " + length + " characters"),
+                value: value,
+            };
         }
         return undefined;
-    };
-};
+    },
+}); };

dist/validators/min-length/min-length.js

@@ -1,15 +0,24 @@
-export var minLength = function (length) {
-    return function (value) {
+export var minLength = function (length) { return ({
+    validate: function (value) {
         if (value === void 0) { value = ''; }
         if (typeof (value === null || value === void 0 ? void 0 : value.length) !== 'number') {
-            throw new Error("Not supported type \"" + typeof value + "\" provided to validate function \"minLength\"");
+            return {
+                error: new Error("Not supported type \"" + typeof value + "\" provided to validate function \"minLength\""),
+                value: value,
+            };
         }
         if (length < 0) {
-            throw new Error("Param 'length' cannot be less than 0");
+            return {
+                error: new Error("Param 'length' cannot be less than 0"),
+                value: value,
+            };
         }
         if (value.length < length) {
-            return "The length of the entered value should be no more than " + length + " characters";
+            return {
+                error: new Error("The length of the entered value should be no more than " + length + " characters"),
+                value: value,
+            };
         }
         return undefined;
-    };
-};
+    },
+}); };

dist/validators/regexp/regexp.js

@@ -1,9 +0,12 @@
-export var regexp = function (regex) {
-    return function (value) {
+export var regexp = function (regex) { return ({
+    validate: function (value) {
         var stringedValue = value.toString();
         if (!regex.test(stringedValue)) {
-            return stringedValue + " does not fit the regular expression " + regex;
+            return {
+                error: new Error(stringedValue + " does not fit the regular expression " + regex),
+                value: value,
+            };
         }
         return undefined;
-    };
-};
+    },
+}); };

package.json

 {
 	"name": "@altiore/form",
-	"version": "0.3.14",
+	"version": "0.3.15",
 	"description": "Form helper for building powerful forms",
@@ -12,8 +12,7 @@ "main": "dist/index.js",
 		"start": "npm run story",
-		"test:jest": "jest",
-		"build": "rm -rf dist && tsc && tscpaths -p tsconfig.json -s ./src -o ./dist",
+		"build": "rm -rf dist && tsc && tscpaths -p tsconfig.build.json -s ./src -o ./dist",
 		"npm:patch": "npm version patch && npm publish --access=public && git push && git push --tags",
 		"npm:minor": "npm version minor && npm publish --access=public && git push && git push --tags",
 		"npm:major": "npm version major && npm publish --access=public && git push && git push --tags",
-		"test": "npm run build",
+		"test": "jest",
 		"lint": "tsc --noEmit && prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml}\" && eslint . --fix --ext .js,.jsx,.ts,.tsx --max-warnings=0",
@@ -65,3 +64,3 @@ "lint:ci": "tsc --noEmit && prettier --check \"**/*.{js,jsx,ts,tsx,json,md,yml}\" && eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0",
 	"dependencies": {
-		"lodash.debounce": "4.0.8"
+		"lodash": "4.17.21"
 	},
@@ -76,9 +75,14 @@ "devDependencies": {
 		"@storybook/storybook-deployer": "^2.8.10",
+		"@types/enzyme": "3.10.10",
 		"@types/jest": "^27.0.2",
+		"@types/jsdom": "16.2.13",
 		"@types/lodash": "^4.14.173",
 		"@types/node": "16.4.9",
+		"@types/sinon": "10.0.6",
 		"@typescript-eslint/eslint-plugin": "4.28.5",
 		"@typescript-eslint/parser": "4.28.5",
+		"@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
 		"babel-loader": "^8.2.2",
 		"better-docs": "^2.3.2",
+		"enzyme": "3.11.0",
 		"eslint": "7.32.0",
@@ -91,6 +95,9 @@ "eslint-config-prettier": "8.3.0",
 		"jest": "^27.3.1",
+		"joi": "17.4.2",
+		"jsdom": "18.0.0",
 		"lint-staged": "^11.1.1",
 		"prettier": "2.3.2",
-		"react": "^16.14.0",
-		"react-dom": "^16.14.0",
+		"react": "17.0.2",
+		"react-dom": "17.0.2",
+		"sinon": "11.1.2",
 		"ts-jest": "^27.0.7",
@@ -103,3 +110,5 @@ "tscpaths": "0.0.9",
 			"js",
+			"jsx",
 			"ts",
+			"tsx",
 			"json"
@@ -112,6 +121,9 @@ ],
 		},
-		"testRegex": ".*\\.spec\\.ts$",
+		"testRegex": ".*\\.spec\\.ts(x)?$",
 		"transform": {
-			"^.+\\.(t|j)s$": "ts-jest"
+			"^.+\\.(t|j)s(x)?$": "ts-jest"
 		},
+		"setupFilesAfterEnv": [
+			"<rootDir>/src/setupTests.js"
+		],
 		"testEnvironment": "node"
@@ -118,0 +130,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48369

increased by18.89%

Number of package files

76

increased by8.57%

Lines of code

1018

increased by20.05%

Worsened metrics

Dev dependency count

36

increased by28.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash@4.17.21

• + Addedlodash@4.17.21(transitive)

• - Removedlodash.debounce@4.0.8

• - Removedlodash.debounce@4.0.8(transitive)