@salutejs/sdds-api-tests 0.7.0-next-platform-ai.0 → 0.8.0-dev.0

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

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import type { ComponentProps, ReactNode, CSSProperties, AriaRole } from 'react';
+import { describe, it } from 'node:test';
+import { expectTypeOf } from 'expect-type';
+import { InformationWrapper } from '@salutejs/plasma-b2c';
+
+type InformationWrapperProps = ComponentProps<typeof InformationWrapper>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        // Layout
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('children').toEqualTypeOf<ReactNode>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('labelPlacement')
+            .toEqualTypeOf<'top' | 'left' | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('labelHtmlFor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('titleCaption').toEqualTypeOf<ReactNode>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('leftHelper').toEqualTypeOf<ReactNode>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('rightHelper').toEqualTypeOf<ReactNode>();
+
+        // Form-related
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('hasRequiredIndicator')
+            .toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('requiredIndicatorPlacement')
+            .toEqualTypeOf<'right' | 'left' | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('optional').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('optionalText').toEqualTypeOf<string | undefined>();
+
+        // State
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('disabled').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('readOnly').toEqualTypeOf<boolean | undefined>();
+
+        // Hint
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('hintText').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('hintTrigger')
+            .toEqualTypeOf<'hover' | 'click' | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('hintOpened').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('hintTargetIcon').toEqualTypeOf<ReactNode>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('hintHasArrow').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('hintOffset')
+            .toEqualTypeOf<[number, number] | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('hintWidth').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('hintContentLeft').toEqualTypeOf<ReactNode>();
+    });
+
+    it('Variations', () => {
+        type View = NonNullable<InformationWrapperProps['view']>;
+        expectTypeOf<View>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<View>();
+
+        type Size = NonNullable<InformationWrapperProps['size']>;
+        expectTypeOf<Size>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<Size>();
+
+        type HintView = NonNullable<InformationWrapperProps['hintView']>;
+        expectTypeOf<HintView>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<HintView>();
+
+        type HintSize = NonNullable<InformationWrapperProps['hintSize']>;
+        expectTypeOf<HintSize>().toExtend<string>();
+        expectTypeOf<string>().not.toExtend<HintSize>();
+    });
+
+    it('HTMLDivElement', () => {
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<InformationWrapperProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('onClick')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('onMouseEnter')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+        expectTypeOf<InformationWrapperProps>()
+            .toHaveProperty('onMouseLeave')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+    });
+});
+
+describe('Unions', () => {
+    it('HintProps', () => {
+        // Valid: with hintText, all hint-related props are available
+        expectTypeOf<InformationWrapperProps>({ hintText: 'Текст подсказки' });
+        expectTypeOf<InformationWrapperProps>({
+            hintText: 'Текст подсказки',
+            hintTrigger: 'hover',
+            hintHasArrow: true,
+            hintWidth: '10rem',
+        });
+
+        // Valid: without any hint props
+        expectTypeOf<InformationWrapperProps>({ label: 'Лейбл' });
+
+        // Неправильная работа юниона HintProps. Должна быть ошибка при передаче hint-пропсов без hintText.
+        // @ts-expect-error
+        expectTypeOf<InformationWrapperProps>({ hintTrigger: 'hover' });
+    });
+});
+
+describe('Examples', () => {
+    it('Basic', () => {
+        () => {
+            return (
+                <InformationWrapper label="Лейбл" labelPlacement="top">
+                    <div />
+                </InformationWrapper>
+            );
+        };
+    });
+
+    it('With hint', () => {
+        () => {
+            return (
+                <InformationWrapper
+                    label="Лейбл"
+                    titleCaption="Подпись к полю"
+                    leftHelper="Подсказка слева"
+                    rightHelper="Подсказка справа"
+                    hintText="Текст подсказки"
+                    hintTrigger="hover"
+                    hintHasArrow
+                    hintWidth="10rem"
+                >
+                    <div />
+                </InformationWrapper>
+            );
+        };
+    });
+
+    it('Required indicator', () => {
+        () => {
+            return (
+                <InformationWrapper
+                    label="Лейбл"
+                    hasRequiredIndicator
+                    requiredIndicatorPlacement="right"
+                    labelPlacement="top"
+                >
+                    <div />
+                </InformationWrapper>
+            );
+        };
+    });
+
+    it('Optional', () => {
+        () => {
+            return (
+                <InformationWrapper label="Лейбл" optional optionalText="опционально">
+                    <div />
+                </InformationWrapper>
+            );
+        };
+    });
+
+    it('Disabled', () => {
+        () => {
+            return (
+                <InformationWrapper label="Лейбл" disabled>
+                    <div />
+                </InformationWrapper>
+            );
+        };
+    });
+});

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

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import type { ComponentProps, ReactNode, CSSProperties, AriaRole, RefObject, SyntheticEvent, Ref } from 'react';
+import { describe, it } from 'node:test';
+import { expectTypeOf } from 'expect-type';
+import { Popover } from '@salutejs/plasma-b2c';
+import type { PopoverPlacement, PopoverTrigger } from '@salutejs/plasma-b2c';
+
+type PopoverProps = ComponentProps<typeof Popover>;
+
+describe('Basics', () => {
+    it('Common', () => {
+        // layout
+        expectTypeOf<PopoverProps>().toHaveProperty('target').toEqualTypeOf<ReactNode | Ref<HTMLElement> | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('offset').toEqualTypeOf<[number, number] | undefined>();
+        expectTypeOf<PopoverProps>()
+            .toHaveProperty('frame')
+            .toEqualTypeOf<string | RefObject<HTMLElement> | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('hasArrow').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('zIndex').toEqualTypeOf<string | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('preventOverflow').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('usePortal').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('animated').toEqualTypeOf<boolean | undefined>();
+
+        // state / behaviour
+        expectTypeOf<PopoverProps>().toHaveProperty('opened').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('trigger').toEqualTypeOf<PopoverTrigger | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('isFocusTrapped').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('closeOnEsc').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('closeOnOverlayClick').toEqualTypeOf<boolean | undefined>();
+
+        // content slots
+        expectTypeOf<PopoverProps>().toHaveProperty('children').toEqualTypeOf<ReactNode>();
+
+        // callbacks
+        expectTypeOf<PopoverProps>()
+            .toHaveProperty('onToggle')
+            .toEqualTypeOf<((isOpen: boolean, event: SyntheticEvent | Event) => void) | undefined>();
+    });
+
+    it('Placement', () => {
+        type PlacementProp = NonNullable<PopoverProps['placement']>;
+        expectTypeOf<PlacementProp>().toExtend<string | readonly string[]>();
+        expectTypeOf<string>().not.toExtend<PlacementProp>();
+
+        // accepts known placement values
+        expectTypeOf<PopoverProps>({ placement: 'top' as PopoverPlacement });
+        expectTypeOf<PopoverProps>({ placement: 'bottom-start' as PopoverPlacement });
+    });
+
+    it('HTMLDivElement', () => {
+        expectTypeOf<PopoverProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+        expectTypeOf<PopoverProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<PopoverProps>()
+            .toHaveProperty('onClick')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+        expectTypeOf<PopoverProps>()
+            .toHaveProperty('onMouseEnter')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+        expectTypeOf<PopoverProps>()
+            .toHaveProperty('onMouseLeave')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+    });
+});
+
+describe('Resizable', () => {
+    it('resizable prop accepts boolean', () => {
+        expectTypeOf<PopoverProps>({ resizable: true });
+        expectTypeOf<PopoverProps>({ resizable: false });
+    });
+
+    it('resizable prop accepts config object', () => {
+        expectTypeOf<PopoverProps>({
+            resizable: {
+                disabled: false,
+                directions: ['bottom-right'],
+                defaultSize: { width: 200, height: 100 },
+                minWidth: 100,
+                minHeight: 50,
+                maxWidth: 600,
+                maxHeight: 400,
+                iconSize: 's',
+                hiddenIcons: ['top-left'],
+            },
+        });
+    });
+
+    it('iconSize is narrowed', () => {
+        type ResizableObj = Extract<NonNullable<PopoverProps['resizable']>, object>;
+        expectTypeOf<ResizableObj>().toHaveProperty('iconSize').toEqualTypeOf<'xs' | 's' | 'm' | undefined>();
+    });
+});
+
+describe('Examples', () => {
+    it('Click trigger', () => {
+        () => {
+            const [isOpen, setIsOpen] = useState(false);
+            return (
+                <Popover
+                    opened={isOpen}
+                    onToggle={(is) => setIsOpen(is)}
+                    trigger="click"
+                    placement="bottom"
+                    hasArrow
+                    target={<button type="button">Open</button>}
+                >
+                    <div>Content</div>
+                </Popover>
+            );
+        };
+    });
+
+    it('Hover trigger with offset', () => {
+        () => {
+            const [isOpen, setIsOpen] = useState(false);
+            return (
+                <Popover
+                    opened={isOpen}
+                    onToggle={(is) => setIsOpen(is)}
+                    trigger="hover"
+                    placement="top"
+                    offset={[0, 8]}
+                    closeOnEsc={false}
+                    isFocusTrapped={false}
+                >
+                    Content
+                </Popover>
+            );
+        };
+    });
+
+    it('Resizable', () => {
+        () => {
+            const [isOpen, setIsOpen] = useState(false);
+            return (
+                <Popover
+                    opened={isOpen}
+                    onToggle={(is) => setIsOpen(is)}
+                    trigger="click"
+                    resizable={{ disabled: false, directions: ['bottom-right'], iconSize: 's' }}
+                    onResizeStart={() => {}}
+                    onResizeEnd={() => {}}
+                >
+                    Content
+                </Popover>
+            );
+        };
+    });
+
+    it('Overlay click and frame', () => {
+        () => {
+            const [isOpen, setIsOpen] = useState(false);
+            const ref = React.useRef<HTMLDivElement>(null);
+            return (
+                <div ref={ref}>
+                    <Popover
+                        opened={isOpen}
+                        onToggle={(is) => setIsOpen(is)}
+                        trigger="click"
+                        closeOnOverlayClick
+                        frame={ref}
+                        animated
+                    >
+                        Content
+                    </Popover>
+                </div>
+            );
+        };
+    });
+});

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

@@ -9,7 +9,7 @@ import type {
     RefObject,
 } from 'react';
 import { useRef, useState } from 'react';
-import { describe, it } from 'vitest';
+import { describe, it } from 'node:test';
 import { expectTypeOf } from 'expect-type';
 import { Controller, useForm } from 'react-hook-form';
 import { Button, Cell, Select } from '@salutejs/plasma-b2c';
@@ -51,7 +51,7 @@ describe('Basics', () => {
         expectTypeOf<SelectProps>().toHaveProperty('listWidth').toEqualTypeOf<CSSProperties['width'] | undefined>();
         expectTypeOf<SelectProps>()
             .toHaveProperty('portal')
-            .toEqualTypeOf<string | RefObject<HTMLElement> | undefined>();
+            .toEqualTypeOf<string | RefObject<HTMLElement | null> | undefined>();
         expectTypeOf<SelectProps>()
             .toHaveProperty('renderValue')
             .toEqualTypeOf<((item: ItemOption) => string) | undefined>();

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

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import type { ComponentProps, CSSProperties, AriaRole } from 'react';
+import { describe, it } from 'node:test';
+import { expectTypeOf } from 'expect-type';
+import { LineSkeleton, RectSkeleton, TextSkeleton, withSkeleton } from '@salutejs/plasma-b2c';
+import type { WithSkeletonProps } from '@salutejs/plasma-b2c';
+
+type LineSkeletonProps = ComponentProps<typeof LineSkeleton>;
+type RectSkeletonProps = ComponentProps<typeof RectSkeleton>;
+type TextSkeletonProps = ComponentProps<typeof TextSkeleton>;
+
+describe('LineSkeleton', () => {
+    it('Common', () => {
+        expectTypeOf<LineSkeletonProps>()
+            .toHaveProperty('animationType')
+            .toEqualTypeOf<'shimmer' | 'pulse' | undefined>();
+        expectTypeOf<LineSkeletonProps>()
+            .toHaveProperty('roundness')
+            .toEqualTypeOf<0 | 4 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250 | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('lighter').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('customGradientColor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('customFadeInColor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('customFadeOutColor').toEqualTypeOf<string | undefined>();
+    });
+
+    it('HTMLDivElement', () => {
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<LineSkeletonProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+        expectTypeOf<LineSkeletonProps>()
+            .toHaveProperty('onClick')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+    });
+});
+
+describe('RectSkeleton', () => {
+    it('Common', () => {
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('width').toEqualTypeOf<string | number>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('height').toEqualTypeOf<string | number>();
+        expectTypeOf<RectSkeletonProps>()
+            .toHaveProperty('animationType')
+            .toEqualTypeOf<'shimmer' | 'pulse' | undefined>();
+        expectTypeOf<RectSkeletonProps>()
+            .toHaveProperty('roundness')
+            .toEqualTypeOf<0 | 4 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250 | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('lighter').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('customGradientColor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('customFadeInColor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('customFadeOutColor').toEqualTypeOf<string | undefined>();
+    });
+
+    it('HTMLDivElement', () => {
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<RectSkeletonProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+        expectTypeOf<RectSkeletonProps>()
+            .toHaveProperty('onClick')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+    });
+});
+
+describe('TextSkeleton', () => {
+    it('Common', () => {
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('lines').toEqualTypeOf<number>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('width').toEqualTypeOf<string | number | undefined>();
+        expectTypeOf<TextSkeletonProps>()
+            .toHaveProperty('animationType')
+            .toEqualTypeOf<'shimmer' | 'pulse' | undefined>();
+        expectTypeOf<TextSkeletonProps>()
+            .toHaveProperty('roundness')
+            .toEqualTypeOf<0 | 4 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250 | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('lighter').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('customGradientColor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('customFadeInColor').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('customFadeOutColor').toEqualTypeOf<string | undefined>();
+    });
+
+    it('HTMLDivElement', () => {
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<TextSkeletonProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+        expectTypeOf<TextSkeletonProps>()
+            .toHaveProperty('onClick')
+            .toEqualTypeOf<React.MouseEventHandler<HTMLDivElement> | undefined>();
+    });
+});
+
+describe('withSkeleton', () => {
+    it('Common', () => {
+        expectTypeOf<WithSkeletonProps>().toHaveProperty('skeleton').toEqualTypeOf<boolean | undefined>();
+        expectTypeOf<WithSkeletonProps>()
+            .toHaveProperty('animationConfig')
+            .toEqualTypeOf<
+                | { type: 'shimmer'; lighter?: boolean; customGradientColor?: string }
+                | { type: 'pulse'; customFadeInColor?: string; customFadeOutColor?: string }
+                | undefined
+            >();
+    });
+
+    it('HTMLElement', () => {
+        expectTypeOf<WithSkeletonProps>().toHaveProperty('id').toEqualTypeOf<string | undefined>();
+        expectTypeOf<WithSkeletonProps>().toHaveProperty('className').toEqualTypeOf<string | undefined>();
+        expectTypeOf<WithSkeletonProps>().toHaveProperty('style').toEqualTypeOf<CSSProperties | undefined>();
+        expectTypeOf<WithSkeletonProps>().toHaveProperty('aria-label').toEqualTypeOf<string | undefined>();
+        expectTypeOf<WithSkeletonProps>().toHaveProperty('role').toEqualTypeOf<AriaRole | undefined>();
+    });
+});
+
+describe('Unions', () => {
+    it('AnimationConfig', () => {
+        // shimmer — valid combinations
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'shimmer' } });
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'shimmer', lighter: true } });
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'shimmer', customGradientColor: '#fff' } });
+
+        // pulse — valid combinations
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'pulse' } });
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'pulse', customFadeInColor: '#f00' } });
+        expectTypeOf<WithSkeletonProps>({
+            animationConfig: { type: 'pulse', customFadeInColor: '#f00', customFadeOutColor: '#0f0' },
+        });
+
+        // shimmer with pulse-only field
+        // @ts-expect-error
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'shimmer', customFadeInColor: '#f00' } });
+
+        // pulse with shimmer-only field
+        // @ts-expect-error
+        expectTypeOf<WithSkeletonProps>({ animationConfig: { type: 'pulse', lighter: true } });
+    });
+});
+
+describe('Examples', () => {
+    it('LineSkeleton', () => {
+        () => {
+            return (
+                <>
+                    <LineSkeleton size="bodyM" />
+                    <LineSkeleton size="h3" animationType="shimmer" roundness={16} />
+                    <LineSkeleton
+                        size="h3"
+                        animationType="pulse"
+                        customFadeInColor="#e0e0e0"
+                        customFadeOutColor="#f5f5f5"
+                    />
+                    <LineSkeleton
+                        size="bodyS"
+                        lighter
+                        customGradientColor="linear-gradient(90deg, #eee 0%, #fff 50%, #eee 100%)"
+                    />
+                </>
+            );
+        };
+    });
+
+    it('RectSkeleton', () => {
+        () => {
+            return (
+                <>
+                    <RectSkeleton width="12rem" height="8rem" />
+                    <RectSkeleton width={128} height={128} roundness={8} />
+                    <RectSkeleton width="4rem" height="4rem" animationType="pulse" />
+                </>
+            );
+        };
+    });
+
+    it('TextSkeleton', () => {
+        () => {
+            return (
+                <>
+                    <TextSkeleton lines={3} size="bodyM" />
+                    <TextSkeleton lines={5} size="textM" width={50} />
+                    <TextSkeleton lines={3} animationType="shimmer" customGradientColor="linear-gradient()" />
+                </>
+            );
+        };
+    });
+
+    it('withSkeleton shimmer', () => {
+        () => {
+            const DivSkeleton = withSkeleton(
+                React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+                    <div ref={ref} {...props} />
+                )),
+            );
+            return (
+                <DivSkeleton
+                    skeleton
+                    animationConfig={{
+                        type: 'shimmer',
+                        customGradientColor: 'linear-gradient(90deg, #eee, #fff, #eee)',
+                    }}
+                />
+            );
+        };
+    });
+
+    it('withSkeleton pulse', () => {
+        () => {
+            const DivSkeleton = withSkeleton(
+                React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+                    <div ref={ref} {...props} />
+                )),
+            );
+            return (
+                <DivSkeleton
+                    skeleton
+                    animationConfig={{ type: 'pulse', customFadeInColor: '#e0e0e0', customFadeOutColor: '#f5f5f5' }}
+                />
+            );
+        };
+    });
+});

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

@@ -1,7 +1,7 @@
 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 { describe, it } from 'node:test';
 import { expectTypeOf } from 'expect-type';
 import { TextField } from '@salutejs/plasma-b2c';
 

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

@@ -1,6 +1,6 @@
 import React, { createRef } from 'react';
 import type { ComponentProps } from 'react';
-import { describe, it } from 'vitest';
+import { describe, it } from 'node:test';
 import { expectTypeOf } from 'expect-type';
 import { TextL } from '@salutejs/plasma-b2c';
 

package/tsconfig.json

@@ -8,6 +8,7 @@
         "sourceMap": true,
         "importHelpers": false,
         "typeRoots": ["node_modules/@types"],
+        "types": ["node"],
 
         /* Strict Type-Checking Options */
         "strict": true,

package/tsconfig.typecheck.json

@@ -0,0 +1,4 @@
+{
+    "extends": "./tsconfig.json",
+    "include": ["./tests"]
+}

package/vitest.config.ts

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