@gravity-ui/dynamic-forms 3.3.0 → 3.4.1

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css

@@ -2,5 +2,5 @@
   width: 550px;
 }
 .df-monaco-input__container {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }

package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css

@@ -2,7 +2,7 @@
   padding: 10px 32px 32px;
 }
 .df-monaco-input-dialog__container {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .df-monaco-input-dialog__dialog-header .yc-dialog-header__caption {
   min-height: 24px;

package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.css

@@ -14,7 +14,7 @@
   margin-top: 4px;
   margin-bottom: 20px;
   margin-left: 5px;
-  border-left: 1px solid var(--yc-color-line-generic-accent);
+  border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-oneof_base > .df-group-indent > .df-use-search:empty {
   display: none;

package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css

@@ -6,7 +6,7 @@
 }
 .df-table-array__row .yc-table__cell {
   border-bottom: 0px transparent;
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .df-table-array__row_hidden {
   display: none;

package/build/esm/lib/kit/components/Inputs/TextArea/TextArea.js

@@ -2,5 +2,5 @@ import React from 'react';
 import { TextArea as TextAreaBase } from '@gravity-ui/uikit';
 export const TextArea = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
-    return (React.createElement(TextAreaBase, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name }));
+    return (React.createElement(TextAreaBase, { value: value || '', onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name }));
 };

package/build/esm/lib/kit/components/Layouts/Row/Row.css

@@ -31,7 +31,7 @@
 }
 .df-row__title_required::after {
   content: "*";
-  color: var(--yc-color-text-danger);
+  color: var(--g-color-text-danger);
 }
 .df-row__note {
   padding-right: 16px;
@@ -55,17 +55,18 @@
 }
 .df-row__right-inner {
   display: flex;
+  justify-content: space-around;
 }
 .df-row__description {
   margin-top: 10px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   word-break: break-word;
 }
 .df-row__remove-button {
   margin-left: 5px;
 }
 .df-row__required-mark {
-  color: var(--yc-color-text-danger);
+  color: var(--g-color-text-danger);
 }
 .df-row__error-wrapper {
   min-width: 100%;

package/build/esm/lib/kit/components/LongValue/LongValue.css

@@ -11,5 +11,5 @@
   cursor: pointer;
 }
 .df-long-value_long:hover {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -7,7 +7,7 @@
 .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
   padding-left: 20px;
   margin-left: 5px;
-  border-left: 1px solid var(--yc-color-line-generic-accent);
+  border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-simple-vertical-accordeon__header {
   display: flex;
@@ -22,15 +22,15 @@
 }
 .df-simple-vertical-accordeon__title_size_s {
   margin-bottom: 0;
-  font-size: var(--yc-text-body-1-font-size);
+  font-size: var(--g-text-body-1-font-size);
 }
 .df-simple-vertical-accordeon__title_size_m {
   margin-bottom: 1px;
-  font-size: var(--yc-text-body2-font-size);
+  font-size: var(--g-text-body2-font-size);
 }
 .df-simple-vertical-accordeon__title_size_l {
   margin-bottom: 2px;
-  font-size: var(--yc-text-body3-font-size);
+  font-size: var(--g-text-body3-font-size);
 }
 .df-simple-vertical-accordeon__tooltip {
   margin: 0px 5px;

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -18,13 +18,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;
   margin: 0 2px;
-  border-bottom: 1px dotted var(--yc-color-text-secondary);
+  border-bottom: 1px dotted var(--g-color-text-secondary);
 }
 .df-view-row__right {
   max-width: 480px;

package/build/esm/lib/kit/components/Views/CardOneOfView.js

@@ -19,5 +19,5 @@ export const CardOneOfView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (React.createElement(Card, { name: name, title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+    return (React.createElement(Card, { name: name, title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name ? name + '.' : ''}${valueKey}`, key: `${name ? name + '.' : ''}${valueKey}` })) : null));
 };

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css

@@ -1,4 +1,4 @@
 .df-monaco-base-view {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
   width: 550px;
 }

package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css

@@ -2,7 +2,7 @@
   padding: 10px 32px 32px;
 }
 .df-monaco-view-dialog__container {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .df-monaco-view-dialog__dialog-header {
   height: 48px;

package/build/esm/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.js

@@ -33,6 +33,6 @@ export const MultiOneOfView = (props) => {
     return (React.createElement(React.Fragment, null,
         selectView,
         React.createElement("div", { className: b('content', { flat: withoutIndent, 'multiple-values': items.length > 1 }) },
-            React.createElement(GroupIndent, null, values.map((value) => (React.createElement(React.Fragment, { key: value }, specProperties && specProperties[value] ? (React.createElement(ViewController, { name: `${name}.${value}`, spec: specProperties[value] })) : null)))))));
+            React.createElement(GroupIndent, null, values.map((value) => (React.createElement(React.Fragment, { key: value }, specProperties && specProperties[value] ? (React.createElement(ViewController, { name: `${name ? name + '.' : ''}${value}`, spec: specProperties[value] })) : null)))))));
 };
 export const MultiOneOfFlatView = (props) => (React.createElement(MultiOneOfView, Object.assign({}, props, { withoutIndent: true })));

package/build/esm/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.js

@@ -17,7 +17,7 @@ export const ObjectValueInputView = (_a) => {
     if (!childSpec) {
         return null;
     }
-    const content = (React.createElement(ViewController, { spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
+    const content = (React.createElement(ViewController, { spec: childSpec, name: `${name ? name + '.' : ''}${OBJECT_VALUE_PROPERTY_NAME}` }));
     if (Layout) {
         return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
     }

package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.js

@@ -28,7 +28,7 @@ const OneOfViewComponent = (props) => {
     return (React.createElement("div", { className: b({ flat: props.withoutIndent }) },
         wrappedValue,
         specProperties[valueKey] ? (React.createElement(GroupIndent, null,
-            React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` }))) : null));
+            React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name ? name + '.' : ''}${valueKey}`, key: `${name ? name + '.' : ''}${valueKey}` }))) : null));
 };
 export const OneOfView = OneOfViewComponent;
 export const OneOfFlatView = (props) => (React.createElement(OneOfViewComponent, Object.assign({}, props, { withoutIndent: true })));

package/build/esm/lib/kit/components/Views/TextLinkView/TextLinkView.js

@@ -19,7 +19,7 @@ export const TextLinkView = (_a) => {
     if (!childSpec || !(value === null || value === void 0 ? void 0 : value.text)) {
         return null;
     }
-    const content = React.createElement(ViewController, { spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` });
+    const content = (React.createElement(ViewController, { spec: childSpec, name: `${name ? name + '.' : ''}${TEXT_LINK_PROPERTY_NAME}` }));
     if (Layout) {
         return (React.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
     }

package/build/esm/lib/kit/validators/messages.d.ts

@@ -1,16 +1,2 @@
-export declare let ErrorMessages: {
-    REQUIRED: string;
-    INVALID: string;
-    INT: string;
-    NUMBER: string;
-    minLength(count: number | bigint): string;
-    minLengthArr(count: number | bigint): string;
-    maxLength(count: number | bigint): string;
-    maxLengthArr(count: number | bigint): string;
-    minNumber(count: number | bigint): string;
-    maxNumber(count: number | bigint): string;
-    SPACE_START: string;
-    SPACE_END: string;
-    DOT_END: string;
-    ZERO_START: string;
-};
+import type { ErrorMessagesType } from './types';
+export declare let ErrorMessages: ErrorMessagesType;

package/build/esm/lib/kit/validators/types.d.ts

@@ -0,0 +1,16 @@
+export interface ErrorMessagesType {
+    REQUIRED: string;
+    INVALID: string;
+    INT: string;
+    NUMBER: string;
+    minLength: (count: number | bigint) => string;
+    minLengthArr: (count: number | bigint) => string;
+    maxLength: (count: number | bigint) => string;
+    maxLengthArr: (count: number | bigint) => string;
+    minNumber: (count: number | bigint) => string;
+    maxNumber: (count: number | bigint) => string;
+    SPACE_START: string;
+    SPACE_END: string;
+    DOT_END: string;
+    ZERO_START: string;
+}

package/build/esm/lib/kit/validators/types.js

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

package/build/esm/lib/kit/validators/validators.d.ts

@@ -1,16 +1,18 @@
 import { ArraySpec, ArrayValue, BooleanSpec, NumberSpec, ObjectSpec, ObjectValue, StringSpec } from '../../core';
-export interface GetArrayValidatorParams {
+import { ErrorMessagesType } from './types';
+interface CommonValidatorParams {
     ignoreRequiredCheck?: boolean;
+    customErrorMessages?: Partial<ErrorMessagesType>;
+}
+export interface GetArrayValidatorParams extends CommonValidatorParams {
     ignoreMaxLengthCheck?: boolean;
     ignoreMinLengthCheck?: boolean;
 }
 export declare const getArrayValidator: (params?: GetArrayValidatorParams) => (spec: ArraySpec, value?: ArrayValue) => string | false;
-export interface GetBooleanValidatorParams {
-    ignoreRequiredCheck?: boolean;
+export interface GetBooleanValidatorParams extends CommonValidatorParams {
 }
 export declare const getBooleanValidator: (params?: GetBooleanValidatorParams) => (spec: BooleanSpec, value?: boolean) => string | false;
-export interface GetNumberValidatorParams {
-    ignoreRequiredCheck?: boolean;
+export interface GetNumberValidatorParams extends CommonValidatorParams {
     ignoreSpaceStartCheck?: boolean;
     ignoreSpaceEndCheck?: boolean;
     ignoreNumberCheck?: boolean;
@@ -21,12 +23,10 @@ export interface GetNumberValidatorParams {
     ignoreZeroStart?: boolean;
 }
 export declare const getNumberValidator: (params?: GetNumberValidatorParams) => (spec: NumberSpec, value?: string | number) => string | false;
-export interface GetObjectValidatorParams {
-    ignoreRequiredCheck?: boolean;
+export interface GetObjectValidatorParams extends CommonValidatorParams {
 }
 export declare const getObjectValidator: (params?: GetObjectValidatorParams) => (spec: ObjectSpec, value?: ObjectValue) => string | false;
-export interface GetStringValidatorParams {
-    ignoreRequiredCheck?: boolean;
+export interface GetStringValidatorParams extends CommonValidatorParams {
     ignoreSpaceStartCheck?: boolean;
     ignoreSpaceEndCheck?: boolean;
     ignoreMaxLengthCheck?: boolean;
@@ -34,3 +34,4 @@ export interface GetStringValidatorParams {
     ignoreRegExpCheck?: boolean;
 }
 export declare const getStringValidator: (params?: GetStringValidatorParams) => (spec: StringSpec, value?: string) => string | false;
+export {};

package/build/esm/lib/kit/validators/validators.js

@@ -2,122 +2,129 @@ import _ from 'lodash';
 import { ErrorMessages } from '../validators';
 import { isFloat, isInt } from './helpers';
 export const getArrayValidator = (params = {}) => {
-    const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck } = params;
+    const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, customErrorMessages } = params;
+    const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
     return (spec, value) => {
         const valueLength = (value === null || value === void 0 ? void 0 : value.length) || 0;
         if (!ignoreRequiredCheck && spec.required && !_.isArray(value)) {
-            return ErrorMessages.REQUIRED;
+            return errorMessages.REQUIRED;
         }
         if (!ignoreMaxLengthCheck &&
             typeof spec.maxLength === 'bigint' &&
             valueLength > spec.maxLength) {
-            return ErrorMessages.maxLengthArr(spec.maxLength);
+            return errorMessages.maxLengthArr(spec.maxLength);
         }
         if (!ignoreMinLengthCheck &&
             typeof spec.minLength === 'bigint' &&
             valueLength < spec.minLength) {
-            return ErrorMessages.minLengthArr(spec.minLength);
+            return errorMessages.minLengthArr(spec.minLength);
         }
         return false;
     };
 };
 export const getBooleanValidator = (params = {}) => {
-    const { ignoreRequiredCheck } = params;
+    const { ignoreRequiredCheck, customErrorMessages } = params;
+    const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
     return (spec, value) => {
         if (!ignoreRequiredCheck && spec.required && !value) {
-            return ErrorMessages.REQUIRED;
+            return errorMessages.REQUIRED;
         }
         return false;
     };
 };
 export const getNumberValidator = (params = {}) => {
-    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, } = params;
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, customErrorMessages, } = params;
+    const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
+    // eslint-disable-next-line complexity
     return (spec, value = '') => {
         const stringValue = String(value);
         if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
-            return ErrorMessages.REQUIRED;
+            return errorMessages.REQUIRED;
         }
         if (stringValue.length) {
             if (!ignoreSpaceStartCheck && !stringValue[0].trim()) {
-                return ErrorMessages.SPACE_START;
+                return errorMessages.SPACE_START;
             }
             if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
-                return ErrorMessages.SPACE_END;
+                return errorMessages.SPACE_END;
             }
             if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
-                return ErrorMessages.DOT_END;
+                return errorMessages.DOT_END;
             }
             if (!ignoreNumberCheck && !isFloat(stringValue)) {
-                return ErrorMessages.NUMBER;
+                return errorMessages.NUMBER;
             }
             if (!ignoreZeroStart &&
                 ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
                     (stringValue.length > 2 &&
                         stringValue.substring(0, 2) === '-0' &&
                         stringValue[2] !== '.'))) {
-                return ErrorMessages.ZERO_START;
+                return errorMessages.ZERO_START;
             }
         }
         if (!ignoreMaximumCheck &&
             _.isNumber(spec.maximum) &&
             stringValue.length &&
             Number(stringValue) > spec.maximum) {
-            return ErrorMessages.maxNumber(spec.maximum);
+            return errorMessages.maxNumber(spec.maximum);
         }
         if (!ignoreMinimumCheck &&
             _.isNumber(spec.minimum) &&
             stringValue.length &&
             spec.minimum > Number(stringValue)) {
-            return ErrorMessages.minNumber(spec.minimum);
+            return errorMessages.minNumber(spec.minimum);
         }
         if (_.isString(spec.format) && stringValue.length) {
             if (!ignoreIntCheck && spec.format === 'int64' && !isInt(stringValue)) {
-                return ErrorMessages.INT;
+                return errorMessages.INT;
             }
         }
         return false;
     };
 };
 export const getObjectValidator = (params = {}) => {
-    const { ignoreRequiredCheck } = params;
+    const { ignoreRequiredCheck, customErrorMessages } = params;
+    const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
     return (spec, value) => {
         if (!ignoreRequiredCheck && spec.required && !value) {
-            return ErrorMessages.REQUIRED;
+            return errorMessages.REQUIRED;
         }
         return false;
     };
 };
 export const getStringValidator = (params = {}) => {
-    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, ignoreRegExpCheck, } = params;
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, ignoreRegExpCheck, customErrorMessages, } = params;
+    const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
+    // eslint-disable-next-line complexity
     return (spec, value = '') => {
         const valueLength = value === null || value === void 0 ? void 0 : value.length;
         if (!ignoreRequiredCheck && spec.required && !valueLength) {
-            return ErrorMessages.REQUIRED;
+            return errorMessages.REQUIRED;
         }
         if (valueLength) {
             if (!ignoreSpaceStartCheck && !value[0].trim()) {
-                return ErrorMessages.SPACE_START;
+                return errorMessages.SPACE_START;
             }
             if (!ignoreSpaceEndCheck && !value[value.length - 1].trim()) {
-                return ErrorMessages.SPACE_END;
+                return errorMessages.SPACE_END;
             }
         }
         if (!ignoreMaxLengthCheck &&
             typeof spec.maxLength === 'bigint' &&
             valueLength > spec.maxLength) {
-            return ErrorMessages.maxLength(spec.maxLength);
+            return errorMessages.maxLength(spec.maxLength);
         }
         if (!ignoreMinLengthCheck &&
             typeof spec.minLength === 'bigint' &&
             valueLength < spec.minLength) {
-            return ErrorMessages.minLength(spec.minLength);
+            return errorMessages.minLength(spec.minLength);
         }
         if (_.isString(spec.pattern) && spec.pattern.length) {
             const regex = new RegExp(spec.pattern);
             if (!ignoreRegExpCheck && !regex.test(value)) {
                 return _.isString(spec.patternError) && spec.patternError.length
                     ? spec.patternError
-                    : ErrorMessages.INVALID;
+                    : errorMessages.INVALID;
             }
         }
         return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -34,7 +34,13 @@
     "build-storybook": "sb build",
     "dev": "sb dev -p 6006",
     "start": "sb dev",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "playwright:install": "playwright install --with-deps",
+    "playwright": "playwright test --config=playwright/playwright.config.ts",
+    "playwright:update": "npm run playwright -- -u",
+    "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
+    "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
+    "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
@@ -53,6 +59,8 @@
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^5.19.1",
+    "@playwright/experimental-ct-react": "^1.40.0",
+    "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.27",
@@ -66,6 +74,7 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-is": "^17.0.3",
     "@types/uuid": "^9.0.4",
+    "@vitejs/plugin-react": "^4.2.0",
     "css-loader": "^5.2.6",
     "eslint": "^8.27.0",
     "final-form": "^4.20.2",