@gravity-ui/dynamic-forms 3.3.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/build/cjs/lib/core/components/Form/Controller/utils.js +1 -1
  2. package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.css +6 -6
  3. package/build/cjs/lib/kit/components/Card/Card.css +3 -3
  4. package/build/cjs/lib/kit/components/ErrorWrapper/ErrorWrapper.css +4 -4
  5. package/build/cjs/lib/kit/components/GroupIndent/GroupIndent.css +1 -1
  6. package/build/cjs/lib/kit/components/Inputs/FileInput/FileInput.css +1 -1
  7. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +1 -1
  8. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +1 -1
  9. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css +1 -1
  10. package/build/cjs/lib/kit/components/Inputs/OneOf/OneOf.css +1 -1
  11. package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css +1 -1
  12. package/build/cjs/lib/kit/components/Layouts/Row/Row.css +3 -3
  13. package/build/cjs/lib/kit/components/LongValue/LongValue.css +1 -1
  14. package/build/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css +4 -4
  15. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css +2 -2
  16. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +1 -1
  17. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css +1 -1
  18. package/build/cjs/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.js +1 -1
  19. package/build/cjs/lib/kit/validators/types.js +2 -0
  20. package/build/cjs/lib/kit/validators/validators.js +32 -25
  21. package/build/esm/lib/core/components/Form/Controller/utils.js +1 -1
  22. package/build/esm/lib/kit/components/AccordeonCard/AccordeonCard.css +6 -6
  23. package/build/esm/lib/kit/components/Card/Card.css +3 -3
  24. package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.css +4 -4
  25. package/build/esm/lib/kit/components/GroupIndent/GroupIndent.css +1 -1
  26. package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.css +1 -1
  27. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +1 -1
  28. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +1 -1
  29. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css +1 -1
  30. package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.css +1 -1
  31. package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css +1 -1
  32. package/build/esm/lib/kit/components/Layouts/Row/Row.css +3 -3
  33. package/build/esm/lib/kit/components/LongValue/LongValue.css +1 -1
  34. package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css +4 -4
  35. package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css +2 -2
  36. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +1 -1
  37. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css +1 -1
  38. package/build/esm/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.js +1 -1
  39. package/build/esm/lib/kit/validators/messages.d.ts +2 -16
  40. package/build/esm/lib/kit/validators/types.d.ts +16 -0
  41. package/build/esm/lib/kit/validators/types.js +1 -0
  42. package/build/esm/lib/kit/validators/validators.d.ts +10 -9
  43. package/build/esm/lib/kit/validators/validators.js +32 -25
  44. package/package.json +10 -2
@@ -245,7 +245,7 @@ const updateStore = ({ store, setStore, spec: _spec, name, parentOnChange, paren
245
245
  const storeSpecMutator = lodash_1.default.get(store.mutators.spec, store.name, constants_2.EMPTY_MUTATOR);
246
246
  const storeValueMutator = lodash_1.default.get(store.mutators.values, store.name, constants_2.EMPTY_MUTATOR);
247
247
  const storeErrorMutator = lodash_1.default.get(store.mutators.errors, store.name, constants_2.EMPTY_MUTATOR);
248
- const specMutator = lodash_1.default.get(mutators.errors, name, constants_2.EMPTY_MUTATOR);
248
+ const specMutator = lodash_1.default.get(mutators.spec, name, constants_2.EMPTY_MUTATOR);
249
249
  const valueMutator = lodash_1.default.get(mutators.values, name, constants_2.EMPTY_MUTATOR);
250
250
  const errorMutator = lodash_1.default.get(mutators.errors, name, constants_2.EMPTY_MUTATOR);
251
251
  const valueMutatorUpdated = isValueMutatorCorrect(valueMutator, (0, exports.getSpec)({ name, spec: _spec, mutators })) &&
@@ -4,13 +4,13 @@
4
4
  justify-content: space-between;
5
5
  box-sizing: border-box;
6
6
  max-width: 750px;
7
- box-shadow: 0 1px 5px var(--yc-color-sfx-shadow);
7
+ box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
8
8
  border-radius: 5px;
9
- color: var(--yc-color-text-primary);
10
- background-color: var(--yc-color-base-float);
9
+ color: var(--g-color-text-primary);
10
+ background-color: var(--g-color-base-float);
11
11
  }
12
12
  .df-accordeon-card:hover {
13
- box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
13
+ box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
14
14
  }
15
15
  .df-accordeon-card:last-child {
16
16
  margin-bottom: 0;
@@ -33,7 +33,7 @@
33
33
  cursor: pointer;
34
34
  }
35
35
  .df-accordeon-card__header_open {
36
- border-bottom: 1px solid var(--yc-color-line-generic);
36
+ border-bottom: 1px solid var(--g-color-line-generic);
37
37
  }
38
38
  .df-accordeon-card__header_without-action:hover {
39
39
  cursor: default;
@@ -58,7 +58,7 @@
58
58
  }
59
59
  .df-accordeon-card__header-content-description {
60
60
  margin-top: 12px;
61
- color: var(--yc-color-text-complementary);
61
+ color: var(--g-color-text-complementary);
62
62
  }
63
63
  .df-accordeon-card__header-toggle-btn {
64
64
  flex-grow: 0;
@@ -48,9 +48,9 @@
48
48
  margin-left: 10px;
49
49
  }
50
50
  .df-card__title {
51
- font-size: var(--yc-text-subheader-2-font-size);
52
- font-weight: var(--yc-text-subheader-font-weight);
53
- line-height: var(--yc-text-subheader-2-line-height);
51
+ font-size: var(--g-text-subheader-2-font-size);
52
+ font-weight: var(--g-text-subheader-font-weight);
53
+ line-height: var(--g-text-subheader-2-line-height);
54
54
  white-space: nowrap;
55
55
  overflow: hidden;
56
56
  text-overflow: ellipsis;
@@ -17,11 +17,11 @@
17
17
  .df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__control,
18
18
  .df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__content,
19
19
  .df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
20
- border-color: var(--yc-color-text-danger);
20
+ border-color: var(--g-color-text-danger);
21
21
  }
22
22
  .df-error-wrapper__error-text {
23
- color: var(--yc-color-text-danger);
23
+ color: var(--g-color-text-danger);
24
24
  margin-top: 2px;
25
- font-size: var(--yc-text-body-1-font-size);
26
- line-height: var(--yc-text-body-1-line-height);
25
+ font-size: var(--g-text-body-1-font-size);
26
+ line-height: var(--g-text-body-1-line-height);
27
27
  }
@@ -4,7 +4,7 @@
4
4
  margin-top: -11px;
5
5
  margin-bottom: 20px;
6
6
  margin-left: 5px;
7
- border-left: 1px solid var(--yc-color-line-generic-accent);
7
+ border-left: 1px solid var(--g-color-line-generic-accent);
8
8
  }
9
9
  .df-group-indent:last-child {
10
10
  margin-bottom: 0;
@@ -11,5 +11,5 @@
11
11
  text-overflow: ellipsis;
12
12
  overflow: hidden;
13
13
  white-space: nowrap;
14
- color: var(--yc-color-text-secondary);
14
+ color: var(--g-color-text-secondary);
15
15
  }
@@ -4,7 +4,7 @@
4
4
  justify-content: space-between;
5
5
  padding: 15px;
6
6
  align-items: center;
7
- background-color: var(--yc-color-base-float-hover);
7
+ background-color: var(--g-color-base-float-hover);
8
8
  }
9
9
  .df-monaco-header__language {
10
10
  margin-top: 2px;
@@ -2,5 +2,5 @@
2
2
  width: 550px;
3
3
  }
4
4
  .df-monaco-input__container {
5
- border: 1px solid var(--yc-color-line-generic);
5
+ border: 1px solid var(--g-color-line-generic);
6
6
  }
@@ -2,7 +2,7 @@
2
2
  padding: 10px 32px 32px;
3
3
  }
4
4
  .df-monaco-input-dialog__container {
5
- border: 1px solid var(--yc-color-line-generic);
5
+ border: 1px solid var(--g-color-line-generic);
6
6
  }
7
7
  .df-monaco-input-dialog__dialog-header .yc-dialog-header__caption {
8
8
  min-height: 24px;
@@ -14,7 +14,7 @@
14
14
  margin-top: 4px;
15
15
  margin-bottom: 20px;
16
16
  margin-left: 5px;
17
- border-left: 1px solid var(--yc-color-line-generic-accent);
17
+ border-left: 1px solid var(--g-color-line-generic-accent);
18
18
  }
19
19
  .df-oneof_base > .df-group-indent > .df-use-search:empty {
20
20
  display: none;
@@ -6,7 +6,7 @@
6
6
  }
7
7
  .df-table-array__row .yc-table__cell {
8
8
  border-bottom: 0px transparent;
9
- border-top: 1px solid var(--yc-color-line-generic);
9
+ border-top: 1px solid var(--g-color-line-generic);
10
10
  }
11
11
  .df-table-array__row_hidden {
12
12
  display: none;
@@ -31,7 +31,7 @@
31
31
  }
32
32
  .df-row__title_required::after {
33
33
  content: "*";
34
- color: var(--yc-color-text-danger);
34
+ color: var(--g-color-text-danger);
35
35
  }
36
36
  .df-row__note {
37
37
  padding-right: 16px;
@@ -58,14 +58,14 @@
58
58
  }
59
59
  .df-row__description {
60
60
  margin-top: 10px;
61
- color: var(--yc-color-text-secondary);
61
+ color: var(--g-color-text-secondary);
62
62
  word-break: break-word;
63
63
  }
64
64
  .df-row__remove-button {
65
65
  margin-left: 5px;
66
66
  }
67
67
  .df-row__required-mark {
68
- color: var(--yc-color-text-danger);
68
+ color: var(--g-color-text-danger);
69
69
  }
70
70
  .df-row__error-wrapper {
71
71
  min-width: 100%;
@@ -11,5 +11,5 @@
11
11
  cursor: pointer;
12
12
  }
13
13
  .df-long-value_long:hover {
14
- color: var(--yc-color-text-secondary);
14
+ color: var(--g-color-text-secondary);
15
15
  }
@@ -7,7 +7,7 @@
7
7
  .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
8
8
  padding-left: 20px;
9
9
  margin-left: 5px;
10
- border-left: 1px solid var(--yc-color-line-generic-accent);
10
+ border-left: 1px solid var(--g-color-line-generic-accent);
11
11
  }
12
12
  .df-simple-vertical-accordeon__header {
13
13
  display: flex;
@@ -22,15 +22,15 @@
22
22
  }
23
23
  .df-simple-vertical-accordeon__title_size_s {
24
24
  margin-bottom: 0;
25
- font-size: var(--yc-text-body-1-font-size);
25
+ font-size: var(--g-text-body-1-font-size);
26
26
  }
27
27
  .df-simple-vertical-accordeon__title_size_m {
28
28
  margin-bottom: 1px;
29
- font-size: var(--yc-text-body2-font-size);
29
+ font-size: var(--g-text-body2-font-size);
30
30
  }
31
31
  .df-simple-vertical-accordeon__title_size_l {
32
32
  margin-bottom: 2px;
33
- font-size: var(--yc-text-body3-font-size);
33
+ font-size: var(--g-text-body3-font-size);
34
34
  }
35
35
  .df-simple-vertical-accordeon__tooltip {
36
36
  margin: 0px 5px;
@@ -18,13 +18,13 @@
18
18
  white-space: nowrap;
19
19
  overflow: hidden;
20
20
  text-overflow: ellipsis;
21
- color: var(--yc-color-text-secondary);
21
+ color: var(--g-color-text-secondary);
22
22
  }
23
23
  .df-view-row__dots {
24
24
  min-width: 40px;
25
25
  flex-grow: 1;
26
26
  margin: 0 2px;
27
- border-bottom: 1px dotted var(--yc-color-text-secondary);
27
+ border-bottom: 1px dotted var(--g-color-text-secondary);
28
28
  }
29
29
  .df-view-row__right {
30
30
  max-width: 480px;
@@ -1,4 +1,4 @@
1
1
  .df-monaco-base-view {
2
- border: 1px solid var(--yc-color-line-generic);
2
+ border: 1px solid var(--g-color-line-generic);
3
3
  width: 550px;
4
4
  }
@@ -2,7 +2,7 @@
2
2
  padding: 10px 32px 32px;
3
3
  }
4
4
  .df-monaco-view-dialog__container {
5
- border: 1px solid var(--yc-color-line-generic);
5
+ border: 1px solid var(--g-color-line-generic);
6
6
  }
7
7
  .df-monaco-view-dialog__dialog-header {
8
8
  height: 48px;
@@ -20,7 +20,7 @@ const ObjectValueInputView = (_a) => {
20
20
  if (!childSpec) {
21
21
  return null;
22
22
  }
23
- const content = (react_1.default.createElement(core_1.ViewController, { spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
23
+ const content = (react_1.default.createElement(core_1.ViewController, { spec: childSpec, name: `${name ? name + '.' : ''}${OBJECT_VALUE_PROPERTY_NAME}` }));
24
24
  if (Layout) {
25
25
  return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
26
26
  }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -6,79 +6,83 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
6
6
  const validators_1 = require("../validators");
7
7
  const helpers_1 = require("./helpers");
8
8
  const getArrayValidator = (params = {}) => {
9
- const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck } = params;
9
+ const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, customErrorMessages } = params;
10
+ const errorMessages = Object.assign(Object.assign({}, validators_1.ErrorMessages), customErrorMessages);
10
11
  return (spec, value) => {
11
12
  const valueLength = (value === null || value === void 0 ? void 0 : value.length) || 0;
12
13
  if (!ignoreRequiredCheck && spec.required && !lodash_1.default.isArray(value)) {
13
- return validators_1.ErrorMessages.REQUIRED;
14
+ return errorMessages.REQUIRED;
14
15
  }
15
16
  if (!ignoreMaxLengthCheck &&
16
17
  typeof spec.maxLength === 'bigint' &&
17
18
  valueLength > spec.maxLength) {
18
- return validators_1.ErrorMessages.maxLengthArr(spec.maxLength);
19
+ return errorMessages.maxLengthArr(spec.maxLength);
19
20
  }
20
21
  if (!ignoreMinLengthCheck &&
21
22
  typeof spec.minLength === 'bigint' &&
22
23
  valueLength < spec.minLength) {
23
- return validators_1.ErrorMessages.minLengthArr(spec.minLength);
24
+ return errorMessages.minLengthArr(spec.minLength);
24
25
  }
25
26
  return false;
26
27
  };
27
28
  };
28
29
  exports.getArrayValidator = getArrayValidator;
29
30
  const getBooleanValidator = (params = {}) => {
30
- const { ignoreRequiredCheck } = params;
31
+ const { ignoreRequiredCheck, customErrorMessages } = params;
32
+ const errorMessages = Object.assign(Object.assign({}, validators_1.ErrorMessages), customErrorMessages);
31
33
  return (spec, value) => {
32
34
  if (!ignoreRequiredCheck && spec.required && !value) {
33
- return validators_1.ErrorMessages.REQUIRED;
35
+ return errorMessages.REQUIRED;
34
36
  }
35
37
  return false;
36
38
  };
37
39
  };
38
40
  exports.getBooleanValidator = getBooleanValidator;
39
41
  const getNumberValidator = (params = {}) => {
40
- const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, } = params;
42
+ const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, customErrorMessages, } = params;
43
+ const errorMessages = Object.assign(Object.assign({}, validators_1.ErrorMessages), customErrorMessages);
44
+ // eslint-disable-next-line complexity
41
45
  return (spec, value = '') => {
42
46
  const stringValue = String(value);
43
47
  if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
44
- return validators_1.ErrorMessages.REQUIRED;
48
+ return errorMessages.REQUIRED;
45
49
  }
46
50
  if (stringValue.length) {
47
51
  if (!ignoreSpaceStartCheck && !stringValue[0].trim()) {
48
- return validators_1.ErrorMessages.SPACE_START;
52
+ return errorMessages.SPACE_START;
49
53
  }
50
54
  if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
51
- return validators_1.ErrorMessages.SPACE_END;
55
+ return errorMessages.SPACE_END;
52
56
  }
53
57
  if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
54
- return validators_1.ErrorMessages.DOT_END;
58
+ return errorMessages.DOT_END;
55
59
  }
56
60
  if (!ignoreNumberCheck && !(0, helpers_1.isFloat)(stringValue)) {
57
- return validators_1.ErrorMessages.NUMBER;
61
+ return errorMessages.NUMBER;
58
62
  }
59
63
  if (!ignoreZeroStart &&
60
64
  ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
61
65
  (stringValue.length > 2 &&
62
66
  stringValue.substring(0, 2) === '-0' &&
63
67
  stringValue[2] !== '.'))) {
64
- return validators_1.ErrorMessages.ZERO_START;
68
+ return errorMessages.ZERO_START;
65
69
  }
66
70
  }
67
71
  if (!ignoreMaximumCheck &&
68
72
  lodash_1.default.isNumber(spec.maximum) &&
69
73
  stringValue.length &&
70
74
  Number(stringValue) > spec.maximum) {
71
- return validators_1.ErrorMessages.maxNumber(spec.maximum);
75
+ return errorMessages.maxNumber(spec.maximum);
72
76
  }
73
77
  if (!ignoreMinimumCheck &&
74
78
  lodash_1.default.isNumber(spec.minimum) &&
75
79
  stringValue.length &&
76
80
  spec.minimum > Number(stringValue)) {
77
- return validators_1.ErrorMessages.minNumber(spec.minimum);
81
+ return errorMessages.minNumber(spec.minimum);
78
82
  }
79
83
  if (lodash_1.default.isString(spec.format) && stringValue.length) {
80
84
  if (!ignoreIntCheck && spec.format === 'int64' && !(0, helpers_1.isInt)(stringValue)) {
81
- return validators_1.ErrorMessages.INT;
85
+ return errorMessages.INT;
82
86
  }
83
87
  }
84
88
  return false;
@@ -86,46 +90,49 @@ const getNumberValidator = (params = {}) => {
86
90
  };
87
91
  exports.getNumberValidator = getNumberValidator;
88
92
  const getObjectValidator = (params = {}) => {
89
- const { ignoreRequiredCheck } = params;
93
+ const { ignoreRequiredCheck, customErrorMessages } = params;
94
+ const errorMessages = Object.assign(Object.assign({}, validators_1.ErrorMessages), customErrorMessages);
90
95
  return (spec, value) => {
91
96
  if (!ignoreRequiredCheck && spec.required && !value) {
92
- return validators_1.ErrorMessages.REQUIRED;
97
+ return errorMessages.REQUIRED;
93
98
  }
94
99
  return false;
95
100
  };
96
101
  };
97
102
  exports.getObjectValidator = getObjectValidator;
98
103
  const getStringValidator = (params = {}) => {
99
- const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, ignoreRegExpCheck, } = params;
104
+ const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, ignoreRegExpCheck, customErrorMessages, } = params;
105
+ const errorMessages = Object.assign(Object.assign({}, validators_1.ErrorMessages), customErrorMessages);
106
+ // eslint-disable-next-line complexity
100
107
  return (spec, value = '') => {
101
108
  const valueLength = value === null || value === void 0 ? void 0 : value.length;
102
109
  if (!ignoreRequiredCheck && spec.required && !valueLength) {
103
- return validators_1.ErrorMessages.REQUIRED;
110
+ return errorMessages.REQUIRED;
104
111
  }
105
112
  if (valueLength) {
106
113
  if (!ignoreSpaceStartCheck && !value[0].trim()) {
107
- return validators_1.ErrorMessages.SPACE_START;
114
+ return errorMessages.SPACE_START;
108
115
  }
109
116
  if (!ignoreSpaceEndCheck && !value[value.length - 1].trim()) {
110
- return validators_1.ErrorMessages.SPACE_END;
117
+ return errorMessages.SPACE_END;
111
118
  }
112
119
  }
113
120
  if (!ignoreMaxLengthCheck &&
114
121
  typeof spec.maxLength === 'bigint' &&
115
122
  valueLength > spec.maxLength) {
116
- return validators_1.ErrorMessages.maxLength(spec.maxLength);
123
+ return errorMessages.maxLength(spec.maxLength);
117
124
  }
118
125
  if (!ignoreMinLengthCheck &&
119
126
  typeof spec.minLength === 'bigint' &&
120
127
  valueLength < spec.minLength) {
121
- return validators_1.ErrorMessages.minLength(spec.minLength);
128
+ return errorMessages.minLength(spec.minLength);
122
129
  }
123
130
  if (lodash_1.default.isString(spec.pattern) && spec.pattern.length) {
124
131
  const regex = new RegExp(spec.pattern);
125
132
  if (!ignoreRegExpCheck && !regex.test(value)) {
126
133
  return lodash_1.default.isString(spec.patternError) && spec.patternError.length
127
134
  ? spec.patternError
128
- : validators_1.ErrorMessages.INVALID;
135
+ : errorMessages.INVALID;
129
136
  }
130
137
  }
131
138
  return false;
@@ -232,7 +232,7 @@ export const updateStore = ({ store, setStore, spec: _spec, name, parentOnChange
232
232
  const storeSpecMutator = _.get(store.mutators.spec, store.name, EMPTY_MUTATOR);
233
233
  const storeValueMutator = _.get(store.mutators.values, store.name, EMPTY_MUTATOR);
234
234
  const storeErrorMutator = _.get(store.mutators.errors, store.name, EMPTY_MUTATOR);
235
- const specMutator = _.get(mutators.errors, name, EMPTY_MUTATOR);
235
+ const specMutator = _.get(mutators.spec, name, EMPTY_MUTATOR);
236
236
  const valueMutator = _.get(mutators.values, name, EMPTY_MUTATOR);
237
237
  const errorMutator = _.get(mutators.errors, name, EMPTY_MUTATOR);
238
238
  const valueMutatorUpdated = isValueMutatorCorrect(valueMutator, getSpec({ name, spec: _spec, mutators })) &&
@@ -4,13 +4,13 @@
4
4
  justify-content: space-between;
5
5
  box-sizing: border-box;
6
6
  max-width: 750px;
7
- box-shadow: 0 1px 5px var(--yc-color-sfx-shadow);
7
+ box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
8
8
  border-radius: 5px;
9
- color: var(--yc-color-text-primary);
10
- background-color: var(--yc-color-base-float);
9
+ color: var(--g-color-text-primary);
10
+ background-color: var(--g-color-base-float);
11
11
  }
12
12
  .df-accordeon-card:hover {
13
- box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
13
+ box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
14
14
  }
15
15
  .df-accordeon-card:last-child {
16
16
  margin-bottom: 0;
@@ -33,7 +33,7 @@
33
33
  cursor: pointer;
34
34
  }
35
35
  .df-accordeon-card__header_open {
36
- border-bottom: 1px solid var(--yc-color-line-generic);
36
+ border-bottom: 1px solid var(--g-color-line-generic);
37
37
  }
38
38
  .df-accordeon-card__header_without-action:hover {
39
39
  cursor: default;
@@ -58,7 +58,7 @@
58
58
  }
59
59
  .df-accordeon-card__header-content-description {
60
60
  margin-top: 12px;
61
- color: var(--yc-color-text-complementary);
61
+ color: var(--g-color-text-complementary);
62
62
  }
63
63
  .df-accordeon-card__header-toggle-btn {
64
64
  flex-grow: 0;
@@ -48,9 +48,9 @@
48
48
  margin-left: 10px;
49
49
  }
50
50
  .df-card__title {
51
- font-size: var(--yc-text-subheader-2-font-size);
52
- font-weight: var(--yc-text-subheader-font-weight);
53
- line-height: var(--yc-text-subheader-2-line-height);
51
+ font-size: var(--g-text-subheader-2-font-size);
52
+ font-weight: var(--g-text-subheader-font-weight);
53
+ line-height: var(--g-text-subheader-2-line-height);
54
54
  white-space: nowrap;
55
55
  overflow: hidden;
56
56
  text-overflow: ellipsis;
@@ -17,11 +17,11 @@
17
17
  .df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__control,
18
18
  .df-error-wrapper_error .yc-text-input_view_normal:not(.df-error-wrapper-ignore) .yc-text-input__content,
19
19
  .df-error-wrapper_error .yc-checkbox__indicator:not(.df-error-wrapper-ignore)::before {
20
- border-color: var(--yc-color-text-danger);
20
+ border-color: var(--g-color-text-danger);
21
21
  }
22
22
  .df-error-wrapper__error-text {
23
- color: var(--yc-color-text-danger);
23
+ color: var(--g-color-text-danger);
24
24
  margin-top: 2px;
25
- font-size: var(--yc-text-body-1-font-size);
26
- line-height: var(--yc-text-body-1-line-height);
25
+ font-size: var(--g-text-body-1-font-size);
26
+ line-height: var(--g-text-body-1-line-height);
27
27
  }
@@ -4,7 +4,7 @@
4
4
  margin-top: -11px;
5
5
  margin-bottom: 20px;
6
6
  margin-left: 5px;
7
- border-left: 1px solid var(--yc-color-line-generic-accent);
7
+ border-left: 1px solid var(--g-color-line-generic-accent);
8
8
  }
9
9
  .df-group-indent:last-child {
10
10
  margin-bottom: 0;
@@ -11,5 +11,5 @@
11
11
  text-overflow: ellipsis;
12
12
  overflow: hidden;
13
13
  white-space: nowrap;
14
- color: var(--yc-color-text-secondary);
14
+ color: var(--g-color-text-secondary);
15
15
  }
@@ -4,7 +4,7 @@
4
4
  justify-content: space-between;
5
5
  padding: 15px;
6
6
  align-items: center;
7
- background-color: var(--yc-color-base-float-hover);
7
+ background-color: var(--g-color-base-float-hover);
8
8
  }
9
9
  .df-monaco-header__language {
10
10
  margin-top: 2px;
@@ -2,5 +2,5 @@
2
2
  width: 550px;
3
3
  }
4
4
  .df-monaco-input__container {
5
- border: 1px solid var(--yc-color-line-generic);
5
+ border: 1px solid var(--g-color-line-generic);
6
6
  }
@@ -2,7 +2,7 @@
2
2
  padding: 10px 32px 32px;
3
3
  }
4
4
  .df-monaco-input-dialog__container {
5
- border: 1px solid var(--yc-color-line-generic);
5
+ border: 1px solid var(--g-color-line-generic);
6
6
  }
7
7
  .df-monaco-input-dialog__dialog-header .yc-dialog-header__caption {
8
8
  min-height: 24px;
@@ -14,7 +14,7 @@
14
14
  margin-top: 4px;
15
15
  margin-bottom: 20px;
16
16
  margin-left: 5px;
17
- border-left: 1px solid var(--yc-color-line-generic-accent);
17
+ border-left: 1px solid var(--g-color-line-generic-accent);
18
18
  }
19
19
  .df-oneof_base > .df-group-indent > .df-use-search:empty {
20
20
  display: none;
@@ -6,7 +6,7 @@
6
6
  }
7
7
  .df-table-array__row .yc-table__cell {
8
8
  border-bottom: 0px transparent;
9
- border-top: 1px solid var(--yc-color-line-generic);
9
+ border-top: 1px solid var(--g-color-line-generic);
10
10
  }
11
11
  .df-table-array__row_hidden {
12
12
  display: none;
@@ -31,7 +31,7 @@
31
31
  }
32
32
  .df-row__title_required::after {
33
33
  content: "*";
34
- color: var(--yc-color-text-danger);
34
+ color: var(--g-color-text-danger);
35
35
  }
36
36
  .df-row__note {
37
37
  padding-right: 16px;
@@ -58,14 +58,14 @@
58
58
  }
59
59
  .df-row__description {
60
60
  margin-top: 10px;
61
- color: var(--yc-color-text-secondary);
61
+ color: var(--g-color-text-secondary);
62
62
  word-break: break-word;
63
63
  }
64
64
  .df-row__remove-button {
65
65
  margin-left: 5px;
66
66
  }
67
67
  .df-row__required-mark {
68
- color: var(--yc-color-text-danger);
68
+ color: var(--g-color-text-danger);
69
69
  }
70
70
  .df-row__error-wrapper {
71
71
  min-width: 100%;
@@ -11,5 +11,5 @@
11
11
  cursor: pointer;
12
12
  }
13
13
  .df-long-value_long:hover {
14
- color: var(--yc-color-text-secondary);
14
+ color: var(--g-color-text-secondary);
15
15
  }
@@ -7,7 +7,7 @@
7
7
  .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
8
8
  padding-left: 20px;
9
9
  margin-left: 5px;
10
- border-left: 1px solid var(--yc-color-line-generic-accent);
10
+ border-left: 1px solid var(--g-color-line-generic-accent);
11
11
  }
12
12
  .df-simple-vertical-accordeon__header {
13
13
  display: flex;
@@ -22,15 +22,15 @@
22
22
  }
23
23
  .df-simple-vertical-accordeon__title_size_s {
24
24
  margin-bottom: 0;
25
- font-size: var(--yc-text-body-1-font-size);
25
+ font-size: var(--g-text-body-1-font-size);
26
26
  }
27
27
  .df-simple-vertical-accordeon__title_size_m {
28
28
  margin-bottom: 1px;
29
- font-size: var(--yc-text-body2-font-size);
29
+ font-size: var(--g-text-body2-font-size);
30
30
  }
31
31
  .df-simple-vertical-accordeon__title_size_l {
32
32
  margin-bottom: 2px;
33
- font-size: var(--yc-text-body3-font-size);
33
+ font-size: var(--g-text-body3-font-size);
34
34
  }
35
35
  .df-simple-vertical-accordeon__tooltip {
36
36
  margin: 0px 5px;
@@ -18,13 +18,13 @@
18
18
  white-space: nowrap;
19
19
  overflow: hidden;
20
20
  text-overflow: ellipsis;
21
- color: var(--yc-color-text-secondary);
21
+ color: var(--g-color-text-secondary);
22
22
  }
23
23
  .df-view-row__dots {
24
24
  min-width: 40px;
25
25
  flex-grow: 1;
26
26
  margin: 0 2px;
27
- border-bottom: 1px dotted var(--yc-color-text-secondary);
27
+ border-bottom: 1px dotted var(--g-color-text-secondary);
28
28
  }
29
29
  .df-view-row__right {
30
30
  max-width: 480px;
@@ -1,4 +1,4 @@
1
1
  .df-monaco-base-view {
2
- border: 1px solid var(--yc-color-line-generic);
2
+ border: 1px solid var(--g-color-line-generic);
3
3
  width: 550px;
4
4
  }
@@ -2,7 +2,7 @@
2
2
  padding: 10px 32px 32px;
3
3
  }
4
4
  .df-monaco-view-dialog__container {
5
- border: 1px solid var(--yc-color-line-generic);
5
+ border: 1px solid var(--g-color-line-generic);
6
6
  }
7
7
  .df-monaco-view-dialog__dialog-header {
8
8
  height: 48px;
@@ -17,7 +17,7 @@ export const ObjectValueInputView = (_a) => {
17
17
  if (!childSpec) {
18
18
  return null;
19
19
  }
20
- const content = (React.createElement(ViewController, { spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
20
+ const content = (React.createElement(ViewController, { spec: childSpec, name: `${name ? name + '.' : ''}${OBJECT_VALUE_PROPERTY_NAME}` }));
21
21
  if (Layout) {
22
22
  return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
23
23
  }
@@ -1,16 +1,2 @@
1
- export declare let ErrorMessages: {
2
- REQUIRED: string;
3
- INVALID: string;
4
- INT: string;
5
- NUMBER: string;
6
- minLength(count: number | bigint): string;
7
- minLengthArr(count: number | bigint): string;
8
- maxLength(count: number | bigint): string;
9
- maxLengthArr(count: number | bigint): string;
10
- minNumber(count: number | bigint): string;
11
- maxNumber(count: number | bigint): string;
12
- SPACE_START: string;
13
- SPACE_END: string;
14
- DOT_END: string;
15
- ZERO_START: string;
16
- };
1
+ import type { ErrorMessagesType } from './types';
2
+ export declare let ErrorMessages: ErrorMessagesType;
@@ -0,0 +1,16 @@
1
+ export interface ErrorMessagesType {
2
+ REQUIRED: string;
3
+ INVALID: string;
4
+ INT: string;
5
+ NUMBER: string;
6
+ minLength: (count: number | bigint) => string;
7
+ minLengthArr: (count: number | bigint) => string;
8
+ maxLength: (count: number | bigint) => string;
9
+ maxLengthArr: (count: number | bigint) => string;
10
+ minNumber: (count: number | bigint) => string;
11
+ maxNumber: (count: number | bigint) => string;
12
+ SPACE_START: string;
13
+ SPACE_END: string;
14
+ DOT_END: string;
15
+ ZERO_START: string;
16
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -1,16 +1,18 @@
1
1
  import { ArraySpec, ArrayValue, BooleanSpec, NumberSpec, ObjectSpec, ObjectValue, StringSpec } from '../../core';
2
- export interface GetArrayValidatorParams {
2
+ import { ErrorMessagesType } from './types';
3
+ interface CommonValidatorParams {
3
4
  ignoreRequiredCheck?: boolean;
5
+ customErrorMessages?: Partial<ErrorMessagesType>;
6
+ }
7
+ export interface GetArrayValidatorParams extends CommonValidatorParams {
4
8
  ignoreMaxLengthCheck?: boolean;
5
9
  ignoreMinLengthCheck?: boolean;
6
10
  }
7
11
  export declare const getArrayValidator: (params?: GetArrayValidatorParams) => (spec: ArraySpec, value?: ArrayValue) => string | false;
8
- export interface GetBooleanValidatorParams {
9
- ignoreRequiredCheck?: boolean;
12
+ export interface GetBooleanValidatorParams extends CommonValidatorParams {
10
13
  }
11
14
  export declare const getBooleanValidator: (params?: GetBooleanValidatorParams) => (spec: BooleanSpec, value?: boolean) => string | false;
12
- export interface GetNumberValidatorParams {
13
- ignoreRequiredCheck?: boolean;
15
+ export interface GetNumberValidatorParams extends CommonValidatorParams {
14
16
  ignoreSpaceStartCheck?: boolean;
15
17
  ignoreSpaceEndCheck?: boolean;
16
18
  ignoreNumberCheck?: boolean;
@@ -21,12 +23,10 @@ export interface GetNumberValidatorParams {
21
23
  ignoreZeroStart?: boolean;
22
24
  }
23
25
  export declare const getNumberValidator: (params?: GetNumberValidatorParams) => (spec: NumberSpec, value?: string | number) => string | false;
24
- export interface GetObjectValidatorParams {
25
- ignoreRequiredCheck?: boolean;
26
+ export interface GetObjectValidatorParams extends CommonValidatorParams {
26
27
  }
27
28
  export declare const getObjectValidator: (params?: GetObjectValidatorParams) => (spec: ObjectSpec, value?: ObjectValue) => string | false;
28
- export interface GetStringValidatorParams {
29
- ignoreRequiredCheck?: boolean;
29
+ export interface GetStringValidatorParams extends CommonValidatorParams {
30
30
  ignoreSpaceStartCheck?: boolean;
31
31
  ignoreSpaceEndCheck?: boolean;
32
32
  ignoreMaxLengthCheck?: boolean;
@@ -34,3 +34,4 @@ export interface GetStringValidatorParams {
34
34
  ignoreRegExpCheck?: boolean;
35
35
  }
36
36
  export declare const getStringValidator: (params?: GetStringValidatorParams) => (spec: StringSpec, value?: string) => string | false;
37
+ export {};
@@ -2,122 +2,129 @@ import _ from 'lodash';
2
2
  import { ErrorMessages } from '../validators';
3
3
  import { isFloat, isInt } from './helpers';
4
4
  export const getArrayValidator = (params = {}) => {
5
- const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck } = params;
5
+ const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, customErrorMessages } = params;
6
+ const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
6
7
  return (spec, value) => {
7
8
  const valueLength = (value === null || value === void 0 ? void 0 : value.length) || 0;
8
9
  if (!ignoreRequiredCheck && spec.required && !_.isArray(value)) {
9
- return ErrorMessages.REQUIRED;
10
+ return errorMessages.REQUIRED;
10
11
  }
11
12
  if (!ignoreMaxLengthCheck &&
12
13
  typeof spec.maxLength === 'bigint' &&
13
14
  valueLength > spec.maxLength) {
14
- return ErrorMessages.maxLengthArr(spec.maxLength);
15
+ return errorMessages.maxLengthArr(spec.maxLength);
15
16
  }
16
17
  if (!ignoreMinLengthCheck &&
17
18
  typeof spec.minLength === 'bigint' &&
18
19
  valueLength < spec.minLength) {
19
- return ErrorMessages.minLengthArr(spec.minLength);
20
+ return errorMessages.minLengthArr(spec.minLength);
20
21
  }
21
22
  return false;
22
23
  };
23
24
  };
24
25
  export const getBooleanValidator = (params = {}) => {
25
- const { ignoreRequiredCheck } = params;
26
+ const { ignoreRequiredCheck, customErrorMessages } = params;
27
+ const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
26
28
  return (spec, value) => {
27
29
  if (!ignoreRequiredCheck && spec.required && !value) {
28
- return ErrorMessages.REQUIRED;
30
+ return errorMessages.REQUIRED;
29
31
  }
30
32
  return false;
31
33
  };
32
34
  };
33
35
  export const getNumberValidator = (params = {}) => {
34
- const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, } = params;
36
+ const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, customErrorMessages, } = params;
37
+ const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
38
+ // eslint-disable-next-line complexity
35
39
  return (spec, value = '') => {
36
40
  const stringValue = String(value);
37
41
  if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
38
- return ErrorMessages.REQUIRED;
42
+ return errorMessages.REQUIRED;
39
43
  }
40
44
  if (stringValue.length) {
41
45
  if (!ignoreSpaceStartCheck && !stringValue[0].trim()) {
42
- return ErrorMessages.SPACE_START;
46
+ return errorMessages.SPACE_START;
43
47
  }
44
48
  if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
45
- return ErrorMessages.SPACE_END;
49
+ return errorMessages.SPACE_END;
46
50
  }
47
51
  if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
48
- return ErrorMessages.DOT_END;
52
+ return errorMessages.DOT_END;
49
53
  }
50
54
  if (!ignoreNumberCheck && !isFloat(stringValue)) {
51
- return ErrorMessages.NUMBER;
55
+ return errorMessages.NUMBER;
52
56
  }
53
57
  if (!ignoreZeroStart &&
54
58
  ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
55
59
  (stringValue.length > 2 &&
56
60
  stringValue.substring(0, 2) === '-0' &&
57
61
  stringValue[2] !== '.'))) {
58
- return ErrorMessages.ZERO_START;
62
+ return errorMessages.ZERO_START;
59
63
  }
60
64
  }
61
65
  if (!ignoreMaximumCheck &&
62
66
  _.isNumber(spec.maximum) &&
63
67
  stringValue.length &&
64
68
  Number(stringValue) > spec.maximum) {
65
- return ErrorMessages.maxNumber(spec.maximum);
69
+ return errorMessages.maxNumber(spec.maximum);
66
70
  }
67
71
  if (!ignoreMinimumCheck &&
68
72
  _.isNumber(spec.minimum) &&
69
73
  stringValue.length &&
70
74
  spec.minimum > Number(stringValue)) {
71
- return ErrorMessages.minNumber(spec.minimum);
75
+ return errorMessages.minNumber(spec.minimum);
72
76
  }
73
77
  if (_.isString(spec.format) && stringValue.length) {
74
78
  if (!ignoreIntCheck && spec.format === 'int64' && !isInt(stringValue)) {
75
- return ErrorMessages.INT;
79
+ return errorMessages.INT;
76
80
  }
77
81
  }
78
82
  return false;
79
83
  };
80
84
  };
81
85
  export const getObjectValidator = (params = {}) => {
82
- const { ignoreRequiredCheck } = params;
86
+ const { ignoreRequiredCheck, customErrorMessages } = params;
87
+ const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
83
88
  return (spec, value) => {
84
89
  if (!ignoreRequiredCheck && spec.required && !value) {
85
- return ErrorMessages.REQUIRED;
90
+ return errorMessages.REQUIRED;
86
91
  }
87
92
  return false;
88
93
  };
89
94
  };
90
95
  export const getStringValidator = (params = {}) => {
91
- const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, ignoreRegExpCheck, } = params;
96
+ const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, ignoreRegExpCheck, customErrorMessages, } = params;
97
+ const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
98
+ // eslint-disable-next-line complexity
92
99
  return (spec, value = '') => {
93
100
  const valueLength = value === null || value === void 0 ? void 0 : value.length;
94
101
  if (!ignoreRequiredCheck && spec.required && !valueLength) {
95
- return ErrorMessages.REQUIRED;
102
+ return errorMessages.REQUIRED;
96
103
  }
97
104
  if (valueLength) {
98
105
  if (!ignoreSpaceStartCheck && !value[0].trim()) {
99
- return ErrorMessages.SPACE_START;
106
+ return errorMessages.SPACE_START;
100
107
  }
101
108
  if (!ignoreSpaceEndCheck && !value[value.length - 1].trim()) {
102
- return ErrorMessages.SPACE_END;
109
+ return errorMessages.SPACE_END;
103
110
  }
104
111
  }
105
112
  if (!ignoreMaxLengthCheck &&
106
113
  typeof spec.maxLength === 'bigint' &&
107
114
  valueLength > spec.maxLength) {
108
- return ErrorMessages.maxLength(spec.maxLength);
115
+ return errorMessages.maxLength(spec.maxLength);
109
116
  }
110
117
  if (!ignoreMinLengthCheck &&
111
118
  typeof spec.minLength === 'bigint' &&
112
119
  valueLength < spec.minLength) {
113
- return ErrorMessages.minLength(spec.minLength);
120
+ return errorMessages.minLength(spec.minLength);
114
121
  }
115
122
  if (_.isString(spec.pattern) && spec.pattern.length) {
116
123
  const regex = new RegExp(spec.pattern);
117
124
  if (!ignoreRegExpCheck && !regex.test(value)) {
118
125
  return _.isString(spec.patternError) && spec.patternError.length
119
126
  ? spec.patternError
120
- : ErrorMessages.INVALID;
127
+ : errorMessages.INVALID;
121
128
  }
122
129
  }
123
130
  return false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dynamic-forms",
3
- "version": "3.3.0",
3
+ "version": "3.4.0",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",
@@ -34,7 +34,12 @@
34
34
  "build-storybook": "sb build",
35
35
  "dev": "sb dev -p 6006",
36
36
  "start": "sb dev",
37
- "prepublishOnly": "npm run build"
37
+ "prepublishOnly": "npm run build",
38
+ "playwright:install": "playwright install --with-deps",
39
+ "playwright": "playwright test --config=playwright/playwright.config.ts",
40
+ "playwright:update": "npm run playwright -- -u",
41
+ "playwright:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx playwright install && npm run playwright'",
42
+ "playwright:docker:update": " docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx playwright install && npm run playwright:update'"
38
43
  },
39
44
  "dependencies": {
40
45
  "@bem-react/classname": "^1.6.0",
@@ -53,6 +58,8 @@
53
58
  "@gravity-ui/stylelint-config": "^2.0.0",
54
59
  "@gravity-ui/tsconfig": "^1.0.0",
55
60
  "@gravity-ui/uikit": "^5.19.1",
61
+ "@playwright/experimental-ct-react": "^1.40.0",
62
+ "@playwright/test": "^1.40.0",
56
63
  "@storybook/addon-essentials": "^7.0.27",
57
64
  "@storybook/preset-scss": "^1.0.3",
58
65
  "@storybook/react": "^7.0.27",
@@ -66,6 +73,7 @@
66
73
  "@types/react-dom": "^18.0.11",
67
74
  "@types/react-is": "^17.0.3",
68
75
  "@types/uuid": "^9.0.4",
76
+ "@vitejs/plugin-react": "^4.2.0",
69
77
  "css-loader": "^5.2.6",
70
78
  "eslint": "^8.27.0",
71
79
  "final-form": "^4.20.2",