@gravity-ui/dynamic-forms 1.2.0 → 1.3.0

package/build/esm/lib/core/components/Form/hooks/useDynamicFieldMirror.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const useDynamicFieldMirror = (params, __mirror) => {
+    if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+        __mirror.field.useStore = params.useStore;
+        __mirror.field.useIntegrationFF = params.useIntegrationFF;
+        __mirror.field.useSearchStore = params.useSearchStore;
+    }
+    React.useEffect(() => {
+        return () => {
+            if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+                delete __mirror.field.useStore;
+                delete __mirror.field.useIntegrationFF;
+                delete __mirror.field.useSearchStore;
+            }
+        };
+    }, []);
+};

package/build/esm/lib/core/components/Form/hooks/useField.d.ts

@@ -1,6 +1,6 @@
 import { Spec } from '../../../types';
 import { DynamicFormsContext, FieldRenderProps, FieldValue, ValidateError } from '../types';
-export interface FieldProps<Value extends FieldValue, SpecType extends Spec> {
+export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec> {
     name: string;
     spec: SpecType;
     initialValue: Value;
@@ -9,4 +9,4 @@ export interface FieldProps<Value extends FieldValue, SpecType extends Spec> {
     parentOnChange: ((childName: string, childValue: FieldValue, childErrors: Record<string, ValidateError>) => void) | null;
     parentOnUnmount: ((childName: string) => void) | null;
 }
-export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: FieldProps<Value, SpecType>) => FieldRenderProps<Value>;
+export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;

package/build/esm/lib/core/components/Form/hooks/useField.js

@@ -122,7 +122,7 @@ export const useField = ({ name, spec, initialValue, validate: propsValidate, to
         onDrop,
     ]);
     React.useEffect(() => {
-        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value)) {
+        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value) || state.error) {
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);

package/build/esm/lib/core/components/Form/hooks/useIntegrationFF.d.ts

@@ -0,0 +1,2 @@
+import { DynamicFieldStore } from '../types';
+export declare const useIntegrationFF: (store: DynamicFieldStore) => JSX.Element;

package/build/esm/lib/core/components/Form/hooks/useIntegrationFF.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import { Field as FinalFormField, useForm } from 'react-final-form';
+import { transformArrOut } from '../utils';
+export const useIntegrationFF = (store) => {
+    const form = useForm();
+    const watcher = React.useMemo(() => {
+        const props = {
+            name: store.name,
+            render: () => null,
+            subscription: {},
+            validate: () => {
+                const asyncErrors = [];
+                let error;
+                _.values(store.errors).forEach((err) => {
+                    if (err) {
+                        if (_.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
+                            asyncErrors.push(err);
+                        }
+                        else {
+                            error = err;
+                        }
+                    }
+                });
+                if (asyncErrors.length) {
+                    return Promise.all(asyncErrors).then((r) => r[0]);
+                }
+                return error;
+            },
+        };
+        return React.createElement(FinalFormField, Object.assign({}, props));
+    }, [store.name, store.errors]);
+    const change = React.useCallback(debounce((value) => {
+        form.change(store.name, _.get(transformArrOut(value), store.name));
+    }, 100), [form.change, store.name]);
+    React.useEffect(() => {
+        change(store.values);
+    }, [store.values]);
+    return watcher;
+};

package/build/esm/lib/core/components/Form/hooks/useSearchStore.d.ts

@@ -1,7 +1,5 @@
-export declare const useSearchStore: (name: string) => {
-    store: {
-        [x: string]: boolean;
-    };
+export declare const useSearchStore: () => {
+    store: Record<string, boolean>;
     setField: (name: string, search: boolean) => void;
     removeField: (name: string) => void;
     isHiddenField: (name: string) => boolean;

package/build/esm/lib/core/components/Form/hooks/useSearchStore.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 import { getParentName } from '../';
-export const useSearchStore = (name) => {
-    const [store, setStore] = React.useState({ [name]: false });
+export const useSearchStore = () => {
+    const [store, setStore] = React.useState({});
     const isHiddenField = React.useCallback((name) => {
         const selfFlag = store[name];
         if (selfFlag === false) {
@@ -20,6 +20,9 @@ export const useSearchStore = (name) => {
                 return false;
             }
         }
+        if (_.isUndefined(selfFlag)) {
+            return false;
+        }
         return true;
     }, [store]);
     return {

package/build/esm/lib/core/components/Form/hooks/useStore.d.ts

@@ -1,10 +1,4 @@
-import { FieldObjectValue, FieldValue, ValidateError } from '../types';
-export interface DynamicFieldStore {
-    name: string;
-    initialValue: FieldObjectValue;
-    values: FieldObjectValue;
-    errors: Record<string, ValidateError>;
-}
+import { DynamicFieldStore, FieldObjectValue, FieldValue, ValidateError } from '../types';
 export declare const useStore: (name: string) => {
     tools: {
         initialValue: FieldObjectValue;
@@ -12,5 +6,5 @@ export declare const useStore: (name: string) => {
         onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
-    watcher: JSX.Element;
+    store: DynamicFieldStore;
 };

package/build/esm/lib/core/components/Form/hooks/useStore.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
-import { Field as FinalFormField, useForm } from 'react-final-form';
-import { transformArrIn, transformArrOut } from '../utils';
+import { useForm } from 'react-final-form';
+import { transformArrIn } from '../utils';
 export const useStore = (name) => {
     const form = useForm();
     const firstRenderRef = React.useRef(true);
@@ -17,44 +17,12 @@ export const useStore = (name) => {
         };
     });
     const submitFailed = form.getState().submitFailed;
-    const watcher = React.useMemo(() => {
-        const props = {
-            name: store.name,
-            render: () => null,
-            subscription: {},
-            validate: () => {
-                const asyncErrors = [];
-                let error;
-                _.values(store.errors).forEach((err) => {
-                    if (err) {
-                        if (_.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
-                            asyncErrors.push(err);
-                        }
-                        else {
-                            error = err;
-                        }
-                    }
-                });
-                if (asyncErrors.length) {
-                    return Promise.all(asyncErrors).then((r) => r[0]);
-                }
-                return error;
-            },
-        };
-        return React.createElement(FinalFormField, Object.assign({}, props));
-    }, [store.name, store.errors]);
     const tools = React.useMemo(() => ({
         initialValue: store.initialValue,
-        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, value), errors: errors || {} }))),
-        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { errors: _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
+        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, _.clone(value)), errors: errors || {} }))),
+        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.omit(store.values, name), errors: _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
-    const change = React.useCallback(_.debounce((value) => {
-        form.change(store.name, _.get(transformArrOut(value), store.name));
-    }, 100), [form.change, store.name]);
-    React.useEffect(() => {
-        change(store.values);
-    }, [store.values]);
     React.useEffect(() => {
         if (!firstRenderRef.current) {
             const initialValue = transformArrIn({
@@ -71,5 +39,5 @@ export const useStore = (name) => {
     React.useEffect(() => {
         firstRenderRef.current = false;
     }, []);
-    return { tools, watcher };
+    return { tools, store };
 };

package/build/esm/lib/core/components/Form/types/context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError } from './';
+import { DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
@@ -10,4 +10,5 @@ export interface DynamicFormsContext {
         onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
+    __mirror?: WonderMirror;
 }

package/build/esm/lib/core/components/Form/types/index.d.ts

@@ -5,8 +5,10 @@ export * from './context';
 export * from './field';
 export * from './input';
 export * from './layout';
+export * from './mirror';
 export * from './number';
 export * from './object';
+export * from './store';
 export * from './string';
 export * from './validators';
 export * from './value';

package/build/esm/lib/core/components/Form/types/index.js

@@ -5,8 +5,10 @@ export * from './context';
 export * from './field';
 export * from './input';
 export * from './layout';
+export * from './mirror';
 export * from './number';
 export * from './object';
+export * from './store';
 export * from './string';
 export * from './validators';
 export * from './value';

package/build/esm/lib/core/components/Form/types/mirror.d.ts

@@ -0,0 +1,17 @@
+import { useComponents, useField, useIntegrationFF, useRender, useSearch, useSearchStore, useStore, useValidate } from '../hooks';
+export interface ControllerMirror {
+    useComponents?: ReturnType<typeof useComponents>;
+    useRender?: ReturnType<typeof useRender>;
+    useValidate?: ReturnType<typeof useValidate>;
+    useField?: ReturnType<typeof useField>;
+    useSearch?: ReturnType<typeof useSearch>;
+}
+export interface DynamicFieldMirror {
+    useStore?: ReturnType<typeof useStore>;
+    useIntegrationFF?: ReturnType<typeof useIntegrationFF>;
+    useSearchStore?: ReturnType<typeof useSearchStore>;
+}
+export interface WonderMirror {
+    field: DynamicFieldMirror;
+    controller: Record<string, ControllerMirror | undefined>;
+}

package/build/esm/lib/core/components/Form/types/mirror.js

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

package/build/esm/lib/core/components/Form/types/store.d.ts

@@ -0,0 +1,7 @@
+import { FieldObjectValue, ValidateError } from '../types';
+export interface DynamicFieldStore {
+    name: string;
+    initialValue: FieldObjectValue;
+    values: FieldObjectValue;
+    errors: Record<string, ValidateError>;
+}

package/build/esm/lib/core/components/Form/types/store.js

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

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

@@ -65,9 +65,10 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
         return [idxColumn, ...columns, removeColumn];
     }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
     const getRowClassNames = React.useCallback(({ key }) => {
-        const searchResult = isHiddenField(`${name}.<${key}>`);
+        var _a;
+        const searchResult = (_a = spec.viewSpec.table) === null || _a === void 0 ? void 0 : _a.every(({ property }) => isHiddenField(`${name}.<${key}>.${property}`));
         return [b('row', { hidden: searchResult })];
-    }, [isHiddenField, name]);
+    }, [isHiddenField, name, spec.viewSpec.table]);
     if (!columns) {
         return null;
     }

package/build/esm/lib/kit/components/Inputs/TextLink/TextLink.d.ts

@@ -0,0 +1,2 @@
+import { ObjectIndependentInput } from '../../../../core';
+export declare const TextLink: ObjectIndependentInput;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import _ from 'lodash';
+import { Controller, isStringSpec, } from '../../../../core';
+const TEXT_LINK_PROPERTY_NAME = 'text';
+export const TextLink = ({ spec, input, name }) => {
+    var _a;
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
+    const specProperties = Object.assign({}, spec.properties);
+    if (!specProperties[TEXT_LINK_PROPERTY_NAME] ||
+        !isStringSpec(specProperties[TEXT_LINK_PROPERTY_NAME])) {
+        return null;
+    }
+    return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: specProperties[TEXT_LINK_PROPERTY_NAME], name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+};

package/build/esm/lib/kit/components/Inputs/TextLink/index.d.ts

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

package/build/esm/lib/kit/components/Inputs/TextLink/index.js

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

package/build/esm/lib/kit/components/Inputs/index.d.ts

@@ -11,5 +11,6 @@ export * from './TableArrayInput';
 export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
+export * from './TextLink';
 export * from './NumberWithScale';
 export * from './MonacoInput';

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

@@ -11,5 +11,6 @@ export * from './TableArrayInput';
 export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
+export * from './TextLink';
 export * from './NumberWithScale';
 export * from './MonacoInput';

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

@@ -13,13 +13,16 @@
 }
 .df-row__left {
   width: 180px;
+  min-height: 28px;
   display: flex;
+  margin-bottom: auto;
   flex-direction: column;
   flex-shrink: 0;
 }
 .df-row__left-inner {
-  min-height: 28px;
-  display: flex;
+  display: inline;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 .df-row__left::after {
   content: "";
@@ -27,18 +30,24 @@
   flex-shrink: 1;
 }
 .df-row__title {
-  align-self: center;
+  word-break: break-word;
+  margin-right: 3px;
+}
+.df-row__title_required::after {
+  content: "*";
+  color: var(--yc-color-text-danger);
 }
 .df-row__note {
-  height: 28px;
-  display: flex;
-  align-items: center;
-  margin-left: 5px;
+  padding-right: 16px;
+}
+.df-row__note-inner {
+  position: absolute;
+  margin-top: 1px;
 }
-.df-row__note .yc-help-popover {
+.df-row__note-inner .yc-help-popover {
   display: flex;
 }
-.df-row__note .yc-help-popover > span {
+.df-row__note-inner .yc-help-popover > span {
   display: flex;
 }
 .df-row__right {
@@ -59,6 +68,5 @@
   margin-left: 5px;
 }
 .df-row__required-mark {
-  margin-left: 2px;
   color: var(--yc-color-text-danger);
 }

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

@@ -11,11 +11,10 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (React.createElement("div", { className: b({ 'extra-width': isArraySpec(spec) || arrayItem }) },
         React.createElement("div", { className: b('left') },
             React.createElement("div", { className: b('left-inner') },
-                React.createElement("div", { className: b('title') },
-                    spec.viewSpec.layoutTitle,
-                    spec.required && React.createElement("span", { className: b('required-mark') }, "*")),
-                !verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('note') },
-                    React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
+                React.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                !verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("span", { className: b('note') },
+                    React.createElement("span", { className: b('note-inner') },
+                        React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),

package/build/esm/lib/kit/components/Views/TextLinkView/TextLinkView.d.ts

@@ -0,0 +1,2 @@
+import { ObjectIndependentView } from '../../../../core';
+export declare const TextLinkView: ObjectIndependentView;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ViewController } from '../../../../core';
+const TEXT_LINK_PROPERTY_NAME = 'text';
+export const TextLinkView = ({ value, spec, name }) => {
+    const specProperties = spec.properties;
+    const preparedSpec = React.useMemo(() => {
+        var _a;
+        return specProperties && specProperties[TEXT_LINK_PROPERTY_NAME]
+            ? Object.assign(Object.assign({}, specProperties[TEXT_LINK_PROPERTY_NAME]), { viewSpec: Object.assign(Object.assign({}, (_a = specProperties[TEXT_LINK_PROPERTY_NAME]) === null || _a === void 0 ? void 0 : _a.viewSpec), { link: value === null || value === void 0 ? void 0 : value.link }) }) : undefined;
+    }, [specProperties, value === null || value === void 0 ? void 0 : value.link]);
+    return preparedSpec ? (React.createElement(ViewController, { spec: preparedSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` })) : null;
+};

package/build/esm/lib/kit/components/Views/TextLinkView/index.d.ts

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

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

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

package/build/esm/lib/kit/components/Views/index.d.ts

@@ -9,3 +9,4 @@ export * from './OneOfCardView';
 export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
+export * from './TextLinkView';

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

@@ -9,3 +9,4 @@ export * from './OneOfCardView';
 export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
+export * from './TextLinkView';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -57,6 +57,7 @@ export const dynamicConfig = {
             card_oneof: { Component: CardOneOf, independent: true },
             secret: { Component: Secret, independent: true },
             base: { Component: ObjectBase, independent: true },
+            text_link: { Component: TextLink, independent: true },
         },
         layouts: {
             row: Row,
@@ -152,6 +153,7 @@ export const dynamicCardConfig = {
             oneof: { Component: OneOfCard, independent: true },
             secret: { Component: Secret, independent: true },
             base: { Component: ObjectBase, independent: true },
+            text_link: { Component: TextLink, independent: true },
         },
         layouts: {
             row: Row2,
@@ -236,6 +238,7 @@ export const dynamicViewConfig = {
             card_oneof: { Component: CardOneOfView, independent: true },
             secret: undefined,
             base: { Component: ObjectBaseView, independent: true },
+            text_link: { Component: TextLinkView, independent: true },
         },
         layouts: {
             row: ViewRow,
@@ -313,6 +316,7 @@ export const dynamicViewCardConfig = {
             oneof: { Component: OneOfCardView, independent: true },
             secret: undefined,
             base: { Component: ObjectBaseView, independent: true },
+            text_link: { Component: TextLinkView, independent: true },
         },
         layouts: {
             row: ViewRow2,

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

@@ -65,8 +65,7 @@ export const getNumberValidator = (params = {}) => {
         }
         if (!ignoreMinimumCheck &&
             _.isNumber(spec.minimum) &&
-            stringValue.length &&
-            spec.minimum > Number(stringValue)) {
+            ((stringValue.length && spec.minimum > Number(stringValue)) || !stringValue.length)) {
             return ErrorMessages.minNumber(spec.minimum);
         }
         if (_.isString(spec.format) && stringValue.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -28,7 +28,8 @@
     "lint:js": "eslint src --quiet",
     "lint:prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx,css,scss}'",
     "lint:styles": "stylelint 'src/**/*.scss'",
-    "typecheck": "tsc -p src --noEmit",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
     "build": "gulp",
     "build-storybook": "build-storybook",
     "dev": "start-storybook -p 6006",
@@ -42,10 +43,10 @@
     "lodash": "^4.17.20"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.0",
-    "@commitlint/config-conventional": "^17.0.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
     "@gravity-ui/eslint-config": "^2.0.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^2.0.0",
@@ -54,6 +55,9 @@
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.180",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -67,6 +71,9 @@
     "gulp-replace": "^1.1.4",
     "gulp-typescript": "^6.0.0-alpha.1",
     "husky": "^7.0.4",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-transform-css": "^6.0.1",
     "monaco-editor": "^0.30.1",
     "monaco-editor-webpack-plugin": "^6.0.0",
     "npm-run-all": "^4.1.5",
@@ -83,6 +90,7 @@
     "style-loader": "^2.0.0",
     "stylelint": "^14.15.0",
     "stylelint-scss": "^4.2.0",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {