@salutejs/sdds-api-tests 0.2.0-canary.2420.23801489438.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Salute Devices
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@salutejs/sdds-api-tests",
+  "version": "0.2.0-canary.2420.23801489438.0",
+  "description": "API tests for components",
+  "author": "Salute Frontend Team <salute.developers@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@github.com:salute-developers/plasma.git",
+    "directory": "utils/api-tests"
+  },
+  "scripts": {
+    "test": "rm -rf tests && node script.mjs && vitest run --config ./vitest.config.ts"
+  },
+  "devDependencies": {
+    "@salutejs/plasma-b2c": "1.613.0-canary.2420.23801489438.0",
+    "@salutejs/plasma-giga": "0.340.0-canary.2420.23801489438.0",
+    "@salutejs/plasma-icons": "1.234.0-canary.2420.23801489438.0",
+    "@salutejs/plasma-web": "1.615.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-bizcom": "0.345.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-cs": "0.349.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-dfa": "0.343.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-finai": "0.336.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-insol": "0.340.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-netology": "0.344.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-platform-ai": "0.344.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-scan": "0.343.0-canary.2420.23801489438.0",
+    "@salutejs/sdds-serv": "0.344.0-canary.2420.23801489438.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "f3b2e40fa8039e6ea8e1e6ebfae162910a29dac1"
+}

package/script.mjs

@@ -0,0 +1,109 @@
+/* Скрипт для подготовки файлов с тестами под разные библиотеки.
+ * basicLib - библиотека для исходных файлов. Компоненты для тестов должны браться только из нее.
+ * libs - массив с библиотеками, в которых будет проверяться API.
+ * Происходит это заменой импорта с basicLib на нужную в данный момент библиотеку.
+ * Далее скрипт генерирует файлы на основе этих мета-данных и уже после этого запускается тестирование. */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const config = {
+    basicLib: '@salutejs/plasma-b2c',
+    libs: [
+        {
+            name: '@salutejs/plasma-b2c',
+            ignoreComponents: ['Combobox', 'TextField'],
+        },
+        {
+            name: '@salutejs/plasma-web',
+            ignoreComponents: ['Combobox', 'TextField'],
+        },
+        {
+            name: '@salutejs/plasma-giga',
+        },
+        {
+            name: '@salutejs/sdds-bizcom',
+        },
+        {
+            name: '@salutejs/sdds-cs',
+        },
+        {
+            name: '@salutejs/sdds-dfa',
+        },
+        {
+            name: '@salutejs/sdds-finai',
+        },
+        {
+            name: '@salutejs/sdds-insol',
+        },
+        {
+            name: '@salutejs/sdds-netology',
+        },
+        {
+            name: '@salutejs/sdds-platform-ai',
+        },
+        {
+            name: '@salutejs/sdds-scan',
+        },
+        {
+            name: '@salutejs/sdds-serv',
+        },
+    ],
+    ignoreComponents: [],
+    srcDir: 'src',
+    outDir: 'tests',
+};
+
+(() => {
+    function getFiles(dir) {
+        return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+            const fullPath = path.join(dir, entry.name);
+            return entry.isDirectory() ? getFiles(fullPath) : fullPath;
+        });
+    }
+
+    try {
+        const filename = fileURLToPath(import.meta.url);
+        const dirname = path.dirname(filename);
+
+        const SRC_DIR = path.resolve(dirname, config.srcDir);
+        const OUT_DIR = path.resolve(dirname, config.outDir);
+
+        const files = getFiles(SRC_DIR);
+
+        files.forEach((filePath) => {
+            if (
+                Array.isArray(config.ignoreComponents) &&
+                config.ignoreComponents.some((component) => filePath.includes(`src/components/${component}`))
+            ) {
+                return;
+            }
+
+            const relPath = path.relative(SRC_DIR, filePath);
+            const originalContent = fs.readFileSync(filePath, 'utf8');
+
+            config.libs.forEach(({ name, ignoreComponents }) => {
+                if (
+                    Array.isArray(ignoreComponents) &&
+                    ignoreComponents.some((component) => filePath.includes(`src/components/${component}`))
+                ) {
+                    return;
+                }
+
+                const libFolder = name.replace('@salutejs/', '');
+                const targetPath = path.join(OUT_DIR, libFolder, relPath);
+
+                const transformedContent = originalContent.replace(new RegExp(config.basicLib, 'g'), name);
+
+                fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+                fs.writeFileSync(targetPath, transformedContent);
+            });
+        });
+
+        console.log('Файлы для тестов сгенерированы успешно');
+    } catch (err) {
+        console.error('Ошибка генерации тестов: ', err);
+        process.exit(1);
+    }
+})();

package/src/components/Button/Button.api.test.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import type { ComponentProps, ReactNode, CSSProperties, AriaRole } from 'react';
+import { describe, it } from 'vitest';
+import { expectTypeOf } from 'expect-type';
+import { IconDownload } from '@salutejs/plasma-icons';
+import { Button } from '@salutejs/plasma-b2c';
+
+type ButtonProps = ComponentProps<typeof Button>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        expectTypeOf<ButtonProps>().toHaveProperty('children').toEqualTypeOf<ReactNode>();
+        expectTypeOf<ButtonProps>().toHaveProperty('text').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('contentLeft').toEqualTypeOf<ReactNode>();
+        expectTypeOf<ButtonProps>().toHaveProperty('contentPlacing').toEqualTypeOf<'default' | 'relaxed' | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('additionalContent').toEqualTypeOf<ReactNode>();
+        expectTypeOf<ButtonProps>().toHaveProperty('isLoading').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('loader').toEqualTypeOf<ReactNode>();
+        expectTypeOf<ButtonProps>().toHaveProperty('stretch').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>()
+            .toHaveProperty('stretching')
+            .toEqualTypeOf<'fixed' | 'filled' | 'auto' | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('square').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('focused').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>()
+            .toHaveProperty('pin')
+            .toEqualTypeOf<
+                | 'square-square'
+                | 'square-clear'
+                | 'clear-square'
+                | 'clear-clear'
+                | 'clear-circle'
+                | 'circle-clear'
+                | 'circle-circle'
+                | undefined
+            >();
+        expectTypeOf<ButtonProps>().toHaveProperty('outlined').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('shiftLeft').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('shiftRight').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('blur').toEqualTypeOf<'small' | 'medium' | 'large' | undefined>();
+    });
+
+    it('Variations', () => {
+        type View = NonNullable<ButtonProps['view']>;
+        expectTypeOf<View>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<View>();
+
+        type Size = NonNullable<ButtonProps['size']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+    });
+
+    it('HTMLInputElement', () => {
+        expectTypeOf<ButtonProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<ButtonProps>()
+            .toHaveProperty('onClick')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLElement> | undefined>();
+        expectTypeOf<ButtonProps>()
+            .toHaveProperty('onMouseEnter')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLElement> | undefined>();
+        expectTypeOf<ButtonProps>()
+            .toHaveProperty('onMouseLeave')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLElement> | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ButtonProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+    });
+});
+
+describe('Unions', () => {
+    it('RightContent', () => {
+        expectTypeOf<ButtonProps>({ value: 123 });
+        expectTypeOf<ButtonProps>({ contentRight: 123 });
+        // @ts-expect-error
+        expectTypeOf<ButtonProps>({ value: 123, contentRight: 123 });
+    });
+});
+
+describe('Complex', () => {
+    it('Examples', () => {
+        expectTypeOf<ButtonProps>({ text: 'Текст', contentLeft: <IconDownload color="inherit" /> });
+        expectTypeOf<ButtonProps>({ isLoading: true, loader: <div>Loader...</div> });
+        expectTypeOf<ButtonProps>({ text: 'Button', stretching: 'filled' });
+        expectTypeOf<ButtonProps>({ text: 'Hello', value: 'Plasma', stretching: 'filled', contentPlacing: 'default' });
+    });
+});

package/src/components/Checkbox/Checkbox.api.test.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import type { ComponentProps, ReactNode, CSSProperties, AriaRole } from 'react';
+import { useState } from 'react';
+import { describe, it } from 'vitest';
+import { expectTypeOf } from 'expect-type';
+import { Checkbox } from '@salutejs/plasma-b2c';
+
+type CheckboxProps = ComponentProps<typeof Checkbox>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        expectTypeOf<CheckboxProps>().toHaveProperty('label').toEqualTypeOf<ReactNode>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('description').toEqualTypeOf<ReactNode>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('singleLine').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('indeterminate').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('focused').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('checked').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('readOnly').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('required').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('name').toEqualTypeOf<string | undefined>();
+        expectTypeOf<CheckboxProps>()
+            .toHaveProperty('value')
+            .toEqualTypeOf<string | number | readonly string[] | undefined>();
+    });
+
+    it('Variations', () => {
+        type View = NonNullable<CheckboxProps['view']>;
+        expectTypeOf<View>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<View>();
+
+        type Size = NonNullable<CheckboxProps['size']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+    });
+
+    it('HTMLInputElement', () => {
+        expectTypeOf<CheckboxProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<CheckboxProps>()
+            .toHaveProperty('onChange')
+            .toEqualTypeOf<React.ChangeEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<CheckboxProps>()
+            .toHaveProperty('onFocus')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<CheckboxProps>()
+            .toHaveProperty('onBlur')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<CheckboxProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+    });
+});
+
+describe('Complex', () => {
+    it('Examples', () => {
+        expectTypeOf<CheckboxProps>({ label: 'Согласен с условиями' });
+        expectTypeOf<CheckboxProps>({ label: 'Пункт', description: 'Описание пункта' });
+        expectTypeOf<CheckboxProps>({ label: 'Пункт', description: 'Описание', singleLine: true });
+        expectTypeOf<CheckboxProps>({ label: 'Частично', indeterminate: true });
+        expectTypeOf<CheckboxProps>({ label: 'Неактивен', disabled: true, checked: true });
+    });
+});
+
+describe('Examples', () => {
+    it('Controlled', () => {
+        () => {
+            const [checked, setChecked] = useState(false);
+
+            return (
+                <Checkbox
+                    label="Согласен с условиями"
+                    checked={checked}
+                    onChange={(e) => setChecked(e.target.checked)}
+                />
+            );
+        };
+    });
+
+    it('With description', () => {
+        () => {
+            return <Checkbox label="Получать уведомления" description="На почту и в приложение" />;
+        };
+    });
+
+    it('Indeterminate', () => {
+        () => {
+            return <Checkbox label="Выбрать все" indeterminate />;
+        };
+    });
+
+    it('Disabled', () => {
+        () => {
+            return <Checkbox label="Неактивный" disabled checked />;
+        };
+    });
+
+    it('SingleLine', () => {
+        () => {
+            return <Checkbox label="Длинный заголовок" description="Длинное описание" singleLine />;
+        };
+    });
+});

package/src/components/Combobox/Combobox.api.test.tsx

@@ -0,0 +1,468 @@
+import type {
+    AriaRole,
+    ComponentProps,
+    CSSProperties,
+    ReactElement,
+    RefObject,
+    ReactNode,
+    ChangeEventHandler,
+} from 'react';
+import React, { useState, useRef } from 'react';
+import { describe, it } from 'vitest';
+import { expectTypeOf } from 'expect-type';
+import { Combobox } from '@salutejs/plasma-b2c';
+
+type ComboboxProps = ComponentProps<typeof Combobox>;
+
+type ItemOption = {
+    value: string;
+    label: string;
+    placement?:
+        | 'top'
+        | 'top-start'
+        | 'top-end'
+        | 'right'
+        | 'right-start'
+        | 'right-end'
+        | 'bottom'
+        | 'bottom-start'
+        | 'bottom-end'
+        | 'left'
+        | 'left-start'
+        | 'left-end';
+    items?: Array<ItemOption>;
+    disabled?: boolean;
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
+    className?: string;
+    listMaxHeight?: CSSProperties['height'];
+};
+
+describe('Basics', () => {
+    it('Common', () => {
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({});
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ placement: 'bottom' });
+        expectTypeOf<ComboboxProps>({ items: [] });
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('placement')
+            .toEqualTypeOf<
+                | 'top'
+                | 'top-start'
+                | 'top-end'
+                | 'right'
+                | 'right-start'
+                | 'right-end'
+                | 'bottom'
+                | 'bottom-start'
+                | 'bottom-end'
+                | 'left'
+                | 'left-start'
+                | 'left-end'
+                | undefined
+            >();
+        expectTypeOf<ComboboxProps>().toHaveProperty('placeholder').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('helperText').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('contentLeft').toEqualTypeOf<ReactElement | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('textBefore').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('textAfter').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('variant').toEqualTypeOf<'normal' | 'tight' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('zIndex').toEqualTypeOf<CSSProperties['zIndex'] | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('listMaxHeight')
+            .toEqualTypeOf<CSSProperties['height'] | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('listWidth').toEqualTypeOf<CSSProperties['width'] | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('portal')
+            .toEqualTypeOf<string | RefObject<HTMLElement> | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('closeAfterSelect').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onChangeValue')
+            .toEqualTypeOf<((value: string) => void) | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('filterValue')
+            .toEqualTypeOf<((value: string) => boolean) | undefined>();
+        // TODO: Сузить тип для onScroll
+        // expectTypeOf<ComboboxProps>()
+        //     .toHaveProperty('onScroll')
+        //     .toEqualTypeOf<((e: UIEvent<HTMLElement>) => void) | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onToggle')
+            .toEqualTypeOf<((isOpen: boolean) => void) | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('beforeList').toEqualTypeOf<ReactNode | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('afterList').toEqualTypeOf<ReactNode | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('virtual').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('mode').toEqualTypeOf<'default' | 'radio' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('emptyStateDescription').toEqualTypeOf<ReactNode | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('treeView').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('arrowPlacement').toEqualTypeOf<'left' | 'right' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('listHeight').toEqualTypeOf<CSSProperties['height'] | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('listOverflow')
+            .toEqualTypeOf<CSSProperties['overflow'] | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('keepPlaceholder').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('readOnly').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('alwaysOpened').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('name').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('defaultValue').toEqualTypeOf<string | string[] | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('multiple').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('value').toEqualTypeOf<string | string[] | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('isTargetAmount').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('targetAmount').toEqualTypeOf<number | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('selectAllOptions').toEqualTypeOf<
+            | {
+                  checked?: boolean;
+                  indeterminate?: boolean;
+                  label?: string;
+                  onClick?: () => void;
+                  sticky?: boolean;
+              }
+            | undefined
+        >();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('chipClickArea')
+            .toEqualTypeOf<'full' | 'close-icon' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('required').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('requiredPlacement').toEqualTypeOf<'left' | 'right' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('optional').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('optionalText').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hasRequiredIndicator').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintText').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintTrigger').toEqualTypeOf<'hover' | 'click' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintTargetIcon').toEqualTypeOf<ReactNode | undefined>();
+        // TODO: Почему свойства нет в sdds-insol?
+        // expectTypeOf<ComboboxProps>()
+        //     .toHaveProperty('hintTargetPlacement')
+        //     .toEqualTypeOf<'inner' | 'outer' | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintHasArrow').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintOffset').toEqualTypeOf<[number, number] | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintWidth').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('hintContentLeft').toEqualTypeOf<ReactNode | undefined>();
+        const items = [{ value: '', label: '', randomProp: '' }];
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [{ value: '' }] });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [{ label: '' }] });
+        expectTypeOf<ComboboxProps>({ items: [{ value: '', label: '' }] });
+        expectTypeOf<ComboboxProps>({ items });
+        expectTypeOf<ComboboxProps>({ items: [{ value: '', label: '', disabled: true }] });
+        expectTypeOf<ComboboxProps>({ items: [{ value: '', label: '', disabled: true }] });
+        expectTypeOf<ComboboxProps>().toHaveProperty('items').toEqualTypeOf<ItemOption[]>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('renderItem')
+            .toEqualTypeOf<((item: ItemOption) => ReactNode) | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('filter')
+            .toEqualTypeOf<((item: ItemOption, textValue: string) => boolean) | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onChange')
+            .toEqualTypeOf<
+                | ((value: string[], item: ItemOption | null) => void)
+                | ((value: string, item: ItemOption | null) => void)
+                | ChangeEventHandler
+                | undefined
+            >();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('renderValue')
+            .toEqualTypeOf<((item: ItemOption) => string) | undefined>();
+    });
+
+    it('Variations', () => {
+        type View = NonNullable<ComboboxProps['view']>;
+        expectTypeOf<View>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<View>();
+
+        type Size = NonNullable<ComboboxProps['size']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+
+        type LabelPlacement = NonNullable<ComboboxProps['labelPlacement']>;
+        expectTypeOf<LabelPlacement>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<LabelPlacement>();
+        // TODO: Почему свойств hintView и hintSize нет в sdds-insol?
+        // type HintView = NonNullable<ComboboxProps['hintView']>;
+        // expectTypeOf<HintView>().toExtend<string>();
+        // expectTypeOf<string>().not.toExtend<HintView>();
+        //
+        // type HintSize = NonNullable<ComboboxProps['hintSize']>;
+        // expectTypeOf<HintSize>().toExtend<string>();
+        // expectTypeOf<string>().not.toExtend<HintSize>();
+    });
+
+    it('HTMLInputElement', () => {
+        expectTypeOf<ComboboxProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onFocus')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onBlur')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onKeyDown')
+            .toEqualTypeOf<React.KeyboardEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<ComboboxProps>()
+            .toHaveProperty('onKeyUp')
+            .toEqualTypeOf<React.KeyboardEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('placeholder').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<ComboboxProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+    });
+});
+
+describe('Unions', () => {
+    it('ViewStateProps', () => {
+        expectTypeOf<ComboboxProps>({ items: [], readOnly: true, disabled: true, alwaysOpened: false });
+        expectTypeOf<ComboboxProps>({ items: [], readOnly: false, disabled: false, alwaysOpened: true });
+        // TODO: Неправильная работа юниона ViewStateProps. Должна быть ошибка.
+        expectTypeOf<ComboboxProps>({ items: [], readOnly: false, disabled: false, alwaysOpened: false });
+        // TODO: Неправильная работа юниона ViewStateProps. Должна быть ошибка.
+        expectTypeOf<ComboboxProps>({ items: [], readOnly: true, disabled: true, alwaysOpened: true });
+    });
+
+    it('IsMultiselect', () => {
+        expectTypeOf<ComboboxProps>({ items: [], value: '' });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, value: [] });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, value: [''] });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, onChange: (value: string[]) => {} });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: false, onChange: (value: string) => {} });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], multiple: false, value: [] });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], multiple: false, onChange: (value: string[]) => {} });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, value: '' });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, onChange: (value: string) => {} });
+        expectTypeOf<ComboboxProps>({ items: [], isTargetAmount: false });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, isTargetAmount: true });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, targetAmount: 1 });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, renderValue: () => '' });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, selectAllOptions: { checked: true } });
+        expectTypeOf<ComboboxProps>({ items: [], multiple: true, chipClickArea: 'full' });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], isTargetAmount: true });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], targetAmount: 1 });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], renderValue: () => '' });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], selectAllOptions: { checked: true } });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], chipClickArea: 'full' });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', defaultValue: '' });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', multiple: true, defaultValue: [''] });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], name: '', value: '' });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', multiple: true, isTargetAmount: true });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', multiple: true, targetAmount: 1 });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', multiple: true, renderValue: () => '' });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', multiple: true, selectAllOptions: { checked: true } });
+        expectTypeOf<ComboboxProps>({ items: [], name: '', multiple: true, chipClickArea: 'full' });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], name: '', isTargetAmount: true });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], name: '', targetAmount: 1 });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], name: '', renderValue: () => '' });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], name: '', selectAllOptions: { checked: true } });
+        // @ts-expect-error
+        expectTypeOf<ComboboxProps>({ items: [], name: '', chipClickArea: 'full' });
+    });
+});
+
+describe('Generics', () => {
+    it('ItemOption', () => {
+        const items = [{ value: '', label: '', randomProp: '', boolProp: true }];
+
+        void (<Combobox items={items} />);
+        void (
+            <Combobox
+                multiple
+                items={items}
+                renderItem={(item) => {
+                    return item.randomProp;
+                }}
+                filter={(item) => item.boolProp}
+                onChange={(value: string[], item) => {
+                    return item && item.randomProp;
+                }}
+                renderValue={(item) => {
+                    return item.randomProp;
+                }}
+            />
+        );
+    });
+});
+
+describe('Examples', () => {
+    const items = [
+        {
+            value: 'north_america',
+            label: 'Северная Америка',
+        },
+        {
+            value: 'south_america',
+            label: 'Южная Америка',
+            items: [
+                {
+                    value: 'brazil',
+                    label: 'Бразилия',
+                    disabled: true,
+                },
+                {
+                    value: 'argentina',
+                    label: 'Аргентина',
+                },
+            ],
+        },
+    ];
+
+    it('Single', () => {
+        () => {
+            const [value, setValue] = useState<string>('');
+
+            return (
+                <Combobox
+                    items={items}
+                    value={value}
+                    onChange={setValue}
+                    placeholder="Placeholder"
+                    label="Label"
+                    helperText="Helper text"
+                />
+            );
+        };
+    });
+
+    it('Multiple', () => {
+        () => {
+            const [value, setValue] = useState<string[]>([]);
+
+            return (
+                <Combobox
+                    multiple
+                    items={items}
+                    value={value}
+                    onChange={setValue}
+                    placeholder="Placeholder"
+                    label="Label"
+                    helperText="Helper text"
+                />
+            );
+        };
+    });
+
+    it('Predefined', () => {
+        () => {
+            const [multipleValue, setMultipleValue] = useState<string[]>(['brazil', 'north_america']);
+
+            return (
+                <Combobox
+                    multiple
+                    items={items}
+                    value={multipleValue}
+                    onChange={setMultipleValue}
+                    placeholder="Placeholder"
+                    label="Label"
+                    helperText="Helper text"
+                />
+            );
+        };
+    });
+
+    it('Portal', () => {
+        () => {
+            const [value, setValue] = useState<string>('');
+
+            const ref = useRef(null);
+
+            return (
+                <Combobox
+                    items={items}
+                    value={value}
+                    onChange={setValue}
+                    placeholder="Placeholder"
+                    label="Label"
+                    helperText="Helper text"
+                    portal={ref}
+                    listWidth="300px"
+                />
+            );
+        };
+    });
+
+    it('Uncontrolled', () => {
+        () => {
+            return <Combobox items={items} placeholder="Placeholder" label="Label" helperText="Helper text" />;
+        };
+    });
+
+    it('Uncontrolled', () => {
+        () => {
+            const items = Array(5000)
+                .fill(1)
+                .map((_, i) => ({ value: i.toString(), label: i.toString() }));
+
+            return (
+                <Combobox
+                    items={items}
+                    virtual
+                    listMaxHeight="200px"
+                    placeholder="Placeholder"
+                    label="Label"
+                    helperText="Helper text"
+                />
+            );
+        };
+    });
+
+    it('Disabled elements', () => {
+        () => {
+            const [value, setValue] = useState(['brazil']);
+
+            return (
+                <Combobox
+                    multiple
+                    label="Label"
+                    placeholder="Placeholder"
+                    items={items}
+                    value={value}
+                    onChange={setValue}
+                    isTargetAmount
+                />
+            );
+        };
+    });
+
+    it('Treeview', () => {
+        () => {
+            return (
+                <Combobox
+                    multiple
+                    treeView
+                    label="Введите 'Токио'"
+                    placeholder="Placeholder"
+                    items={items}
+                    listMaxHeight="300px"
+                />
+            );
+        };
+    });
+
+    it('Native form', () => {
+        () => {
+            return (
+                <form>
+                    <Combobox label="Combobox" name="combobox" defaultValue="brazil" items={items} />
+                    <Combobox label="Combobox" name="comboboxMulti" defaultValue={['brazil']} items={items} multiple />
+                </form>
+            );
+        };
+    });
+});

package/src/components/TextField/TextField.api.test.tsx

@@ -0,0 +1,283 @@
+import * as React from 'react';
+import type { ComponentProps, ReactNode, CSSProperties, AriaRole, ReactElement, KeyboardEvent } from 'react';
+import { useState } from 'react';
+import { describe, it } from 'vitest';
+import { expectTypeOf } from 'expect-type';
+import { TextField } from '@salutejs/plasma-b2c';
+
+type TextFieldProps = ComponentProps<typeof TextField>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        expectTypeOf<TextFieldProps>().toHaveProperty('label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('placeholder').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('leftHelper').toEqualTypeOf<ReactNode>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('titleCaption').toEqualTypeOf<ReactNode>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('contentLeft').toEqualTypeOf<ReactElement | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('contentRight').toEqualTypeOf<ReactElement | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('textBefore').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('textAfter').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('appearance').toEqualTypeOf<'default' | 'clear' | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('readOnly').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('keepPlaceholder').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('required').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('requiredPlacement')
+            .toEqualTypeOf<'left' | 'right' | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('optional').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('optionalText').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hasRequiredIndicator').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('onSearch')
+            .toEqualTypeOf<((value: string, event?: KeyboardEvent<HTMLInputElement>) => void) | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintText').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintTrigger').toEqualTypeOf<'hover' | 'click' | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintTargetIcon').toEqualTypeOf<ReactNode>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('hintTargetPlacement')
+            .toEqualTypeOf<'inner' | 'outer' | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintHasArrow').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintOffset').toEqualTypeOf<[number, number] | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintWidth').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('hintContentLeft').toEqualTypeOf<ReactNode>();
+    });
+
+    it('Variations', () => {
+        type View = NonNullable<TextFieldProps['view']>;
+        expectTypeOf<View>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<View>();
+
+        type Size = NonNullable<TextFieldProps['size']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+
+        type LabelPlacement = NonNullable<TextFieldProps['labelPlacement']>;
+        expectTypeOf<LabelPlacement>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<LabelPlacement>();
+
+        type HintView = NonNullable<TextFieldProps['hintView']>;
+        expectTypeOf<HintView>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<HintView>();
+
+        type HintSize = NonNullable<TextFieldProps['hintSize']>;
+        expectTypeOf<HintSize>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<HintSize>();
+    });
+
+    it('HTMLInputElement', () => {
+        expectTypeOf<TextFieldProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('value')
+            .toEqualTypeOf<string | number | readonly string[] | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('defaultValue')
+            .toEqualTypeOf<string | number | readonly string[] | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('onChange')
+            .toEqualTypeOf<React.ChangeEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('onFocus')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('onBlur')
+            .toEqualTypeOf<React.FocusEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<TextFieldProps>()
+            .toHaveProperty('onKeyDown')
+            .toEqualTypeOf<React.KeyboardEventHandler<HTMLInputElement> | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextFieldProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+    });
+});
+
+describe('Unions', () => {
+    it('ClearProps', () => {
+        expectTypeOf<TextFieldProps>({ clear: true, hasDivider: true });
+        expectTypeOf<TextFieldProps>({ clear: true, hasDivider: false });
+        expectTypeOf<TextFieldProps>({ clear: true });
+        // TODO: Неправильная работа юниона ClearProps. Должна быть ошибка.
+        expectTypeOf<TextFieldProps>({ hasDivider: true });
+    });
+
+    it('HintProps', () => {
+        expectTypeOf<TextFieldProps>({ hintText: 'hint' });
+        expectTypeOf<TextFieldProps>({ hintText: 'hint', hintTrigger: 'hover' });
+        expectTypeOf<TextFieldProps>({ hintText: 'hint', hintHasArrow: true });
+        expectTypeOf<TextFieldProps>({ hintText: 'hint', hintOffset: [0, 8] });
+        expectTypeOf<TextFieldProps>({ hintText: 'hint', hintWidth: '10rem' });
+        expectTypeOf<TextFieldProps>({});
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ hintTrigger: 'hover' });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ hintHasArrow: true });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ hintOffset: [0, 8] });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ hintWidth: '10rem' });
+    });
+
+    it('EnumerationType', () => {
+        expectTypeOf<TextFieldProps>({ enumerationType: 'plain' });
+        expectTypeOf<TextFieldProps>({ enumerationType: 'chip', chips: ['tag1', 'tag2'] });
+        expectTypeOf<TextFieldProps>({
+            enumerationType: 'chip',
+            chips: ['tag1'],
+            onChangeChips: (value) => {},
+            chipType: 'default',
+        });
+        expectTypeOf<TextFieldProps>({
+            enumerationType: 'chip',
+            chips: ['tag1'],
+            chipView: 'secondary',
+        });
+        expectTypeOf<TextFieldProps>({
+            enumerationType: 'chip',
+            chips: ['tag1'],
+            chipValidator: (value) => ({ view: 'default' }),
+        });
+        expectTypeOf<TextFieldProps>({
+            enumerationType: 'chip',
+            chipType: 'text',
+        });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ enumerationType: 'plain', chips: ['tag1'] });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ enumerationType: 'plain', onChangeChips: (value: any[]) => {} });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ enumerationType: 'plain', chipType: 'default' });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ enumerationType: 'plain', chipView: 'secondary' });
+        // @ts-expect-error
+        expectTypeOf<TextFieldProps>({ enumerationType: 'plain', chipValidator: (value: string) => ({}) });
+    });
+});
+
+describe('Complex', () => {
+    it('Examples', () => {
+        expectTypeOf<TextFieldProps>({
+            label: 'Имя',
+            placeholder: 'Введите имя',
+            leftHelper: 'Обязательное поле',
+        });
+        expectTypeOf<TextFieldProps>({
+            label: 'Email',
+            placeholder: 'Введите email',
+            leftHelper: 'Некорректный email',
+            required: true,
+            requiredPlacement: 'right',
+        });
+        expectTypeOf<TextFieldProps>({
+            label: 'Tags',
+            enumerationType: 'chip',
+            chips: ['tag1', 'tag2'],
+            onChangeChips: (values) => {},
+        });
+        expectTypeOf<TextFieldProps>({
+            label: 'С подсказкой',
+            hintText: 'Это подсказка',
+            hintTrigger: 'hover',
+            hintView: 'default',
+            hintSize: 's',
+        });
+        expectTypeOf<TextFieldProps>({
+            label: 'Clear',
+            appearance: 'clear',
+            clear: true,
+            hasDivider: true,
+        });
+        expectTypeOf<TextFieldProps>({
+            textBefore: '$',
+            textAfter: 'USD',
+            placeholder: '0.00',
+        });
+    });
+});
+
+describe('Examples', () => {
+    it('Basic', () => {
+        () => {
+            const [value, setValue] = useState('');
+
+            return (
+                <TextField
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    label="Имя"
+                    placeholder="Введите имя"
+                    leftHelper="Обязательное поле"
+                />
+            );
+        };
+    });
+
+    it('With chips', () => {
+        () => {
+            const [chips, setChips] = useState<Array<string | number | boolean>>(['tag1', 'tag2']);
+
+            return (
+                <TextField
+                    label="Tags"
+                    enumerationType="chip"
+                    chips={chips}
+                    onChangeChips={setChips}
+                    chipType="default"
+                />
+            );
+        };
+    });
+
+    it('With hint', () => {
+        () => {
+            return (
+                <TextField
+                    label="С подсказкой"
+                    hintText="Это подсказка"
+                    hintTrigger="hover"
+                    hintView="default"
+                    hintSize="s"
+                    hintHasArrow
+                    placeholder="Введите значение"
+                />
+            );
+        };
+    });
+
+    it('Clear appearance', () => {
+        () => {
+            return <TextField label="Clear" appearance="clear" clear hasDivider placeholder="Введите значение" />;
+        };
+    });
+
+    it('With text decorations', () => {
+        () => {
+            return <TextField textBefore="$" textAfter="USD" placeholder="0.00" label="Сумма" />;
+        };
+    });
+
+    it('Disabled and readOnly', () => {
+        () => {
+            return (
+                <>
+                    <TextField label="Disabled" disabled value="Нельзя редактировать" />
+                    <TextField label="ReadOnly" readOnly value="Только чтение" />
+                </>
+            );
+        };
+    });
+
+    it('With onSearch', () => {
+        () => {
+            return (
+                <TextField
+                    label="Поиск"
+                    placeholder="Введите запрос"
+                    onSearch={(value) => {
+                        console.log(value);
+                    }}
+                />
+            );
+        };
+    });
+});

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "ESNext",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "jsx": "react",
+        "declaration": true,
+        "sourceMap": true,
+        "importHelpers": false,
+        "typeRoots": ["node_modules/@types"],
+
+        /* Strict Type-Checking Options */
+        "strict": true,
+        "noImplicitAny": false,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "strictBindCallApply": true,
+        "strictPropertyInitialization": true,
+        "noImplicitThis": true,
+        "alwaysStrict": true,
+        "isolatedModules": true,
+
+        /* Additional Checks */
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+
+        /* Module Resolution Options */
+        "moduleResolution": "bundler",
+        "esModuleInterop": true,
+
+        /* Advanced Options */
+        "skipLibCheck": true,
+        "skipDefaultLibCheck": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": ["./src", "./tests"],
+    "exclude": ["node_modules/*"]
+}

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        typecheck: {
+            enabled: true,
+            only: true,
+            include: ['./tests/**/*'],
+            ignoreSourceErrors: true,
+        },
+    },
+});