kamotive_ui 2.3.26 → 3.6.26

package/dist/components/FileLoader/FileLoader.js

@@ -5,11 +5,105 @@ import { Typography } from '../Typography/Typography';
 import { IconUpload } from '../../Icons';
 import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
+const getFileNameWithoutExtension = (filename) => {
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === 0 || lastDotIndex === filename.length - 1) {
+        return filename;
+    }
+    return filename.substring(0, lastDotIndex);
+};
+const getFileExtension = (filename) => {
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
+        return '';
+    }
+    return filename.substring(lastDotIndex).toLowerCase();
+};
+// Функция для получения всех доступных форматов в виде строки
+const getAcceptedFormatsString = (acceptedFormats) => {
+    const uniqueFormats = new Set();
+    for (const key in acceptedFormats) {
+        if (acceptedFormats.hasOwnProperty(key)) {
+            acceptedFormats[key].forEach((format) => {
+                uniqueFormats.add(format.replace('.', ''));
+            });
+        }
+    }
+    return Array.from(uniqueFormats).join(', ');
+};
+const fileValidatorInner = (file, maxFileSize, maxFileCount, maxFileName, addedFilesLength, lng, acceptedFormats, rejectedFormats, fileValidator) => {
+    const fileExtension = getFileExtension(file.name);
+    const fileNameWithoutExt = getFileNameWithoutExtension(file.name);
+    const nameLength = Array.from(fileNameWithoutExt).length;
+    const fileParts = file.name.split('.');
+    const fileExt = fileParts.length > 1 ? `.${fileParts.pop().toLowerCase()}` : '';
+    const checks = {
+        isSizeTooLarge: file.size > maxFileSize * 1024 * 1024 * 1024,
+        isTooManyFiles: addedFilesLength > maxFileCount - 1,
+        isNameTooLarge: typeof maxFileName === 'number' && maxFileName > 0 && nameLength > maxFileName,
+        isAcceptedFormatValid: true,
+        isRejectedFormatValid: true
+    };
+    // Проверка форматов
+    if (acceptedFormats && !rejectedFormats) {
+        const acceptedExtensions = Object.values(acceptedFormats).reduce((acc, val) => acc.concat(val), []);
+        checks.isAcceptedFormatValid = acceptedExtensions.includes(fileExtension);
+    }
+    if (rejectedFormats) {
+        const rejectedExtensions = Object.values(rejectedFormats).reduce((acc, val) => acc.concat(val), []);
+        checks.isRejectedFormatValid = !rejectedExtensions.includes(fileExt);
+    }
+    switch (true) {
+        case checks.isSizeTooLarge:
+            return {
+                code: 'size-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`
+                    : `Maximum file size ${maxFileSize.toFixed(0)} GB`,
+            };
+        case checks.isTooManyFiles:
+            return {
+                code: 'files-count-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Максимальное количество файлов ${maxFileCount}`
+                    : `Maximum number of files ${maxFileCount}`,
+            };
+        case checks.isNameTooLarge:
+            return {
+                code: 'name-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Имя файла не может превышать ${maxFileName} символов.`
+                    : `File name must be under ${maxFileName} symbols.`,
+            };
+        case !checks.isAcceptedFormatValid:
+            return {
+                code: 'file-invalid-type',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Файл должен быть одного из следующих типов: ${Object.values(acceptedFormats).reduce((acc, val) => acc.concat(val), []).join(', ')}`
+                    : `File must be one of: ${Object.values(acceptedFormats).reduce((acc, val) => acc.concat(val), []).join(', ')}`,
+            };
+        case !checks.isRejectedFormatValid:
+            return {
+                code: 'file-invalid-type',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Файл не должен быть одного из следующих типов: ${getAcceptedFormatsString(rejectedFormats)}`
+                    : `File must not be one of: ${getAcceptedFormatsString(rejectedFormats)}`,
+            };
+        default: {
+            if (fileValidator) {
+                const customValidationResult = fileValidator(file);
+                if (customValidationResult)
+                    return customValidationResult;
+            }
+            return null;
+        }
+    }
+};
 export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxFileName = 0, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx', '.log', '.syslog', '.txt'],
-}, rejectedFormats, addedFiles, setAddedFiles, canAdd = true, lng = 'ru', className, style, fileValidator }, ref) => {
+}, rejectedFormats, addedFiles, setAddedFiles, canAdd = true, lng = 'ru', className, style, fileValidator, testId = 'default' }, ref) => {
     const [isLoadingFiles, setIsLoadingFiles] = useState(false);
     const [loadingFilesNames, setLoadingFilesNames] = useState([]);
     const [errorFiles, setErrorFiles] = useState([]);
@@ -25,92 +119,15 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
             setLoadingFilesNames([]);
         }
     }));
-    const fileValidatorInner = (file) => {
-        if (file.size > maxFileSize * 1024 * 1024 * 1024) {
-            return {
-                code: 'size-too-large',
-                message: lng === 'ru' || lng.includes('ru')
-                    ? `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`
-                    : `Maximum file size ${maxFileSize.toFixed(0)} GB`,
-            };
-        }
-        // Проверка на дубликаты в filesList
-        // if (filesList.find((existingFile: TAttachments) => existingFile.filename === file.name)) {
-        //   return {
-        //     code: 'repeating-file-name',
-        //     message: lng === 'ru' || lng.includes('ru') ? `Файл уже существует в списке прикрепленных файлов` : `File already exists in the list of attached files`,
-        //   };
-        // }
-        // Проверка на дубликаты в addedFiles
-        // if (addedFiles.find((addedFile: File) => addedFile.name === file.name)) {
-        //   return {
-        //     code: 'repeating-file-name',
-        //     message: lng === 'ru' || lng.includes('ru') ? `Файл уже добавлен` : `File already added`,
-        //   };
-        // }
-        if (addedFiles.length > maxFileCount - 1) {
-            return {
-                code: 'files-count-too-large',
-                message: lng === 'ru' || lng.includes('ru') ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`,
-            };
-        }
-        if (maxFileName && file.name.length > maxFileName) {
-            return {
-                code: 'name-too-large',
-                message: lng === 'ru' || lng.includes('ru') ? `Имя файла не может превышать ${maxFileName} символов` : `File name must be under ${maxFileName} symbols`,
-            };
-        }
-        if (acceptedFormats && !rejectedFormats) {
-            const acceptedExtensions = Object.values(acceptedFormats)
-                .reduce((acc, val) => acc.concat(val), []);
-            const fileParts = file.name.split('.');
-            const fileExtension = fileParts.length > 1
-                ? `.${fileParts.pop().toLowerCase()}`
-                : '';
-            if (!acceptedExtensions.includes(fileExtension)) {
-                return {
-                    code: 'file-invalid-type',
-                    message: lng === 'ru' || lng.includes('ru')
-                        ? `Файл должен быть одного из следующих типов: ${acceptedExtensions.join(', ')}`
-                        : `File must be one of: ${acceptedExtensions.join(', ')}`,
-                };
-            }
-        }
-        if (rejectedFormats) {
-            const rejectedExtensions = Object.values(rejectedFormats)
-                .reduce((acc, val) => acc.concat(val), []);
-            const fileParts = file.name.split('.');
-            const fileExtension = fileParts.length > 1
-                ? `.${fileParts.pop().toLowerCase()}`
-                : '';
-            if (rejectedExtensions.includes(fileExtension)) {
-                return {
-                    code: 'file-invalid-type',
-                    message: lng === 'ru' || lng.includes('ru')
-                        ? `Файл не должен быть одного из следующих типов: ${getAcceptedFormatsString(rejectedFormats)}`
-                        : `File must not be one of: ${getAcceptedFormatsString(rejectedFormats)}`,
-                };
-            }
-        }
-        if (fileValidator) {
-            const customValidationResult = fileValidator(file);
-            if (customValidationResult) {
-                return customValidationResult;
-            }
-        }
-        return null;
-    };
     const { getRootProps, getInputProps } = useDropzone({
         onDrop: (acceptedFiles, fileRejections) => {
             setAddedFiles([...addedFiles, ...acceptedFiles]);
-            const newFormatAttachments = acceptedFiles.map((file) => {
-                return {
-                    id: `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
-                    filename: file.name,
-                    size: file.size,
-                    type: file.type,
-                };
-            });
+            const newFormatAttachments = acceptedFiles.map((file) => ({
+                id: `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+                filename: file.name,
+                size: file.size,
+                type: file.type,
+            }));
             setLoadingFilesNames(newFormatAttachments.map((file) => { var _a; return (_a = file === null || file === void 0 ? void 0 : file.filename) !== null && _a !== void 0 ? _a : 'Без названия'; }));
             setIsLoadingFiles(true);
             setAddedFilesFormatted([...addedFilesFormated, ...newFormatAttachments]);
@@ -160,7 +177,7 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
                 setErrorFiles([...errorFiles, ...formattedRejections]);
             }
         },
-        validator: fileValidatorInner,
+        validator: (file) => fileValidatorInner(file, maxFileSize, maxFileCount, maxFileName, addedFiles.length, lng, acceptedFormats, rejectedFormats, fileValidator),
         accept: undefined,
         maxFiles: maxFileCount,
         disabled: !canAdd,
@@ -176,27 +193,11 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
             setLoadingFilesNames(loadingFilesNames.filter((name) => name !== fileToDelete.filename));
         }
     };
-    const acceptedFileItems = addedFilesFormated.map((file) => {
-        return (React.createElement(FileItem, { key: file.id, file: file, 
-            //loading={loadingFilesNames.includes(file.filename)} // Показываем лоадер только для новых файлов
-            onDelete: handleDeleteFiles, isAddedFile: true, lng: lng }));
-    });
     const handleDeleteRejectedFile = (id) => {
         setErrorFiles(errorFiles.filter((rejection) => rejection.file.id !== id));
     };
-    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(FileItem, { key: file.id, file: file, error: errors[0].message, onDelete: handleDeleteRejectedFile, isRejectedFile: true, lng: lng })));
-    // Функция для получения всех доступных форматов в виде строки
-    const getAcceptedFormatsString = (acceptedFormats) => {
-        const uniqueFormats = new Set();
-        for (const key in acceptedFormats) {
-            if (acceptedFormats.hasOwnProperty(key)) {
-                acceptedFormats[key].forEach((format) => {
-                    uniqueFormats.add(format.replace('.', ''));
-                });
-            }
-        }
-        return Array.from(uniqueFormats).join(', ');
-    };
+    const acceptedFileItems = addedFilesFormated.map((file, index) => (React.createElement(FileItem, { key: file.id, file: file, onDelete: handleDeleteFiles, isAddedFile: true, lng: lng, testId: `${testId}-dropzone-accepted-${index}` })));
+    const fileRejectionItems = errorFiles.map(({ file, errors }, index) => (React.createElement(FileItem, { key: file.id, file: file, error: errors[0].message, onDelete: handleDeleteRejectedFile, isRejectedFile: true, lng: lng, testId: `${testId}-dropzone-rejected-${index}` })));
     useEffect(() => {
         if (addedFiles.length === 0) {
             setAddedFilesFormatted([]);
@@ -207,31 +208,30 @@ export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, maxF
             setIsLoadingFiles(false);
         }
     }, [loadingFilesNames, isLoadingFiles]);
-    return (React.createElement("section", { className: classNames(styles['fileLoader'], className), style: style },
-        React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${!canAdd ? styles['disabled'] : ''}` })),
-            React.createElement("input", Object.assign({}, getInputProps())),
-            React.createElement(IconUpload, { htmlColor: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', width: '34', height: '34' }),
-            React.createElement(Typography, { variant: "Body1", color: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', style: { textAlign: 'center' } }, lng === 'ru' || lng.includes('ru') ? (React.createElement(React.Fragment, null,
+    return (React.createElement("section", { className: classNames(styles['fileLoader'], className), style: style, "data-test-id": `${testId}-loader-section` },
+        React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${!canAdd ? styles['disabled'] : ''}` }), { "data-test-id": `${testId}-dropzone-block` }),
+            React.createElement("input", Object.assign({}, getInputProps(), { "data-test-id": `${testId}-dropzone-input`, name: 'file' })),
+            React.createElement("span", { "data-test-id": `${testId}-dropzone-upload-icon`, style: { display: 'inline-flex' } },
+                React.createElement(IconUpload, { htmlColor: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', width: '34', height: '34' })),
+            React.createElement(Typography, { variant: "Body1", color: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', style: { textAlign: 'center' }, testId: `${testId}-dropzone` }, lng === 'ru' || lng.includes('ru') ? (React.createElement(React.Fragment, null,
                 React.createElement("span", { style: { textDecoration: 'underline' } }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043D\u0430 \u043E\u0431\u043B\u0430\u0441\u0442\u044C"),
-                " ",
                 React.createElement("span", null, " \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"))) : (React.createElement(React.Fragment, null,
-                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u0421lick on this area"),
-                " ",
-                React.createElement("span", null, "or drag files here")))),
+                React.createElement("span", { style: { textDecoration: 'underline' } }, "Click on this area"),
+                React.createElement("span", null, " or drag files here")))),
             React.createElement("div", null,
                 maxFileSize &&
-                    (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" },
+                    (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)", testId: `${testId}-dropzone-sizelimits` },
                         `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
                         " ",
-                        React.createElement("br", null))) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" },
+                        React.createElement("br", null))) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)", testId: `${testId}-dropzone-sizelimits` },
                         `Maximum file size ${maxFileSize.toFixed(0)} GB`,
                         " ",
                         React.createElement("br", null)))),
                 maxFileCount &&
-                    (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `You can upload ${maxFileCount} ${maxFileCount > 1 ? `files` : `file`}`))))),
-        acceptedFormats && !rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `${lng === 'ru' || lng.includes('ru') ? 'Поддерживаемые форматы:' : 'Supported formats:'} ${getAcceptedFormatsString(acceptedFormats)}`)),
-        rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `${lng === 'ru' || lng.includes('ru') ? 'Неподдерживаемые форматы:' : 'Unsupported formats:'} ${getAcceptedFormatsString(rejectedFormats)}`)),
-        (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
+                    (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)", testId: `${testId}-dropzone-countlimits` }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)", testId: `${testId}-dropzone-countlimits` }, `You can upload ${maxFileCount} ${maxFileCount > 1 ? `files` : `file`}`))))),
+        acceptedFormats && !rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)", testId: `${testId}-dropzone-acceptformats` }, `${lng === 'ru' || lng.includes('ru') ? 'Поддерживаемые форматы:' : 'Supported formats:'} ${getAcceptedFormatsString(acceptedFormats)}`)),
+        rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)", testId: `${testId}-dropzone-rejectformats` }, `${lng === 'ru' || lng.includes('ru') ? 'Неподдерживаемые форматы:' : 'Unsupported formats:'} ${getAcceptedFormatsString(rejectedFormats)}`)),
+        (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'], "data-test-id": `${testId}-dropzone-added-list` },
             acceptedFileItems,
-            fileRejectionItems)) : lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "Files not added"))));
+            fileRejectionItems)) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' }, testId: `${testId}-dropzone-empty` }, lng === 'ru' || lng.includes('ru') ? 'Файлы не добавлены' : 'Files not added'))));
 });

package/dist/components/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styles from './IconButton.module.css';
-export const IconButton = forwardRef(({ icon, size = 'md', color, style, disabled = false, onClick, children, className, title, }, ref) => {
+export const IconButton = forwardRef(({ icon, size = 'md', color, style, disabled = false, onClick, children, className, title, testId = 'default' }, ref) => {
     const validChildren = React.Children.toArray(children).filter((child) => React.isValidElement(child));
     const renderIcon = icon || validChildren[0];
     const combinedStyle = Object.assign(Object.assign(Object.assign({}, style), ((style === null || style === void 0 ? void 0 : style.backgroundColor) && {
@@ -9,7 +9,10 @@ export const IconButton = forwardRef(({ icon, size = 'md', color, style, disable
     })), ((style === null || style === void 0 ? void 0 : style.borderRadius) && {
         '--hover-border-radius': style.borderRadius,
     }));
-    return (React.createElement("button", { ref: ref, className: classNames(styles['iconButton'], styles[`iconButton--${size}`], className), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: (e) => onClick(e), style: combinedStyle, title: title }, renderIcon &&
+    const iconSlug = title
+        ? String(title).toLowerCase().trim().replace(/\s+/g, '-')
+        : 'action';
+    return (React.createElement("button", { ref: ref, className: classNames(styles['iconButton'], styles[`iconButton--${size}`], className), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: (e) => onClick(e), style: combinedStyle, title: title, "data-test-id": `${testId}-${iconSlug}-button` }, renderIcon &&
         (() => {
             var _a;
             const iconElement = renderIcon;

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ import { Typography } from '../Typography/Typography';
 /**
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */
-export const Input = ({ id, label, placeholder, size = 'lg', value, style, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, }) => {
+export const Input = ({ id, label, placeholder, size = 'lg', value, style, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, testId = 'default' }) => {
     const [inputLabel, setInputLabel] = useState(label);
     const handleChange = (event) => {
         event.stopPropagation();
@@ -43,9 +43,9 @@ export const Input = ({ id, label, placeholder, size = 'lg', value, style, class
         [styles['label--left']]: isLeftLabel,
         [styles['label--required']]: required,
     });
-    return (React.createElement("div", { className: wrapperClassess, style: style },
-        inputLabel && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, inputLabel)),
-        icon && React.createElement("div", { className: styles.icon }, icon),
-        multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, disabled: disabled, style: { height: `${rows * 20}px` } })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, disabled: disabled, readOnly: readOnly })),
-        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
+    return (React.createElement("div", { className: wrapperClassess, style: style, "data-test-id": `${testId}-input-block` },
+        inputLabel && (React.createElement(Typography, { variant: "Caption", className: labelClasses, testId: `${testId}-input` }, inputLabel)),
+        icon && React.createElement("div", { className: styles.icon, "data-test-id": `${testId}-input-icon` }, icon),
+        multiline ? (React.createElement("textarea", { id: id, name: 'textarea', className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, disabled: disabled, style: { height: `${rows * 20}px` }, "data-test-id": `${testId}-input-textarea` })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, disabled: disabled, readOnly: readOnly, "data-test-id": `${testId}-input-field` })),
+        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]), testId: `${testId}-input-error` }, helperText))));
 };

package/dist/components/Link/Link.js

@@ -4,7 +4,7 @@ import styles from './Link.module.css';
 import { Typography } from '../Typography/Typography';
 import { ETypographyVariants } from '../Typography/enums';
 import { Tooltip } from '../Tooltip/Tooltip';
-export const Link = ({ href, onClick, children, title, className, style, contentStyle, underline = 'hover', variant = ETypographyVariants.Body1, color = 'var(--text-dark)', maxWidth, size, widthInPixels, }) => {
+export const Link = ({ href, onClick, children, title, className, style, contentStyle, underline = 'hover', variant = ETypographyVariants.Body1, color = 'var(--text-dark)', maxWidth, size, widthInPixels, testId = 'default' }) => {
     const stylesUnderline = underline === 'hover' ? styles.linkHover : underline === 'none' ? styles.linkNone : '';
     const stylesTooltipWidth = maxWidth ? { maxWidth: maxWidth } : {};
     const textRef = useRef(null);
@@ -24,8 +24,8 @@ export const Link = ({ href, onClick, children, title, className, style, content
         const shouldShow = actualSize > widthInPixels;
         return shouldShow;
     }, [actualSize, widthInPixels, size]);
-    const linkContent = (React.createElement(Typography, { variant: variant, color: color, style: contentStyle }, children));
-    const link = onClick ? (React.createElement("div", { onClick: onClick, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth) },
+    const linkContent = (React.createElement(Typography, { variant: variant, color: color, style: contentStyle, testId: `${testId}-link` }, children));
+    const link = onClick ? (React.createElement("div", { onClick: onClick, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth), "data-test-id": `${testId}-link` },
         !size && (React.createElement("div", { ref: textRef, style: {
                 position: 'absolute',
                 visibility: 'hidden',
@@ -34,7 +34,7 @@ export const Link = ({ href, onClick, children, title, className, style, content
                 whiteSpace: 'nowrap',
                 pointerEvents: 'none',
             } }, linkContent)),
-        linkContent)) : (React.createElement("a", { href: href, title: title, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth) },
+        linkContent)) : (React.createElement("a", { href: href, title: title, className: classNames(styles.link, stylesUnderline, isTooltipVisible && styles.tooltipStyle, className), style: Object.assign(Object.assign({}, linkStyle), stylesTooltipWidth), "data-test-id": `${testId}-link` },
         !size && (React.createElement("div", { ref: textRef, style: {
                 position: 'absolute',
                 visibility: 'hidden',
@@ -44,5 +44,5 @@ export const Link = ({ href, onClick, children, title, className, style, content
                 pointerEvents: 'none',
             } }, linkContent)),
         linkContent));
-    return isTooltipVisible ? (React.createElement(Tooltip, { key: `${size}-${widthInPixels}`, label: children, opacity: 0.4, displayDelay: 0, style: { maxWidth: '500px' } }, link)) : (link);
+    return isTooltipVisible ? (React.createElement(Tooltip, { key: `${size}-${widthInPixels}`, label: children, opacity: 0.4, displayDelay: 0, style: { maxWidth: '500px' }, testId: `${testId}-link` }, link)) : (link);
 };

package/dist/components/List/List.js

@@ -6,7 +6,7 @@ import { Checkbox } from '../Checkbox/Checkbox';
 import { RadioButton } from '../RadioButton/RadioButton';
 import { ChevronDown } from '../../Icons';
 import { ListItem } from '../ListItem/ListItem';
-export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, id, style, className, collapsible = false, open = false, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, customItemBullet, bulletClassName, titleContent, children, isHeader = false, parentChecked = false, }) => {
+export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, id, style, className, collapsible = false, open = false, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, customItemBullet, bulletClassName, titleContent, children, isHeader = false, parentChecked = false, testId = 'default' }) => {
     const [isOpen, setIsOpen] = useState(open);
     const [isChecked, setIsChecked] = useState(checked || parentChecked);
     const childIds = [];
@@ -57,22 +57,24 @@ export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selecte
     }, [parentChecked, checked]);
     const headerClassNames = classNames(styles.header, className);
     const contentClassNames = classNames(styles.content, isOpen ? styles['content--expanded'] : styles['content--collapsed']);
-    return (React.createElement("div", { className: styles.collapsibleList },
-        label || titleContent && (React.createElement("div", { className: headerClassNames, onClick: handleClick, style: style },
+    return (React.createElement("div", { className: styles.collapsibleList, "data-test-id": `${testId}-list` },
+        label || titleContent && (React.createElement("div", { className: headerClassNames, onClick: handleClick, style: style, "data-test-id": `${testId}-list-header` },
             !isHeader && (React.createElement("div", null,
-                withCheckbox && (React.createElement("span", { onClick: handleCheckboxClick },
-                    React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
-                withRadioButton && (React.createElement("span", { onClick: handleRadioClick },
-                    React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled }))),
-                customBullet && React.createElement("span", { className: classNames(styles.bullet, bulletClassName) }, customBullet))),
-            label && React.createElement(Typography, { variant: "Body1" }, label),
+                withCheckbox && (React.createElement("span", { onClick: handleCheckboxClick, "data-test-id": `${testId}-list-chechbox-block` },
+                    React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled, testId: `${testId}-list` }))),
+                withRadioButton && (React.createElement("span", { onClick: handleRadioClick, "data-test-id": `${testId}-list-radio-block` },
+                    React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled, testId: `${testId}-list` }))),
+                customBullet && React.createElement("span", { className: classNames(styles.bullet, bulletClassName), "data-test-id": `${testId}-list-bullet` }, customBullet))),
+            label && React.createElement(Typography, { variant: "Body1", testId: `${testId}-list` }, label),
             titleContent,
-            collapsible && (React.createElement("span", { className: styles.indicator }, isOpen ? React.createElement(ChevronDown, null) : React.createElement(ChevronDown, { rotation: 270 }))))),
-        React.createElement("div", { className: collapsible ? contentClassNames : styles.content, style: { paddingLeft: !label ? 0 : '16px' } }, React.Children.map(children, (child) => {
+            collapsible && (React.createElement("span", { className: styles.indicator, "data-test-id": `${testId}-list-action-icon` }, isOpen ? React.createElement(ChevronDown, null) : React.createElement(ChevronDown, { rotation: 270 }))))),
+        React.createElement("div", { className: collapsible ? contentClassNames : styles.content, style: { paddingLeft: !label ? 0 : '16px' }, "data-test-id": `${testId}-list-content-block` }, React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
+                const childTestId = child.props.testId || `${testId}-list-${index}`;
                 const commonProps = {
                     style: child.props.style || style,
                     className: child.props.className,
+                    testId: childTestId,
                 };
                 if (child.type === ListItem || child.type === List) {
                     return React.cloneElement(child, Object.assign(Object.assign({}, commonProps), { bulletClassName: classNames(styles.bullet, child.props.bulletClassName || bulletClassName), customBullet: child.props.customBullet !== undefined

package/dist/components/ListItem/ListItem.js

@@ -4,7 +4,7 @@ import styles from './ListItem.module.css';
 import { Typography } from '../Typography/Typography';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { RadioButton } from '../RadioButton/RadioButton';
-export const ListItem = ({ id, onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, style, className, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, bulletClassName, children, parentChecked, }) => {
+export const ListItem = ({ id, onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, style, className, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, bulletClassName, children, parentChecked, testId = 'default' }) => {
     const [isChecked, setIsChecked] = useState(checked || parentChecked);
     const itemClassNames = classNames(className, styles.listItem);
     const handleClick = (e) => {
@@ -30,12 +30,12 @@ export const ListItem = ({ id, onClick, onCheck, onRadioSelect, checked = false,
     useEffect(() => {
         setIsChecked(parentChecked || checked);
     }, [parentChecked, checked]);
-    return (React.createElement("div", { className: itemClassNames, style: style, onClick: handleClick },
-        withCheckbox && (React.createElement("span", { className: styles.icon, onClick: handleCheckboxClick },
-            React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
-        withRadioButton && (React.createElement("span", { className: styles.icon, onClick: handleRadioClick },
-            React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled }))),
-        customBullet && React.createElement("span", { className: bulletClassName }, customBullet),
-        React.createElement(Typography, { variant: "Body1" }, label),
+    return (React.createElement("div", { className: itemClassNames, style: style, onClick: handleClick, "data-test-id": `${testId}-item-block` },
+        withCheckbox && (React.createElement("span", { className: styles.icon, onClick: handleCheckboxClick, "data-test-id": `${testId}-item-checkbox-block` },
+            React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled, testId: `${testId}-item` }))),
+        withRadioButton && (React.createElement("span", { className: styles.icon, onClick: handleRadioClick, "data-test-id": `${testId}-item-radio-block` },
+            React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled, testId: `${testId}-item` }))),
+        customBullet && React.createElement("span", { className: bulletClassName, "data-test-id": `${testId}-item-bullet` }, customBullet),
+        React.createElement(Typography, { variant: "Body1", testId: `${testId}-item` }, label),
         children));
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 /**
  * Компонент ProgressBar отображает прогресс в виде заполненной полосы.
  */
-export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = true, animated = false, animationDuration = 8000, setIsLoadingFinished, width, }) => {
+export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = true, animated = false, animationDuration = 8000, setIsLoadingFinished, width, testId = 'default' }) => {
     const [percent, setPercent] = useState(value);
     const validPercentage = Math.min(Math.max(value, 0), max);
     const progressBarClasses = classNames(styles['progress-bar'], styles[size], {
@@ -37,9 +37,9 @@ export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = tru
             setPercent(validPercentage);
         }
     }, [animated, validPercentage, setIsLoadingFinished, animationDuration]);
-    return (React.createElement("div", { className: styles['progress-bar--wrapper'] },
-        React.createElement("progress", { id: "linear-progress", className: progressBarClasses, value: percent, max: max, style: { width: width } }),
-        React.createElement("label", { htmlFor: "progress", className: styles['progress-bar-percentage'] }, showValue && (React.createElement(Typography, { variant: "Body1", color: '#9CA0A7', className: styles['progress-bar-percentage'] },
+    return (React.createElement("div", { className: styles['progress-bar--wrapper'], "data-test-id": `${testId}-progressbar` },
+        React.createElement("progress", { id: "linear-progress", className: progressBarClasses, value: percent, max: max, style: { width: width }, "data-test-id": `${testId}-progressbar-indicator` }),
+        React.createElement("label", { htmlFor: "progress", className: styles['progress-bar-percentage'], "data-test-id": `${testId}-progressbar-label` }, showValue && (React.createElement(Typography, { variant: "Body1", color: '#9CA0A7', className: styles['progress-bar-percentage'], testId: `${testId}-progressbar` },
             percent,
             "%")))));
 };

package/dist/components/ProgressLoader/ProgressLoader.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 const spinnerSizes = { xl: 89, lg: 56, md: 40, sm: 34 };
 const animationDuration = 4000; // Длительность анимации в миллисекундах
 const stepTime = 100; // Интервал обновления в миллисекундах
-export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, animated = false, }) => {
+export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, animated = false, testId = 'default' }) => {
     const [percent, setPercent] = useState(value);
     const spinnerSize = typeof size === 'string' ? spinnerSizes[size] : size;
     const validPercentage = Math.min(Math.max(value, 0), 100);
@@ -54,8 +54,8 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
             setPercent(validPercentage);
         }
     }, [animated, validPercentage]);
-    return (React.createElement("div", { className: progressLoaderWrapperClasses, style: { width: spinnerSize, height: spinnerSize } },
-        React.createElement("svg", { id: "svg1", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["progress-loader"] },
+    return (React.createElement("div", { className: progressLoaderWrapperClasses, style: { width: spinnerSize, height: spinnerSize }, "data-test-id": `${testId}-progressloader` },
+        React.createElement("svg", { id: "svg1", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["progress-loader"], "data-test-id": `${testId}-progressloader-image` },
             React.createElement("circle", { cx: center, cy: center, r: radius, stroke: "#e5e5ea", strokeWidth: strokeWidth, fill: "none", style: { strokeLinecap: 'round' } }),
             React.createElement("circle", { cx: center, cy: center, r: radius, stroke: 'var(--blue-main)', strokeWidth: strokeWidth, fill: "none", style: {
                     strokeDasharray: `${dashArray}`,
@@ -66,7 +66,7 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
                     //transition: animated ? 'stroke-dashoffset 0.5s ease-in-out' : 'none',
                 } }, animated && (React.createElement("animate", { attributeName: "stroke-dashoffset", dur: `${animationDuration / 1000}`, values: `${circumference}; ${percent / 100}`, fill: "freeze" })))),
         showValue && size !== 'sm' && (React.createElement("div", { className: styles["progress-percentage"] },
-            React.createElement(Typography, { variant: "Subheading2", color: '#9CA0A7', style: { fontSize: getTypographySize(), fontWeight: '300' } },
+            React.createElement(Typography, { variant: "Subheading2", color: '#9CA0A7', style: { fontSize: getTypographySize(), fontWeight: '300' }, testId: `${testId}-progressloader` },
                 percent,
                 "%")))));
 };

package/dist/components/RadioButton/RadioButton.js

@@ -3,13 +3,13 @@ import styles from './RadioButton.module.css';
 import classNames from 'classnames';
 ;
 import { Typography } from '../Typography/Typography';
-export const RadioButton = ({ value, label, checked, onChange, disabled = false, size = 'sm' }) => {
+export const RadioButton = ({ value, label, checked, onChange, disabled = false, size = 'sm', testId = 'default' }) => {
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles.radio },
-        React.createElement("input", { type: "radio", checked: checked, value: value, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
-        React.createElement(Typography, { variant: 'Body2' }, label)));
+    return (React.createElement("label", { className: styles.radio, "data-test-id": `${testId}-radio` },
+        React.createElement("input", { type: "radio", name: "radio", checked: checked, value: value, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]), "data-test-id": `${testId}-radio-input` }),
+        React.createElement(Typography, { variant: 'Body2', testId: `${testId}-radio` }, label)));
 };

package/dist/components/SettingTag/SettingTag.js

@@ -2,15 +2,15 @@ import React, { useState } from 'react';
 import { Tag } from '../Tag/Tag';
 import ColorPicker from '../ColorPicker/ColorPicker';
 import styles from './SettingTag.module.css';
-export const SettingTag = ({ label, color, onChange }) => {
+export const SettingTag = ({ label, color, onChange, testId = 'default' }) => {
     const [isHovered, setIsHovered] = useState(false);
     const [currentColor, setCurrentColor] = useState(color);
     const colorsOptions = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink'];
-    return (React.createElement("div", { style: { display: 'flex', gap: `${isHovered ? '5px' : '10px'}`, flexDirection: 'row', alignItems: 'center' } },
-        React.createElement(Tag, { label: label, color: currentColor, editable: true, onChange: onChange }),
+    return (React.createElement("div", { style: { display: 'flex', gap: `${isHovered ? '5px' : '10px'}`, flexDirection: 'row', alignItems: 'center' }, "data-test-id": `${testId}-settingtag` },
+        React.createElement(Tag, { label: label, color: currentColor, editable: true, onChange: onChange, testId: `${testId}-settingtag` }),
         !isHovered ? (React.createElement("div", { className: styles.circle, onMouseEnter: () => setIsHovered(true), style: {
                 width: 10,
                 height: 10,
                 backgroundColor: (currentColor === null || currentColor === void 0 ? void 0 : currentColor.startsWith('#')) ? currentColor : `var(--${currentColor})`,
-            } })) : (React.createElement(ColorPicker, { mainColor: currentColor, recentColors: isHovered ? colorsOptions : [], setIsHovered: setIsHovered, onChange: onChange, onColorChange: setCurrentColor }))));
+            }, "data-test-id": `${testId}-settingtag-color` })) : (React.createElement(ColorPicker, { mainColor: currentColor, recentColors: isHovered ? colorsOptions : [], setIsHovered: setIsHovered, onChange: onChange, onColorChange: setCurrentColor, testId: `${testId}-settingtag` }))));
 };

package/dist/components/Snackbar/Snackbar.js

@@ -26,7 +26,7 @@ export const title = (lng) => ({
     warning: lng === 'ru' ? 'Внимание' : 'Warning',
     info: lng === 'ru' ? 'Информация' : 'Info',
 });
-export const Snackbar = ({ children, type, duration = 10000, icon = true, onClose, style, lng = 'ru' }) => {
+export const Snackbar = ({ children, type, duration = 10000, icon = true, onClose, style, lng = 'ru', testId = 'default' }) => {
     const [isVisible, setIsVisible] = useState(true);
     const [isExiting, setIsExiting] = useState(false);
     useEffect(() => {
@@ -49,12 +49,12 @@ export const Snackbar = ({ children, type, duration = 10000, icon = true, onClos
     const snackbarClasses = classNames(styles['snackbar-wrapper'], styles[`snackbar--${type}`], {
         [styles['snackbar-wrapper--exiting']]: isExiting
     });
-    return (React.createElement("div", { className: snackbarClasses, style: style },
-        React.createElement("div", { className: styles['snackbar-textAndIcon'] },
+    return (React.createElement("div", { className: snackbarClasses, style: style, "data-test-id": `${testId}-snackbar-${type}` },
+        React.createElement("div", { className: styles['snackbar-textAndIcon'], "data-test-id": `${testId}-snackbar-${type}-icon` },
             icon && icons[type],
-            React.createElement("div", { className: styles['snackbar-text'] },
-                React.createElement(Typography, { variant: "Body1-Medium", color: 'var(--text-dark)' }, title(lng)[type]),
-                React.createElement(Typography, { variant: "Body1", color: 'var(--text-btn-light)' }, children))),
-        React.createElement("button", { className: styles.button, onClick: handleClose },
+            React.createElement("div", { className: styles['snackbar-text'], "data-test-id": `${testId}-snackbar-text` },
+                React.createElement(Typography, { variant: "Body1-Medium", color: 'var(--text-dark)', testId: `${testId}-snackbar-${type}-title` }, title(lng)[type]),
+                React.createElement(Typography, { variant: "Body1", color: 'var(--text-btn-light)', testId: `${testId}-snackbar-${type}-content` }, children))),
+        React.createElement("button", { className: styles.button, onClick: handleClose, "data-test-id": `${testId}-snackbar-${type}-close-button` },
             React.createElement(IconClose, { htmlColor: 'var(--text-btn-light)' }))));
 };

package/dist/components/Spinner/Spinner.js

@@ -5,7 +5,7 @@ import styles from './Spinner.module.css';
  * Компонент Spinner отображает индикатор загрузки.
  */
 const spinnerSizes = { lg: 54, md: 34, sm: 24, xs: 8 };
-export const Spinner = ({ size = 'md', }) => {
+export const Spinner = ({ size = 'md', testId = 'default' }) => {
     const spinnerSize = typeof size === 'string' ? spinnerSizes[size] : size;
     const viewBoxSize = 100;
     const strokeWidth = size === 'lg' || size === 'md' ? 12 : 10;
@@ -14,8 +14,8 @@ export const Spinner = ({ size = 'md', }) => {
             width: adjustedSize,
             height: adjustedSize,
             padding: strokeWidth
-        } },
-        React.createElement("svg", { id: "spinner", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["spinner"], fill: "none", color: 'var(--blue-main)' },
+        }, "data-test-id": `${testId}-spinner` },
+        React.createElement("svg", { id: "spinner", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["spinner"], fill: "none", color: 'var(--blue-main)', "data-test-id": `${testId}-spinner-svg` },
             React.createElement("defs", null,
                 React.createElement("linearGradient", { id: "spinner-secondHalf" },
                     React.createElement("stop", { offset: "0%", stopOpacity: "0", stopColor: "currentColor" }),